Hi, my first time posting any code. Personalised this a bit! so not actually Gritter : )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clover-fy</title>
<link rel="stylesheet" href="./resources/css/style.css">
</head>
<body>
<!---navbar section-->
<nav class="navbar">
<ul>
<li><a class="blue" href="">Clover-fy</a></li>
<li><a href="">Clover's Landing Banner</a></li>
<li><a href="">Clover</a></li>
</ul>
</nav>
<!---banner section--->
<div class="banner">
<h1>Clovers's Landing Banner</h1>
<img id="small-clover" src="./resources/images/clover1.jpg" alt="Close up of chocolate labrador face.">
<p>Because everythings better with Clover's face on it.</p>
<button>Subscribe to me or I'll lick you up</button>
</div>
<!---gritter section-->
<div class="clover-section">
<span class="bold"id="clover">Clover</span>
<p class="bold">Social media dedicated to Clover...and only Clover... because she's a psycho.</p>
<form actions="">
<input type="text"/>
<input type="submit" value="submit">
</form>
<div id="greets">
<ul>
<li>
<div class="avatar"></div><span>Hey there, its Clover again.</span>
</li>
<li>
<div class="avatar"></div><span>Hey I haven't eaten enough socks today.</span>
</li>
<li>
<div class="avatar"></div><span>I'm sooo hungry, it been 5 minutes since my last snack.</span>
</li>
</ul>
</div>
</div>
</body>
</html>
.navbar {
position: fixed;
width: 100%;
top: 0;
background-color: white;
}
.navbar li {
display: inline-block;
padding: 0px 20px;
}
.navbar a {
text-decoration: none;
color: black;
}
.banner {
background-color: rgb(35, 79, 24);
color: white;
margin-top: 50px;
text-align: center;
padding: 75px 0px;
}
#small-clover {
border-radius: 5%;
height: 300px;
width: 250px;
filter: drop-shadow(1px 1px 1px black);
}
.clover-section {
padding: 20px 50px;
}
#clover {
color: rgb(35, 79, 24);
font-size: 100px;
}
#greets ul {
list-style-type: none;
}
.avatar {
background-image: url(../images/clovercute.jpg);
background-size: cover;
height: 50px;
width: 50px;
border-radius: 50%;
display: inline-block;
vertical-align: middle;
}
.bold {
font-weight: 900;
}
a.blue {
color: blue;
}
