Hey coders, today let's see how to make floating social media icons as you see above or in my video tutorial below. 


Here, i'll share the project source codes. 

SOURCE CODE (Paste this code in index.html file and run it)
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!-- Created by CodingPorium,2021. Visit https://youtube.com/c/CodingPorium for more tutorials with free source code -->
<!DOCTYPE html>
<html>
  <title>How To Make Floating Social Media Icons using HTML & CSS | CodingPorium</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
body{
  margin:0;
  height:2000px;
  font-family:poppins;
}
.icon-nav{
  position:fixed;
  top:50%;
  -webkit-transform:translateY(-50%);
  -ms-transform:translateY(-50%);
  transform:translateY(-50%);
}
.icon-nav a{
  display:block;
  text-align:center;
  padding:16px;
  transition:all 0.3s ease;
  color:white;
  font-size:20px;
}
.icon-nav a:hover{
  opacity:0.7;
}
.facebook{
  background:#3B5998;
  color:white;
}
.instagram{
  color:white;
  background:#FF05BC;
}
.twitter{
  background:#55ACEE;
  color:white;
}
.twitch{
  background:#A305FF;
  color:white;
}
.blogger{
  background:#FF7B0F;
  color:white;
}
.youtube{
  background:#FF0800;
  color:white;
}
.content{
  margin-left:75px;
  font-size:35px;
}
</style>
<body>
<div class="icon-nav">
  <a href="#" class="facebook"><i class="fab fa-facebook"></i></a>
  <a href="#" class="instagram"><i class="fab fa-instagram"></i></a>
  <a href="#" class="twitter"><i class="fab fa-twitter"></i></a>
  <a href="#" class="twitch"><i class="fab fa-twitch"></i></a>
  <a href="#" class="blogger"><i class="fab fa-blogger"></i></a>
  <a href="#" class="youtube"><i class="fab fa-youtube"></i></a>
</div>

<div class="content">
  <h1>Floating Social Media Icons using HTML & CSS</h1>
  <p>The sticky social bar will stick to the screen when you scroll. For a better understanding, we'll scroll the page with some Lorem ipsum text.</p>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>

</body>
</html>
 

Thanks for reading, and I hope you liked this project. Do comment down your doubts or suggestions. TIll the next project,byeee!

2 Comments

Post a Comment

Previous Post Next Post