THAPA TECHNICAL

HOUSE OF WEB DEVELOPERS AND TECHNOLOGY.

Sticky Social Media Bar using HMTL and CSS in 2020

Sticky Social Media Bar using HTML CSS in 2020

Welcome, In this tutorial I will show you, how we can create an awesome Sticky Social Media Bar using HTML CSS in 2020. 

But Before going into it. I will like to make it clear that you should be familiar with the core concept of CSS and CSS3. i.e animation, transform, position, z-index etc.  By the way, don't worry I already have videos on all the topics I just mention here. so check out my channel for this here ThapaTechnical






Here is the Source Code 

index.html



<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" integrity="sha512-PgQMlq+nqFLV4ylk1gwUOgm6CtIIXkKwaIHp/PAIWHzig/lKZSEGKEysh0TCVbHJXCLN7WetD8TFecIky75ZfQ==" crossorigin="anonymous" />
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="icon-bar">
<a href='#' class='facebook' target='_blank'>
click here to visit <i class=" fab fa-facebook-square"></i>
</a>
<a href='#' class='twitter' target='_blank'>
click here to visit<i class=" fab fa-twitter-square"></i>
</a>
<a href='https://www.instagram.com/vinodthapa55/' class='instagram' target='_blank'>
click here to visit<i class="fab fa-instagram"></i>
</a>
<a href='' class='linkedin' target='_blank'>
click here to visit<i class=" fab fa-linkedin"></i>
</a>
<a href='https://www.youtube.com/thapatechnical' class='youtube' target='_blank'>
click here to visit<i class=" fab fa-youtube-square"></i></a>
</div>
</body>
</html>


style.css file




@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;
}

a {
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;
}

.facebook {
background: #3b5998;
}

.twitter {
background: #00aced;
}

.instagram {
background: #e4405f;
}

.youtube {
background: #cd201f;
}

.linkedin {
background: #0077B5;
}


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);
}

}

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

31 comments:

  1. Lessons on how to use social media from the movie "Chef". Ten tips on social media that you can apply to your business to help attract, win and retain even more profitable customers by using powerful marketing tools such as Tweeting, YouTube, Instagram and Vine. Free TikTok Views

    ReplyDelete
  2. Get Your Social Account's Followers, Likes And Promotions at One Place Instantly 100% Safe Our service help you build your business, get your social media content around the world and become famous. It offers you all the services you will need for Youtube, Facebook, Twitter, Instagram and other Services. spotify followers

    ReplyDelete
  3. With the popularity of the TikTok, more and more people have decided to move on it to try to conquer new users and earn with TikTok. popularity of the TikTok

    ReplyDelete
  4. Great Information sharing .. I am very happy to read this article .. thanks for giving us go through info.Fantastic nice. I appreciate this post. buy spotify streams

    ReplyDelete
  5. Thanks for the blog loaded with so many information. Stopping by your blog helped me to get what I was looking for. acheter des abonnés

    ReplyDelete
  6. Nice blog and absolutely outstanding. You can do something much better but i still say this perfect.Keep trying for the best. acheter des abonnés

    ReplyDelete
  7. Moving organizations to the web is anything but a poorly conceived notion. Web applications offer another approach to work and backing how you work through close to home web email records and internet providers. download tt videos

    ReplyDelete
  8. To be best in social media, it is useful to think about its segments as shaping a 3D square, with social and media as two of the sides. https://mamabee.com/smm-aka-social-media-panel-why-they-are-perfect-for-any-influencer/

    ReplyDelete
  9. ReachSMM panel is the Global latest social media marketing panel from Brazil to increase Facebook likes and followers, Instagram likes & followers, Youtube likes & subscribers. SMM Panel for Instagram likes

    ReplyDelete
  10. Have you ever stepped into a comedy club? You see how much of a buzz there is, how many people are crammed into the tiny club ordering drinks, food, and having a laugh. That's a great deal of business for one club owner. Perhaps you should consider starting your own comedy club. If that's just what you've been craving to give your life that little extra kick, then there are a few things you need to keep in mind. Get Tiktok followers

    ReplyDelete
  11. Thanks for a very interesting blog. What else may I get that kind of info written in such a perfect approach? I’ve a undertaking that I am simply now operating on, and I have been at the look out for such info. 2020 rap songs

    ReplyDelete
  12. Lets add another word that your need to prove within your business plan - viable. Your investor or lender wants to see that you company is going to be viable. If you do a Google search about the "Internet. Press Release Distribution

    ReplyDelete
  13. It is a good site post without fail. Not too many people would actually, the way you just did. I am impressed that there is so much information about this subject that has been uncovered and you’ve defeated yourself this time, with so much quality. Good Works! social pilot

    ReplyDelete
  14. nice bLog! its interesting. thank you for sharing.... Buy TikTok likes

    ReplyDelete
  15. The key is to use a URL shortener for whatever product or site you try to promote. You can use Bit.ly which is very popular, especially on Twitter. https://noeticforce.com

    ReplyDelete
  16. However, representatives who grumble about working environment treatment dependent on their social media movement might be secured under the NLRA, regardless of whether their posts contain impolite or coarse language! Resurge Deep Sleep & High Support Formula

    ReplyDelete
  17. What is an outstanding post! “I’ll be back” (to read more of your content). Thanks for the nudge! increase pa

    ReplyDelete
  18. This article gives the light in which we can observe the reality. This is very nice one and gives indepth information. Thanks for this nice article. afflift

    ReplyDelete
  19. Wow, What an Outstanding post. I found this too much informatics. It is what I was seeking for. I would like to recommend you that please keep sharing such type of info.If possible, Thanks. زيادة متابعين انستقرام

    ReplyDelete
  20. It is the kind of information I have been trying to find. Thank you for writing this information. It has proved utmost beneficial for me. social media management

    ReplyDelete
  21. I will prefer this blog because it has much more informative stuff.

    ReplyDelete
  22. Be bookmarked easily. Create a link that would enable others to bookmark your page. You can do this by being publicly bookmarked by all people who are associated with you. grow your followers

    ReplyDelete
  23. They offered a fresh perspective to guide our project
    branding design agency

    ReplyDelete
  24. Wow! Such an amazing and helpful post this is. I really really love it. It's so good and so awesome. I am just amazed. I hope that you continue to do your work like this in the future also acheter des vues francaises

    ReplyDelete
  25. Recollect that social media supervisors are not mystics. They should follow up for your sake utilizing the accepted procedures of the business, yet there is a great deal that is out of their control. tt video downloader

    ReplyDelete
  26. I have been surfing online for more than three hours today, yet I never found any interesting article like yours. It’s pretty worth enough for me. Personally, sagame
    ufa

    ufabet

    ReplyDelete

  27. This is just the information I am finding everywhere. Thanks for your blog, I just subscribe your blog. This is a nice blog..

    ufabet
    ufa
    sexy baccarat
    slotxo
    sagame

    ReplyDelete