JSFiddle

  • Google Homepage

    No-Library (pure JS), HTML, CSS, JavaScript

    	<title>Google</title>
    	<link rel="stylesheet" type="text/css" href="google-homepage-css.css">
    <!-- Top bar -->
    <body>
    <div id="topbar">
    <p align="right"><a href="https://mail.google.com" style="color:#7D7676;text-decoration: none">Gmail</a>&nbsp;&nbsp;<a href="https://images.google.com" style="color:#7D7676;text-decoration: none">Images</a>&nbsp;&nbsp;<img style="vertical-align:middle" src="http://i.imgur.com/xmMdSIp.png">&nbsp;</p>
    </div>
    <br>
    <!-- Google Center Image -->
    <div id="centered">
    <div id="logo"><img id="header" src="http://i.imgur.com/hs6n5hR.png" width="400"></div></div>
    
    <!-- Search Bar and Buttons -->
    <div class="search">
    	<form class="searchbar" width="500"><br>
      	<input type="text" ><br>
    	</form><br>
    	<button type="button" id="firstbutton">Google Search</button>
    	<button type="button" id="secondbutton">I'm Feeling Lucky</button>
    </div>
    
    <!-- Footer -->
    <div class="footer">
    	<p class="alignleft"><a href="https://www.google.com/intl/en/ads/" style="color:#666;text-decoration: none">&nbsp;&nbsp;Advertising</a>
    	&nbsp;&nbsp;&nbsp;
    	<p class="alignleft"><a href="https://www.google.com/services/" style="color:#666;text-decoration: none">Business</a>
    	&nbsp;&nbsp;&nbsp;
    	<p class="alignleft"><a href="https://www.google.com/intl/en/about/" style="color:#666;text-decoration: none">About</a></p>
    	<p class="alignright"><a href="https://www.google.com/intl/en/policies/privacy/" style="color:#666;text-decoration: none">Privacy</a>
    	&nbsp;&nbsp;
    	<a href="https://www.google.com/intl/en/policies/terms/" style="color:#666;text-decoration: none">Terms</a>
    	&nbsp;&nbsp;
    	<a href="https://www.google.com/preferences" style="color:#666;text-decoration: none">Settings&nbsp;&nbsp;</a></p>
    </div>
  • Google Homepage #1 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    	<title>Google</title>
    	<link rel="stylesheet" type="text/css" href="google-homepage-css.css">
    <!-- Top bar -->
    <body>
    <div id="topbar">
    <p align="right"><a href="https://mail.google.com" style="color:#7D7676;text-decoration: none">Gmail</a>&nbsp;&nbsp;<a href="https://images.google.com" style="color:#7D7676;text-decoration: none">Images</a>&nbsp;&nbsp;<img style="vertical-align:middle" src="http://i.imgur.com/xmMdSIp.png">&nbsp;</p>
    </div>
    <br>
    <!-- Google Center Image -->
    <div id="centered">
    <div id="logo"><img id="header" src="http://i.imgur.com/hs6n5hR.png" width="400"></div></div>
    
    <!-- Search Bar and Buttons -->
    <div id="search">
    	<form id="searchbar" width="500"><br>
      	<input type="text" ><br>
    	</form><br>
    	<button type="button" id="firstbutton">Google Search</button>
    	<button type="button" id="secondbutton">I'm Feeling Lucky</button>
    </div>
    
    <!-- Footer -->
    <div class="footer">
    	<p class="alignleft"><a href="https://www.google.com/intl/en/ads/" style="color:#666;text-decoration: none">&nbsp;&nbsp;Advertising</a>
    	&nbsp;&nbsp;&nbsp;
    	<p class="alignleft"><a href="https://www.google.com/services/" style="color:#666;text-decoration: none">Business</a>
    	&nbsp;&nbsp;&nbsp;
    	<p class="alignleft"><a href="https://www.google.com/intl/en/about/" style="color:#666;text-decoration: none">About</a></p>
    	<p class="alignright"><a href="https://www.google.com/intl/en/policies/privacy/" style="color:#666;text-decoration: none">Privacy</a>
    	&nbsp;&nbsp;
    	<a href="https://www.google.com/intl/en/policies/terms/" style="color:#666;text-decoration: none">Terms</a>
    	&nbsp;&nbsp;
    	<a href="https://www.google.com/preferences" style="color:#666;text-decoration: none">Settings&nbsp;&nbsp;</a></p>
    </div>