-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo.html
92 lines (89 loc) · 3.8 KB
/
demo.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
<!DOCTYPE html>
<html>
<head>
<title>Social Banners</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="social-banners.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1 class="text-center">CSS3 Social Banners</h1>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<p>
A collection of minimal vanilla CSS3 social banners that require no images and are independent of CSS Frameworks. Each of the CSS3 Social Banners are designed to span the full width of a HTML element as these social banners are designed to be used with a grid system of your choice such as the one found in <a href="http://getbootstrap.com/">Bootstrap 3</a>.
</p>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h2 class="text-center">Demo:</h2>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="social-icon appleappstore">apple app store</div>
<div class="social-icon behance">behance</div>
<div class="social-icon blogger">blogger</div>
<div class="social-icon delicious">delicious</div>
<div class="social-icon deviantart">deviantart</div>
<div class="social-icon disqus">disqus</div>
<div class="social-icon dribbble">dribbble</div>
<div class="social-icon ello">ello</div>
<div class="social-icon etsy">etsy</div>
<div class="social-icon facebook">facebook</div>
<div class="social-icon feedly">feedly</div>
<div class="social-icon flickr">flickr</div>
<div class="social-icon ghost">ghost</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="social-icon github">github</div>
<div class="social-icon googleplay">googleplay</div>
<div class="social-icon googleplus">googleplus</div>
<div class="social-icon grooveshark">grooveshark</div>
<div class="social-icon instagram">instagram</div>
<div class="social-icon kickstarter">kickstarter</div>
<div class="social-icon lastfm">lastfm</div>
<div class="social-icon linkedin">linkedin</div>
<div class="social-icon pinterest">pinterest</div>
<div class="social-icon reddit">reddit</div>
<div class="social-icon rss">rss</div>
<div class="social-icon snapchat">snapchat</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="social-icon soundcloud">soundcloud</div>
<div class="social-icon spotify">spotify</div>
<div class="social-icon stackoverflow">stackoverflow</div>
<div class="social-icon stripe">stripe</div>
<div class="social-icon stumbleupon">stumbleupon</div>
<div class="social-icon twitch">twitch</div>
<div class="social-icon twitter">twitter</div>
<div class="social-icon tumblr">tumblr</div>
<div class="social-icon vimeo">vimeo</div>
<div class="social-icon vine">vine</div>
<div class="social-icon wordpress">wordpress</div>
<div class="social-icon youtube">youtube</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h2 class="text-center">Links:</h2>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center ">
<p>
<a class="btn btn-default" href="https://github.com/ojdon/css3-social-banners">View Source on GitHub</a> <a class="btn btn-default" href="https://ojdon.github.io/">View Author's Website</a>
</p>
<p>
For more Information, please refer to the README.md on GitHub. :)
</p>
</div>
</div>
</div>
</body>
</html>