DEV Community

Chithra Priya
Chithra Priya

Posted on

Topic - Create a YouTube bar-icon and YouTube logo template using HTML and CSS properties

🛠️ How to Create a YouTube Bar Icon and Logo Template Using HTML and CSS:
Creating my own version of a YouTube-style logo and bar icon using only HTML and CSS is a way to sharpen my front-end skills.

🎯 What I Build:
A simple YouTube-style logo using HTML and CSS.
A navigation bar icon.

✅ Step 1: Basic HTML Structure:
Start with a clean HTML template:

<!DOCTYPE html>




(372) YouTube
        <img src="https://t4.ftcdn.net/jpg/12/56/04/53/240_F_1256045365_tIlZPawzpJNxrPMPgFsB3fEwFBAsL5AH.jpg"alt="">
        </div>

🎨 Step 2: CSS Styling:
Now create a style:

    * {
        padding: 0;
        margin: 0;
    }

    .left-head {
        /* border: 1px solid; */
        width: 200px;
        display: flex;
        padding-left: 15px;
    }

    .left-head .baricon {
        /* border: 1px solid;  */
        width: fit-content;
        height: fit-content;
        padding: 8px 12px;
        border-radius: 25px;
    }

    .left-head .baricon:hover {
        background-color: rgb(228, 224, 224);
        cursor: pointer;
    }

    .left-head img {
        width: 100px;
        height: auto; 
        margin-left: 10px;
    }

    .left-head img:hover{
        cursor: pointer;
    }
Enter fullscreen mode Exit fullscreen mode

Top comments (0)