<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet"> <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" 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> <p>Made by Amaury Gilbon</p>

@import url(http://weloveiconfonts.com/api/?family=zocial); [class*="zocial-"]:before { font-family: 'zocial', sans-serif; font-size:5em; text-shadow:0px 0px 5px #666,0px 0px 30px #DDD; } body { background:url('http://subtlepatterns.com/patterns/ticks_@2X.png'); background-size:200px; } .zocial-facebook:hover, .zocial-twitter:hover, .zocial-googleplus:hover, .zocial-windows:hover, .zocial-appstore:hover, .zocial-android:hover { color:#777; 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; }