A Pen by Volusion Services
How do I make an a pen by volusion services?
What is a a pen by volusion services? How do you make a a pen by volusion services? This script and codes were developed by Volusion Services on 11 August 2022, Thursday.
A Pen by Volusion Services Previews
A Pen by Volusion Services - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Volusion Services </title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <head><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
</head>
<body> <span style="display:none;" id="svgIncludes"></span> <div class="container"> <div class="row"> <h1>Social Media Icons in SVG</h1> <div class="social"> <div class="col-xs-6"> <h2>Facebook</h2> <div class="social__icons"> <a class="facebook" href="#"> <svg class="icon" viewBox="0 0 1024 1024"><use xlink:href="#facebook-circle-punched"></use></svg> </a> <a class="facebook" href="#"> <svg class="icon" viewBox="0 0 1024 1024"><use xlink:href="#facebook-circle"></use></svg> </a> <a class="facebook" href="#"> <svg class="icon" viewBox="0 0 1024 1024"><use xlink:href="#facebook-simple"></use></svg> </a> <a class="facebook" href="#"> <svg class="icon" viewBox="0 0 1024 1024"><use xlink:href="#facebook-square"></use></svg> </a> </div> <h2>Twitter</h2> <div class="social__icons"> <a class="twitter" href="#"> <svg class="icon" viewBox="0 0 1024 1024"><use xlink:href="#twitter-circle-punched"></use></svg> </a> <a class="twitter" href="#"> <svg class="icon" viewBox="0 0 1024 1024"><use xlink:href="#twitter-circle"></use></svg> </a> <a class="twitter" href="#"> <svg class="icon" viewBox="0 0 1024 1024"><use xlink:href="#twitter-simple"></use></svg> </a> <a class="twitter" href="#"> <svg class="icon" viewBox="0 0 1024 1024"><use xlink:href="#twitter-square"></use></svg> </a> </div> <h2>Pinterest</h2> <div class="social__icons"> <a class="pinterest" href="#"> <svg class="icon" viewBox="0 0 1024 1024"><use xlink:href="#pinterest-circle-punched"></use></svg> </a> <a class="pinterest" href="#"> <svg class="icon" viewBox="0 0 1024 1024"><use xlink:href="#pinterest-circle"></use></svg> </a> <a class="pinterest" href="#"> <svg class="icon" viewBox="0 0 1024 1024"><use xlink:href="#pinterest-simple"></use></svg> </a> <a class="pinterest" href="#"> <svg class="icon" viewBox="0 0 1024 1024"><use xlink:href="#pinterest-square"></use></svg> </a> </div> <h2>Google Plus</h2> <div class="social__icons"> <a class="gplus" href="#"> <svg class="icon" viewBox="0 0 1024 1024"><use xlink:href="#gplus-circle-punched"></use></svg> </a> <a class="gplus" href="#"> <svg class="icon" viewBox="0 0 1024 1024"><use xlink:href="#gplus-circle"></use></svg> </a> <a class="gplus" href="#"> <svg class="icon" viewBox="0 0 1024 1024"><use xlink:href="#gplus-simple"></use></svg> </a> <a class="gplus" href="#"> <svg class="icon" viewBox="0 0 1024 1024"><use xlink:href="#gplus-square"></use></svg> </a> </div> </div> <div class="col-xs-6"> <h2>You Tube</h2> <div class="social__icons"> <a class="youtube" href="#"> <svg class="icon" viewBox="0 0 1024 1024"><use xlink:href="#youtube-circle-punched"></use></svg> </a> <a class="youtube" href="#"> <svg class="icon" viewBox="0 0 1024 1024"><use xlink:href="#youtube-circle"></use></svg> </a> <a class="youtube" href="#"> <svg class="icon" viewBox="0 0 1024 1024"><use xlink:href="#youtube-simple"></use></svg> </a> <a class="youtube" href="#"> <svg class="icon" viewBox="0 0 1024 1024"><use xlink:href="#youtube-square"></use></svg> </a> </div> <h2>Tumblr</h2> <div class="social__icons"> <a href="#" class="tumblr"> <svg class="icon" viewBox="0 0 1024 1024"><use xlink:href="#tumblr-circle-punched"></use></svg> </a> <a href="#" class="tumblr"> <svg class="icon" viewBox="0 0 1024 1024"><use xlink:href="#tumblr-circle"></use></svg> </a> <a href="#" class="tumblr"> <svg class="icon" viewBox="0 0 1024 1024"><use xlink:href="#tumblr-simple"></use></svg> </a> <a href="#" class="tumblr"> <svg class="icon" viewBox="0 0 1024 1024"><use xlink:href="#tumblr-square"></use></svg> </a> </div> <h2>Instagram</h2> <div class="social__icons"> <a href="#" class="instagram"> <svg class="icon" viewBox="0 0 1024 1024"><use xlink:href="#instagram-circle-punched"></use></svg> </a> <a href="#" class="instagram"> <svg class="icon" viewBox="0 0 1024 1024"><use xlink:href="#instagram-simple-circle-punched"></use></svg> </a> <a href="#" class="instagram"> <svg class="icon" viewBox="0 0 1024 1024"><use xlink:href="#instagram"></use></svg> </a> <a href="#" class="instagram"> <svg class="icon" viewBox="0 0 1024 1024"><use xlink:href="#instagram-circle"></use></svg> </a> <a href="#" class="instagram"> <svg class="icon" viewBox="0 0 1024 1024"><use xlink:href="#instagram-square"></use></svg> </a> <a href="#" class="instagram"> <svg class="icon" viewBox="0 0 1024 1024"><use xlink:href="#instagram-simple"></use></svg> </a> <a href="#" class="instagram"> <svg class="icon" viewBox="0 0 1024 1024"><use xlink:href="#instagram-simple-circle"></use></svg> </a> <a href="#" class="instagram"> <svg class="icon" viewBox="0 0 1024 1024"><use xlink:href="#instagram-simple-square"></use></svg> </a> </div> <h2>Blogger</h2> <a href="#" class="blogger"> <svg class="icon" viewbox="0 0 1024 1024"><use xlink:href="#blogger-circle-punched"></use></svg> </a> <a href="#" class="blogger"> <svg class="icon" viewbox="0 0 1024 1024"><use xlink:href="#blogger-circle"></use></svg> </a> <a href="#" class="blogger"> <svg class="icon" viewbox="0 0 1024 1024"><use xlink:href="#blogger-simple"></use></svg> </a> <a href="#" class="blogger"> <svg class="icon" viewbox="0 0 1024 1024"><use xlink:href="#blogger-square"></use></svg> </a>
</div>
</div>
</div>
</div>
</body> <script src="js/index.js"></script>
</body>
</html>
A Pen by Volusion Services - Script Codes CSS Codes
/* Basic Body/Container Styles */
body { font-family: 'Oswald', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: #333;
}
a { outline: none; display: inline-block;
}
h1, h2 { text-transform: uppercase; color: #ddd;
}
h2 { border-bottom: 1px solid #ddd; width: 100%; padding-bottom: 0.5em;
}
/* Icon Styles */
.social__icons { margin: 2em 0;
}
.social .icon { display: inline-block; vertical-align: middle; margin-right: 1em; width: 3em; height: 3em; -moz-transition: 0.2s; -o-transition: 0.2s; -webkit-transition: 0.2s; transition: 0.2s;
}
.social .icon:hover { fill: #fff;
}
.facebook .icon { fill: #3B5998;
}
.twitter .icon { fill: #00aced;
}
.pinterest .icon { fill: #cb2027;
}
.gplus .icon { fill: #dd4b39;
}
.youtube .icon { fill: #bb0000;
}
.tumblr .icon { fill: #32506d;
}
.instagram .icon { fill: #517fa4;
}
.blogger .icon { fill: #FF6600;
}A Pen by Volusion Services - Script Codes JS Codes
$(function(){ $("#svgIncludes").load("https://s3-us-west-2.amazonaws.com/s.cdpn.io/40839/svgdefs.svg"); });
| Developer | Volusion Services |
| Username | volusion |
| Uploaded | August 11, 2022 |
| Rating | 4.5 |
| Size | 3,334 Kb |
| Views | 52,624 |
Do you need developer help for A Pen by Volusion Services?
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!
Volusion Services (volusion) Script Codes
| Name | Size |
| Grayscale filter transition applied to background on hover | 2,396 Kb |
| Volusion SVG animation | 6,643 Kb |
| Search with SVG icon | 3,314 Kb |
| CSS3 Button Examples | 3,377 Kb |
| Css3 Menu Examples | 4,519 Kb |
| CSS3 Box Promos | 5,328 Kb |
| Change img src based on browser width responsively using javascript | 2,448 Kb |
| Collapsable Search | 2,049 Kb |
| Credit Card Icons in SVG | 11,416 Kb |
| SVG snippets for common icons | 8,053 Kb |
Create amazing art & images 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!
Similar Scripts & Codes
| Name | Username | Size |
| Isometric css island | Xaddict | 2,950 Kb |
| SlideupBoxes | Gavra | 23,772 Kb |
| Multicolumns 2 | Raphaelgoetter | 1,857 Kb |
| Display properties | Hamzaerbay | 1,886 Kb |
| Sticky Navbar | Phantomesse | 5,106 Kb |
| CSS Social Media Icon | TychoBlender | 3,871 Kb |
| Disable JavaScript execution from console | Ludviglindblom | 2,534 Kb |
| A Pen by Taylor Vowell | Taylorvowell | 5,962 Kb |
| Ball physics | Blackkbot | 3,874 Kb |
| Click handler test | Snapson | 2,329 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!