-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathstyle-tile.html
More file actions
executable file
·105 lines (105 loc) · 11.3 KB
/
style-tile.html
File metadata and controls
executable file
·105 lines (105 loc) · 11.3 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
<!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="style-tile">
<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="style-tile__bubble">
<div class="compartment">
<div class="grid grid--20">
<div class="col-big-6 col-wooser-7">
<h1>Header One</h1>
<p>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.</p>
<p>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.</p>
<h2>Header Two</h2>
<p>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.</p>
<h3>Header Three</h3>
<p>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.</p>
<h4>Header Four</h4>
<p>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.</p>
<h5>Header Five</h5>
<p>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.</p>
<h6>Header Six</h6>
<p>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.</p>
</div>
<div class="col-big-6 col-wooser-5">
<h2>Colors</h2>
<ul class="style-tile__pallette style-tile__colors">
<li></li>
<li></li>
<li></li>
</ul>
<h2>Shades</h2>
<ul class="style-tile__pallette style-tile__shades">
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</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>