-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
117 lines (117 loc) · 12.6 KB
/
index.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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rhythm</title>
<link rel="stylesheet" href="rhythm.min.css">
</head>
<body>
<section>
<h1>Lorem ipsum dolor sit amet</h1>
<p class="caption">Labore reprehenderit corporis ullam distinctio ex.</p>
<p>Consectetur adipisicing elit, alias at autem magna aliquid <a href="#">quam proident</a> quis aliquam. temporibus minus eius veniam cupidatat ex, voluptas fuga, quos, mollitia incidunt do officia facilis. molestiae consequat excepturi laborum perferendis tempor minim eiusmod minim minus quia sint.</p>
<p>Quos atque officia quod. <i>Suscipit delectus</i> cupidatat, quia nulla numquam aute cillum proident. Maiores iusto culpa molestias quam id tenetur saepe impedit reiciendis itaque ducimus itaque nostrud. Tempor aliquip, culpa earum itaque sed consequatur minus aliquip reprehenderit nihil veniam tempora do maxime omnis reiciendis elit tempora.</p>
<ol>
<li>Perferendis tempor</li>
<li>Minim eiusmod </li>
<li>Tempor</li>
<li>Minus quia sint</li>
</ol>
<h2>Voluptates mollitia quod tempore laboris commodi</h2>
<p class="drop-cap">Proident dolores corrupti consequatur voluptatibus labore commodi quos. <b>Incidunt mollitia</b> tempora assumenda laborum voluptate accusamus dolore optio incididunt. Maiores at duis consequatur corrupti consectetur, aliquam optio commodo accusamus distinctio, necessitatibus nostrum.</p>
<p>Optio, nesciunt, quo, fugiat, blanditiis at quas excepturi quae maiores vel corrupti voluptate cupiditate nemo! In, eius quidem harum quibusdam ratione non. Iste, deleniti, fugit, voluptas aperiam qui adipisci provident ab accusantium possimus eveniet voluptate consectetur!</p>
<h2>Repellat optio</h2>
<h3>Ad perferendis omnis</h3>
<p>Pariatur animi quis. Dolorem cupiditate <a href="#">praesentium duis</a> iusto corrupti nobis nostrud, exercitation consequatur. Nulla minim dignissimos reprehenderit voluptatem. Recusandae delectus iure vel asperiores saepe dolorum omnis eu aliquam similique.</p>
<blockquote><p>Fuga rerum laboris officia cupidatat, excepteur aliquid ut quis facere, cumque harum optio dignissimos. Duis repellat tempore dolor blanditiis alias impedit officiis ut consectetur.</p></blockquote>
<p>Pariatur animi quis. Dolorem cupiditate <a href="#">praesentium duis</a> iusto corrupti nobis nostrud, exercitation consequatur. Nulla minim dignissimos reprehenderit voluptatem. Recusandae delectus iure vel asperiores saepe dolorum omnis eu aliquam similique.</p>
<pre><code>body {
color: blue;
}</code></pre>
<h4>Quibusdam illum quo</h4>
<p>Quos laboris eos, laborum animi. Ea blanditiis ducimus fugiat officia nostrud consectetur recusandae excepteur. Quis qui maiores distinctio facilis saepe eos.</p>
<h5>Consectetur nobis consequat voluptates eiusmod</h5>
<p>Iure vel nostrud repellendus. <b>Nostrud</b> autem consequatur, provident officiis qui, mollit exercitation. Veniam minus cillum suscipit aliqua, tenetur. Anim mollitia necessitatibus ad quos consectetur voluptatem do <a href="#">corporis</a>.</p>
<ul>
<li>Perferendis tempor</li>
<li>Minim eiusmod </li>
<li>Tempor</li>
<li>Minus quia sint</li>
</ul>
<p>Corporis eligendi minim, enim proident reprehenderit iusto. <i>Reprehenderit</i> commodo commodi, repudiandae voluptas saepe sint libero. Praesentium eius distinctio ullamco vero iusto praesentium eligendi animi. Consectetur dolore vero similique dolore, ut labore omnis.</p>
<h6>Heading 6</h6>
<p>Omnis corporis assumenda nisi ullam dolores culpa repellat. Molestias praesentium necessitatibus minus, reiciendis officiis commodo incidunt. Consectetur nostrud odio numquam tenetur.</p>
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading 6</h6>
<p>Paragraph with <b>bold</b>, <i>italic</i>, <a href="#">link</a> and <code>code</code> styles.</p>
<blockquote><p>Blockquote</p></blockquote>
<p class="caption">Caption text</p>
<ol>
<li>Ordered list element one</li>
<li>Ordered list element two</li>
<li>Ordered list element three</li>
</ol>
<ul>
<li>Unordered list element one</li>
<li>Unordered list element two</li>
<li>Unordered list element three</li>
</ul>
<h6>Heading 6</h6>
<p>Consectetur adipisicing elit, alias at autem magna aliquid <a href="#">quam proident</a> quis aliquam. temporibus minus eius veniam cupidatat ex, voluptas fuga, quos, mollitia incidunt do officia facilis. molestiae consequat excepturi laborum perferendis tempor minim eiusmod minim minus quia sint.</p>
<h6>Heading 6</h6>
<p>Quos atque officia quod. <i>Suscipit delectus</i> cupidatat, quia nulla numquam aute cillum proident. Maiores iusto culpa molestias quam id tenetur saepe impedit reiciendis itaque ducimus itaque nostrud. Tempor aliquip, culpa earum itaque sed consequatur minus aliquip reprehenderit nihil veniam tempora do maxime omnis reiciendis elit tempora.</p>
<h6>Heading 6</h6>
<p>Consectetur adipisicing elit, alias at autem magna aliquid <a href="#">quam proident</a> quis aliquam. temporibus minus eius veniam cupidatat ex, voluptas fuga, quos, mollitia incidunt do officia facilis. molestiae consequat excepturi laborum perferendis tempor minim eiusmod minim minus quia sint.</p>
<h6>Heading 6</h6>
<p>Quos atque officia quod. <i>Suscipit delectus</i> cupidatat, quia nulla numquam aute cillum proident. Maiores iusto culpa molestias quam id tenetur saepe impedit reiciendis itaque ducimus itaque nostrud. Tempor aliquip, culpa earum itaque sed consequatur minus aliquip reprehenderit nihil veniam tempora do maxime omnis reiciendis elit tempora.</p>
<h6>Heading 6</h6>
<p>Quos atque officia quod. <i>Suscipit delectus</i> cupidatat, quia nulla numquam aute cillum proident. Maiores iusto culpa molestias quam id tenetur saepe impedit reiciendis itaque ducimus itaque nostrud. Tempor aliquip, culpa earum itaque sed consequatur minus aliquip reprehenderit nihil veniam tempora do maxime omnis reiciendis elit tempora.</p>
<h6>Heading 6</h6>
<p>Consectetur adipisicing elit, alias at autem magna aliquid <a href="#">quam proident</a> quis aliquam. temporibus minus eius veniam cupidatat ex, voluptas fuga, quos, mollitia incidunt do officia facilis. molestiae consequat excepturi laborum perferendis tempor minim eiusmod minim minus quia sint.</p>
<h6>Heading 6</h6>
<p>Quos atque officia quod. <i>Suscipit delectus</i> cupidatat, quia nulla numquam aute cillum proident. Maiores iusto culpa molestias quam id tenetur saepe impedit reiciendis itaque ducimus itaque nostrud. Tempor aliquip, culpa earum itaque sed consequatur minus aliquip reprehenderit nihil veniam tempora do maxime omnis reiciendis elit tempora.</p>
<h6>Heading 6</h6>
<p>Quos atque officia quod. <i>Suscipit delectus</i> cupidatat, quia nulla numquam aute cillum proident. Maiores iusto culpa molestias quam id tenetur saepe impedit reiciendis itaque ducimus itaque nostrud. Tempor aliquip, culpa earum itaque sed consequatur minus aliquip reprehenderit nihil veniam tempora do maxime omnis reiciendis elit tempora.</p>
<h6>Heading 6</h6>
<p>Quos atque officia quod. <i>Suscipit delectus</i> cupidatat, quia nulla numquam aute cillum proident. Maiores iusto culpa molestias quam id tenetur saepe impedit reiciendis itaque ducimus itaque nostrud. Tempor aliquip, culpa earum itaque sed consequatur minus aliquip reprehenderit nihil veniam tempora do maxime omnis reiciendis elit tempora.</p>
<h6>Heading 6</h6>
<p>Consectetur adipisicing elit, alias at autem magna aliquid <a href="#">quam proident</a> quis aliquam. temporibus minus eius veniam cupidatat ex, voluptas fuga, quos, mollitia incidunt do officia facilis. molestiae consequat excepturi laborum perferendis tempor minim eiusmod minim minus quia sint.</p>
<p>Consectetur adipisicing elit, alias at autem magna aliquid <a href="#">quam proident</a> quis aliquam. temporibus minus eius veniam cupidatat ex, voluptas fuga, quos, mollitia incidunt do officia facilis. molestiae consequat excepturi laborum perferendis tempor minim eiusmod minim minus quia sint.</p>
<h6>Heading 6</h6>
<p>Quos atque officia quod. <i>Suscipit delectus</i> cupidatat, quia nulla numquam aute cillum proident. Maiores iusto culpa molestias quam id tenetur saepe impedit reiciendis itaque ducimus itaque nostrud. Tempor aliquip, culpa earum itaque sed consequatur minus aliquip.</p>
<h6>Heading 6</h6>
<p>Quos atque officia quod. <i>Suscipit delectus</i> cupidatat, quia nulla numquam aute cillum proident. Maiores iusto culpa molestias quam id tenetur saepe impedit reiciendis itaque ducimus itaque nostrud. Tempor aliquip, culpa earum itaque sed consequatur minus aliquip.</p>
<h6>Heading 6</h6>
<p>Consectetur adipisicing elit, alias at autem magna aliquid <a href="#">quam proident</a> quis aliquam. temporibus minus eius veniam cupidatat ex, voluptas fuga, quos, mollitia incidunt do officia facilis. molestiae consequat excepturi laborum perferendis tempor minim eiusmod minim minus quia sint.</p>
<p>Consectetur adipisicing elit, alias at autem magna aliquid <a href="#">quam proident</a> quis aliquam. temporibus minus eius veniam cupidatat ex, voluptas fuga, quos, mollitia incidunt do officia facilis. molestiae consequat excepturi laborum perferendis tempor minim eiusmod minim minus quia sint.</p>
<h6>Heading 6</h6>
<p>Consectetur adipisicing elit, alias at autem magna aliquid <a href="#">quam proident</a> quis aliquam. temporibus minus eius veniam cupidatat ex, voluptas fuga, quos, mollitia incidunt do officia facilis. molestiae consequat excepturi laborum perferendis tempor minim eiusmod minim minus quia sint.</p>
<p class="caption sidenote">This is an inline caption.</p>
<p>Consectetur adipisicing elit, alias at autem magna aliquid <a href="#">quam proident</a> quis aliquam. temporibus minus eius veniam cupidatat ex, voluptas fuga, quos, mollitia incidunt do officia facilis. molestiae consequat excepturi laborum perferendis tempor minim eiusmod minim minus quia sint.</p>
<p>Consectetur adipisicing elit, alias at autem magna aliquid <a href="#">quam proident</a> quis aliquam. temporibus minus eius veniam cupidatat ex, voluptas fuga, quos, mollitia incidunt do officia facilis. molestiae consequat excepturi laborum perferendis tempor minim eiusmod minim minus quia sint.</p>
<h6>Heading 6</h6>
<p>Consectetur adipisicing elit, alias at autem magna aliquid <a href="#">quam proident</a> quis aliquam. temporibus minus eius veniam cupidatat ex, voluptas fuga, quos, mollitia incidunt do officia facilis. molestiae consequat excepturi laborum perferendis tempor minim eiusmod minim minus quia sint.</p>
<p class="caption sidenote">This is a long inline caption that will probably go across a couple of lines.</p>
<p>Consectetur adipisicing elit, alias at autem magna aliquid <a href="#">quam proident</a> quis aliquam. temporibus minus eius veniam cupidatat ex, voluptas fuga, quos, mollitia incidunt do officia facilis. molestiae consequat excepturi laborum perferendis tempor minim eiusmod minim minus quia sint.</p>
<p>Consectetur adipisicing elit, alias at autem magna aliquid <a href="#">quam proident</a> quis aliquam. temporibus minus eius veniam cupidatat ex, voluptas fuga, quos, mollitia incidunt do officia facilis. molestiae consequat excepturi laborum perferendis tempor minim eiusmod minim minus quia sint.</p>
</section>
<footer class="global-footer">
<p>Hodor</p>
</footer>
<script>
var navigation = responsiveNav(".main-nav");
// Grid toggle
function changeClass() {
if ( document.getElementById("baseline").className.match(/(?:^|\s)show-grid(?!\S)/) ) {
document.getElementById("baseline").className = document.getElementById("baseline").className.replace( /(?:^|\s)show-grid(?!\S)/g , '' )
} else { document.getElementById("baseline").className += " show-grid"; }
}
document.getElementById("gridtoggle").addEventListener( 'click' , changeClass );
</script>
</body>
</html>