-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathabout.html
151 lines (135 loc) · 6.71 KB
/
about.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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ******************* CSS ********************-->
<link rel="stylesheet" href="./assets/css/reset.css">
<link rel="stylesheet" href="./assets/css/global.css">
<link rel="stylesheet" href="./assets/css/header.css">
<link rel="stylesheet" href="./assets/css/footer.css">
<link rel="stylesheet" href="./assets/css/about/about.css">
<link rel="stylesheet" href="./assets/css/about/commitment.css">
<link rel="stylesheet" href="./assets/css/about/quality.css">
<link rel="stylesheet" href="./assets/css/about/headquarters.css">
<link rel="stylesheet" href="./assets/css/media/about/mediaAboutTablet.css">
<link rel="stylesheet" href="./assets/css/media/about/mediaAboutDesktop.css">
<link rel="stylesheet" href="assets/css/media/mediaHeaderFooter.css">
<!-- ****************** scripts ********************-->
<script src="assets/js/script.js" defer></script>
<!-- **************** Fonts and logo *****************-->
<link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicon-32x32.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;600&family=Fraunces:opsz,wght@9..144,900&display=swap" rel="stylesheet">
<title>Coffeeroasters subscription site</title>
</head>
<body>
<header class="header">
<h1 class="header__image">
<img src="assets/images/shared/desktop/logo.svg" alt="coffeeroasters company logo" title="coffeeroasters company logo">
</h1>
<nav class="header__nav">
<button id="header__nav__button">
<img id="header__nav__img" src="assets/images/shared/mobile/icon-hamburger.svg" alt="main menu | hamburger icon">
</button>
<ul id="navBar" class="header__nav__ul">
<li class="title_s"><a href="./index.html">Home</a></li>
<li class="title_s"><a href="./about.html">About us</a></li>
<li class="title_s"><a href="./plan.html">Create your plan</a></li>
</ul>
</nav>
</header>
<main>
<section class="about">
<div class="about__card card" role="img" aria-label="top view photo of a rustic wooden table with a part of a white teapot on the right of the image with a white cup filled with cappuccino sprinkled with cocoa powder on top of both">
<div class="about__card__content">
<h2 class="title_m">About Us</h2>
<p class="about__card__text text_m">Coffeeroasters began its journey of exotic discovery in 1999, highlighting stories of coffee from around the
world. We have since been dedicated to bring the perfect cup - from bean to brew - in every shipment.</p>
</div>
</div>
</section>
<section class="commitment">
<div class="commitment__img card" role="img" aria-label="image of a barista making a latte macchiato"></div>
<div class="commitment__content">
<h2 class="commitment__title title_m">Our commitment</h2>
<p class="commitment__text text_m">We’re built on a simple mission and a commitment to doing good along the way. We want to
make it easy for you to discover and brew the world’s best coffee at home. It all starts
at the source. To locate the specific lots we want to purchase, we travel nearly 60 days
a year trying to understand the challenges and opportunities in each of these places.
We collaborate with exceptional coffee growers and empower a global community of farmers
through with well above fair-trade benchmarks. We also offer training, support farm community
initiatives, and invest in coffee plant science. Curating only the finest blends, we roast
each lot to highlight tasting profiles distinctive to their native growing region.</p>
</div>
</section>
<section class="quality">
<div class="quality__card card">
<div class="quality__card__img"></div>
<div class="quality__card__content">
<h2 class="quality__card__title title_m">Uncompromising quality</h2>
<p class="quality__card__text text_m">Although we work with growers who pay close attention to all stages of
harvest and processing, we employ, on our end, a rigorous quality control program to avoid over-roasting or
baking the coffee dry. Every bag of coffee is tagged with a roast date and batch number. Our goal is to roast
consistent, user-friendly coffee, so that brewing is easy and enjoyable.</p>
</div>
</div>
</section>
<section class="headquarters">
<div class="headquarters__container">
<h2 class="headquarters__title title_s">Our headquarters</h2>
<div class="headquarters__cards">
<div class="headquarters__card">
<img class="headquarters__card__img" src="./assets/images/about/desktop/illustration-uk.svg" alt="map of uk">
<h3 class="headquarters__card__title title_m">United Kingdom</h3>
<ul class="text_m">
<li>68 Asfordby Rd</li>
<li>Alcaston</li>
<li>SY6 1YA</li>
<li>+44 1241 918425</li>
</ul>
</div>
<div class="headquarters__card" >
<img class="headquarters__card__img" src="./assets/images/about/desktop/illustration-canada.svg" alt="map of canada">
<h3 class="headquarters__card__title title_m">Canada</h3>
<ul>
<li>1528 Eglinton Avenue</li>
<li>Toronto</li>
<li>Ontario M4P 1A6</li>
<li>+1 416 485 2997</li>
</ul>
</div>
<div class="headquarters__card" >
<img class="headquarters__card__img" src="./assets/images/about/desktop/illustration-australia.svg" alt="map of australia">
<h3 class="headquarters__card__title title_m">Australia</h3>
<ul>
<li>36 Swanston Street</li>
<li>Kewell</li>
<li>Victoria</li>
<li>+61 4 9928 3629</li>
</ul>
</div>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="footer__card">
<img class="footer__img" src="assets/images/shared/desktop/logowhite.svg" alt="logo of cofferoasters">
<nav>
<ul class="footer__nav ">
<li><a href="./index.html">Home</a></li>
<li><a href="./about.html">About us</a></li>
<li><a href="./plan.html">Create your plan</a></li>
</ul>
</nav>
<div class="footer__media">
<a href="#"><img src="assets/images/shared/desktop/icon-facebook.svg" alt="facebook logo"></a>
<a href="#"><img src="assets/images/shared/desktop/icon-twitter.svg" alt="twitter logo"></a>
<a href="#"><img src="assets/images/shared/desktop/icon-instagram.svg" alt="instagram logo"></a>
</div>
</div>
</footer>
</body>
</html>