Sticky Social Media Icons using HTML CSS Source Code

This is the Day 69 of our 90Projects in 90Days. And today, we are going to Create a Sticky Social Media Icon using HTML CSS Source Code. 

To run the given code firstly you have to copy the HTML code and run it into your code editor and then create a CSS file and paste the given CSS code in your code's CSS file.

Preview

sticky social media icons using HTML CSS, fixed social media sidebar, sticky social media icons , sticky sidebar icon, sidebar social media icons using html css, geekshelp, rajuwebdev, raju web dev

HTML Code

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Sidebar Social Media Icons </title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
        integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <section class="sidebar-social">
        <ul>
            <a href="#">
                <li class="insta"><i class="fa-brands fa-instagram"></i> Instagram</li>
            </a>
            <a href="#">
                <li class="fb"><i class="fa-brands fa-facebook"></i> Facebook </li>
            </a>
            <a href="#">
                <li class="yt"><i class="fa-brands fa-youtube"></i> YouTube </li>
            </a>
            <a href="#">
                <li class="twitter"><i class="fa-brands fa-twitter"></i> Twitter </li>
            </a>
            <a href="#">
                <li class="github"><i class="fa-brands fa-github"></i> GitHub</li>
            </a>
        </ul>
    </section>
</body>

</html>


CSS Code

style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

.sidebar-social {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgb(255, 255, 255);
}

.sidebar-social ul a {
    text-decoration: none;
}

.sidebar-social li {
    list-style: none;
    color: #fff;
    width: 60px;
    display: flex;
    overflow: hidden;
    padding: 17px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 1.5rem;
}

.sidebar-social li:hover {
    width: 180px;
}

.sidebar-social li i {
    margin-right: 22px;
}

.insta {
    background-color: #df2f6d;
}

.yt {
    background-color: #fe0000;
}

.fb {
    background-color: #0386ee;
}

.twitter {
    background-color: #1d9bf0;
}

.github {
    background-color: #0f1113;
}

.sidebar-social .insta:hover {
    background-color: #df2f6d;
}

.sidebar-social .yt:hover {
    background-color: #fe0000;
}

.sidebar-social .fb:hover {
    background-color: #0386ee;
}

.sidebar-social .twitter:hover {
    background-color: #1d9bf0;
}

.sidebar-social .github:hover {
    background-color: #0f1113;
}

Learn HTML- Learn Now

Learn CSS- Learn Now

Visit our 90Days, 90Projects Page- Visit Now

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad