2
\$\begingroup\$

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:

    <!DOCTYPE html>
<html>
  <head>
    <title>Google</title>
    <link rel="stylesheet" href="style.css">
  </head>

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

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

    <footer>
      <div class="left">
        <a href="#">Advertising</a>
        <a href="#">Business</a>
      </div>
      <div class="right">
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
        <a href="#">Settings</a>
      </div>
    </footer>
  </body>
  </html>

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;
}
\$\endgroup\$
1
\$\begingroup\$

All looks good as a start, I would advise on sticking the footer to the bottom of the page using the following piece of css.

position: fixed;
bottom: 0;

This will affect the positioning of the text but that can be remedied by setting the position to fixed on the right div to realign it to the right of the page.

\$\endgroup\$
0
\$\begingroup\$

Html Id's Must be A unique Value for each element, If you wish to Name things with the same name then class Should be used instead.

inside your Css

#userinput > Box Shadow has a spelling mistake. of 10ox instead of 10px.

background-color: Can be shortened to just background:YourColor;

Opacity Property should be between 0 & 1, 0.60 => The 0 is redundant and can be removed

inside your footer Css I would swap the div & the a, order around as the a is inside the div. & also The default color is black anyway. So this can possibly be removed. I noticed you using padding-top it seems to set the height of the footer, this is Ok, but just 'height' is 4 less Characters. So shortens your code slightly.

also if you are just starting out try to get into the habbit of using 'vw', 'vh', 'vmin' & 'vmax' units for any widths and heights.
They stand for;

  'vh'   => viewport Height,
  'vw'   => viewport Width,
  'vmin' => viewport Minimum,
  'vmax' => viewport Maximum.

They Are responsive to The device that A page is being viewed on, Where-as px, rem, em etc are not truely responsive. Hope these help :)

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.