Skip to content
Recreate Google Homepage Assignment - The Odin Project
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Google Homepage

Recreating the Google Homepage as Assignment for The Odin Project Web Dev 101 Track.

You can check out the completed project using this link:

Notable Code Snippets

Here are a some code snippets I've found on the internet that helped me out in building the google homepage:

Removing the Shadow / Border on the Input Element on selection / click

  outline: none;

Fix Footer to Bottom

footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;

Center DIV Horizontal/Vertical to Screen

Used this code to center the main div which contains the search area so it's always on the center of the screen

div {
  text-align: center;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);


Jhon Manuncia [@jhonmanuncia] (

Version History

  • 0.2

    • Added Basic Structure
    • Added CSS Styling and Icons / Images
  • 0.1

    • Initial Release
You can’t perform that action at this time.