forked from janhuenermann/social-circles
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
94 lines (93 loc) · 5.07 KB
/
index.html
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<html>
<head>
<title>social-circles</title>
<link rel="stylesheet" href="css/social-circles.css">
<style>
body {
font-family: 'Avenir', 'HelveticaNeue', 'Helvetica';
text-align: center;
background-color: #E3E3D8;
}
.title {
margin: 24px 0;
}
h2 {
font-size: 56px;
}
h4 {
font-size: 28px;
}
ol {
list-style-type: none;
padding: 0;margin: 0;
}
ol li {
display: inline-block;
margin: 4px;
}
.social-button.borderless {
padding: 0 16px;
}
</style>
</head>
<body>
<h2 class="title">Awesome social buttons!</h2>
<div class="first">
<h4>...with color</h4>
<ol>
<li><a class="icon-facebook social-button color" href="http://facebook.com/username"></a></li>
<li><a class="icon-twitter social-button color" href="http://twitter.com/username"></a></li>
<li><a class="icon-instagram social-button color" href="http://instagram.com/username"></a></li>
<li><a class="icon-behance social-button color" href="http://behance.com/username"></a></li>
<li><a class="icon-vimeo social-button color" href="http://vimeo.com/username"></a></li>
<li><a class="icon-youtube social-button color" href="http://youtube.com/username"></a></li>
<li><a class="icon-googleplus social-button color" href="http://google.com/plus/username"></a></li>
<li><a class="icon-rss social-button color" href="http://yoursite.com/rss"></a></li>
<li><a class="icon-pinterest social-button color" href="http://pinterest.com/username"></a></li>
<li><a class="icon-tumblr social-button color" href="http://tumblr.com/username"></a></li>
<li><a class="icon-linkedin social-button color" href="http://linkedin.com/username"></a></li>
<li><a class="icon-skype social-button color" href="http://skype.com/username"></a></li>
<li><a class="icon-github social-button color" href="http://github.com/janhuenermann"></a></li>
<li><a class="icon-dribbble social-button color" href="http://dribbble.com/janhuenermann"></a></li>
</ol>
</div>
<div class="second">
<h4>...just grey</h4>
<ol>
<li><a class="icon-facebook social-button grey" href="http://facebook.com/username"></a></li>
<li><a class="icon-twitter social-button grey" href="http://twitter.com/username"></a></li>
<li><a class="icon-instagram social-button grey" href="http://instagram.com/username"></a></li>
<li><a class="icon-behance social-button grey" href="http://behance.com/username"></a></li>
<li><a class="icon-vimeo social-button grey" href="http://vimeo.com/username"></a></li>
<li><a class="icon-youtube social-button grey" href="http://youtube.com/username"></a></li>
<li><a class="icon-googleplus social-button grey" href="http://google.com/plus/username"></a></li>
<li><a class="icon-rss social-button grey" href="http://yoursite.com/rss"></a></li>
<li><a class="icon-pinterest social-button grey" href="http://pinterest.com/username"></a></li>
<li><a class="icon-tumblr social-button grey" href="http://tumblr.com/username"></a></li>
<li><a class="icon-linkedin social-button grey" href="http://linkedin.com/username"></a></li>
<li><a class="icon-skype social-button grey" href="http://skype.com/username"></a></li>
<li><a class="icon-github social-button grey" href="http://github.com/janhuenermann"></a></li>
<li><a class="icon-dribbble social-button grey" href="http://dribbble.com/janhuenermann"></a></li>
</ol>
</div>
<div class="third">
<h4>...or borderless</h4>
<ol>
<li><a class="icon-facebook social-button borderless" href="http://facebook.com/username"></a></li>
<li><a class="icon-twitter social-button borderless" href="http://twitter.com/username"></a></li>
<li><a class="icon-instagram social-button borderless" href="http://instagram.com/username"></a></li>
<li><a class="icon-behance social-button borderless" href="http://behance.com/username"></a></li>
<li><a class="icon-vimeo social-button borderless" href="http://vimeo.com/username"></a></li>
<li><a class="icon-youtube social-button borderless" href="http://youtube.com/username"></a></li>
<li><a class="icon-googleplus social-button borderless" href="http://google.com/plus/username"></a></li>
<li><a class="icon-rss social-button borderless" href="http://yoursite.com/rss"></a></li>
<li><a class="icon-pinterest social-button borderless" href="http://pinterest.com/username"></a></li>
<li><a class="icon-tumblr social-button borderless" href="http://tumblr.com/username"></a></li>
<li><a class="icon-linkedin social-button borderless" href="http://linkedin.com/username"></a></li>
<li><a class="icon-skype social-button borderless" href="http://skype.com/username"></a></li>
<li><a class="icon-github social-button borderless" href="http://github.com/janhuenermann"></a></li>
<li><a class="icon-dribbble social-button borderless" href="http://dribbble.com/janhuenermann"></a></li>
</ol>
</div>
</body>
</html>