DEV Community

Raghul
Raghul

Posted on

YouTube Home Page

#html #css #frontend #beginners

Youtube Home Page

Today I have create You-tube home page by using HTML CSS. Here is my Source code to understand better. This time I use some basic transition and all

Source code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YouTube</title>

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

        .All {
            height: 100vh;
            width: 100vw;
            display: grid;
            grid-template-columns: 1fr 6fr;
        }

        .left {
            border-right: 1px solid lightgray;
            display: flex;
            flex-direction: column;
            padding: 20px;
            justify-content: space-between;
        }

        p {
            display: inline;
            cursor: pointer;
            font-size: 20px;
        }

        .logo {
            width: 100px;
            margin-left: 50px;
        }

        h4 span {
            margin-right: 10px;
            cursor: pointer;
        }

        .shorts span {
            margin-right: 10px;
        }

        .right {
            display: flex;
            flex-direction: column;
        }

        .topbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 30px;
            position: fixed;
            width: 85%;
            background: white;
        }

        .searchbar {
            display: flex;
            align-items: center;
        }

        .search-bar {
            width: 500px;
            height: 40px;
            border: 1px solid gray;
            border-radius: 20px 20px;
            padding-left: 20px;
            cursor: pointer;
        }

        .search-but {
            width: 60px;
            height: 40px;
            border-radius: 20px 20px;
            border: 1px solid gray;
            cursor: pointer;
        }

        .rightinfo {
            display: flex;
            align-items: center;
            gap: 25px;
        }

        .rightinfo button {
            padding: 10px 20px;
            border: none;
            border-radius: 20px;
            cursor: pointer;
        }

        .rightinfo span {
            font-size: 25px;
            cursor: pointer;
        }

        .videos {
            margin-top: 100px;
            padding: 20px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }

        .video-box {
            cursor: pointer;
        }

        .video-box img {
            width: 100%;
            border-radius: 15px;
        }

        .video-box h3 {
            margin-top: 10px;
        }

        .video-box p {
            color: gray;
            font-size: 15px;
        }

        .video-box:hover {
            transform: scale(1.02);
            transition: 0.1s;
        }
    </style>
</head>

<body>
    <div class="All">

        <div class="left">
            <p>☰</p>

            <img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/b/b8/YouTube_Logo_2017.svg">

            <h4><span>🏠︎</span> Home</h4>
            <p class="shorts"><span>▶</span> Shorts</p>

            <hr>

            <h4>Subscriptions <span>›</span></h4>
            <p>Ashwin</p>
            <p>NBA</p>
            <p>Parithabangal</p>
            <p>FORMULA 1</p>
            <p>T-Series</p>
            <p>ICC</p>
            <p>MrBeast</p>

            <hr>

            <h4>You <span>›</span></h4>
            <p>👤 Your channel</p>
            <p>⟳ History</p>
            <p>⏭ Playlists</p>
            <p>⏱ Watch later</p>
            <p>♡ Liked videos</p>
            <p>➜ Downloads</p>

            <hr>
        </div>

        <div class="right">

            <div class="topbar">
                <div class="searchbar">
                    <input class="search-bar" type="text" placeholder="Search">
                    <button class="search-but">🔍</button>
                </div>

                <div class="rightinfo">
                    <button>➕ Create</button>
                    <span>🔔</span>
                    <span>👤</span>
                </div>
            </div>

            <div class="videos">
                <div class="video-box">
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRbladkDoorFvot4utE2ZskRzsovCMGI0sGUDKTluNp7A&s" alt="">
                    <h3>CSK vs MI Highlights</h3>
                    <p>IPL • 120M views • 15 days ago</p>
                </div>

                <div class="video-box">
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRFhVNbZ3lXaWcH5W9ww1md0wi2At3PAyd-sKgZGNgyUg&s=10" alt="">
                    <h3>Formula 1 Highlights</h3>
                    <p>Formula 1 • 19M views • 22 hours ago</p>
                </div>

                <div class="video-box">
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSphFifftUxnnnF0vnyo7I8PEQcTzI-dyTOgkwZX2LtUA&s=10" alt="">
                    <h3>NBA Finals Highlights</h3>
                    <p>NBA • 37M views • 12 hours ago</p>
                </div>
            </div>

        </div>
    </div>
</body>
</html>`
Enter fullscreen mode Exit fullscreen mode

Top comments (0)