-
Notifications
You must be signed in to change notification settings - Fork 0
/
style-guide.html
125 lines (112 loc) · 3.81 KB
/
style-guide.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
115
116
117
118
119
120
121
122
123
124
125
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include custom fonts from google -->
<!-- You can select your own to include from https://www.google.com/fonts -->
<!-- Remember to update main.css to use your new fonts! -->
<link href='http://fonts.googleapis.com/css?family=Indie+Flower|Poiret+One' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
your browser</a> to improve your experience.</p>
<![endif]-->
<div class="content">
<h1>Heading One</h1>
<h2>Heading Two</h2>
<h3>Heading Three</h3>
<h4>Heading Four</h4>
<h5>Heading Five</h5>
<h6>Heading Six</h6>
<p>Paragraph ipsum dolor sit amet, consectetur adipiscing elit. Donec et nunc mauris.
Duis eros purus, vulputate non fermentum sed, consectetur vel nibh.
Fusce eget nulla sed nibh dapibus laoreet. Maecenas dignissim mattis metus, fermentum cursus justo vehicula a.
Sed placerat viverra ipsum eu dictum. Vestibulum ante ipsum primis in faucibus orci
luctus et ultrices posuere cubilia Curae; Nulla lorem nunc, elementum a viverra sed,
adipiscing quis nulla. Sed eget purus id sem rhoncus tincidunt. Praesent sed leo non dolor
bibendum ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ante odio,
posuere eget vehicula id, tempor sed nunc. Nam egestas, odio ac consequat egestas,
orci purus porta lorem, ac rhoncus est urna sit amet nisl. </p>
<h2>Blockquote</h2>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<cite>John Doe</cite>
</blockquote>
<h2>Lists</h2>
<p><strong>Unordered List</strong></p>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<p><strong>Ordered List</strong></p>
<ol>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>
<p><strong>Definition List</strong></p>
<dl>
<dt>Item</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et nunc mauris.</dd>
<dt>Item</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et nunc mauris.</dd>
<dt>Item</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et nunc mauris.</dd>
</dl>
<div class="clearfix h2-clearfix"><h2>Table</h2></div>
<table>
<thead>
<tr>
<th>Thead Tr Th</th>
<th>Thead Tr Th</th>
<th>Thead Tr Th</th>
</tr>
<tr>
<td>Thead Tr Td</td>
<td>Thead Tr Td</td>
<td>Thead Tr Td</td>
</tr>
</thead>
<tbody>
<tr>
<th>Tbody Tr Th</th>
<th>Tbody Tr Th</th>
<th>Tbody Tr Th</th>
</tr>
<tr>
<td>Tbody Tr Td</td>
<td>Tbody Tr Td</td>
<td>Tbody Tr Td</td>
</tr>
<tr>
<td>Tbody Tr Td</td>
<td>Tbody Tr Td</td>
<td>Tbody Tr Td</td>
</tr>
</tbody>
</table>
<form>
<h2>Fieldset</h2>
<fieldset>
<legend>Explination</legend>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et nunc mauris.</p>
</fieldset>
<label>Form Item Title <span class="form-required" title="This field is required.">*</span>
<input type="text">
</label>
<button type="submit">Submit</button>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
</body>
</html>