Gritter Project - aka Clover - Code review

Hi, my first time posting any code. Personalised this a bit! so not actually Gritter : )

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./resources/css/style.css">
        <!---navbar section-->
        <nav class="navbar">
                <li><a class="blue" href="">Clover-fy</a></li>
                <li><a href="">Clover's Landing Banner</a></li>
                <li><a href="">Clover</a></li>
        <!---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>

        <!---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">
            <div id="greets">
                        <div class="avatar"></div><span>Hey there, its Clover again.</span>
                        <div class="avatar"></div><span>Hey I haven't eaten enough socks today.</span>
                        <div class="avatar"></div><span>I'm sooo hungry, it been 5 minutes since my last snack.</span>
.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;
} {
    color: blue;