Google homepage beginner project I was hoping to get some feedback on my basic recreation of the google homepage. Im doing the Odin Project learning course and this was the first project trying to use the basics of HTML/CSS

HTML file:

    &lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Google&lt;/title&gt;
    &lt;link rel="stylesheet" href="style.css"&gt;
  &lt;/head&gt;

  &lt;body&gt;
    &lt;header&gt;
      &lt;div class="left"&gt;
        &lt;a href="#"&gt;About&lt;/a&gt;
        &lt;a href="#"&gt;Store&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="right"&gt;
        &lt;a href="#"&gt;Gmail&lt;/a&gt;
        &lt;a href="#"&gt;Images&lt;/a&gt;
        &lt;a href="#"&gt;Apps&lt;/a&gt;
        &lt;button type="button" name="button" id="signin"&gt;Sign In&lt;/button&gt;
      &lt;/div&gt;
    &lt;/header&gt;

    &lt;div class="middle"&gt;
      &lt;img src= "https://www.gstatic.com/images/branding/googlelogo/2x/googlelogo_color_284x96dp.png"
      alt="Google Logo" width="360" height="100"&gt;
      &lt;br&gt;
      &lt;input type="text" name="userinput" id="userinput"&gt;
      &lt;br&gt;
      &lt;button type="button" id="searchbutton"&gt;Google Search&lt;/button&gt;
      &lt;button type="button" id="searchbutton"&gt;Im Feeling Lucky&lt;/button&gt;
    &lt;/div&gt;

    &lt;footer&gt;
      &lt;div class="left"&gt;
        &lt;a href="#"&gt;Advertising&lt;/a&gt;
        &lt;a href="#"&gt;Business&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="right"&gt;
        &lt;a href="#"&gt;Privacy&lt;/a&gt;
        &lt;a href="#"&gt;Terms&lt;/a&gt;
        &lt;a href="#"&gt;Settings&lt;/a&gt;
      &lt;/div&gt;
    &lt;/footer&gt;
  &lt;/body&gt;
  &lt;/html&gt;


CSS file:

    #userinput{
  height: 30px;
  width: 500px;
  border-radius: 24px;
  box-shadow:5px 10ox;
}

#signin{
  background-color: blue;
  color: white;
  border-radius: 3px;
  border: 1px solid blue;
}

#searchbutton{
  margin-top: 20px;
  opacity: .60;
  padding: 0 12px;
}

.right{
  float: right;
}

.left{
  float: left;
}

.middle{
  margin-left: 130px;
  padding-top: 200px;
}

button{
  line-height: 28px;
}

body{
  position: relative;
  text-align: center;
  font-size: 14px;
}

footer{
  padding-top: 200px;
}

a{
  color: black;
  text-decoration: none;
}

div{
  word-spacing: 40px;
  display: inline-block;
}
Your code is good, but I have some suggestion to improve it.

HTML

You used semantic HTML for the header and footer, but for the main content you did not use any semantic html. If you use semantic HTML tags for your main content like main tag and section tag, it will be more interesting.

In the below picture you can see you followed everything except the main content.



CSS

You can order your CSS code. I would order by layout; first your body CSS, then your header CSS and then finally your footer CSS.
Alternately you can order by other things like alphabet.

body{
  position: relative;
  text-align: center;
  font-size: 14px;
}

a{
  color: black;
  text-decoration: none;
}

div{
  word-spacing: 40px;
  display: inline-block;
}

.right{
  float: right;
}

.left{
  float: left;
}

#signin{
  background-color: blue;
  color: white;
  border-radius: 3px;
  border: 1px solid blue;
}

.middle{
  margin-left: 130px;
  padding-top: 200px;
}

 #userinput{
  height: 30px;
  width: 500px;
  border-radius: 24px;
  box-shadow:5px 10ox;
}

button{
  line-height: 28px;
}

#searchbutton{
  margin-top: 20px;
  opacity: .60;
  padding: 0 12px;
}

footer{
  padding-top: 200px;
}