forked from Daemonite/material
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpage-affix.html
398 lines (395 loc) · 26.6 KB
/
page-affix.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
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
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="initial-scale=1.0, width=device-width" name="viewport">
<title>Fixed Left/Right Hand Side Column - Material</title>
<!-- css -->
<link href="css/base.min.css" rel="stylesheet">
<!-- favicon -->
<!-- ... -->
<!-- ie -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js" type="text/javascript"></script>
<script src="js/respond.js" type="text/javascript"></script>
<![endif]-->
</head>
<body>
<header class="header">
<div class="clearfix pull-left">
<ul class="nav nav-list pull-left">
<li>
<a class="menu-toggle" href="#menu">
<span class="access-hide">Menu</span>
<span class="icon icon-menu"></span>
<span class="header-close icon icon-close"></span>
</a>
</li>
</ul>
<a class="header-logo" href="index.html">Material</a>
</div>
<div class="clearfix pull-right">
<ul class="nav nav-list pull-right">
<li>
<a class="menu-toggle" href="#search">
<span class="access-hide">Search</span>
<span class="icon icon-search"></span>
<span class="header-close icon icon-close"></span>
</a>
</li>
<li>
<a class="menu-toggle" href="#profile">
<span class="access-hide">John Smith</span>
<span class="avatar avatar-sm"><img alt="alt text for John Smith avatar" src="images/users/avatar-001.jpg"></span>
<span class="header-close icon icon-close"></span>
</a>
</li>
</ul>
</div>
</header>
<nav class="menu" id="menu">
<div class="menu-scroll">
<div class="menu-wrap">
<div class="menu-content">
<ul class="nav">
<li>
<a href="ui-card.html">Cards</a>
</li>
<li>
<a href="ui-collapse.html">Collapsible Regions</a>
</li>
<li>
<a href="ui-dropdown.html">Dropdowns</a>
</li>
<li>
<a href="ui-modal.html">Modals & Toasts</a>
</li>
<li>
<a href="ui-tab.html">Tabs</a>
</li>
<li>
<a href="ui-tile.html">Tiles</a>
</li>
</ul>
<hr>
<ul class="nav">
<li>
<a href="ui-button.html">Buttons</a>
</li>
<li>
<a href="ui-form.html">Form Elements</a>
<span class="menu-collapse-toggle collapsed" data-target="#form-elements" data-toggle="collapse"><i class="icon icon-close menu-collapse-toggle-close"></i><i class="icon icon-add menu-collapse-toggle-default"></i></span>
<ul class="menu-collapse collapse" id="form-elements">
<li>
<a href="ui-form-adv.html">Materialised Form Elements</a>
</li>
</ul>
</li>
<li>
<a href="ui-icon.html">Icons</a>
</li>
</ul>
<hr>
<ul class="nav">
<li class="active">
<a href="page-affix.html">Fixed LHC/RHC Page</a>
</li>
<li>
<a href="page-affix-full.html">Full-Width Page</a>
</li>
<li>
<a href="page-login.html">Login Page</a>
</li>
<li>
<a href="page-palette.html">Page Palettes</a>
<span class="menu-collapse-toggle collapsed" data-target="#page-palettes" data-toggle="collapse"><i class="icon icon-close menu-collapse-toggle-close"></i><i class="icon icon-add menu-collapse-toggle-default"></i></span>
<ul class="menu-collapse collapse" id="page-palettes">
<li>
<a href="page-palette-blue.html">Blue Palette</a>
</li>
<li>
<a href="page-palette-green.html">Green Palette</a>
</li>
<li>
<a href="page-palette-purple.html">Purple Palette</a>
</li>
<li>
<a href="page-palette-red.html">Red Palette</a>
</li>
<li>
<a href="page-palette-yellow.html">Yellow Palette</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
<nav class="menu menu-right" id="profile">
<div class="menu-scroll">
<div class="menu-wrap">
<div class="menu-top">
<div class="menu-top-img">
<img alt="John Smith" src="images/samples/landscape.jpg">
</div>
<div class="menu-top-info">
<a class="menu-top-user" href="javascript:void(0)"><span class="avatar pull-left"><img alt="alt text for John Smith avatar" src="images/users/avatar-001.jpg"></span>John Smith</a>
</div>
</div>
<div class="menu-content">
<ul class="nav">
<li>
<a href="javascript:void(0)"><span class="icon icon-account-box"></span>Profile Settings</a>
</li>
<li>
<a href="javascript:void(0)"><span class="icon icon-add-to-photos"></span>Upload Photo</a>
</li>
<li>
<a href="page-login.html"><span class="icon icon-exit-to-app"></span>Logout</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="menu menu-right menu-search" id="search">
<div class="menu-scroll">
<div class="menu-wrap">
<div class="menu-top">
<div class="menu-top-info">
<form class="menu-top-form">
<label class="access-hide" for="menu-search">Search</label>
<input class="form-control form-control-inverse menu-search-focus" id="menu-search" placeholder="Search" type="search">
<button class="access-hide" type="submit">Search</button>
</form>
</div>
</div>
<div class="menu-content">
<div class="menu-content-inner">
<p><strong>Saved Search Queries:</strong></p>
<ul>
<li><a href="javascript:void(0)">lorem ipsum dolor sit amet</a></li>
<li><a href="javascript:void(0)">consectetur adipiscing elit</a></li>
<li><a href="javascript:void(0)">sed ornare orci lorem</a></li>
<li><a href="javascript:void(0)">vel eleifend elit tempor eleifend</a></li>
<li><a href="javascript:void(0)">morbi feugiat aliquet justo</a></li>
</ul>
<hr>
<p><strong>Popular Search Queries:</strong></p>
<ul>
<li><a href="javascript:void(0)">id ullamcorper tortor lobortis eu</a></li>
<li><a href="javascript:void(0)">aliquam ut tellus arcu</a></li>
<li><a href="javascript:void(0)">cestibulum tortor purus</a></li>
<li><a href="javascript:void(0)">pretium ac dolor id</a></li>
<li><a href="javascript:void(0)">gravida molestie libero</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="content">
<div class="content-heading">
<div class="container">
<h1 class="heading">Fixed Left/Right Hand Side Column</h1>
</div>
</div>
<div class="content-inner">
<div class="container">
<div class="row row-fix">
<div class="col-md-3 content-fix">
<div class="content-fix-scroll">
<div class="content-fix-wrap">
<div class="content-fix-inner">
<h2 class="content-sub-heading">LHC</h2>
<ul>
<li>Fusce accumsan nisl quis sodales scelerisque.</li>
<li>Integer ultrices lectus a semper faucibus.</li>
<li>Maecenas ultrices nulla pharetra, pharetra metus vitae, laoreet eros.</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-6 content-fix">
<div class="content-fix-scroll">
<div class="content-fix-wrap">
<div class="content-fix-inner">
<h2 class="content-sub-heading">Main Content</h2>
<p>Pellentesque sed gravida mi. Nam mollis sem ac mollis posuere. Curabitur viverra ultrices velit, vel feugiat dolor ullamcorper at. In nec pulvinar felis, ac faucibus purus. Quisque vehicula tincidunt suscipit. Aenean tincidunt ultricies sapien vel sagittis. Sed risus neque, tristique vel lorem dignissim, rhoncus ultricies arcu. Morbi fringilla massa ipsum. Mauris vel tellus dapibus, lacinia ipsum sit amet, pharetra ipsum. In hac habitasse platea dictumst. Ut eget fringilla nulla. Proin non rutrum ipsum. Ut eu dapibus sem. Aenean eget metus semper, ultrices libero vitae, luctus nibh. Nam ultricies interdum feugiat. Vivamus non nisi vitae neque facilisis consectetur.</p>
<p>Mauris congue commodo erat, sed tempus sapien facilisis in. Phasellus maximus nunc purus, et pulvinar ex volutpat quis. Maecenas velit tortor, elementum in placerat ut, feugiat id lectus. Donec vel erat sit amet justo porta lobortis nec a ligula. Curabitur ornare cursus est, non mollis elit molestie non. Nam id sapien fermentum enim vehicula mollis eget id elit. Fusce rutrum lobortis suscipit. Mauris consectetur sagittis lorem. Vestibulum pellentesque ultricies quam. In vehicula arcu et sodales eleifend. Aliquam erat volutpat. Praesent vitae vulputate felis. Aenean interdum nulla quis ipsum convallis, scelerisque cursus leo iaculis. Phasellus in ex ac velit vehicula tempus. Nunc feugiat facilisis consectetur.</p>
<p>In nec odio orci. Morbi dictum, nunc vitae congue condimentum, tortor nibh tincidunt nibh, in bibendum felis dui eget orci. Maecenas at leo lorem. Nam eu ligula vel ante ornare dictum et et tellus. Phasellus fringilla felis in libero rutrum vehicula. Donec orci velit, interdum vitae mi ut, imperdiet tincidunt ipsum. Praesent quis placerat turpis. Sed et bibendum turpis. Maecenas consectetur orci vitae dignissim laoreet. Morbi lacinia rutrum ipsum condimentum viverra. Duis nec felis quis purus efficitur dignissim. Nullam porta, tortor vitae consequat luctus, felis tortor tristique leo, vel tincidunt quam turpis a tortor. Nullam pretium risus maximus augue dignissim luctus. Maecenas fermentum accumsan feugiat.</p>
<p>Phasellus pulvinar urna in tortor eleifend, vel vehicula urna pulvinar. Integer rhoncus ex eu tellus aliquam posuere. Integer quis sapien scelerisque, ornare arcu pulvinar, luctus est. Morbi vel leo faucibus lacus egestas congue. Donec vitae suscipit est. Donec nec lacus sed nisl rutrum tempor eget et leo. Donec quis elit tincidunt, ultricies ante et, condimentum augue. Sed sit amet imperdiet sapien. Sed purus risus, euismod ac est posuere, aliquet efficitur arcu. Quisque finibus consectetur mi eget dictum. Morbi rutrum elit ultricies magna tempor rhoncus. Nunc sollicitudin, augue et ultrices bibendum, quam sem ultricies elit, eget tincidunt ex augue a arcu. Vestibulum in urna sodales, viverra est at, fermentum libero. Donec non gravida metus. Fusce auctor varius tristique.</p>
<p>Praesent at ex quis arcu finibus condimentum id quis lorem. Etiam suscipit nibh eget hendrerit laoreet. Aliquam accumsan sagittis augue ut efficitur. Duis eu pulvinar nisl. Fusce commodo leo sit amet ante faucibus porttitor. Pellentesque blandit, erat sit amet condimentum volutpat, justo massa euismod augue, eget ultricies ex felis sed odio. Aliquam blandit, ante sit amet ultricies euismod, metus leo mattis est, eu volutpat est nunc eu lorem. Sed lacus mi, vulputate et leo sed, lobortis porta est. Sed pharetra id massa a luctus. Curabitur enim magna, imperdiet in mauris luctus, mattis bibendum dui. Nulla massa neque, vehicula ac nisi vitae, luctus egestas ipsum. Vivamus sagittis leo nec tellus tempus convallis. Phasellus et orci euismod, egestas neque eu, suscipit nunc.</p>
<p>Aenean sagittis odio vitae gravida cursus. Donec libero enim, pharetra sed pretium vel, imperdiet suscipit leo. Curabitur non augue enim. Aliquam erat volutpat. Mauris mollis sapien elit, vitae imperdiet arcu ultrices eget. In et magna eget nisi pretium viverra. Nam lobortis gravida risus, non pulvinar lacus pulvinar vel.</p>
<p>Duis sed lobortis sapien. Mauris vitae purus a nibh auctor rhoncus. Vestibulum sed orci condimentum, mollis lacus ut, sagittis erat. Nulla bibendum tellus ut rutrum vestibulum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ut libero cursus, blandit sapien in, faucibus nunc. Duis sem sem, imperdiet vitae gravida ornare, rhoncus eget risus. Phasellus pharetra vel arcu nec elementum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut pharetra sollicitudin orci, ac tincidunt nisl mattis quis. Vestibulum elementum id erat ac elementum. Aliquam non volutpat diam.</p>
<p>Aenean commodo eleifend metus in condimentum. Duis imperdiet quam vel nunc egestas, non sodales augue facilisis. Duis tincidunt vel nulla et posuere. Integer viverra laoreet mi ac placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in tortor eu magna molestie facilisis ut vel libero. Ut sit amet rutrum turpis. Mauris suscipit eros sem, in gravida dui accumsan et. Aliquam imperdiet tellus condimentum odio viverra malesuada. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum porttitor non enim in rhoncus. Vivamus elementum convallis tempus. Sed ultricies mattis mi ut pellentesque. Duis pellentesque, neque scelerisque imperdiet aliquet, leo mauris dignissim felis, et vehicula sapien ante ac quam. Aenean accumsan libero eros, at fringilla massa suscipit vel. Nullam condimentum ante sit amet posuere condimentum.</p>
<p>Nunc sed nunc nec dolor cursus pretium. Nulla malesuada efficitur est, eu convallis quam mattis a. Donec vel varius lectus, sed placerat augue. Nunc tristique, elit sit amet tempor interdum, nisi augue lacinia massa, ut venenatis arcu nisl sit amet elit. Praesent laoreet lacus lectus, sed sagittis diam porttitor ut. Sed metus diam, suscipit a tortor finibus, feugiat elementum sem. Nulla sed ornare lectus. Nam id mollis turpis, at consectetur lectus. Nunc in massa sit amet neque dictum egestas sit amet nec elit. Suspendisse semper tincidunt sapien, non gravida sapien tempor nec. Vivamus venenatis purus et ante efficitur laoreet. Suspendisse tempus velit a magna sagittis scelerisque et vitae diam. Donec cursus egestas nisl at pharetra. Donec a justo quis lectus venenatis accumsan sed et lacus. Nunc imperdiet aliquet lacus, ac ornare nisl gravida a.</p>
<p>Cras semper lorem mauris, sed pretium massa eleifend id. Ut dolor quam, rhoncus quis velit quis, facilisis gravida eros. Donec non vehicula mauris, et scelerisque arcu. Suspendisse mollis risus eget arcu congue, dignissim molestie neque ullamcorper. Proin at bibendum risus. Integer laoreet dictum nunc eu porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec augue mauris, euismod eu nulla eu, elementum consequat arcu. Vivamus diam eros, lobortis ut metus at, ullamcorper porta nisl. Morbi ac nibh pretium, facilisis metus vitae, maximus arcu. Praesent vulputate convallis ante, non consequat purus suscipit quis. Maecenas molestie orci pulvinar enim faucibus, eget suscipit dui mattis.</p>
<p>Maecenas scelerisque erat magna, nec euismod tortor imperdiet eget. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent dignissim a lorem id blandit. Phasellus a tincidunt nulla. Suspendisse molestie, elit nec venenatis venenatis, urna lorem dictum ex, non viverra ipsum diam non risus. Praesent et mauris vehicula, eleifend mi et, hendrerit nulla. Integer in mi nec arcu semper consequat. Donec eu enim cursus, vestibulum arcu sed, tristique turpis. Donec rutrum turpis in sem sodales, at lacinia tellus luctus. Aliquam pretium euismod magna.</p>
<p>Phasellus at congue quam. Donec id ex consequat, posuere odio commodo, aliquet ante. Curabitur odio tortor, ornare eu purus quis, sollicitudin accumsan magna. Donec quis nisi vestibulum nisi vestibulum porttitor. In congue dui non justo hendrerit, id bibendum ligula semper. Aenean vestibulum vulputate dui, lobortis luctus risus ultricies ut. In vel odio convallis, dapibus metus vitae, ultrices velit. Integer iaculis, velit a molestie sagittis, risus sem tincidunt metus, nec placerat purus nunc quis nisl. Morbi id rhoncus tortor. Nullam lacinia ante non ipsum consectetur, at volutpat felis condimentum. Quisque tempor nisl imperdiet sagittis venenatis.</p>
<p>Suspendisse eget arcu vitae metus sagittis dapibus. Phasellus quis tortor magna. Mauris non nulla tortor. Ut ut condimentum est, vitae commodo diam. Aenean porta rhoncus orci, ornare pulvinar lectus gravida et. Cras consequat risus sit amet ligula congue, vel scelerisque sem rutrum. Donec pharetra sapien vitae mauris vulputate, non porttitor est consequat. Quisque nec rutrum dolor. Fusce placerat, enim id faucibus dapibus, arcu mauris ullamcorper dolor, tempor elementum velit dui vel elit. Sed fermentum porta vestibulum. Nulla molestie, justo ac lacinia viverra, turpis turpis pharetra nunc, vitae dignissim ligula purus eu sem. Ut vitae eros nisl. Nulla risus leo, aliquet quis auctor ut, interdum ac ante.</p>
<p>Aenean semper massa sed ex laoreet, ut pretium ex dignissim. Maecenas quis lectus rutrum, egestas quam porttitor, tincidunt erat. In hac habitasse platea dictumst. Fusce pulvinar mauris ut lectus fermentum scelerisque. Sed nisl ex, accumsan vel dapibus sed, posuere dictum tortor. Suspendisse condimentum neque eu quam dignissim, non molestie enim vestibulum. Aenean dictum molestie dolor, eget tincidunt lectus blandit id. Proin nisl erat, facilisis eu ligula sodales, euismod congue urna. Aliquam odio tortor, fermentum sed nulla vitae, congue aliquet justo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer nunc eros, egestas quis luctus vitae, iaculis ac libero. Donec non urna et erat pharetra semper ac sit amet orci. Sed finibus commodo purus, a pellentesque mauris varius id. Vestibulum convallis, diam non commodo dictum, elit erat ullamcorper risus, a venenatis nulla leo id lectus. Quisque finibus lorem sit amet ipsum rutrum, rutrum tincidunt lacus laoreet.</p>
<p>Fusce vestibulum magna eu egestas congue. Fusce eu pretium turpis. Nulla sit amet aliquam eros, id molestie ligula. Duis consectetur turpis at nibh tristique, a ornare nisi scelerisque. Suspendisse massa tortor, posuere ac congue in, aliquam in lorem. Curabitur cursus, nulla vitae ultricies tincidunt, nisi felis porta nulla, at scelerisque quam metus eget tortor. Morbi erat magna, venenatis vitae mauris sit amet, hendrerit tempus enim. Suspendisse potenti. Vivamus sed urna aliquet, eleifend velit et, faucibus ligula. Maecenas feugiat elementum nulla sed ullamcorper. Aliquam metus neque, vulputate id ante nec, finibus pharetra felis.</p>
<p>Duis vel volutpat metus. Nunc dapibus pharetra ante, in efficitur leo consectetur id. Etiam eu lectus ut felis dictum lobortis eget ut lorem. Pellentesque volutpat nibh et nisl pellentesque, non convallis urna euismod. Suspendisse id condimentum arcu. Ut finibus quam et nibh rutrum mattis id ac magna. Etiam ac laoreet justo. Ut mollis vulputate ante placerat facilisis. Phasellus molestie porttitor vulputate. Integer pulvinar nulla id tellus iaculis facilisis. Morbi et augue mi. Nullam ac ipsum dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris lobortis purus nec nisl pellentesque ullamcorper ac in diam. Sed non facilisis nunc. Integer egestas viverra tortor sed eleifend.</p>
<p>Quisque quis nulla pulvinar, sagittis lectus in, congue purus. Suspendisse interdum lacinia suscipit. Vestibulum quis ex eu leo imperdiet porttitor. Vestibulum lobortis sagittis sapien, non suscipit nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam non nunc ligula. Nam vitae faucibus odio. Proin varius ipsum egestas, malesuada odio in, bibendum purus. Cras tincidunt porttitor ligula, sed ullamcorper nisl finibus in. Sed lobortis lectus eu ligula blandit, sit amet laoreet orci elementum. Sed ut ultricies sem. Maecenas metus libero, aliquam vitae mi luctus, pulvinar ultrices nisl. Donec condimentum varius odio, ut pretium arcu ultricies eget.</p>
<p>Nullam egestas pharetra odio, ac egestas ex porttitor id. Vivamus tellus ipsum, vehicula non accumsan ac, iaculis tristique arcu. Nunc ullamcorper blandit massa eget vehicula. Cras enim orci, volutpat eget ante quis, dapibus elementum purus. Suspendisse vel risus quis nisl porttitor ultricies vel sed nisi. Donec sed erat a erat gravida lacinia. Sed ornare, velit a congue pharetra, nunc libero ornare lorem, ac accumsan sem mi ut est. Phasellus et imperdiet lacus, in ornare lacus.</p>
<p>Pellentesque id erat ut nulla malesuada maximus sed ac nibh. Aenean maximus turpis vel eros placerat, id bibendum elit scelerisque. Phasellus nunc erat, fermentum eget dolor sed, tempus ultricies libero. Nunc efficitur pharetra dui nec pellentesque. Pellentesque laoreet rutrum eros et tincidunt. Nulla ac mi sit amet erat convallis viverra eget ac purus. Aliquam nunc nisi, varius at arcu eget, euismod lobortis odio. Morbi eleifend sapien velit, quis tincidunt enim ultricies dapibus. Duis at egestas turpis. Pellentesque imperdiet sem felis, at rhoncus libero iaculis vitae. Vivamus quam nibh, euismod id mattis vel, tristique vitae odio. Pellentesque non ullamcorper velit. Duis quis neque tortor.</p>
<p>Duis eros ipsum, dictum non turpis quis, aliquam auctor leo. Nulla vitae volutpat neque, vitae lobortis ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras finibus metus id tortor interdum, ac ultrices est pharetra. Nulla scelerisque auctor vestibulum. Aliquam erat volutpat. Phasellus sed consequat tellus. Integer ac eros nec enim lacinia faucibus id quis ipsum. In varius congue porta. Maecenas eu metus vulputate, lacinia erat eu, consectetur arcu. Aliquam sed luctus dui. Etiam id est suscipit, facilisis augue id, aliquet purus.</p>
<p>Sed tortor lectus, tincidunt quis fermentum et, pellentesque rhoncus eros. Quisque at diam eu dui ultricies cursus id eu lacus. Maecenas nulla augue, sollicitudin eu vulputate ut, lacinia sit amet orci. Pellentesque at elit nulla. Nulla vel volutpat nibh. Praesent convallis placerat massa vitae rhoncus. Morbi arcu ante, egestas blandit diam vitae, tempor viverra risus. Maecenas non vehicula libero. Proin vitae mollis erat. Duis finibus felis sit amet ligula vehicula, a placerat nisi lacinia.</p>
<p>Curabitur et porta ligula. Donec vehicula arcu a volutpat consectetur. Aliquam in leo vitae lorem vulputate tempus. Aliquam erat volutpat. Cras ipsum arcu, malesuada non est non, laoreet maximus eros. Sed vel convallis augue. Sed tristique laoreet nisl, et bibendum nibh auctor congue. Duis malesuada libero neque, at dignissim enim posuere sed. Proin in erat eros.</p>
</div>
</div>
</div>
</div>
<div class="col-md-3 content-fix">
<div class="content-fix-scroll">
<div class="content-fix-wrap">
<div class="content-fix-inner">
<h2 class="content-sub-heading">RHC</h2>
<div class="tile-wrap">
<div class="tile">
<div class="pull-left tile-side">
<span class="icon icon-chevron-right"></span>
</div>
<div class="tile-inner">
<span>lorem</span>
</div>
</div>
<div class="tile">
<div class="pull-left tile-side">
<span class="icon icon-chevron-right"></span>
</div>
<div class="tile-inner">
<span>consectetur</span>
</div>
</div>
<div class="tile">
<div class="pull-left tile-side">
<span class="icon icon-chevron-right"></span>
</div>
<div class="tile-inner">
<span>sed</span>
</div>
</div>
<div class="tile">
<div class="pull-left tile-side">
<span class="icon icon-chevron-right"></span>
</div>
<div class="tile-inner">
<span>lorem</span>
</div>
</div>
<div class="tile">
<div class="pull-left tile-side">
<span class="icon icon-chevron-right"></span>
</div>
<div class="tile-inner">
<span>consectetur</span>
</div>
</div>
<div class="tile">
<div class="pull-left tile-side">
<span class="icon icon-chevron-right"></span>
</div>
<div class="tile-inner">
<span>sed</span>
</div>
</div>
<div class="tile">
<div class="pull-left tile-side">
<span class="icon icon-chevron-right"></span>
</div>
<div class="tile-inner">
<span>lorem</span>
</div>
</div>
<div class="tile">
<div class="pull-left tile-side">
<span class="icon icon-chevron-right"></span>
</div>
<div class="tile-inner">
<span>consectetur</span>
</div>
</div>
<div class="tile">
<div class="pull-left tile-side">
<span class="icon icon-chevron-right"></span>
</div>
<div class="tile-inner">
<span>sed</span>
</div>
</div>
<div class="tile">
<div class="pull-left tile-side">
<span class="icon icon-chevron-right"></span>
</div>
<div class="tile-inner">
<span>lorem</span>
</div>
</div>
<div class="tile">
<div class="pull-left tile-side">
<span class="icon icon-chevron-right"></span>
</div>
<div class="tile-inner">
<span>consectetur</span>
</div>
</div>
<div class="tile">
<div class="pull-left tile-side">
<span class="icon icon-chevron-right"></span>
</div>
<div class="tile-inner">
<span>sed</span>
</div>
</div>
<div class="tile">
<div class="pull-left tile-side">
<span class="icon icon-chevron-right"></span>
</div>
<div class="tile-inner">
<span>lorem</span>
</div>
</div>
<div class="tile">
<div class="pull-left tile-side">
<span class="icon icon-chevron-right"></span>
</div>
<div class="tile-inner">
<span>consectetur</span>
</div>
</div>
<div class="tile">
<div class="pull-left tile-side">
<span class="icon icon-chevron-right"></span>
</div>
<div class="tile-inner">
<span>sed</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<p>Material</p>
</div>
</footer>
<div class="fbtn-container">
<div class="fbtn-inner">
<a class="fbtn fbtn-red" href="https://github.com/Daemonite/material"><span class="fbtn-text">Fork me on GitHub</span><span class="fa fa-github"></span></a>
</div>
</div>
<script src="js/vendor.js" type="text/javascript"></script>
<script src="js/base.js" type="text/javascript"></script>
</body>
</html>