Hello Coders, In this article we are going to learn how to create Gmail Clone using HTML and CSS.
Gmail has an amazing UI design which makes it completely unique and very attractive. We will practice our html and css skills by redesigning the GMAIL UI. I have provided all the necessary video tutorial as well as the complete source code of this project for you to follow along.
Build GMAIL Clone with HTML and CSS | Video Tutorial
Watch the above step by step video tutorial and follow along with it to build this project. I have explained each and everything in the video. If you are a complete beginner then the video will help you understand all the things.
Build GMAIL Clone with HTML and CSS | Source Code
Below I have provided both html and css source code of this project. You can also download the complete source code of this project by clicking on the download button at the bottom of this article.
How do I build GMAIL Clone in HTML? HTML Source Code
Create an index.html file and add all the required boiler plate of the html document and copy the below code.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Google Font Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link rel="stylesheet" href="styles.css" />
<title>Final - Gmail Clone</title>
</head>
<body>
<!-- Header Starts -->
<div class="header">
<div class="header__left">
<span class="material-icons"> menu </span>
<img
src="https://i.pinimg.com/originals/ae/47/fa/ae47fa9a8fd263aa364018517020552d.png"
alt=""
/>
</div>
<div class="header__middle">
<span class="material-icons"> search </span>
<input type="text" placeholder="Search mail" />
<span class="material-icons"> arrow_drop_down </span>
</div>
<div class="header__right">
<span class="material-icons"> apps </span>
<span class="material-icons"> notifications </span>
<span class="material-icons"> account_circle </span>
</div>
</div>
<!-- Header Ends -->
<!-- Main Body Starts -->
<div class="main__body">
<!-- Sidebar Starts -->
<div class="sidebar">
<button class="sidebar__compose"><span class="material-icons"> add </span>Compose</button>
<div class="sidebarOption sidebarOption__active">
<span class="material-icons"> inbox </span>
<h3>Inbox</h3>
</div>
<div class="sidebarOption">
<span class="material-icons"> star </span>
<h3>Starred</h3>
</div>
<div class="sidebarOption">
<span class="material-icons"> access_time </span>
<h3>Snoozed</h3>
</div>
<div class="sidebarOption">
<span class="material-icons"> label_important </span>
<h3>Important</h3>
</div>
<div class="sidebarOption">
<span class="material-icons"> near_me </span>
<h3>Sent</h3>
</div>
<div class="sidebarOption">
<span class="material-icons"> note </span>
<h3>Drafts</h3>
</div>
<div class="sidebarOption">
<span class="material-icons"> expand_more </span>
<h3>More</h3>
</div>
<div class="sidebar__footer">
<div class="sidebar__footerIcons">
<span class="material-icons"> person </span>
<span class="material-icons"> duo </span>
<span class="material-icons"> phone </span>
</div>
</div>
</div>
<!-- Sidebar Ends -->
<!-- Email List Starts -->
<div class="emailList">
<!-- Settings Starts -->
<div class="emailList__settings">
<div class="emailList__settingsLeft">
<input type="checkbox" />
<span class="material-icons"> arrow_drop_down </span>
<span class="material-icons"> redo </span>
<span class="material-icons"> more_vert </span>
</div>
<div class="emailList__settingsRight">
<span class="material-icons"> chevron_left </span>
<span class="material-icons"> chevron_right </span>
<span class="material-icons"> keyboard_hide </span>
<span class="material-icons"> settings </span>
</div>
</div>
<!-- Settings Ends -->
<!-- Section Starts -->
<div class="emailList__sections">
<div class="section section__selected">
<span class="material-icons"> inbox </span>
<h4>Primary</h4>
</div>
<div class="section">
<span class="material-icons"> people </span>
<h4>Social</h4>
</div>
<div class="section">
<span class="material-icons"> local_offer </span>
<h4>Promotions</h4>
</div>
</div>
<!-- Section Ends -->
<!-- Email List rows starts -->
<div class="emailList__list">
<!-- Email Row Starts -->
<div class="emailRow">
<div class="emailRow__options">
<input type="checkbox" name="" id="" />
<span class="material-icons"> star_border </span>
<span class="material-icons"> label_important </span>
</div>
<h3 class="emailRow__title">YouTube</h3>
<div class="emailRow__message">
<h4>
You Got a New Subscriber
<span class="emailRow__description"> - on Your Channel Future Coders </span>
</h4>
</div>
<p class="emailRow__time">10pm</p>
</div>
<!-- Email Row Ends -->
<!-- Email Row Starts -->
<div class="emailRow">
<div class="emailRow__options">
<input type="checkbox" name="" id="" />
<span class="material-icons"> star_border </span>
<span class="material-icons"> label_important </span>
</div>
<h3 class="emailRow__title">YouTube</h3>
<div class="emailRow__message">
<h4>
You Got a New Subscriber
<span class="emailRow__description"> - on Your Channel Future Coders </span>
</h4>
</div>
<p class="emailRow__time">10pm</p>
</div>
<!-- Email Row Ends -->
<!-- Email Row Starts -->
<div class="emailRow">
<div class="emailRow__options">
<input type="checkbox" name="" id="" />
<span class="material-icons"> star_border </span>
<span class="material-icons"> label_important </span>
</div>
<h3 class="emailRow__title">YouTube</h3>
<div class="emailRow__message">
<h4>
You Got a New Subscriber<span class="emailRow__description">
- on Your Channel Future Coders
</span>
</h4>
</div>
<p class="emailRow__time">10pm</p>
</div>
<!-- Email Row Ends -->
<!-- Email Row Starts -->
<div class="emailRow">
<div class="emailRow__options">
<input type="checkbox" name="" id="" />
<span class="material-icons"> star_border </span>
<span class="material-icons"> label_important </span>
</div>
<h3 class="emailRow__title">Google</h3>
<div class="emailRow__message">
<h4>
Login on New Device<span class="emailRow__description">
- is this your Device ?
</span>
</h4>
</div>
<p class="emailRow__time">2am</p>
</div>
<!-- Email Row Ends -->
<!-- Email Row Starts -->
<div class="emailRow">
<div class="emailRow__options">
<input type="checkbox" name="" id="" />
<span class="material-icons"> star_border </span>
<span class="material-icons"> label_important </span>
</div>
<h3 class="emailRow__title">YouTube</h3>
<div class="emailRow__message">
<h4>
You Got a New Subscriber
<span class="emailRow__description"> - on Your Channel Future Coders </span>
</h4>
</div>
<p class="emailRow__time">10pm</p>
</div>
<!-- Email Row Ends -->
<!-- Email Row Starts -->
<div class="emailRow">
<div class="emailRow__options">
<input type="checkbox" name="" id="" />
<span class="material-icons"> star_border </span>
<span class="material-icons"> label_important </span>
</div>
<h3 class="emailRow__title">YouTube</h3>
<div class="emailRow__message">
<h4>
You Got a New Subscriber
<span class="emailRow__description"> - on Your Channel Future Coders </span>
</h4>
</div>
<p class="emailRow__time">10pm</p>
</div>
<!-- Email Row Ends -->
<!-- Email Row Starts -->
<div class="emailRow">
<div class="emailRow__options">
<input type="checkbox" name="" id="" />
<span class="material-icons"> star_border </span>
<span class="material-icons"> label_important </span>
</div>
<h3 class="emailRow__title">YouTube</h3>
<div class="emailRow__message">
<h4>
You Got a New Subscriber<span class="emailRow__description">
- on Your Channel Future Coders
</span>
</h4>
</div>
<p class="emailRow__time">10pm</p>
</div>
<!-- Email Row Ends -->
<!-- Email Row Starts -->
<div class="emailRow">
<div class="emailRow__options">
<input type="checkbox" name="" id="" />
<span class="material-icons"> star_border </span>
<span class="material-icons"> label_important </span>
</div>
<h3 class="emailRow__title">Google</h3>
<div class="emailRow__message">
<h4>
Login on New Device<span class="emailRow__description">
- is this your Device ?
</span>
</h4>
</div>
<p class="emailRow__time">2am</p>
</div>
<!-- Email Row Ends -->
<!-- Email Row Starts -->
<div class="emailRow">
<div class="emailRow__options">
<input type="checkbox" name="" id="" />
<span class="material-icons"> star_border </span>
<span class="material-icons"> label_important </span>
</div>
<h3 class="emailRow__title">YouTube</h3>
<div class="emailRow__message">
<h4>
You Got a New Subscriber
<span class="emailRow__description"> - on Your Channel Future Coders </span>
</h4>
</div>
<p class="emailRow__time">10pm</p>
</div>
<!-- Email Row Ends -->
<!-- Email Row Starts -->
<div class="emailRow">
<div class="emailRow__options">
<input type="checkbox" name="" id="" />
<span class="material-icons"> star_border </span>
<span class="material-icons"> label_important </span>
</div>
<h3 class="emailRow__title">YouTube</h3>
<div class="emailRow__message">
<h4>
You Got a New Subscriber
<span class="emailRow__description"> - on Your Channel Future Coders </span>
</h4>
</div>
<p class="emailRow__time">10pm</p>
</div>
<!-- Email Row Ends -->
<!-- Email Row Starts -->
<div class="emailRow">
<div class="emailRow__options">
<input type="checkbox" name="" id="" />
<span class="material-icons"> star_border </span>
<span class="material-icons"> label_important </span>
</div>
<h3 class="emailRow__title">YouTube</h3>
<div class="emailRow__message">
<h4>
You Got a New Subscriber<span class="emailRow__description">
- on Your Channel Future Coders
</span>
</h4>
</div>
<p class="emailRow__time">10pm</p>
</div>
<!-- Email Row Ends -->
<!-- Email Row Starts -->
<div class="emailRow">
<div class="emailRow__options">
<input type="checkbox" name="" id="" />
<span class="material-icons"> star_border </span>
<span class="material-icons"> label_important </span>
</div>
<h3 class="emailRow__title">Google</h3>
<div class="emailRow__message">
<h4>
Login on New Device<span class="emailRow__description">
- is this your Device ?
</span>
</h4>
</div>
<p class="emailRow__time">2am</p>
</div>
<!-- Email Row Ends -->
<!-- Email Row Starts -->
<div class="emailRow">
<div class="emailRow__options">
<input type="checkbox" name="" id="" />
<span class="material-icons"> star_border </span>
<span class="material-icons"> label_important </span>
</div>
<h3 class="emailRow__title">YouTube</h3>
<div class="emailRow__message">
<h4>
You Got a New Subscriber
<span class="emailRow__description"> - on Your Channel Future Coders </span>
</h4>
</div>
<p class="emailRow__time">10pm</p>
</div>
<!-- Email Row Ends -->
<!-- Email Row Starts -->
<div class="emailRow">
<div class="emailRow__options">
<input type="checkbox" name="" id="" />
<span class="material-icons"> star_border </span>
<span class="material-icons"> label_important </span>
</div>
<h3 class="emailRow__title">YouTube</h3>
<div class="emailRow__message">
<h4>
You Got a New Subscriber
<span class="emailRow__description"> - on Your Channel Future Coders </span>
</h4>
</div>
<p class="emailRow__time">10pm</p>
</div>
<!-- Email Row Ends -->
<!-- Email Row Starts -->
<div class="emailRow">
<div class="emailRow__options">
<input type="checkbox" name="" id="" />
<span class="material-icons"> star_border </span>
<span class="material-icons"> label_important </span>
</div>
<h3 class="emailRow__title">YouTube</h3>
<div class="emailRow__message">
<h4>
You Got a New Subscriber<span class="emailRow__description">
- on Your Channel Future Coders
</span>
</h4>
</div>
<p class="emailRow__time">10pm</p>
</div>
<!-- Email Row Ends -->
<!-- Email Row Starts -->
<div class="emailRow">
<div class="emailRow__options">
<input type="checkbox" name="" id="" />
<span class="material-icons"> star_border </span>
<span class="material-icons"> label_important </span>
</div>
<h3 class="emailRow__title">Google</h3>
<div class="emailRow__message">
<h4>
Login on New Device<span class="emailRow__description">
- is this your Device ?
</span>
</h4>
</div>
<p class="emailRow__time">2am</p>
</div>
<!-- Email Row Ends -->
<!-- Email Row Starts -->
<div class="emailRow">
<div class="emailRow__options">
<input type="checkbox" name="" id="" />
<span class="material-icons"> star_border </span>
<span class="material-icons"> label_important </span>
</div>
<h3 class="emailRow__title">YouTube</h3>
<div class="emailRow__message">
<h4>
You Got a New Subscriber
<span class="emailRow__description"> - on Your Channel Future Coders </span>
</h4>
</div>
<p class="emailRow__time">10pm</p>
</div>
<!-- Email Row Ends -->
<!-- Email Row Starts -->
<div class="emailRow">
<div class="emailRow__options">
<input type="checkbox" name="" id="" />
<span class="material-icons"> star_border </span>
<span class="material-icons"> label_important </span>
</div>
<h3 class="emailRow__title">YouTube</h3>
<div class="emailRow__message">
<h4>
You Got a New Subscriber
<span class="emailRow__description"> - on Your Channel Future Coders </span>
</h4>
</div>
<p class="emailRow__time">10pm</p>
</div>
<!-- Email Row Ends -->
<!-- Email Row Starts -->
<div class="emailRow">
<div class="emailRow__options">
<input type="checkbox" name="" id="" />
<span class="material-icons"> star_border </span>
<span class="material-icons"> label_important </span>
</div>
<h3 class="emailRow__title">YouTube</h3>
<div class="emailRow__message">
<h4>
You Got a New Subscriber<span class="emailRow__description">
- on Your Channel Future Coders
</span>
</h4>
</div>
<p class="emailRow__time">10pm</p>
</div>
<!-- Email Row Ends -->
<!-- Email Row Starts -->
<div class="emailRow">
<div class="emailRow__options">
<input type="checkbox" name="" id="" />
<span class="material-icons"> star_border </span>
<span class="material-icons"> label_important </span>
</div>
<h3 class="emailRow__title">Google</h3>
<div class="emailRow__message">
<h4>
Login on New Device<span class="emailRow__description">
- is this your Device ?
</span>
</h4>
</div>
<p class="emailRow__time">2am</p>
</div>
<!-- Email Row Ends -->
</div>
<!-- Email List rows Ends -->
</div>
<!-- Email List Ends -->
</div>
<!-- Main Body Ends -->
</body>
</html>
How do I design GMAIL in CSS? CSS Source Code
Create an styles.css file and link it our html document and copy the below codes.
* {
margin: 0;
padding: 0;
}
/* Header */
.header__left img {
object-fit: contain;
height: 80px;
margin-left: 5px;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid whitesmoke;
}
.header__left {
display: flex;
align-items: center;
}
.header__left span {
padding: 10px;
cursor: pointer;
}
.header__middle {
display: flex;
flex: 0.7;
align-items: center;
background-color: whitesmoke;
padding: 10px;
border-radius: 5px;
}
.material-icons {
color: gray;
}
.header__middle input {
border: none;
width: 100%;
padding: 10px;
outline: none;
font-size: medium;
background-color: transparent;
}
.header__right {
display: flex;
padding-right: 20px;
}
.header__right span {
padding: 10px;
cursor: pointer;
}
/* Sidebar */
.sidebar {
flex: 0.3;
max-width: 300px;
padding-right: 20px;
}
.sidebar__compose {
margin-top: 15px;
margin-left: 10px;
margin-bottom: 15px;
text-transform: capitalize;
color: gray;
padding: 15px;
border-radius: 30px;
background-color: white;
display: flex;
align-items: center;
cursor: pointer;
outline: none;
border: none;
box-shadow: 0px 2px 5px -2px rgba(0, 0, 0, 0.75);
}
.sidebar__compose span {
margin-right: 5px;
}
.sidebarOption {
display: flex;
align-items: center;
height: 40px;
padding: 0 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
cursor: pointer;
color: #818181;
}
.sidebarOption .material-icons {
padding: 5px;
}
.sidebarOption h3 {
flex: 1;
margin-left: 10px;
font-size: 14px;
font-weight: 400;
}
.sidebarOption:hover,
.sidebarOption:hover h3,
.sidebarOption:hover .material-icons,
.sidebarOption__active,
.sidebarOption__active h3,
.sidebarOption__active .material-icons {
background-color: #fcecec;
color: #c04b37;
font-weight: 800;
}
.sidebar__footer {
display: flex;
justify-content: center;
}
.sidebar__footerIcons .material-icons {
margin: 7px;
cursor: pointer;
}
/* main body */
.main__body {
display: flex;
height: 100vh;
}
body {
height: 100vh;
overflow-y: hidden;
}
/* email list */
.emailList {
flex: 1;
overflow: scroll;
}
.emailList__settings {
position: sticky;
top: 0;
display: flex;
justify-content: space-between;
border-bottom: 1px solid whitesmoke;
background-color: white;
z-index: 999;
padding: 8px;
}
.emailList__settingsLeft {
display: flex;
align-items: center;
}
.emailList__settings .material-icons {
margin: 5px;
cursor: pointer;
}
.section {
display: flex;
align-items: center;
border-bottom-width: 2px;
padding: 15px;
min-width: 200px;
cursor: pointer;
color: grey;
border-width: 0;
}
.emailList__sections {
position: sticky;
top: 0;
display: flex;
background-color: white;
border-bottom: 1px solid whitesmoke;
z-index: 999;
}
.section__selected {
background-color: whitesmoke;
border-width: 3px;
color: red;
border-bottom: 3px solid red;
}
.section__selected .material-icons {
color: red;
}
.section:hover {
background-color: whitesmoke;
border-width: 3px;
}
.section h4 {
font-size: 14px;
margin-left: 15px;
}
.emailRow__options {
display: flex;
align-items: center;
}
.emailRow__options .material-icons,
input {
margin: 5px;
}
.emailRow {
display: flex;
align-items: center;
height: 50px;
border-bottom: 1px solid whitesmoke;
cursor: pointer;
z-index: 999;
}
.emailRow:hover {
border-top: 1px solid whitesmoke;
box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.24);
}
.emailRow__message {
display: flex;
flex: 0.8;
align-items: center;
font-size: 13px;
}
.emailRow__message h4 {
width: 400px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-left: 5px;
padding-right: 5px;
}
.emailRow__title {
font-size: 13px;
flex: 0.3;
}
.emailRow__time {
padding-right: 15px;
font-size: 10px;
font-weight: bold;
}
.emailRow__description {
font-weight: 400;
color: gray;
}
Done! You can download the complete source code by clicking on download button below.
