DEV Community

oladejo abdullahi
oladejo abdullahi

Posted on • Edited on

How to design google homepage in html.

So you have been wondering how Google was design with different colors it is very simple logic.
First, place a 'div' in your html with an id of googleHome.

<div id="googleHome"></div>
Enter fullscreen mode Exit fullscreen mode

inside the div open a p tags and write the following code

  <span style='color: blue'>G</span>
  <span style='color: red'>o</span>
  <span style='color: yellow'>o</span>
  <span style='color: blue'>g</span>
  <span style='color: green'>l</span>
  <span style='color: red'>e</span>
</p>
<input type="search" name="searchBox"><br>
<p>
<button>google search</button>
<button>I'm Feeling Lucky</button>
<br><br>
Google offered in: <a>Hausa</a> <a>Igbo</a> 
<a>Èdè Yorùbá</a> <a>Nigerian Pidgin</a>
</p> 
Enter fullscreen mode Exit fullscreen mode

Now you have to hop into css and type the following code

span{font-size:44px;}
body{text-align:center;}
input{width: 40vw;
height: 9vh;
border-radius: 45px 44px 44px 44px;
font-size:34px;}
button{margin: 11px;
height: 5vh;
background: #fff;
border: #eee 1px solid;
text-align:center;
border-radius:11px 0px 0px 0px }
a{color: blue;}
googleHome{
margin-top:15vh;}
}
Enter fullscreen mode Exit fullscreen mode

Unbelievable! we just make the google home page . this is it below.
link.
Enjoy coding!!

if you have any question don't hesitate to ask. chat me up on WhatsApp or Mail. Don't forget to follow me on Twitter so that you don't miss any of my articles.

Top comments (0)