This repository has been archived by the owner on Jan 27, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 25
/
Copy pathindex.html
114 lines (111 loc) · 5.92 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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html>
<head>
<title>Responsive Text</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="jquery-1.10.2.min.js" type="text/javascript"><\/script>')</script>
<script type="text/javascript" src="jquery.responsiveText.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.responsive').responsiveText();
});
</script>
<link href='http://fonts.googleapis.com/css?family=Pacifico|Average+Sans' rel='stylesheet' type='text/css'>
<style type="text/css">
body {margin:0; padding:20px; font-family: 'Average Sans', sans-serif; font-size:16px; font-weight:normal; line-height:1.5; background:#589283; color:#fff; text-shadow:2px 2px 2px #3F6558;min-width:540px;}
a, a:link, a:visited {color:#fff;text-decoration: none;border-bottom:1px dashed #3F6558;-webkit-transition:border-color 0.3s ease-in;}
a:hover, a:focus {border-bottom:1px dashed #fff;}
h1, h2, h3, p {text-align:center;}
h1, h2, h3 {padding: 0 0.1em;}
h1[data-scrollable] { line-height: 1.85; }
.heading {margin-top:0.25em;font-family:'Pacifico', sans-serif; text-shadow:0.1em 0.1em 2px #3F6558;}
.subheading {font-weight:normal;}
.button {margin:2em 0;}
.button a {background:#3F6558;padding:0.4em 1em;border:none;border-radius:10px;}
.clearfix {clear:both;}
.space {margin:5em 0;}
.devices {margin:0 auto;text-align:center;}
.device {display:inline-block; margin:10px 20px; text-align:center;}
.iphone .case {height:280px; width:138px; border-radius:20px; border:1px solid #3F6558; margin:auto;background:#3F6558;}
.earsection {margin-top:13px; margin-left:36px; height:8px;}
.camera {float:left; width:8px; height:8px; border:1px solid #589283; border-radius:4px; background:#589283;}
.speaker {float:left; width:27px; height:3px; margin-left:8px; border:1px solid #589283; background:#589283; border-radius:3px;}
.screen {clear:both; width:125px; height:187px; margin:auto; margin-top:17px; border:1px solid #589283; background:#589283;}
.device .button {height:28px; width:28px; border:1px solid #589283; border-radius:14px; margin:auto; margin-top:11px;}
.buttonsquare {height:8px; width:8px; border:1px solid #589283; border-radius:2px; margin:auto; margin-top:9px; }
.ipad .case {height:340px; width:256px; border-radius:20px; border:1px solid #3F6558; margin:auto;background:#3F6558;}
.ipad .camera {float:none;margin:0 auto;position:relative;left:-16px;}
.ipad .screen {width:210px; height:247px;}
.thunderbolt .case {height:380px; width:500px; border-radius:20px; border:1px solid #3F6558; margin:auto;background:#3F6558;}
.thunderbolt .screen {width:460px; height:280px;}
.thunderbolt .divider {display:block;margin-top:20px;border-bottom:1px solid #589283;}
.thunderbolt .camera {float:none;margin:0 auto;position:relative;left:-12px;}
.thunderbolt .stand {clear:both;display:block;margin:0 auto;height:55px;width:160px;background:#3F6558;position:relative;border-radius:5px;}
.thunderbolt .stand:before {display:block;content:'';position:absolute;left:-1px;top:0;width:30px;height:50px;background:#589283;border-radius:0 0 100% 0;}
.thunderbolt .stand:after {display:block;content:'';position:absolute;right:0;top:0;width:30px;height:50px;background:#589283;border-radius:0 0 0 100%;}
</style>
</head>
<body>
<h1 class="heading responsive" data-compression="8">Responsive Text</h1>
<h2 class="subheading responsive" data-compression="25" data-min="14" data-max="40">A jQuery plugin to set font sizes responsively based on its' container width. Use jQuery responsiveText to have scalable headlines, build <a href="https://github.com/ghepting/jquery-responsive-tables">responsive tables</a> and more!</h2>
<h3 class="button responsive" data-compression="25" data-min="20" data-max="50"><a href="https://github.com/ghepting/jquery-responsive-text">Download on Github</a></h3>
<h1 class="heading responsive" data-scrollable="1">Scrollable Responsive Text</h1>
<p class="responsive" data-scrollable="1" data-max="80">Scrollable Responsive Text</p>
<div class="devices">
<div class="thunderbolt device">
<div class="case">
<div class="earsection">
<div class="camera"></div>
</div>
<div class="screen">
<h3 class="heading responsive" data-compression="8">Responsive Text</h3>
<h4 class="subheading responsive" data-compression="25" data-min="14" data-max="40">It's just awesome.</h4>
</div>
<div class="divider"></div>
</div>
<div class="stand"></div>
</div>
<div class="ipad device">
<div class="case">
<div class="earsection">
<div class="camera"></div>
</div>
<div class="screen">
<h3 class="heading responsive" data-compression="8">Responsive Text</h3>
<h4 class="subheading responsive" data-compression="25" data-min="14" data-max="40">It's just awesome.</h4>
</div>
<div class="button">
<div class="buttonsquare"></div>
</div>
</div>
</div>
<div class="iphone device">
<div class="case">
<div class="earsection">
<div class="camera"></div>
<div class="speaker"></div>
</div>
<div class="screen">
<h3 class="heading responsive" data-compression="8">Responsive Text</h3>
<h4 class="subheading responsive" data-compression="25" data-min="14" data-max="40">It's just awesome.</h4>
</div>
<div class="button">
<div class="buttonsquare"></div>
</div>
</div>
</div>
</div>
<div class="clearfix space"></div>
<p>Another open-source project by <a href="http://garyhepting.com/">Gary Hepting</a></p>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-17121602-5']);
_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>