"social icons fork"
Bootstrap 2.3.2 Snippet by rayrc

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html><head><title>Free Glowing Neon Social Icon Theme in Pure CSS</title> <link rel="stylesheet" href="http://rayanthony.io/assets/fonts/foundation-icons.css"> <style> @import url(http://fonts.googleapis.com/css?family=Fira+Sans:300,400,500); @import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css?family=FontAwesome:300,400,500,800); html,body{ margin:0; margin: auto; padding:0; position: absolute; top: 0; left: 0; bottom: 0; right: 0; min-height:100%; } html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}body{font:13px/1.231 sans-serif;*font-size:small}select,input,textarea,button{font:99% sans-serif}pre,code,kbd,samp{font-family:monospace,sans-serif}h1,h2,h3,h4,h5,h6{font-weight:bold}a:hover,a:active{outline:none}a,a:active,a:visited{color:#607890}a:hover{color:#036}ul,ol{margin-left:2em}ol{list-style-type:decimal}nav ul,nav li{margin:0}small{font-size:85%}strong,th{font-weight:bold}td,td img{vertical-align:top}sub,sup{font-size:75%;line-height:0;position:relative}sup{top:-0.5em}sub{bottom:-0.25em}pre{padding:15px;white-space:pre;white-space:pre-wrap;white-space:pre-line;word-wrap:break-word}textarea{overflow:auto}.ie6 legend,.ie7 legend{margin-left:-7px}input[type="radio"]{vertical-align:text-bottom}input[type="checkbox"]{vertical-align:bottom}.ie7 input[type="checkbox"]{vertical-align:baseline}.ie6 input{vertical-align:text-bottom}label,input[type="button"],input[type="submit"],input[type="image"],button{cursor:pointer}button,input,select,textarea{margin:0}input:invalid,textarea:invalid{border-radius:1px;-moz-box-shadow:0 0 5px red;-webkit-box-shadow:0 0 5px red;box-shadow:0 0 5px red}.no-boxshadow input:invalid,.no-boxshadow textarea:invalid{background-color:#f0dddd}::-moz-selection{background:#ff5e99;color:#fff;text-shadow:none}::selection{background:#ff5e99;color:#fff;text-shadow:none}a:link{-webkit-tap-highlight-color:#ff5e99}button{width:auto;overflow:visible}.ie7 img{-ms-interpolation-mode:bicubic}.ir{display:block;text-indent:-999em;overflow:hidden;background-repeat:no-repeat;text-align:left;direction:ltr}.hidden{display:none;visibility:hidden}.visuallyHidden{border:0!important;clip:rect(0 0 0 0);height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important}.invisible{visibility:hidden}.clearfix:before,.clearfix:after{content:"\0020";display:block;height:0;visibility:hidden}.clearfix:after{clear:both}.clearfix{zoom:1} /* fontawesome */ [class*="fontawesome-"]:before { font-family: 'FontAwesome', sans-serif; } *{ margin:0; padding:5px; margin: auto; color:white; } html{ min-width:640px; } body{ font-family: 'Fira Sans', sans-serif; background-color:#333; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .container{ position:relative; height:760px; min-width:30rem; max-width:60rem; width:auto; background-color:white; margin: auto; border-radius:4px; overflow:fixed; box-shadow: 0 2px 6px rgba(0,0,0,0.3); } /*icon name*/ .container > section:first-child { height: 400px;/*300*/ margin:auto; background: url(https://s3-us-west-2.amazonaws.com/webmx-cdn-static/assets/img/bgboxnew.png); background-position: bottom; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } /*icon*/ .container > section:nth-child(2) { margin:auto; height:320px; background:url(http://d39dlwgeopmdw0.cloudfront.net/assets/img/bgblurnew.png); background-position: top; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .about{ margin:auto; padding:20px; color:white; text-shadow: 0px 1px 0px rgba(0,0,0,0.3); } h1{ font-weight:400; text-transform:uppercase; } h2{ font-weight:300; text-transform:uppercase; font-size:30px; letter-spacing:1px; } .connect-icons{ list-style-type: none; text-align: center; margin: auto; padding:40px; line-height:3rem; max-width:60rem; } .connect-icons li{ position: relative; display: inline-block; text-align: center; width: 80px; font-size:3em; margin: 0 6px; } .connect-icons li:nth-child(1){ margin-left: 0; } .connect-icons li:nth-child(4){ margin-right: 0; } .connect-icons li > a{ text-decoration:none; width: 80px; display: inline-block; line-height:10px; text-align: center; color: rgba(0,0,0,0.3); } .connect-icons li > a, .connect-icons li > a:visited{ display: block;/*inline chanhed*/ min-width: 40px; position:absolute;/*did the trick*/ padding:20px; } .connect-icons li > a:hover{ color: #fff; text-shadow:none; -webkit-transition: all 0.2s; /* For Safari 3.1 to 6.0 */ transition: all 0.2s; -ms-transform: scale(1.1,1.1); /* IE 9 */ -webkit-transform: scale(1.1,1.1); /* Chrome, Safari, Opera */ transform: scale(1.1,1.1); /*inline changed*/ display: inline-block; /*recent edits*/ font-size:3.9rem; color: #fb0078; text-shadow: 0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #fb0078,0 0 25px #fb0078,0 0 25px #fb0078,0 0 30px #fb0078,0 0 30px #fb0078; text-transform: italic; line-height: inherit; *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .connect-icons li > a:active { -ms-transform: scale(0.9,0.9); /* IE 9 */ -webkit-transform: scale(0.9,0.9); /* Chrome, Safari, Opera */ transform: scale(0.9,0.9); line-height:inherit; } .connect-icons li > [class*="text-"] { display:inline-block; color:white; font-size:3.5rem; font-weight:400; text-transform:uppercase; letter-spacing:1px; -webkit-transition: all 0.2s; /* For Safari 3.1 to 6.0 */ transition: all 0.2s; opacity: 0; line-height:inherit; } .connect-icons li > [class*="text-"].show{ opacity: 1; -ms-transform: translateY(-12px); /* IE 9 */ -webkit-transform: translateY(-12px); /* Chrome, Safari, Opera */ transform: translateY(-12px); } .connect-box { -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -ms-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out; } </style> <style> .Absolute-Center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .Center-Container { position: relative; } .Absolute-Center { width: 80%; height: 100%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .Absolute-Center.is-Fixed { position: fixed; z-index: 999; } .Absolute-Center.is-Responsive { width: 60%; height: 60%; min-width: 200px; max-width: 400px; padding: 40px; } .Absolute-Center.is-Resizable { min-width: 20%; max-width: 80%; min-height: 20%; max-height: 80%; resize: both; overflow: auto; } footer { height: 80px; color: #777; text-align: center; margin-bottom: 20px; border-top: 1px solid #e5e5e5; text-decoration:none; line-height:16px; text-align: center; text-shadow: 0 0 ; font-size: 14px; line-height: 1.4; } </style> </head><body> <div class="container"> <section class="about"> <span class="conect connect-box"> <ul class="connect-icons"> <p style="font-size:3.4em;max-width:30rem;display:inline-block;text-align:center;">I <span class="fa fa-heart" style="font-size:2em;">Social Icons </span> An icon theme concept in CSS by <a href="http://rayanthony.io" class="github"><span class="fa fa-github">ray anthony</span></a></p> </ul> </span> </section> <section class="connect"> <div class="box connect-box"> <ul class="connect-icons"> <li><a href="#" class="heart" target="_blank"><span class="fi-heart"></span></a><i class="text-heart"></i></a></li> <li><a href="#" class="paw" target="_blank"><i class="fi-paw"></i></a></li> <li><a href="#" class="vimeo" target="_blank"><i class="fi-social-vimeo"></i></a></li> <li><a href="#" class="github" target="_blank"><i class="fi-social-github"></i></a></li> <li><a href="#" class="twitter" target="_blank"><i class="fi-social-twitter"></i></a></li> <li><a href="#" class="medium" target="_blank"><i class="fi-social-medium"></i></a></li> <li><a href="#" class="tumblr" target="_blank"><i class="fi-social-tumblr"></i></a></li> <li><a href="#" class="lastfm" target="_blank"><i class="fi-social-lastfm"></i></a></li> <li><a href="#" class="linkedin" target="_blank"><i class="fi-social-linkedin"></i></a></li> <li><a href="#" class="stumbleupon" target="_blank"><i class="fi-social-stumbleupon"></i></a></li> <li><a href="#" class="reddit" target="_blank"><i class="fi-social-reddit"></i></a></li> <li><a href="#" class="home" target="_blank"><i class="fi-home"></i></a></li> <li><a href="#" class="pinterest" target="_blank"><i class="fi-social-pinterest"></i></a></li> <li><a href="#" class="youtube" target="_blank"><i class="fi-social-youtube"></i></a></li> <li><a href="#" class="facebook" target="_blank"><i class="fi-social-facebook"></i></a></li> <li><a href="#" class="yahoo" target="_blank"><i class="fi-social-yahoo"></i></a></li> <li><a href="#" class="google-plus" target="_blank"><i class="fi-social-google-plus"></i></a></li> <li><a href="#" class="digg" target="_blank"><i class="fi-social-digg"></i></a></li> <li><a href="#" class="spotify" target="_blank"><i class="fi-social-spotify"></i></a></li> <li><a href="#" class="amazon" target="_blank"><i class="fi-social-amazon"></i></a></li> <li><a href="#" class="picasa" target="_blank"><i class="fi-social-picasa"></i></a></li> <li><a href="#" class="behance" target="_blank"><i class="fi-social-behance"></i></a></li> <li><a href="#" class="dribbble" target="_blank"><i class="fi-social-dribbble"></i></a></li> <li><a href="#" class="instagram" target="_blank"><i class="fi-social-instagram"></i></a></li> <li><a href="#" class="delicious" target="_blank"><i class="fi-social-delicious"></i></a></li> <li><a href="#" class="smashing-mag" target="_blank"><i class="fi-social-smashing-mag"></i></a></li> <li><a href="#" class="social-stack-overflow" target="_blank"><i class="fi-social-stack-overflow"></i></a></li> </ul> </div></div> </section> <footer> <iframe allowtransparency="true" frameborder="0" scrolling="no" src="//platform.twitter.com/widgets/follow_button.html?screen_name=rayanthonyrcc" style="width:236px; height:20px;" class="twitter-follow-button twitter-follow-button"> </iframe> <p>copyright 2015 <a href="http://rayanthony.io">ray anthony </a> © all applicable rights reserved all liabilities waived</p> <p> <a href="http://oneworldlicense.com"> oneworldlicense.com</a> means open source, free, and made with<i class="fi-heart" alt="made with love icon font ♡ "></i></p> </footer> <script> $(window).ready(function() { $(".connect-icons a").hover(function(){ $(".connect-box").toggleClass("color-"+ this.className ); $(".text-"+ this.className).toggleClass("show"); }); });</script> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="http://statspring.com/springboard.js"></script><script>Springboard.replaceAssets();</script></body></html>
/* OF COURSE THIS IS THE HTML5 ✰ Boilerplate */ html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}body{font:13px/1.231 sans-serif;*font-size:small}select,input,textarea,button{font:99% sans-serif}pre,code,kbd,samp{font-family:monospace,sans-serif}h1,h2,h3,h4,h5,h6{font-weight:bold}a:hover,a:active{outline:none}a,a:active,a:visited{color:#607890}a:hover{color:#036}ul,ol{margin-left:2em}ol{list-style-type:decimal}nav ul,nav li{margin:0}small{font-size:85%}strong,th{font-weight:bold}td,td img{vertical-align:top}sub,sup{font-size:75%;line-height:0;position:relative}sup{top:-0.5em}sub{bottom:-0.25em}pre{padding:15px;white-space:pre;white-space:pre-wrap;white-space:pre-line;word-wrap:break-word}textarea{overflow:auto}.ie6 legend,.ie7 legend{margin-left:-7px}input[type="radio"]{vertical-align:text-bottom}input[type="checkbox"]{vertical-align:bottom}.ie7 input[type="checkbox"]{vertical-align:baseline}.ie6 input{vertical-align:text-bottom}label,input[type="button"],input[type="submit"],input[type="image"],button{cursor:pointer}button,input,select,textarea{margin:0}input:invalid,textarea:invalid{border-radius:1px;-moz-box-shadow:0 0 5px red;-webkit-box-shadow:0 0 5px red;box-shadow:0 0 5px red}.no-boxshadow input:invalid,.no-boxshadow textarea:invalid{background-color:#f0dddd}::-moz-selection{background:#ff5e99;color:#fff;text-shadow:none}::selection{background:#ff5e99;color:#fff;text-shadow:none}a:link{-webkit-tap-highlight-color:#ff5e99}button{width:auto;overflow:visible}.ie7 img{-ms-interpolation-mode:bicubic}.ir{display:block;text-indent:-999em;overflow:hidden;background-repeat:no-repeat;text-align:left;direction:ltr}.hidden{display:none;visibility:hidden}.visuallyHidden{border:0!important;clip:rect(0 0 0 0);height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important}.invisible{visibility:hidden}.clearfix:before,.clearfix:after{content:"\0020";display:block;height:0;visibility:hidden}.clearfix:after{clear:both}.clearfix{zoom:1} /*green dull iridescent text links*/ body,select,input,textarea{color:hsl(188,73%,90%);text-shadow:1px 1px 1px hsl(300,0%,0%);font:14px/24px helvetica,arial,sans-serif} a, a:visited {color:hsl(188,73%,85%); } a:hover { color:hsl(188,73%,75%);} /*overide above*/ body,select,input,textarea{color:#999;text-shadow:1px 1px 1px hsl(300,0%,0%);font:14px/24px helvetica,arial,sans-serif} a, a:visited {color:#777; } a:hover { color:#bbb;} /* Primary Styles Author: Paul Irish and some hookups from Divya Manian */ /* Thanks Lea Verou: leaverou.me/demos/css3-patterns.html and Divya Manian for the implementation. */ html { min-height: 100%; } html { background: hsl(68, 1%, 28%); background-image: -webkit-gradient(linear, 0 50%, 0 100%, from(transparent), to(hsla(300, 0%, 0%, 0.8))), -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, hsla(300, 0%, 100%, 0.08)), color-stop(.25, transparent), color-stop(0.5, transparent), color-stop(0.5, hsla(300, 0%, 100%, 0.08)), color-stop(.75, hsla(300, 0%, 100%, 0.08)), color-stop(.75, transparent), to(transparent)), -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, hsla(300, 0%, 100%, 0.08)), color-stop(.25, transparent), color-stop(0.5, transparent), color-stop(0.5, hsla(300, 0%, 100%, 0.08)), color-stop(.75, hsla(300, 0%, 100%, 0.08)), color-stop(.75, transparent), to(transparent)); background-image: -moz-linear-gradient(transparent, hsla(300, 0%, 0%, 0.8)), -moz-linear-gradient(45deg, hsla(300, 0%, 0%, 0.08) 25%, transparent 25%, transparent 50%, hsla(300, 0%, 0%, 0.08) 50%, hsla(300, 0%, 0%, 0.08) 75%, transparent 75%, transparent), -moz-linear-gradient(-45deg, hsla(300, 0%, 0%, 0.08) 25%, transparent 25%, transparent 50%, hsla(300, 0%, 0%, 0.08) 50%, hsla(300, 0%, 0%, 0.08) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(transparent, hsla(300, 0%, 0%, 0.8)), -o-linear-gradient(45deg, hsla(300, 0%, 0%, 0.08) 25%, transparent 25%, transparent 50%, hsla(300, 0%, 0%, 0.08) 50%, hsla(300, 0%, 0%, 0.08) 75%, transparent 75%, transparent), -o-linear-gradient(-45deg, hsla(300, 0%, 0%, 0.08) 25%, transparent 25%, transparent 50%, hsla(300, 0%, 0%, 0.08) 50%, hsla(300, 0%, 0%, 0.08) 75%, transparent 75%, transparent); background-image: linear-gradient(transparent, hsla(300, 0%, 0%, 0.8)), linear-gradient(45deg, hsla(300, 0%, 0%, 0.08) 25%, transparent 25%, transparent 50%, hsla(300, 0%, 0%, 0.08) 50%, hsla(300, 0%, 0%, 0.08) 75%, transparent 75%, transparent), linear-gradient(-45deg, hsla(300, 0%, 0%, 0.08) 25%, transparent 25%, transparent 50%, hsla(300, 0%, 0%, 0.08) 50%, hsla(300, 0%, 0%, 0.08) 75%, transparent 75%, transparent); } body { margin:0; padding: 0px; font-family: 'PT Sans', 'Corben', sans-serif; font-weight: bold;} #main { margin: 20px auto 0; padding:20px 20px 10px; width: 908px; position: relative; -moz-border-radius: 6px; -webkit-border-radius:6px; border-radius: 6px; } h1 { font: 60px/68px Sniglet, 'ChunkFiveRegular', Arial, sans-serif; margin: 0 auto; text-align: center; } h1 span { display: block; color: white; } canvas { height: 250px; width: 99%; outline: 4px solid rgba(255,255,255,.6); margin-bottom: .4em; position:relative; cursor: crosshair; -moz-outline-radius:3px; -webkit-outline-radius:3px; -o-outline-radius: 3px; outline-radius: 3px; -moz-box-shadow: 0 1px 10px hsla(200, 5%, 10%, .5); -webkit-box-shadow: 0 1px 10px hsla(200, 5%, 10%, .5); box-shadow: 0 1px 10px hsla(200, 5%, 10%, .5); } /* * media queries for responsive design * these follow after primary styles so they will successfully override. */ @media all and (orientation:portrait) { } @media all and (orientation:landscape) { } @media screen and (max-device-width: 480px) { } /* * print styles * inlined to avoid required HTTP connection www.phpied.com/delay-loading-your-print-css/ */ @media print { * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* black prints faster: sanbeiji.com/archives/953 */ a, a:visited { color: #444 !important; text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* don't show links for images, or javascript/internal links */ pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */ tr, img { page-break-inside: avoid; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3{ page-break-after: avoid; } } .zsocial { font-size: 60px; color: #fb0078; text-shadow: 0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #fb0078,0 0 25px #fb0078,0 0 25px #fb0078,0 0 30px #fb0078,0 0 30px #fb0078; margin-right: 5px; font-style: italic; line-height: inherit; *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } Pseudo ::before element .connect-icons .fi-heart:before { content: "\f159"; } font-family: 'zocial', sans-serif; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; display: inline-block; text-decoration: inherit; } .connect-icons *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } Pseudo ::after element .connect-icons *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } Inherited from li .connect-icons div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td { margin: 0; padding: 0; direction: ltr; } user agent stylesheetli { display: list-item; text-align: -webkit-match-parent; } Inherited from ul.icon-styles.large-block-grid-5.small-block-grid-3 .icon-styles { text-align: center; } .connect-icons ul, ol, dl { font-size: 1rem; line-height: 2rem; margin-bottom: 1rem; list-style-position: outside; font-family: inherit; } .connect-icons div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td { margin: 0; padding: 2px; direction: ltr; }

Related: See More


Questions / Comments: