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>

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>Èdè Yorùbá</a> <a>Nigerian Pidgin</a>
</p>

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;}
}

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.

Blog

How to design google homepage in html.

oladejo abdullahi

Join Our Newsletter. No Spam, Only the good stuff.

Related