Sunday, January 29, 2023
HomeCSSHow to Build Gmail Clone using HTML and CSS | Tutorial

How to Build Gmail Clone using HTML and CSS | Tutorial

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.

Download Code Files

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Posts

Categories