HTML CSS Projects
Google Search Clone With HTML CSS | Download UI/UX Free Template Of Google Clone
How to Clone Any Website UI/UX Design With HTML CSS
Download UI/UX Free Template Of Google Clone, Build Google search clone with the help of HTML and CSS, Best CSS HTML project for beginners, Clone Website design with HTML CSS.
Here in this tutorial, you will find out some crore understanding that how you can clone any web application design with the help of HTML CSS, using its properties.
In this tutorial, you will have a better understanding that how you can use the HTML tag and CSS property to style in a page like a Google search.
Check Out: All HTML, CSS & JavaScript Projects
UI/UX Free Template Of Google Clone
All the codes are provided down below so you can easily download the source code of the HTML CSS project.
Hope this tutorial will help you and increase your understanding that how HTML CSS and JavaScript work.
We haven’t used any external libraries to achieve the styling of the Google clone we will build this from scratch using HTML and CSS only.
Therefore this project of HTML and CSS is beginner-friendly.
It will help you to increase your understanding of web development and how you can design beautiful UI with the help of CSS and HTML.
Best CSS HTML project for beginners
HTML Code
<div class=”container”>
<div class=”navbar”>
<div class=”nav-items”>
<div class=”langagus”>Languages</div>
<div class=”social-profile”>
<div class=”email”><i class=”uil uil-envelope-block”></i></div>
<div class=”menu-list”><i class=”uil uil-draggabledots” ></i>
<div class=”menuBox”>
<div class=”imageBox”>
<img src=”/social.png” alt=”” class=”profile”>
<small>DAULAT HUSSAIN</small>
<div class=”text”>
<p>HEY, I’M
DAULAT HUSSAIN
I’m here to bring a lot of new guides and information about branding, health,
business, News & Marketing.</p>
</div>
<div class=”social-media”>
<span><i class=”uil uil-facebook-f”></i></span>
<span><i class=”uil uil-instagram”></i></span>
<span><i class=”uil uil-twitter”></i></span>
<span><i class=”uil uil-youtube”></i></i></span>
</div>
</div>
</div>
</div>
<img src=”/download.png” alt=””>
</div>
</div>
</div>
<div class=”body-content”>
<div class=”search-area”>
<span><i class=”uil uil-google”></i></span>
<input type=”text” placeholder=”Type your search”>
<span><i class=”uil uil-microphone”></i></span>
</div>
<div class=”sharing”>
<span><i class=”uil uil-plus”></i></span>
<span><i class=”uil uil-images”></i></span>
<span><i class=”uil uil-bookmark”></i></span>
<span><i class=”uil uil-nerd”></i></span>
</div>
</div>
<div class=”footer”>
<div class=”name”>Daulat Hussain</div>
<div class=”footertext”>
<span><i class=”uil uil-plus” “></i></span>
<span><i class=” uil uil-images”></i></span>
</div>
</div>
</div>
CSS Code
* {
margin: 0;
padding: 0;
font-family: ‘Courier New’, Courier, monospace;
box-sizing: border-box;
}
body {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
.uil {
color: #fff;
cursor: pointer;
}
.container {
width: 80vw;
height: 80vh;
background-color: black;
border-radius: 20px;
box-shadow: 10px 10px 34px -8px rgba(0, 0, 0, 0.75);
}
.container .navbar {
width: 100%;
height: 100px;
background-color: blanchedalmond;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.navbar .nav-items {
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-items .langagus {
margin-left: 30px;
margin-top: 30px;
background: black;
padding: 10px;
color: #fff;
border-radius: 20px;
box-shadow: 10px 10px 34px -8px rgba(0, 0, 0, 0.75);
}
.nav-items .langagus::after {
content: ‘V’;
margin-left: 10px;
background-color: #fff;
color: black;
font-weight: 900;
padding: 0 10px;
border-radius: 10px;
}
.nav-items .social-profile {
width: 15vw;
margin-right: 30px;
margin-top: 30px;
cursor: pointer;
}
.imageBox {
width: 200px;
height: 300px;
z-index: 100;
background-color: blanchedalmond;
position: absolute;
margin-left: -12rem;
margin-top: 2rem;
border-radius: 10px;
box-shadow: 10px 10px 34px -8px rgba(0, 0, 0, 1);
display: flex;
align-items: center;
flex-direction: column;
}
.imageBox::after{
content: “”;
width: 20px;
height: 20px;
background-color: blanchedalmond;
box-shadow: 10px 10px 34px -8px rgba(0, 0, 0, 0.75);
margin-top: -18.2rem;
margin-left: 9rem;
}
.imageBox .profile {
margin-top: 1rem;
width: 4rem;
height: 4rem;
border-radius: 50px;
}
.imageBox small {
font-size: 20px;
color: black;
font-weight: 900;
border-bottom: 2px solid black;
width: 100%;
text-align: center;
}
.imageBox .text {
padding: 10px 20px;
color: black;
font-weight: 700;
font-size: 14px;
}
.imageBox .social-media {
margin-top: 10px;
}
.imageBox .social-media span {
margin: 0 5px;
}
.imageBox .social-media .uil {
width: 40px;
height: 40px;
background-color: black;
padding: 7px;
border-radius: 10px;
font-size: 15px;
color: #fff;
box-shadow: 10px 10px 34px -8px rgba(0, 0, 0, 0.75);
}
.emailText{
width: 300px;
height: 100px;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
padding: 40px;
border-radius: 10px;
margin-right: 20rem;
margin-top: 8rem;
}
.emailText input{
height: 5px;
background-color: black;
}
.nav-items .social-profile {
display: flex;
justify-content: space-between;
}
.social-profile>div {
background-color: rgba(0, 0, 0, 0.75);
width: 2rem;
height: 2rem;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
border-radius: 10px;
}
.social-profile img {
width: 30px;
height: 30px;
}
.body-content {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
width: 30vw;
}
.body-content .search-area {
display: flex;
justify-content: center;
align-items: center;
background-color: aliceblue;
padding: 10px 20px;
border-radius: 50px;
}
.google {
color: #000;
font-size: 20px;
}
input {
border: none;
outline: none;
padding: 20px;
background-color: aliceblue;
font-size: 15px;
}
span .uil {
color: black;
font-size: x-large;
}
.body-content .sharing {
display: flex;
justify-content: center;
align-items: center;
margin-top: 30px;
}
.sharing .uil {
color: rgb(0, 0, 0);
padding: 10px;
background-color: rgba(255, 255, 255, 0.75);
margin: 7px;
border-radius: 10px;
}
.footer {
width: 100%;
height: 50px;
bottom: 0;
background-color: blanchedalmond;
position: absolute;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 40px;
}
.footertext .uil {
margin: 0 10px;
background-color: rgba(0, 0, 0, 0.75);
width: 2rem;
height: 2rem;
padding: 5px;
color: #fff;
border-radius: 10px;
}
.footer .name {
font-weight: 900;
font-size: 20px;
}
Javascript Code
const menuItems = document.querySelector(‘.menu-list’);
const menuBox = document.querySelector(‘.menuBox’);
menuItems.addEventListener(‘click’, () => {
if (menuBox.style.display === ‘block’) {
menuBox.style.display = ‘none’
} else {
menuBox.style.display = ‘block’;
}
})
Health Calculator
Download Both Project Source Code
Just Wait We Are Preparing The To Download
My Services
Recent Post
Read...
Google Search Clone With HTML CSS | Download UI/UX Free Template Of Google Clone
How to Clone Any Website UI/UX Design With HTML CSS
Download UI/UX Free Template Of Google Clone, Build Google search clone with the help of HTML and CSS, Best CSS HTML project for beginners, Clone Website design with HTML CSS.
Here in this tutorial, you will find out some crore understanding that how you can clone any web application design with the help of HTML CSS, using its properties.
In this tutorial, you will have a better understanding that how you can use the HTML tag and CSS property to style in a page like a Google search.
Check Out: All HTML, CSS & JavaScript Projects
UI/UX Free Template Of Google Clone
All the codes are provided down below so you can easily download the source code of the HTML CSS project.
Hope this tutorial will help you and increase your understanding that how HTML CSS and JavaScript work.
We haven’t used any external libraries to achieve the styling of the Google clone we will build this from scratch using HTML and CSS only.
Therefore this project of HTML and CSS is beginner-friendly.
It will help you to increase your understanding of web development and how you can design beautiful UI with the help of CSS and HTML.
Best CSS HTML project for beginners
HTML Code
<div class=”container”>
<div class=”navbar”>
<div class=”nav-items”>
<div class=”langagus”>Languages</div>
<div class=”social-profile”>
<div class=”email”><i class=”uil uil-envelope-block”></i></div>
<div class=”menu-list”><i class=”uil uil-draggabledots” ></i>
<div class=”menuBox”>
<div class=”imageBox”>
<img src=”/social.png” alt=”” class=”profile”>
<small>DAULAT HUSSAIN</small>
<div class=”text”>
<p>HEY, I’M
DAULAT HUSSAIN
I’m here to bring a lot of new guides and information about branding, health,
business, News & Marketing.</p>
</div>
<div class=”social-media”>
<span><i class=”uil uil-facebook-f”></i></span>
<span><i class=”uil uil-instagram”></i></span>
<span><i class=”uil uil-twitter”></i></span>
<span><i class=”uil uil-youtube”></i></i></span>
</div>
</div>
</div>
</div>
<img src=”/download.png” alt=””>
</div>
</div>
</div>
<div class=”body-content”>
<div class=”search-area”>
<span><i class=”uil uil-google”></i></span>
<input type=”text” placeholder=”Type your search”>
<span><i class=”uil uil-microphone”></i></span>
</div>
<div class=”sharing”>
<span><i class=”uil uil-plus”></i></span>
<span><i class=”uil uil-images”></i></span>
<span><i class=”uil uil-bookmark”></i></span>
<span><i class=”uil uil-nerd”></i></span>
</div>
</div>
<div class=”footer”>
<div class=”name”>Daulat Hussain</div>
<div class=”footertext”>
<span><i class=”uil uil-plus” “></i></span>
<span><i class=” uil uil-images”></i></span>
</div>
</div>
</div>
CSS Code
* {
margin: 0;
padding: 0;
font-family: ‘Courier New’, Courier, monospace;
box-sizing: border-box;
}
body {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
.uil {
color: #fff;
cursor: pointer;
}
.container {
width: 80vw;
height: 80vh;
background-color: black;
border-radius: 20px;
box-shadow: 10px 10px 34px -8px rgba(0, 0, 0, 0.75);
}
.container .navbar {
width: 100%;
height: 100px;
background-color: blanchedalmond;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.navbar .nav-items {
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-items .langagus {
margin-left: 30px;
margin-top: 30px;
background: black;
padding: 10px;
color: #fff;
border-radius: 20px;
box-shadow: 10px 10px 34px -8px rgba(0, 0, 0, 0.75);
}
.nav-items .langagus::after {
content: ‘V’;
margin-left: 10px;
background-color: #fff;
color: black;
font-weight: 900;
padding: 0 10px;
border-radius: 10px;
}
.nav-items .social-profile {
width: 15vw;
margin-right: 30px;
margin-top: 30px;
cursor: pointer;
}
.imageBox {
width: 200px;
height: 300px;
z-index: 100;
background-color: blanchedalmond;
position: absolute;
margin-left: -12rem;
margin-top: 2rem;
border-radius: 10px;
box-shadow: 10px 10px 34px -8px rgba(0, 0, 0, 1);
display: flex;
align-items: center;
flex-direction: column;
}
.imageBox::after{
content: “”;
width: 20px;
height: 20px;
background-color: blanchedalmond;
box-shadow: 10px 10px 34px -8px rgba(0, 0, 0, 0.75);
margin-top: -18.2rem;
margin-left: 9rem;
}
.imageBox .profile {
margin-top: 1rem;
width: 4rem;
height: 4rem;
border-radius: 50px;
}
.imageBox small {
font-size: 20px;
color: black;
font-weight: 900;
border-bottom: 2px solid black;
width: 100%;
text-align: center;
}
.imageBox .text {
padding: 10px 20px;
color: black;
font-weight: 700;
font-size: 14px;
}
.imageBox .social-media {
margin-top: 10px;
}
.imageBox .social-media span {
margin: 0 5px;
}
.imageBox .social-media .uil {
width: 40px;
height: 40px;
background-color: black;
padding: 7px;
border-radius: 10px;
font-size: 15px;
color: #fff;
box-shadow: 10px 10px 34px -8px rgba(0, 0, 0, 0.75);
}
.emailText{
width: 300px;
height: 100px;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
padding: 40px;
border-radius: 10px;
margin-right: 20rem;
margin-top: 8rem;
}
.emailText input{
height: 5px;
background-color: black;
}
.nav-items .social-profile {
display: flex;
justify-content: space-between;
}
.social-profile>div {
background-color: rgba(0, 0, 0, 0.75);
width: 2rem;
height: 2rem;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
border-radius: 10px;
}
.social-profile img {
width: 30px;
height: 30px;
}
.body-content {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
width: 30vw;
}
.body-content .search-area {
display: flex;
justify-content: center;
align-items: center;
background-color: aliceblue;
padding: 10px 20px;
border-radius: 50px;
}
.google {
color: #000;
font-size: 20px;
}
input {
border: none;
outline: none;
padding: 20px;
background-color: aliceblue;
font-size: 15px;
}
span .uil {
color: black;
font-size: x-large;
}
.body-content .sharing {
display: flex;
justify-content: center;
align-items: center;
margin-top: 30px;
}
.sharing .uil {
color: rgb(0, 0, 0);
padding: 10px;
background-color: rgba(255, 255, 255, 0.75);
margin: 7px;
border-radius: 10px;
}
.footer {
width: 100%;
height: 50px;
bottom: 0;
background-color: blanchedalmond;
position: absolute;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 40px;
}
.footertext .uil {
margin: 0 10px;
background-color: rgba(0, 0, 0, 0.75);
width: 2rem;
height: 2rem;
padding: 5px;
color: #fff;
border-radius: 10px;
}
.footer .name {
font-weight: 900;
font-size: 20px;
}
Javascript Code
const menuItems = document.querySelector(‘.menu-list’);
const menuBox = document.querySelector(‘.menuBox’);
menuItems.addEventListener(‘click’, () => {
if (menuBox.style.display === ‘block’) {
menuBox.style.display = ‘none’
} else {
menuBox.style.display = ‘block’;
}
})
Health Calculator
Download Both Project Source Code
Just Wait We Are Preparing The To Download
My Services
Recent Post
Read...
Google Search Clone With HTML CSS | Download UI/UX Free Template Of Google Clone
Download UI/UX Free Template Of Google Clone, Build Google search clone with the help of HTML and CSS, Best CSS HTML project for beginners, Clone Website design with HTML CSS.
Here in this tutorial, you will find out some crore understanding that how you can clone any web application design with the help of HTML CSS, using its properties.
In this tutorial, you will have a better understanding that how you can use the HTML tag and CSS property to style in a page like a Google search.
Check Out: All HTML, CSS & JavaScript Projects
HEALTH CALCULATOR
How to Clone Any Website UI/UX Design With HTML CSS
All the codes are provided down below so you can easily download the source code of the HTML CSS project.
Hope this tutorial will help you and increase your understanding that how HTML CSS and JavaScript work.
We haven’t used any external libraries to achieve the styling of the Google clone we will build this from scratch using HTML and CSS only.
UI/UX Free Template Of Google Clone
Therefore this project of HTML and CSS is beginner-friendly.
It will help you to increase your understanding of web development and how you can design beautiful UI with the help of CSS and HTML.
UI/UX Free Template Of Google Clone
HTML Code
<div class=”body-content”>
<div class=”search-area”>
<span><i class=”uil uil-google”></i></span>
<input type=”text” placeholder=”Type your search”>
<span><i class=”uil uil-microphone”></i></span>
</div>
<div class=”sharing”>
<span><i class=”uil uil-plus”></i></span>
<span><i class=”uil uil-images”></i></span>
<span><i class=”uil uil-bookmark”></i></span>
<span><i class=”uil uil-nerd”></i></span>
</div>
</div>
<div class=”footer”>
<div class=”name”>Daulat Hussain</div>
<div class=”footertext”>
<span><i class=”uil uil-plus” “></i></span>
<span><i class=” uil uil-images”></i></span>
</div>
</div>
</div>
CSS Code
* {
margin: 0;
padding: 0;
font-family: ‘Courier New’, Courier, monospace;
box-sizing: border-box;
}
body {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
.uil {
color: #fff;
cursor: pointer;
}
.container {
width: 80vw;
height: 80vh;
background-color: black;
border-radius: 20px;
box-shadow: 10px 10px 34px -8px rgba(0, 0, 0, 0.75);
}
.container .navbar {
width: 100%;
height: 100px;
background-color: blanchedalmond;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.navbar .nav-items {
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-items .langagus {
margin-left: 30px;
margin-top: 30px;
background: black;
padding: 10px;
color: #fff;
border-radius: 20px;
box-shadow: 10px 10px 34px -8px rgba(0, 0, 0, 0.75);
}
.nav-items .langagus::after {
content: ‘V’;
margin-left: 10px;
background-color: #fff;
color: black;
font-weight: 900;
padding: 0 10px;
border-radius: 10px;
}
.nav-items .social-profile {
width: 15vw;
margin-right: 30px;
margin-top: 30px;
cursor: pointer;
}
.imageBox {
width: 200px;
height: 300px;
z-index: 100;
background-color: blanchedalmond;
position: absolute;
margin-left: -12rem;
margin-top: 2rem;
border-radius: 10px;
box-shadow: 10px 10px 34px -8px rgba(0, 0, 0, 1);
display: flex;
align-items: center;
flex-direction: column;
}
.imageBox::after{
content: “”;
width: 20px;
height: 20px;
background-color: blanchedalmond;
box-shadow: 10px 10px 34px -8px rgba(0, 0, 0, 0.75);
margin-top: -18.2rem;
margin-left: 9rem;
}
.imageBox .profile {
margin-top: 1rem;
width: 4rem;
height: 4rem;
border-radius: 50px;
}
.imageBox small {
font-size: 20px;
color: black;
font-weight: 900;
border-bottom: 2px solid black;
width: 100%;
text-align: center;
}
.imageBox .text {
padding: 10px 20px;
color: black;
font-weight: 700;
font-size: 14px;
}
.imageBox .social-media {
margin-top: 10px;
}
.imageBox .social-media span {
margin: 0 5px;
}
.imageBox .social-media .uil {
width: 40px;
height: 40px;
background-color: black;
padding: 7px;
border-radius: 10px;
font-size: 15px;
color: #fff;
box-shadow: 10px 10px 34px -8px rgba(0, 0, 0, 0.75);
}
.emailText{
width: 300px;
height: 100px;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
padding: 40px;
border-radius: 10px;
margin-right: 20rem;
margin-top: 8rem;
}
.emailText input{
height: 5px;
background-color: black;
}
.nav-items .social-profile {
display: flex;
justify-content: space-between;
}
.social-profile>div {
background-color: rgba(0, 0, 0, 0.75);
width: 2rem;
height: 2rem;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
border-radius: 10px;
}
.social-profile img {
width: 30px;
height: 30px;
}
.body-content {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
width: 30vw;
}
.body-content .search-area {
display: flex;
justify-content: center;
align-items: center;
background-color: aliceblue;
padding: 10px 20px;
border-radius: 50px;
}
.google {
color: #000;
font-size: 20px;
}
input {
border: none;
outline: none;
padding: 20px;
background-color: aliceblue;
font-size: 15px;
}
span .uil {
color: black;
font-size: x-large;
}
.body-content .sharing {
display: flex;
justify-content: center;
align-items: center;
margin-top: 30px;
}
.sharing .uil {
color: rgb(0, 0, 0);
padding: 10px;
background-color: rgba(255, 255, 255, 0.75);
margin: 7px;
border-radius: 10px;
}
.footer {
width: 100%;
height: 50px;
bottom: 0;
background-color: blanchedalmond;
position: absolute;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 40px;
}
.footertext .uil {
margin: 0 10px;
background-color: rgba(0, 0, 0, 0.75);
width: 2rem;
height: 2rem;
padding: 5px;
color: #fff;
border-radius: 10px;
}
.footer .name {
font-weight: 900;
font-size: 20px;
}
Javascript Code
const menuItems = document.querySelector(‘.menu-list’);
const menuBox = document.querySelector(‘.menuBox’);
menuItems.addEventListener(‘click’, () => {
if (menuBox.style.display === ‘block’) {
menuBox.style.display = ‘none’
} else {
menuBox.style.display = ‘block’;
}
})
Just Wait We Are Preparing The To Download
Recent Post
Read...
Read...
HTML, CSS & JAVASCRIPT
JavaScript is the world’s most popular programming language. JavaScript is the programming language of the Web
Develop Your Understanding While building HTML, CSS & JavaScript Projects. Find All The Project Source Code.
