├── img
├── header.jpg
├── tabs
│ ├── 1.png
│ ├── 2.jpg
│ ├── 3.jpg
│ ├── 4.jpg
│ └── 5.jpg
└── slider
│ ├── slider1.jpg
│ ├── slider2.jpg
│ ├── slider3.jpg
│ ├── slider4.jpg
│ └── slider5.jpg
├── icons
├── right.svg
├── left.svg
├── switch.svg
├── facebook.svg
├── veg.svg
├── instagram.svg
├── logo.svg
└── Group 5.svg
├── js
└── script.js
├── css
└── style.css
└── index.html
/img/header.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SameerBadriddinov/serialize-js-project/HEAD/img/header.jpg
--------------------------------------------------------------------------------
/img/tabs/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SameerBadriddinov/serialize-js-project/HEAD/img/tabs/1.png
--------------------------------------------------------------------------------
/img/tabs/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SameerBadriddinov/serialize-js-project/HEAD/img/tabs/2.jpg
--------------------------------------------------------------------------------
/img/tabs/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SameerBadriddinov/serialize-js-project/HEAD/img/tabs/3.jpg
--------------------------------------------------------------------------------
/img/tabs/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SameerBadriddinov/serialize-js-project/HEAD/img/tabs/4.jpg
--------------------------------------------------------------------------------
/img/tabs/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SameerBadriddinov/serialize-js-project/HEAD/img/tabs/5.jpg
--------------------------------------------------------------------------------
/img/slider/slider1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SameerBadriddinov/serialize-js-project/HEAD/img/slider/slider1.jpg
--------------------------------------------------------------------------------
/img/slider/slider2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SameerBadriddinov/serialize-js-project/HEAD/img/slider/slider2.jpg
--------------------------------------------------------------------------------
/img/slider/slider3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SameerBadriddinov/serialize-js-project/HEAD/img/slider/slider3.jpg
--------------------------------------------------------------------------------
/img/slider/slider4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SameerBadriddinov/serialize-js-project/HEAD/img/slider/slider4.jpg
--------------------------------------------------------------------------------
/img/slider/slider5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SameerBadriddinov/serialize-js-project/HEAD/img/slider/slider5.jpg
--------------------------------------------------------------------------------
/icons/right.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/icons/left.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/icons/switch.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/icons/facebook.svg:
--------------------------------------------------------------------------------
1 |
2 |
13 |
15 |
16 |
18 | image/svg+xml
19 |
21 |
22 |
23 |
24 |
26 |
29 |
33 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/icons/veg.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/icons/instagram.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/js/script.js:
--------------------------------------------------------------------------------
1 | window.addEventListener('DOMContentLoaded', () => {
2 | const tabsParent = document.querySelector('.tabheader__items'),
3 | tabs = document.querySelectorAll('.tabheader__item'),
4 | tabsContent = document.querySelectorAll('.tabcontent'),
5 | loader = document.querySelector('.loader')
6 |
7 | // Loader
8 | setTimeout(() => {
9 | loader.style.opacity = '0'
10 | setTimeout(() => {
11 | loader.style.display = 'none'
12 | }, 500)
13 | }, 2000)
14 |
15 | // Tabs
16 | function hideTabContent() {
17 | tabsContent.forEach((item) => {
18 | item.classList.add('hide')
19 | item.classList.remove('show', 'fade')
20 | })
21 |
22 | tabs.forEach((item) => {
23 | item.classList.remove('tabheader__item_active')
24 | })
25 | }
26 |
27 | function showTabContent(i = 0) {
28 | tabsContent[i].classList.add('show', 'fade')
29 | tabsContent[i].classList.remove('hide')
30 | tabs[i].classList.add('tabheader__item_active')
31 | }
32 |
33 | hideTabContent()
34 | showTabContent()
35 |
36 | tabsParent.addEventListener('click', (event) => {
37 | const target = event.target
38 | if (target && target.classList.contains('tabheader__item')) {
39 | tabs.forEach((item, idx) => {
40 | if (target == item) {
41 | hideTabContent()
42 | showTabContent(idx)
43 | }
44 | })
45 | }
46 | })
47 |
48 | // Timer
49 |
50 | const deadline = '2022-08-11'
51 |
52 | function getTimeRemaining(endtime) {
53 | let days, hours, minutes, seconds
54 | const timer = Date.parse(endtime) - Date.parse(new Date())
55 |
56 | if (timer <= 0) {
57 | days = 0
58 | hours = 0
59 | minutes = 0
60 | seconds = 0
61 | } else {
62 | days = Math.floor(timer / (1000 * 60 * 60 * 24))
63 | hours = Math.floor((timer / (1000 * 60 * 60)) % 24)
64 | minutes = Math.floor((timer / 1000 / 60) % 60)
65 | seconds = Math.floor((timer / 1000) % 60)
66 | }
67 |
68 | return { timer, days, hours, minutes, seconds }
69 | }
70 |
71 | function getZero(num) {
72 | if (num >= 0 && num < 10) {
73 | return `0${num}`
74 | } else {
75 | return num
76 | }
77 | }
78 |
79 | function setClock(selector, endtime) {
80 | const timer = document.querySelector(selector),
81 | days = timer.querySelector('#days'),
82 | hours = timer.querySelector('#hours'),
83 | minutes = timer.querySelector('#minutes'),
84 | seconds = timer.querySelector('#seconds'),
85 | timeInterval = setInterval(updatClock, 1000)
86 |
87 | updatClock()
88 |
89 | function updatClock() {
90 | const t = getTimeRemaining(endtime)
91 |
92 | days.innerHTML = getZero(t.days)
93 | hours.innerHTML = getZero(t.hours)
94 | minutes.innerHTML = getZero(t.minutes)
95 | seconds.innerHTML = getZero(t.seconds)
96 |
97 | if (t.timer <= 0) {
98 | clearInterval(timeInterval)
99 | }
100 | }
101 | }
102 |
103 | setClock('.timer', deadline)
104 |
105 | // Modal
106 | const modalTrigger = document.querySelectorAll('[data-modal]'),
107 | modal = document.querySelector('.modal'),
108 | modalCloseBtn = document.querySelector('[data-close]')
109 |
110 | function closeModal() {
111 | modal.classList.add('hide')
112 | modal.classList.remove('show')
113 | document.body.style.overflow = ''
114 | }
115 |
116 | function openModal() {
117 | modal.classList.add('show')
118 | modal.classList.remove('hide')
119 | document.body.style.overflow = 'hidden'
120 | clearInterval(modalTimerId)
121 | }
122 |
123 | modalTrigger.forEach((item) => {
124 | item.addEventListener('click', openModal)
125 | })
126 |
127 | modalCloseBtn.addEventListener('click', closeModal)
128 |
129 | modal.addEventListener('click', (e) => {
130 | if (e.target == modal) {
131 | closeModal()
132 | }
133 | })
134 |
135 | document.addEventListener('keydown', (e) => {
136 | if (e.code === 'Escape' && modal.classList.contains('show')) {
137 | closeModal()
138 | }
139 | })
140 |
141 | // const modalTimerId = setTimeout(openModal, 5000)
142 |
143 | function showModalByScroll() {
144 | if (
145 | window.pageYOffset + document.documentElement.clientHeight >=
146 | document.documentElement.scrollHeight
147 | ) {
148 | openModal()
149 | window.removeEventListener('scroll', showModalByScroll)
150 | }
151 | }
152 |
153 | window.addEventListener('scroll', showModalByScroll)
154 |
155 | // Class
156 | class MenuCard {
157 | constructor(src, alt, title, descr, price, parentSelector, ...classes) {
158 | this.src = src
159 | this.alt = alt
160 | this.title = title
161 | this.descr = descr
162 | this.price = price
163 | this.classes = classes
164 | this.parent = document.querySelector(parentSelector)
165 | this.transfer = 11000
166 | this.chageToUZS()
167 | }
168 |
169 | chageToUZS() {
170 | this.price = this.price * this.transfer
171 | }
172 |
173 | render() {
174 | const element = document.createElement('div')
175 |
176 | if (this.classes.length === 0) {
177 | this.element = 'menu__item'
178 | element.classList.add(this.element)
179 | } else {
180 | this.classes.forEach((classname) => element.classList.add(classname))
181 | }
182 |
183 | element.innerHTML = `
184 |
185 |
186 |
187 |
188 |
192 | `
193 |
194 | this.parent.append(element)
195 | }
196 | }
197 |
198 | new MenuCard(
199 | 'img/tabs/1.png',
200 | 'usual',
201 | 'Plan "Usual"',
202 | 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit nesciunt facere, sequi exercitationem praesentium ab cupiditatebeatae debitis perspiciatis itaque quaerat id modi corporis delectus ratione nobis harum voluptatum in.',
203 | 10,
204 | '.menu .container'
205 | ).render()
206 |
207 | new MenuCard(
208 | 'img/tabs/2.jpg',
209 | 'plan',
210 | 'Plan “Premium”',
211 | 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit nesciunt facere, sequi exercitationem praesentium ab cupiditatebeatae debitis perspiciatis itaque quaerat id modi corporis delectus ratione nobis harum voluptatum in.',
212 | 20,
213 | '.menu .container',
214 | 'menu__item'
215 | ).render()
216 |
217 | new MenuCard(
218 | 'img/tabs/3.jpg',
219 | 'vip',
220 | 'Plan VIP',
221 | 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit nesciunt facere, sequi exercitationem praesentium ab cupiditatebeatae debitis perspiciatis itaque quaerat id modi corporis delectus ratione nobis harum voluptatum in.',
222 | 30,
223 | '.menu .container',
224 | 'menu__item'
225 | ).render()
226 | })
227 |
--------------------------------------------------------------------------------
/icons/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
1 | @import url(https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap&subset=cyrillic-ext);
2 | * {
3 | box-sizing: border-box;
4 | margin: 0;
5 | padding: 0;
6 | font-family: Roboto, sans-serif;
7 | }
8 | a {
9 | text-decoration: none;
10 | }
11 | .container {
12 | max-width: 1200px;
13 | margin: 0 auto;
14 | }
15 | .title {
16 | font-size: 36px;
17 | font-weight: 400;
18 | }
19 | .header {
20 | width: 100%;
21 | height: 100vh;
22 | background: url('../img/header.jpg') center no-repeat;
23 | background-size: cover;
24 | position: relative;
25 | }
26 | .header__content {
27 | position: absolute;
28 | top: 35%;
29 | translate: translateY(-35%);
30 | width: 400px;
31 | }
32 | .header__content h2 {
33 | font-size: 65px;
34 | color: rgb(236, 236, 72);
35 | text-transform: uppercase;
36 | transform: rotate(-10deg);
37 | text-shadow: 10px 10px rgba(0, 0, 0, 0.5);
38 | margin-bottom: 50px;
39 | }
40 | .button {
41 | display: inline-block;
42 | font-family: 'Montserrat', Helvetica, sans-serif;
43 | font-size: 16px;
44 | -webkit-font-smoothing: antialiased;
45 | position: relative;
46 | padding: 8px 16px;
47 | border: none;
48 | color: white;
49 | transition: 0.2s;
50 | text-decoration: none;
51 | border: white solid 1px;
52 | text-transform: uppercase;
53 | letter-spacing: 1px;
54 | opacity: 0.95;
55 | padding-right: 3.5em;
56 | cursor: pointer;
57 | }
58 | .button:before,
59 | .button:after {
60 | position: absolute;
61 | padding-top: inherit;
62 | padding-bottom: inherit;
63 | font-size: inherit;
64 | top: 0;
65 | bottom: 0;
66 | right: 0;
67 | width: 2.8em;
68 | transition: 0.2s;
69 | transform-origin: 50% 60%;
70 | }
71 |
72 | /* Arrow Button Markup */
73 | .arrow {
74 | background: #3c3b6e;
75 | }
76 | .arrow:hover {
77 | background: #b22234;
78 | }
79 | .arrow:active,
80 | .arrow:focus {
81 | background: #b22234;
82 | }
83 | /* Entity Icon */
84 | .arrow:after {
85 | content: '\2794';
86 | }
87 | /* Set Arrow Icon Bounce Animation */
88 | .arrow:hover:after {
89 | -webkit-animation: bounceright 0.3s alternate ease infinite;
90 | animation: bounceright 0.3s alternate ease infinite;
91 | }
92 | /* Phone Button Markup */
93 | .phone {
94 | background: #333;
95 | }
96 | .phone:hover {
97 | background: #111;
98 | }
99 | .phone:active,
100 | .phone:focus {
101 | background: #3c3b6e;
102 | }
103 |
104 | /* Entity Icon */
105 | .phone:after {
106 | content: '\260E';
107 | }
108 | /* Set Phone Icon Wiggle Animation */
109 | .phone:hover:after {
110 | -webkit-animation: wiggle 0.05s alternate ease infinite;
111 | animation: wiggle 0.05s alternate ease infinite;
112 | }
113 |
114 | /* Animations */
115 |
116 | @-webkit-keyframes bounceright {
117 | from {
118 | -webkit-transform: translateX(0);
119 | }
120 | to {
121 | -webkit-transform: translateX(3px);
122 | }
123 | }
124 | @-webkit-keyframes wiggle {
125 | from {
126 | -webkit-transform: rotate(0deg);
127 | }
128 | to {
129 | -webkit-transform: rotate(30deg);
130 | }
131 | }
132 | @keyframes bounceright {
133 | from {
134 | transform: translateX(0);
135 | }
136 | to {
137 | transform: translateX(3px);
138 | }
139 | }
140 | @keyframes wiggle {
141 | from {
142 | transform: rotate(0deg);
143 | }
144 | to {
145 | transform: rotate(30deg);
146 | }
147 | }
148 | .btn__group {
149 | width: 100%;
150 | height: 100%;
151 | display: flex;
152 | justify-content: cpace-between;
153 | align-items: center;
154 | }
155 | .preview {
156 | padding: 28px 0 100px 0;
157 | position: relative;
158 | background-color: #594657;
159 | }
160 | .preview__life {
161 | font-weight: 700;
162 | font-size: 20px;
163 | margin-left: 35px;
164 | margin-top: 35px;
165 | }
166 | .bgc_blue {
167 | position: absolute;
168 | right: 0;
169 | top: -155px;
170 | width: 50vw;
171 | height: 900px;
172 | background: rgba(146, 242, 255, 0.15);
173 | z-index: -1;
174 | }
175 | .tabcontainer {
176 | display: flex;
177 | width: 1130px;
178 | margin: 0 auto;
179 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25);
180 | border-radius: 10px;
181 | }
182 | .tabcontent {
183 | width: 850px;
184 | position: relative;
185 | }
186 | .tabcontent img {
187 | width: 100%;
188 | height: 100%;
189 | object-fit: cover;
190 | }
191 | .tabcontent__descr {
192 | position: absolute;
193 | top: 0;
194 | left: 0;
195 | bottom: 0;
196 | right: 0;
197 | width: 100%;
198 | height: 100%;
199 | background: rgb(89, 70, 87, 0.5);
200 | padding: 50px;
201 | font-size: 24px;
202 | font-weight: 300;
203 | line-height: 36px;
204 | color: rgb(255, 255, 255, 0.6);
205 | border: 1px solid #fff;
206 | }
207 | .tabheader {
208 | width: 280px;
209 | padding: 35px 30px;
210 | background-color: #938791;
211 | }
212 | .tabheader h3 {
213 | font-weight: 700;
214 | font-size: 16px;
215 | }
216 | .tabheader__items {
217 | margin-top: 35px;
218 | padding-left: 26px;
219 | border-left: 1px solid #000;
220 | }
221 | .tabheader__item {
222 | font-weight: 700;
223 | font-size: 18px;
224 | font-weight: 300;
225 | margin-top: 10px;
226 | color: rgba(0, 0, 0, 0.6);
227 | cursor: pointer;
228 | transition: 0.3s all;
229 | }
230 | .tabheader__item_active {
231 | color: #000;
232 | font-size: 22px;
233 | font-weight: 700;
234 | }
235 | .offer {
236 | height: 80vh;
237 | background: #594657;
238 | }
239 | .offer__slider {
240 | width: 90%;
241 | height: 100%;
242 | display: flex;
243 | flex-direction: column;
244 | align-items: flex-start;
245 | margin: 0 auto;
246 | }
247 | .offer__slider-counter {
248 | display: flex;
249 | width: 180px;
250 | align-items: center;
251 | font-size: 24px;
252 | color: rgba(0, 0, 0, 0.5);
253 | }
254 | .offer__slider-wrapper {
255 | width: 100%;
256 | margin-top: 15px;
257 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25);
258 | }
259 | .offer__slider-prev {
260 | margin-right: 10px;
261 | cursor: pointer;
262 | }
263 | .offer__slider-next {
264 | margin-left: 10px;
265 | cursor: pointer;
266 | }
267 | .offer__slider #current {
268 | font-size: 48px;
269 | font-weight: 700;
270 | color: #000;
271 | }
272 | .offer__slide {
273 | position: relative;
274 | width: 100%;
275 | height: 590px;
276 | }
277 | .offer__slide img {
278 | width: 100%;
279 | height: 100%;
280 | object-fit: cover;
281 | }
282 | .menu {
283 | background-color: #594657;
284 | padding: 100px 0 50px 0;
285 | }
286 | .menu .container {
287 | display: flex;
288 | justify-content: space-between;
289 | align-items: flex-start;
290 | }
291 | .menu .title {
292 | text-align: center;
293 | }
294 | .menu__field {
295 | margin-top: 50px;
296 | padding: 50px 0;
297 | width: 100%;
298 | background-color: #938791;
299 | }
300 | .menu__item {
301 | width: 320px;
302 | min-height: 450px;
303 | background: url('../img/header.jpg');
304 | box-shadow: 0 4px 25px rgba(0, 0, 0, 0.25);
305 | font-size: 16px;
306 | font-weight: 300;
307 | border: 1px solid #fff;
308 | }
309 | .menu__item img {
310 | width: 100%;
311 | height: 200px;
312 | object-fit: cover;
313 | }
314 | .menu__item-subtitle {
315 | font-weight: 700;
316 | font-size: 18px;
317 | padding: 0 20px;
318 | margin-top: 20px;
319 | }
320 | .menu__item-descr {
321 | margin-top: 20px;
322 | padding: 0 20px;
323 | }
324 | .menu__item-divider {
325 | width: 100%;
326 | height: 1px;
327 | background-color: rgba(0, 0, 0, 0.25);
328 | margin-top: 40px;
329 | }
330 | .menu__item-price {
331 | display: flex;
332 | justify-content: space-between;
333 | align-items: center;
334 | padding: 10px 20px;
335 | }
336 | .menu__item-price span {
337 | font-size: 24px;
338 | font-weight: 700;
339 | }
340 | .order {
341 | padding-bottom: 80px;
342 | background-color: #594657;
343 | }
344 | .order .title {
345 | text-align: center;
346 | }
347 | .order__form {
348 | margin-top: 70px;
349 | padding: 0 100px;
350 | display: flex;
351 | justify-content: space-between;
352 | align-items: center;
353 | }
354 | .order__form img {
355 | transform: scale(1.5);
356 | }
357 | .order__input {
358 | width: 280px;
359 | height: 50px;
360 | background: #303030;
361 | box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
362 | border: none;
363 | font-size: 18px;
364 | padding: 0 20px;
365 | outline: 0;
366 | border-radius: 5px;
367 | border: 1px solid #fff;
368 | text-align: center;
369 | color: #fff;
370 | }
371 | .order__input::placeholder {
372 | color: rgb(255, 255, 255, 0.6);
373 | }
374 | .order_btn {
375 | width: 280px;
376 | height: 50px;
377 | font-size: 18px;
378 | padding: 8px 40px;
379 | border-radius: 5px;
380 | }
381 | .promotion {
382 | padding: 70px 0 240px 0;
383 | position: relative;
384 | background-color: #594657;
385 | }
386 | .promotion .container {
387 | display: flex;
388 | }
389 | .promotion .bgc_y {
390 | position: absolute;
391 | width: 50%;
392 | height: 499px;
393 | background: rgba(243, 255, 222, 0.35);
394 | z-index: -1;
395 | top: -50px;
396 | left: 0;
397 | }
398 | .promotion__text {
399 | width: 50%;
400 | }
401 | .promotion__descr {
402 | margin-top: 40px;
403 | font-size: 20px;
404 | line-height: 24px;
405 | font-weight: 300;
406 | }
407 | .promotion__descr span {
408 | font-weight: 700;
409 | font-size: 26px;
410 | }
411 | .promotion__timer {
412 | width: 50%;
413 | }
414 | .promotion__timer .title {
415 | text-align: right;
416 | }
417 | .promotion__timer .timer {
418 | margin-top: 60px;
419 | padding-left: 95px;
420 | display: flex;
421 | justify-content: space-between;
422 | align-items: center;
423 | }
424 | .promotion__timer .timer__block {
425 | width: 102px;
426 | height: 120px;
427 | background: #938791;
428 | box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
429 | font-size: 16px;
430 | font-weight: 300;
431 | text-align: center;
432 | border: 1px solid #fff;
433 | }
434 | .promotion__timer .timer__block span {
435 | display: block;
436 | margin-top: 20px;
437 | margin-bottom: 5px;
438 | font-size: 56px;
439 | font-weight: 700;
440 | }
441 | .modal {
442 | position: fixed;
443 | top: 0;
444 | left: 0;
445 | z-index: 1050;
446 | display: none;
447 | width: 100%;
448 | height: 100vh;
449 | overflow: hidden;
450 | background-color: rgba(0, 0, 0, 0.5);
451 | }
452 | .modal__dialog {
453 | max-width: 500px;
454 | margin: 40px auto;
455 | }
456 | .modal__content {
457 | position: relative;
458 | width: 100%;
459 | padding: 40px;
460 | background-color: rgb(255, 255, 255, 0.6);
461 | border: 1px solid rgba(0, 0, 0, 0.2);
462 | border-radius: 4px;
463 | max-height: 80vh;
464 | overflow-y: auto;
465 | }
466 | .modal__close {
467 | position: absolute;
468 | top: 8px;
469 | right: 14px;
470 | font-size: 30px;
471 | color: #000;
472 | opacity: 0.5;
473 | font-weight: 700;
474 | border: none;
475 | background-color: transparent;
476 | cursor: pointer;
477 | }
478 | .modal__title {
479 | text-align: center;
480 | font-size: 22px;
481 | text-transform: uppercase;
482 | }
483 | .modal__input {
484 | display: block;
485 | margin: 20px auto 20px auto;
486 | width: 280px;
487 | height: 50px;
488 | background: #303030;
489 | box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
490 | font-size: 18px;
491 | padding: 0 20px;
492 | outline: 0;
493 | border-radius: 5px;
494 | border: 1px solid #fff;
495 | text-align: center;
496 | color: #fff;
497 | }
498 | .modal_btn {
499 | display: block;
500 | margin: 20px auto 20px auto;
501 | width: 280px;
502 | height: 50px;
503 | font-size: 18px;
504 | padding: 8px 40px;
505 | border-radius: 5px;
506 | }
507 | .loader {
508 | width: 100vw;
509 | height: 100vh;
510 | overflow: hidden;
511 | position: fixed;
512 | display: flex;
513 | justify-content: center;
514 | align-items: center;
515 | background-color: #2d3436;
516 | background-image: linear-gradient(315deg, #2d3436 0%, #000000 74%);
517 | z-index: 99999;
518 | perspective: 500px;
519 | transition: all 0.5s ease;
520 | }
521 | section {
522 | position: absolute;
523 | transform-style: preserve-3d;
524 | }
525 | .paper_man_wrapper {
526 | -webkit-animation: cameraY 7000ms linear infinite;
527 | animation: cameraY 7000ms linear infinite;
528 | }
529 |
530 | .paper_man {
531 | top: -100px;
532 | left: -50px;
533 | -webkit-animation: jump 250ms -110ms ease-in-out infinite alternate;
534 | animation: jump 250ms -110ms ease-in-out infinite alternate;
535 | }
536 | .paper_man .part {
537 | background: white;
538 | }
539 | .paper_man .part::before {
540 | content: '';
541 | position: absolute;
542 | width: 100%;
543 | height: 100%;
544 | background: #646464;
545 | transform: translateZ(-1px);
546 | }
547 | .paper_man_body {
548 | transform-origin: 50% 100%;
549 | transform: rotateX(-20deg);
550 | width: 60px;
551 | height: 100px;
552 | -webkit-animation: shake4 2000ms -100ms ease-in-out infinite;
553 | animation: shake4 2000ms -100ms ease-in-out infinite;
554 | }
555 | .paper_man_head {
556 | transform-origin: 50% 100%;
557 | top: -40px;
558 | left: calc(50% - 20px);
559 | width: 40px;
560 | height: 40px;
561 | transform: rotateX(-10deg);
562 | -webkit-animation: shake4 1000ms -800ms ease-in-out infinite;
563 | animation: shake4 1000ms -800ms ease-in-out infinite;
564 | }
565 | .paper_man_arm.left {
566 | transform-origin: 0 0;
567 | right: 0px;
568 | -webkit-animation: shake1 1000ms -400ms ease-in-out infinite;
569 | animation: shake1 1000ms -400ms ease-in-out infinite;
570 | }
571 | .paper_man_arm.right {
572 | transform-origin: 100% 0;
573 | left: -20px;
574 | -webkit-animation: shake1 1000ms -900ms ease-in-out infinite;
575 | animation: shake1 1000ms -900ms ease-in-out infinite;
576 | }
577 | .paper_man_arm_1 {
578 | transform-origin: 50% 0;
579 | width: 20px;
580 | height: 50px;
581 | }
582 | .paper_man_arm_2 {
583 | transform-origin: 50% 0;
584 | bottom: -50px;
585 | width: 20px;
586 | height: 50px;
587 | }
588 | .left .paper_man_arm_2 {
589 | -webkit-animation: shake3 1000ms -800ms ease-in-out infinite;
590 | animation: shake3 1000ms -800ms ease-in-out infinite;
591 | }
592 | .right .paper_man_arm_2 {
593 | -webkit-animation: shake3 1000ms -300ms ease-in-out infinite;
594 | animation: shake3 1000ms -300ms ease-in-out infinite;
595 | }
596 | .paper_man_arm_hand {
597 | transform-origin: 50% 0;
598 | bottom: -15px;
599 | width: 20px;
600 | height: 15px;
601 | }
602 | .left .paper_man_arm_hand {
603 | -webkit-animation: shake3 1000ms -200ms ease-in-out infinite;
604 | animation: shake3 1000ms -200ms ease-in-out infinite;
605 | }
606 | .right .paper_man_arm_hand {
607 | -webkit-animation: shake3 1000ms -700ms ease-in-out infinite;
608 | animation: shake3 1000ms -700ms ease-in-out infinite;
609 | }
610 | .paper_man_leg {
611 | transform-origin: 50% 0;
612 | top: 100px;
613 | }
614 | .paper_man_leg.left {
615 | right: 30px;
616 | -webkit-animation: shake1 1000ms ease-in-out infinite;
617 | animation: shake1 1000ms ease-in-out infinite;
618 | }
619 | .paper_man_leg.right {
620 | left: 0;
621 | -webkit-animation: shake1 1000ms -500ms ease-in-out infinite;
622 | animation: shake1 1000ms -500ms ease-in-out infinite;
623 | }
624 | .paper_man_leg_1 {
625 | transform-origin: 50% 0;
626 | width: 30px;
627 | height: 50px;
628 | }
629 | .paper_man_leg_2 {
630 | transform-origin: 50% 0;
631 | bottom: -40px;
632 | width: 30px;
633 | height: 40px;
634 | }
635 | .left .paper_man_leg_2 {
636 | -webkit-animation: shake2 1000ms -600ms ease-in-out infinite;
637 | animation: shake2 1000ms -600ms ease-in-out infinite;
638 | }
639 | .right .paper_man_leg_2 {
640 | -webkit-animation: shake2 1000ms -100ms ease-in-out infinite;
641 | animation: shake2 1000ms -100ms ease-in-out infinite;
642 | }
643 | .paper_man_leg_foot {
644 | transform-origin: 50% 0;
645 | bottom: -20px;
646 | width: 30px;
647 | height: 20px;
648 | }
649 | .left .paper_man_leg_foot {
650 | -webkit-animation: shake3 1000ms -400ms ease-in-out infinite;
651 | animation: shake3 1000ms -400ms ease-in-out infinite;
652 | }
653 | .right .paper_man_leg_foot {
654 | -webkit-animation: shake3 1000ms -900ms ease-in-out infinite;
655 | animation: shake3 1000ms -900ms ease-in-out infinite;
656 | }
657 |
658 | @-webkit-keyframes shake1 {
659 | 0% {
660 | transform: rotateX(80deg);
661 | }
662 | 50% {
663 | transform: rotateX(-80deg);
664 | }
665 | 100% {
666 | transform: rotateX(80deg);
667 | }
668 | }
669 |
670 | @keyframes shake1 {
671 | 0% {
672 | transform: rotateX(80deg);
673 | }
674 | 50% {
675 | transform: rotateX(-80deg);
676 | }
677 | 100% {
678 | transform: rotateX(80deg);
679 | }
680 | }
681 | @-webkit-keyframes shake2 {
682 | 0% {
683 | transform: rotateX(0deg);
684 | }
685 | 50% {
686 | transform: rotateX(-100deg);
687 | }
688 | 100% {
689 | transform: rotateX(0deg);
690 | }
691 | }
692 | @keyframes shake2 {
693 | 0% {
694 | transform: rotateX(0deg);
695 | }
696 | 50% {
697 | transform: rotateX(-100deg);
698 | }
699 | 100% {
700 | transform: rotateX(0deg);
701 | }
702 | }
703 | @-webkit-keyframes shake3 {
704 | 0% {
705 | transform: rotateX(10deg);
706 | }
707 | 50% {
708 | transform: rotateX(120deg);
709 | }
710 | 100% {
711 | transform: rotateX(10deg);
712 | }
713 | }
714 | @keyframes shake3 {
715 | 0% {
716 | transform: rotateX(10deg);
717 | }
718 | 50% {
719 | transform: rotateX(120deg);
720 | }
721 | 100% {
722 | transform: rotateX(10deg);
723 | }
724 | }
725 | @-webkit-keyframes shake4 {
726 | 0% {
727 | transform: rotateX(-30deg);
728 | }
729 | 50% {
730 | transform: rotateX(-10deg);
731 | }
732 | 100% {
733 | transform: rotateX(-30deg);
734 | }
735 | }
736 | @keyframes shake4 {
737 | 0% {
738 | transform: rotateX(-30deg);
739 | }
740 | 50% {
741 | transform: rotateX(-10deg);
742 | }
743 | 100% {
744 | transform: rotateX(-30deg);
745 | }
746 | }
747 | @-webkit-keyframes cameraY {
748 | 0% {
749 | transform: rotateY(0deg);
750 | }
751 | 100% {
752 | transform: rotateY(360deg);
753 | }
754 | }
755 | @keyframes cameraY {
756 | 0% {
757 | transform: rotateY(0deg);
758 | }
759 | 100% {
760 | transform: rotateY(360deg);
761 | }
762 | }
763 | @-webkit-keyframes cameraX {
764 | 0% {
765 | transform: rotateX(-50deg);
766 | }
767 | 100% {
768 | transform: rotateX(50deg);
769 | }
770 | }
771 | @keyframes cameraX {
772 | 0% {
773 | transform: rotateX(-50deg);
774 | }
775 | 100% {
776 | transform: rotateX(50deg);
777 | }
778 | }
779 | @-webkit-keyframes jump {
780 | 0% {
781 | transform: rotateX(10deg) translateY(0);
782 | }
783 | 100% {
784 | transform: rotateX(20deg) translateY(-30px);
785 | }
786 | }
787 | @keyframes jump {
788 | 0% {
789 | transform: rotateX(10deg) translateY(0);
790 | }
791 | 100% {
792 | transform: rotateX(20deg) translateY(-30px);
793 | }
794 | }
795 |
796 | .show {
797 | display: block;
798 | }
799 | .hide {
800 | display: none;
801 | }
802 | .fade {
803 | animation-name: fade;
804 | animation-duration: 1.5s;
805 | }
806 | @keyframes fade {
807 | 0% {
808 | opacity: 0;
809 | }
810 | 100% {
811 | opacity: 1;
812 | }
813 | }
814 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Serial
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
23 |
30 |
37 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
77 |
78 |
79 |
80 |
81 | Drama is the specific mode of fiction represented in performance:
82 | a play, opera, mime, ballet, etc., performed in a theatre, or on
83 | radio or television.[1] Considered as a genre of poetry in
84 | general, the dramatic mode has been contrasted with the epic and
85 | the lyrical modes ever since Aristotle's Poetics (c. 335 BC)—the
86 | earliest work of dramatic theory.[2] The term "drama" comes from a
87 | Greek word "draō" meaning "to do / to act" (Classical Greek:
88 | δρᾶμα, drama), which is derived from "I do" (Classical Greek:
89 | δράω, drao). The two masks associated with drama represent the
90 | traditional generic division between comedy and tragedy. In
91 | English (as was the analogous case in many other European
92 | languages), the word play or game.
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 | Comedy (from the Greek: κωμῳδία, kōmōdía) is a genre of fiction
101 | that consists of discourses or works intended to be humorous or
102 | amusing by inducing laughter, especially in theatre, film,
103 | stand-up comedy, television, radio, books, or any other
104 | entertainment medium. The term originated in ancient Greece: in
105 | Athenian democracy, the public opinion of voters was influenced by
106 | political satire performed by comic poets in theaters.[1] The
107 | theatrical genre of Greek comedy can be described as a dramatic
108 | performance pitting two groups, ages, genders, or societies
109 | against each other in an amusing agon or conflict. Northrop Frye
110 | depicted these two opposing sides as a "Society of Youth".
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 | A documentary film or documentary is a non-fictional
119 | motion-picture intended to "document reality, primarily for the
120 | purposes of instruction, education, or maintaining a historical
121 | record".[1] Bill Nichols has characterised the documentary in
122 | terms of "a filmmaking practice, a cinematic tradition, and mode
123 | of audience reception [that remains] a practice without clear
124 | boundaries".[2] Early documentary films, originally called
125 | "actuality films", lasted one minute or less. Over time,
126 | documentaries have evolved to become longer in length, and to
127 | include more categories; some examples being: educational,
128 | observational, and docufiction. Documentaries are very informative
129 | and are often used within schools, as a resource to teach various
130 | principles.
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 | Sport pertains to any form of competitive physical activity or
139 | game[1] that aims to use, maintain or improve physical ability and
140 | skills while providing enjoyment to participants and, in some
141 | cases, entertainment to spectators.[2] Sports can, through casual
142 | or organized participation, improve one's physical health.
143 | Hundreds of sports exist, from those between single contestants,
144 | through to those with hundreds of simultaneous participants,
145 | either in teams or competing as individuals. In certain sports
146 | such as racing, many contestants may compete, simultaneously or
147 | consecutively, with one winner; in others, the contest (a match)
148 | is between two sides, each attempting to exceed the other. Some
149 | sports allow.
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 | The fantastic requires the fulfillment of three conditions. First,
158 | the text must oblige the reader to consider the world of the
159 | characters as a world of living persons and to hesitate between a
160 | natural or supernatural explanation of the events described.
161 | Second, this hesitation may also be experienced by a character;
162 | thus the reader's role is so to speak entrusted to a character,
163 | and at the same time the hesitation is represented, it becomes one
164 | of the themes of the work—in the case of naive reading, the actual
165 | reader identifies himself with the character. Third, the reader
166 | must adopt a certain attitude with regard to the text: he will
167 | reject allegorical as well as "poetic" interpretations
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
Order the best place!
178 |
196 |
197 |
198 |
199 |
200 |
201 |
202 |
203 |
204 |
205 |
206 |
207 |
208 |
03
209 | /
210 |
05
211 |
212 |
213 |
214 |
215 |
216 |
217 |
223 |
224 |
225 |
231 |
232 |
233 |
239 |
240 |
241 |
247 |
248 |
249 |
250 |
251 |
252 | Lorem ipsum dolor sit amet consectetur adipisicing elit.
253 | Eligendi iure, nam fuga vero eum numquam autem! Pariatur laborum
254 | voluptas adipisci debitis, atque ut fugit aperiam minus porro
255 | labore consectetur placeat eius aliquam, dicta, maiores ea
256 | numquam esse cum distinctio laboriosam non hic. Possimus est
257 | ipsam unde, nulla voluptas, suscipit vitae eligendi velit
258 | laboriosam eveniet quae eaque? Perferendis at ullam accusantium
259 | numquam ratione, cum repellendus labore ea tempora. Deserunt,
260 | unde optio qui at vero nisi non ipsum cumque numquam minima
261 | minus tempora nesciunt aspernatur omnis consequuntur, itaque
262 | adipisci et explicabo! Sint repudiandae dolores, nobis
263 | consectetur quasi eos. Accusantium alias quisquam qui id
264 | eligendi nisi error. Quo perferendis sapiente provident dolores
265 | sequi, fugit dignissimos facilis eaque laudantium minima nisi
266 | enim maxime! A atque labore accusantium, dolore non deserunt
267 | sunt quos incidunt, hic iste quidem animi? Culpa repellat
268 | reprehenderit minus qui quam reiciendis, maiores velit totam
269 | earum iste, modi temporibus vitae hic et esse aspernatur
270 | perferendis ipsa porro ad consectetur laborum. Ratione
271 | perferendis minima ad nostrum earum quos vero ab, amet est
272 | incidunt.
273 |
274 |
275 |
276 |
277 |
278 |
279 |
280 |
281 |
287 |
288 |
289 |
324 |
325 |
326 |
353 |
354 |
355 |
356 |
357 |
--------------------------------------------------------------------------------
/icons/Group 5.svg:
--------------------------------------------------------------------------------
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 |
--------------------------------------------------------------------------------