DEV Community

Kavin Loyola S
Kavin Loyola S

Posted on

Youtube Clone

#html #css #clone

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;
            font-family:Arial, Helvetica, sans-serif
        }

        .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;
            font-weight:700;
        }

        .logo {
            width: 150px;
        }

        .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-button {
            width: 60px;
            height: 40px;
            border-radius: 20px 20px;
            border: 1px solid gray;
            cursor: pointer;
            margin-left:20px;
        }

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

            <h3>🏠︎ Home</h3>
            <p>▶ Shorts</p>
            <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-button">🔍</button>
                </div>

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

            <div class="videos">
                <div class="video-box">
                    <img src="https://th.bing.com/th/id/OIP.LqlG441wLKl2qPh9sDpuxwHaEK?w=328&h=184&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3" alt="">
                    <h3>LEO - Ratata Video Song</h3>
                    <p>Cinema • 12B views • 3 Years ago</p>
                </div>

                <div class="video-box">
                    <img src="https://th.bing.com/th/id/OIF.w78UrZ60yDsGoJr3ALc69g?w=311&h=180&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3" alt="">
                    <h3>Jana Nayagan trailer</h3>
                    <p>Cinema • 3B views • 7 Months ago</p>
                </div>

                <div class="video-box">
                    <img src="https://th.bing.com/th/id/OIP.zPdWZvLLPp5sy9OueC0KYwHaEK?w=290&h=180&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3" alt="">
                    <h3>TVK - Victory Celebration</h3>
                    <p>Politics • 379M views • 2 Months ago</p>
                </div>
                <div class="video-box">
                    <img src="https://th.bing.com/th/id/OIP.U2fitLS06meLXyUdH4-bSgHaEK?w=333&h=187&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3" alt="">
                    <h3>CSK - 5 Times Champions</h3>
                    <p>Cricket • 999M views • 4 Years ago</p>
                </div>
                <div class="video-box">
                    <img src="https://th.bing.com/th/id/OIP.LMgrQ9bggP1rTYxqqsMH-AHaEK?w=284&h=180&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3" alt="">
                    <h3>VTV - Songs (Mix)</h3>
                    <p>Music • 777M views • 12 Years ago</p>
                </div>
            </div>

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

Output

Top comments (0)