-
Notifications
You must be signed in to change notification settings - Fork 0
/
index4.html
250 lines (238 loc) · 19.1 KB
/
index4.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
<!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">
<title>Ініціативи сталого розвитку | Coca-Cola UA</title>
<link rel="stylesheet" href="styles.css" />
<link rel = "shortcut icon" href = "media/pin.png">
</head>
<body>
<header class="coke-header">
<div class="container">
<a href="index.html"><img src="https://www.coca-cola.com/content/dam/onexp/ua/uk/logo-footer/ukraine-coca-cola-logo_black_600x96.png" id="logo"></a>
<nav>
<ul>
<li><a href="index2.html">Бренди</a></li>
<li class="submenu">
<a href="#">Дізнатися</a>
<ul class="submenu-content">
<li><a href="index3.html">App page</a></li>
</ul>
</li>
<li class="submenu">
<a href="#">Вплив</a>
<ul class="submenu-content">
<li><a href="index4.html">Сталий розвиток</a></li>
<li><a href="index5.html">Соціальні мережі</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
<img src="https://www.coca-cola.com/content/dam/onexp/ua/uk/sustainability/sustainability-heropage.png/width1960.png" class="vplyv">
<div class="vidstup"></div>
<div class="title-soc">
<h1>З повагою до планети, людей і громад</h1>
<b><p>Наша мета — забезпечити краще й екологічно стабільніше майбутнє для нас усіх. Завдяки правильному веденню бізнесу ми прагнемо покращити життя людей, громад і нашої планети. Удосконалюючи нашу компанію, ми можемо допомогти побудувати більш надійне та стале майбутнє для всіх нас.</p></b>
<b><p>Ми застосовуємо системний підхід до сталого розвитку, спрямований на соціальний, екологічний та економічний розвиток. Лише комплексний підхід може забезпечити трансформаційні й тривалі зміни.</p></b>
</div>
<div class="image-container">
<div class="image-gradient"></div>
<img src="https://www.coca-cola.com/content/dam/onexp/zz/en/hero-banners/sustainability-hero-strategy-1440-810.png/width1960.png" alt="Your Image">
<p class="button-text">Наша стратегія сталого розвитку визначає те, як ми підтримуємо й залучаємо до співпраці тих чудових людей, які творять наш бренд — від фермерів і співробітників до партнерів із виробництва напоїв, постачальників, клієнтів, споживачів і громад, які ми називаємо домом. Це допомагає нам рухатися вперед до наших цілей щодо захисту довкілля.</p>
<a href="https://www.coca-colacompany.com/sustainability" class="button">Дізнатися більше</a>
<div class="vidstup"></div>
<h1>Наші пріоритетні напрямки сталого розвитку</h1>
<div class="mini-vidstup"></div>
</div>
<div class="slider-about">
<div class="slides-about">
<div class="slide-about">
<img src="https://www.coca-cola.com/content/dam/onexp/ua/uk/sustainability/wwf-sustainability-page.png/width1960.png" alt="Slide 1">
<div class="about">
<h3 class="h1-about">WWF-CEЕ та Фундація Coca-Cola продовжать партнерство і співпрацю для посилення стійкості до кліматичних змін та покращення стану басейну річки Дунай</h3>
<p class="abot">19 березня 2024 Всесвітній фонд природи Центральна та Східна Європа (WWF-CEE) та Фундація Coca‑Cola (The Coca‑Cola Foundation) оголосили про продовження партнерства в межах проєкту Living Danube Partnership. Його мета – підтримувати заходи з підвищення стійкості басейну річки Дунай до кліматичних змін та ризиків, пов’язаних з водними ресурсами, протягом наступних трьох років. На підтримку проєкту Фундація Coca‑Cola виділяє 1,53 мільйона доларів США.</p>
<a href="https://www.coca-cola.com/ua/uk/sustainability/wff-cee-living-danube" class="cont">Докладніше</a>
</div>
</div>
<div class="slide-about">
<img src="https://www.coca-cola.com/content/dam/onexp/zz/en/content-cards/sustainability-card-water-1198-898.png/width1960.png" alt="Slide 2">
<div class="about">
<h3 class="h1-about">Управління водними ресурсами</h3>
<p class="abot">Наша стратегія водокористування спрямована на дотримання водної безпеки шляхом місцевого поповнення (повернення води громадам і природі), пропагування розумної політики у сфері водокористування, а також відповідального та ефективного використання води на всіх наших підприємствах і в громадах, яким ми служимо.</p>
<a href="https://www.coca-colacompany.com/sustainability/water-stewardship" class="cont" id="individ">Докладніше</a>
</div>
</div>
<div class="slide-about">
<img src="https://www.coca-cola.com/content/dam/onexp/zz/en/content-cards/sustainability-card-packaging-1198-898.png/width1960.png" alt="Slide 3">
<div class="about">
<h3 class="h1-about">Екологічне пакування</h3>
<p class="abot">Ми прагнемо збирати й переробляти кожну продану пляшку чи бляшанку, повторно переробляти 100% нашої упаковки та підвищити вміст вторинної сировини в наших пляшках до 50%.</p>
<a href="https://www.coca-colacompany.com/sustainability/packaging-sustainability" class="cont" id="individual">Докладніше</a>
</div>
</div>
<div class="slide-about">
<img src="https://www.coca-cola.com/content/dam/onexp/zz/en/content-cards/sustainability-card-products-1198-898.png/width1960.png" alt="Slide 4">
<div class="about">
<h3 class="h1-about">У нашій продукції</h3>
<p class="abot">Ми пропонуємо широкий асортимент напоїв у різних категоріях, оскільки прагнемо бути компанією повного циклу й постачати багатий вибір продукції для задоволення потреб споживачів упродовж дня, зокрема напої з меншим вмістом цукру та напої з підвищеною поживною цінністю. Від газованої води до молочних продуктів, безалкогольних напоїв тощо.</p>
<a href="https://www.coca-colacompany.com/sustainability/in-our-products" class="cont" id="individual-h">Докладніше</a>
</div>
</div>
<div class="slide-about">
<img src="https://www.coca-cola.com/content/dam/onexp/zz/en/content-cards/sustainability-card-climate-1198-898.png/width1960.png" alt="Slide 5">
<div class="about">
<h3 class="h1-about">Діяльність у сфері захисту клімату</h3>
<p class="abot">Ми віримо в скорочення власних викидів парникових газів та підвищення стійкості до змін клімату завдяки інвестиціям, які дозволяють нашим підприємствам і громадам адаптуватися до кліматичних змін.</p>
<a href="https://www.coca-colacompany.com/sustainability/climate" class="cont" id="individ-h">Докладніше</a>
</div>
</div>
<div class="slide-about">
<img src="https://www.coca-cola.com/content/dam/onexp/zz/en/content-cards/sustainability-card-agriculture-1198-898.png/width1960.png" alt="Slide 6">
<div class="about">
<h3 class="h1-about">Екологічне вирощування сільськогоспо дарської продукції</h3>
<p class="abot">Наша продукція залежить від здорового ланцюга постачання і процвітання фермерських громад. Разом із постачальниками й низкою партнерів ми працюємо над створенням системних змін у нашому ланцюгу постачання сільськогосподарської продукції.</p>
<a href="https://www.coca-colacompany.com/sustainability/sustainable-agriculture" class="cont" id="individual-height">Докладніше</a>
</div>
</div>
</div>
<div class="buttons">
<button class="prev" id="button">❮</button>
<button class="next" id="button">❯</button>
</div>
<div class="dots-container-about"></div>
</div>
<script>
const slidesAbout = document.querySelector('.slides-about');
const slideWidthAbout = document.querySelector('.slide-about').clientWidth;
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');
const dotsContainerAbout = document.querySelector('.dots-container-about');
const slideCountAbout = document.querySelectorAll('.slide-about').length;
let counterAbout = 0;
// Додамо кружечки
for (let i = 0; i < slideCountAbout; i++) {
const dot = document.createElement('span');
dot.classList.add('dot-about');
dot.dataset.index = i;
dot.addEventListener('click', (event) => {
const clickedDotIndex = parseInt(event.target.dataset.index);
counterAbout = clickedDotIndex;
showSlide(counterAbout);
});
dotsContainerAbout.appendChild(dot);
}
const dotsAbout = document.querySelectorAll('.dot-about');
function showSlide(index) {
slidesAbout.style.transform = `translateX(-${index * slideWidthAbout}px)`;
dotsAbout.forEach((dot, i) => {
dot.classList.toggle('active', i === index);
});
}
function prevSlide() {
counterAbout--;
if (counterAbout < 0) {
counterAbout = slideCountAbout - 1;
}
showSlide(counterAbout);
}
function nextSlide() {
counterAbout++;
if (counterAbout >= slideCountAbout) {
counterAbout = 0;
}
showSlide(counterAbout);
}
prevBtn.addEventListener('click', prevSlide);
nextBtn.addEventListener('click', nextSlide);
// Початкове позначення активного кружечка
showSlide(counterAbout);
</script>
<div class="vidstup"></div>
<h1>Новини щодо сталого розвитку</h1>
<div class="mini-vidstup"></div>
<div class="news">
<div class="image-news">
<img src="https://www.coca-cola.com/content/dam/onexp/zz/en/content-cards/sustainability-card-system-1198-898.png/width1960.png" alt="Img 1">
<div class="about-news">
<h3 class="h1-about">Система компаній Coca‑Cola й Фундація Coca‑Cola мобілізують зусилля для ліквідації наслідків повені в штаті Кентуккі</h3>
<a href="https://www.coca-colacompany.com/media-center/coca-cola-showcases-solutions-at-convenience-stores-show" class="cont" id="ind">Докладніше</a>
</div>
</div>
<div class="image-news">
<img src="https://www.coca-cola.com/content/dam/onexp/zz/en/content-cards/sustainability-card-packaging-na-1198-898.png/width1960.png" alt="Img 2">
<div class="abot-news">
<h3 class="h1-about">DASANI та Sprite підвищують вимоги до екологічного пакування в Північній Америці</h3>
<a href="https://www.coca-colacompany.com/media-center/dasani-sprite-boost-sustainability" class="cont" id="indv">Докладніше</a>
</div>
</div>
</div>
<div class="vidstup"></div>
<h1>Наші глобальні цілі, ініціативи й досягнення у сфері</h1>
<h1>екологічного, соціального й управлінського розвитку</h1>
<div class="vidstup"></div>
<div class="container-img">
<img src="https://www.coca-cola.com/content/dam/onexp/zz/en/campaign-cards/social-campaign-card-1280-1024.png/width1960.png" id="imgg" alt="Your Image">
<div class="text-img">
<h3 class="h1-about">Звіт щодо екологічного, соціального й управлінського розвитку за 2021 рік</h3>
<p class="abot">Ми створюємо бренди й продукти, які подобаються людям, і водночас будуємо більш стале майбутнє для нашого бізнесу та планети. І робимо все це, не відступаючи від нашої мети: оновлювати світ і змінювати його на краще.</p>
<a href="https://www.coca-colacompany.com/reports/business-and-sustainability-report" ><input type="button" value="Дізнатися, як" class="knop"></input></a>
</div>
<div class="mini-vidstup"></div>
<div class="containe-img">
<img src="https://www.coca-cola.com/content/dam/onexp/ua/uk/sustainability/sustainability-teaser.png/width1960.png" id="imgg" alt="Your Image">
<div class="tet-img">
<h3 class="h1-about">Ресурсний центр зі сталого розвитку</h3>
<p class="abot">Цей ресурс містить огляд наших зусиль, спрямованих на побудову більш сталого бізнесу й кращого спільного майбутнього, які здатні змінити життя людей, громад і нашої планети на краще.</p>
<a href="https://www.coca-colacompany.com/sustainability-resource-center" ><input type="button" value="Дізнатися про наші цілі й ініціативи" class="kno"></input></a>
</div>
<footer>
<div class="up">
<img src="https://www.coca-cola.com/content/dam/onexp/ua/uk/logo-footer/ukraine-coca-cola-logo_white_600x96.png" id="image">
<input type="button" value="Ukraine" class="knopky"></input>
</div>
<fieldset>
<div class="foot">
<div class="field">
<div class="about-us">
<h2 class="aboutt">ПРО НАС</h2>
<ul>
<li class="abz"><a href="https://www.coca-colacompany.com/company" target="_blank" rel="noopener noreferrer">Наша компанія</a></li>
<li class="abz"><a href="/ua/uk/media-center">Медіацентр</a></li>
<li class="abz"><a href="https://www.coca-colacompany.com/about-us/history" target="_blank" rel="noopener noreferrer">Історія</a></li>
<li class="abz"><a href="https://careers.coca-colacompany.com/" target="_blank" rel="noopener noreferrer">Вакансії</a></li>
</ul>
</div>
<div class="help">
<h2 class="helpt">ПОТРІБНА ДОПОМОГА?</h2>
<ul>
<li class="abz"><a href="/ua/uk/about-us/faq">Поширені запитання</a></li>
<li class="abz"><a href="https://www.coca-cola.com/ua/uk/sitemap">Мапа сайту</a></li>
<li class="abz"><a href="/ua/uk/about-us/contact-us">Звʼязок з нами</a></li>
</ul>
</div>
<div class="info">
<h2 class="infot">ПРАВОВА ІНФОРМАЦІЯ</h2>
<ul>
<li class="abz"><a href="https://www.coca-cola.com/ua/uk/legal/terms-of-service">Правила користування</a></li>
<li class="abz"><a href="/ua/uk/legal/privacy-policy">Політика конфіденційності</a></li>
<li class="abz"><a href="#js-open-onetrust-preference-center">Налаштування файлів cookie</a></li>
<li class="abz"><a href="/ua/uk/legal/cookie-policy">Політика файлів cookies</a></li>
</ul>
</div>
</div>
<div class="social">
<a href="https://www.facebook.com/TheCocaColaCoUA"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS1-7EPnmXMurmL2aqtza8zIZs1cduVnA3DQLuSKHd3ih9na0do" class="facebook"></a>
<a href="https://www.instagram.com/cocacola_ua/"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR-A6-TgkLesdTfEfHUSZ7VhiZwIPELPtkrPJIYsWc-HmqNVMQu" class="insta"></a>
<a href="https://www.linkedin.com/company/the-coca-cola-company-ukraine/"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSQOeZYatQmHFDvCgW49lSbp4J9nRDj2iaerg9ppPS1cBc6cgmx" class="in"></a>
<a href="https://www.youtube.com/channel/UCQWvESPkQV226iynxjgM9AA"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTP1E7jChcKwfZTyJ-xk1_-QjpS6x5myP3WoVbciPpUsQ5m_560" class="ut"></a>
</div>
</div>
</fieldset>
<p>© 2024 The Coca‑Cola Company, всі права захищені.</p>
</footer>
</body>
</html>