forked from CodeYourFuture/HTML-CSS-Coursework-Week1
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
94 lines (83 loc) · 6.94 KB
/
index.html
File metadata and controls
94 lines (83 loc) · 6.94 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>My Blog</title>
<link
href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
rel="stylesheet"
type="text/css"
/>
<link rel="stylesheet" href="css/style.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<!-- Add your HTML markup here -->
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
<nav>
<ul>
<li>
<a href="#header">Main</a>
</li>
<li>
<a href="#article1">Article 1</a>
</li>
<li>
<a href="#article2">Article 2</a>
</li>
<li>
<a href="#article3">Article 3</a>
</li>
</ul>
</nav>
<header class="header">
<h1>Something about coffee</h1>
<p>How much do you know about coffee and how much would you like to know? Read the article to found out more interesting facts about the coffee.</p>
<a><img src="https://images.pexels.com/photos/1695052/pexels-photo-1695052.jpeg?cs=srgb&dl=pexels-igor-haritanovich-1695052.jpg&fm=jpg" alt="coffee grain picture"></a>
</header>
<main>
<article id="main_article">
<article class="article" id="article1">
<h2>Article 1: What does coffee contain?</h2>
<details>
<summary>
Have you ever wonder what does coffee contain? Open the article to find out.
</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac ultricies metus. Nunc interdum porttitor risus, non feugiat urna porta ac. Maecenas pulvinar ipsum ligula, quis cursus sem tincidunt pretium. Aliquam posuere hendrerit ligula a finibus. Nullam et commodo ex. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut iaculis, diam quis semper ornare, lectus mi ornare nisi, varius blandit lacus sapien et augue. Sed vel arcu ullamcorper, vestibulum diam non, lacinia dui. Nunc arcu magna, ullamcorper sed mattis nec, accumsan sit amet nibh. Praesent ac arcu id felis hendrerit ornare. Fusce imperdiet finibus risus nec vulputate. Etiam tempus auctor urna et pulvinar. Aliquam erat volutpat. Fusce nisl turpis, venenatis vel venenatis ut, blandit a lectus. Aliquam lectus lorem, commodo bibendum velit euismod, convallis porttitor diam. Fusce porttitor, quam quis aliquet rutrum, ex arcu molestie risus, sed pulvinar tortor nisi eu eros.</p>
<p>Morbi id elit eget elit vestibulum posuere. Nunc gravida, magna iaculis fringilla volutpat, odio purus eleifend mauris, id fermentum purus nibh in tellus. In pulvinar dolor id odio dapibus dictum. Vivamus volutpat at turpis quis laoreet. Suspendisse risus arcu, pretium eget justo congue, vulputate suscipit lectus. Vivamus mattis varius tristique. Suspendisse sit amet gravida metus, quis vehicula lorem. Sed tristique viverra elit ut varius. Donec vitae molestie nulla. Sed suscipit eu neque eu dignissim. Fusce vel mi et risus aliquet semper. Integer ac magna consectetur, dictum urna a, pulvinar quam. Nulla eleifend, nisi sed sagittis egestas, magna justo egestas ipsum, quis consectetur mi nisl a dolor. Vivamus lacinia nisl vitae leo vulputate, fermentum faucibus metus faucibus.</p>
<p>If you like to know more about coffee compounds read <a class="link" target="_blank" href="https://www.coffeeandhealth.org/topic-overview/compounds-in-coffee-2/">here.</a></p>
</details>
</article>
<article class="article" id="article2">
<h2>Article 2: How much coffee should you drink?</h2>
<details>
<summary>
Would you like to know if there is any limit or how much coffee should you drink? Open the article to find out.
</summary>
<p>Sed rutrum diam euismod, pharetra libero eget, lobortis tellus. Donec quis enim nisl. Quisque vel consequat nisl. Aenean nibh mi, suscipit nec sodales eu, tempor lobortis purus. Donec convallis ultrices ullamcorper. Nam in felis eu mauris interdum posuere id eu augue. Quisque urna mi, fermentum vel sollicitudin a, sagittis ac eros. Sed at nulla molestie, mollis ante vel, vehicula nulla. In commodo eros sed consequat maximus. Donec rutrum ullamcorper consectetur. Duis condimentum erat a lacus eleifend ullamcorper. In varius bibendum mi, vel cursus velit tincidunt id.</p>
<p>Curabitur ut egestas erat. Ut sit amet aliquam ex. Ut hendrerit cursus est sit amet vulputate. Nulla et odio non velit sollicitudin ultricies. Fusce sit amet arcu sagittis, pellentesque eros ac, pulvinar lacus. Nulla eu metus pretium, volutpat libero sit amet, semper sapien. Donec tempus in ipsum vitae scelerisque. Mauris blandit elit ut risus pellentesque, in finibus lacus lobortis. Fusce vitae mauris sit amet nisl lacinia ultricies sed convallis elit.</p>
<p>If you like to know more about how much coffee is too much read <a class="link" target="_blank" href="https://www.mayoclinic.org/healthy-lifestyle/nutrition-and-healthy-eating/in-depth/caffeine/art-20045678">here.</a></p>
</details>
</article>
<article class="article" id="article3">
<h2>Article 3: Is coffee good for you?</h2>
<details>
<summary>
Would you consider a coffee as a healthy drink or more as a drink you should avoid? Open the article to find out more.
</summary>
<p>Morbi dictum vel est vitae fringilla. Fusce mattis rhoncus porta. Praesent sollicitudin sit amet neque eget finibus. Proin non arcu nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque luctus dolor varius, vehicula felis ac, consequat est. Donec blandit, est a molestie lacinia, eros nunc ultrices turpis, sed tristique mi purus in lectus. Integer vel condimentum massa, et porta mi. Suspendisse id sagittis mauris. Phasellus sit amet quam quis erat ornare iaculis. Donec id imperdiet nulla. Phasellus molestie vitae est vitae faucibus.</p>
<p>Aliquam quis consectetur justo. Phasellus ac quam massa. Quisque et pretium augue. Phasellus vitae tempus quam. Praesent venenatis efficitur lorem, finibus aliquam felis luctus vel. Donec magna nunc, venenatis nec semper sit amet, porttitor a est. Donec elit enim, rhoncus nec dapibus sit amet, fringilla vel purus.</p>
<p>If you like to know more if coffee is good for you read <a class="link" target="_blank" href="https://www.nytimes.com/2020/02/13/style/self-care/coffee-benefits.html">here.</a></p>
</details>
</article>
</article>
</main>
<footer>
<p>© Author: Ro, created for training purposes for CYF <year>2021</year></p>
</footer>
</body>
</html>