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
92 lines (90 loc) · 9.09 KB
/
index.html
File metadata and controls
92 lines (90 loc) · 9.09 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
<!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>
<header>
<h1>Brewing the Perfect Cup of Coffee</h1>
<hr>
<p>Coffee is enjoyed worldwide and around two billion cups of the stuff is consumed every day. As you can guess, not every cup is made the same way. So here we shall explore some of these different methods and establish what makes a good cup of joe ☕</p>
<img src="img/latte_art.jpg" alt="a person pouring a cup of coffee and creating latte art" width="100%">
</header>
<main>
<article>
<h2>The Humble Coffee Bean</h2>
<img src="img/coffee_beans.jpg" alt="fresh coffee beans being roasting in a coffee roaster" width="100%">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consectetur rutrum mi in euismod. Praesent sagittis ultrices egestas. Proin ut rutrum justo. Nulla lorem orci, vestibulum vel eros sit amet, egestas faucibus metus. Maecenas molestie eu lectus id pellentesque. Mauris interdum felis quis nisl venenatis, at hendrerit tortor faucibus. Phasellus eget augue tellus. Duis velit nisi, ultrices vitae varius accumsan, venenatis a ex.
</p>
<p>
Fusce blandit eleifend erat in lacinia. Cras et velit tempor, tincidunt nulla nec, blandit arcu. Praesent pretium enim vitae elit feugiat condimentum. Duis gravida ex vel sapien venenatis ornare. Etiam pharetra id turpis ultrices dictum. Curabitur vitae congue odio. In facilisis gravida sagittis. Nulla imperdiet ultrices mauris sit amet gravida. Curabitur id tempor quam, eget faucibus mauris. Sed venenatis sapien ut orci tincidunt pulvinar. Vestibulum venenatis, quam sit amet auctor iaculis, tortor tellus pellentesque libero, gravida varius mi metus ut eros. Etiam euismod dui ac augue pellentesque molestie.
</p>
<p>
Check out the following links to find some bespoke independent coffee roaster located here in Scotland!
<ul>
<li><a href="https://www.deargreencoffee.com/">Dear Green</a></li>
<li><a href="https://www.pureroasters.com/">Pure Roasters</a></li>
<li><a href="https://www.faodailroastery.co.uk/">Faodail Roastery</a></li>
<li><a href="https://www.gordonstcoffee.co.uk/">Gordon St. Coffee</a></li>
</ul>
</p>
</article>
<article>
<h2>The Grind</h2>
<img src="img/ground_coffee.jpg" alt="espresso machine portafilter filled with ground coffee" width="100%">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus faucibus eleifend neque ac elementum. Nulla metus nibh, pharetra vel consectetur eu, congue faucibus odio. Mauris molestie accumsan lacus, vitae molestie tellus molestie quis. Vivamus euismod mauris et efficitur mattis. Donec a aliquet odio. Sed bibendum, nisl quis vehicula egestas, neque neque pulvinar magna, eu congue lacus metus quis urna. Donec vulputate orci non pulvinar porttitor. Donec vel ex id elit placerat bibendum. Quisque ante ipsum, hendrerit molestie justo sed, lobortis malesuada lorem. Nullam at imperdiet justo, sit amet fringilla tortor. Suspendisse eget justo ut nunc accumsan fermentum. Pellentesque lectus dolor, tempus in libero eu, venenatis dapibus lorem. Nunc accumsan consequat egestas. Donec tortor tortor, euismod vitae dolor eu, congue fermentum tellus. Nam quis urna id enim ornare interdum at in nisi.
</p>
<p>
Click <a href="https://coffeeaffection.com/types-of-coffee-grinders/">here</a> to find out more about grinding and the different types of grinder available.
</p>
</article>
<article>
<h2>The Water</h2>
<img src="img/water.jpg" alt="cup being filled with fresh water from a jug" width="100%">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras volutpat neque sed egestas volutpat. Vivamus id augue imperdiet, malesuada neque vel, molestie elit. Morbi sed aliquam justo. Duis consectetur nisi quis rutrum semper. Fusce sit amet sem sed dui placerat lobortis quis a nulla. Suspendisse convallis lectus non bibendum fringilla. Integer convallis eleifend odio, quis sodales quam pharetra ac. Vestibulum varius pulvinar mauris, eget dignissim leo consectetur quis. Cras sit amet bibendum ipsum, eget blandit turpis. Quisque pharetra tellus at justo blandit, placerat tempor neque maximus. Nullam porttitor risus quis augue malesuada egestas. In mattis vulputate vulputate. Duis nibh tortor, interdum nec quam nec, finibus porttitor nisl.
</p>
<p>
Vestibulum ut dictum tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean eget ligula vel nisi tempor commodo. Donec ut urna in velit interdum dictum in consectetur metus. Cras ac convallis felis, et posuere neque. Integer quis ante varius, elementum ligula vitae, blandit justo. Donec a ornare urna, pretium tincidunt augue. Aliquam tempus justo id aliquam fringilla. Praesent tempus dolor quis mollis feugiat.
</p>
<p>
Donec est orci, efficitur ut sapien id, ultricies tincidunt purus. In a urna orci. Cras feugiat, nisl in interdum dictum, diam turpis pretium massa, at luctus sem erat sed quam. Praesent molestie euismod tortor, sed ultricies nisi dapibus sed. Pellentesque facilisis ac tortor quis interdum. Suspendisse consequat lorem eros. Phasellus elementum suscipit ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In at efficitur mauris. Sed sollicitudin eros quis mi venenatis interdum. Duis eu rutrum quam. Fusce placerat enim augue, sed dictum nisl accumsan at. Quisque ultrices odio in ante condimentum, elementum fringilla lorem mollis.
</p>
<p>
Water plays an important part in brewing a decent coffee and the quality of water can vary depending on location. A way to measure the quality of water is the "hardness". Hard water has a high number of dissolved minerals, predominantly magnesium and calcium. Water is naturally soft when it falls from the sky and gains its hardness after coming in to contact with the ground. You can check the water quality of your local area using <a href="https://www.aquacure.co.uk/knowledge-base/uk-hard-water-map">this</a> postcode checker. For those who live in Scotland, The quality of public drinking water supplies remains amongst the highest in the world, a report has found.
</p>
</article>
<article>
<h2>The Equipment</h2>
<img src="img/moka_pot.jpg" alt="two moka pots positioned next to each other, one big one small" width="100%">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed arcu tellus, efficitur nec est et, fringilla iaculis ligula. Nulla arcu nibh, suscipit non erat eu, consequat pulvinar lorem. Duis pretium a nulla quis varius. Suspendisse quam purus, sollicitudin a velit et, dignissim aliquet diam. Etiam volutpat consectetur velit vel venenatis. Nunc tempor nisi lacus, ut consectetur sem cursus id. Cras fringilla, purus non vehicula aliquet, libero odio egestas quam, eget maximus tortor felis sed justo. Aliquam vel diam aliquet, ultricies risus eu, convallis tortor. Sed accumsan interdum neque, eu malesuada velit eleifend non. Etiam a mi vulputate metus venenatis vulputate sed sit amet nisl. Morbi cursus enim eget lorem dapibus pretium. Praesent facilisis convallis facilisis. Mauris in mi et est aliquam gravida. Nunc lacinia auctor sodales. Proin consequat metus pharetra dolor luctus venenatis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
Phasellus fermentum tellus ut ultrices tempor. Mauris varius mattis ligula, ac placerat tortor. Nullam tempor finibus nulla vel ultrices. Sed commodo lorem sit amet velit finibus, id pellentesque purus laoreet. Nullam blandit in risus vitae gravida. Phasellus lacinia mi nec feugiat congue. Duis vel nulla dui. Aliquam erat volutpat. Aliquam fringilla, tortor eu tempor aliquet, mi libero laoreet lacus, a rutrum sem lectus nec dui. Quisque eu nunc et lorem auctor laoreet. Ut egestas dolor mattis, malesuada est nec, iaculis turpis. Duis dignissim ligula vel erat dictum ultricies. In quis enim vel nisl bibendum luctus. In id massa commodo, facilisis massa et, finibus lacus. Praesent vestibulum enim vel nulla mattis eleifend. Aliquam lacinia augue ac vehicula tempor.
</p>
</article>
</main>
<footer>
<hr>
<p>Author: Man Sang Sin</p>
<p><a href="mailto:[email protected]">[email protected]</a></p>
</footer>
<!-- Add your HTML markup here -->
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
</body>
</html>