-
Notifications
You must be signed in to change notification settings - Fork 0
/
index5.html
216 lines (204 loc) · 14.3 KB
/
index5.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
<!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/social/width1960.jpeg/width1960.jpeg" class="vplyvy">
<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/social-hero-foundation-1440-810.png/width1960.png" alt="Your Image">
<p class="button-text">Ми докладаємо зусиль для створення кращого спільного майбутнього завдяки інвестиціям у розширення економічних прав і можливостей, різноманіття, справедливість та інклюзивність, а також завдяки пожертвам через Фундацію Coca‑Cola.</p>
<a href="index4.html" 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/zz/en/content-cards/social-card-people-1198-898.png/width1960.png" alt="Slide 1">
<div class="social-sl">
<h3 class="h1-about">Люди й громади</h3>
<p class="abot">Ми підтримуємо громади, в яких живемо й працюємо, щоб вони могли досягати більшого, особливо в скрутні часи.</p>
<a href="https://www.coca-colacompany.com/social/people-and-communities" class="cont" id="ti">Докладніше</a>
</div>
</div>
<div class="slide-about">
<img src="https://www.coca-cola.com/content/dam/onexp/zz/en/content-cards/social-card-sport-1198-898.png/width1960.png" alt="Slide 2">
<div class="social-sl">
<h3 class="h1-about">Спорт і розваги</h3>
<p class="abot">Зв'язок зі споживачами через партнерство у сфері спорту, музики, ігор та кіно є складовою ДНК The Coca Cola Company.</p>
<a href="https://www.coca-colacompany.com/social/sports-and-entertainment" class="cont" id="tir">Докладніше</a>
</div>
</div>
<div class="slide-about">
<img src="https://www.coca-cola.com/content/dam/onexp/zz/en/content-cards/social-card-human-1198-898.png/width1960.png" alt="Slide 3">
<div class="social-sl">
<h3 class="h1-about">Права людини</h3>
<p class="abot">Повага до прав людини є нашою фундаментальною цінністю. Ми працюємо таким чином, щоб створювати більш сталий бізнес, який змінює життя людей, громад та нашої планети на краще.</p>
<a href="https://www.coca-colacompany.com/social/human-rights" class="cont" id="tire">Докладніше</a>
</div>
</div>
<div class="slide-about">
<img src="https://www.coca-cola.com/content/dam/onexp/ua/uk/social/width3840%20(5).jpg/width1960.jpg" alt="Slide 4">
<div class="social-sl">
<h3 class="h1-about">Різноманіття, рівність та інклюзивність</h3>
<p class="abot">Різноманіття, рівність та Інклюзивність це основа наших цінностей і стратегії зростання, що відіграє важливу роль в успіху нашої компанії.</p>
<a href="https://www.coca-colacompany.com/social/diversity-and-inclusion" class="cont" id="tired">Докладніше</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>
<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/fsvr1umb.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"><div class="arrow-wrapper">
<div class="arrow"></div></div></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>