Social Bar

Developer
Jack
Size
2,200 Kb
Views
32,384
  1. Social Bar Previews
  2. Social Bar HTML Codes
  3. Social Bar CSS Codes

How do I make an social bar?

What is a social bar? How do you make a social bar? This script and codes were developed by Jack on 16 September 2022, Friday.

Social Bar Previews
IQ Test

Social Bar - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Social Bar</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="sizer"> <div class="social"> <ul> <li><a href="">Instagram<span><i class="fa fa-instagram"></i></span></a></li> <li><a href="">Codepen<span><i class="fa fa-codepen"></i></span></a></li> <li><a href="">Facebook<span><i class="fa fa-facebook-square"></i></span></a></li> <li><a href="">twitter<span><i class="fa fa-twitter-square"></i></span></a></li> <li><a href="">Pinterest<span><i class="fa fa-pinterest-square"></i></span></a></li> </ul>
</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Social Bar - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,600,700);
@import url(https://fonts.googleapis.com/css?family=Raleway:100,300,400,700);
html, body { height: 100%;}
body { font-family: 'Roboto'; font-weight: 300; background: #ecf0f1; font-smoothing: antialiased;}
.social { position: absolute; -webkit-transform: translatex(-50%) translatey(-50%); width: 100%; height: 100%; left:50%; top:50%; text-align: center; line-height: 120px; border-radius: 2px; color: rgba(255, 255, 255, 0.3);}
.sizer { position: relative; width: 100%; min-width:700px; max-width:800px; height: 70px; animation: expand 8s linear infinite; margin: 0 auto; border-radius: 2px;}
.social a{text-decoration:none;color:black;}
.social ul {list-style: none; font-size: 0;}.social ul li a:hover, ul li a:hover span { color: rgba(40,200,255,1);}
.social ul li { text-decoration:none; display: inline-block; height: 50px; vertical-align: top; font: 300 10px 'Roboto'; letter-spacing: 2px; text-align: center; text-transform: uppercase; border-right: 2px solid rgba(255,255,255,.05); padding: 5px 25px;
}
ul li span { text-decoration:none; display: block; font-size: 3em; font-weight: 700; letter-spacing: 0; padding-top: 5px;
}
ul li span img { max-width: 20px; height: auto !important; padding-top: 5px;
}
ul li:first-child {padding-left:0;}
ul li:last-child {border:none;padding-right:0;}
Social Bar - Script Codes
Social Bar - Script Codes
Home Page Home
Developer Jack
Username jackmoran
Uploaded September 16, 2022
Rating 3
Size 2,200 Kb
Views 32,384
Do you need developer help for Social Bar?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jack (jackmoran) Script Codes
Name
A Pen by jack
MENU to Close Arrow
Sliding Blocks
Unify Test Example of Panorama
Svg Icons of my personal logo-moranideas
Design-Thru
Flex-panels content
Stars Rise
CSS Google Now
Rework of the rework with additional events
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!