-
Notifications
You must be signed in to change notification settings - Fork 0
/
how.html
195 lines (189 loc) · 7.26 KB
/
how.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,700&display=swap"
rel="stylesheet"
/>
<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=Marcellus+SC&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./css/main.css" />
<link rel="stylesheet" href="./css/how.css" />
<title>How it’s made</title>
</head>
<body>
<div class="wrapper">
<!-- Header section -->
<header class="header">
<div class="header__container container">
<a
href="/"
class="header__logo logo"
target="_blank"
rel="noopener noreferrer"
>
Loretta’s Choco
</a>
<nav class="header__navigation navigation">
<ul class="navigation__list">
<li class="navigation__item">
<a href="./index.html" class="navigation__link">Home</a>
</li>
<li class="navigation__item">
<a href="./how.html" class="navigation__link">How it’s made?</a>
</li>
<li class="navigation__item">
<a href="./reviews.html" class="navigation__link"
>Chocolate is loved</a
>
</li>
</ul>
<button type="button" class="navigation__btn btn">
Order here
</button>
</nav>
</div>
</header>
<!-- main -->
<main class="main">
<!-- Hero section -->
<!-- How it's made section -->
<section id="how" class="how">
<div class="how__container container">
<div class="how__left">
<img
class="how__pic"
src="./images/how/how_bg.png"
alt="making Chocolate"
/>
</div>
<div class="how__right">
<h2 class="how__title title">how it’s <span>made?</span></h2>
<ul class="how__list">
<li class="how__item">
Heat the milk in a saucepan without bringing it to a boil. Add
sugar and cocoa powder.
</li>
<li class="how__item">
At the same time, prepare a water bath. Melt the butter on it.
</li>
<li class="how__item">
"Mix" the milk mixture and already liquid butter. Mix
thoroughly with a silicone spatula so that the mass becomes
uniform and silky.
</li>
<li class="how__item">
Heat the mixture over low heat, letting it barely boil.
</li>
<li class="how__item">
Pour the chocolate into special containers (can be replaced
with ice molds). Allow to cool and harden.
</li>
</ul>
<button type="button" class="how__btn btn">Buy now</button>
</div>
</div>
</section>
<!-- Reviews section -->
<section class="process">
<div class="process__container container">
<div class="process__right">
<ul class="process__list">
<li class="process__item">
<h3 class="process__title title">Chocolate making process</h3>
<p class="process__txt">
Try our chocolates today and discover the perfect balance of
flavor
</p>
<p class="process__txt">
Our beans, which really are a true gift of nature, originate
from five different countries. If we had to put the
character of the beans into one word, we would say they are
all rich. In a different way, of course, and that makes them
all special: smoky Brazil, spicy, earthy, woody Jamaica,
fruity, nutty Madagascar, herbal and ripe fruit Mexico, and
rich fruity-spicy combination of São Tomé.
</p>
</li>
<li class="process__item">
<h3 class="process__title title">Ingredients</h3>
<p class="process__txt">
Quality raw ingredients are the key of our success.
</p>
<p class="process__txt">
Most of the cocoa beans we use are organic. Also cocoa
butter, cane sugar, milk powder, berries, spruce sprouts,
birch sap, etc are all organic. Wherever possible we use
local ingredients. Often you will find us hiking in the
forest searching for new and amazing flavors.
</p>
</li>
</ul>
</div>
<div class="process__left">
<img
class="process__pic"
src="./images/how/how_white.jpg"
alt="making Chocolate"
/>
</div>
</div>
</section>
</main>
<!-- footer section -->
<footer class="footer">
<div class="footer__container container">
<div class="footer__first">
<h2 class="footer__title title">
<span>Chocolate</span> a delicious cure for a bad day
</h2>
<address class="footer__adress adress">
<p class="adress__subtitle">Contact us:</p>
<ul class="adress__list">
<li class="adress__item">
<a class="adress__link" href="tel:+380684439426"
>+380 (68) 443-94-26</a
>
</li>
<li class="adress__item">
<a class="adress__link" href="mailto:simplychoc@gmail.com"
>simplychoc@gmail.com</a
>
</li>
</ul>
</address>
</div>
<div class="footer__second">
<ul class="footer__nav nav">
<li class="nav__item">
<a class="nav__link" href="">Home</a>
</li>
<li class="nav__item">
<a class="nav__link" href="./how.html">How it’s made?</a>
</li>
<li class="nav__item">
<a class="nav__link" href="">Chocolate is loved</a>
</li>
</ul>
<div class="footer__wrapper">
<input
class="footer__input"
type="email"
placeholder="Enter your email"
/>
<button class="footer__btn btn" type="submit">Subscribe</button>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>