DEV Community


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>
<input type="search" name="searchBox"><br>
<button>google search</button>
<button>I'm Feeling Lucky</button>
Google offered in: <a>Hausa</a> <a>Igbo</a> 
<a>Èdè Yorùbá</a> <a>Nigerian Pidgin</a>
Enter fullscreen mode Exit fullscreen mode

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

input{width: 40vw;
height: 9vh;
border-radius: 45px 44px 44px 44px;
button{margin: 11px;
height: 5vh;
background: #fff;
border: #eee 1px solid;
border-radius:11px 0px 0px 0px }
a{color: blue;}
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)

Forem Open with the Forem app