DEV Community

loading...

How to design google homepage in html.

oladejo abdullahi
I am web developer and data scientist
・1 min read

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!!

Discussion (0)

Forem Open with the Forem app