-
Notifications
You must be signed in to change notification settings - Fork 0
/
about.html
334 lines (322 loc) · 21.1 KB
/
about.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>COS.RED</title>
<!-- CDN -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://unpkg.com/swiper@7/swiper-bundle.min.css"
/>
<!-- Styles -->
<link rel="stylesheet" href="css/fonts.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header class="header">
<a href="#">
<img class="logo" src="images/logo.png" alt="COS.RED">
</a>
<nav class="header__navigation" aria-label="Main navigation" id="menu">
<a href="#" class="header__navigation-item">Home</a>
<a href="#" class="header__navigation-item">About us</a>
<a href="#" class="header__navigation-item">News</a>
<a href="#" class="header__navigation-item">Events</a>
<a href="#" class="header__navigation-item">Contacts</a>
</nav>
<button class="hamburger-button" aria-label="Open or close menu" id="menu-button">
<span></span>
<span></span>
<span></span>
</button>
</header>
<main class="main">
<div class="container">
<ol class="breadcrumbs">
<li class="breadcrumbs__item">
<a href="#">Home</a>
</li>
<li class="breadcrumbs__item">
About
</li>
</ol>
<section class="how-section">
<h2 class="title" data-shadow-text="how it works">
how it works
<span></span>
<span></span>
</h2>
<div class="how-section__grid">
<div class="how-section__media">
<img src="images/how-image.jpg" alt="">
</div>
<div class="how-section__content">
<h3 class="how-section__subtitle">Lorem ipsum dolor sit amet, consectetur </h3>
<p class="how-section__text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sit faucibus dolor pretium, est id.
Lacus, quis ac ultrices dignissim elit. Pharetra faucibus lorem montes, faucibus maecenas sed in
in. Iaculis dignissim lectus enim vitae adipiscing eu eget auctor. Orci nibh purus ut lacinia
sit metus, nullam in. Amet augue sit ornare vitae. Tortor tristique posuere ac lacus at. Nisl,
scelerisque turpis fringilla ultrices ornare odio integer ac nunc.
</p>
<ol class="how-section__list">
<li class="how-section__list-item">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sit faucibus dolor pretium, est
</li>
<li class="how-section__list-item">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sit faucibus dolor pretium, est id.
Lacus, quis ac ultrices dignissim elit.
</li>
<li class="how-section__list-item">
Lorem ipsum dolor sit amet, consectetur
</li>
<li class="how-section__list-item">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>
</ol>
</div>
</div>
</section>
<section class="what-section">
<h2 class="title" data-shadow-text="WHAT PEOPLE ARE SAYING">
WHAT PEOPLE ARE SAYING
<span></span>
<span></span>
</h2>
<h3 class="what-section__subtitle">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sit faucibus dolor pretium, est id. Lacus, quis
ac ultrices dignissim elit.
</h3>
<div class="what-section__slider">
<div class="swiper swiper-review">
<div class="swiper-wrapper">
<div class="swiper-slide">
<article class="review-card">
<blockquote class="review-card__text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Metus erat volutpat leo
penatibus mauris, sagittis, id posuere. Sagittis, pellentesque viverra ac porta nisl
interdum dolor malesuada pharetra. Gravida vel at vitae
</blockquote>
<footer class="review-card__footer">
<div class="review-card__user">
<div class="review-card__user-img">
<img src="images/avatar.png" alt="">
</div>
<div>
<cite class="review-card__user-name">Name</cite>
<div class="review-card__user-desc">Ceo Loop Inc</div>
</div>
</div>
<svg class="review-card__quotes" width="50" height="50" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
<path d="M42.3107 13.1084C46.2419 17.375 45.8461 22.8542 45.8336 22.9167L45.8336 39.5834C45.8336 40.1359 45.6141 40.6658 45.2234 41.0565C44.8327 41.4472 44.3028 41.6667 43.7503 41.6667L31.2503 41.6667C28.9523 41.6667 27.0836 39.7979 27.0836 37.5L27.0836 22.9167C27.0836 22.3642 27.3031 21.8342 27.6938 21.4435C28.0845 21.0528 28.6144 20.8334 29.1669 20.8334L35.5794 20.8334C35.5354 19.8034 35.2277 18.802 34.6857 17.925C33.6273 16.2563 31.6336 15.1167 28.7565 14.5417L27.0836 14.2084L27.0836 8.33336L29.1669 8.33336C34.9648 8.33336 39.3878 9.9396 42.3107 13.1084ZM19.3794 13.1084C23.3128 17.375 22.9148 22.8542 22.9023 22.9167L22.9023 39.5834C22.9023 40.1359 22.6828 40.6658 22.2921 41.0565C21.9014 41.4472 21.3715 41.6667 20.819 41.6667L8.31901 41.6667C6.02109 41.6667 4.15234 39.7979 4.15234 37.5L4.15234 22.9167C4.15234 22.3642 4.37184 21.8343 4.76254 21.4436C5.15324 21.0529 5.68314 20.8334 6.23568 20.8334L12.6482 20.8334C12.6042 19.8034 12.2964 18.802 11.7544 17.925C10.6961 16.2563 8.70234 15.1167 5.82526 14.5417L4.15234 14.2084L4.15234 8.33336L6.23567 8.33336C12.0336 8.33336 16.4565 9.93961 19.3794 13.1084Z" fill="#B20000"/>
</svg>
</footer>
</article>
</div>
<div class="swiper-slide">
<article class="review-card">
<blockquote class="review-card__text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Metus erat volutpat leo
penatibus mauris, sagittis, id posuere. Sagittis, pellentesque viverra ac porta nisl
interdum dolor malesuada pharetra. Gravida vel at vitae
</blockquote>
<footer class="review-card__footer">
<div class="review-card__user">
<div class="review-card__user-img">
<img src="images/avatar.png" alt="">
</div>
<div>
<cite class="review-card__user-name">Name</cite>
<div class="review-card__user-desc">Ceo Loop Inc</div>
</div>
</div>
<svg class="review-card__quotes" width="50" height="50" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
<path d="M42.3107 13.1084C46.2419 17.375 45.8461 22.8542 45.8336 22.9167L45.8336 39.5834C45.8336 40.1359 45.6141 40.6658 45.2234 41.0565C44.8327 41.4472 44.3028 41.6667 43.7503 41.6667L31.2503 41.6667C28.9523 41.6667 27.0836 39.7979 27.0836 37.5L27.0836 22.9167C27.0836 22.3642 27.3031 21.8342 27.6938 21.4435C28.0845 21.0528 28.6144 20.8334 29.1669 20.8334L35.5794 20.8334C35.5354 19.8034 35.2277 18.802 34.6857 17.925C33.6273 16.2563 31.6336 15.1167 28.7565 14.5417L27.0836 14.2084L27.0836 8.33336L29.1669 8.33336C34.9648 8.33336 39.3878 9.9396 42.3107 13.1084ZM19.3794 13.1084C23.3128 17.375 22.9148 22.8542 22.9023 22.9167L22.9023 39.5834C22.9023 40.1359 22.6828 40.6658 22.2921 41.0565C21.9014 41.4472 21.3715 41.6667 20.819 41.6667L8.31901 41.6667C6.02109 41.6667 4.15234 39.7979 4.15234 37.5L4.15234 22.9167C4.15234 22.3642 4.37184 21.8343 4.76254 21.4436C5.15324 21.0529 5.68314 20.8334 6.23568 20.8334L12.6482 20.8334C12.6042 19.8034 12.2964 18.802 11.7544 17.925C10.6961 16.2563 8.70234 15.1167 5.82526 14.5417L4.15234 14.2084L4.15234 8.33336L6.23567 8.33336C12.0336 8.33336 16.4565 9.93961 19.3794 13.1084Z" fill="#B20000"/>
</svg>
</footer>
</article>
</div>
<div class="swiper-slide">
<article class="review-card">
<blockquote class="review-card__text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Metus erat volutpat leo
penatibus mauris, sagittis, id posuere. Sagittis, pellentesque viverra ac porta nisl
interdum dolor malesuada pharetra. Gravida vel at vitae
</blockquote>
<footer class="review-card__footer">
<div class="review-card__user">
<div class="review-card__user-img">
<img src="images/avatar.png" alt="">
</div>
<div>
<cite class="review-card__user-name">Name</cite>
<div class="review-card__user-desc">Ceo Loop Inc</div>
</div>
</div>
<svg class="review-card__quotes" width="50" height="50" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
<path d="M42.3107 13.1084C46.2419 17.375 45.8461 22.8542 45.8336 22.9167L45.8336 39.5834C45.8336 40.1359 45.6141 40.6658 45.2234 41.0565C44.8327 41.4472 44.3028 41.6667 43.7503 41.6667L31.2503 41.6667C28.9523 41.6667 27.0836 39.7979 27.0836 37.5L27.0836 22.9167C27.0836 22.3642 27.3031 21.8342 27.6938 21.4435C28.0845 21.0528 28.6144 20.8334 29.1669 20.8334L35.5794 20.8334C35.5354 19.8034 35.2277 18.802 34.6857 17.925C33.6273 16.2563 31.6336 15.1167 28.7565 14.5417L27.0836 14.2084L27.0836 8.33336L29.1669 8.33336C34.9648 8.33336 39.3878 9.9396 42.3107 13.1084ZM19.3794 13.1084C23.3128 17.375 22.9148 22.8542 22.9023 22.9167L22.9023 39.5834C22.9023 40.1359 22.6828 40.6658 22.2921 41.0565C21.9014 41.4472 21.3715 41.6667 20.819 41.6667L8.31901 41.6667C6.02109 41.6667 4.15234 39.7979 4.15234 37.5L4.15234 22.9167C4.15234 22.3642 4.37184 21.8343 4.76254 21.4436C5.15324 21.0529 5.68314 20.8334 6.23568 20.8334L12.6482 20.8334C12.6042 19.8034 12.2964 18.802 11.7544 17.925C10.6961 16.2563 8.70234 15.1167 5.82526 14.5417L4.15234 14.2084L4.15234 8.33336L6.23567 8.33336C12.0336 8.33336 16.4565 9.93961 19.3794 13.1084Z" fill="#B20000"/>
</svg>
</footer>
</article>
</div>
<div class="swiper-slide">
<article class="review-card">
<blockquote class="review-card__text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Metus erat volutpat leo
penatibus mauris, sagittis, id posuere. Sagittis, pellentesque viverra ac porta nisl
interdum dolor malesuada pharetra. Gravida vel at vitae
</blockquote>
<footer class="review-card__footer">
<div class="review-card__user">
<div class="review-card__user-img">
<img src="images/avatar.png" alt="">
</div>
<div>
<cite class="review-card__user-name">Name</cite>
<div class="review-card__user-desc">Ceo Loop Inc</div>
</div>
</div>
<svg class="review-card__quotes" width="50" height="50" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
<path d="M42.3107 13.1084C46.2419 17.375 45.8461 22.8542 45.8336 22.9167L45.8336 39.5834C45.8336 40.1359 45.6141 40.6658 45.2234 41.0565C44.8327 41.4472 44.3028 41.6667 43.7503 41.6667L31.2503 41.6667C28.9523 41.6667 27.0836 39.7979 27.0836 37.5L27.0836 22.9167C27.0836 22.3642 27.3031 21.8342 27.6938 21.4435C28.0845 21.0528 28.6144 20.8334 29.1669 20.8334L35.5794 20.8334C35.5354 19.8034 35.2277 18.802 34.6857 17.925C33.6273 16.2563 31.6336 15.1167 28.7565 14.5417L27.0836 14.2084L27.0836 8.33336L29.1669 8.33336C34.9648 8.33336 39.3878 9.9396 42.3107 13.1084ZM19.3794 13.1084C23.3128 17.375 22.9148 22.8542 22.9023 22.9167L22.9023 39.5834C22.9023 40.1359 22.6828 40.6658 22.2921 41.0565C21.9014 41.4472 21.3715 41.6667 20.819 41.6667L8.31901 41.6667C6.02109 41.6667 4.15234 39.7979 4.15234 37.5L4.15234 22.9167C4.15234 22.3642 4.37184 21.8343 4.76254 21.4436C5.15324 21.0529 5.68314 20.8334 6.23568 20.8334L12.6482 20.8334C12.6042 19.8034 12.2964 18.802 11.7544 17.925C10.6961 16.2563 8.70234 15.1167 5.82526 14.5417L4.15234 14.2084L4.15234 8.33336L6.23567 8.33336C12.0336 8.33336 16.4565 9.93961 19.3794 13.1084Z" fill="#B20000"/>
</svg>
</footer>
</article>
</div>
</div>
</div>
<div class="swiper-buttons">
<div class="swiper-review-button-prev swiper-button-prev">
<img src="images/arrow-left-icon.png" alt="">
</div>
<div class="swiper-review-button-next swiper-button-next">
<img src="images/arrow-right-icon.png" alt="">
</div>
</div>
</div>
</section>
</div>
</main>
<footer class="footer">
<div class="footer__main">
<div class="container">
<div class="footer__main-inner">
<div class="footer__info">
<a href="#">
<img src="images/logo.png" alt="" class="logo">
</a>
<p class="footer__text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Est pulvinar quam congue consequat,
ullamcorper interdum ut leo odio. Leo neque tellus sit egestas.
</p>
<p class="footer__text">
Lacinia suscipit porttitor at arcu congue vestibulum, pulvinar. Massa nibh nunc sed id morbi
ullamcorper. Augue urna eros, mauris arcu eu pretium amet.
</p>
</div>
<section class="footer__posts">
<h3 class="footer__title">Recent Posts</h3>
<ul class="footer__posts-list">
<li class="footer__post-item">
<article class="recent-post">
<div class="recent-post__img">
<img src="images/news-card.jpg" alt="">
</div>
<div class="recent-post__content">
<h5 class="recent-post__title"><a href="#">Lorem ipsum dolor sit amet</a></h5>
<p class="recent-post__text">20 Jul / 10 comment</p>
</div>
</article>
</li>
<li class="footer__post-item">
<article class="recent-post">
<div class="recent-post__img">
<img src="images/news-card.jpg" alt="">
</div>
<div class="recent-post__content">
<h5 class="recent-post__title"><a href="#">Lorem ipsum dolor sit amet</a></h5>
<p class="recent-post__text">20 Jul / 10 comment</p>
</div>
</article>
</li>
<li class="footer__post-item">
<article class="recent-post">
<div class="recent-post__img">
<img src="images/news-card.jpg" alt="">
</div>
<div class="recent-post__content">
<h5 class="recent-post__title"><a href="#">Lorem ipsum dolor sit amet</a></h5>
<p class="recent-post__text">20 Jul / 10 comment</p>
</div>
</article>
</li>
</ul>
</section>
<section class="footer__links">
<h3 class="footer__title">Useful links</h3>
<nav class="footer__links-list">
<a href="#" class="footer__link-item">About Us</a>
<a href="#" class="footer__link-item">News</a>
<a href="#" class="footer__link-item">Upcoming Conferences</a>
<a href="#" class="footer__link-item">Contact Us</a>
</nav>
<ul class="socials-list">
<li class="socials-list__item">
<a href="#">
<img src="images/telegram-icon.png" alt="Telegram">
</a>
</li>
<li class="socials-list__item">
<a href="#">
<img src="images/fb-icon.png" alt="Facebook">
</a>
</li>
<li class="socials-list__item">
<a href="#">
<img src="images/vk-icon.png" alt="VK">
</a>
</li>
<li class="socials-list__item">
<a href="#">
<img src="images/inst-icon.png" alt="Instagram">
</a>
</li>
<li class="socials-list__item">
<a href="#">
<img src="images/yt-icon.png" alt="Youtube">
</a>
</li>
<li class="socials-list__item">
<a href="#">
<img src="images/email-icon.png" alt="Email">
</a>
</li>
</ul>
</section>
</div>
</div>
</div>
<div class="footer__disclaimers">
<div class="container">
<small class="footer__disclaimers-text footer__disclaimers-text--uppercase">
2021. cos.red. All rights reserved
</small>
<small class="footer__disclaimers-text">
<a href="#" class="footer__disclaimers-link">Terms & Condition</a>
/
<a href="#" class="footer__disclaimers-link">Privacy Policy</a>
/
<a href="#" class="footer__disclaimers-link">Contact Us</a>
</small>
</div>
</div>
</footer>
<!-- Javascript -->
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>