DEV Community

Cover image for Create Google Clone using html css javascript | Google Clone code
Code with Random
Code with Random

Posted on

Create Google Clone using html css javascript | Google Clone code

In this blog, we learn that how we create a Google Clone. We use HTML, Css, and javascript for this Google Clone. Hope you enjoy our blog so let's start with a basic HTML structure for a Google Clone.

HTML code

  <ul class="nav nav-pills">  
   <li><a target='_blank' href="https://accounts.google.com/ServiceLogin?hl=en&passive=true&continue=https://www.google.co.uk/%3Fgws_rd%3Dssl" class="colorfix"><button class="btn" role="button">Sign in</button></a></li>  
   <li>  
    <a target='_blank' title="Google apps" class="firstsbuttons" href="#"><img class="quad" src="#" height="22" width="22"></a>  
   </li>  
   <li><a target='_blank' class="firstsbuttons" href="#">Images</a></li>  
   <li><a target='_blank' class="firstsbuttons" href="https://mail.google.com/mail/?tab=wm">Gmail</a></li>  
  </ul>  
  <div class="page">  
   <img class="logo" src="https://www.google.it/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">  
   <br><input id="searchme" class="search" title="Search" type="text"><br>  
   <div class="Bcontainer">  
    <div class="button left">Google Search</div>  
    <div class="button right">I'm Feeling Lucky</div>  
   </div>  
  </div>  
  <footer class="nav nav-tabs">  
   <ul class="bottomone rightone">  
    <li><a target="blank" href="#">Settings</a></li>  
    <li><a target="blank" href="#">Terms</a></li>  
    <li><a target="blank" href="#">Privacy</a></li>  
   </ul>  
   <ul class="leftone bottomone">  
    <li><a target="blank" href="#">About</a></li>  
    <li><a target="blank" href="#">Business</a></li>  
    <li><a target="blank" href="#">Advertising</a></li>  
   </ul>  
  </footer>  
 </body> 

Enter fullscreen mode Exit fullscreen mode

There is all HTML code for the Google Clone. Now, you can see output without CSS, then we write css & javascript for Google Clone read more

Top comments (0)