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
