<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="youtubeoneday.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="top-nav">
<div class="part1">
<div class="sidemanu">
<i class="fa-solid fa-bars"></i>
</div>
<div class="logo ">
<img src="youtubelogo.png" alt="">
<p>IN</p>
</div>
</div>
<div class="part2">
<div class="search-border">
<div class="search ">
<input type="search" value=" Search" style="font-size: 15px; ">
<div class="mic " >
<i class="fa-solid fa-magnifying-glass" ></i>
</div>
</div>
</div>
<div class="voice">
<button><i class="fa-solid fa-microphone"></i></button>
</div>
</div>
<div class="part3">
<div class="">
<i class="fa-solid fa-video"></i>
</div>
<div class="notifecation">
<i class="fa-solid fa-bell"></i>
<p>9+</p>
</div>
<div class="login">
<img src="box7_image.jpg" alt="login image">
</div>
</div>
</div>
<!-- top manu end -->
<div class="divition-secion">
<div class="side-manu">
<div class="Short-a">
<i class="fa-solid fa-house"></i>
<button type="submit"> </i> Home</button>
</div>
<div class="Short-a">
<i class="fa-solid fa-bolt " ></i>
<button type="submit">Short</button>
</div>
<div class="Short-a">
<i class="fa-brands fa-youtube"></i>
<button type="submit">Subscription</button>
</div>
<hr>
<div class="Short-b">
<i class="fa-solid fa-book-medical"></i>
<button type="submit">Library</button>
</div>
<div class="Short-b">
<i class="fa-solid fa-clock-rotate-left"></i>
<button type="submit">History</button>
</div>
<div class="Short-b">
<i class="fa-regular fa-circle-play"></i>
<button type="submit">Your videos</button>
</div>
<div class="Short-b">
<i class="fa-regular fa-clock"></i>
<button type="submit"> Watch later</button>
</div>
<div class="Short-b">
<i class="fa-solid fa-download"></i>
<button type="submit"> donwload</button>
</div>
<div class="Short-b">
<i class="fa-regular fa-thumbs-up"></i>
<button type="submit"> Like video</button>
</div>
<div class="Short-b">
<i class="fa-solid fa-angle-down"></i>
<button type="submit"> Show more</button>
</div>
<hr>
<h3 style="margin-right: 40px; font-size: 22px ; margin-top: 10px;margin-bottom: 15px;">Subscription</h3>
<div class="Short">
<img src="box7_image.jpg" alt="login image" style="border-radius: 50% ; width: 25px;height: 25px;">
<button type="submit">channal name</button>
</div>
<div class="Short">
<img src="box7_image.jpg" alt="login image" style="border-radius: 50% ; width: 25px;height: 25px;">
<button type="submit">channal name</button>
</div>
<div class="Short">
<img src="box7_image.jpg" alt="login image" style="border-radius: 50% ; width: 25px;height: 25px;">
<button type="submit">channal name</button>
</div>
<div class="Short">
<img src="box7_image.jpg" alt="login image" style="border-radius: 50% ; width: 25px;height: 25px;">
<button type="submit">channal name</button>
</div>
<hr>
<h3 style="margin-right: 40px; font-size: 22px ; margin-top: 10px;margin-bottom: 15px;">Explore</h3>
<div class="Short-d">
<i class="fa-regular fa-lemon"></i>
<button type="submit">Trending</button>
</div>
<div class="Short-d">
<i class="fa-solid fa-bag-shopping"></i>
<button type="submit">Shopping</button>
</div>
<div class="Short-d">
<i class="fa-regular fa-music"></i>
<button type="submit">Music</button>
</div>
<div class="Short-d">
<i class="fa-solid fa-clapperboard"></i>
<button type="submit">Movies</button>
</div>
<div class="Short-d">
<i class="fa-solid fa-tower-cell"></i>
<button type="submit">Live</button>
</div>
<div class="Short-d">
<i class="fa-solid fa-gamepad"></i>
<button type="submit">Gaming</button>
</div>
<div class="Short-d">
<i class="fa-light fa-newspaper"></i>
<button type="submit">News</button>
</div>
<div class="Short-d">
<i class="fa-light fa-trophy"></i>
<button type="submit">Sports</button>
</div>
<div class="Short-d">
<i class="fa-regular fa-lightbulb"></i>
<button type="submit">Learing</button>
</div>
<div class="Short-d">
<i class="fa-regular fa-sink"></i>
<button type="submit">Fashion & Beaty</button>
</div>
<hr>
<h3 style="margin-right: -20px; font-size: 19px ; margin-top: 10px;margin-bottom: 15px;">More from YouTube</h3>
<div class="Short-e">
<i class="fa-brands fa-youtube"></i>
<button type="submit">YouTube Premium</button>
</div>
<div class="Short-e">
<i class="fa-brands fa-youtube"></i>
<button type="submit">YouTube Studio</button>
</div>
<div class="Short-e">
<i class="fa-regular fa-circle-play"></i>
<button type="submit">YouTube Music</button>
</div>
<div class="Short-e">
<i class="fa-brands fa-youtube"></i>
<button type="submit">YouTube kids</button>
</div>
<hr>
<div class="Short-f">
<i class="fa-regular fa-gear"></i>
<button type="submit">Sitting</button>
</div>
<div class="Short-f">
<i class="fa-regular fa-flag"></i>
<button type="submit">Report History</button>
</div>
<div class="Short-f">
<i class="fa-light fa-question"></i>
<button type="submit">Help</button>
</div>
<div class="Short-f">
<i class="fa-regular fa-message"></i>
<button type="submit">send feedback</button>
</div>
<hr>
<p>AboutPressCopyrightContact usCreatorsAdvertiseDevelopers</p>
<br>
<p>TermsPrivacyPolicy & SafetyHow YouTube worksTest new features</p>
<br>
<p>© 2023 Google LLC</p>
<!-- side manu end -->
</div>
<div class="vidoe-topmanu">
<div class="top-button-manu">
<button>All</button>
<button>Gaming</button>
<button>Music</button>
<button>Bollywood Muslic</button>
<button>Mixes</button>
<button>Live</button>
<button>Tamil Cinema</button>
<button>News</button>
<button>Web Development</button>
<button>Cricket</button>
<button>Computer programming</button>
<button>Music</button>
<button>Pakistani dranas</button>
<button>Grand Theft Auto V</button>
<!-- top-button-manu -->
</div>
<!-- divivtion section end -->
<div class="vidoe-section">
<!-- loading video -->
<div class="video-container">
<div class="video-row">
<!-- starting -->
<div class="video"><video src="vi-1.mp4"></video>
<div class="main">
<div class="img">
<img src="box7_image.jpg" alt="">
</div>
<div class="text">
<span>Mohammad suleman ali</span>
<p>here channal name and watch time</p>
</div>
</div>
<!-- ending -->
</div>
<!-- starting -->
<div class="video"><video src="vi-1.mp4"></video>
<div class="main">
<div class="img">
<img src="box7_image.jpg" alt="">
</div>
<div class="text">
<span>Mohammad suleman ali</span>
<p>here channal name and watch time</p>
</div>
</div>
<!-- ending -->
</div>
<!-- starting -->
<div class="video"><video src="vi-1.mp4"></video>
<div class="main">
<div class="img">
<img src="box7_image.jpg" alt="">
</div>
<div class="text">
<span>Mohammad suleman ali</span>
<p>here channal name and watch time</p>
</div>
</div>
<!-- ending -->
</div>
<!-- starting -->
<div class="video"><video src="vi-1.mp4"></video>
<div class="main">
<div class="img">
<img src="box7_image.jpg" alt="">
</div>
<div class="text">
<span>Mohammad suleman ali</span>
<p>here channal name and watch time</p>
</div>
</div>
<!-- ending -->
</div>
</div>
<div class="video-row">
<!-- starting -->
<div class="video"><video src="vi-1.mp4"></video>
<div class="main">
<div class="img">
<img src="box7_image.jpg" alt="">
</div>
<div class="text">
<span>Mohammad suleman ali</span>
<p>here channal name and watch time</p>
</div>
</div>
<!-- ending -->
</div>
<div class="video"><video src="vi-1.mp4"></video>
<div class="main">
<div class="img">
<img src="box7_image.jpg" alt="">
</div>
<div class="text">
<span>Mohammad suleman ali</span>
<p>here channal name and watch time</p>
</div>
</div>
<!-- ending -->
</div>
<div class="video"><video src="vi-1.mp4"></video>
<div class="main">
<div class="img">
<img src="box7_image.jpg" alt="">
</div>
<div class="text">
<span>Mohammad suleman ali</span>
<p>here channal name and watch time</p>
</div>
</div>
<!-- ending -->
</div>
<div class="video"><video src="vi-1.mp4"></video>
<div class="main">
<div class="img">
<img src="box7_image.jpg" alt="">
</div>
<div class="text">
<span>Mohammad suleman ali</span>
<p>here channal name and watch time</p>
</div>
</div>
<!-- ending -->
</div>
</div>
<div class="video-row">
<div class="video"><video src="vi-1.mp4"></video>
<div class="main">
<div class="img">
<img src="box7_image.jpg" alt="">
</div>
<div class="text">
<span>Mohammad suleman ali</span>
<p>here channal name and watch time</p>
</div>
</div>
<!-- ending -->
</div>
<div class="video"><video src="vi-1.mp4"></video>
<div class="main">
<div class="img">
<img src="box7_image.jpg" alt="">
</div>
<div class="text">
<span>Mohammad suleman ali</span>
<p>here channal name and watch time</p>
</div>
</div>
<!-- ending -->
</div>
<div class="video"><video src="vi-1.mp4"></video>
<div class="main">
<div class="img">
<img src="box7_image.jpg" alt="">
</div>
<div class="text">
<span>Mohammad suleman ali</span>
<p>here channal name and watch time</p>
</div>
</div>
<!-- ending -->
</div>
<div class="video"><video src="vi-1.mp4"></video>
<div class="main">
<div class="img">
<img src="box7_image.jpg" alt="">
</div>
<div class="text">
<span>Mohammad suleman ali</span>
<p>here channal name and watch time</p>
</div>
</div>
<!-- ending -->
</div>
</div>
<div class="video-row">
<div class="video"><video src="vi-1.mp4"></video>
<div class="main">
<div class="img">
<img src="box7_image.jpg" alt="">
</div>
<div class="text">
<span>Mohammad suleman ali</span>
<p>here channal name and watch time</p>
</div>
</div>
<!-- ending -->
</div>
<div class="video"><video src="vi-1.mp4"></video>
<div class="main">
<div class="img">
<img src="box7_image.jpg" alt="">
</div>
<div class="text">
<span>Mohammad suleman ali</span>
<p>here channal name and watch time</p>
</div>
</div>
<!-- ending -->
</div>
<div class="video"><video src="vi-1.mp4"></video>
<div class="main">
<div class="img">
<img src="box7_image.jpg" alt="">
</div>
<div class="text">
<span>Mohammad suleman ali</span>
<p>here channal name and watch time</p>
</div>
</div>
<!-- ending -->
</div>
<div class="video"><video src="vi-1.mp4"></video>
<div class="main">
<div class="img">
<img src="box7_image.jpg" alt="">
</div>
<div class="text">
<span>Mohammad suleman ali</span>
<p>here channal name and watch time</p>
</div>
</div>
<!-- ending -->
</div>
</div>
<div class="video-row">
<div class="video"><video src="vi-1.mp4"></video>
<div class="main">
<div class="img">
<img src="box7_image.jpg" alt="">
</div>
<div class="text">
<span>Mohammad suleman ali</span>
<p>here channal name and watch time</p>
</div>
</div>
<!-- ending -->
</div>
<div class="video"><video src="vi-1.mp4"></video>
<div class="main">
<div class="img">
<img src="box7_image.jpg" alt="">
</div>
<div class="text">
<span>Mohammad suleman ali</span>
<p>here channal name and watch time</p>
</div>
</div>
<!-- ending -->
</div>
<div class="video"><video src="vi-1.mp4"></video>
<div class="main">
<div class="img">
<img src="box7_image.jpg" alt="">
</div>
<div class="text">
<span>Mohammad suleman ali</span>
<p>here channal name and watch time</p>
</div>
</div>
<!-- ending -->
</div>
<div class="video"><video src="vi-1.mp4"></video>
<div class="main">
<div class="img">
<img src="box7_image.jpg" alt="">
</div>
<div class="text">
<span>Mohammad suleman ali</span>
<p>here channal name and watch time</p>
</div>
</div>
<!-- ending -->
</div>
</div>
<div class="video-row">
<div class="video"><video src="vi-1.mp4"></video>
<div class="main">
<div class="img">
<img src="box7_image.jpg" alt="">
</div>
<div class="text">
<span>Mohammad suleman ali</span>
<p>here channal name and watch time</p>
</div>
</div>
<!-- ending -->
</div>
<div class="video"><video src="vi-1.mp4"></video>
<div class="main">
<div class="img">
<img src="box7_image.jpg" alt="">
</div>
<div class="text">
<span>Mohammad suleman ali</span>
<p>here channal name and watch time</p>
</div>
</div>
<!-- ending -->
</div>
<div class="video"><video src="vi-1.mp4"></video>
<div class="main">
<div class="img">
<img src="box7_image.jpg" alt="">
</div>
<div class="text">
<span>Mohammad suleman ali</span>
<p>here channal name and watch time</p>
</div>
</div>
<!-- ending -->
</div>
<div class="video"><video src="vi-1.mp4"></video>
<div class="main">
<div class="img">
<img src="box7_image.jpg" alt="">
</div>
<div class="text">
<span>Mohammad suleman ali</span>
<p>here channal name and watch time</p>
</div>
</div>
<!-- ending -->
</div>
</div>
<!-- video section end -->
</div>
<!-- vidoe and top manu -->
</div>
</body>
</html>
---------------------------------------------------------------------------------
css
*{
margin: 0%;
padding: 0%;
background-color: black;
color: white;
}
/* this part only for alinements */
.top-nav{
margin-top: 5px;
width: px;
height: 45px;
display: flex;
justify-content: center;
justify-content:space-between;
align-items: center;
}
.logo{
display: flex;
justify-content: center;
align-items: center;
display: flex;
justify-content: center;
align-items: center;
}
.logo p{
font-size: 11px;
margin-bottom: 20px;
font-family: Arial, Helvetica, sans-serif;
}
.sidemanu i{
display: flex;
justify-items: flex-start;
margin-right: 20px;
margin-left: 20px;
}
.part1{
display: flex;
align-items: center;
justify-content: flex-start;
margin-left: 10px;
gap: 5px;
cursor: pointer;
}
.part2{
margin-top: 10px;
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
cursor: pointer;
}
.part3{
margin-right:25px ;
font-size: 20px;
display: flex;
gap: 25px;
justify-content: space-evenly;
justify-content: flex-end;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.search{
display: flex;
justify-content: center;
align-items: center;
}
.mic i{
width:60px ;
height: 45px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid rgb(98, 90, 90);
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
background-color: rgba(85, 92, 92, 0.623);
}
.mic{
height: 45px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
background-color: rgb(98, 90, 90);
}
/* inner part design */
.sidemanu i{
font-size: 20px;
}
.logo img{
width: 100px;
height: 48px;
}
.part2 input{
width: 620px;
height: 45px;
border: 1px;
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
border: 1px solid rgb(98, 90, 90);
}
.voice button{
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 17px;
border: 2px solid rgb(98, 90, 90);
background-color: rgb(98, 90, 90);
}
.part2 i{
border: 2px solid black0;
background-color: transparent;
}
.notifecation{
display: flex;
justify-content: center;
align-items: center;
}
.notifecation p{
width: 25px;
height: 20px;
background-color: red;
border-radius: 50%;
font-size: 12px;
align-items: center;
justify-content: center;
display: flex;
margin-bottom: 10px;
}
.login img{
width: 35px;
height: 35px;
border-radius: 50%;
border: 2px solid rgb(98, 90, 90);
}
.side-manu{
height: 1700px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width:220px ;
margin-top: 20px;
}
.side-manu hr{
display: flex;
justify-content: center;
align-items: center;
width:85%;
color: rgb(98, 90, 90) ;
}
.side-manu button{
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
border: transparent;
height:37px ;
cursor: pointer;
}
.Short-a {
width: 200px;
height:45px;
display: flex;
align-items: center;
margin-left: 9px;
gap: 30px;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.Short-a i{
margin-left: 18px;
background-color: transparent;
}
.Short-a button{
background-color: transparent;
display:flex;
justify-items: last baseline;
align-items: center;
margin-left: 10px;
}
.Short-a:hover{
background-color: rgb(98, 90, 90) ;
}
/* .Short-a end */
.Short-b {
width: 200px;
height:45px;
display: flex;
align-items: center;
margin-left: 9px;
gap: 30px;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.Short-b i{
margin-left: 18px;
background-color: transparent;
}
.Short-b button{
background-color: transparent;
display:flex;
justify-items: last baseline;
align-items: center;
margin-left: 10px;
}
.Short-b:hover{
background-color: rgb(98, 90, 90) ;
}
/* short-b end */
.Short {
width: 200px;
height:45px;
display: flex;
align-items: center;
margin-left: 9px;
gap: 30px;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.Short img{
margin-left: 18px;
background-color: transparent;
}
.Short button{
background-color: transparent;
display:flex;
justify-items: last baseline;
align-items: center;
margin-left: 10px;
}
.Short:hover{
background-color: rgb(98, 90, 90) ;
}
/*
short end */
.Short-d {
width: 200px;
height:45px;
display: flex;
align-items: center;
margin-left: 9px;
gap: 30px;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.Short-d i{
margin-left: 18px;
background-color: transparent;
}
.Short-d button{
background-color: transparent;
display:flex;
justify-items: last baseline;
align-items: center;
margin-left: 10px;
}
.Short-d:hover{
background-color: rgb(98, 90, 90) ;
}
/* short-d end */
.Short-e {
width: 200px;
height:45px;
display: flex;
align-items: center;
margin-left: 9px;
gap: 30px;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.Short-e i{
margin-left: 18px;
background-color: transparent;
}
.Short-e button{
background-color: transparent;
display:flex;
justify-items: last baseline;
align-items: center;
margin-left: 10px;
}
.Short-e:hover{
background-color: rgb(98, 90, 90) ;
}
/* short-e end */
.Short-f {
width: 200px;
height:45px;
display: flex;
align-items: center;
margin-left: 9px;
gap: 30px;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.Short-f i{
margin-left: 18px;
background-color: transparent;
}
.Short-f button{
background-color: transparent;
display:flex;
justify-items: last baseline;
align-items: center;
margin-left: 10px;
}
.Short-f:hover{
background-color: rgb(98, 90, 90) ;
}
/* middle manu start */
.divition-secion{
display: flex;
}
.top-button-manu{
margin-top: 20px;
margin-left: 45px;
display: flex;
gap: 10px;
}
.top-button-manu button{
width:fit-content;
background-color: rgb(98, 90, 90);
height: 40px;
padding-left: 15px;
padding-right: 15px;
color: white;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
border: transparent;
}
.top-button-manu button:hover{
background-color: white ;
color: black;
}
.video-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.video-row {
display: flex;
gap: 10px;
}
.video {
width: 25%; /* Each video takes up 25% of the container width */
border: 1px solid #ccc;
padding: 10px;
margin: 5px;
border: 0.1em;
}
.video-column {
flex-basis: 100%; /* Take the full width for columns */
}
.video-container video{
width: 330px;
height: 225px;
cursor: pointer;
}
.video{
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.video img{
width: 35px;
height: 35px;
border-radius: 50%;
}
.main{
display: flex;
gap: 18px;
}
.vidoe-topmanu{
margin-top: 10px;
}
0 Comments