forked from pratt-jeremy/devtest
-
Notifications
You must be signed in to change notification settings - Fork 0
/
article.html
51 lines (51 loc) · 5.62 KB
/
article.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
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript">
function imageChanger(image){
document.getElementById("banner").src = image;
}
</script>
<title>Adam Christensen's Article</title>
</head>
<body>
<article>
<header>
<h4>SubTitle</h4>
<h1>Title of the section</h1>
<figure class="banner">
<img id="banner" src="images/photo01.jpg">
<div class="thumbs">
<figure>
<img src="images/photo01.jpg" onclick="imageChanger('images/photo01.jpg');">
</figure>
<figure>
<img src="images/photo03.jpg" onclick="imageChanger('images/photo03.jpg');">
</figure>
</div>
<figcaption><span>Title for the image</span><br>
Caption for the video</figcaption>
</figure>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum suscipit augue vel semper. In hac habitasse platea dictumst. Mauris rhoncus arcu leo. Nam dapibus ipsum nulla, vitae eleifend dui ornare ut. Donec est leo, tempus ut laoreet aliquet, blandit ut leo. Nunc sem neque, mattis at semper id, pharetra egestas leo. Nam sit amet nunc id urna imperdiet scelerisque a sit amet mauris. Sed porta tempus metus, nec congue elit ultrices vel. Etiam cursus dolor et nisi pulvinar auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas non augue ac arcu fringilla porta et id mi.</p>
<figure class="insert">
<video controls>
<source src="video/sample.mp4" type="video/mp4">
</video>
<figcaption><span>Video title</span><br>
video caption for some stuff
</figcaption>
</figure>
<p>Nulla hendrerit ex eget quam mollis feugiat. Duis tincidunt neque a maximus pharetra. Nunc at risus vitae turpis pharetra consectetur sit amet in turpis. Donec et ullamcorper orci. Cras gravida risus justo, non blandit nibh eleifend id. Nunc pharetra pulvinar urna quis varius. Nullam massa nibh, aliquam vel est nec, ornare rhoncus lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec venenatis posuere augue, vel ultrices dolor facilisis non.</p>
<p>Phasellus eu consectetur nisi. Fusce non augue elit. Nullam cursus tincidunt augue vitae finibus. Morbi imperdiet rutrum odio, sit amet ultrices felis feugiat dictum. Aliquam a malesuada magna, vulputate gravida augue. Duis fringilla lorem sed justo ullamcorper laoreet. Pellentesque luctus purus sem. Curabitur non ante luctus, feugiat ligula eu, varius dolor. Duis luctus magna consequat, ullamcorper elit in, egestas turpis. Cras viverra justo in malesuada auctor. Fusce tincidunt luctus nunc, sit amet ultricies sem gravida ut. </p>
<p>Morbi vel euismod ex. Phasellus malesuada eget lectus sit amet rutrum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut malesuada, sem at mattis sollicitudin, felis est fringilla est, at auctor massa ante egestas quam. In commodo lacus elit, vel ultrices sapien vulputate id. Pellentesque tempor, tortor at fringilla dignissim, neque dui fringilla orci, sit amet mattis orci lorem id diam. Integer in dolor et libero pulvinar fringilla vel ac lacus. Morbi tempor blandit ex, quis mollis diam dignissim eget.</p>
<section>
<h2>Sub-heading</h2>
<p>Proin et gravida urna. Aenean a sapien sed ex venenatis feugiat. Quisque quis eleifend tortor. Mauris rhoncus magna at consectetur tincidunt. Nulla imperdiet in nunc a auctor. Morbi gravida, ligula eu congue pulvinar, neque elit posuere nisl, et ultricies est nunc vitae nisl. Nunc sed mattis sapien. Nullam rutrum blandit elit, ac finibus purus tristique et. Aenean sed erat suscipit ligula pretium aliquam a et ex. Nunc pharetra, nibh eu gravida feugiat, augue mi vehicula ex, sit amet aliquam arcu diam vitae nulla. </p>
<p>diam at laoreet porta. Cras nunc leo, pellentesque ac nisl at, suscipit vehicula felis. Pellentesque cursus auctor purus, in posuere felis vulputate nec. Nunc tempor, lorem vitae convallis mattis, nisi odio venenatis orci, ac dignissim est purus luctus nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam laoreet justo eu neque commodo, sit amet convallis ante suscipit. Curabitur ut felis semper, mollis velit vel, consectetur justo. Phasellus sed pellentesque arcu. Phasellus id lectus mollis, dignissim tortor non, tincidunt leo. Sed placerat lectus nec nulla bibendum, et interdum augue tempor. Sed tellus neque, elementum ac velit vitae, faucibus congue dolor. Suspendisse condimentum ligula tellus, et ullamcorper quam lobortis eget. Nulla bibendum magna sed dignissim elementum. </p>
<p>Aliquam in semper nulla, sed rhoncus orci. Sed tempus et arcu ac suscipit. Ut sed libero euismod, dapibus eros a, faucibus neque. Pellentesque lacinia cursus massa sit amet venenatis. Etiam eget libero vulputate metus vestibulum dictum sit amet sit amet metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus egestas venenatis. Maecenas aliquet sodales orci, nec aliquam tortor ornare sit amet. Aenean non euismod nisl. In vitae quam sed lectus placerat rutrum. Etiam diam augue, varius ut purus non, varius molestie nisi. Curabitur consequat porttitor sapien, eu fringilla mauris laoreet et. Nullam a turpis tincidunt, bibendum ante in, ultrices tellus. Etiam massa odio, tincidunt ut posuere id, facilisis a mi. </p>
</section>
</article>
</body>
</html>