-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathindex.html
More file actions
executable file
·278 lines (278 loc) · 20.5 KB
/
index.html
File metadata and controls
executable file
·278 lines (278 loc) · 20.5 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
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
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8">
<title>Title of site</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link href="assets/css/styles.css" rel="stylesheet">
</head>
<body class="home">
<div style="display: none;" class="sprite"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="chevron-down" viewBox="0 0 20 20"><path d="M4.516 7.548c.436-.446 1.043-.481 1.576 0L10 11.295l3.908-3.747c.533-.481 1.141-.446 1.574 0 .436.445.408 1.197 0 1.615-.406.418-4.695 4.502-4.695 4.502a1.095 1.095 0 0 1-1.576 0S4.924 9.581 4.516 9.163s-.436-1.17 0-1.615z"/></symbol><symbol id="chevron-left" viewBox="0 0 20 20"><path d="M12.452 4.516c.446.436.481 1.043 0 1.576L8.705 10l3.747 3.908c.481.533.446 1.141 0 1.574-.445.436-1.197.408-1.615 0-.418-.406-4.502-4.695-4.502-4.695a1.095 1.095 0 0 1 0-1.576s4.084-4.287 4.502-4.695 1.17-.436 1.615 0z"/></symbol><symbol id="chevron-right" viewBox="0 0 20 20"><path d="M9.163 4.516c.418.408 4.502 4.695 4.502 4.695a1.095 1.095 0 0 1 0 1.576s-4.084 4.289-4.502 4.695c-.418.408-1.17.436-1.615 0-.446-.434-.481-1.041 0-1.574L11.295 10 7.548 6.092c-.481-.533-.446-1.141 0-1.576s1.197-.409 1.615 0z"/></symbol><symbol id="close" viewBox="0 0 24 24"><path d="M17.016 15.609L13.407 12l3.609-3.609-1.406-1.406-3.609 3.609-3.609-3.609-1.406 1.406L10.595 12l-3.609 3.609 1.406 1.406 3.609-3.609 3.609 3.609zM12 2.016c5.531 0 9.984 4.453 9.984 9.984S17.531 21.984 12 21.984 2.016 17.531 2.016 12 6.469 2.016 12 2.016z"/></symbol><symbol id="facebook" viewBox="0 0 19 32"><path d="M17.125.214v4.714h-2.804q-1.536 0-2.071.643T11.714 7.5v3.375h5.232l-.696 5.286h-4.536v13.554H6.25V16.161H1.696v-5.286H6.25V6.982q0-3.321 1.857-5.152T13.053 0q2.625 0 4.071.214z"/></symbol><symbol id="flickr" viewBox="0 0 20 20"><path d="M5 14c-2.188 0-3.96-1.789-3.96-4S2.812 6 5 6c2.187 0 3.96 1.789 3.96 4S7.187 14 5 14zM15 14c-2.188 0-3.96-1.789-3.96-4S12.812 6 15 6c2.187 0 3.96 1.789 3.96 4s-1.773 4-3.96 4z"/></symbol><symbol id="home" viewBox="0 0 20 20"><path d="M18.672 11H17v6c0 .445-.194 1-1 1h-4v-6H8v6H4c-.806 0-1-.555-1-1v-6H1.328c-.598 0-.47-.324-.06-.748L9.292 2.22c.195-.202.451-.302.708-.312.257.01.513.109.708.312l8.023 8.031c.411.425.539.749-.059.749z"/></symbol><symbol id="instagram" viewBox="0 0 27 32"><path d="M18.286 16q0-1.893-1.339-3.232t-3.232-1.339-3.232 1.339T9.144 16t1.339 3.232 3.232 1.339 3.232-1.339T18.286 16zm2.464 0q0 2.929-2.054 4.982t-4.982 2.054-4.982-2.054T6.678 16t2.054-4.982 4.982-2.054 4.982 2.054T20.75 16zm1.929-7.321q0 .679-.482 1.161t-1.161.482-1.161-.482-.482-1.161.482-1.161 1.161-.482 1.161.482.482 1.161zM13.714 4.75l-1.366-.009q-1.241-.009-1.884 0t-1.723.054-1.839.179-1.277.33q-.893.357-1.571 1.036T3.018 7.911q-.196.518-.33 1.277t-.179 1.839-.054 1.723 0 1.884T2.464 16t-.009 1.366 0 1.884.054 1.723.179 1.839.33 1.277q.357.893 1.036 1.571t1.571 1.036q.518.196 1.277.33t1.839.179 1.723.054 1.884 0 1.366-.009 1.366.009 1.884 0 1.723-.054 1.839-.179 1.277-.33q.893-.357 1.571-1.036t1.036-1.571q.196-.518.33-1.277t.179-1.839.054-1.723 0-1.884T24.964 16t.009-1.366 0-1.884-.054-1.723-.179-1.839-.33-1.277q-.357-.893-1.036-1.571t-1.571-1.036q-.518-.196-1.277-.33t-1.839-.179-1.723-.054-1.884 0-1.366.009zM27.429 16q0 4.089-.089 5.661-.179 3.714-2.214 5.75t-5.75 2.214q-1.571.089-5.661.089t-5.661-.089q-3.714-.179-5.75-2.214T.09 21.661Q.001 20.09.001 16t.089-5.661q.179-3.714 2.214-5.75t5.75-2.214q1.571-.089 5.661-.089t5.661.089q3.714.179 5.75 2.214t2.214 5.75q.089 1.571.089 5.661z"/></symbol><symbol id="linkedin" viewBox="0 0 27 32"><path d="M6.232 11.161v17.696H.339V11.161h5.893zm.375-5.465Q6.625 7 5.705 7.875t-2.42.875h-.036q-1.464 0-2.357-.875t-.893-2.179q0-1.321.92-2.188t2.402-.866 2.375.866.911 2.188zm20.822 13.018v10.143h-5.875v-9.464q0-1.875-.723-2.938t-2.259-1.063q-1.125 0-1.884.616t-1.134 1.527q-.196.536-.196 1.446v9.875H9.483q.036-7.125.036-11.554t-.018-5.286l-.018-.857h5.875v2.571h-.036q.357-.571.732-1t1.009-.929 1.554-.777 2.045-.277q3.054 0 4.911 2.027t1.857 5.938z"/></symbol><symbol id="minus" viewBox="0 0 20 20"><path d="M16 10c0 .553-.048 1-.601 1H4.601C4.049 11 4 10.553 4 10s.049-1 .601-1H15.4c.552 0 .6.447.6 1z"/></symbol><symbol id="play" viewBox="0 0 24 24"><path d="M12 20.016c4.406 0 8.016-3.609 8.016-8.016S16.407 3.984 12 3.984 3.984 7.593 3.984 12 7.593 20.016 12 20.016zm0-18c5.531 0 9.984 4.453 9.984 9.984S17.531 21.984 12 21.984 2.016 17.531 2.016 12 6.469 2.016 12 2.016zM9.984 16.5v-9l6 4.5z"/></symbol><symbol id="plus" viewBox="0 0 20 20"><path d="M16 10c0 .553-.048 1-.601 1H11v4.399c0 .552-.447.601-1 .601s-1-.049-1-.601V11H4.601C4.049 11 4 10.553 4 10s.049-1 .601-1H9V4.601C9 4.048 9.447 4 10 4s1 .048 1 .601V9h4.399c.553 0 .601.447.601 1z"/></symbol><symbol id="search" viewBox="0 0 20 20"><path d="M17.545 15.467l-3.779-3.779a6.15 6.15 0 0 0 .898-3.21c0-3.417-2.961-6.377-6.378-6.377S2.1 4.87 2.1 8.287c0 3.416 2.961 6.377 6.377 6.377a6.15 6.15 0 0 0 3.115-.844l3.799 3.801a.953.953 0 0 0 1.346 0l.943-.943c.371-.371.236-.84-.135-1.211zM4.004 8.287c0-2.366 1.917-4.283 4.282-4.283s4.474 2.107 4.474 4.474c0 2.365-1.918 4.283-4.283 4.283s-4.473-2.109-4.473-4.474z"/></symbol><symbol id="twitter" viewBox="0 0 30 32"><path d="M28.929 7.286q-1.196 1.75-2.893 2.982.018.25.018.75 0 2.321-.679 4.634t-2.063 4.437-3.295 3.759-4.607 2.607-5.768.973q-4.839 0-8.857-2.589.625.071 1.393.071 4.018 0 7.161-2.464-1.875-.036-3.357-1.152t-2.036-2.848q.589.089 1.089.089.768 0 1.518-.196-2-.411-3.313-1.991t-1.313-3.67v-.071q1.214.679 2.607.732-1.179-.786-1.875-2.054t-.696-2.75q0-1.571.786-2.911Q4.91 8.285 8.008 9.883t6.634 1.777q-.143-.679-.143-1.321 0-2.393 1.688-4.08t4.08-1.688q2.5 0 4.214 1.821 1.946-.375 3.661-1.393-.661 2.054-2.536 3.179 1.661-.179 3.321-.893z"/></symbol><symbol id="undo" viewBox="0 0 32 32"><path d="M23.808 32c3.554-6.439 4.153-16.26-9.808-15.932V24L2 12 14 0v7.762C30.718 7.326 32.58 22.519 23.808 32z"/></symbol><symbol id="youtube" viewBox="0 0 20 20"><path d="M10 2.3C.172 2.3 0 3.174 0 10s.172 7.7 10 7.7 10-.874 10-7.7-.172-7.7-10-7.7zm3.205 8.034l-4.49 2.096c-.393.182-.715-.022-.715-.456V8.026c0-.433.322-.638.715-.456l4.49 2.096c.393.184.393.484 0 .668z"/></symbol></svg>
</div>
<header class="site__header">
<div class="compartment"><a href="" class="site__logo">Silk</a>
<button aria-hidden="true" class="drawer__trigger"></button>
<nav class="silk-nav drawer">
<div class="silk-nav__controls"><a href="/" class="silk-nav__trigger silk-nav__trigger--home">
<svg class="symbol symbol-home">
<use xlink:href="#home"></use>
</svg><span>Home</span></a>
<button class="silk-nav__trigger silk-nav__trigger--revert">
<svg class="symbol symbol-undo">
<use xlink:href="#undo"></use>
</svg><span>Main Menu</span>
</button>
<button class="silk-nav__trigger silk-nav__trigger--reverse">
<svg class="symbol symbol-chevron-left">
<use xlink:href="#chevron-left"></use>
</svg>
</button>
</div>
<div class="nav nav-main">
<ul>
<li><a href="/">Anime</a>
<ul>
<li><a href="/">Tokyo Ghoul</a>
<ul>
<li><a href="/">Season One</a></li>
<li><a href="/">Season Two</a></li>
</ul>
</li>
<li><a href="/">Aldnoah Zero</a></li>
</ul>
</li>
<li><a href="/">About</a></li>
<li><a href="/">Academics</a></li>
<li><a href="/">Admissions</a></li>
<li><a href="/">Athletics</a></li>
</ul>
</div>
</nav>
</div>
</header>
<main>
<div class="compartment">
<section id="hero-section" class="hero">
<h2>Silk Hero</h2><img src="http://i.imgur.com/amMWTop.jpg">
</section>
<section id="empty-hero-section" class="hero hero--empty"><img src="http://i.imgur.com/9FnCMYs.jpg"></section>
<section id="harmonica-section">
<h2>Silk Harmonica</h2>
<div class="silk-harmonica silk-harmonica--condensed">
<header role="tab" class="silk-harmonica__header">
<h4>Harmonica Heading</h4>
</header>
<article role="tabpanel" class="silk-harmonica__content">Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</article>
<header role="tab" class="silk-harmonica__header">
<h4>Harmonica Heading</h4>
</header>
<article role="tabpanel" class="silk-harmonica__content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</article>
<header role="tab" class="silk-harmonica__header">
<h4>Harmonica Heading</h4>
</header>
<article role="tabpanel" class="silk-harmonica__content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</article>
<header role="tab" class="silk-harmonica__header">
<h4>Harmonica Heading</h4>
</header>
<article role="tabpanel" class="silk-harmonica__content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</article>
</div>
</section>
<section id="harmonica-expanded-section">
<h2>Silk Harmonica Expanded</h2>
<div class="silk-harmonica silk-harmonica--expanded">
<header role="tab" class="silk-harmonica__header">
<h4>Heading</h4>
</header>
<article role="tabpanel" class="silk-harmonica__content">Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</article>
<header role="tab" class="silk-harmonica__header">
<h4>Heading</h4>
</header>
<article role="tabpanel" class="silk-harmonica__content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</article>
<header role="tab" class="silk-harmonica__header">
<h4>Heading</h4>
</header>
<article role="tabpanel" class="silk-harmonica__content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</article>
<header role="tab" class="silk-harmonica__header">
<h4>Heading</h4>
</header>
<article role="tabpanel" class="silk-harmonica__content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</article>
</div>
</section>
<section id="table-section">
<h2>Silk Table</h2>
<div class="silk-table">
<table>
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
</tr>
</tbody>
</table>
</div>
</section>
<section id="collage-section">
<h2>Silk Collage</h2>
<ol class="silk-collage">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</section>
<section id="swift-slide-section">
<h2>Swift Slide</h2>
<ol class="swift-slide">
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</section>
<section id="instagram-section">
<h2>Instagram Feed</h2>
<ol id="instagram-feed" class="instagram-feed list-reset"></ol>
</section>
<section id="twitter-section">
<h2>Twitter Feed</h2>
<ol id="twitter-feed" class="twitter-feed list-reset"></ol>
</section>
<section id="forms-section">
<h2>Forms</h2>
<form class="grid grid--20">
<div class="col-large-6 col-aldnoah-4">
<div class="input-field">
<input type="text" placeholder="Enter Search Keywords">
<div class="input-hint">
<input type="submit" value="Submit" class="hidden-submit cover"><span class="input-symbol absolutely-centered">
<svg class="symbol symbol-search">
<use xlink:href="#search"></use>
</svg></span>
</div>
</div>
</div>
<div class="col-large-6 col-aldnoah-4">
<div class="input-field">
<select>
<option value="Select From Options">Select From Options</option>
<option value="Who">Who</option>
<option value="What">What</option>
<option value="Why">Why</option>
<option value="Where">Where</option>
<option value="When">When</option>
</select>
<div class="input-hint"><span class="input-symbol absolutely-centered">
<svg class="symbol symbol-chevron-down">
<use xlink:href="#chevron-down"></use>
</svg></span></div>
</div>
</div>
<div class="col-aldnoah-4">
<input placeholder="Name (required)" name="name" type="text" required>
</div>
<div class="col-flush">
<textarea placeholder="Tell us more (optional):" name="comments" rows="8"></textarea>
</div>
<div class="col-flush">
<fieldset>
<input type="radio" name="radio-input" id="radio-input" value="Radio Input">
<label for="radio-input">Radio Input</label>
<input type="radio" name="checkbox-input" id="checkbox-input" value="Checkbox Input">
<label for="checkbox-input">Checkbox Input</label>
</fieldset>
</div>
<div class="col-flush">
<input type="submit" value="Submit" class="button">
</div>
</form>
</section>
<section id="filter-section">
<h2>Filters</h2>
<div class="pagination">
<button class="pagination__control">
<svg class="symbol symbol-chevron-left">
<use xlink:href="#chevron-left"></use>
</svg>
</button>
<ul class="pagination__key">
<li><a href="">1</a></li>
<li><a href="" class="active">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">...</a></li>
</ul>
<button class="pagination__control">
<svg class="symbol symbol-chevron-right">
<use xlink:href="#chevron-right"></use>
</svg>
</button>
</div>
</section>
<section id="buttons-section">
<h2>Buttons</h2>
<button class="button">HTML Button Filled </button><a href="" class="button">Link Button Filled</a>
<button class="button button--hollow">HTML Button Hollow </button><a href="" class="button button--hollow">Link Button Hollow</a>
</section>
<section id="modal-section">
<h2>Modal</h2>
<div class="silk-modal">
<div class="silk-modal__trigger">
<svg class="symbol symbol-play">
<use xlink:href="#play"></use>
</svg>
</div><img src="http://i.imgur.com/f5M3iyy.jpg" class="full-width">
<div class="silk-modal__details">
<div class="silk-modal__trigger--close">
<svg class="symbol symbol-close">
<use xlink:href="#close"></use>
</svg><span>Close</span>
</div><img src="http://i.imgur.com/f5M3iyy.jpg" class="full-width">
<h2>Photo Caption</h2>
</div>
</div>
</section>
</div>
</main>
<footer class="site__footer">
<div class="compartment">
<div id="hcard" class="vcard">
<div class="org">Organization</div>
<div class="adr">
<div class="street-address">92 West Pegasus St.</div>
<div class="location"><span class="locality">Washington</span> <span class="region">MA</span> <span class="postal-code">493123</span></div>
</div><a href="mailto:organization@gmail.com" class="email">organization@gmail.com</a><a href="tel:443-283-3847" class="tel">443-283-3847</a>
</div>
</div>
</footer>
<script src="assets/js/build/main.js"></script>
<script src="assets/js/build/site.js"></script>
</body>
</html>