Bootstrap snippet: Social Widget

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: social

<link href="//" rel="stylesheet" /> <link href="//" rel="stylesheet" /> <div id="cadre"> <div id="first"></div> <div id="second"></div> <span class="zocial-windows" title="windows"></span> <span class="zocial-appstore" title="apple"></span> <span class="zocial-android" title="android"></span> <div id="traitnoir"></div> <div id="traitblanc"></div> <span class="zocial-facebook" title="facebook"></span> <span class="zocial-twitter" title="twitter"></span> <span class="zocial-googleplus" title="google plus"></span> </div>
@import url(; [class*="zocial-"]:before { font-family: 'zocial', sans-serif; font-size:5em; text-shadow:0px 0px 5px #666,0px 0px 30px #DDD; } .zocial-facebook:hover, .zocial-twitter:hover, .zocial-googleplus:hover, .zocial-windows:hover, .zocial-appstore:hover, .zocial-android:hover { color:#5bc0de; transition:all ease 0.5s; } .zocial-facebook, .zocial-twitter, .zocial-googleplus{ position:relative; top:130px; margin-left:60px; color:#EEE; transition:all ease 0.5s; } .zocial-twitter{ margin-left:90px } .zocial-windows, .zocial-appstore, .zocial-android{ position:relative; top:50px; margin-left:70px; color:#EEE; transition:all ease 0.5s; } #cadre{ width:500px; height:250px; background: -webkit-linear-gradient(-90deg, #C3C1BF 0%, #B7B4B0 100%); margin: 50px auto; border-radius:6px; -webkit-border-radius:6px; box-shadow:0px 0px 2px #555, 0px 0px 10px #999,0px 0px 60px #CCC; } #traitnoir{ width:400px; height:1px; background:#666; position:relative; top:80px; left:50px; } #first{ width:490px; height:1px; background-color:#DDD; position:relative; left:5px; } #traitblanc{ width:400px; height:1px; background:#FFF; position:relative; top:80px; left:50px; } #second{ width:1px; height:242px; position:absolute; background-color:#DDD; top:54px; } p{ position:relative; font-size:1.5em; color:#EEE; text-align:center; }

Social Widget

  May 13th 2014, 20:32