-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
172 lines (172 loc) · 10.1 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
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
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link href="DivineGrid/css/reset.css" rel="stylesheet" />
<link href="DivineGrid/css/grid.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<link href="jquery.toggleme/css/jquery.toggleme.css" rel="stylesheet" />
<title>Divine</title>
</head>
<body>
<div class="container">
<div class="columns">
<div class="col-3">
<img src="img/logo.png" />
</div>
<div class="col-1 extra special">
<a href="#lorem-ipsum" class="box promo button">Lorem Ipsum</a>
</div>
<div class="col-1 special">
<a href="#ut-nisl-mi" class="box promo button">Ut Nisl Mi</a>
</div>
<div class="col-1 special">
<a href="#proin-vitae" class="box promo button">Proin Vitae</a>
</div>
</div>
<div class="columns">
<div class="col-4">
<h2 id="lorem-ipsum" class="title underline">Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mattis iaculis nisi, nec tempus odio ultricies id. Aliquam nec massa at velit porttitor adipiscing sed in eros. Morbi imperdiet tincidunt sapien, ut scelerisque quam aliquet vitae.</p>
<p>Integer elit magna, mollis laoreet tempus id, ornare sit amet leo. Donec malesuada rhoncus ornare. Integer id eros eu risus convallis pulvinar. Nam consequat scelerisque libero eu egestas.</p>
<p>Suspendisse adipiscing placerat auctor. Praesent eleifend lacus et massa iaculis non rutrum quam iaculis. Cras ac nisl vel arcu tempus fringilla.</p>
</div>
<div class="col-2">
<h2 class="title underline">Aliquam</h2>
<div class="media promo">
<img src="img/avatar.jpg" class="img" />
<div class="bd">Aliquam eu velit ligula, eget adipiscing metus...</div>
</div>
<div class="media promo">
<img src="img/avatar.jpg" class="img" />
<div class="bd">Proin tincidunt venenatis risus, quis mollis arcu...</div>
</div>
<div class="media promo">
<img src="img/avatar.jpg" class="img" />
<div class="bd">Donec vel ipsum risus. Morbi facilisis turpis at...</div>
</div>
</div>
</div>
<div class="columns">
<div class="col-2">
<div class="divine box promo alpha">
<h3 class="title">Nullam Sit Amet</h3>
<p>Nullam sit amet libero urna. Maecenas et massa ac neque malesuada pellentesque.</p>
</div>
</div>
<div class="col-2">
<div class="divine box promo beta">
<h3 class="title">Cras Commodo</h3>
<p>Cras commodo lorem nec diam lobortis lacinia.</p>
</div>
</div>
<div class="col-2">
<div class="divine box promo gamma">
<h3 class="title">Vestibulum</h3>
<p>Vestibulum in metus mauris. Curabitur egestas nulla in erat aliquet nec venenatis orci bibendum.</p>
</div>
</div>
</div>
<div class="columns">
<div class="col-6">
<h2 id="ut-nisl-mi" class="title underline">Ut Nisl Mi</h2>
<p>Ut nisl mi, dapibus id venenatis et, viverra in tortor. In hac habitasse platea dictumst. Quisque placerat magna sit amet purus venenatis dapibus. Suspendisse non iaculis ipsum. Aliquam ac accumsan nulla. Praesent ac felis sit amet quam consequat mattis. Suspendisse ante arcu, lacinia a viverra sed, porttitor non turpis. Sed diam nisi, elementum lobortis porttitor vitae, lacinia nec dolor.</p>
<p>In elementum nunc quis justo ultricies condimentum nec bibendum magna. Praesent mattis urna a nibh eleifend tincidunt. Fusce vestibulum tempus euismod. Quisque rhoncus ultrices ipsum, et commodo ipsum dapibus vel. Aenean sollicitudin, mauris quis ullamcorper imperdiet, turpis nunc rutrum mauris, ac tristique ipsum sem id enim.</p>
<div class="toggleme box promo">
<h3 class="title">Sed dignissim...</h3>
<div>
<p>Sed dignissim convallis dictum. Integer ullamcorper, erat id ultrices pharetra, nisi augue blandit quam, eu sodales ligula est vitae lectus. Integer scelerisque sollicitudin dui non pellentesque.</p>
<p>Nullam vulputate molestie elementum. Mauris id urna mauris, sed consectetur felis. Quisque diam neque, hendrerit eget venenatis et, euismod sed arcu.</p>
<ul>
<li>Ut ut neque vel ante mollis consequat.</li>
<li>Nullam eu nisi dictum orci egestas luctus.</li>
<li>Sed metus felis, imperdiet eu placerat et, lobortis et metus.</li>
</ul>
</div>
</div>
<div class="toggleme box promo">
<h3 class="title">Curabitur volutpat...</h3>
<div>
<p>Curabitur volutpat aliquet quam, fermentum varius mauris tincidunt sed. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer et nulla sapien.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet porta augue, ut auctor felis lacinia non. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
<div class="toggleme box promo">
<h3 class="title">Etiam Varius...</h3>
<div>
<p>Etiam varius nisi non diam porta dictum. Nulla facilisi. Suspendisse in sapien quis urna varius tristique nec at risus. Pellentesque imperdiet nisl vel eros ultrices sodales.</p>
</div>
</div>
</div>
</div>
<div class="columns">
<div class="col-2">
<h2 id="proin-vitae" class="title underline">Proin Vitae</h2>
<table>
<thead>
<tr>
<th>
Proin
</th>
<th>
Vitae
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Orci elit</td>
<td>Ut consectetur ligula</td>
</tr>
<tr class="even">
<td>Fusce nec</td>
<td>Facilisis lectus, nulla facilisi</td>
</tr>
<tr>
<td>Proin lacinia</td>
<td>Dolor sed arcu fermentum cursus</td>
</tr>
<tr class="even">
<td>In varius</td>
<td>Erat sed placerat venenatis</td>
</tr>
</tbody>
</table>
</div>
<div class="col-4">
<h2 class="title underline">Nunc Eget Sapien Tortor</h2>
<p>Nunc eget sapien tortor, eu suscipit tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec leo est, tempor vel semper a, pharetra id augue.</p>
<p>Donec vel dapibus quam. Curabitur pellentesque mauris id justo rhoncus vel volutpat mauris vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac urna sit amet massa mattis lobortis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis venenatis orci. Vivamus quam quam, consequat at pellentesque ut, pharetra fermentum lorem. Vivamus imperdiet lorem vel nulla consequat non varius mauris varius.</p>
</div>
</div>
<div id="footer" class="columns">
<div class="col-2">
<div class="box">
<h2 class="title underline">Nullam</h2>
<p>Nullam ut leo metus, ac eleifend libero. In et arcu augue, porta dignissim odio.</p>
</div>
</div>
<div class="col-2">
<div class="box">
<h2 class="title underline">Vivamus</h2>
<p>Vivamus porta euismod velit, vitae vehicula sapien volutpat eget.</p>
</div>
</div>
<div class="col-2">
<div class="box">
<h2 class="title underline">Aliquam</h2>
<p>Aliquam nisi neque, lacinia eu hendrerit sit amet, tincidunt id ipsum.</p>
</div>
</div>
</div>
</div> <!-- End of "container" -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery.toggleme/js/jquery.toggleme.min.js"></script>
<script>
$(function() {
$('.toggleme').toggleme();
});
</script>
</body>
</html>