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
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
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
