-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
106 lines (87 loc) · 5.31 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
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<title>Nulla ac orci dui.</title>
</head>
<body>
<div id="sidebar">
<nav>
<ul>
<li><a href="#paragraphsection">Unus</a></li>
<li><a href="#imagesection">Duos</a></li>
<li><a href="#tablesection">Tres</a></li>
<li><a href="#listsection">Quattuor</a></li>
</ul>
</nav>
</div>
<div id="content">
<header>
<h1>Nullam id mi eu nunc congue maximus in sit amet arcu.</h1>
</header>
<section class= "boxes" id="paragraphsection">
<h2>Suspendisse facilisis lorem eu massa facilisis finibus. </h2>
<p>Suspendisse venenatis, diam in pretium consectetur, sem ante bibendum mauris, in rhoncus neque tellus mattis nulla. Aenean sed nibh lacus. Quisque quis lectus ligula. Praesent vitae interdum sapien. Duis scelerisque molestie erat id hendrerit. In bibendum rhoncus mi, vitae egestas libero eleifend sed. Donec eleifend malesuada nisl id elementum.</p>
<p>Aenean porttitor porta nisl vel finibus. Ut semper neque eleifend ipsum commodo vestibulum. Sed consectetur odio ac auctor malesuada. Nulla elementum nisi at lacus feugiat, et auctor enim tempor. Curabitur pellentesque malesuada ligula et vulputate. Donec pellentesque dictum scelerisque. Nunc id lorem porta, sagittis est eget, pellentesque ligula. Mauris at ligula aliquet, lacinia metus nec, posuere ipsum. Sed eu pellentesque odio. </p>
<p>Pellentesque volutpat accumsan magna tempor cursus. Maecenas at augue magna. Ut sed sapien sit amet tortor facilisis facilisis eget nec ipsum. Nulla tellus erat, sollicitudin sed leo cursus, faucibus ornare tortor. Proin auctor varius orci rutrum scelerisque. Cras convallis at dui ac posuere. Ut at condimentum ipsum, eu blandit libero.</p>
</section>
<section class= "boxes" id="imagesection">
<img src="images/small-flower-1.jpg" alt="Pink wild flowers.">
<img src="images/small-flower-2.jpg" alt="Purple wild flowers.">
<img src="images/small-flower-3.jpg" alt="Wild flowers and bee.">
<p id="quote">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices pharetra urna vel ultricies. Vivamus porttitor tortor sed aliquam pharetra."<br/><span id="cicero">Cicero</span></p>
</section>
<section class= "boxes" id="tablesection">
<h2>Aliquam erat volutpat. </h2>
<h3>Aenean eu tellus lectus. </h3>
<p>Etiam erat quam, molestie et massa ac, lacinia porttitor massa. Maecenas id ornare magna. Phasellus aliquet ullamcorper dui vel mollis. Nullam neque eros, euismod eu imperdiet tincidunt, ullamcorper ut mauris. Curabitur vitae pretium risus. Donec quis diam eu neque sodales pharetra eget in ligula. Nunc sagittis urna vitae pharetra ultrices. In varius ligula nec posuere placerat. </p>
<h3>Vestibulum eu condimentum lorem, nec fermentum ante.</h3>
<table>
<caption>Systema I.:Condimentum dapibus blandit</caption>
<tr>
<th rowspan="2"> <div class="vertical-text">Cras faucibus <br/>rhoncus eros eget ultrices.</div></th>
<td>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </td>
<td>Sed ut ex quis eros imperdiet efficitur in nec leo. </td>
<td>Cras volutpat luctus imperdiet. </td>
<td>Aliquam quis ullamcorper elit. </td>
<td>Etiam vel eleifend quam. </td>
</tr>
<tr>
<td>Vestibulum tincidunt posuere condimentum. </td>
<td>Sed metus enim, accumsan bibendum facilisis eu, porttitor a nulla. </td>
<td>Nulla in feugiat quam, eu faucibus purus. </td>
<td>Donec finibus mollis lacus, sed sollicitudin odio iaculis vel. </td>
<td>Sed risus tellus, mollis eu dignissim non, feugiat posuere augue.</td>
</tr>
</table>
</section>
<div id= "end-of-page">
<section class= "boxes" id="listsection">
<h2>Maecenas elementum erat in velit blandit varius.</h2>
<ol>
<li>Fusce vehicula pretium enim sit amet hendrerit.</li>
<li>Integer auctor interdum lectus id interdum.</li>
<li>Pellentesque ipsum massa, lobortis et tincidunt in, fermentum eu mauris. </li>
<li>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </li>
<li>
<ul>
<li>Suspendisse mattis non neque et sagittis.</li>
<li>Donec nunc ligula, interdum sit amet tempor eu, porttitor eget leo.</li>
</ul>
</li>
<li>Suspendisse aliquam vel diam sit amet tristique. </li>
<li>Curabitur nisi tortor, gravida ac scelerisque malesuada, consectetur ut massa.</li>
<li>Quisque id facilisis est, at suscipit ipsum.</li>
<li>In at erat in lectus sollicitudin ultricies.</li>
<li>In interdum, lorem mattis hendrerit pellentesque, magna odio mollis est, nec bibendum arcu mi eget ipsum.</li>
</ol>
</section>
<footer>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ut nisi quis felis ornare scelerisque. Praesent eros elit, sollicitudin nec ultricies sed, ullamcorper sed lorem.</p>
<hr id="horizontal-line"/>
<p>Copyright 2016 by Raissa North.</p>
</footer>
</div>
</div>
</body>
</html>