<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>youtubeonedaypage1 </title>
    <link rel="stylesheet" href="youtubeonedaypage1.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 -->

    <!-- tow start -->
<div class="tow">

    <!-- body play start -->
    <div class="body-play-start">
        <div class="side-video"><video src="vi-4.mp4" play controls></video></div>
        <h3 style="margin-top: 15px;">pakisthan vs sir lanka match hightlights </h3>
        <div class="sub">
            <img src="box7_image.jpg" style="border-radius: 50%; width: 37px; height: 37px; margin-top: 10px;" alt="">
            <div class="channal">
            <p style="font-size: 17px;">Channal name</p>
            <p style="font-size:12px ">2.78m subscriber</p>
            </div>
            <div class="maga-1">
            <div class="t-1">
            <button>jion</button>
            <button>subscribe</button>
            </div>
            <div class="t-2">
            <button><i class="fa-regular fa-thumbs-up"></i> 65k   |   <i class="fa-regular fa-thumbs-down"></i></button>
            <button><i class="fa-solid fa-share"></i> share</button>
            <button> <i class="fa-solid fa-download"></i> donwload</button>
            <button><i class="fa-regular fa-heart"></i> thanks</button>
           <button> <i><i class="fa-solid fa-bars"></i></i> </button>
        </div>
    </div>
    </div>
    <!-- body play end -->
    </div>
    <!-- side-manu-list start -->
    <div class="side-manu-list">
    <!-- top-manu start -->
    <div class="top-manu">
        <button><a href="#">ALL</button>
        <button><a href="#">from Raza Graphy</a></button>
        <button><a href="#">poltics Nesw</a></button>
        <button><a href="#">Watched</a></button>
    </div>
    <!-- side-list start -->
    <div class="side-list-start">
        <!-- list start -->
        <div class="list">
            <div class="play">
                <video src="vi-1.mp4"></video>
                    <div class="text">
                        <p class="data">indian media reaction on Pakistani win today</p>
                        <p class="data">rawaid khan offlcial</p>
                        <p class="data">437l views .1 day ago</p>
                    </div>
                </div>
        <div class="play">
            <video src="vi-1.mp4"></video>
                <div class="text">
                    <p class="data">indian media reaction on Pakistani win today</p>
                    <p class="data">rawaid khan offlcial</p>
                    <p class="data">437l views .1 day ago</p>
                </div>
        </div>
        <div class="play">
            <video src="vi-1.mp4"></video>
                <div class="text">
                    <p class="data">indian media reaction on Pakistani win today</p>
                    <p class="data">rawaid khan offlcial</p>
                    <p class="data">437l views .1 day ago</p>
                </div>
        </div>
        <div class="play">
            <video src="vi-1.mp4"></video>
                <div class="text">
                    <p class="data">indian media reaction on Pakistani win today</p>
                    <p class="data">rawaid khan offlcial</p>
                    <p class="data">437l views .1 day ago</p>
                </div>
        </div>
        <div class="play">
            <video src="vi-1.mp4"></video>
                <div class="text">
                    <p class="data">indian media reaction on Pakistani win today</p>
                    <p class="data">rawaid khan offlcial</p>
                    <p class="data">437l views .1 day ago</p>
                </div>
        </div>
        <div class="play">
            <video src="vi-1.mp4"></video>
                <div class="text">
                    <p class="data">indian media reaction on Pakistani win today</p>
                    <p class="data">rawaid khan offlcial</p>
                    <p class="data">437l views .1 day ago</p>
                </div>
        </div>
        <div class="play">
            <video src="vi-1.mp4"></video>
                <div class="text">
                    <p class="data">indian media reaction on Pakistani win today</p>
                    <p class="data">rawaid khan offlcial</p>
                    <p class="data">437l views .1 day ago</p>
                </div>
        </div>
        <div class="play">
            <video src="vi-1.mp4"></video>
                <div class="text">
                    <p class="data">indian media reaction on Pakistani win today</p>
                    <p class="data">rawaid khan offlcial</p>
                    <p class="data">437l views .1 day ago</p>
                </div>
        </div>
        <div class="play">
            <video src="vi-1.mp4"></video>
                <div class="text">
                    <p class="data">indian media reaction on Pakistani win today</p>
                    <p class="data">rawaid khan offlcial</p>
                    <p class="data">437l views .1 day ago</p>
                </div>
        </div>
        <div class="play">
            <video src="vi-1.mp4"></video>
                <div class="text">
                    <p class="data">indian media reaction on Pakistani win today</p>
                    <p class="data">rawaid khan offlcial</p>
                    <p class="data">437l views .1 day ago</p>
                </div>
        </div>
        <div class="play">
            <video src="vi-1.mp4"></video>
                <div class="text">
                    <p class="data">indian media reaction on Pakistani win today</p>
                    <p class="data">rawaid khan offlcial</p>
                    <p class="data">437l views .1 day ago</p>
                </div>
        </div>
        <div class="play">
            <video src="vi-1.mp4"></video>
                <div class="text">
                    <p class="data">indian media reaction on Pakistani win today</p>
                    <p class="data">rawaid khan offlcial</p>
                    <p class="data">437l views .1 day ago</p>
                </div>
        </div>
        <!-- list end -->
        </div>
        <!-- side-manu-end -->
        </div>
       <!-- side-list end -->
    </div>
    <!-- tow end -->
</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);
}

/* new part */
.tow{
    display: flex;
    gap: 30px;

}
 
.body-play-start{
    margin-top: 55px;
    margin-left:100px;
    width: 1320px;
    height:650px;
     
}
.body-play-start video{
    width: 100%;
    height:650px;
    background-color: whitesmoke;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;

}
.side-list-start{
    width: 290px;

}
.side-list-start video{
    width: 145px;
    height: 145px;
    background-color: aliceblue;
}
.side-manu-list{
    margin-top: 50px;
}
.top-manu{
    gap: 3px;
    width: fit-content;
    height: 45px;
    display: flex;
    color:black;
}
.top-manu a{
    text-decoration: none;
    background-color:transparent;
    color:black;
    width:fit-content;
    height: 25px;
}
.top-manu button{
    width:fit-content;
    background-color:  rgb(98, 90, 90);
    height: 25px;
    padding-left: 15px;
    padding-right: 15px;
    color: white;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border: transparent;
    font-size: 12px;
}
.top-manu button:hover{
    background-color: white;
    color:black;
}
.top-manu a:hover{
    background-color: white;
    color:black;
}
.play{
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
   
}
.data{
    font-size: 13px;
    width: 200px;
}
.sub{
    display: flex;
    align-items: center;
    gap: 10px;  
}
.maga-1{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.t-2{
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    gap: 10px;
}
.maga-1 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;
}
.maga-1 i{
    background-color: transparent;
}
.maga-1 i:hover{
    background-color: white;
    color: black;
}
.maga-1 button:hover{
    background-color: white;
    color: black;
}