DEV Community

Cover image for Google Homepage Clone With HTML and CSS | By Frontend Everything
Frontend Everything
Frontend Everything

Posted on • Originally published at frontendeverything.in

Google Homepage Clone With HTML and CSS | By Frontend Everything

Hello Everyone 👋Welcome to My New Blog Post! Today I have made a Google homepage clone with the help of HTML and CSS | We have used no JavaScript in this 😎

I am Piyush, Sharing About Web development Daily. You can also check out me at @frontendeverything .

Let's start making the google homepage clone step by step

First,
We will make the nav, in the navbar we will include 4 things - Gmail, images, menu, sign-in button.

Let's see the HTML Code of the navbar



Output till now

google
This is nav with CSS we will move on CSS after html

Second part of HTML,

We will make the center part of the google home page with will include logo, searchbar and buttons.

Let's see the Code of the center part



Google logo

















Output till now

this is with CSS styling will show the CSS code after this html

The final HTML Part,

This is the final part we will make the footer of the google homepage it will not contain many things!

Let's see the Code of the footer/last part





This is the Output till now note: this output is not with css

output with css

This is the full CSS,

Before we have only code HTML, this is the full CSS code
html {

height: 100%;

font-size: 100%

}

body {

font: 13px arial;

sans-serif;

}

/* ------- Nav Items ------- /

ul {

list-style: none;

padding: 0px;

line-height: 0px;

}

li {

display: inline-block;

padding: 5px 7px;

vertical-align: middle;

}

nav, footer {

padding: 4px 20px;

}

/
------- Top Nav ------- /

nav img {

list-style: none;

color: #000;

opacity: 0.85;

}

nav a {

text-decoration: none;

color: #000;

opacity: 0.75;

}

nav ul li a:hover {

text-decoration-line: underline;

opacity: 0.65;

}

/
------- Right Nav Items ------- /

.r_nav {

float: right;

position: relative;

padding-top: 0px;

padding-right: 8px;

}

.apps {

width: 16px;

height: 16px;

margin-top: -2px;

padding-right: 9px;

opacity: 0.75;

}

.apps:hover {

opacity: 1;

}

/
------- Sign In Button ------- /

.sign_in {

border: 1px solid #4285f4;

outline: none;

background: #4285f4;

display: inline-block;

line-height: 28px;

padding: 0 12px;

border-radius: 2px;

}

.sign_in a {

font-weight: bold;

color: #fff;

opacity: 1;

text-decoration: none;

}

.sign_in a:hover {

opacity: 1;

text-decoration: none;

}

.sign_in:hover {

opacity: 1;

box-shadow: 0 1.5px 0 0 #e4e4e4;

}

/
------- Center Conte ------- /

.cntr_pg {

position: absolute;

top: 40%;

left: 50%;

margin-right: -50%;

transform: translate(-50%, -50%)

}

.logo {

display: 100%;

height: 92px;

width: 272px;

display: block;

margin: auto;

}

.form {

display: block;

margin: auto;

}

.search_bar {

border-radius: 40px;

width: 585px;

margin: auto;

height: 39px;

border: .7px solid #E4E4E4;

background-color: #fff;

box-shadow:0px 1px 4px #E4E4E4;

margin-bottom: 20px;

outline: none;

text-indent: 15px;

}

.search_bar:hover, .search_bar:active {

padding-bottom: 2px;

padding-top: 1px;

margin-top: -1px;

width: 585px;

box-shadow:0px 3px 8px #E4E4E4;

outline: none;

}

.mic {

width: 14px;

height: 20px;

position: relative;

left: 555px;

top: 34px;

}

.submit_buttons {

display: inline-block;

height: 36px;

cursor: pointer;

line-height: 27px;

background-color: #f2f2f2;

border: 1px solid #f2f2f2;

border-radius: 2px;

color: #757575;

cursor: default;

font-family: arial,sans-serif;

font-size: 13px;

font-weight: bold;

margin: 11px 4px;

min-width: 54px;

padding: 0 16px;

text-align: center;

}

.submit_buttons {

position: relative;

left: 25%;

right: -50%;

cursor: pointer;

}

.submit_buttons:hover {

border: .7px solid #d0d0d0;

color: #000;

box-shadow:0px 1px 4px #E4E4E4;

}

/
------- Footer ------- */

.l_ftr {

float: left;

}

.r_ftr {

float: right;

}

footer {

line-height: 0px;

position: absolute;

left: 0;

right: 0;

bottom: 0;

color: #666666;

background-color: #f2f2f2;

border-top: solid 1px #e4e4e4;

}

footer a {

text-decoration: none;

color: #000;

opacity: 0.75;

}

footer a:hover {

text-decoration-line: underline;

}

This is complete code of CSS

Final Output
google
Final output of google homepage

To make your work easier here is the codepen link 🤩. don't forget to follow me there if you liked the project 😄.

This is codepen link: https://codepen.io/CodedByPiyush/pen/vYJpMpV
.
.
.
.
.
Thank You For Scrolling Till here 😊. If You gain any knowledge then do checkout me at @frontendeverything . I am Piyush 🎉 I provide Content related to programming, technology, web development Daily.
.

Discussion (0)