-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex2.html
317 lines (286 loc) · 15.8 KB
/
index2.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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
<!DOCTYPE HTML>
<html class="responsive">
<head>
<title>xtyle</title>
<meta charset="utf-8">
<meta name="robots" content="all">
<meta name="citation_author" content="Author Name">
<meta name="description" content="Project Description">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- <meta name="apple-mobile-web-app-capable" content="yes"> -->
<!-- <link rel="apple-touch-icon" href="touch-icon-iphone-precomposed.png"> -->
<!-- <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad-precomposed.png"> -->
<!-- <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4-precomposed.png"> -->
<!-- <link rel="alternate" type="application/rss+xml" title="" href=""> -->
<link href="xtyle/img/favicon.ico" rel="icon" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="xtyle/css/xtyle.css">
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="/xtyle/js/xtyle.js"></script>
</head>
<body style="background-color: #ececec">
<!-- LAYOUT -->
<nav class="bg white border-bottom bar">
<div class="layout-fixed-center padding2x">
<span class="logo">
<h2 class="display-inline vertical-middle">xtyle</h2><span class="margin-left2x vertical-middle" style="color: #b5b6b6">web framework</span>
</span>
</div>
</nav>
<div class="nav-margin2x layout-fixed-center">
<div class="grid padding-top2x">
<!-- ANCHOR TAGS -->
<div class="grid">
<div class="grid1">
<div>
<h4 class="padding-top-none">Anchor Tags</h4>
<p>
Declare your anchor tags using the HTML <code><a></code> tag. You can also select from the different class colors available.
</p>
<p>
<a href="#" class="yellow">yellow</a>, <a href="#" class="red">red</a>, <a href="#" class="blue">blue</a> <small>(default)</small>, <a href="#" class="green">green</a>, <a href="#" class="carbon">carbon</a>, <a href="#" class="silver">silver</a>, <a href="#" class="white">white</a>, and <a href="#" class="black">black</a>
</p>
<div class="background white border2x padding">
<a href="#" class="yellow">...</a>
</div>
</div>
</div>
</div>
<!-- PARAGRPAHS -->
<div class="grid margin-top2x">
<div class="grid2">
<div class="padding-top-none margin-top-none">
<h4 class="padding-top-none">Paragraphs</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vestibulum tellus id arcu viverra pulvinar. Cras commodo sem nec erat rhoncus tincidunt. Ut blandit lectus eu diam adipiscing facilisis. Morbi nec elit neque, consequat semper est. Mauris mollis velit eu est egestas blandit. Sed fermentum molestie sapien, ac euismod felis vulputate nec.
</p>
<p>
Maecenas in dui lectus. Integer molestie sapien nec risus malesuada pharetra. Mauris commodo diam quis eros pharetra cursus. Sed sem tellus, rhoncus sed tincidunt at, suscipit ac tellus. Nam luctus pulvinar nisl, sed rutrum tortor placerat vitae. Duis mattis faucibus semper. Donec sit amet est lectus.
</p>
</div>
</div>
<div class="grid2">
<div class="padding-top-none margin-top-none">
<h4 class="padding-top-none">Disabled</h4>
<div class="disabled">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vestibulum tellus id arcu viverra pulvinar. Cras commodo sem nec erat rhoncus tincidunt. Ut blandit lectus eu diam adipiscing facilisis. Morbi nec elit neque, consequat semper est. Mauris mollis velit eu est egestas blandit. Sed fermentum molestie sapien, ac euismod felis vulputate nec.
</p>
<p>
Maecenas in dui lectus. Integer molestie sapien nec risus malesuada pharetra. Mauris commodo diam quis eros pharetra cursus. Sed sem tellus, rhoncus sed tincidunt at, suscipit ac tellus. Nam luctus pulvinar nisl, sed rutrum tortor placerat vitae. Duis mattis faucibus semper. Donec sit amet est lectus.
</p>
</div>
</div>
</div>
</div>
<!-- COLORS -->
<div class="grid1">
<div class="padding-bottom-none">
<h4 class="padding-top-none">Colors</h4>
<p>
Xtyle uses an exclusive set of colors that you can have access any time during your creative process. Use colors for background, text, form elements, and more.
</p>
<div class="grid1">
<div class="grid white bg color padding-none center">
<!-- YELLOW -->
<div class="grid2 bg yellow">
<div class="padding-none">.yellow - #ffd35b</div>
</div>
<div class="grid2 bg yellow active">
<div class="padding-none">#efc660</div>
</div>
<!-- RED -->
<div class="grid2 bg red">
<div class="padding-none">.red - #ed6a5b</div>
</div>
<div class="grid2 bg red active">
<div class="padding-none">#df6051</div>
</div>
<!-- BLUE -->
<div class="grid2 bg blue">
<div class="padding-none">.blue - #41b4e6</div>
</div>
<div class="grid2 bg blue active">
<div class="padding-none">#37a4d1</div>
</div>
<!-- GREEN -->
<div class="grid2 bg green">
<div class="padding-none">.green - #20bba6</div>
</div>
<div class="grid2 bg green active">
<div class="padding-none">#1ba996</div>
</div>
<!-- CARBON -->
<div class="grid2 bg carbon">
<div class="padding-none">.carbon - #526270</div>
</div>
<div class="grid2 bg carbon active">
<div class="padding-none">#42525e</div>
</div>
<!-- SILVER -->
<div class="grid2 bg silver">
<div class="padding-none">.silver - #cccccc</div>
</div>
<div class="grid2 bg silver active">
<div class="padding-none">#b5b6b6</div>
</div>
<!-- WHITE -->
<div class="grid2 bg white">
<div class="padding-none">.white - #ffffff</div>
</div>
<!-- BLACK -->
<div class="grid2 bg black active">
<div class="padding-none">.black - #000000</div>
</div>
</div>
</div>
</div>
</div>
<!-- TEXT COLORS -->
<div class="grid1">
<div class="padding-bottom-none">
<h4 class="padding-top-none">Text Colors</h4>
<p>You can apply colors to text on your paragraphs and any other HTML element. Use will need to use the class <code>color</code> followed by the color name you want to use.</p>
<p class="color yellow">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique tellus et vulputate lacinia. Etiam sapien est, congue vitae ultricies non, eleifend sed justo. Ut feugiat diam est, sed fermentum elit mollis a. Aenean eu posuere dolor, in interdum elit.
</p>
<div class="background white border2x padding"><... class="color <b>yellow</b>"> ... </...></div>
<p class="color red margin-top2x">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique tellus et vulputate lacinia. Etiam sapien est, congue vitae ultricies non, eleifend sed justo. Ut feugiat diam est, sed fermentum elit mollis a. Aenean eu posuere dolor, in interdum elit.
</p>
<div class="background white border2x padding"><... class="color <b>red</b>"> ... </...></div>
<p class="color blue margin-top2x">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique tellus et vulputate lacinia. Etiam sapien est, congue vitae ultricies non, eleifend sed justo. Ut feugiat diam est, sed fermentum elit mollis a. Aenean eu posuere dolor, in interdum elit.
</p>
<div class="background white border2x padding"><... class="color <b>blue</b>"> ... </...></div>
<p class="color green margin-top2x">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique tellus et vulputate lacinia. Etiam sapien est, congue vitae ultricies non, eleifend sed justo. Ut feugiat diam est, sed fermentum elit mollis a. Aenean eu posuere dolor, in interdum elit.
</p>
<div class="background white border2x padding"><... class="color <b>green</b>"> ... </...></div>
<p class="color carbon margin-top2x">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique tellus et vulputate lacinia. Etiam sapien est, congue vitae ultricies non, eleifend sed justo. Ut feugiat diam est, sed fermentum elit mollis a. Aenean eu posuere dolor, in interdum elit.
</p>
<div class="background white border2x padding"><... class="color <b>carbon</b>"> ... </...></div>
<p class="color silver margin-top2x">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique tellus et vulputate lacinia. Etiam sapien est, congue vitae ultricies non, eleifend sed justo. Ut feugiat diam est, sed fermentum elit mollis a. Aenean eu posuere dolor, in interdum elit.
</p>
<div class="background white border2x padding"><... class="color <b>silver</b>"> ... </...></div>
<p class="color black margin-top2x">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique tellus et vulputate lacinia. Etiam sapien est, congue vitae ultricies non, eleifend sed justo. Ut feugiat diam est, sed fermentum elit mollis a. Aenean eu posuere dolor, in interdum elit.
</p>
<div class="background white border2x padding"><... class="color <b>black</b>"> ... </...></div>
<p class="color white margin-top2x">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique tellus et vulputate lacinia. Etiam sapien est, congue vitae ultricies non, eleifend sed justo. Ut feugiat diam est, sed fermentum elit mollis a. Aenean eu posuere dolor, in interdum elit.
</p>
<div class="background white border2x padding"><... class="color <b>white</b>"> ... </...></div>
</div>
</div>
<!-- HEADINGS -->
<div class="grid1">
<div class="padding-bottom-none">
<h4 class="padding-top-none">Headings</h4>
<p>
Headings are used in levels of importance. Where <code><h1></code> is the most important and <code><h6></code> the least important. Below are examples of how to use headings in <b>xtyle</b>.
</p>
</div>
<div class="padding-top-none margin-top-none">
<div class="grid2">
<div class="margin-top-none">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</div>
<div class="background white border2x">
<h1> ... </h1>
<br>
<h2> ... </h2>
<br>
<h3> ... </h3>
<br>
<h4> ... </h4>
<br>
<h5> ... </h5>
<br>
<h6> ... </h6>
</div>
</div>
<div class="grid2">
<div class="margin-top-none">
<h1 class="color yellow">Heading 1</h1>
<h2 class="color red">Heading 2</h2>
<h3 class="color blue">Heading 3</h3>
<h4 class="color green">Heading 4</h4>
<h5 class="color black">Heading 5</h5>
<h6 class="color white">Heading 6</h6>
</div>
<div class="background white border2x">
<h1 class="color <b>yellow</b>"> ... </h1>
<br>
<h2 class="color <b>red</b>"> ... </h2>
<br>
<h3 class="color <b>blue</b>"> ... </h3>
<br>
<h4 class="color <b>green</b>"> ... </h4>
<br>
<h5 class="color <b>black</b>"> ... </h5>
<br>
<h6 class="color <b>white</b>"> ... </h6>
</div>
</div>
</div>
</div>
<!-- BUTTONS -->
<div class="grid1">
<div class="padding-bottom-none">
<h4 class="padding-top-none">Buttons</h4>
<p>
There are 3 ways to create buttons in xtyle. A button can be created using an anchor <code><a class="btn"></code> or <code><a class="button"></code>, button <code><button></code>, and input type submit <code><input type="submit"></code> elements. All three ways will behave and look the same across all browsers. Add the class <code>border-radius</code> to create buttons with rounded corners.
</p>
</div>
<div class="padding-top-none margin-top-none">
<div class="grid1">
<div class="margin-top-none">
<a class="btn yellow border-radius">button yellow</a>
<a class="btn red border-radius">button red</a>
<a class="btn blue border-radius">button blue</a>
<a class="btn yellow green border-radius">button green</a>
<a class="btn yellow carbon border-radius">button carbon</a>
<a class="btn yellow silver border-radius">button silver</a>
<a class="btn yellow black border-radius">button black</a>
<a class="btn yellow white border-radius">button white</a>
</div>
</div>
</div>
<div class="padding-top-none margin-top-none">
<div class="grid1">
<div class="background white border2x margin-top-none">
<a href="#" class="<b>btn</b> <b>yellow</b>"> ... </a>
<br>
<a href="#" class="<b>btn</b> <b>red</b>"> ... </a>
<br>
<a href="#" class="<b>btn</b> <b>blue</b>"> ... </a>
<br>
<a href="#" class="<b>btn</b> <b>green</b>"> ... </a>
<br>
<a href="#" class="<b>btn</b> <b>carbon</b>"> ... </a>
<br>
<a href="#" class="<b>btn</b> <b>silver</b>"> ... </a>
<br>
<a href="#" class="<b>btn</b> <b>black</b>"> ... </a>
<br>
<a href="#" class="<b>btn</b> <b>white</b>"> ... </a>
</div>
</div>
</div>
</div>
</div>
<!-- .grid -->
</div>
<!-- layout-center -->
</body>
</html>