-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
270 lines (244 loc) · 10.7 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
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
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
<!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 - home</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="header__link" href="./index.html">
<img class="header__link__image" src="img/logo.svg" alt="Logo" />
</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 href="index.html" class="nav__link nav__link--active">home</a></li>
<li class="nav__item"><a href="index2.html" class="nav__link">about us</a></li>
<li class="nav__item"><a href="index3.html" class="nav__link">create plan</a></li>
</ul>
</nav>
</div>
</header>
<main class="main">
<section class="hero">
<div class="container">
<div class="hero__inner">
<h1 class="hero__heading">Great coffee made simple.</h1>
<p class="hero__description">
Start your mornings with the world’s best coffees. Try
our expertly curated artisan coffees from our best
roasters delivered directly to your door, at your
schedule.
</p>
<a class="hero__link button" href="index3.html" title="Create your plan">
Create your plan
</a>
</div>
</div>
</section>
</main>
<div class="collection">
<div class="container">
<span class="collection__heading__span">
<h1 class="collection__heading">our collection
<h1 />
</span>
<div class="collection__inner">
<div class="collection__block">
<img src="img/2x/expresso.png" srcset="img/2x/expresso.png 1x, img/2x/[email protected] 2x"
alt="Gran Espresso" class="collection__img">
<div class="collection__text">
<h3 class="collection__title">Gran Espresso</h3>
<p class="collection__p">Light and flavorful blend with cocoa and black pepper for an
intense experience.</p>
</div>
</div>
<div class="collection__block">
<img src="img/2x/kopi2.png" srcset="img/2x/kopi2.png 1x, img/2x/[email protected] 2x" alt="Planalto"
class="collection__img">
<div class="collection__text">
<h3 class="collection__title">Planalto</h3>
<p class="collection__p">Brazilian dark roast with rich and velvety body, and hints of
fruits and nuts.</p>
</div>
</div>
<div class="collection__block">
<img src="img/2x/kopi3.png" srcset="img/2x/kopi3.png 1x, img/2x/[email protected] 2x" alt="Piccollo"
class="collection__img">
<div class="collection__text">
<h3 class="collection__title">Piccollo</h3>
<p class="collection__p">Mild and smooth blend featuring notes of toasted almond and dried
cherry.</p>
</div>
</div>
<div class="collection__block">
<img src="img/2x/expresso.png" srcset="img/2x/expresso.png 1x, img/2x/[email protected] 2x"
alt="Danche" class="collection__img">
<div class="collection__text">
<h3 class="collection__title">Danche</h3>
<p class="collection__p">Ethiopian hand-harvested blend densely packed with vibrant fruit
notes.</p>
</div>
</div>
</div>
</div>
</div>
<div class="why">
<div class="container">
<div class="why__inner">
<h2 class="why__title">Why choose us?</h2>
<p class="why__p">A large part of our role is choosing which particular coffees will be featured in our
range. This means working closely with the best coffee growers to give you a more impactful
experience on every level.</p>
<div class="why__blocks">
<div class="why__block">
<img src="img/2x/coffee-bean.png"
srcset="img/2x/coffee-bean.png 1x, img/2x/[email protected] 2x" alt="coffee"
class="block__icon">
<div class="why__text">
<h3 class="block__title">Best quality</h3>
<p class="block__p">Discover an endless variety of the world’s best artisan coffee from each
of our roasters.</p>
</div>
</div>
<div class="why__block">
<img src="img/2x/surprise.png" srcset="img/2x/surprise.png 1x, img/2x/[email protected] 2x"
alt="coffee" class="block__icon">
<div class="why__text">
<h3 class="block__title">Exclusive benefits</h3>
<p class="block__p">Special offers and swag when you subscribe, including 30% off your first
shipment.</p>
</div>
</div>
<div class="why__block">
<img src="img/2x/truck.png" srcset="img/2x/truck.png 1x, img/2x/[email protected] 2x" alt="coffee"
class="block__icon special">
<div class="why__text">
<h3 class="block__title">Free shipping</h3>
<p class="block__p">We cover the cost and coffee is delivered fast. Peak freshness:
guaranteed.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="h-i-w">
<div class="container">
<h2 class="h-i-w__title">How it works</h2>
<div class="h-i-w__inner">
<span aria-hidden="true">
<span></span>
<span></span>
<span></span>
</span>
<ul class="steps">
<li class="step">
<h3 class="step__heading">
<span class="step__heading__count"> 01 </span>
<span class="step__heading__text">Pick your coffee.</span>
</h3>
<p class="step__text">
Select from our evolving range of artisan coffees. Our beans
are ethically sourced and we pay fair prices for them. There
are new coffees in all profiles every month for you to try
out.
</p>
</li>
<li class="step">
<h3 class="step__heading">
<span class="step__heading__count"> 02 </span>
<span class="step__heading__text">Choose the frequency.</span>
</h3>
<p class="step__text">
Customize your order frequency, quantity, even your roast style and grind type. Pause, skip
or cancel your subscription with no commitment through our online portal.
</p>
</li>
<li class="step">
<h3 class="step__heading">
<span class="step__heading__count"> 03 </span>
<span class="step__heading__text">Receive and enjoy!</span>
</h3>
<p class="step__text">
We ship your package within 48 hours, freshly roasted. Sit back and enjoy award-winning
world-class coffees curated to provide a distinct tasting experience.
</p>
</li>
</ul>
</div>
<a href="index3.html" class="h-i-w__link button">Create your plan</a>
</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 nav__link--active" href="index.html"> home </a>
</li>
<li class="nav__item">
<a class="nav__link" 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="facebook.com">
<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="twitter.com">
<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="instagram.com">
<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>