From 528cc9f4492098b795ee2fa4788c2ba5447f7c15 Mon Sep 17 00:00:00 2001 From: Krylov Sergey Date: Fri, 9 Apr 2021 01:04:05 +0500 Subject: [PATCH] temp --- parts/home/entertaiment.php | 8 +- parts/quests/quests-slider.php | 0 src/js/script.js | 2 +- src/sass/pages/form.scss | 2 + src/sass/pages/holiday.scss | 9 -- src/sass/pages/home.scss | 10 -- src/sass/parts/callback-modal.scss | 6 + src/sass/parts/discounts.scss | 4 + src/sass/parts/entertaiments.scss | 124 +--------------- src/sass/parts/header.scss | 4 - src/sass/parts/map-block.scss | 6 + src/sass/parts/order-modal.scss | 59 ++++++++ src/sass/parts/order.scss | 53 ------- src/sass/parts/packages.scss | 231 ----------------------------- src/sass/parts/places.scss | 83 +++++++++++ src/sass/parts/present.scss | 24 +++ src/sass/parts/principals.scss | 4 + src/sass/parts/quests-slider.scss | 111 ++++++++++++++ src/sass/style.scss | 122 --------------- templates/quests.php | 13 +- 20 files changed, 317 insertions(+), 558 deletions(-) create mode 100644 parts/quests/quests-slider.php create mode 100644 src/sass/parts/order-modal.scss delete mode 100644 src/sass/parts/packages.scss create mode 100644 src/sass/parts/quests-slider.scss diff --git a/parts/home/entertaiment.php b/parts/home/entertaiment.php index 4a7f42f..5dfb71a 100644 --- a/parts/home/entertaiment.php +++ b/parts/home/entertaiment.php @@ -7,7 +7,7 @@ ?>">

Все развлечения

-
+
-
-
-
+
+
+

diff --git a/parts/quests/quests-slider.php b/parts/quests/quests-slider.php new file mode 100644 index 0000000..e69de29 diff --git a/src/js/script.js b/src/js/script.js index 0a61e48..afe3b07 100644 --- a/src/js/script.js +++ b/src/js/script.js @@ -34,7 +34,7 @@ $(document).ready(function(){ const discountModalSlider = document.querySelector('.discount-modal-slider'); const mainSlider = document.querySelector('.main-slider'); - const entSlider = document.querySelector('.ent-slider'); + const entSlider = document.querySelector('.quests-slider'); const placesSlider = document.querySelector('.places-slider'); const principalsSlider = document.querySelector('.principals-slider'); diff --git a/src/sass/pages/form.scss b/src/sass/pages/form.scss index e8b7023..e2066a9 100644 --- a/src/sass/pages/form.scss +++ b/src/sass/pages/form.scss @@ -7,6 +7,8 @@ .form-block { + padding-bottom: 10px; + h1 { font-weight: 600; font-size: 32px; diff --git a/src/sass/pages/holiday.scss b/src/sass/pages/holiday.scss index 288438e..549a358 100644 --- a/src/sass/pages/holiday.scss +++ b/src/sass/pages/holiday.scss @@ -1,5 +1,4 @@ @import '../parts/adding-service'; -@import '../parts/packages'; @import '../parts/options'; @import '../parts/entertaiments'; @import '../parts/places'; @@ -202,14 +201,6 @@ } @media screen and (max-width: 576px) { - .places { - background: #f2f2f2 !important; - - &-layout { - background: #f2f2f2 !important; - } - } - .holiday { &-photos { margin-bottom: 30px; diff --git a/src/sass/pages/home.scss b/src/sass/pages/home.scss index 431b0e9..5c18586 100644 --- a/src/sass/pages/home.scss +++ b/src/sass/pages/home.scss @@ -3,16 +3,6 @@ @import '../parts/present'; @import '../parts/principals'; -div.places.places_home, div.places_home .places-layout { - padding-top: 20px; - background: #ffffff !important; -} - -@media screen and (max-width: 576px) { - div.places.places_home, div.places_home .places-layout { - padding-top: 0 !important; - } -} @import '../parts/header'; @import '../parts/callback-modal'; diff --git a/src/sass/parts/callback-modal.scss b/src/sass/parts/callback-modal.scss index f858586..8d72407 100644 --- a/src/sass/parts/callback-modal.scss +++ b/src/sass/parts/callback-modal.scss @@ -38,3 +38,9 @@ } } } + +@media screen and (max-width: 480px) { + .callback-modal__body { + width: 80%; + } +} diff --git a/src/sass/parts/discounts.scss b/src/sass/parts/discounts.scss index c5572d6..8e2ddde 100644 --- a/src/sass/parts/discounts.scss +++ b/src/sass/parts/discounts.scss @@ -15,6 +15,10 @@ text-align: center; } + .owl-stage-outer { + padding: 15px 0 !important; + } + .owl-carousel .owl-item img { width: auto; max-height: 280px; diff --git a/src/sass/parts/entertaiments.scss b/src/sass/parts/entertaiments.scss index 69dd574..700671d 100644 --- a/src/sass/parts/entertaiments.scss +++ b/src/sass/parts/entertaiments.scss @@ -4,7 +4,7 @@ justify-content: space-between; padding: 20px 0 !important; color: #ffffff; - + div { padding: 0 !important; } @@ -32,6 +32,10 @@ padding-top: 35px; } + .owl-stage-outer { + padding-bottom: 30px !important; + } + &-container { .owl-item { &:nth-child(4n+2) { @@ -82,104 +86,6 @@ letter-spacing: 0.5px; text-align: center; } - - &__quest { - position: relative; - max-width: 360px; - height: 380px; - border-radius: 20px; - - &-overlay { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 50; - border-radius: 20px; - background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.43), rgba(0, 0, 0, 0.57)); - } - - &-content { - position: relative; - z-index: 99; - display: flex; - flex-direction: column; - justify-content: space-between; - height: 100%; - - div { - padding: 40px 0 0; - } - - h3 { - margin-bottom: 12px; - color: #ff0000; - font-weight: 600; - font-size: 32px; - letter-spacing: 0.4px; - } - - p { - color: #ffffff; - font-size: 22px !important; - letter-spacing: 0.5px; - } - - a { - position: absolute; - right: 0; - bottom: 0; - left: 0; - z-index: 70; - display: block; - overflow: hidden; - width: 100%; - height: 74px; - padding: 23px; - border-radius: 0 0 20px 20px; - background: url('../../img/icons/eger.svg') center 1px no-repeat; - background-size: 102%; - transition: 0.2s; - - &:hover { - height: 80px; - - button { - font-size: 22px; - } - } - - button { - width: 100%; - border: 0; - background: transparent; - color: #ffffff; - outline: none; - font-weight: 600; - font-size: 18px; - letter-spacing: 0.4px; - text-align: center; - text-decoration: none; - text-transform: uppercase; - transition: 0.2s; - } - } - } - } - } - - .ent-container__quest-content h3 { - font-size: 32px; - } - - .ent-container__quest-content p { - font-size: 16px; - text-align: left; - } - - .ent-container__quest-content a button { - text-align: center; } } @@ -205,26 +111,6 @@ p { font-size: 16px !important; } - - &__quest { - max-width: 260px !important; - height: 280px !important; - margin-top: 25px; - - &-content { - div { - padding: 15px; - } - - h3 { - font-size: 20px !important; - } - - p { - font-size: 14px !important; - } - } - } } .owl-item { diff --git a/src/sass/parts/header.scss b/src/sass/parts/header.scss index e707503..1eae5f3 100644 --- a/src/sass/parts/header.scss +++ b/src/sass/parts/header.scss @@ -385,10 +385,6 @@ display: none; } - .ent { - padding-top: 40px !important; - } - .header-navmenu__item { width: 20% !important; padding: 10px !important; diff --git a/src/sass/parts/map-block.scss b/src/sass/parts/map-block.scss index e972497..53bf270 100644 --- a/src/sass/parts/map-block.scss +++ b/src/sass/parts/map-block.scss @@ -111,3 +111,9 @@ } } } + +.map-block-in-home { + &::after { + background-color: #f2f2f2 !important; + } +} diff --git a/src/sass/parts/order-modal.scss b/src/sass/parts/order-modal.scss new file mode 100644 index 0000000..740040f --- /dev/null +++ b/src/sass/parts/order-modal.scss @@ -0,0 +1,59 @@ +@import '../constansts'; + + +.order-modal { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 999999; + display: none; + background: rgba(0, 0, 0, 0.65) !important; + + &__overlay { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + } + + .container { + position: relative; + top: 50%; + padding: 40px 100px; + border-radius: 20px; + background-color: #ffffff; + box-shadow: 0 0 15px 0 rgba(41, 48, 55, 0.5); + text-align: center; + transform: translateY(-50%); + + h2 { + font-weight: 600; + font-size: 32px; + font-family: 'Museo Regular', sans-serif; + } + } +} + + +@media screen and (max-width: 768px) { + .order-modal { + .container { + padding: 20px; + } + } +} + +@media screen and (max-width: 480px) { + .order-modal { + padding: 0 30px; + + .container { + img { + height: 220px !important; + } + } + } +} diff --git a/src/sass/parts/order.scss b/src/sass/parts/order.scss index fbe8e2f..7ec362a 100644 --- a/src/sass/parts/order.scss +++ b/src/sass/parts/order.scss @@ -90,43 +90,6 @@ } } -.order-modal { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 999999; - display: none; - background: rgba(0, 0, 0, 0.65) !important; - - &__overlay { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - } - - .container { - position: relative; - top: 50%; - padding: 40px 100px; - border-radius: 20px; - background-color: #ffffff; - box-shadow: 0 0 15px 0 rgba(41, 48, 55, 0.5); - text-align: center; - transform: translateY(-50%); - - h2 { - font-weight: 600; - font-size: 32px; - font-family: 'Museo Regular', sans-serif; - } - } -} - - @media screen and (max-width: 768px) { .order { height: auto; @@ -169,12 +132,6 @@ } } } - - .order-modal { - .container { - padding: 20px; - } - } } @media screen and (max-width: 480px) { @@ -216,14 +173,4 @@ } } } - - .order-modal { - padding: 0 30px; - - .container { - img { - height: 220px !important; - } - } - } } diff --git a/src/sass/parts/packages.scss b/src/sass/parts/packages.scss deleted file mode 100644 index cb74998..0000000 --- a/src/sass/parts/packages.scss +++ /dev/null @@ -1,231 +0,0 @@ -@import '../constansts'; - -.order { - position: relative; - display: flex; - align-items: center; - height: 790px; - padding-top: 10px; - padding-bottom: 10px; - background: #f2f2f2 url('../../img/order-form-bg.png') center no-repeat; - - .container { - display: flex; - justify-content: flex-start; - max-width: 1061px; - padding: 30px 100px; - border-radius: 40px; - background-color: #ffffff; - color: #000000; - box-shadow: 0 0 15px 0 rgba(41, 48, 55, 0.5); - font-family: 'PT Sans', sans-serif; - } - - &__text { - display: flex; - flex-direction: column; - justify-content: space-between; - width: 400px; - min-width: 430px; - height: 100%; - padding-right: 30px; - - h3 { - margin: 30px 0 25px; - font-weight: 600; - font-size: 32px; - line-height: 1.22; - letter-spacing: 0.3px; - } - - p { - font-size: 24px; - line-height: 1.42; - letter-spacing: 0.3px; - } - } - - &__form { - display: flex; - flex-grow: 1; - flex-direction: column; - width: 100%; - - .form-group { - margin-bottom: 0; - } - - input, textarea { - width: 100%; - max-width: 400px; - margin-bottom: 10px; - padding: 21px 20px; - border: 1px solid $main-color; - border-radius: 7px; - color: $main-color; - font-size: 16px; - letter-spacing: 0.1px; - - &:focus { - box-shadow: none; - } - - &::placeholder { - color: $main-color; - } - } - - small { - display: block; - margin: 10px 0; - font-size: 12px; - line-height: 1.42; - letter-spacing: 0.3px; - } - - button { - width: 289px; - margin-top: 15px; - } - } -} - -.order-modal { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 999999; - display: none; - background: rgba(0, 0, 0, 0.65) !important; - - &__overlay { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - } - - .container { - position: relative; - top: 50%; - padding: 40px 100px; - border-radius: 20px; - background-color: #ffffff; - box-shadow: 0 0 15px 0 rgba(41, 48, 55, 0.5); - text-align: center; - transform: translateY(-50%); - - h2 { - font-weight: 600; - font-size: 32px; - font-family: 'Museo Regular', sans-serif; - } - } -} - - - -@media screen and (max-width: 768px) { - .order { - height: auto; - padding: 30px 0; - background: url('../../img/order-bg.jpg') center no-repeat; - background-size: cover; - - .container { - flex-direction: column; - align-items: center; - max-width: 500px; - padding: 30px; - text-align: center; - } - - h3 { - font-size: 20px; - text-align: center; - } - - p { - font-size: 16px; - text-align: center; - } - - &__text { - padding-right: 0 !important; - } - - &__form { - align-items: center; - - .form-group { - width: 100%; - } - - input, textarea { - width: 100%; - max-width: 100%; - } - } - } - - .order-modal { - .container { - padding: 20px; - } - } -} - -@media screen and (max-width: 480px) { - .order { - h3 { - margin: 0 0 5px; - font-size: 16px; - } - - p { - margin-bottom: 5px; - font-size: 13px; - } - - .container { - max-width: 90%; - padding: 20px; - } - - &__text { - min-width: auto !important; - max-width: 100%; - } - - &__form { - input, textarea { - width: 100%; - min-width: 90%; - } - - small { - width: 90%; - } - - button { - width: 200px; - margin: 0; - font-size: 14px; - } - } - } - - .order-modal { - padding: 0 30px; - - .container { - img { - height: 220px !important; - } - } - } - -} diff --git a/src/sass/parts/places.scss b/src/sass/parts/places.scss index 831cc25..76fa3c3 100644 --- a/src/sass/parts/places.scss +++ b/src/sass/parts/places.scss @@ -169,11 +169,41 @@ } &-slider { + position: relative; + overflow: visible !important; margin-right: auto; margin-left: auto; + + &::after { + content: ''; + position: absolute; + top: -50px; + left: -75px; + display: block; + width: 163px; + height: 331px; + background: url('../../img/places/balloon-blue.svg') center no-repeat; + } + + &::before { + content: ''; + position: absolute; + top: -200px; + right: -60px; + z-index: 100; + display: block; + width: 197px; + height: 423px; + background: url('../../img/places/balloon-red.svg') center no-repeat; + } } } +div.places.places_home, div.places_home .places-layout { + padding-top: 20px; + background: #ffffff !important; +} + @media screen and (max-width: 1200px) { .places .owl-nav { right: 75px; @@ -252,6 +282,10 @@ } @media screen and (max-width: 576px) { + div.places.places_home, div.places_home .places-layout { + padding-top: 0 !important; + } + .places { margin-top: 20px; padding-top: 25px; @@ -318,4 +352,53 @@ padding-left: 5px; background: none !important; } + + .places { + background: #f2f2f2 !important; + + &-layout { + background: #f2f2f2 !important; + } + } + + + + .places .places-description { + font-size: 16px !important; + } +} + + + +.places .places-description { + max-width: 940px; + margin: 20px auto 0; + color: #1e212b; + font-size: 24px; + letter-spacing: 0.5px; + text-align: center; +} + +.places .places-description + div { + margin-top: 15px; +} + +@media screen and (max-width: 1024px) { + .places-slider { + &::before { + right: -30px; + } + } +} + +@media screen and (max-width: 800px) { + .places-slider { + &::before { + display: none; + } + + &::after { + display: none; + } + } } diff --git a/src/sass/parts/present.scss b/src/sass/parts/present.scss index e37f826..3eb9a43 100644 --- a/src/sass/parts/present.scss +++ b/src/sass/parts/present.scss @@ -250,3 +250,27 @@ font-size: 14px !important; } } + +@media screen and (max-width: 1024px) { + .present .container { + &::after { + right: 0 !important; + } + + &::before { + left: -72px !important; + } + } +} + +@media screen and (max-width: 800px) { + .present .container { + &::after { + display: none !important; + } + + &::before { + display: none !important; + } + } +} diff --git a/src/sass/parts/principals.scss b/src/sass/parts/principals.scss index d6b8adc..9f2c4d5 100644 --- a/src/sass/parts/principals.scss +++ b/src/sass/parts/principals.scss @@ -13,6 +13,10 @@ align-items: center; } + .owl-stage-outer { + padding: 15px !important; + } + .owl-item { img { width: auto; diff --git a/src/sass/parts/quests-slider.scss b/src/sass/parts/quests-slider.scss new file mode 100644 index 0000000..69f5736 --- /dev/null +++ b/src/sass/parts/quests-slider.scss @@ -0,0 +1,111 @@ +@media screen and (max-width: 576px) { + .quests-container { + &__quest { + max-width: 260px !important; + height: 280px !important; + margin-top: 25px; + + &-content { + div { + padding: 15px; + } + + h3 { + font-size: 20px !important; + } + + p { + font-size: 14px !important; + } + } + } + } +} + +.quests-container { + &__quest { + position: relative; + max-width: 360px; + height: 380px; + border-radius: 20px; + + &-overlay { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 50; + border-radius: 20px; + background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.43), rgba(0, 0, 0, 0.57)); + } + + &-content { + position: relative; + z-index: 99; + display: flex; + flex-direction: column; + justify-content: space-between; + height: 100%; + + div { + padding: 40px 0 0; + } + + h3 { + margin-bottom: 12px; + color: #ff0000; + font-weight: 600; + font-size: 32px; + letter-spacing: 0.4px; + } + + p { + color: #ffffff; + font-size: 22px !important; + letter-spacing: 0.5px; + text-align: left; + } + + a { + position: absolute; + right: 0; + bottom: 0; + left: 0; + z-index: 70; + display: block; + overflow: hidden; + width: 100%; + height: 74px; + padding: 23px; + border-radius: 0 0 20px 20px; + background: url('../../img/icons/eger.svg') center 1px no-repeat; + background-size: 102%; + transition: 0.2s; + + &:hover { + height: 80px; + + button { + font-size: 22px; + } + } + + button { + width: 100%; + border: 0; + background: transparent; + color: #ffffff; + outline: none; + font-weight: 600; + font-size: 18px; + letter-spacing: 0.4px; + text-align: center; + text-decoration: none; + text-transform: uppercase; + transition: 0.2s; + } + } + } + } +} diff --git a/src/sass/style.scss b/src/sass/style.scss index 0a23278..932a816 100644 --- a/src/sass/style.scss +++ b/src/sass/style.scss @@ -92,45 +92,7 @@ body { } } -.map-block-in-home { - &::after { - background-color: #f2f2f2 !important; - } -} -.footer-in-home { - &::before { - background-color: #f2f2f2 !important; - } -} - -.places-slider { - position: relative; - overflow: visible !important; - - &::after { - content: ''; - position: absolute; - top: -50px; - left: -75px; - display: block; - width: 163px; - height: 331px; - background: url('../img/places/balloon-blue.svg') center no-repeat; - } - - &::before { - content: ''; - position: absolute; - top: -200px; - right: -60px; - z-index: 100; - display: block; - width: 197px; - height: 423px; - background: url('../img/places/balloon-red.svg') center no-repeat; - } -} .quest-description__icons { padding-top: 8px; @@ -170,23 +132,7 @@ body { } -@media screen and (max-width: 1024px) { - .present .container { - &::after { - right: 0 !important; - } - &::before { - left: -72px !important; - } - } - - .places-slider { - &::before { - right: -30px; - } - } -} @media screen and (max-width: 800px) { h1 { @@ -198,26 +144,6 @@ body { height: 200px; background-position: top center !important; } - - .present .container { - &::after { - display: none !important; - } - - &::before { - display: none !important; - } - } - - .places-slider { - &::before { - display: none; - } - - &::after { - display: none; - } - } } @media screen and (max-width: 576px) { @@ -292,24 +218,6 @@ body { padding-bottom: 15px !important; } -.ent { - .owl-stage-outer { - padding-bottom: 30px !important; - } -} - -.principals { - .owl-stage-outer { - padding: 15px !important; - } -} - -.discount { - .owl-stage-outer { - padding: 15px 0 !important; - } -} - .btn-danger { border-color: $main-color; background-color: $main-color; @@ -371,9 +279,6 @@ body { } } -.form-block { - padding-bottom: 10px; -} .hide-menu { display: block !important; @@ -422,14 +327,6 @@ body { .full-page__border { display: none; height: auto !important; - - .callback-modal__body { - width: 80%; - } - } - - .form-block { - padding-bottom: 10px; } .wave > div { @@ -442,23 +339,4 @@ body { .packages-item { padding: 25px 23px !important; } - - .places .places-description { - font-size: 16px !important; - } } - -.places .places-description { - font-size: 24px; - letter-spacing: .5px; - text-align: center; - color: #1e212b; - max-width: 940px; - margin: 20px auto; - margin-bottom: 0; -} - -.places .places-description + div { - margin-top: 15px; -} - diff --git a/templates/quests.php b/templates/quests.php index 8f1cc76..29f922e 100644 --- a/templates/quests.php +++ b/templates/quests.php @@ -4,13 +4,16 @@ */ ?> + +
- +