-
Notifications
You must be signed in to change notification settings - Fork 23
/
index.html
60 lines (47 loc) · 2.88 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
<!DOCTYPE html>
<head>
<title>Pure CSS 3D Bar Graph</title>
<link href="css/general.css" rel="stylesheet" />
<link href="css/bar.core.css" rel="stylesheet" />
<link href="css/bar.core.rtl.css" rel="stylesheet" />
<link href="css/bar.settings.css" rel="stylesheet" />
<link href="css/responsive.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Oswald'
rel='stylesheet' type='text/css'>
</head>
<body>
<h1>Pure CSS 3D Bar Graph</h1>
<p>Choose action:</p>
<input type="radio" name="fill" id="full" /><label for="full">Fill Full</label>
<input type="radio" name="fill" id="f75" /><label for="f75">Fill 75%</label>
<input type="radio" name="fill" id="f50" checked="checked" /><label for="f50">Fill 50%</label>
<input type="radio" name="fill" id="f25" /><label for="f25">Fill 25%</label>
<input type="radio" name="fill" id="empty" /><label for="empty">Empty</label>
<div class="bar-wrapper">
<div class="bar-container">
<div class="bar-background"></div>
<div class="bar-inner"></div>
<div class="bar-foreground">
<div class="label p25"><span>25%</span></div>
<div class="label p50"><span>50%</span></div>
<div class="label p75"><span>75%</span></div>
</div>
</div>
</div>
<br />
<div class="social-buttons">
<!-- Twitter button -->
<a href="https://twitter.com/share" class="twitter-share-button" data-via="sergey_lukin" data-hashtags="css">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<!-- Google Plus button -->
<div class="g-plusone" data-size="medium"></div>
<script type="text/javascript">(function() {var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;po.src = 'https://apis.google.com/js/plusone.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})();</script>
</div>
<!-- GitHub fork ribbon -->
<a href="https://github.com/sergeylukin/css-3d-bar-graph" id="github"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
<!-- Resize img -->
<img src="img/resize.png" alt="Resize me!" id="resize" />
<!-- Analytics -->
<script type="text/javascript">var _gaq = _gaq || [];_gaq.push(['_setAccount', 'UA-31126253-1']);_gaq.push(['_trackPageview']);(function() {var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);})();</script>
</body>
</html>