Building Google homepage - HELP!

HTML-CSS
1

Hi everyone!

I’m nearly finished with completing the Google homepage, but I’m encountering a problem.

The footer colour and link colour doesn’t change when I amend this. Have I done something wrong?
Here is the code:

https://codepen.io/mio-chung/pen/QWLBbWx

2

I’m also trying to add a search icon in the form field using FontAwesome.

Their code is <i class="fas fa-search"></i> I’ve tried to enter this code in after the form but nothing appears…

<!-- SEARCH FORM -->

<div class="form">
  <form>
    <input type="text" id="form-search" placeholder="">
  </form>
</div>
3

give your footer a height or padding and background should show, also i dont see a cdn for font awesome?

4

I’ve just added the FontAwesome code in HTMl, it still doesn’t display the search icon.

5

you need the cdn for it to work

<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet">

put it in the head tag

6

Thank you! I’ll try this.

The footer padding worked : ) however I still can’t change the link colour.

7

Ah the CDN, right! The search icon has appeared! But it seems to stick on either before or after the form, not inside the form box itself.

8

to change color of link

footer ul li a {
  color: yourColor;
}
9

Where did you find the CDN for Fontawesome? I couldn’t find it on their website.

10

yeah they use different system now i got that from one of my old projects but you will find the cdn on w3schools or cdnjs.com
https://cdnjs.com/libraries/font-awesome

1 Like
11

This is really helpful, thank you!

I’ve managed to change the font colour which is awesome.

For some reason the footer links are now not in a line like the top nav bar. I’ve applied the inline block so that I can place the elements together but it’s at the bottom of each other.

12

The search icon has appeared! But it seems to stick on either before or after the form, not inside the form box itself.

13

this might help you out https://www.geeksforgeeks.org/css-to-put-icon-inside-an-input-element-in-a-form/

14

and for your links the a should be on a separate one like this

footer ul li {
  display: inline-block;
  font-size: 15px;
  padding-right: 60px;
}
footer ul li a{
  color:black;
}
15

Thank you!

The footer background color is leaving a gap of colour at the bottom, do you know why this is occuring?
Also the page is not fitting in the browser, the width of the page is longer than the browser, so a scrolling bar appears. How do I ensure the code just fits onto the size of the browser?

16

if you add padding:50px; it will add padding to the sides too this is why you had a scrollbar so use padding: 50px 0; instead and to move the footer to the bottom use

position:absolute;
bottom:0;

here is example

footer {
  background: #EFEEEE;
  border-top: solid 2px #EFEEEE;
  padding:20px 0;
  position:absolute;
  bottom: 0px;
  width: 100%;
}
17

This is looking much better! I’ve tried to amend the border top and padding to reduce the footer background smaller, it looks a little big. But this is a the smallest I can amend. How would you go around this?

18

The search icon has appeared! But it seems to stick on either before or after the form, not inside the form box itself.

19

I used the margin to change the footer background size!

21

https://codepen.io/mio-chung/pen/QWLBbWx

I’ve styled a little more and looks quite similar to the homepage of Google!

What do you think?

I’m not sure why there’s a slight darker grey on the search form? Do you know how to get rid of this?