Bootstrap Snippet Social Widget using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Social Widget"
Bootstrap 3.3.0 Snippet by ASDAFF

Related: See More

Questions / Comments:

"Social Widget" Bootstrap 3.3.0 Snippet by ASDAFF

Related: See More

Questions / Comments:

"Social Widget"
Bootstrap 3.3.0 Snippet by ASDAFF