Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.DS_Store
README.md
google-favicon.ico
google-favicon.png
google-logo.png
index.html
lol.jpg
lol.jpg.sb-2c65f9ea-KKR6Ws
squared-icon.png
style.css

README.md

(This README is mostly for myself to look back to in the future)

This is my attempt at recreating the Google homepage as part of The Odin Project curriculum.

I did this to the best of my ability as of right now, 4/24/19 which is about 2 weeks since starting to learn HTML and CSS as a total beginner.

This tested my ability to create forms, styling input fields, styling buttons, as well using pseudo-selectors to style their hover and visted states, and well as styling links, removing their outline and changing their hover and visited states as well.

This also tested my current skills at creating nav-menus using lists. I found it challenging because this is not the kind of nav menu I am used at this point. The elements are seperated to the left and right. I used a combo of float and display: inline; to accomplish this. I'm not pleased with the CSS I used but in the end, it did generally have the effect I wanted.

I also added a favicon with a .png logo I found on a free icons site.

Things I was not able to figure out to learn later on:

box-shadowing when hovering over input field

adding the voice icon on the right of the input field.

aligning the squared menu and profile icon on the top right to exactly match the Google homepage

aliging the text in the footer directly in the center of the container vertically to exactly match the Google hompage.

hovering on the buttons causes unwanted movement. Unable to figure out why and how to stop it.

You can’t perform that action at this time.