-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
53 lines (42 loc) · 5.43 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
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<!--
Hello Camper!
For now, the test suite only works in Chrome! Please read the README below in the JS Editor before beginning. Feel free to delete this message once you have read it. Good luck and Happy Coding!
- The freeCodeCamp Team
-->
<!DOCTYPE html>
<html>
<head>
<!-- User Story #2: I should see an element with a corresponding id="title", which contains a string (i.e. text) that describes the subject of the tribute page (e.g. "Dr. Norman Borlaug"). -->
<title id="title">Dr. Norman Borlaug</title>
</head>
<body>
<!-- User Story #1: My tribute page should have an element with a corresponding id="main", which contains all other elements. -->
<main id="main">
<div id="header-text">
<h1>Dr. Norman Borlaug</h1>
<p>The man who saved a billion lives.</p>
</div>
<!-- User Story #3: I should see a div element with a corresponding id="img-div".-->
<div id="img-div">
<figure>
<!-- User Story #4: Within the img-div element, I should see an img element with a corresponding id="image". -->
<img id="image" src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg">
<!-- User Story #5: Within the img-div element, I should see an element with a corresponding id="img-caption" that contains textual content describing the image shown in img-div. -->
<figcaption id="img-caption">Dr. Norman Borlaug, third from the left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.</figcaption>
</figure>
</div>
<!-- User Story #6: I should see an element with a corresponding id="tribute-info", which contains textual content describing the subject of the tribute page. -->
<article id="tribute-info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque varius ultricies augue, non imperdiet nulla interdum eu. Nullam pharetra lacinia velit non porttitor. Nam ac metus venenatis, tempus sem eu, blandit mauris. Praesent gravida vitae dui quis pretium. Suspendisse potenti. Sed imperdiet massa et nibh pulvinar iaculis. Nulla facilisi. Aliquam quis lorem diam. Curabitur nunc neque, vehicula eu cursus vitae, iaculis nec turpis. Nullam elementum justo a blandit porttitor. In congue, nibh quis porttitor tincidunt, ex nisi mattis neque, in tempor libero urna non dolor. Sed sed erat arcu. In consectetur purus non nibh feugiat, non cursus tortor placerat. Fusce pretium odio neque, in tincidunt lorem bibendum et. Mauris ultricies cursus purus, id suscipit felis consectetur tempor.
Sed varius luctus augue vel pulvinar. Vivamus quis nisi id purus interdum pellentesque. Fusce ac convallis nisl. Nullam sit amet sem id mi lobortis tincidunt a nec sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam faucibus nisl porttitor ligula semper ultricies. Duis id consequat metus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum dapibus eros at condimentum ultricies. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae tortor placerat, accumsan arcu ac, bibendum est. Cras tempor justo et tellus tempus, vel tristique elit tempor.
Maecenas mattis, ipsum sed scelerisque dictum, lacus sem iaculis felis, ut maximus tellus ligula scelerisque erat. Pellentesque in rhoncus nibh. Morbi vitae magna placerat, tincidunt dui molestie, dapibus velit. Fusce vitae diam elementum, semper nisi eget, feugiat ante. Morbi ac facilisis nibh. Nulla consequat velit sed risus aliquet, sed lacinia erat sodales. Ut eu orci eu metus varius porta. In eu turpis quis ipsum ultrices venenatis. Fusce consectetur ligula ut ligula gravida, sit amet dapibus lectus eleifend. Morbi sit amet justo varius, pharetra ipsum luctus, molestie dui. Sed turpis ante, scelerisque vel massa ut, scelerisque laoreet massa.
Quisque in rhoncus lacus, ac elementum arcu. Sed fermentum mattis maximus. Praesent mattis dui non libero auctor bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mattis auctor ligula quis scelerisque. Vestibulum rhoncus turpis vulputate scelerisque mattis. In nec ex purus. Praesent malesuada eget dui et lobortis.
Nam lectus sem, semper id sem in, accumsan facilisis risus. Sed sollicitudin nulla vel imperdiet sollicitudin. Phasellus venenatis elit facilisis tristique porta. Vestibulum cursus nunc dui, ac pharetra ligula feugiat eu. Integer id auctor arcu. Donec nunc urna, elementum at turpis vitae, eleifend pellentesque lorem. Ut at nisl interdum lectus molestie congue. Suspendisse non condimentum quam. Vestibulum condimentum dolor sed luctus aliquet. Praesent purus est, consectetur et tristique eget, interdum vel turpis. Nullam in arcu ac eros varius bibendum id at erat. Sed quis pharetra nisi. Mauris enim sapien, consectetur sit amet leo id, venenatis cursus nisi.
<hr>
<!-- User Story #7: I should see an a element with a corresponding id="tribute-link", which links to an outside site that contains additional information about the subject of the tribute page. HINT: You must give your element an attribute of target and set it to _blank in order for your link to open in a new tab (i.e. target="_blank"). -->
<a id="tribute-link" href="https://en.wikipedia.org/wiki/Norman_Borlaug" target="_blank">Wiki page about Norman Borlaug</a>
</article>
</main>
</body>
</html>