-
Notifications
You must be signed in to change notification settings - Fork 0
/
HTMLSemantic.html
104 lines (96 loc) · 5.59 KB
/
HTMLSemantic.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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Semantic</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav id="top-menu">
<ul>
<li class="menu-element" id="logo">
<a href="#">
<img alt="Codility" src="images/logo.png" />
</a>
</li>
<li class="menu-element">
<a href="#">About us</a>
</li>
<li class="menu-element">
<a href="#">References</a>
</li>
<li class="menu-element">
<a href="#">Contact</a>
</li>
</ul>
</nav>
<main id="content-container">
<aside id="sidepanel">
<h2 class="sidepanel-title">Integer a placerat arcu.</h2>
<p class="sidepanel-content">
Aenean elementum posuere feugiat. Nulla faucibus pharetra commodo. Integer eu nisi quis diam ullamcorper
gravida quis vel augue. Ut urna dui, venenatis vel dictum sit amet, lacinia ut massa. Nullam nec magna
nisi. Donec sagittis sem ligula, blandit fringilla arcu dictum vitae. Nam eget fermentum leo. Proin
fermentum nibh sit amet quam ultricies hendrerit. Integer sed neque tincidunt, volutpat sapien vel,
pellentesque augue. Nullam quis velit eget leo molestie lobortis et eu magna. Fusce leo augue, blandit
sed purus vitae, tincidunt consectetur velit. Ut at nibh augue. Nunc viverra laoreet interdum. Nunc
mattis libero et diam dictum viverra. Nulla id odio mi. Sed eu ante non nisl aliquet interdum at ut
enim.
</p>
<p class="sidepanel-content">
Curabitur eleifend elementum tincidunt. Phasellus sit amet elit a massa sodales condimentum. Proin in
lorem eu est ornare volutpat. Donec nec turpis in eros pretium maximus. Curabitur pellentesque rutrum
vehicula. Etiam eu ultrices lorem, ac scelerisque lacus. Vivamus vestibulum mi eget nunc tincidunt
mattis. Nam feugiat at diam sed facilisis. Quisque bibendum, ante quis scelerisque pharetra, diam sem
aliquam diam, a hendrerit dui orci eu ante. Vestibulum volutpat augue sit amet bibendum commodo.
Pellentesque convallis tincidunt dapibus. Sed imperdiet tincidunt tortor vitae congue.
</p>
<p class="sidepanel-content">
Praesent eleifend massa velit, ut aliquet purus pretium quis. Vivamus euismod, arcu a varius euismod,
arcu urna lacinia nibh, quis eleifend lacus nibh a ligula. In efficitur et nisl in tristique. Vestibulum
rutrum finibus vulputate. Integer pharetra congue tortor ut luctus. Vivamus tempor, massa eu convallis
rhoncus, orci dolor porta velit, vel viverra tellus sapien id erat. Vivamus accumsan blandit neque, in
viverra lorem pharetra in. Quisque nec arcu euismod, mollis augue sed, porttitor dui. Proin sed iaculis
odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam bibendum felis sit amet erat
ornare fringilla.
</p>
</aside>
<article id="content">
<header id="main-block">
<h1 id="main-title">Duis varius venenatis nulla et.</h1>
<p id="main-description">
Pellentesque nec dolor gravida, porta metus et, dignissim tellus. Vivamus facilisis erat eget
condimentum volutpat.
</p>
</header>
<section class="site-block">
<h2 class="subtitle">Aenean feugiat tellus vitae finibus laoreet.</h2>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ultrices laoreet nisi, vitae commodo
erat malesuada quis. Etiam vitae libero euismod, commodo massa in, luctus nisi. Pellentesque aliquam
leo mi, pulvinar porttitor orci auctor vitae. Quisque sagittis, velit ac consequat sollicitudin,
enim est varius ligula, sed vulputate odio libero sit amet nunc. Nunc urna mauris, porttitor a
vestibulum ac, fringilla aliquam dui. Sed fringilla venenatis erat quis consectetur. Nam id sapien
et massa dapibus dapibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos. Nam scelerisque nibh a risus ullamcorper, nec faucibus lectus gravida. Vivamus
id est purus. Donec imperdiet interdum auctor. Nunc in ante velit. Phasellus dictum et lectus ut
malesuada. Nullam eget ante sodales, elementum sem et, porta mi. Aliquam accumsan arcu at eros
sagittis accumsan nec non urna. Phasellus at diam non urna congue tempus in sit amet eros.
</p>
</section>
<section class="site-block">
<figure class="image-container">
<img alt="article related image" id="main-image" src="images/image.png">
<figcaption class="image-caption">Mauris eget risus ullamcorper, facilisis lectus eget.</figcaption>
</figure>
</section>
</article>
</main>
<footer id="copyright-container">
<div id="copyright-content">
<small class="copyright">Copyright 1999-2020.</small>
<p> by Codility ® All Rights Reserved.</p>
</div>
</footer>
</body>
</html>