Added an Animated Responsive Fixed Social Media SideBar

[Krishna-Pradeep-Dawalkar]

Added an Animated Responsive Fixed Social Media SideBar and removed the bottom social media bar, I hope this beautifies our website. I've updated the index.html and style.css file to replace the bottom social media bar by an animated responsive fixed social media sideBar, this social media bar is quite fascinating and looks more beautiful and more decorative and attractive. Just check it out once!

the following code was added:- HTML

<div class="icon-bar">
    <a href="https://discord.com/invite/hacktoberfest" id='discord' class="social" target='_blank' >
        click to visit <i class="fab fa-discord"></i>
    </a>
    <a href="https://www.instagram.com/hacktoberfest/?hl=en" id='instagram' class="social" target='_blank'>
        click to visit<i class="fab fa-instagram"></i>
    </a>
    <a href='https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fhacktoberfest.digitalocean.com' id='linkedin' class="social" target='_blank'>
        click to visit<i class=" fab fa-linkedin"></i>
    </a>
    <a href="#!" id='github' class="social" target='_blank'>
    click to visit<i class="fab fa-github"></i></a>
</div>

CSS @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');

• { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Source Sans Pro', sans-serif; }

.icon-bar { position: fixed; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); z-index: 10; }

.social{ text-decoration: none; width: 210px; background: #3b5999; color: #fff; display: flex; justify-content: flex-end; align-items: center; padding: 5px; font-size: 20px; transform: translateX(-170px); -webkit-transform: translateX(-170px); -ms-transform: translateX(-170px); transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -ms-transition: all 0.5s linear; }

discord {

background: #3b5998;
color:white;

}

instagram {

background: #e4405f;
color:white;

}

github {

background: lightgray;
color:black;

}

linkedin {

background: #0077B5;
color:white;

}

a i { padding-left: 20px; font-size: 30px !important; animation: letszoom 3s linear alternate-reverse infinite; }

@keyframes letszoom { from { transform: scale(0.8); }

to {
    transform: scale(1);
}

}

.icon-bar a:hover { transform: translateX(0); -webkit-transform: translateX(0); -ms-transform: translateX(0); }