Responsive Social Media Icons using HTML CSS

Hey, developers welcome to Day 42 of our 90Days 90Projects challenge. And in Day 42 we are going to create Responsive Social Media Icons using HTML CSS

So to run the code you just need to copy the HTML and CSS code and run it into your code Editor. 

Preview

social media icons in html, social media icons html css, html social media icons font awesome, how to add social media icons in html


HTML Code

<!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> Responsive Social Media Icons </title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
        integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>

    <div class="container">
        <ul>
            <li class="fb"><a href="#"><i class="fa-brands fa-facebook-f"></i></a></li>
            <li class="yt"><a href="#"><i class="fa-brands fa-youtube"></i></a></li>
            <li class="insta"><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
            <li class="github"><a href="#"><i class="fa-brands fa-github"></i></a></li>
            <li class="twitter"><a href="#"><i class="fa-brands fa-twitter"></i></a></li>
        </ul>
    </div>

</body>
</html>


CSS Code

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

.container {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container ul {
    padding: 1rem;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.container ul li {
    width: 70px;
    margin: 1rem;
    height: 70px;
    padding: 1rem;
    display: flex;
    font-size: 30px;
    border-radius: 5px;
    align-items: center;
    justify-content: center;
    transition: all 0.2s linear;
    border: 1px solid rgb(195, 194, 211);
}

ul li a {
    color: rgb(12, 7, 110);
}

.container ul li:hover {
    transform: translate(5px, -5px);
}

.fb:hover i,
.fb:hover {
    color: white;
    background-color: blue;
}

.yt:hover i,
.yt:hover {
    color: white;
    background-color: red;
}

.insta:hover i,
.insta:hover {
    color: white;
    background-color: rgb(255, 0, 225);
}

.github:hover i,
.github:hover {
    color: white;
    background-color: #272b33;
}

.twitter:hover i,
.twitter:hover {
    color: white;
    background-color: #00acee;
}

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