Google project

<!DOCTYPE html>

<br>
.container{<br>
/<em>border: 1px solid;</em>/<br>
height: 200%;<br>
width: 100%; }</p>
<div class="highlight"><pre class="highlight plaintext"><code> body {
background-color: rgb(247, 243, 243);
}

    .header{
        display: flex;
        justify-content: end;
        padding: 1px;
    }
    .header a{
    /* border: 5px solid; */
     margin-right: 17px;
     padding-top: 5px;
     text-decoration: none;
     color: black;
    }
   .header img{
    border-radius: 50%;
   }
   .header a:hover{
    text-decoration: underline;
   }
 .main{
    display:flex;
    flex-direction: column;
    height: 100vh;
    align-items: center;
    justify-content: center;

 }
 .main img{
    width: 300px;
 }
 .main input{
    width: 400px;
    padding: 8px;
    border-radius:25px;
    margin: 15px;
}
.buttons button{
    padding: 10px;
    margin: 5px;
    background-color: white;
    border: 1px solid rgb(29, 28, 28);

}
.buttons button:hover{
    background-color: rgb(173, 173, 173);}

.footer{
display: flex;
justify-content: space-between;
}
.footer .left a{

margin: 10px;

}
.footer .right a{

 margin: 10px;}
 .footer a{
    text-decoration: none;
            }
   .footer a:hover{
   text-decoration: underline;
  }

</style>

<title>Google</title>
</code></pre></div>
<p></head><br>
<body></p>
<div class="highlight"><pre class="highlight plaintext"><code><div class = "header">
</code></pre></div>
<div class = "right">
<a href="">Gmail</a>
<a href="">image</a>
</div>

</div>
<div class="highlight"><pre class="highlight plaintext"><code></div>
<div class = "main">
<img src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg" alt="">
</code></pre></div>
<p><input type = "search" placeholder="Search Google or type URL"></p>

<div class = "buttons">
<button>Google search </button>
<button>I am Feeling lucky</button></div>
</div>