-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
72 lines (54 loc) · 6.55 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
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Pagination With CSS Columns</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 id="title">Pagination Demo</h1>
<div id="container">
<div id="content">
<h1>This is some header text</h1>
<p style="text-align: justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tellus sapien, ornare vitae elementum vel, pretium eu ante. Duis sodales fermentum tempus. Donec risus augue, fermentum et dapibus ut, blandit sed justo. Etiam magna neque, placerat at blandit tincidunt, gravida consectetur odio. Integer dui lorem, posuere a dignissim quis, sagittis a enim. Proin aliquet massa a tortor bibendum tempor. Nunc bibendum, diam eu aliquet consequat, felis quam adipiscing elit, a tincidunt nisl mauris vel turpis. Proin ultricies lorem gravida diam dignissim interdum. Morbi laoreet dolor quis tortor sagittis et volutpat tortor semper. Sed vitae ipsum dui, quis congue arcu. Sed mi enim, sollicitudin eget accumsan eu, vehicula a lectus. Fusce mollis molestie ipsum non dignissim.
</p>
<h3>This is a floating image</h3>
<img src="http://alltheragefaces.com/img/faces/png/happy-thumbs-up.png" style="float: right"/>
<p>
Curabitur suscipit consectetur convallis. Maecenas sit amet tempus nisl. Vestibulum ornare malesuada tortor vel dapibus. Phasellus vulputate, odio eu ullamcorper tempus, massa urna lobortis eros, vel rhoncus dolor quam sit amet ligula. Duis eu erat porttitor erat ullamcorper euismod. Cras rutrum, diam quis iaculis vestibulum, erat orci condimentum odio, non lobortis magna nulla sit amet libero. Sed accumsan, justo id mattis egestas, justo purus posuere diam, sit amet molestie nulla nulla eu enim. Praesent porttitor, mi facilisis euismod aliquet, dolor nisl bibendum nisi, quis faucibus ante lectus sit amet lacus.
</p>
<p>
Curabitur euismod dignissim arcu ac dapibus. Duis vitae enim urna, non luctus lacus. Sed dignissim, ante eu tincidunt sagittis, est magna cursus enim, eu faucibus est purus quis lectus. Curabitur vehicula mattis nibh nec sodales. Proin in felis sed ligula malesuada sollicitudin. Vivamus nec orci turpis, id rutrum velit. Vestibulum eros nibh, imperdiet vitae eleifend quis, cursus nec nisi. Fusce rutrum viverra augue, eget pulvinar nibh hendrerit non. Nulla ultrices lorem in ligula fringilla accumsan. Vestibulum ac metus lacus.
</p>
<p>
Cras sollicitudin, sapien in aliquet lacinia, nunc nibh tempus sem, non ultricies nisl est semper eros. Donec pellentesque, dui quis consequat eleifend, tellus ligula fringilla eros, quis ultrices diam nulla et sem. Ut malesuada sagittis lacus, at ultrices dolor sagittis et. Pellentesque iaculis lorem non sem pretium porta. Donec condimentum ligula eget nibh facilisis accumsan. Sed et nibh eu urna molestie elementum. Suspendisse tempor gravida erat, sed feugiat tortor commodo molestie. Ut mollis arcu mi, at fringilla quam. Suspendisse tempus pretium laoreet. Praesent at nulla erat.
</p>
<p style="text-align: center">
Etiam sed felis felis, in commodo est. Nam lacinia scelerisque urna a rutrum. Ut dignissim consectetur orci sed cursus. Praesent ut neque quis purus egestas commodo. In non odio elit. In pharetra pellentesque facilisis. Duis faucibus turpis ac purus elementum at dictum erat ultrices. Etiam lectus ante, sollicitudin in porttitor a, viverra a nibh. Nunc sit amet purus ac nibh vestibulum cursus. Proin malesuada augue eget felis fringilla non auctor nulla convallis. Phasellus gravida sollicitudin vehicula. Nulla suscipit felis eget sapien adipiscing accumsan. Sed leo nisi, tempor nec scelerisque in, cursus ut dui. Duis quis nisi ac dolor fringilla venenatis. Nullam accumsan dictum adipiscing. Donec tincidunt commodo imperdiet.
</p>
<p>
Curabitur suscipit consectetur convallis. Maecenas sit amet tempus nisl. Vestibulum ornare malesuada tortor vel dapibus. Phasellus vulputate, odio eu ullamcorper tempus, massa urna lobortis eros, vel rhoncus dolor quam sit amet ligula. Duis eu erat porttitor erat ullamcorper euismod. Cras rutrum, diam quis iaculis vestibulum, erat orci condimentum odio, non lobortis magna nulla sit amet libero. Sed accumsan, justo id mattis egestas, justo purus posuere diam, sit amet molestie nulla nulla eu enim. Praesent porttitor, mi facilisis euismod aliquet, dolor nisl bibendum nisi, quis faucibus ante lectus sit amet lacus.
</p>
<p>
Curabitur euismod dignissim arcu ac dapibus. Duis vitae enim urna, non luctus lacus. Sed dignissim, ante eu tincidunt sagittis, est magna cursus enim, eu faucibus est purus quis lectus. Curabitur vehicula mattis nibh nec sodales. Proin in felis sed ligula malesuada sollicitudin. Vivamus nec orci turpis, id rutrum velit. Vestibulum eros nibh, imperdiet vitae eleifend quis, cursus nec nisi. Fusce rutrum viverra augue, eget pulvinar nibh hendrerit non. Nulla ultrices lorem in ligula fringilla accumsan. Vestibulum ac metus lacus.
</p>
<p>
Cras sollicitudin, sapien in aliquet lacinia, nunc nibh tempus sem, non ultricies nisl est semper eros. Donec pellentesque, dui quis consequat eleifend, tellus ligula fringilla eros, quis ultrices diam nulla et sem. Ut malesuada sagittis lacus, at ultrices dolor sagittis et. Pellentesque iaculis lorem non sem pretium porta. Donec condimentum ligula eget nibh facilisis accumsan. Sed et nibh eu urna molestie elementum. Suspendisse tempor gravida erat, sed feugiat tortor commodo molestie. Ut mollis arcu mi, at fringilla quam. Suspendisse tempus pretium laoreet. Praesent at nulla erat.
</p>
<p style="text-align: center">
Etiam sed felis felis, in commodo est. Nam lacinia scelerisque urna a rutrum. Ut dignissim consectetur orci sed cursus. Praesent ut neque quis purus egestas commodo. In non odio elit. In pharetra pellentesque facilisis. Duis faucibus turpis ac purus elementum at dictum erat ultrices. Etiam lectus ante, sollicitudin in porttitor a, viverra a nibh. Nunc sit amet purus ac nibh vestibulum cursus. Proin malesuada augue eget felis fringilla non auctor nulla convallis. Phasellus gravida sollicitudin vehicula. Nulla suscipit felis eget sapien adipiscing accumsan. Sed leo nisi, tempor nec scelerisque in, cursus ut dui. Duis quis nisi ac dolor fringilla venenatis. Nullam accumsan dictum adipiscing. Donec tincidunt commodo imperdiet.
</p>
</div>
</div>
<div id="button-wrap">
<button id="prev">prev</button>
<button id="two-up">toggle two-up</button>
<button id="next">next</button>
</div>
<script src="jquery.js"></script>
<script src="script.js"></script>
</body>
</html>