YouTube Clone Design Using HTML and CSS

13 min read

In this tutorial, we will provide a complete source code to make a website design like YouTube. We will make this webpage using HTML and CSS.

 

Source Code

index.php
style.css
logo.svg
profile.jpeg

index.php

<html>
  
  <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">

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <title>YouTube Clone Design Using HTML and CSS</title>
  </head>

  <body>

    <div class="header">
      <div class="header-left">
        <i id="menu" class="material-icons">menu</i>
        <img src="logo.svg">
      </div>
      <div class="header-search">
        <form action="">
          <input type="text" placeholder="Search">
          <button>
            <i class="material-icons">search</i>
          </button>
        </form>
      </div>
      <div class="header-icons">
        <i class="material-icons display-this">search</i>
        <i class="material-icons">videocam</i>
        <i class="material-icons">apps</i>
        <i class="material-icons">notifications</i>
        <i class="material-icons display-this">account_circle</i>
      </div>
    </div>


    <div class="mainBody">
      <div class="sidebar">
        <div class="sidebar-categories">
          <div class="sidebar-category">
            <i class="material-icons">home</i>
            <span>Home</span>
          </div>
          <div class="sidebar-category">
            <i class="material-icons">local_fire_department</i>
            <span>Trending</span>
          </div>
          <div class="sidebar-category">
            <i class="material-icons">subscriptions</i>
            <span>Subscriptions</span>
          </div>
        </div>

        <hr />

        <div class="sidebar-categories">
          <div class="sidebar-category">
            <i class="material-icons">library_add_check</i>
            <span>Library</span>
          </div>
          <div class="sidebar-category">
            <i class="material-icons">history</i>
            <span>History</span>
          </div>
          <div class="sidebar-category">
            <i class="material-icons">play_arrow</i>
            <span>Your Videos</span>
          </div>
          <div class="sidebar-category">
            <i class="material-icons">watch_later</i>
            <span>Watch Later</span>
          </div>
          <div class="sidebar-category">
            <i class="material-icons">thumb_up</i>
            <span>Liked Videos</span>
          </div>
        </div>

        <hr />

      </div>
      <div class="videos">
        <h1>Recommended</h1>
        <div class="videos-container">

            <div class="video">
              <div class="video-thumbnail">
                <img src="https://i3.ytimg.com/vi/Hl3A_yknI-c/hqdefault.jpg">
              </div>
              <div class="video-details">
                <div class="author">
                  <img src="profile.jpeg">
                </div>
                <div class="title">
                  <h3>Real Time HTML CSS and JavaScript Editor with Preview</h3>
                  <a href="">
                    Lets Try This
                  </a>
                  <span>10K Views . 3 Months Ago</span>
                </div>
              </div>
            </div>
            <div class="video">
              <div class="video-thumbnail">
                <img src="https://i3.ytimg.com/vi/uCEaLxx9Jm8/maxresdefault.jpg">
              </div>
              <div class="video-details">
                <div class="author">
                  <img src="profile.jpeg">
                </div>
                <div class="title">
                  <h3>IPhone UI Design using HTML and CSS</h3>
                  <a href="">
                    Lets Try This
                  </a>
                  <span>10K Views . 3 Months Ago</span>
                </div>
              </div>
            </div>
            <div class="video">
              <div class="video-thumbnail">
                <img src="https://img.youtube.com/vi/24lVbqEvyMs/maxresdefault.jpg">
              </div>
              <div class="video-details">
                <div class="author">
                  <img src="profile.jpeg">
                </div>
                <div class="title">
                  <h3>Access Camera and Read QR code using JavaScript</h3>
                  <a href="">
                    Lets Try This
                  </a>
                  <span>10K Views . 3 Months Ago</span>
                </div>
              </div>
            </div>
            <div class="video">
              <div class="video-thumbnail">
                <img src="https://img.youtube.com/vi/PpXUTUXU7Qc/maxresdefault.jpg">
              </div>
              <div class="video-details">
                <div class="author">
                  <img src="profile.jpeg">
                </div>
                <div class="title">
                  <h3>Top 5 Programming Languages to Learn in 2021</h3>
                  <a href="">
                    Lets Try This
                  </a>
                  <span>10K Views . 3 Months Ago</span>
                </div>
              </div>
            </div>
            <div class="video">
              <div class="video-thumbnail">
                <img src="https://img.youtube.com/vi/PpXUTUXU7Qc/maxresdefault.jpg">
              </div>
              <div class="video-details">
                <div class="author">
                  <img src="profile.jpeg">
                </div>
                <div class="title">
                  <h3>Top 5 Programming Languages to Learn in 2021</h3>
                  <a href="">
                    Lets Try This
                  </a>
                  <span>10K Views . 3 Months Ago</span>
                </div>
              </div>
            </div>
            <div class="video">
              <div class="video-thumbnail">
                <img src="https://img.youtube.com/vi/PpXUTUXU7Qc/maxresdefault.jpg">
              </div>
              <div class="video-details">
                <div class="author">
                  <img src="profile.jpeg">
                </div>
                <div class="title">
                  <h3>Top 5 Programming Languages to Learn in 2021</h3>
                  <a href="">
                    Lets Try This
                  </a>
                  <span>10K Views . 3 Months Ago</span>
                </div>
              </div>
            </div>
            <div class="video">
              <div class="video-thumbnail">
                <img src="https://img.youtube.com/vi/PpXUTUXU7Qc/maxresdefault.jpg">
              </div>
              <div class="video-details">
                <div class="author">
                  <img src="profile.jpeg">
                </div>
                <div class="title">
                  <h3>Top 5 Programming Languages to Learn in 2021</h3>
                  <a href="">
                    Lets Try This
                  </a>
                  <span>10K Views . 3 Months Ago</span>
                </div>
              </div>
            </div>
            <div class="video">
              <div class="video-thumbnail">
                <img src="https://img.youtube.com/vi/PpXUTUXU7Qc/maxresdefault.jpg">
              </div>
              <div class="video-details">
                <div class="author">
                  <img src="profile.jpeg">
                </div>
                <div class="title">
                  <h3>Top 5 Programming Languages to Learn in 2021</h3>
                  <a href="">
                    Lets Try This
                  </a>
                  <span>10K Views . 3 Months Ago</span>
                </div>
              </div>
            </div>
            <div class="video">
              <div class="video-thumbnail">
                <img src="https://img.youtube.com/vi/PpXUTUXU7Qc/maxresdefault.jpg">
              </div>
              <div class="video-details">
                <div class="author">
                  <img src="profile.jpeg">
                </div>
                <div class="title">
                  <h3>Top 5 Programming Languages to Learn in 2021</h3>
                  <a href="">
                    Lets Try This
                  </a>
                  <span>10K Views . 3 Months Ago</span>
                </div>
              </div>
            </div>
            <div class="video">
              <div class="video-thumbnail">
                <img src="https://img.youtube.com/vi/PpXUTUXU7Qc/maxresdefault.jpg">
              </div>
              <div class="video-details">
                <div class="author">
                  <img src="profile.jpeg">
                </div>
                <div class="title">
                  <h3>Top 5 Programming Languages to Learn in 2021</h3>
                  <a href="">
                    Lets Try This
                  </a>
                  <span>10K Views . 3 Months Ago</span>
                </div>
              </div>
            </div>
            <div class="video">
              <div class="video-thumbnail">
                <img src="https://img.youtube.com/vi/PpXUTUXU7Qc/maxresdefault.jpg">
              </div>
              <div class="video-details">
                <div class="author">
                  <img src="profile.jpeg">
                </div>
                <div class="title">
                  <h3>Top 5 Programming Languages to Learn in 2021</h3>
                  <a href="">
                    Lets Try This
                  </a>
                  <span>10K Views . 3 Months Ago</span>
                </div>
              </div>
            </div>
            <div class="video">
              <div class="video-thumbnail">
                <img src="https://img.youtube.com/vi/PpXUTUXU7Qc/maxresdefault.jpg">
              </div>
              <div class="video-details">
                <div class="author">
                  <img src="profile.jpeg">
                </div>
                <div class="title">
                  <h3>Top 5 Programming Languages to Learn in 2021</h3>
                  <a href="">
                    Lets Try This
                  </a>
                  <span>10K Views . 3 Months Ago</span>
                </div>
              </div>
            </div>
            <div class="video">
              <div class="video-thumbnail">
                <img src="https://img.youtube.com/vi/PpXUTUXU7Qc/maxresdefault.jpg">
              </div>
              <div class="video-details">
                <div class="author">
                  <img src="profile.jpeg">
                </div>
                <div class="title">
                  <h3>Top 5 Programming Languages to Learn in 2021</h3>
                  <a href="">
                    Lets Try This
                  </a>
                  <span>10K Views . 3 Months Ago</span>
                </div>
              </div>
            </div>
            <div class="video">
              <div class="video-thumbnail">
                <img src="https://img.youtube.com/vi/PpXUTUXU7Qc/maxresdefault.jpg">
              </div>
              <div class="video-details">
                <div class="author">
                  <img src="profile.jpeg">
                </div>
                <div class="title">
                  <h3>Top 5 Programming Languages to Learn in 2021</h3>
                  <a href="">
                    Lets Try This
                  </a>
                  <span>10K Views . 3 Months Ago</span>
                </div>
              </div>
            </div>
            <div class="video">
              <div class="video-thumbnail">
                <img src="https://img.youtube.com/vi/PpXUTUXU7Qc/maxresdefault.jpg">
              </div>
              <div class="video-details">
                <div class="author">
                  <img src="profile.jpeg">
                </div>
                <div class="title">
                  <h3>Top 5 Programming Languages to Learn in 2021</h3>
                  <a href="">
                    Lets Try This
                  </a>
                  <span>10K Views . 3 Months Ago</span>
                </div>
              </div>
            </div>

        </div>
      </div>
    </div>




  </body>

</html>

style.css

*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}

body{
  font-family: sans-serif;
}

.material-icons{
  color:rgb(96, 96, 96);
}
.header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
  padding:15px;
}
.header-left{
  display: flex;
  align-items: center;
}
.header-left img{
  width:100px;
  margin-left:0.5rem;
}
.header i{
  padding:0 7px;
  cursor: pointer;
}
.header-search form{
  border:1px solid #ddd;
  height: 35px;
  margin:0;
  padding:0;
  display: flex;
}
.header-search input{
  width:500px;
  padding:10px;
  margin:0;
  border-radius: 0;
  border:none;
  height:100%;
}
.header-search button{
  padding:0;
  margin:0;
  height:100%;
  border:none;
  border-radius:0;
}

.mainBody{
  height: calc(100vh - 70px);
  display: flex;
  overflow:hidden;
}
.sidebar{
  height: 100%;
  width: 230px;
  background-color: #fff;
  overflow-y: scroll;
}
.sidebar-categories{
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
  margin-top: 15px;
}
.sidebar-category{
  display: flex;
  align-items: center;
  padding:12px 25px;
}
.sidebar-category span{
  margin-left: 15px;
}
.sidebar-category:hover{
  background-color: #e5e5e5;
  cursor: pointer;
}
.sidebar::-webkit-scrollbar{
  display: none;
}
.videos{
  background-color: #f9f9f9;
  width: 100%;
  height: 100%;
  padding:15px;
  border-top: 1px solid #ddd;
  overflow-y: scroll;
}
.videos-container{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}
.video{
  width:310px;
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 30px;
}
.video-thumbnail{
  width: 100%;
  height:170px;
}
.video-thumbnail img{
  object-fit: cover;
  height: 100%;
  width: 100%;
}
.author img{
  object-fit: cover;
  border-radius: 50%;
  height: 40px;
  width: 40px;
  margin-right: 10px;
}
.video-details{
  display: flex;
  margin-top:10px;
}
.title{
  display: flex;
  flex-direction: column;
}
.title h3{
  color:rgb(3,3,3);
  line-height: 18px;
  font-size: 14px;
  margin-bottom: 6px;
}
.title a, span{
  text-decoration: none;
  color:rgb(96,96,96);
  font-size: 14px;
}
h1{
  font-size: 20px;
  margin-bottom: 10px;
  color:rgb(3,3,3);
}

logo.svg

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 492 110" enable-background="new 0 0 492 110" xml:space="preserve">
<g>
  <g>
    <path fill="#FF0000" d="M154.3,17.5c-1.8-6.7-7.1-12-13.8-13.8c-12.1-3.3-60.8-3.3-60.8-3.3S31,0.5,18.9,3.8
      c-6.7,1.8-12,7.1-13.8,13.8C1.9,29.7,1.9,55,1.9,55s0,25.3,3.3,37.5c1.8,6.7,7.1,12,13.8,13.8c12.1,3.3,60.8,3.3,60.8,3.3
      s48.7,0,60.8-3.3c6.7-1.8,12-7.1,13.8-13.8c3.3-12.1,3.3-37.5,3.3-37.5S157.6,29.7,154.3,17.5z"/>
    <polygon fill="#FFFFFF" points="64.2,78.4 104.6,55 64.2,31.6 		"/>
  </g>
  <g>
    <g>
      <path fill="#282828" d="M227.9,99.7c-3.1-2.1-5.3-5.3-6.6-9.7c-1.3-4.4-1.9-10.2-1.9-17.5v-9.9c0-7.3,0.7-13.3,2.2-17.7
        c1.5-4.5,3.8-7.7,7-9.7c3.2-2,7.3-3.1,12.4-3.1c5,0,9.1,1,12.1,3.1c3,2.1,5.3,5.3,6.7,9.7c1.4,4.4,2.1,10.3,2.1,17.6v9.9
        c0,7.3-0.7,13.1-2.1,17.5c-1.4,4.4-3.6,7.6-6.7,9.7c-3.1,2-7.3,3.1-12.5,3.1C235.2,102.8,231,101.7,227.9,99.7z M245.2,89
        c0.9-2.2,1.3-5.9,1.3-10.9V56.8c0-4.9-0.4-8.5-1.3-10.7c-0.9-2.3-2.4-3.4-4.5-3.4c-2.1,0-3.5,1.1-4.4,3.4
        c-0.9,2.3-1.3,5.8-1.3,10.7v21.3c0,5,0.4,8.7,1.2,10.9c0.8,2.2,2.3,3.3,4.5,3.3C242.8,92.3,244.3,91.2,245.2,89z"/>
      <path fill="#282828" d="M464.4,72.7v3.5c0,4.4,0.1,7.7,0.4,9.9c0.3,2.2,0.8,3.8,1.6,4.8c0.8,1,2.1,1.5,3.8,1.5
        c2.3,0,3.9-0.9,4.7-2.7c0.9-1.8,1.3-4.8,1.4-8.9l13.3,0.8c0.1,0.6,0.1,1.4,0.1,2.4c0,6.3-1.7,11-5.2,14.1
        c-3.5,3.1-8.3,4.7-14.6,4.7c-7.6,0-12.9-2.4-15.9-7.1c-3-4.7-4.6-12.1-4.6-22V61.6c0-10.2,1.6-17.7,4.7-22.4
        c3.2-4.7,8.6-7.1,16.2-7.1c5.3,0,9.3,1,12.1,2.9c2.8,1.9,4.8,4.9,6,9c1.2,4.1,1.7,9.7,1.7,16.9v11.7H464.4z M466.4,43.9
        c-0.8,1-1.3,2.5-1.6,4.7c-0.3,2.2-0.4,5.5-0.4,10v4.9h11.2v-4.9c0-4.4-0.1-7.7-0.4-10c-0.3-2.3-0.8-3.9-1.6-4.8
        c-0.8-0.9-2-1.4-3.6-1.4C468.3,42.5,467.1,43,466.4,43.9z"/>
      <path fill="#282828" d="M190.5,71.4L173,8.2h15.3l6.1,28.6c1.6,7.1,2.7,13.1,3.5,18h0.4c0.5-3.6,1.7-9.5,3.5-17.9l6.3-28.7h15.3
        l-17.7,63.1v30.3h-15.1V71.4z"/>
      <path fill="#282828" d="M311.5,33.4v68.3h-12l-1.3-8.4h-0.3c-3.3,6.3-8.2,9.5-14.7,9.5c-4.5,0-7.9-1.5-10-4.5
        c-2.2-3-3.2-7.6-3.2-13.9v-51h15.4v50.1c0,3,0.3,5.2,1,6.5c0.7,1.3,1.8,1.9,3.3,1.9c1.3,0,2.6-0.4,3.8-1.2
        c1.2-0.8,2.1-1.9,2.7-3.1V33.4H311.5z"/>
      <path fill="#282828" d="M390.4,33.4v68.3h-12l-1.3-8.4h-0.3c-3.3,6.3-8.2,9.5-14.7,9.5c-4.5,0-7.9-1.5-10-4.5
        c-2.2-3-3.2-7.6-3.2-13.9v-51h15.4v50.1c0,3,0.3,5.2,1,6.5c0.7,1.3,1.8,1.9,3.3,1.9c1.3,0,2.6-0.4,3.8-1.2
        c1.2-0.8,2.1-1.9,2.7-3.1V33.4H390.4z"/>
      <path fill="#282828" d="M353.3,20.6H338v81.1h-15V20.6h-15.3V8.2h45.5V20.6z"/>
      <path fill="#282828" d="M441.2,44.3c-0.9-4.3-2.4-7.4-4.5-9.4c-2.1-1.9-4.9-2.9-8.6-2.9c-2.8,0-5.5,0.8-7.9,2.4
        c-2.5,1.6-4.3,3.7-5.7,6.3h-0.1l0-36h-14.8v96.9h12.7l1.6-6.5h0.3c1.2,2.3,3,4.1,5.3,5.5c2.4,1.3,5,2,7.9,2c5.2,0,9-2.4,11.5-7.2
        c2.4-4.8,3.7-12.3,3.7-22.4V62.2C442.6,54.6,442.1,48.6,441.2,44.3z M427.1,72.2c0,5-0.2,8.9-0.6,11.7c-0.4,2.8-1.1,4.8-2.1,6
        c-1,1.2-2.3,1.8-3.9,1.8c-1.3,0-2.4-0.3-3.5-0.9c-1.1-0.6-1.9-1.5-2.6-2.7V49.3c0.5-1.9,1.4-3.4,2.7-4.6c1.3-1.2,2.6-1.8,4.1-1.8
        c1.6,0,2.8,0.6,3.6,1.8c0.9,1.2,1.4,3.3,1.8,6.2c0.3,2.9,0.5,7,0.5,12.4V72.2z"/>
    </g>
  </g>
</g>
</svg>

profile.jpeg



Recommended For You

About the Author: Admin