Here is both my HTML and CSS code:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8">
<meta name="description" content="This is just a test">
<meta name="keywords" content="Just, a, test">
<meta name="author" content="Me">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="fav.png">
</head>
<body>
<header id="main-header">
<div class="container">
<img width="150" height="150" src="image.png"/>
<img width="700" height="150" src="backgroundimage.png"/>
</div>
<hr>
</header>
<nav id="navbar">
<div class="container">
<ul>
<li><a href="#"></a>Home</li>
<li><a href="#"></a>About</li>
</ul>
</div>
<hr style="margin-top: 25px;">
</nav>
<div class="container">
<section id="showcase">
<h1>Welcome</h1>
<p>to the</p>
<h2>official</h2>
<h3>test site</h3>
</div>
</section>
<div class="container">
<section id="main">
<h1>Welcome!</h1>
<p></p>
</section>
<aside id="sidebar">
<p></p>
</aside>
</div>
<footer id="main-footer">
<p style="font-family:Verdana, Geneva, Tahoma, sans-serif">Me © 2020. All rights reserved.</p>
</footer>
</body>
</html>
body {
font-family: grobold;
font-size: 12px;
margin: 0;
background-color: #333;
background-image: url(background2.jpg);
background-repeat: no-repeat;
background-size: 100%;
color: #fff;
}
hr {
border: 0;
height: 3px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
margin-top: -2px;
}
.container {
overflow: hidden;
margin:auto;
width: 60%;
}
a {
color: #fff;
text-decoration:none;
font-style:inherit;
letter-spacing: 0.1em;
}
a:hover{
color: green;
}
#main-header{
padding: 30px;
padding-bottom: 20px;
margin-top: -30px;
}
#navbar {
color: white;
}
#navbar ul {
padding:0;
list-style: none;
}
#navbar li {
display: inline;
}
#navbar a {
text-decoration: none;
font-size: 20px;
padding-right: 60px;
padding-left: 40px;
color:#fff;
}
#showcase {
background-image: url("Login.png");
background-position: center;
background-repeat:no-repeat;
min-height: 500px;
margin-bottom: 30px;
text-align: center;
}
#showcase h1 {
color: green;
font-size: 25px;
line-height: 1.2em;
padding-top: 170px;
}
#showcase p {
font-size: 20px;
color: green;
}
#showcase h2 {
color: yellowgreen;
font-size: 30px;
line-height: 1.2em;
text-decoration: underline;
}
#showcase h3 {
color: green;
font-size: 30px;
line-height: 1.2em;
}
#main {
float: left;
width: 70%;
padding: 0 30px;
box-sizing: border-box;
}
#sidebar {
float: right;
width: 30%;
background: darkgray;
color: white;
padding: 0 10px;
box-sizing: border-box;
}
#main-footer {
position:relative;
color: #fff;
text-align: center;
padding: 20px;
margin-top: 138px;
font-size: 15px;
}
@media(max-width:600px){
#main{
float: none;
width: 100%;
}
}