On my replit I've made a home page and want the "news" page to be the same, but with a h2, but it moves the main.
CSS
:root{
font-family: Arial, Helvetica, sans-serif;
}
body{
background-color:green;
}
#epicloader{
background-color: black;
padding: 1rem;
}
.circle1{
width: 100px;
height: 100px;
border: 3px solid white;
border-radius: 100%;
border-right: 3px solid black;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
animation: spin1 1s linear infinite;
}
.circle2{
width: 70px;
height: 70px;
border: 3px dotted #6e3030;
border-radius: 100%;
border-right: 3px solid black;
animation: spin2 4s linear infinite;
}
@keyframes spin1{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
@keyframes spin2{
from{
transform: rotate(0deg);
}
50%{
border: 3px dotted #1e62eb;
border-right: 3px solid black;
}
to{
transform: rotate(360deg);
}
}
.hidden{
/* screen reader only hidden */
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
a{
color: inherit;
text-decoration: none;
}
a:hover{
color:red;
text-decoration: underline;
}
ul{
list-style: none;
display: flex;
flex-flow: row wrap;
justify-content: center;
gap: 5px;
position: relative;
bottom: 15px;
}
nav{
border: 2px solid black;
max-width: 700px;
margin: 0 auto;
background-color:white;
max-height: 15pt;
}
header{
margin: 0 auto;
max-width: 703px;
max-height: 125px;
height: 125px;
justify-content: center;
background-color:blue;
}
header img{
max-width: 703px;
}
main{
max-width: 700px;
margin: 0 auto;
border: 2px solid black;
border-top:none;
max-height: 650px;
height: 650px;
background-color:white;
}
footer{
background-color:white;
border: 2px solid black;
max-width: 700px;
margin: 0 auto;
font-size: small;
text-align: right;
border-top:none;
}
h2{
text-align:center;
color:Black;
}
Home Page HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="thethingihate.js"></script>
<div id="epicloader">
<div class="circle1">
<div class="circle2"></div>
</div>
</div>
<header>
<h1 class="hidden">durbie</h1>
<a href="/"><img src=""> </a>
</header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="news">News</a></li>
<li><a href="/">Guestbook</a></li>
<li><a href="/">About</a></li>
</ul>
</nav>
<main>
</main>
<footer>
<strong>100% not stolen</strong>
</footer>
</body>
</html>
News page HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<link href="/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="/thethingihate.js"></script>
<div id="epicloader">
<div class="circle1">
<div class="circle2"></div>
</div>
</div>
<header>
<h1 class="hidden">durbie</h1>
<a href="/"><img src=""> </a>
</header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="news">News</a></li>
<li><a href="/">Guestbook</a></li>
<li><a href="/">About</a></li>
</ul>
</nav>
<main>
<h2>work code boy</h2>
</main>
<footer>
<strong>100% not stolen</strong>
</footer>
</body>
</html>
Home: https://more-tests-because-i-am-coool.thedurbie.repl.co/ News: https://more-tests-because-i-am-coool.thedurbie.repl.co/news/
Replit: https://replit.com/@TheDurbie/more-tests-because-i-am-coool#news/index.html
I tried messing with CSS but nothing worked
