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

102 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
  28. Hey There. I found your blog using msn. This is a very well written article. I’ll be sure to bookmark it and come back to read more of your useful info. Thanks for the post. I’ll definitely return. smm panel

    ReplyDelete
  29. This is such a great resource that you are providing and you give it away for free. I love seeing blog that understand the value of providing a quality resource for free. Anrufbeantworter geschäftlich

    ReplyDelete
  30. You don't must have a Prince2 endorsement, yet you do should have the option to oversee projects and your time well. It's average for social media supervisor's to work with numerous customers at any one time. Watching everything is significant so it doesn't get overpowering. automatic instagram likes monthly

    ReplyDelete
  31. Having more followers means more visibility and that means more customers, all this will lead to higher revenue. takipçi satın al

    ReplyDelete
  32. Instagram has shut down a large number of third-party automation sites and apps like Instagress and PeerBoost for violating their Community Guidelines and Terms of Use, so using bots could even jeopardize your account. automatic likes Instagram

    ReplyDelete
  33. Buckling down on just getting an extraordinary plan for our site, may end you up with simply a beautiful site which has no web presence. Zeroing in just on site improvement and no other viewpoint will make your site receptive to the web crawler robots rather than your guests that will build your ricochet rate. What's more, zeroing in just via online media won't help you in getting returns of your enormous speculation.Galway Web Design

    ReplyDelete
  34. Facebook has recently implanted the use of hashtags into its social networking service. Similar to Twitter and other social networks, the hashtags can be used on individual posts. 먹튀검증업체

    ReplyDelete
  35. Customer insights are extremely valuable and that's what social media does. I Social Music sharing site

    ReplyDelete
  36. Yes i am totally agreed with this article and i just want say that this article is very nice and very informative article.I will make sure to be reading your blog more. You made a good point but I can't help but wonder, what about the other side? !!!!!!Thanks Social media

    ReplyDelete
  37. To learn more about this social media powerhouse and to get more tips to gain followers on Instagram, download my free Instagram Marketing Guide at this website

    ReplyDelete
  38. So building your Instagram audience is vital to your success now and even more so in the coming future. If your not building your targeted audience (people who are interested in your business or personal brand) it's almost like not having a cell phone or email for people to contact you. automatic story views on Instagram

    ReplyDelete
  39. I definitely enjoying every little bit of it. It is a great website and nice share. I want to thank you. Good job! You guys do a great blog, and have some great contents. Keep up the good work. Buy Instagram likes

    ReplyDelete
  40. Watch movies online sa-movie.com, watch new movies, series Netflix HD 4K, watch free movies on your mobile phone, Tablet, watch movies on the web. ดูหนังออนไลน์


    SEE4K Watch movies, watch movies, free series, load without interruption, sharp images in HD FullHD 4k, all matters, all tastes, see anywhere, anytime, on mobile phones, tablets, computers. ดูหนังใหม่


    GangManga read manga, read manga, read manga online for free, fast loading, clear images in HD quality, all titles, anywhere, anytime, on mobile, tablet, computer. อ่านการ์ตูน


    Watch live football live24th, watch football online, link to watch live football, watch football for free. ผลบอลสดa

    ReplyDelete
  41. SamudraBet Situs Judi Online Terbaik, Terpercaya dan Terbesar di Indonesia. Menyediakan permainan :

    Judi bola terbaik

    Judi slot online terpercaya

    Poker online terbaru

    Live casino online

    Judi sabung ayam

    ReplyDelete
  42. Why settle for static LinkedIn posts when you can jazz things up with merry go rounds? buy linkedin likes

    ReplyDelete
  43. Increase your exposure on social media! Check out our deals and buy Instagram Followers, Buy Youtube Subscribers, and more! Fast, cheap, and 24/7 Support cheap tiktok likes

    ReplyDelete
  44. เราคือผู้นำด้านเกมพนันออนไลน์ Major168 เราคือผู้ให้บริการ คาสิโนออนไลน์ คาสิโนออนไลน์ ที่ได้รับรองว่าดีที่สุดในประเทศไทย มีค่ายเกมส์ให้เล่นมากมาย Sagaming, Sexy bacarat, Dreamgame, Ebet, Wm casino, Vivo gaming ไม่ผ่านเอเย่นต์ ระบบปลอดภัยมีทีมงานดูแลตลอด 24ชม.

    SAGAME88 แหล่งรวมเกมส์พนันออนไลน์ คาสิโนสด บาคาร่า กำถั่ว คาสิโนออนไลน์ ไฮโล รูเล็ต รับเครดิตฟรีเล่นได้ทุกเกมส์ โบนัสสมาชิกใหม่เพียบ พร้อมระบบฝากถอนออโต้ 10วิ เรามีทุกค่ายเกมส์ให้คุณเลือกเดิมพัน SA Game Sexy bacarat Dreamgame WM Casino VIVO Gaming Ebet เล่นได้ทุกเกมส์

    Our website ufabet provides betting services in the system of Auto Deposit-Withdrawal. Our members are not only in Thailand. Online football betting UEFA Bet market And this makes a guarantee that Ufabet168 is another reliable football betting website

    ufa through the website UFABET1688 a web gambling online , one that integrated all the bets from online casinos , online casino , online , and also have a game a lot more to be chosen to play such games.

    ReplyDelete
  45. เราคือผู้นำด้านเกมพนันออนไลน์ Major168 เราคือผู้ให้บริการ คาสิโนออนไลน์ คาสิโนออนไลน์ ที่ได้รับรองว่าดีที่สุดในประเทศไทย มีค่ายเกมส์ให้เล่นมากมาย Sagaming, Sexy bacarat, Dreamgame, Ebet, Wm casino, Vivo gaming ไม่ผ่านเอเย่นต์ ระบบปลอดภัยมีทีมงานดูแลตลอด 24ชม.

    SAGAME88 แหล่งรวมเกมส์พนันออนไลน์ คาสิโนสด บาคาร่า กำถั่ว คาสิโนออนไลน์ ไฮโล รูเล็ต รับเครดิตฟรีเล่นได้ทุกเกมส์ โบนัสสมาชิกใหม่เพียบ พร้อมระบบฝากถอนออโต้ 10วิ เรามีทุกค่ายเกมส์ให้คุณเลือกเดิมพัน SA Game Sexy bacarat Dreamgame WM Casino VIVO Gaming Ebet เล่นได้ทุกเกมส์

    Our website ufabet provides betting services in the system of Auto Deposit-Withdrawal. Our members are not only in Thailand. Online football betting UEFA Bet market And this makes a guarantee that Ufabet168 is another reliable football betting website

    ufa through the website UFABET1688 a web gambling online , one that integrated all the bets from online casinos , online casino , online , and also have a game a lot more to be chosen to play such games.

    ReplyDelete
  46. one can use social media to promote their brand, whether it is any product, service or thought. Having a huge number of followers means they can reach out to their fans and establish their offering to them. classement youtubeur français

    ReplyDelete
  47. It's superior, however , check out material at the street address. navigate to this site

    ReplyDelete
  48. Posting irregularly will create a negative impression on your visitors. smm panel

    ReplyDelete
  49. Cool stuff you have got and you keep update all of us. شراء متابعين انستقرام

    ReplyDelete
  50. This is the best blog annualeventpost I ever see. Thanks for sharing information with us.

    ReplyDelete
  51. Thanks for your insight for your fantastic posting. I’m glad I have taken the time to see this. smm panel

    ReplyDelete
  52. one fast silveOnline football betting Online casinos Baccarat on the internet In a handy manner, i99PRO 24 hour system can enable you to pleasantly bet on boxing. And as well boasts a full system Open just one single website, this can do everything. Since the heart desires actually There's additionally a Call Center personnel that are made twenty four several hours one day plus our website offers a wide range of solutions including web based football betting. Boxing betting online and casinos that are starting to be famous within this dimensions. And still well known as one of the top part. Our i99PRO website has also gained the confidence in addition to being total satisfaction of many gambling fanatics. And as well offers a wide range of football, boxing, basketball, lottery, web based casinos And there are a lot more different types of sports waiting for one to come in.r fox บาคาร่า
    สล็อต
    ufa
    ufabet
    แทงบอล
    แทงบอล

    ReplyDelete
  53. This is the first of a series of articles on buying on eBay - getting deals and avoiding trouble. This first article isn't so much about secret tips and tactics to use when buying on eBay, but how to get started on the right foot. Buy Gmail Accounts

    ReplyDelete
  54. Great articles and great layout. Your blog post deserves all of the positive feedback it’s been getting. best smm panel

    ReplyDelete

  55. Nice post. I used to be checking constantly this blog and I am impressed! Extremely useful info particularly the ultimate section 🙂 I take care of such information a lot. I was seeking this certain information for a long time. Thank you and best of luck.
    Essay on ecosystem restoration

    ReplyDelete
  56. Thanks so much for this information. I have to let you know I concur on several of the points you make here and others may require some further review, but I can see your viewpoint. زيادة متابعين انستقرام

    ReplyDelete
  57. On the off chance that you devise your web-based media procedures, for example, web-based media enhancement based on latest things, you can expand benefits and utilize person to person communication destinations adequately for promoting. Buy real website traffic to website ranking

    ReplyDelete
  58. I have a similar interest this is my page read everything carefully and let me know what you think. text newsletter

    ReplyDelete
  59. Social media exists on the web. Consequently, you need to have a specific level of PC education. Having great information on social innovation will upgrade your administrations and guarantee you are staying up with the latest with the most recent social patterns and improvements. https://sites.google.com/view/instagramfollowersbuy/

    ReplyDelete
  60. You possess lifted an essential offspring..Blesss for using..I would want to study better latest transactions from this blog..preserve posting.. look at this site

    ReplyDelete
  61. That is the excellent mindset, nonetheless is just not help to make every sence whatsoever preaching about that mather. Virtually any method many thanks in addition to i had endeavor to promote your own article in to delicius nevertheless it is apparently a dilemma using your information sites can you please recheck the idea. thanks once more. زيادة لايكات انستقرام

    ReplyDelete
  62. I high appreciate this post. It’s hard to find the good from the bad sometimes, but I think you’ve nailed it! would you mind updating your blog with more information? شراء مشاهدات يوتيوب

    ReplyDelete
  63. Gain New Monthly Listeners on Spotify. Social media exists on the web. Buy spotify plays to Grow Your Fanbase.

    ReplyDelete
  64. I feel very grateful that I read this. It is very helpful and very informative and I really learned a lot from it. Play Free slots

    ReplyDelete
  65. This is a smart blog. I mean it. You have so much knowledge about this issue, and so much passion. You also know how to make people rally behind it, obviously from the responses. Cheapest smm panel

    ReplyDelete
  66. I have read and acknowledged your post, you are amazing blogger. I would like to add some suggestions like if you will reach Web App Development Company you can get to know more ideas.

    ReplyDelete
  67. Very informative post ! There is a lot of information here that can help any business get started with a successful social networking campaign ! https://www.buyyoutubesubscribers.in/

    ReplyDelete
  68. In opposition to famous reasoning, ROI can generally be estimated in social showcasing. In any case, it very well may be perceptual. What are your objectives? Is it true that they were accomplished? Provided that this is true, then, at that point you had a positive ROI. https://twitchviral.com/

    ReplyDelete
  69. The accomplishment of Facebook roused different organizations to dispatch their own social networking sites. In March 2005, Yahoo's organization called Yahoo 360º was dispatched. https://twitchviral.com/

    ReplyDelete
  70. When it involves expert internet site advertising, there are numerous people and businesses that declare to be experts.유튜브 구독자 늘리기

    ReplyDelete
  71. Buy in To Others - If you buy in to other YouTube channels that are generally in similar specialty as yours, the odds are they may buy toward the rear.https://www.buyyoutubeviewsindia.in/youtube-marketing/

    ReplyDelete
  72. Very delightful blog post!! I am glad to have your blog post to read. Video streaming trend is emerging and evolving more with video streaming app development.

    ReplyDelete
  73. of sludge toxins. You can make this detox drink by mixing 8 ounces of distilled water with 1 to 2 tablespoons of raw and unfiltered apple cider vinegar. You can add any sweetener (organic honey, maple syrup, or Stevia) to make it easy to consume. ACV is considered safe to try in doses below two tablespoons per day. However, most ACV detox diets often advocate more than this. By this estimation, it is clear that you need to go cold turkey for more than three months Visit: https://www.urineworld.com/

    ReplyDelete
  74. Thanks for the blog article. Much thanks again. Cool.instagram video uploader

    ReplyDelete
  75. LinkedIn shows 57,910 outcomes for "social media director" how to post reel from pc

    ReplyDelete
  76. Go live on social media at least once a week! And be sure to include a call to action that sells your audience something valuable at the end. buy instagram followers

    ReplyDelete
  77. Really enjoyed this article post. Thanks Again. Will read on...
    post to instagram from pc

    ReplyDelete
  78. I am surprised that I am reading such an informative as well as creative post. Businesses looking for highly functional native applications can Hire React Native Developer and develop an app full of benefits.

    ReplyDelete
  79. I'm glad to see the well-optimized content, thanks for sharing the topic. Get the best deal of social media marketing from SMM Panel

    ReplyDelete