-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
179 lines (169 loc) · 10.3 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
<!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.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Coffeeroaster</title>
</head>
<body>
<header class="header header_container">
<a href="" class="header__link"><img class="header__img" src="./assets/icons/logo.svg" alt="logo"></a>
<button class="header__button" type="menu">
<span class="header__button-inner"></span>
<span class="visually-hidden">Menu toggler button</span>
</button>
<nav class="nav header__nav">
<ul class="nav__navbar">
<li class="navbar__nav-item"> <a class="navbar__nav-link header__nav-link" href="#">Home</a> </li>
<li class="navbar__nav-item"> <a class="navbar__nav-link header__nav-link" href="#">About us</a> </li>
<li class="navbar__nav-item"> <a class="navbar__nav-link header__nav-link" href="#">Create your plan</a> </li>
</ul>
</nav>
</header>
<div class="container">
<main class="hero">
<h1 class="hero__title">Great coffee
made simple.</h1>
<p class="hero__txt">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" href="#">Create your plan</a>
</main>
<section class="collection">
<h3 class="collection__title">our collection</h3>
<ul class="collection__list">
<li class="collection__list-item">
<img class="collection__list-img" src="./assets/img/img2.png" alt="coffee">
<div class="collection__txt">
<h4 class="collection__txt-title">Gran Espresso</h4>
<p class="collection__txt-text">Light and flavorful blend with cocoa and black pepper for an intense experience.</p>
</div>
</li>
<li class="collection__list-item">
<img class="collection__list-img" src="./assets/img/img3.png" alt="coffee">
<div class="collection__txt">
<h4 class="collection__txt-title">Planalto</h4>
<p class="collection__txt-text">Brazilian dark roast with rich and velvety body, and hints of fruits and nuts.</p>
</div>
</li>
<li class="collection__list-item">
<img class="collection__list-img" src="./assets/img/img4.png" alt="coffee">
<div class="collection__txt">
<h4 class="collection__txt-title">Piccollo</h4>
<p class="collection__txt-text">Mild and smooth blend featuring notes of toasted almond and dried cherry.</p>
</div>
</li>
<li class="collection__list-item list-item">
<img class="collection__list-img" src="./assets/img/kopi4.png" alt="coffee">
<div class="collection__txt">
<h4 class="collection__txt-title">Danche</h4>
<p class="collection__txt-text">Ethiopian hand-harvested blend densely packed with vibrant fruit notes.</p>
</div>
</li>
</ul>
</section>
<section class="box">
<h3 class="box__title">Why choose us?</h3>
<p class="box__txt">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="box__cards">
<div class="cards__card">
<div class="card__img-wrapper">
<img class="card__img" src="./assets/icons/coffee.svg" alt="coffee">
</div>
<div class="card-txt-wrappper">
<h3 class="card-txt__title">Best quality</h3>
<p class="card-txt__txt">Discover an endless variety of the world’s best artisan coffee from each of our roasters.</p>
</div>
</div>
<div class="cards__card">
<div class="card__img-wrapper">
<img class="card__img" src="./assets/icons/Gift.svg" alt="coffee">
</div>
<div class="card-txt-wrappper">
<h3 class="card-txt__title">Exclusive benefits</h3>
<p class="card-txt__txt">Special offers and swag when you subscribe, including 30% off your first shipment.</p>
</div>
</div>
<div class="cards__card cards__card-van">
<div class="card__img-wrapper">
<img class="card__img card__img-van" src="./assets/icons/Delivery.svg" alt="coffee">
</div>
<div class="card-txt-wrappper">
<h3 class="card-txt__title">Free shipping</h3>
<p class="card-txt__txt">We cover the cost and coffee is delivered fast. Peak freshness: guaranteed.</p>
</div>
</div>
</div>
</section>
<section class="process">
<h4 class="process__title">How it works</h4>
<div class="process__circle">
<div class="circle-wrapper">
<span class="circle__round"></span>
<span class="circle__round"></span>
<span class="circle__round"></span>
</div>
<span class="circle__line"></span>
</div>
<ul class="process__list">
<li class="process__list-item">
<span class="process__list-number">01</span>
<h4 class="process__list-title">Pick your
coffee</h4>
<p class="process__list-txt">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="process__list-item">
<span class="process__list-number">02</span>
<h4 class="process__list-title">Choose the frequency</h4>
<p class="process__list-txt">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="process__list-item">
<span class="process__list-number">03</span>
<h4 class="process__list-title">Receive and enjoy!</h4>
<p class="process__list-txt">We ship your package within 48 hours, freprocess__shly-oasted. Sit back and enjoy award-winning world-class coffees curated to provide a distinct tasting experience.</p>
</li>
</ul>
<a class="process__link" href="#">Create your plan</a>
</section>
<footer class="footer">
<a href="#" class="footer__logo"><img class="footer__logo-img" src="./assets/icons/logo 2.svg" alt="logo"></a>
<ul class="nav__navbar">
<li class="navbar__nav-item navbar__nav-item-home"> <a class="navbar__nav-link" href="#">Home</a> </li>
<li class="navbar__nav-item"> <a class="navbar__nav-link" href="#">About us</a> </li>
<li class="navbar__nav-item"> <a class="navbar__nav-link" href="#">Create your plan</a> </li>
</ul>
<ul class="footer__social-links">
<li class="footer__social-links-item">
<a class="footer__social-link" href="#">
<svg class="footer__social-icon" width="24" height="24" viewBox="0 0 24 24" 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"
/>
</svg>
</a> </li>
<li class="footer__social-links-item">
<a class="footer__social-link" href="#">
<svg class="footer__social-icon" width="24" height="20" viewBox="0 0 24 20" 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"/>
</svg>
</a> </li>
<li class="footer__social-links-item">
<a class="footer__social-link" href="#">
<svg class="footer__social-icon" width="24" height="24" viewBox="0 0 24 24" 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"/>
</svg>
</a> </li>
</ul>
</footer>
</div>
<script>
const elToggler = document.querySelector(".header__button");
const elHeader = document.querySelector(".header");
elToggler.addEventListener("click", function(){
elHeader.classList.toggle("header--opened")
})
</script>
</body>
</html>