text.html
4.14 KB
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
115
116
117
118
119
120
121
122
<!DOCTYPE HTML>
<html>
<head>
<title>nativeDroid II - jQueryMobile Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" />
<link rel="stylesheet" href="/vendor/waves/waves.min.css" />
<link rel="stylesheet" href="/vendor/wow/animate.css" />
<link rel="stylesheet" href="/css/nativedroid2.css" />
<style>
/* Prevent FOUC */
body { opacity: 0; }
</style>
</head>
<body>
<div data-role="page">
<nd2-include data-src="/examples/fragments/panel.left.html"></nd2-include>
<div data-role="header" data-position="fixed" class="wow fadeIn">
<a href="#leftpanel" class="ui-btn ui-btn-left wow fadeIn" data-wow-delay='0.8s'><i class="zmdi zmdi-menu"></i></a>
<h1 class="wow fadeIn" data-wow-delay='0.4s'>Text / Typography</h1>
</div>
<div role="main" class="ui-content wow fadeIn" data-wow-delay="0.2s" data-inset="false">
<h4>General Header (H1 - H6)</h4>
<h1>Regular 56px / 400 / <h1></h1>
<h2>Regular 34px / 400 / <h2></h2>
<h3>Regular 24px / 400 / <h3></h3>
<h4>Medium 2sp / 500 / <h4></h4>
<h5>Regular 16px / 400 / <h5></h5>
<h6>Regular 14px / 400 / <h6></h6>
<hr />
<h4>Display / Header / Title Sizes</h4>
<h1 class="nd2-display-4">
Light 112px
<span class="nd2-subhead">.nd2-display-4</span>
</h1>
<h2 class="nd2-display-3">
Regular 56px
<span class="nd2-subhead">.nd2-display-3</span>
</h2>
<h3 class="nd2-display-2">
Regular 45px
<span class="nd2-subhead">.nd2-display-2</span>
</h3>
<h4 class="nd2-display-1">
Regular 34px
<span class="nd2-subhead">.nd2-display-1</span>
</h4>
<h5 class="nd2-headline">
Regular 24px
<span class="nd2-subhead">.nd2-headline</span>
</h5>
<h6 class="nd2-title">
Medium 2p
<span class="nd2-subhead">.nd2-title</span>
</h6>
<h6 class="nd2-subhead">
Regular 16px
<span class="nd2-subhead">.nd2-subhead</span>
</h6>
<hr />
<h4>Text Paragraph / Regular 400 / 16px</h4>
<div class='row'>
<div class='col-xs-12 col-md-6'>
<div class='box'>
<p>
Typography is the art and technique of arranging type to make written language readable and appealing. The arrangement of type involves selecting typefaces, point size, line length, line-spacing (leading), letter-spacing (tracking), and adjusting the space within letters pairs (kerning). Type design is a closely related craft, sometimes considered part of typography; most typographers do not design typefaces, and some type designers do not consider themselves typographers. In modern times, typography has been put in film, television and online broadcasts to add emotion to communication.
<br />(Source: <a href="http://www.wikipedia.org">Wikipedia</a>)
</p>
</div>
</div>
<div class='col-xs-12 col-md-6'>
<div class='box'>
<blockquote>
<p>You know the golden rule, don't you boy? Those who have the gold make the rules.</p>
<footer>Crazy hunch-backed old guy from the movie Aladdin</footer>
</blockquote>
</div>
</div>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<script src="/vendor/waves/waves.min.js"></script>
<script src="/vendor/wow/wow.min.js"></script>
<script src="/js/nativedroid2.js"></script>
<script src="/nd2settings.js"></script>
</body>
</html>