-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
335 lines (291 loc) · 16.5 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
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Save the planet</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap&subset=cyrillic-ext" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i&display=swap&subset=cyrillic-ext" rel="stylesheet">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/nav.css">
<link rel="stylesheet" href="css/hamburger.css">
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/skills.css">
<link rel="stylesheet" href="css/steps.css">
<link rel="stylesheet" href="css/places.css">
<link rel="stylesheet" href="css/statistics.css">
<link rel="icon" href="img/planet.png">
</head>
<body id="top">
<nav>
<div class="navbar">
<div class="navigation">
<button class="nav-icon">
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<div class="li-box">
<ul id="mobile-nav-links">
<li><a class="nav-link js-scroll" href="#planet">чому</a></li>
<li><a class="nav-link js-scroll" href="#steps-section">перші кроки</a></li>
<li><a class="nav-link js-scroll" href="#statistics-section">статистика</a></li>
<li><a class="nav-link js-scroll" href="#places">місця</a></li>
</ul>
<ul id="social-networks">
<li><a class="social-items"> <img src="img/facebook.png"></a></li>
<li><a class="social-items"> <img src="img/instagram.png"></a></li>
<li><a class="social-items"> <img src="img/twitter.png"></a></li>
</ul>
</div>
</div>
</div>
</nav>
<header>
<div class="planet planet-left">
<img class="w100" src="img/planet.png" alt="planet">
</div>
<div class="logo">
<img src="img/logo.png" class="subtitle w100" alt="">
<p>THE PLANET</p>
</div>
<div class="planet planet-right">
<img class="w100" src="img/planet.png" alt="planet">
</div>
</header>
<section id="planet">
<div class="planet planet-top">
<img class="w100" src="img/planet.png" alt="planet">
</div>
<div class="section-content">
<h2 class="section-header">Чому?</h2>
<p class="section-subhead">філософія zero waste</p>
<div class="section-background">
<p class="text-block">Безсмітництво (англ. zero waste) — це філософія, яка спрямовується на те, щоб використовувати ресурси планети довше та ефективніше. <br> <br>
Половина пластику, який ми використовуємо щорічно, припадає на одноразові речі, як от упаковка або соломинки для напоїв.<br> <br>
Тривалість життя таких одноразових предметів становить у середньому 14 хвилин. А розкладається пластик від 400 до 1000 років.
</p>
</div>
</div>
</section>
<section id="steps-section">
<h2 class="section-header mobile-section-header">Перші кроки</h2>
<p class="section-subhead">до zero waste</p>
<div class="step">
<img class="step-img" src="img/bottles.png">
<div class="step-content">
<p class="step-number right">1</p>
<p class="step-text text-position-right">Носіть із собою багаторазову пляшку для води. Не беріть одну з мільйона пластикових пляшок, які щохвилини продаються по всьому світу. </p>
</div>
</div>
<div class="step">
<div class="step-content">
<p class="step-number left">2</p>
<p class="step-text text-position-left"> Мінімізуйте використання одноразових пластикових стаканчиків, замінивши їх багаторазовими. Це стосується також паперових стаканчиків для кави з собою. </p>
</div>
<img class="step-img" src="img/cups.png">
</div>
<div class="step">
<img class="step-img" src="img/blades.png">
<div class="step-content">
<p class="step-number right">3</p>
<p class="step-text text-position-right">Т-подібна бритва стане найкращою довговічною альтернативою одноразовим з пластику, які щомісяця опиняються в смітнику. </p>
</div>
</div>
<div class="step">
<div class="step-content">
<p class="step-number left">4</p>
<p class="step-text text-position-left"> Хорошою заміною для пластикових пакетів стане багаторазова сумка-шопер, яка як бонус має приємніший естетичний вигляд.</p>
</div>
<img class="step-img" src="img/bags.png">
</div>
<div class="step">
<img class="step-img" src="img/brushes.png">
<div class="step-content">
<p class="step-number right">5</p>
<p class="step-text text-position-right">Бамбукова зубна щітка вдало замінить звичайну з пластику, адже бамкук – це ресурс, що швидко відновлюється. Така щітка прослужить не менше та зменшить викиди пластику. </p>
</div>
</div>
</section>
<section id="statistics-section">
<h2 class="section-header">статистика</h2>
<div class="statistics-step">
<div class="graphics left-graphic-text">
<div class="graphic-container">
<div class="graphic" data-animation="dark-graphic" data-scroll>
<span class="graphic-text">1300 грн</span>
</div>
</div>
<div class="graphic-container">
<div class="graphic" data-animation="first-light-graphic" data-scroll>
<span class="graphic-text">150 грн</span>
</div>
</div>
</div>
<div class="statistics-content">
<div class="statistics-bullets">
<div class="statistics-bullet">
<div class="bullet dark"></div>
<p class="bullet-text">
кошти витрачені за рік купівлі поліетиленових пакетів.
</p>
</div>
<div class="statistics-bullet">
<div class="bullet light"></div>
<p class="bullet-text">
вартість екосумок
</p>
</div>
</div>
<p class="statistics-content-text">Заміна пластикових пакетів на екосумки зекономить <span class="bold">90%</span> коштів. Середньостатистична сім’я витрачає від 1300грн в рік на пакети. Еко сумка в середньому коштує від 20 до 150грн.</p>
</div>
</div>
<div class="statistics-step">
<div class="statistics-content wider">
<div class="statistics-bullets">
<div class="statistics-bullet">
<div class="bullet dark"></div>
<p class="bullet-text">
перероблені пакети.
</p>
</div>
<div class="statistics-bullet">
<div class="bullet light"></div>
<p class="bullet-text">
пакети на сміттєзвалищах.
</p>
</div>
</div>
<p class="statistics-content-text">Лише <span class="bold">1 з 10</span> виготовлених пакетів потрапляє на переробку. Щонайменше 90% лежать на сміттєзвалищах або забруднюють водойми. Середня тривалість життя пакета від моменту покупки — 12 хвилин.</p>
</div>
<div class="graphic-squares">
<div class="column">
<div class="square light" data-animation="square-size" data-scroll></div>
<div class="square light" data-animation="square-size" data-scroll></div>
<div class="square light" data-animation="square-size" data-scroll></div>
<div class="square light" data-animation="square-size" data-scroll></div>
<div class="square light" data-animation="square-size" data-scroll></div>
</div>
<div class="column">
<div class="square dark" data-animation="square-size" data-scroll></div>
<div class="square light" data-animation="square-size" data-scroll></div>
<div class="square light" data-animation="square-size" data-scroll></div>
<div class="square light" data-animation="square-size" data-scroll></div>
<div class="square light" data-animation="square-size" data-scroll></div>
</div>
</div>
</div>
<div class="statistics-step">
<div class="graphics">
<div class="graphic-container">
<div class="graphic" data-animation="dark-graphic" data-scroll>
<span class="graphic-text">250 грн</span>
</div>
</div>
<div class="graphic-container">
<div class="graphic" data-animation="second-light-graphic" data-scroll>
<span class="graphic-text">100 грн</span>
</div>
</div>
</div>
<div class="statistics-content">
<div class="statistics-bullets">
<div class="statistics-bullet">
<div class="bullet dark"></div>
<p class="bullet-text">
вартість річного запасу одноразових бритв.
</p>
</div>
<div class="statistics-bullet">
<div class="bullet light"></div>
<p class="bullet-text">
вартість змінних лез для Т-подібної бритви.
</p>
</div>
</div>
<p class="statistics-content-text">Одне лезо Т-подібної бритви служить від 1 до 6 місяців. При цьому коштують вони приблизно 100 гривень за набір із п’яти лез. Це втричі економніше при заміні леза кожні 2-3 місяці.</p>
</div>
</div>
<div class="statistics-step">
<div class="statistics-content wider">
<div class="statistics-bullets">
<div class="statistics-bullet">
<div class="bullet dark"></div>
<p class="bullet-text">
кошти витрачені за рік купівлі води в пляшках.
</p>
</div>
<div class="statistics-bullet">
<div class="bullet light"></div>
<p class="bullet-text">
витрати на воду набраної в свою пляшку.
</p>
</div>
</div>
<p class="statistics-content-text"> Придбання багаторазової пляшки та набирання води вдома або з апаратів питної води дозволить вам заощадити щонайменше 90% коштів на купівлю води з собою.</p>
</div>
<div class="graphics right-graphic-text">
<div class="graphic-container">
<div class="graphic" data-animation="dark-graphic" data-scroll>
<span class="graphic-text">3700 грн</span>
</div>
</div>
<div class="graphic-container">
<div class="graphic" data-animation="third-light-graphic" data-scroll>
<span class="graphic-text">300 грн</span>
</div>
</div>
</div>
</div>
</section>
<section id="places">
<h2 class="section-header">Місця</h2>
<p class="section-subhead">для утилізування сміття</p>
<div class="places">
<div class="place">
<p class="street">
Володимира Великого 34 <br>
ПП «Чистий світ»
</p>
<p class="rubish-types">Склотара, склобій,макулатура, поліетилен, пластикові пляшки,
пластик, алюмінієві банки.</p>
</div>
<div class="place">
<p class="street">
Курмановича 9<br>
ПП «Чистий світ»
</p>
<p class="rubish-types">Склотара, склобій, макулатура, поліетилен, пластикові пляшки, пластик.
</p>
</div>
<div class="place">
<p class="street">
Пасічна 127<br>
ТОВ ДВ_ЕКОСВІТ
</p>
<p class="rubish-types">Акамулятори, лампи ртутьвмісні, фармацевтична продукція, склотара, макулатура, метал, пластик.</p>
</div>
<div class="place">
<p class="street">
Моринецька 14а<br>
ПП Янтар
</p>
<p class="rubish-types">Макулатура, пластик, склобій, поліетилен, металобрухт.</p>
</div>
<div class="place">
<p class="street">
Пл. Кропивницького 1<br>
ПП Світлиця
</p>
<p class="rubish-types">Одяг.</p>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="js/nav.js"></script>
<script src="https://unpkg.com/scroll-out/dist/scroll-out.min.js"></script>
<script src="js/scroll-out-init.js"></script>
<script src="js/script.js"></script>
</body>
</html>