-
Notifications
You must be signed in to change notification settings - Fork 0
/
index2.html
206 lines (177 loc) · 10.8 KB
/
index2.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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/main.min.css" />
<title>coffeeroasters - about us</title>
<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:ital,wght@0,400;0,700;1,400;1,700&family=Fraunces:ital,wght@0,900;1,900&display=swap" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header class="header">
<div class="container">
<a class="logo-link" href="./index.html">
<img class="logo-link__image" src="img/logo.svg" alt="Logo image"/>
</a>
<button class="header__menu-button" type='button'>
<img src="./img/2x/hamburger.svg" alt="hamburger" class="hamburger">
<img src="./img/2x/exit.svg" alt="exit" class="exit">
</button>
<nav class="nav">
<ul class="nav__list">
<li class="nav__item">
<a class="nav__link" href="index.html">
home
</a>
</li>
<li class="nav__item">
<a class="nav__link nav__link--active" href="index2.html"> about us </a>
</li>
<li class="nav__item">
<a class="nav__link" href="index3.html"> create your plan </a>
</li>
</ul>
</nav>
</div>
</header>
<main class="main">
<section class="hero">
<div class="container">
<div class="special__hero__inner">
<h1 class="hero__heading">About us</h1>
<p class="hero__description">
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>
</main>
<div class="commitent">
<div class="container">
<div class="commitent__inner">
<picture class="commitent__picture">
<source class="commitent__img" type="image/webp" media="(max-width: 716px)" srcset="./img/webP/barista-mobile.webp 1x, ./img/webP/[email protected]"/>
<source class="commitent__img" type="image/webp" media="(max-width: 920px)" srcset="./img/webP/barista-tablet.webp 1x, ./img/webP/[email protected]"/>
<source class="commitent__img" type="image/webp" srcset="./img/webP/barista.webp 1x, ./img/webP/[email protected] 2x"/>
<source class="commitent__img" type="image/webp" media="(max-width: 716px)" srcset="./img/webP/barista-mobile.jpg 1x, ./img/webP/[email protected] 2x"/>
<source class="commitent__img" type="image/webp" media="(max-width: 920px)" srcset="./img/webP/barista-tablet.jpg 1x, ./img/webP/[email protected] 2x"/>
<img src="./img/webP/barista.jpg" class="commitent__img" alt="Image" srcset="./img/webP/barista.jpg 1x, ./img/webP/[email protected] 2x"/>
</picture>
<div class="commitent__text">
<h2 class="commitent__title">Our commitment</h2>
<p class="commitent__p">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>
</div>
</div>
</div>
<div class="quality">
<div class="container">
<div class="quality__inner">
<div class="quality__text">
<h2 class="quality__title">Uncompromising quality</h2>
<p class="quality__p">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>
<picture class="quality__picture">
<source class="quality__img" srcset="./img/webP/quality-mobile.webp 1x, ./img/webP/[email protected] 2x" type="image/webp" media="(max-width:636px)">
<source class="quality__img" srcset="./img/webP/quality-tablet.webp 1x, ./img/webP/[email protected] 2x" type="image/webp" media="(max-width:1170px)">
<source class="quality__img" srcset="./img/webP/quality.webp 1x, ./img/webP/[email protected] 2x" type="image/webp">
<source class="quality__img" srcset="./img/webP/quality-mobile.jpg 1x, ./img/webP/[email protected] 2x" type="image/webp" media="(max-width:636px)">
<source class="quality__img" srcset="./img/webP/quality-tablet.jpg 1x, ./img/webP/[email protected] 2x" type="image/webp" media="(max-width:1170px)">
<img src="./img/webP/quality.jpg" srcset="./img/webP/quality.jpg 1x, ./img/webP/[email protected] 2x" alt="Image">
</picture>
</div>
</div>
</div>
<div class="headquarters">
<div class="container">
<h3 class="headquarters__main-title h-i-w__title">Our headquarters</h3>
<div class="h-i-w__inner">
<ol class="steps">
<li class="step">
<img src="icons/uk.svg" alt="UK" class="step__heading__count">
<h3 class="step__heading">
<span class="step__heading__text">United Kingdom</span>
</h3>
<p class="step__text">68 Asfordby Rd</p>
<p class="step__text">Alcaston</p>
<p class="step__text">SY6 1YA</p>
<p class="step__text">+44 1241 918425</p>
</li>
<li class="step">
<img src="icons/canada.svg" alt="Canada" class="step__heading__count">
<h3 class="step__heading">
<span class="step__heading__text">Canada</span>
</h3>
<p class="step__text">1528 Eglinton Avenue</p>
<p class="step__text">Toronto</p>
<p class="step__text">Ontario M4P 1A6</p>
<p class="step__text">+1 416 485 2997</p>
</li>
<li class="step">
<img src="icons/australia.svg" alt="Australia" class="step__heading__count">
<h3 class="step__heading">
<span class="step__heading__text">Australia</span>
</h3>
<p class="step__text">36 Swanston Street</p>
<p class="step__text">Kewell</p>
<p class="step__text">Victoria</p>
<p class="step__text">+61 4 9928 3629</p>
</li>
</ol>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="footer__inner">
<a class="logo-link" href="./index.html">
<img class="logo-link__image" src="img/logo_dark.svg" alt="Logo image"/>
</a>
<nav class="nav">
<ul class="nav__list">
<li class="nav__item">
<a class="nav__link" href="index.html"> home </a>
</li>
<li class="nav__item">
<a class="nav__link nav__link--active" href="index2.html"> about us </a>
</li>
<li class="nav__item">
<a class="nav__link" href="index3.html">
create your plan
</a>
</li>
</ul>
</nav>
<ul class="socials">
<li class="socials__item">
<a class="socials__link" href="#">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="Path" d="M22.675 0H1.325C0.593 0 0 0.593 0 1.325V22.676C0 23.407 0.593 24 1.325 24H12.82V14.706H9.692V11.084H12.82V8.413C12.82 5.313 14.713 3.625 17.479 3.625C18.804 3.625 19.942 3.724 20.274 3.768V7.008L18.356 7.009C16.852 7.009 16.561 7.724 16.561 8.772V11.085H20.148L19.681 14.707H16.561V24H22.677C23.407 24 24 23.407 24 22.675V1.325C24 0.593 23.407 0 22.675 0Z" fill="#FEFCF7"/>
</svg>
</a>
</li>
<li class="socials__item">
<a class="socials__link" href="#">
<svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="Path" d="M24 2.55705C23.117 2.94905 22.168 3.21305 21.172 3.33205C22.189 2.72305 22.97 1.75805 23.337 0.608047C22.386 1.17205 21.332 1.58205 20.21 1.80305C19.313 0.846047 18.032 0.248047 16.616 0.248047C13.437 0.248047 11.101 3.21405 11.819 6.29305C7.728 6.08805 4.1 4.12805 1.671 1.14905C0.381 3.36205 1.002 6.25705 3.194 7.72305C2.388 7.69705 1.628 7.47605 0.965 7.10705C0.911 9.38805 2.546 11.522 4.914 11.997C4.221 12.185 3.462 12.229 2.69 12.081C3.316 14.037 5.134 15.46 7.29 15.5C5.22 17.123 2.612 17.848 0 17.54C2.179 18.937 4.768 19.752 7.548 19.752C16.69 19.752 21.855 12.031 21.543 5.10605C22.505 4.41105 23.34 3.54405 24 2.55705Z" fill="#FEFCF7"/>
</svg>
</a>
</li>
<li class="socials__item">
<a class="socials__link" href="#">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="Shape" fill-rule="evenodd" clip-rule="evenodd" d="M12 0C8.741 0 8.333 0.014 7.053 0.072C2.695 0.272 0.273 2.69 0.073 7.052C0.014 8.333 0 8.741 0 12C0 15.259 0.014 15.668 0.072 16.948C0.272 21.306 2.69 23.728 7.052 23.928C8.333 23.986 8.741 24 12 24C15.259 24 15.668 23.986 16.948 23.928C21.302 23.728 23.73 21.31 23.927 16.948C23.986 15.668 24 15.259 24 12C24 8.741 23.986 8.333 23.928 7.053C23.732 2.699 21.311 0.273 16.949 0.073C15.668 0.014 15.259 0 12 0ZM12 2.163C15.204 2.163 15.584 2.175 16.85 2.233C20.102 2.381 21.621 3.924 21.769 7.152C21.827 8.417 21.838 8.797 21.838 12.001C21.838 15.206 21.826 15.585 21.769 16.85C21.62 20.075 20.105 21.621 16.85 21.769C15.584 21.827 15.206 21.839 12 21.839C8.796 21.839 8.416 21.827 7.151 21.769C3.891 21.62 2.38 20.07 2.232 16.849C2.174 15.584 2.162 15.205 2.162 12C2.162 8.796 2.175 8.417 2.232 7.151C2.381 3.924 3.896 2.38 7.151 2.232C8.417 2.175 8.796 2.163 12 2.163ZM5.838 12C5.838 8.597 8.597 5.838 12 5.838C15.403 5.838 18.162 8.597 18.162 12C18.162 15.404 15.403 18.163 12 18.163C8.597 18.163 5.838 15.403 5.838 12ZM12 16C9.791 16 8 14.21 8 12C8 9.791 9.791 8 12 8C14.209 8 16 9.791 16 12C16 14.21 14.209 16 12 16ZM16.965 5.595C16.965 4.8 17.61 4.155 18.406 4.155C19.201 4.155 19.845 4.8 19.845 5.595C19.845 6.39 19.201 7.035 18.406 7.035C17.61 7.035 16.965 6.39 16.965 5.595Z" fill="#FEFCF7"/>
</svg>
</a>
</li>
</ul>
</div>
</div>
</footer>
<script src="./scripts/script.js"></script>
</body>
</html>