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
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.
.
Top comments (0)