Google Homepage Clone With HTML and CSS | By Frontend Everything
Tags: webdev, 100daysofcode, html, css
Published: 2021-11-10 16:06:36

 



Hello Everyone 👋Welcome to My New Blog Post! Today I have made a Google homepage clone with the help of HTML and CSS | We have used no JavaScript in this 😎

I am Piyush, Sharing About Web development Daily. You can also check out me at @frontendeverything.

Let's start making the google homepage clone step by step



First,
We will make the nav, in the navbar we will include 4 things - Gmail, images, menu, sign-in button.

Let's see the HTML Code of the navbar


 <nav>  
   <ul class="r_nav">  
    <li><a href="#">Gmail</a></li>  
    <li><a href="#">Images</a></li>  
    <li><a href="#"><img class="apps" src="https://thumb.ibb.co/gykLCw/grid_menu.png"</a></li>  
    <li class="sign_in"><a href="#">Sign in</a></li>  
   </ul>  
  </nav>  


Output till now


google
This is nav with CSS we will move on CSS after html


Second part of HTML,

We will make the center part of the google home page with will include logo, searchbar and buttons.

Let's see the Code of the center part

 <section class="cntr_pg">  
   <img class="logo" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google logo" />  
   <img class="mic" src="https://upload.wikimedia.org/wikipedia/commons/2/22/Google_microphone_logo.png" alt="" />  
   <form action="#" method="#" name="searchquery">  
    <input type="text" name="searchfield" class="search_bar"></input>  
    <div class="search_buttons">  
     <input class="submit_buttons" type="submit" value="Google Search" name="submit">  
     <input class="submit_buttons" type="submit" value="I'm Feeling Lucky" name="feelinglucky"></input>  
    </div>  
   </form>  
  </section>  

Output till now


this is with CSS styling will show the CSS code after this html

The final HTML Part,

This is the final part we will make the footer of the google homepage it will not contain many things!

Let's see the Code of the footer/last part

  <footer>  
   <ul class="l_ftr">  
    <li><a href="#">India</a></li>  
    <li><a href="#">About</a></li>  
   </ul>  
   <ul class="r_ftr">  
    <li><a href="#">Privacy</a></li>  
    <li><a href="#">Terms</a></li>  
    <li><a href="#">Settings</a></li>  
   </ul>  
  </footer>  

This is the Output till now note: this output is not with css

output with css


This is the full CSS,

Before we have only code HTML, this is the full CSS code
 html {  
  height: 100%;  
  font-size: 100%  
 }  
 body {  
  font: 13px arial;  
  sans-serif;  
 }  
 /* ------- Nav Items ------- */  
 ul {  
  list-style: none;  
  padding: 0px;  
  line-height: 0px;  
 }  
 li {  
  display: inline-block;  
  padding: 5px 7px;  
  vertical-align: middle;  
 }  
 nav, footer {  
  padding: 4px 20px;  
 }  
 /* ------- Top Nav ------- */  
 nav img {  
  list-style: none;  
  color: #000;  
  opacity: 0.85;  
 }  
 nav a {  
  text-decoration: none;  
  color: #000;  
  opacity: 0.75;  
 }  
 nav ul li a:hover {  
  text-decoration-line: underline;  
  opacity: 0.65;  
 }  
 /* ------- Right Nav Items ------- */  
 .r_nav {  
  float: right;  
  position: relative;  
  padding-top: 0px;  
  padding-right: 8px;  
 }  
 .apps {  
  width: 16px;  
  height: 16px;  
  margin-top: -2px;  
  padding-right: 9px;  
  opacity: 0.75;  
 }  
 .apps:hover {  
  opacity: 1;  
 }  
 /* ------- Sign In Button ------- */  
 .sign_in {  
  border: 1px solid #4285f4;  
  outline: none;  
  background: #4285f4;  
  display: inline-block;  
  line-height: 28px;  
  padding: 0 12px;  
  border-radius: 2px;  
 }  
 .sign_in a {  
  font-weight: bold;  
  color: #fff;  
  opacity: 1;  
  text-decoration: none;  
 }  
 .sign_in a:hover {  
  opacity: 1;  
  text-decoration: none;  
 }  
 .sign_in:hover {  
  opacity: 1;  
  box-shadow: 0 1.5px 0 0 #e4e4e4;  
 }  
 /* ------- Center Conte ------- */  
 .cntr_pg {  
  position: absolute;  
  top: 40%;  
  left: 50%;  
  margin-right: -50%;  
  transform: translate(-50%, -50%)  
 }  
 .logo {  
      display: 100%;  
  height: 92px;  
  width: 272px;  
  display: block;  
  margin: auto;  
 }  
 .form {  
  display: block;  
  margin: auto;  
 }  
 .search_bar {  
      border-radius: 40px;  
  width: 585px;  
  margin: auto;  
  height: 39px;  
  border: .7px solid #E4E4E4;  
  background-color: #fff;  
  box-shadow:0px 1px 4px #E4E4E4;  
  margin-bottom: 20px;  
  outline: none;  
  text-indent: 15px;  
 }  
 .search_bar:hover, .search_bar:active {  
  padding-bottom: 2px;  
  padding-top: 1px;  
  margin-top: -1px;  
  width: 585px;  
  box-shadow:0px 3px 8px #E4E4E4;  
  outline: none;  
 }  
 .mic {  
  width: 14px;  
  height: 20px;  
  position: relative;  
  left: 555px;  
  top: 34px;  
 }  
 .submit_buttons {  
  display: inline-block;  
  height: 36px;  
      cursor: pointer;  
  line-height: 27px;  
  background-color: #f2f2f2;  
  border: 1px solid #f2f2f2;  
  border-radius: 2px;  
  color: #757575;  
  cursor: default;  
  font-family: arial,sans-serif;  
  font-size: 13px;  
  font-weight: bold;  
  margin: 11px 4px;  
  min-width: 54px;  
  padding: 0 16px;  
  text-align: center;  
 }  
 .submit_buttons {  
  position: relative;  
  left: 25%;  
  right: -50%;  
      cursor: pointer;  
 }  
 .submit_buttons:hover {  
  border: .7px solid #d0d0d0;  
  color: #000;  
  box-shadow:0px 1px 4px #E4E4E4;  
 }  
 /* ------- Footer ------- */  
 .l_ftr {  
  float: left;  
 }  
 .r_ftr {  
  float: right;  
 }  
 footer {  
  line-height: 0px;  
  position: absolute;  
  left: 0;  
  right: 0;  
  bottom: 0;  
  color: #666666;  
  background-color: #f2f2f2;  
  border-top: solid 1px #e4e4e4;  
 }  
 footer a {  
  text-decoration: none;  
  color: #000;  
  opacity: 0.75;  
 }  
 footer a:hover {  
  text-decoration-line: underline;  
 }  
This is complete code of CSS

Final Output
google
Final output of google homepage



To make your work easier here is the codepen link 🤩. don't forget to follow me there if you liked the project 😄.


This is codepen link: https://codepen.io/CodedByPiyush/pen/vYJpMpV
.
.
.
.
.
Thank You For Scrolling Till here 😊. If You gain any knowledge then do checkout me at @frontendeverything. I am Piyush 🎉 I provide Content related to programming, technology, web development  Daily.
.