-
Notifications
You must be signed in to change notification settings - Fork 0
/
left-sidebar.html
232 lines (209 loc) · 10.1 KB
/
left-sidebar.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
<!DOCTYPE HTML>
<!--
Waypoint by Pixelarity
pixelarity.com | hello@pixelarity.com
License: pixelarity.com/license
-->
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="assets/css/main.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
</head>
<body class="left-sidebar" id="top">
<div id="page-wrapper">
<!-- Header -->
<div id="header">
<div class="container">
<!-- Logo -->
<div id="logo">
<h1><a href="index.html">Waypoint</a></h1>
</div>
<!-- Nav -->
<nav id="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li>
<a href="#">Dropdown</a>
<ul>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Magna phasellus</a></li>
<li><a href="#">Etiam dolore nisl</a></li>
<li>
<a href="#">Phasellus consequat</a>
<ul>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Phasellus consequat</a></li>
<li><a href="#">Magna phasellus</a></li>
<li><a href="#">Etiam dolore nisl</a></li>
<li><a href="#">Veroeros feugiat</a></li>
</ul>
</li>
<li><a href="#">Veroeros feugiat</a></li>
</ul>
</li>
<li><a href="right-sidebar.html">Right Sidebar</a></li>
<li class="active"><a href="left-sidebar.html">Left Sidebar</a></li>
<li><a href="no-sidebar.html">No Sidebar</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
</div>
<!-- Main -->
<div id="main">
<div class="container">
<div class="row">
<!-- Sidebar -->
<div id="sidebar" class="4u 12u(mobile)">
<section>
<header>
<h2>Integer gravida</h2>
</header>
<ul class="style2">
<li class="icon fa-arrow-circle-right"><a href="#">Amet turpis, feugiat et sit amet</a></li>
<li class="icon fa-arrow-circle-right"><a href="#">Ornare in hendrerit in lectus</a></li>
<li class="icon fa-arrow-circle-right"><a href="#">Semper mod quis eget mi dolore</a></li>
<li class="icon fa-arrow-circle-right"><a href="#">Quam turpis feugiat sit dolor</a></li>
<li class="icon fa-arrow-circle-right"><a href="#">Amet ornare in hendrerit in lectus</a></li>
<li class="icon fa-arrow-circle-right"><a href="#">Consequat etiam lorem phasellus</a></li>
<li class="icon fa-arrow-circle-right"><a href="#">Amet turpis, feugiat et sit amet</a></li>
</ul>
<a href="#" class="icon fa-arrow-right button">More</a>
</section>
<section>
<header>
<h2>Aenean metus iaculis</h2>
</header>
<a href="#" class="image featured"><img src="images/pic01.jpg" alt=""></a>
<p>Praesent semper mod quis eget. Etiam eu ante risus. Aliquam erat volutpat. Aliquam lectus sit amet pulvinar. Pellentesque viverra vulputate enim.</p>
<ul class="style2">
<li class="icon fa-arrow-circle-right"><a href="#">Semper mod quis eget mi dolore</a></li>
<li class="icon fa-arrow-circle-right"><a href="#">Quam turpis feugiat sit dolor</a></li>
<li class="icon fa-arrow-circle-right"><a href="#">Amet ornare in hendrerit in lectus</a></li>
<li class="icon fa-arrow-circle-right"><a href="#">Consequat etiam lorem phasellus</a></li>
</ul>
<a href="#" class="icon fa-arrow-right button">More</a>
</section>
</div>
<!-- Content -->
<div id="content" class="8u 12u(mobile) important(mobile)">
<article>
<header>
<h2>Left Sidebar</h2>
<span class="byline">Integer sit amet pede vel arcu aliquet pretium</span>
</header>
<a href="#" class="image full"><img src="images/pic02.jpg" alt=""></a>
<h3>Hendrerit eu mollis imperdiet nibh ac hendrerit neque sed scelerisque bitur. Ligula consequat turpis feugiat penatibus ultrices ipsum.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac purus ut ligula ultrices viverra. Donec non odio lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus posuere pulvinar cursus. Nullam id ultricies neque. Curabitur id tellus a metus consectetur. Nullam id sapien mi, iaculis imperdiet magna. Fusce lacus ipsum, rhoncus at placerat eu, condimentum eu arcu. Nullam id sapien mi, iaculis imperdiet magna. Fusce lacus ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac purus ut ligula ultrices viverra. Donec non odio lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus posuere pulvinar cursus.</p>
<h3>Feugiat auctor non consequat</h3>
<p>Nullam id sapien mi, iaculis imperdiet magna. Fusce lacus ipsum, rhoncus at placerat eu, condimentum eu arcu. Ut viverra velit dictum est tempor eget rhoncus nulla pretium. In pretium purus nec est convallis ornare non ut tellus. Donec aliquam gravida enim interdum ultricies. Duis fringilla nisl non mi laoreet placerat. Nullam id sapien mi, iaculis imperdiet magna. Fusce lacus ipsum, rhoncus at placerat eu, condimentum eu arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac purus ut ligula viverra. Donec non odio lectus. Vivamus posuere pulvinar cursus. Nam ac velit ut mauris mollis dapibus eget quis dolor. Donec porta adipiscing ultrices.</p>
</article>
</div>
</div>
<!-- Footer -->
<div id="footer">
<div class="row">
<!-- Content -->
<div class="4u 12u(mobile)">
<section>
<header>
<h2>Praesent porta accums anorcinecm ollis sapien elem</h2>
</header>
<ul class="style1">
<li>
<p><a href="#">Praesent porta accums anorci necm ollis sapien elementum nec aesent vit ae elementum ntesque...</a></p>
<div class="meta">
<span class="icon fa-clock-o date">8-21-2013</span>
<a href="#" class="more"><span>Read more</span></a>
</div>
</li>
<li>
<p><a href="#">Fusce tincidunt augue ligula, quis adipiscing orci cursus idulla mattis est vel nisi vulputate bibendum...</a></p>
<div class="meta">
<span class="icon fa-clock-o date">8-18-2013</span>
<a href="#" class="more"><span>Read more</span></a>
</div>
</li>
<li>
<p><a href="#">Quisque hendrerit nunc a est volutpat, vitae molestie lacus euismod. Nunc pharetra vulputate...</a></p>
<div class="meta">
<span class="icon fa-clock-o date">8-15-2013</span>
<a href="#" class="more"><span>Read more</span></a>
</div>
</li>
</ul>
</section>
</div>
<div class="4u 12u(mobile)">
<section>
<header>
<h2>Sed scelerisque nibh eu magna tincidunt laoreet</h2>
</header>
<a href="#" class="image featured"><img src="images/pic04.jpg" alt=""></a>
<ul class="style2">
<li class="icon fa-arrow-circle-right"><a href="#">Lorem ipsum dolor amet, consectetur adipi</a></li>
<li class="icon fa-arrow-circle-right"><a href="#">Fusce pellentesque velit ultrices place</a></li>
<li class="icon fa-arrow-circle-right"><a href="#">Maecenas condimentum enim tincidunt acc</a></li>
<li class="icon fa-arrow-circle-right"><a href="#">Vestibulum non accumsan, ultrices ligula</a></li>
</ul>
</section>
</div>
<div class="4u 12u(mobile)">
<section>
<header>
<h2>Sed scelerisque nibh eu magna tincidunt laoreet</h2>
</header>
<ul class="icons">
<li class="icon fa-wrench">
<h3>Vestibulum</h3>
<span>Lorem ipsum dolor sit amet, consectetur. Fusce pellentesque velit vestibulum</span>
</li>
<li class="icon fa-link">
<h3>Integer ultrices</h3>
<span>Phasellus consectetur justo quis turpis sodale sindsed hendrerit metus mollis</span>
</li>
<li class="icon fa-magic">
<h3>Aliquam luctus</h3>
<span>Maecenas condimentum enim tincidunt risus accumsan, pellentesque lobortis</span>
</li>
</ul>
</section>
</div>
</div>
</div>
</div>
</div>
<!-- Copyright -->
<div id="copyright">
<a href="#top" class="bubble-top scrolly">Top</a>
<div class="container">
<div class="row">
<div class="6u 12u(mobile)">
<span>Copyright © Untitled. All rights reserved.</span>
</div>
<div class="6u 12u(mobile)">
<ul class="social">
<li><a href="#" class="icon fa-twitter"><span>Twitter</span></a></li>
<li><a href="#" class="icon fa-facebook"><span></span></a></li>
<li><a href="#" class="icon fa-envelope"><span>Google+</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.dropotron.min.js"></script>
<script src="assets/js/jquery.slidertron.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/skel-viewport.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/main.js"></script>
</body>
</html>