add style lint
This commit is contained in:
parent
e4b1ae7c5b
commit
05b7be359b
305
.stylelintrc.json
Normal file
305
.stylelintrc.json
Normal file
@ -0,0 +1,305 @@
|
|||||||
|
{
|
||||||
|
"extends": [
|
||||||
|
"stylelint-order",
|
||||||
|
"stylelint-config-sass-guidelines"
|
||||||
|
],
|
||||||
|
"rules": {
|
||||||
|
"at-rule-no-vendor-prefix": true,
|
||||||
|
"color-hex-case": "lower",
|
||||||
|
"color-hex-length": "long",
|
||||||
|
"color-named": "never",
|
||||||
|
"comment-empty-line-before": "never",
|
||||||
|
"comment-whitespace-inside": "always",
|
||||||
|
"declaration-block-trailing-semicolon": "always",
|
||||||
|
"declaration-block-no-duplicate-properties": true,
|
||||||
|
"declaration-empty-line-before": "never",
|
||||||
|
"font-family-name-quotes": "always-unless-keyword",
|
||||||
|
"font-family-no-missing-generic-family-keyword": true,
|
||||||
|
"font-weight-notation": "numeric",
|
||||||
|
"function-url-scheme-disallowed-list": ["ftp", "/^http/"],
|
||||||
|
"max-nesting-depth": null,
|
||||||
|
"media-feature-colon-space-after": "always",
|
||||||
|
"media-feature-name-no-vendor-prefix": true,
|
||||||
|
"media-feature-parentheses-space-inside": "never",
|
||||||
|
"media-feature-range-operator-space-after": "always",
|
||||||
|
"media-feature-range-operator-space-before": "always",
|
||||||
|
"no-duplicate-selectors": true,
|
||||||
|
"no-invalid-double-slash-comments": true,
|
||||||
|
"number-leading-zero": "always",
|
||||||
|
"order/properties-alphabetical-order": null,
|
||||||
|
"property-no-vendor-prefix": true,
|
||||||
|
"rule-empty-line-before": [
|
||||||
|
"always-multi-line",
|
||||||
|
{"except": "first-nested"}
|
||||||
|
],
|
||||||
|
"selector-attribute-brackets-space-inside": "never",
|
||||||
|
"selector-attribute-operator-space-after": "always",
|
||||||
|
"selector-attribute-operator-space-before": "always",
|
||||||
|
"selector-attribute-quotes": "always",
|
||||||
|
"selector-class-pattern": null,
|
||||||
|
"selector-combinator-space-after": "always",
|
||||||
|
"selector-list-comma-newline-after": "always-multi-line",
|
||||||
|
"selector-max-compound-selectors": 5,
|
||||||
|
"selector-max-id": 1,
|
||||||
|
"selector-no-qualifying-type": null,
|
||||||
|
"selector-no-vendor-prefix": true,
|
||||||
|
"selector-pseudo-class-parentheses-space-inside": "never",
|
||||||
|
"selector-pseudo-element-colon-notation": "double",
|
||||||
|
"string-quotes": "single",
|
||||||
|
"value-no-vendor-prefix": true,
|
||||||
|
"order/order": [
|
||||||
|
[
|
||||||
|
"dollar-variables",
|
||||||
|
"custom-properties",
|
||||||
|
"at-rules",
|
||||||
|
"declarations",
|
||||||
|
{
|
||||||
|
"type": "at-rule",
|
||||||
|
"name": "supports"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "at-rule",
|
||||||
|
"name": "media"
|
||||||
|
},
|
||||||
|
"rules"
|
||||||
|
],
|
||||||
|
{
|
||||||
|
"severity": "warning"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"order/properties-order": [
|
||||||
|
[
|
||||||
|
"content",
|
||||||
|
"position",
|
||||||
|
"top",
|
||||||
|
"right",
|
||||||
|
"bottom",
|
||||||
|
"left",
|
||||||
|
"z-index",
|
||||||
|
"display",
|
||||||
|
"vertical-align",
|
||||||
|
"flex",
|
||||||
|
"flex-grow",
|
||||||
|
"flex-shrink",
|
||||||
|
"flex-basis",
|
||||||
|
"flex-direction",
|
||||||
|
"flex-flow",
|
||||||
|
"flex-wrap",
|
||||||
|
"grid",
|
||||||
|
"grid-area",
|
||||||
|
"grid-template",
|
||||||
|
"grid-template-areas",
|
||||||
|
"grid-template-rows",
|
||||||
|
"grid-template-columns",
|
||||||
|
"grid-row",
|
||||||
|
"grid-row-start",
|
||||||
|
"grid-row-end",
|
||||||
|
"grid-column",
|
||||||
|
"grid-column-start",
|
||||||
|
"grid-column-end",
|
||||||
|
"grid-auto-rows",
|
||||||
|
"grid-auto-columns",
|
||||||
|
"grid-auto-flow",
|
||||||
|
"grid-gap",
|
||||||
|
"grid-row-gap",
|
||||||
|
"grid-column-gap",
|
||||||
|
"gap",
|
||||||
|
"row-gap",
|
||||||
|
"column-gap",
|
||||||
|
"align-content",
|
||||||
|
"align-items",
|
||||||
|
"align-self",
|
||||||
|
"justify-content",
|
||||||
|
"justify-items",
|
||||||
|
"justify-self",
|
||||||
|
"order",
|
||||||
|
"float",
|
||||||
|
"clear",
|
||||||
|
"object-fit",
|
||||||
|
"overflow",
|
||||||
|
"overflow-x",
|
||||||
|
"overflow-y",
|
||||||
|
"overflow-scrolling",
|
||||||
|
"clip",
|
||||||
|
"box-sizing",
|
||||||
|
"width",
|
||||||
|
"min-width",
|
||||||
|
"max-width",
|
||||||
|
"height",
|
||||||
|
"min-height",
|
||||||
|
"max-height",
|
||||||
|
"margin",
|
||||||
|
"margin-top",
|
||||||
|
"margin-right",
|
||||||
|
"margin-bottom",
|
||||||
|
"margin-left",
|
||||||
|
"padding",
|
||||||
|
"padding-top",
|
||||||
|
"padding-right",
|
||||||
|
"padding-bottom",
|
||||||
|
"padding-left",
|
||||||
|
"border",
|
||||||
|
"border-spacing",
|
||||||
|
"border-collapse",
|
||||||
|
"border-width",
|
||||||
|
"border-style",
|
||||||
|
"border-color",
|
||||||
|
"border-top",
|
||||||
|
"border-top-width",
|
||||||
|
"border-top-style",
|
||||||
|
"border-top-color",
|
||||||
|
"border-right",
|
||||||
|
"border-right-width",
|
||||||
|
"border-right-style",
|
||||||
|
"border-right-color",
|
||||||
|
"border-bottom",
|
||||||
|
"border-bottom-width",
|
||||||
|
"border-bottom-style",
|
||||||
|
"border-bottom-color",
|
||||||
|
"border-left",
|
||||||
|
"border-left-width",
|
||||||
|
"border-left-style",
|
||||||
|
"border-left-color",
|
||||||
|
"border-radius",
|
||||||
|
"border-top-left-radius",
|
||||||
|
"border-top-right-radius",
|
||||||
|
"border-bottom-right-radius",
|
||||||
|
"border-bottom-left-radius",
|
||||||
|
"border-image",
|
||||||
|
"border-image-source",
|
||||||
|
"border-image-slice",
|
||||||
|
"border-image-width",
|
||||||
|
"border-image-outset",
|
||||||
|
"border-image-repeat",
|
||||||
|
"border-top-image",
|
||||||
|
"border-right-image",
|
||||||
|
"border-bottom-image",
|
||||||
|
"border-left-image",
|
||||||
|
"border-corner-image",
|
||||||
|
"border-top-left-image",
|
||||||
|
"border-top-right-image",
|
||||||
|
"border-bottom-right-image",
|
||||||
|
"border-bottom-left-image",
|
||||||
|
"background",
|
||||||
|
"background-color",
|
||||||
|
"background-image",
|
||||||
|
"background-attachment",
|
||||||
|
"background-position",
|
||||||
|
"background-position-x",
|
||||||
|
"background-position-y",
|
||||||
|
"background-clip",
|
||||||
|
"background-origin",
|
||||||
|
"background-size",
|
||||||
|
"background-repeat",
|
||||||
|
"color",
|
||||||
|
"box-decoration-break",
|
||||||
|
"box-shadow",
|
||||||
|
"outline",
|
||||||
|
"outline-width",
|
||||||
|
"outline-style",
|
||||||
|
"outline-color",
|
||||||
|
"outline-offset",
|
||||||
|
"table-layout",
|
||||||
|
"caption-side",
|
||||||
|
"empty-cells",
|
||||||
|
"list-style",
|
||||||
|
"list-style-position",
|
||||||
|
"list-style-type",
|
||||||
|
"list-style-image",
|
||||||
|
"font",
|
||||||
|
"font-weight",
|
||||||
|
"font-style",
|
||||||
|
"font-variant",
|
||||||
|
"font-size-adjust",
|
||||||
|
"font-stretch",
|
||||||
|
"font-size",
|
||||||
|
"font-family",
|
||||||
|
"src",
|
||||||
|
"line-height",
|
||||||
|
"letter-spacing",
|
||||||
|
"quotes",
|
||||||
|
"counter-increment",
|
||||||
|
"counter-reset",
|
||||||
|
"-ms-writing-mode",
|
||||||
|
"text-align",
|
||||||
|
"text-align-last",
|
||||||
|
"text-decoration",
|
||||||
|
"text-emphasis",
|
||||||
|
"text-emphasis-position",
|
||||||
|
"text-emphasis-style",
|
||||||
|
"text-emphasis-color",
|
||||||
|
"text-indent",
|
||||||
|
"text-justify",
|
||||||
|
"text-outline",
|
||||||
|
"text-transform",
|
||||||
|
"text-wrap",
|
||||||
|
"text-overflow",
|
||||||
|
"text-overflow-ellipsis",
|
||||||
|
"text-overflow-mode",
|
||||||
|
"text-shadow",
|
||||||
|
"white-space",
|
||||||
|
"word-spacing",
|
||||||
|
"word-wrap",
|
||||||
|
"word-break",
|
||||||
|
"overflow-wrap",
|
||||||
|
"tab-size",
|
||||||
|
"hyphens",
|
||||||
|
"interpolation-mode",
|
||||||
|
"opacity",
|
||||||
|
"visibility",
|
||||||
|
"filter",
|
||||||
|
"resize",
|
||||||
|
"cursor",
|
||||||
|
"pointer-events",
|
||||||
|
"user-select",
|
||||||
|
"unicode-bidi",
|
||||||
|
"direction",
|
||||||
|
"columns",
|
||||||
|
"column-span",
|
||||||
|
"column-width",
|
||||||
|
"column-count",
|
||||||
|
"column-fill",
|
||||||
|
"column-gap",
|
||||||
|
"column-rule",
|
||||||
|
"column-rule-width",
|
||||||
|
"column-rule-style",
|
||||||
|
"column-rule-color",
|
||||||
|
"break-before",
|
||||||
|
"break-inside",
|
||||||
|
"break-after",
|
||||||
|
"page-break-before",
|
||||||
|
"page-break-inside",
|
||||||
|
"page-break-after",
|
||||||
|
"orphans",
|
||||||
|
"widows",
|
||||||
|
"zoom",
|
||||||
|
"max-zoom",
|
||||||
|
"min-zoom",
|
||||||
|
"user-zoom",
|
||||||
|
"orientation",
|
||||||
|
"fill",
|
||||||
|
"stroke",
|
||||||
|
"transition",
|
||||||
|
"transition-delay",
|
||||||
|
"transition-timing-function",
|
||||||
|
"transition-duration",
|
||||||
|
"transition-property",
|
||||||
|
"transform",
|
||||||
|
"transform-origin",
|
||||||
|
"animation",
|
||||||
|
"animation-name",
|
||||||
|
"animation-duration",
|
||||||
|
"animation-play-state",
|
||||||
|
"animation-timing-function",
|
||||||
|
"animation-delay",
|
||||||
|
"animation-iteration-count",
|
||||||
|
"animation-direction",
|
||||||
|
"animation-fill-mode"
|
||||||
|
],
|
||||||
|
{
|
||||||
|
"unspecified": "bottom",
|
||||||
|
"severity": "warning"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
4062
package-lock.json
generated
4062
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -27,12 +27,17 @@
|
|||||||
"imagemin-zopfli": "^7.0.0",
|
"imagemin-zopfli": "^7.0.0",
|
||||||
"module-alias": "^2.2.2",
|
"module-alias": "^2.2.2",
|
||||||
"node-sass": "^5.0.0",
|
"node-sass": "^5.0.0",
|
||||||
|
"stylelint": "^13.12.0",
|
||||||
|
"stylelint-config-sass-guidelines": "^8.0.0",
|
||||||
|
"stylelint-config-standard": "^21.0.0",
|
||||||
|
"stylelint-order": "^4.1.0",
|
||||||
"yargs": "^15.4.1"
|
"yargs": "^15.4.1"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "gulp develop --develop",
|
"dev": "gulp develop --develop",
|
||||||
"build::dev": "gulp build --develop",
|
"build::dev": "gulp build --develop",
|
||||||
"build::prod": "gulp build --prod"
|
"build::prod": "gulp build --prod",
|
||||||
|
"stylelint::scss": "npx stylelint src/sass/**/*.scss"
|
||||||
},
|
},
|
||||||
"keywords": [],
|
"keywords": [],
|
||||||
"author": "",
|
"author": "",
|
||||||
|
|||||||
@ -1,4 +0,0 @@
|
|||||||
$main-color: #dc3545
|
|
||||||
$title-color: #732B3C
|
|
||||||
$text-color: #5A5A5A
|
|
||||||
$btn-color: #00C981
|
|
||||||
4
src/sass/constansts.scss
Normal file
4
src/sass/constansts.scss
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
$main-color: #dc3545;
|
||||||
|
$title-color: #732b3c;
|
||||||
|
$text-color: #5a5a5a;
|
||||||
|
$btn-color: #00c981;
|
||||||
@ -1,43 +0,0 @@
|
|||||||
@font-face
|
|
||||||
font-family: 'Museo Thin' // Имя шрифта
|
|
||||||
src: url(../fonts/Museo-Sans-Cyr/MuseoSansCyrl.otf) //Путь к файлу со шрифтом
|
|
||||||
|
|
||||||
@font-face
|
|
||||||
font-family: 'Museo Light' // Имя шрифта
|
|
||||||
src: url(../fonts/Museo-Sans-Cyr/MuseoSansCyrl_0.otf) //Путь к файлу со шрифтом
|
|
||||||
|
|
||||||
@font-face
|
|
||||||
font-family: 'Museo Regular' // Имя шрифта
|
|
||||||
src: url(../fonts/Museo-Sans-Cyr/MuseoSansCyrl_1.otf) //Путь к файлу со шрифтом
|
|
||||||
|
|
||||||
@font-face
|
|
||||||
font-family: 'Museo Bold' // Имя шрифта
|
|
||||||
src: url(../fonts/Museo-Sans-Cyr/MuseoSansCyrl_2.otf) //Путь к файлу со шрифтом
|
|
||||||
|
|
||||||
@font-face
|
|
||||||
font-family: 'Museo Black' // Имя шрифта
|
|
||||||
src: url(../fonts/Museo-Sans-Cyr/MuseoSansCyrl_3.otf) //Путь к файлу со шрифтом
|
|
||||||
src: url(../fonts/Museo-Sans-Cyr/MuseoSansCyrl_2.otf) //Путь к файлу со шрифтом
|
|
||||||
|
|
||||||
@font-face
|
|
||||||
font-family: 'Shadow Regular'
|
|
||||||
src: url('../fonts/Shadow/Shadow-Regular.ttf') format('truetype')
|
|
||||||
font-style: normal
|
|
||||||
font-weight: normal
|
|
||||||
|
|
||||||
@font-face
|
|
||||||
font-family: 'Montserrat'
|
|
||||||
src: url('../fonts/Montserrat/Montserrat-Regular.ttf') format('truetype')
|
|
||||||
@font-face
|
|
||||||
font-family: 'Montserrat'
|
|
||||||
src: url('../fonts/Montserrat/Montserrat-Medium.ttf') format('truetype')
|
|
||||||
font-weight: 500
|
|
||||||
|
|
||||||
@font-face
|
|
||||||
font-family: 'Roboto'
|
|
||||||
src: url('../fonts/Roboto/Roboto-Regular.ttf') format('truetype')
|
|
||||||
font-weight: 400
|
|
||||||
@font-face
|
|
||||||
font-family: 'Roboto'
|
|
||||||
src: url('../fonts/Roboto/Roboto-Medium.ttf') format('truetype')
|
|
||||||
font-weight: 500
|
|
||||||
55
src/sass/fonts.scss
Normal file
55
src/sass/fonts.scss
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: 'Museo Thin';
|
||||||
|
src: url('../fonts/Museo-Sans-Cyr/MuseoSansCyrl.otf');
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Museo Light';
|
||||||
|
src: url('../fonts/Museo-Sans-Cyr/MuseoSansCyrl_0.otf');
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Museo Regular';
|
||||||
|
src: url('../fonts/Museo-Sans-Cyr/MuseoSansCyrl_1.otf');
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Museo Bold';
|
||||||
|
src: url('../fonts/Museo-Sans-Cyr/MuseoSansCyrl_2.otf');
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Museo Black';
|
||||||
|
src: url('../fonts/Museo-Sans-Cyr/MuseoSansCyrl_3.otf');
|
||||||
|
src: url('../fonts/Museo-Sans-Cyr/MuseoSansCyrl_2.otf');
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-family: 'Shadow Regular';
|
||||||
|
src: url('../fonts/Shadow/Shadow-Regular.ttf') format('truetype');
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Montserrat';
|
||||||
|
src: url('../fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-weight: 500;
|
||||||
|
font-family: 'Montserrat';
|
||||||
|
src: url('../fonts/Montserrat/Montserrat-Medium.ttf') format('truetype');
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-weight: 400;
|
||||||
|
font-family: 'Roboto';
|
||||||
|
src: url('../fonts/Roboto/Roboto-Regular.ttf') format('truetype');
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-weight: 500;
|
||||||
|
font-family: 'Roboto';
|
||||||
|
src: url('../fonts/Roboto/Roboto-Medium.ttf') format('truetype');
|
||||||
|
}
|
||||||
@ -1,316 +0,0 @@
|
|||||||
@import './constansts'
|
|
||||||
|
|
||||||
.full-page__border
|
|
||||||
margin-top: -20px
|
|
||||||
padding: 25px 0
|
|
||||||
height: 144px
|
|
||||||
background: #f2f2f2 url(../img/holiday/border-wave-line.svg) center center no-repeat
|
|
||||||
background-size: 100% 48px
|
|
||||||
//background: #f2f2f2 url(../../img/holiday/border-wave-line.svg) center center no-repeat
|
|
||||||
//background-size: 100% 48px
|
|
||||||
|
|
||||||
.item
|
|
||||||
height: 577px
|
|
||||||
width: 777px
|
|
||||||
position: relative
|
|
||||||
|
|
||||||
.page
|
|
||||||
&-header
|
|
||||||
height: 408px
|
|
||||||
position: relative
|
|
||||||
display: flex
|
|
||||||
align-items: center
|
|
||||||
justify-content: center
|
|
||||||
box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.5)
|
|
||||||
h1
|
|
||||||
position: relative
|
|
||||||
z-index: 2
|
|
||||||
font-family: 'PT Sans', sans-serif
|
|
||||||
font-size: 48px
|
|
||||||
font-weight: 600
|
|
||||||
line-height: 0.75
|
|
||||||
letter-spacing: 0.4px
|
|
||||||
text-align: center
|
|
||||||
color: #ffffff
|
|
||||||
&-overlay
|
|
||||||
position: absolute
|
|
||||||
top: 0
|
|
||||||
left: 0
|
|
||||||
right: 0
|
|
||||||
bottom: 0
|
|
||||||
background: rgba(0, 0, 0, .35)
|
|
||||||
|
|
||||||
.wonderplugin3dcarousel-text
|
|
||||||
display: none
|
|
||||||
.wonderplugin3dcarousel-item
|
|
||||||
a
|
|
||||||
display: none
|
|
||||||
|
|
||||||
.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: ''
|
|
||||||
display: block
|
|
||||||
width: 163px
|
|
||||||
height: 331px
|
|
||||||
background: url('../img/places/balloon-blue.svg') center no-repeat
|
|
||||||
position: absolute
|
|
||||||
left: -75px
|
|
||||||
top: -50px
|
|
||||||
&::before
|
|
||||||
content: ''
|
|
||||||
display: block
|
|
||||||
background: url('../img/places/balloon-red.svg') center no-repeat
|
|
||||||
position: absolute
|
|
||||||
right: -60px
|
|
||||||
top: -200px
|
|
||||||
width: 197px
|
|
||||||
height: 423px
|
|
||||||
z-index: 100
|
|
||||||
.quest-description__icons
|
|
||||||
padding-top: 8px
|
|
||||||
.main
|
|
||||||
margin-top: 35px
|
|
||||||
margin-bottom: 35px
|
|
||||||
.contacts-image
|
|
||||||
transform: translateY(10px)
|
|
||||||
.callback-modal
|
|
||||||
display: none
|
|
||||||
height: 100vh
|
|
||||||
// position: fixed
|
|
||||||
&__layout
|
|
||||||
background-color: rgba(0, 0, 0, .6)
|
|
||||||
position: fixed
|
|
||||||
top: 0
|
|
||||||
bottom: 0
|
|
||||||
left: 0
|
|
||||||
width: 100%
|
|
||||||
z-index: 999999
|
|
||||||
&__body
|
|
||||||
position: fixed
|
|
||||||
top: 100px
|
|
||||||
left: 50%
|
|
||||||
transform: translateX(-50%)
|
|
||||||
z-index: 9999999
|
|
||||||
color: #303133
|
|
||||||
max-width: 300px
|
|
||||||
background: #ffffff
|
|
||||||
box-shadow: 0 1px 3px rgba(0,0,0,.3)
|
|
||||||
margin: 0 auto
|
|
||||||
padding: 25px 20px
|
|
||||||
padding-top: 10px
|
|
||||||
border-radius: 5px
|
|
||||||
&__close
|
|
||||||
display: flex
|
|
||||||
width: 100%
|
|
||||||
justify-content: flex-end
|
|
||||||
i
|
|
||||||
cursor: pointer
|
|
||||||
font-size: 20px
|
|
||||||
.gllr_image_block
|
|
||||||
margin-bottom: 20px
|
|
||||||
p
|
|
||||||
width: 240px !important
|
|
||||||
height: 180px !important
|
|
||||||
img
|
|
||||||
width: 240px !important
|
|
||||||
height: 180px !important
|
|
||||||
border: none !important
|
|
||||||
&:nth-child(4n+2)
|
|
||||||
// margin: 0 20px
|
|
||||||
margin-left: 20px
|
|
||||||
margin-right: 10px
|
|
||||||
&:nth-child(4n+3)
|
|
||||||
margin-left: 10px
|
|
||||||
margin-right: 20px
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@media screen and (max-width: 1024px)
|
|
||||||
.main
|
|
||||||
height: 250px !important
|
|
||||||
|
|
||||||
.present .container
|
|
||||||
&::after
|
|
||||||
right: 0 !important
|
|
||||||
&::before
|
|
||||||
left: -72px !important
|
|
||||||
.places-slider
|
|
||||||
&:before
|
|
||||||
right: -30px
|
|
||||||
@media screen and (max-width: 800px)
|
|
||||||
h1
|
|
||||||
font-size: 34px
|
|
||||||
line-height: 1.1
|
|
||||||
.page-header
|
|
||||||
background-position: top center !important
|
|
||||||
height: 200px
|
|
||||||
.present .container
|
|
||||||
&::after
|
|
||||||
display: none !important
|
|
||||||
&::before
|
|
||||||
display: none !important
|
|
||||||
.places-slider
|
|
||||||
&:before
|
|
||||||
display: none
|
|
||||||
&::after
|
|
||||||
display: none
|
|
||||||
|
|
||||||
@media screen and (max-width: 576px)
|
|
||||||
.btn-round
|
|
||||||
padding: 15px !important
|
|
||||||
.main
|
|
||||||
margin-top: 0
|
|
||||||
.page-header
|
|
||||||
h1
|
|
||||||
font-size: 28px
|
|
||||||
line-height: 1.2
|
|
||||||
|
|
||||||
.main
|
|
||||||
height: 200px !important
|
|
||||||
padding: 0 !important
|
|
||||||
img
|
|
||||||
width: 100% !important
|
|
||||||
.header-navmenu__item
|
|
||||||
&:first-child
|
|
||||||
display: none
|
|
||||||
|
|
||||||
|
|
||||||
.btn-round
|
|
||||||
padding: 14px 20px
|
|
||||||
font-size: 18px
|
|
||||||
font-weight: 600
|
|
||||||
letter-spacing: 1.2px
|
|
||||||
text-align: center
|
|
||||||
text-transform: uppercase
|
|
||||||
box-shadow: 0 2px 12px 0 rgba(56, 72, 95, 0.49)
|
|
||||||
margin-right: auto
|
|
||||||
margin-left: auto
|
|
||||||
border-radius: 44px
|
|
||||||
min-width: 165px
|
|
||||||
background-color: $main-color
|
|
||||||
border-color: $main-color
|
|
||||||
&:hover
|
|
||||||
background-color: darken($main-color, 10%)
|
|
||||||
border-color: $main-color
|
|
||||||
.hide
|
|
||||||
display: none
|
|
||||||
.owl-carousel
|
|
||||||
padding: 0
|
|
||||||
.owl-nav button
|
|
||||||
outline: none
|
|
||||||
.container
|
|
||||||
overflow: hidden
|
|
||||||
.owl-dots
|
|
||||||
display: flex
|
|
||||||
justify-content: center
|
|
||||||
.owl-dot
|
|
||||||
border: 1px solid #f2f2f2 !important
|
|
||||||
width: 30px !important
|
|
||||||
height: 3px !important
|
|
||||||
margin: 10px !important
|
|
||||||
.active
|
|
||||||
background-color: #000000 !important
|
|
||||||
border: 3px solid #f2f2f2 !important
|
|
||||||
.owl-stage-outer
|
|
||||||
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
|
|
||||||
background-color: $main-color
|
|
||||||
border-color: $main-color
|
|
||||||
&:hover
|
|
||||||
border-color: $main-color
|
|
||||||
|
|
||||||
.btn-outline-danger
|
|
||||||
color: $main-color
|
|
||||||
border-color: $main-color
|
|
||||||
&:hover
|
|
||||||
background-color: $main-color
|
|
||||||
border-color: $main-color
|
|
||||||
color: #fff
|
|
||||||
|
|
||||||
.wave
|
|
||||||
& > div
|
|
||||||
background-color: #f2f2f2
|
|
||||||
&::before
|
|
||||||
width: 100%
|
|
||||||
height: 112px
|
|
||||||
content: ''
|
|
||||||
display: block
|
|
||||||
position: relative
|
|
||||||
// top: -10px
|
|
||||||
left: 0
|
|
||||||
background: url(../img/wave/border-wave-top.svg) center no-repeat
|
|
||||||
background-size: 100% 112px
|
|
||||||
&::after
|
|
||||||
width: 100%
|
|
||||||
height: 112px
|
|
||||||
content: ''
|
|
||||||
display: block
|
|
||||||
position: relative
|
|
||||||
// top: -10px
|
|
||||||
bottom: 0
|
|
||||||
left: 0
|
|
||||||
background: url(../img/wave/border-wave-bottom.svg) center no-repeat
|
|
||||||
background-size: 100% 112px
|
|
||||||
&-no-bottom
|
|
||||||
&::after
|
|
||||||
display: none
|
|
||||||
&-no-top
|
|
||||||
&::before
|
|
||||||
display: none
|
|
||||||
.form-block
|
|
||||||
padding-bottom: 10px
|
|
||||||
|
|
||||||
.hide-menu
|
|
||||||
display: block !important
|
|
||||||
|
|
||||||
@media (min-width: 1200px)
|
|
||||||
.container, .container-lg, .container-md, .container-sm, .container-xl
|
|
||||||
max-width: 1195px
|
|
||||||
|
|
||||||
@media screen and (max-width: 770px)
|
|
||||||
.wave
|
|
||||||
&::before
|
|
||||||
background-size: 100% 55px
|
|
||||||
height: 55px
|
|
||||||
&::after
|
|
||||||
background-size: 100% 55px
|
|
||||||
height: 55px
|
|
||||||
|
|
||||||
@media screen and (max-width: 480px)
|
|
||||||
h2
|
|
||||||
font-size: 28px !important
|
|
||||||
.var-line
|
|
||||||
.row
|
|
||||||
max-width: 100%
|
|
||||||
margin: 0
|
|
||||||
.packages-item
|
|
||||||
width: 255px
|
|
||||||
.full-page__border
|
|
||||||
height: auto !important
|
|
||||||
display: none
|
|
||||||
.callback-modal__body
|
|
||||||
width: 80%
|
|
||||||
.form-block
|
|
||||||
padding-bottom: 10px
|
|
||||||
|
|
||||||
.wave>div
|
|
||||||
background: #fff
|
|
||||||
463
src/sass/other.scss
Normal file
463
src/sass/other.scss
Normal file
@ -0,0 +1,463 @@
|
|||||||
|
@import './constansts';
|
||||||
|
|
||||||
|
.full-page__border {
|
||||||
|
height: 144px;
|
||||||
|
margin-top: -20px;
|
||||||
|
padding: 25px 0;
|
||||||
|
background: #f2f2f2 url('../img/holiday/border-wave-line.svg') center center no-repeat;
|
||||||
|
background-size: 100% 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
position: relative;
|
||||||
|
width: 777px;
|
||||||
|
height: 577px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page {
|
||||||
|
&-header {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 408px;
|
||||||
|
box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
color: #ffffff;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 48px;
|
||||||
|
font-family: 'PT Sans', sans-serif;
|
||||||
|
line-height: 0.75;
|
||||||
|
letter-spacing: 0.4px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.35);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.wonderplugin3dcarousel-text {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wonderplugin3dcarousel-item {
|
||||||
|
a {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
margin-top: 35px;
|
||||||
|
margin-bottom: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contacts-image {
|
||||||
|
transform: translateY(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.callback-modal {
|
||||||
|
display: none;
|
||||||
|
height: 100vh;
|
||||||
|
|
||||||
|
&__layout {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 999999;
|
||||||
|
width: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__body {
|
||||||
|
position: fixed;
|
||||||
|
top: 100px;
|
||||||
|
left: 50%;
|
||||||
|
z-index: 9999999;
|
||||||
|
max-width: 300px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 10px 20px 25px;
|
||||||
|
border-radius: 5px;
|
||||||
|
background: #ffffff;
|
||||||
|
color: #303133;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__close {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.gllr_image_block {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
width: 240px !important;
|
||||||
|
height: 180px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 240px !important;
|
||||||
|
height: 180px !important;
|
||||||
|
border: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(4n+2) {
|
||||||
|
margin-right: 10px;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(4n+3) {
|
||||||
|
margin-right: 20px;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.main {
|
||||||
|
height: 250px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.present .container {
|
||||||
|
&::after {
|
||||||
|
right: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
left: -72px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.places-slider {
|
||||||
|
&::before {
|
||||||
|
right: -30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 800px) {
|
||||||
|
h1 {
|
||||||
|
font-size: 34px;
|
||||||
|
line-height: 1.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-header {
|
||||||
|
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) {
|
||||||
|
.btn-round {
|
||||||
|
padding: 15px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
height: 200px !important;
|
||||||
|
margin-top: 0;
|
||||||
|
padding: 0 !important;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-header {
|
||||||
|
h1 {
|
||||||
|
font-size: 28px;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-navmenu__item {
|
||||||
|
&:first-child {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.btn-round {
|
||||||
|
min-width: 165px;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
padding: 14px 20px;
|
||||||
|
border-color: $main-color;
|
||||||
|
border-radius: 44px;
|
||||||
|
background-color: $main-color;
|
||||||
|
box-shadow: 0 2px 12px 0 rgba(56, 72, 95, 0.49);
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 18px;
|
||||||
|
letter-spacing: 1.2px;
|
||||||
|
text-align: center;
|
||||||
|
text-transform: uppercase;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: $main-color;
|
||||||
|
background-color: darken($main-color, 10%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hide {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.owl-carousel {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.owl-nav button {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.owl-dots {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.owl-dot {
|
||||||
|
width: 30px !important;
|
||||||
|
height: 3px !important;
|
||||||
|
margin: 10px !important;
|
||||||
|
border: 1px solid #f2f2f2 !important;
|
||||||
|
|
||||||
|
.active {
|
||||||
|
border: 3px solid #f2f2f2 !important;
|
||||||
|
background-color: #000000 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.owl-stage-outer {
|
||||||
|
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;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: $main-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-outline-danger {
|
||||||
|
border-color: $main-color;
|
||||||
|
color: $main-color;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: $main-color;
|
||||||
|
background-color: $main-color;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.wave {
|
||||||
|
> div {
|
||||||
|
background-color: #f2f2f2;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: relative;
|
||||||
|
left: 0;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 112px;
|
||||||
|
background: url('../img/wave/border-wave-top.svg') center no-repeat;
|
||||||
|
background-size: 100% 112px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: relative;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 112px;
|
||||||
|
background: url('../img/wave/border-wave-bottom.svg') center no-repeat;
|
||||||
|
background-size: 100% 112px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-no-bottom {
|
||||||
|
&::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-no-top {
|
||||||
|
&::before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-block {
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hide-menu {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
.container,
|
||||||
|
.container-lg,
|
||||||
|
.container-md,
|
||||||
|
.container-sm,
|
||||||
|
.container-xl {
|
||||||
|
max-width: 1195px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 770px) {
|
||||||
|
.wave {
|
||||||
|
&::before {
|
||||||
|
height: 55px;
|
||||||
|
background-size: 100% 55px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
height: 55px;
|
||||||
|
background-size: 100% 55px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 480px) {
|
||||||
|
h2 {
|
||||||
|
font-size: 28px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.var-line {
|
||||||
|
.row {
|
||||||
|
max-width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.packages-item {
|
||||||
|
width: 255px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.full-page__border {
|
||||||
|
display: none;
|
||||||
|
height: auto !important;
|
||||||
|
|
||||||
|
.callback-modal__body {
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-block {
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wave > div {
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,131 +0,0 @@
|
|||||||
@import "../constansts"
|
|
||||||
|
|
||||||
.about
|
|
||||||
&-text
|
|
||||||
color: #000000
|
|
||||||
font-family: 'PT Sans', sans-serif
|
|
||||||
font-size: 16px
|
|
||||||
font-weight: 400
|
|
||||||
letter-spacing: 0.5px
|
|
||||||
margin: 80px auto
|
|
||||||
max-width: 970px !important
|
|
||||||
&-joki
|
|
||||||
font-family: 'PT Sans', sans-serif
|
|
||||||
padding-top: 30px
|
|
||||||
h1
|
|
||||||
color: $main-color
|
|
||||||
font-family: 'Museo Bold' ,sans-serif
|
|
||||||
font-size: 24px
|
|
||||||
font-weight: 700
|
|
||||||
letter-spacing: .4px
|
|
||||||
line-height: .75
|
|
||||||
text-align: center
|
|
||||||
&__header
|
|
||||||
border-bottom: 1px solid #e4e7ed
|
|
||||||
display: flex
|
|
||||||
margin-bottom: 20px
|
|
||||||
padding-left: 0
|
|
||||||
h3
|
|
||||||
align-items: center
|
|
||||||
box-sizing: border-box
|
|
||||||
cursor: pointer
|
|
||||||
display: flex
|
|
||||||
font-family: 'Museo Regular', sans-serif
|
|
||||||
font-size: 14px
|
|
||||||
font-weight: 500
|
|
||||||
height: 40px
|
|
||||||
justify-content: center
|
|
||||||
line-height: 40px
|
|
||||||
list-style: none
|
|
||||||
margin: 0 40px 0 0
|
|
||||||
text-align: center
|
|
||||||
&.active
|
|
||||||
border-bottom: 1px solid $main-color
|
|
||||||
&__body
|
|
||||||
max-width: 1210px !important
|
|
||||||
&-descr
|
|
||||||
h2
|
|
||||||
color: $main-color
|
|
||||||
font-family: 'Museo Regular' ,sans-serif
|
|
||||||
font-size: 24px
|
|
||||||
font-weight: 700
|
|
||||||
margin-bottom: 40px
|
|
||||||
margin-top: 20px
|
|
||||||
text-align: center
|
|
||||||
.about-content
|
|
||||||
p
|
|
||||||
color: #4c4c4c
|
|
||||||
font-family: 'Museo Regular' ,sans-serif
|
|
||||||
margin-bottom: 30px
|
|
||||||
margin-top: 15px
|
|
||||||
max-width: 650px
|
|
||||||
// &::before
|
|
||||||
// color: $main-color
|
|
||||||
// content: '\f005'
|
|
||||||
// font-family: 'FontAwesome', sans-serif
|
|
||||||
// margin-right: 10px
|
|
||||||
ul
|
|
||||||
list-style: none
|
|
||||||
margin-top: 30px
|
|
||||||
padding-inline-start: 0
|
|
||||||
li
|
|
||||||
h3
|
|
||||||
color: #4c4c4c
|
|
||||||
font-family: 'Museo Regular' ,sans-serif
|
|
||||||
font-size: 1.17rem
|
|
||||||
font-weight: 600
|
|
||||||
p
|
|
||||||
font-size: 16px
|
|
||||||
font-weight: 400
|
|
||||||
letter-spacing: 0.3px
|
|
||||||
line-height: 1.15
|
|
||||||
&::before
|
|
||||||
display: none
|
|
||||||
&-fb
|
|
||||||
display: none
|
|
||||||
h2
|
|
||||||
display: block
|
|
||||||
font-family: 'Museo Regular', sans-serif
|
|
||||||
font-size: 24px
|
|
||||||
text-align: center
|
|
||||||
&-feedback
|
|
||||||
&__title
|
|
||||||
font-family: 'Museo Regular', sans-serif
|
|
||||||
.name
|
|
||||||
font-weight: 700
|
|
||||||
font-size: 18px
|
|
||||||
.stars
|
|
||||||
color: gold
|
|
||||||
.col-6
|
|
||||||
text-align: end
|
|
||||||
&:first-child
|
|
||||||
text-align: start
|
|
||||||
.col-12
|
|
||||||
margin-top: 30px
|
|
||||||
&__block
|
|
||||||
background: #f2f2f2
|
|
||||||
padding: 30px
|
|
||||||
margin-bottom: 30px
|
|
||||||
|
|
||||||
|
|
||||||
@media screen and (max-width: 768px)
|
|
||||||
.about
|
|
||||||
&-joki
|
|
||||||
&__body-descr
|
|
||||||
p
|
|
||||||
max-width: 100% !important
|
|
||||||
|
|
||||||
@media screen and (max-width: 576px)
|
|
||||||
.about
|
|
||||||
&-joki
|
|
||||||
&__header
|
|
||||||
padding: 0 20px !important
|
|
||||||
&__body-fb h2
|
|
||||||
font-size: 20px !important
|
|
||||||
&__body-descr
|
|
||||||
h2
|
|
||||||
font-size: 20px !important
|
|
||||||
.about-content p
|
|
||||||
text-align: center
|
|
||||||
.about-content ul li p
|
|
||||||
text-align: left
|
|
||||||
191
src/sass/pages/about.scss
Normal file
191
src/sass/pages/about.scss
Normal file
@ -0,0 +1,191 @@
|
|||||||
|
@import '../constansts';
|
||||||
|
|
||||||
|
.about {
|
||||||
|
&-text {
|
||||||
|
max-width: 970px !important;
|
||||||
|
margin: 80px auto;
|
||||||
|
color: #000000;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: 'PT Sans', sans-serif;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-joki {
|
||||||
|
padding-top: 30px;
|
||||||
|
font-family: 'PT Sans', sans-serif;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: $main-color;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 24px;
|
||||||
|
font-family: 'Museo Bold', sans-serif;
|
||||||
|
line-height: 0.75;
|
||||||
|
letter-spacing: 0.4px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__header {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding-left: 0;
|
||||||
|
border-bottom: 1px solid #e4e7ed;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 40px;
|
||||||
|
margin: 0 40px 0 0;
|
||||||
|
list-style: none;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: 'Museo Regular', sans-serif;
|
||||||
|
line-height: 40px;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
border-bottom: 1px solid $main-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__body {
|
||||||
|
max-width: 1210px !important;
|
||||||
|
|
||||||
|
&-descr {
|
||||||
|
h2 {
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
color: $main-color;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 24px;
|
||||||
|
font-family: 'Museo Regular', sans-serif;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-content {
|
||||||
|
p {
|
||||||
|
max-width: 650px;
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
color: #4c4c4c;
|
||||||
|
font-family: 'Museo Regular', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
margin-top: 30px;
|
||||||
|
list-style: none;
|
||||||
|
padding-inline-start: 0;
|
||||||
|
|
||||||
|
li {
|
||||||
|
h3 {
|
||||||
|
color: #4c4c4c;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1.17rem;
|
||||||
|
font-family: 'Museo Regular', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.15;
|
||||||
|
letter-spacing: 0.3px;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-fb {
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
display: block;
|
||||||
|
font-size: 24px;
|
||||||
|
font-family: 'Museo Regular', sans-serif;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-feedback {
|
||||||
|
&__title {
|
||||||
|
font-family: 'Museo Regular', sans-serif;
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stars {
|
||||||
|
color: #ffd700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-6 {
|
||||||
|
text-align: end;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
text-align: start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-12 {
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__block {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
padding: 30px;
|
||||||
|
background: #f2f2f2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.about {
|
||||||
|
&-joki {
|
||||||
|
&__body-descr {
|
||||||
|
p {
|
||||||
|
max-width: 100% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 576px) {
|
||||||
|
.about {
|
||||||
|
&-joki {
|
||||||
|
&__header {
|
||||||
|
padding: 0 20px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__body-fb h2 {
|
||||||
|
font-size: 20px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__body-descr {
|
||||||
|
h2 {
|
||||||
|
font-size: 20px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-content p {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-content ul li p {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,225 +0,0 @@
|
|||||||
.cert
|
|
||||||
&-text
|
|
||||||
font-family: 'PT Sans', sans-serif
|
|
||||||
margin-top: 50px
|
|
||||||
h3
|
|
||||||
color: #1d1d1d
|
|
||||||
display: none
|
|
||||||
font-size: 32px
|
|
||||||
font-weight: 600
|
|
||||||
letter-spacing: 0.1px
|
|
||||||
margin: 0 0 12px 0
|
|
||||||
p
|
|
||||||
color: #1d1d1d
|
|
||||||
font-size: 18px
|
|
||||||
letter-spacing: 0.1px
|
|
||||||
line-height: 1.33
|
|
||||||
button
|
|
||||||
margin-top: 30px
|
|
||||||
&__block
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
padding-top: 20px
|
|
||||||
&-advantages
|
|
||||||
margin-top: 60px
|
|
||||||
h2
|
|
||||||
color: #1e212b
|
|
||||||
font-size: 40px
|
|
||||||
font-weight: 600
|
|
||||||
letter-spacing: 0.5px
|
|
||||||
line-height: normal
|
|
||||||
margin-bottom: 40px
|
|
||||||
text-align: center
|
|
||||||
.row
|
|
||||||
margin-left: auto
|
|
||||||
margin-right: auto
|
|
||||||
margin-top: 20px
|
|
||||||
max-width: 1440px
|
|
||||||
&__item
|
|
||||||
align-items: center
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
img
|
|
||||||
margin-bottom: 10px
|
|
||||||
min-height: 117px
|
|
||||||
span
|
|
||||||
color: #000000
|
|
||||||
font-family: 'PT Sans', sans-serif
|
|
||||||
font-size: 18px
|
|
||||||
letter-spacing: 0.3px
|
|
||||||
max-width: 130px
|
|
||||||
text-align: center
|
|
||||||
&-target
|
|
||||||
h2
|
|
||||||
color: #1e212b
|
|
||||||
font-size: 40px
|
|
||||||
font-weight: 600
|
|
||||||
letter-spacing: 0.5px
|
|
||||||
line-height: normal
|
|
||||||
margin-bottom: 70px
|
|
||||||
text-align: center
|
|
||||||
.row
|
|
||||||
margin-left: auto
|
|
||||||
margin-right: auto
|
|
||||||
max-width: 1290px
|
|
||||||
&__item
|
|
||||||
align-items: flex-start
|
|
||||||
display: flex
|
|
||||||
justify-content: center
|
|
||||||
margin-bottom: 70px
|
|
||||||
max-width: 600px
|
|
||||||
img
|
|
||||||
border-radius: 50%
|
|
||||||
height: 260px
|
|
||||||
width: 260px
|
|
||||||
&-text
|
|
||||||
font-family: 'PT Sans', sans-serif
|
|
||||||
margin-left: 45px
|
|
||||||
max-width: 280px
|
|
||||||
h4
|
|
||||||
color: #1d1d1d
|
|
||||||
font-size: 24px
|
|
||||||
font-weight: 600
|
|
||||||
letter-spacing: 0.1px
|
|
||||||
margin: 0 0 12px 0
|
|
||||||
p
|
|
||||||
color: #1d1d1d
|
|
||||||
font-size: 18px
|
|
||||||
letter-spacing: 0.1px
|
|
||||||
line-height: 1.15
|
|
||||||
&-items
|
|
||||||
padding-top: 15px
|
|
||||||
img
|
|
||||||
max-height: 360px
|
|
||||||
max-width: 100%
|
|
||||||
h2
|
|
||||||
color: #1e212b
|
|
||||||
font-size: 40px
|
|
||||||
font-weight: 600
|
|
||||||
letter-spacing: 0.5px
|
|
||||||
line-height: normal
|
|
||||||
text-align: center
|
|
||||||
.row
|
|
||||||
margin-left: auto
|
|
||||||
margin-right: auto
|
|
||||||
margin-top: 50px
|
|
||||||
max-width: 1290px
|
|
||||||
div
|
|
||||||
align-items: center
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
margin-bottom: 50px
|
|
||||||
span
|
|
||||||
color: #1d1d1d
|
|
||||||
font-size: 24px
|
|
||||||
font-weight: 600
|
|
||||||
letter-spacing: 0.1px
|
|
||||||
margin: 0 0 20px 0
|
|
||||||
max-width: 300px
|
|
||||||
text-align: center
|
|
||||||
&-modal
|
|
||||||
bottom: 0
|
|
||||||
display: none
|
|
||||||
height: 100vh
|
|
||||||
left: 0
|
|
||||||
position: fixed
|
|
||||||
right: 0
|
|
||||||
top: 0
|
|
||||||
width: 100%
|
|
||||||
z-index: 99999
|
|
||||||
&-overlay
|
|
||||||
background-color: rgba(0, 0, 0, 0.35)
|
|
||||||
bottom: 0
|
|
||||||
left: 0
|
|
||||||
position: absolute
|
|
||||||
right: 0
|
|
||||||
top: 0
|
|
||||||
|
|
||||||
@media screen and (max-width: 1200px)
|
|
||||||
.cert
|
|
||||||
&-text
|
|
||||||
.row
|
|
||||||
justify-content: space-between !important
|
|
||||||
&-target
|
|
||||||
.row
|
|
||||||
justify-content: center !important
|
|
||||||
|
|
||||||
@media screen and (max-width: 768px)
|
|
||||||
.cert
|
|
||||||
&-text
|
|
||||||
&__header
|
|
||||||
display: none
|
|
||||||
h3
|
|
||||||
text-align: center
|
|
||||||
&__img
|
|
||||||
display: flex
|
|
||||||
justify-content: center
|
|
||||||
.row
|
|
||||||
h3
|
|
||||||
display: none
|
|
||||||
&__block
|
|
||||||
align-items: center
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
justify-content: center
|
|
||||||
&-advantages
|
|
||||||
.row
|
|
||||||
justify-content: center !important
|
|
||||||
.cert-advantages__item
|
|
||||||
margin-bottom: 20px
|
|
||||||
margin-top: 20px
|
|
||||||
|
|
||||||
@media screen and (max-width: 576px)
|
|
||||||
.cert
|
|
||||||
&-text
|
|
||||||
padding-bottom: 15px
|
|
||||||
&__header
|
|
||||||
font-size: 26px !important
|
|
||||||
&____block
|
|
||||||
button
|
|
||||||
margin-bottom: 10px !important
|
|
||||||
margin-top: 0 !important
|
|
||||||
&-target
|
|
||||||
background: #f2f2f2 !important
|
|
||||||
h2
|
|
||||||
font-size: 26px !important
|
|
||||||
max-width: 395px
|
|
||||||
margin-bottom: 35px
|
|
||||||
&__item
|
|
||||||
align-items: center
|
|
||||||
flex-direction: column
|
|
||||||
margin-bottom: 20px
|
|
||||||
img
|
|
||||||
width: 140px
|
|
||||||
height: 140px
|
|
||||||
&-text
|
|
||||||
margin-left: 0
|
|
||||||
margin-top: 40px
|
|
||||||
text-align: center
|
|
||||||
h4
|
|
||||||
font-size: 18px
|
|
||||||
p
|
|
||||||
font-size: 14px
|
|
||||||
&-items
|
|
||||||
font-family: 'PT Sans', sans-serif
|
|
||||||
.row
|
|
||||||
div
|
|
||||||
margin-bottom: 35px
|
|
||||||
h2
|
|
||||||
font-size: 26px !important
|
|
||||||
letter-spacing: 0.3px
|
|
||||||
line-height: 1.09
|
|
||||||
margin-left: auto
|
|
||||||
margin-right: auto
|
|
||||||
max-width: 365px
|
|
||||||
padding: 0 10px
|
|
||||||
span
|
|
||||||
font-size: 18px !important
|
|
||||||
button
|
|
||||||
font-size: 14px
|
|
||||||
.row
|
|
||||||
margin-top: 20px
|
|
||||||
&-advantages
|
|
||||||
margin-top: 25px
|
|
||||||
h2
|
|
||||||
font-size: 26px !important
|
|
||||||
340
src/sass/pages/certificates.scss
Normal file
340
src/sass/pages/certificates.scss
Normal file
@ -0,0 +1,340 @@
|
|||||||
|
.cert {
|
||||||
|
&-text {
|
||||||
|
margin-top: 50px;
|
||||||
|
font-family: 'PT Sans', sans-serif;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
display: none;
|
||||||
|
margin: 0 0 12px;
|
||||||
|
color: #1d1d1d;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 32px;
|
||||||
|
letter-spacing: 0.1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #1d1d1d;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 1.33;
|
||||||
|
letter-spacing: 0.1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__block {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding-top: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-advantages {
|
||||||
|
margin-top: 60px;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
color: #1e212b;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 40px;
|
||||||
|
line-height: normal;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
max-width: 1440px;
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
img {
|
||||||
|
min-height: 117px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
max-width: 130px;
|
||||||
|
color: #000000;
|
||||||
|
font-size: 18px;
|
||||||
|
font-family: 'PT Sans', sans-serif;
|
||||||
|
letter-spacing: 0.3px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-target {
|
||||||
|
h2 {
|
||||||
|
margin-bottom: 70px;
|
||||||
|
color: #1e212b;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 40px;
|
||||||
|
line-height: normal;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
max-width: 1290px;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
max-width: 600px;
|
||||||
|
margin-bottom: 70px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 260px;
|
||||||
|
height: 260px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-text {
|
||||||
|
max-width: 280px;
|
||||||
|
margin-left: 45px;
|
||||||
|
font-family: 'PT Sans', sans-serif;
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
margin: 0 0 12px;
|
||||||
|
color: #1d1d1d;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 24px;
|
||||||
|
letter-spacing: 0.1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #1d1d1d;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 1.15;
|
||||||
|
letter-spacing: 0.1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-items {
|
||||||
|
padding-top: 15px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 360px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
color: #1e212b;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 40px;
|
||||||
|
line-height: normal;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
max-width: 1290px;
|
||||||
|
margin-top: 50px;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
|
||||||
|
div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
|
||||||
|
span {
|
||||||
|
max-width: 300px;
|
||||||
|
margin: 0 0 20px;
|
||||||
|
color: #1d1d1d;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 24px;
|
||||||
|
letter-spacing: 0.1px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-modal {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 99999;
|
||||||
|
display: none;
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
|
||||||
|
&-overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.35);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1200px) {
|
||||||
|
.cert {
|
||||||
|
&-text {
|
||||||
|
.row {
|
||||||
|
justify-content: space-between !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-target {
|
||||||
|
.row {
|
||||||
|
justify-content: center !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.cert {
|
||||||
|
&-text {
|
||||||
|
&__header {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__img {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
h3 {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__block {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-advantages {
|
||||||
|
.row {
|
||||||
|
justify-content: center !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cert-advantages__item {
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 576px) {
|
||||||
|
.cert {
|
||||||
|
&-text {
|
||||||
|
padding-bottom: 15px;
|
||||||
|
|
||||||
|
&__header {
|
||||||
|
font-size: 26px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&____block {
|
||||||
|
button {
|
||||||
|
margin-top: 0 !important;
|
||||||
|
margin-bottom: 10px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-target {
|
||||||
|
background: #f2f2f2 !important;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
max-width: 395px;
|
||||||
|
margin-bottom: 35px;
|
||||||
|
font-size: 26px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 140px;
|
||||||
|
height: 140px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-text {
|
||||||
|
margin-top: 40px;
|
||||||
|
margin-left: 0;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-items {
|
||||||
|
font-family: 'PT Sans', sans-serif;
|
||||||
|
|
||||||
|
.row {
|
||||||
|
margin-top: 20px;
|
||||||
|
|
||||||
|
div {
|
||||||
|
margin-bottom: 35px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
max-width: 365px;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
padding: 0 10px;
|
||||||
|
font-size: 26px !important;
|
||||||
|
line-height: 1.09;
|
||||||
|
letter-spacing: 0.3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: 18px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-advantages {
|
||||||
|
margin-top: 25px;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 26px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,113 +0,0 @@
|
|||||||
@import '../constansts'
|
|
||||||
|
|
||||||
.contacts
|
|
||||||
font-family: 'Museo Regular', sans-serif
|
|
||||||
padding-bottom: 30px
|
|
||||||
&-text
|
|
||||||
margin-top: 20px
|
|
||||||
i
|
|
||||||
color: $main-color
|
|
||||||
font-size: 29px
|
|
||||||
margin-right: 10px
|
|
||||||
h2
|
|
||||||
color: #363943
|
|
||||||
font-size: 24px
|
|
||||||
font-weight: 600
|
|
||||||
letter-spacing: 0.3px
|
|
||||||
&-info
|
|
||||||
margin-bottom: 40px
|
|
||||||
p,a
|
|
||||||
color: #363943
|
|
||||||
font-size: 22px
|
|
||||||
letter-spacing: 0.5px
|
|
||||||
line-height: 1.45
|
|
||||||
margin-left: 25px
|
|
||||||
max-width: 400px
|
|
||||||
a
|
|
||||||
margin-left: 35px
|
|
||||||
h2
|
|
||||||
margin-top: 20px
|
|
||||||
.col-3
|
|
||||||
align-items: center
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
.col-4
|
|
||||||
align-items: center
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
&-description
|
|
||||||
h2
|
|
||||||
color: #000000
|
|
||||||
font-size: 32px
|
|
||||||
font-weight: 600
|
|
||||||
letter-spacing: 0.3px
|
|
||||||
margin: 0 0 12px 0
|
|
||||||
.how
|
|
||||||
color: #000000
|
|
||||||
font-size: 22px
|
|
||||||
letter-spacing: 0.5px
|
|
||||||
line-height: 1.45
|
|
||||||
h3
|
|
||||||
color: #000000
|
|
||||||
font-size: 22px
|
|
||||||
font-weight: bold
|
|
||||||
letter-spacing: 0.5px
|
|
||||||
line-height: 1.45
|
|
||||||
&-map
|
|
||||||
&>ymaps
|
|
||||||
margin: 0 auto
|
|
||||||
|
|
||||||
.armanty_map_mobile
|
|
||||||
display: none
|
|
||||||
|
|
||||||
@media screen and (max-width: 1200px)
|
|
||||||
.contacts
|
|
||||||
&-description
|
|
||||||
padding-right: 0
|
|
||||||
padding-left: 0
|
|
||||||
h2
|
|
||||||
font-size: 26px !important
|
|
||||||
p,h3
|
|
||||||
font-size: 18px !important
|
|
||||||
&-map
|
|
||||||
max-width: 100%
|
|
||||||
overflow: hidden
|
|
||||||
|
|
||||||
@media screen and (max-width: 768px)
|
|
||||||
.contacts
|
|
||||||
&-info
|
|
||||||
p,a
|
|
||||||
font-size: 18px
|
|
||||||
&-image
|
|
||||||
display: flex
|
|
||||||
align-items: center
|
|
||||||
justify-content: center
|
|
||||||
margin-bottom: 30px
|
|
||||||
|
|
||||||
@media screen and (max-width: 576px)
|
|
||||||
.armanty_map_mobile
|
|
||||||
display: block
|
|
||||||
.armanty_map_desktop
|
|
||||||
display: none
|
|
||||||
.contacts
|
|
||||||
&-info
|
|
||||||
h2, i
|
|
||||||
font-size: 18px !important
|
|
||||||
p,a
|
|
||||||
font-size: 16px
|
|
||||||
margin-bottom: 5px
|
|
||||||
h2
|
|
||||||
margin: 5px 0 10px
|
|
||||||
&-description
|
|
||||||
padding: 10px
|
|
||||||
h2
|
|
||||||
font-size: 22px !important
|
|
||||||
h3, p
|
|
||||||
font-size: 16px !important
|
|
||||||
&-image
|
|
||||||
img
|
|
||||||
max-width: 100%
|
|
||||||
&-map
|
|
||||||
height: 400px
|
|
||||||
margin-bottom: 40px
|
|
||||||
|
|
||||||
180
src/sass/pages/contacts.scss
Normal file
180
src/sass/pages/contacts.scss
Normal file
@ -0,0 +1,180 @@
|
|||||||
|
@import '../constansts';
|
||||||
|
|
||||||
|
.contacts {
|
||||||
|
padding-bottom: 30px;
|
||||||
|
font-family: 'Museo Regular', sans-serif;
|
||||||
|
|
||||||
|
&-text {
|
||||||
|
margin-top: 20px;
|
||||||
|
|
||||||
|
i {
|
||||||
|
margin-right: 10px;
|
||||||
|
color: $main-color;
|
||||||
|
font-size: 29px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
color: #363943;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 24px;
|
||||||
|
letter-spacing: 0.3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-info {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
|
||||||
|
p, a {
|
||||||
|
max-width: 400px;
|
||||||
|
margin-left: 25px;
|
||||||
|
color: #363943;
|
||||||
|
font-size: 22px;
|
||||||
|
line-height: 1.45;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
margin-left: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-3 {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-4 {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-description {
|
||||||
|
h2 {
|
||||||
|
margin: 0 0 12px;
|
||||||
|
color: #000000;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 32px;
|
||||||
|
letter-spacing: 0.3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.how {
|
||||||
|
color: #000000;
|
||||||
|
font-size: 22px;
|
||||||
|
line-height: 1.45;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
color: #000000;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 22px;
|
||||||
|
line-height: 1.45;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-map {
|
||||||
|
> ymaps {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.armanty_map_mobile {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1200px) {
|
||||||
|
.contacts {
|
||||||
|
&-description {
|
||||||
|
padding-right: 0;
|
||||||
|
padding-left: 0;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 26px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
p, h3 {
|
||||||
|
font-size: 18px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-map {
|
||||||
|
overflow: hidden;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.contacts {
|
||||||
|
&-info {
|
||||||
|
p, a {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-image {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 576px) {
|
||||||
|
.armanty_map_mobile {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.armanty_map_desktop {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contacts {
|
||||||
|
&-info {
|
||||||
|
h2, i {
|
||||||
|
font-size: 18px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
p, a {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin: 5px 0 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-description {
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 22px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3, p {
|
||||||
|
font-size: 16px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-image {
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-map {
|
||||||
|
height: 400px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,160 +0,0 @@
|
|||||||
@import '../constansts'
|
|
||||||
@import "../parts/order"
|
|
||||||
|
|
||||||
.btn, body
|
|
||||||
font-size: 16px !important
|
|
||||||
|
|
||||||
|
|
||||||
.form-block
|
|
||||||
h1
|
|
||||||
font-family: 'Museo Regular', sans-serif
|
|
||||||
font-size: 32px
|
|
||||||
font-weight: 600
|
|
||||||
text-align: center
|
|
||||||
input, select
|
|
||||||
&:focus
|
|
||||||
border: 1px solid $main-color
|
|
||||||
box-shadow: none
|
|
||||||
option
|
|
||||||
padding-bottom: 5px
|
|
||||||
padding-top: 5px
|
|
||||||
.form-add
|
|
||||||
&__item
|
|
||||||
align-items: center
|
|
||||||
border-radius: 10px
|
|
||||||
border: 1px solid #606266
|
|
||||||
display: flex
|
|
||||||
height: 82px
|
|
||||||
justify-content: space-between
|
|
||||||
padding: 10px
|
|
||||||
.btn-adding
|
|
||||||
background-color: #5cb85c !important
|
|
||||||
border-color: #4cae4c !important
|
|
||||||
color: #fff
|
|
||||||
min-width: 90px
|
|
||||||
.btn
|
|
||||||
min-width: 100px
|
|
||||||
i
|
|
||||||
font-size: 48px
|
|
||||||
&.mr10
|
|
||||||
margin-left: 10px
|
|
||||||
&-text
|
|
||||||
color: #4c4c4c
|
|
||||||
text-align: center
|
|
||||||
h6
|
|
||||||
font-size: 18px
|
|
||||||
.guest-img
|
|
||||||
div
|
|
||||||
align-items: flex-start
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
min-width: 395px
|
|
||||||
&:first-child
|
|
||||||
padding-left: 21px
|
|
||||||
.cheque
|
|
||||||
background-color: #f0f0f0
|
|
||||||
color: #4c4c4c
|
|
||||||
padding-top: 15px
|
|
||||||
h3
|
|
||||||
font-family: 'Museo Bold', sans-serif
|
|
||||||
font-size: 20px
|
|
||||||
h4
|
|
||||||
color: $main-color
|
|
||||||
font-family: 'Museo Bold', sans-serif
|
|
||||||
font-size: 15px
|
|
||||||
margin-bottom: 20px
|
|
||||||
margin-top: 20px
|
|
||||||
p
|
|
||||||
font-size: 16px
|
|
||||||
div
|
|
||||||
border-bottom: 2px dashed #fff
|
|
||||||
padding-left: 15px
|
|
||||||
position: relative
|
|
||||||
&.dots
|
|
||||||
&:before
|
|
||||||
background-color: #ffffff
|
|
||||||
border-radius: 50%
|
|
||||||
bottom: -7px
|
|
||||||
content: ''
|
|
||||||
display: block
|
|
||||||
height: 15px
|
|
||||||
left: -7px
|
|
||||||
position: absolute
|
|
||||||
width: 15px
|
|
||||||
&:after
|
|
||||||
background-color: #ffffff
|
|
||||||
border-radius: 50%
|
|
||||||
bottom: -7px
|
|
||||||
content: ''
|
|
||||||
display: block
|
|
||||||
height: 15px
|
|
||||||
position: absolute
|
|
||||||
right: -7px
|
|
||||||
width: 15px
|
|
||||||
&:last-child
|
|
||||||
border-bottom: none
|
|
||||||
&-quest
|
|
||||||
display: none
|
|
||||||
&-date
|
|
||||||
display: none
|
|
||||||
&-guests
|
|
||||||
display: none
|
|
||||||
&-adding
|
|
||||||
display: none
|
|
||||||
&-sum
|
|
||||||
display: none
|
|
||||||
.dropdown-menu
|
|
||||||
a
|
|
||||||
background-color: #f5f7fa !important
|
|
||||||
&:hover
|
|
||||||
color: #606266 !important
|
|
||||||
&.selected
|
|
||||||
background-color: #fefefe
|
|
||||||
color: $main-color
|
|
||||||
.input-group-btn
|
|
||||||
button
|
|
||||||
max-height: 34px
|
|
||||||
|
|
||||||
@media screen and (max-width: 1200px)
|
|
||||||
.guest-img
|
|
||||||
div
|
|
||||||
min-width: auto !important
|
|
||||||
img
|
|
||||||
width: 300px
|
|
||||||
|
|
||||||
.form-add__item
|
|
||||||
align-items: center !important
|
|
||||||
|
|
||||||
@media screen and (max-width: 576px)
|
|
||||||
.form-add__item
|
|
||||||
justify-content: space-between !important
|
|
||||||
padding: 10px
|
|
||||||
|
|
||||||
.form-block h1
|
|
||||||
font-size: 28px
|
|
||||||
text-align: left
|
|
||||||
|
|
||||||
.main-form
|
|
||||||
position: unset
|
|
||||||
&-submit
|
|
||||||
bottom: 0
|
|
||||||
left: 15px
|
|
||||||
position: absolute
|
|
||||||
z-index: 9
|
|
||||||
|
|
||||||
.col-lg-8
|
|
||||||
position: unset
|
|
||||||
|
|
||||||
.all-form
|
|
||||||
position: relative
|
|
||||||
padding-bottom: 50px
|
|
||||||
|
|
||||||
.guest-img
|
|
||||||
align-items: center
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
justify-center: center
|
|
||||||
margin: 0 auto
|
|
||||||
div
|
|
||||||
align-items: center !important
|
|
||||||
margin-bottom: 10px
|
|
||||||
241
src/sass/pages/form.scss
Normal file
241
src/sass/pages/form.scss
Normal file
@ -0,0 +1,241 @@
|
|||||||
|
@import '../constansts';
|
||||||
|
@import '../parts/order';
|
||||||
|
|
||||||
|
.btn, body {
|
||||||
|
font-size: 16px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-block {
|
||||||
|
h1 {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 32px;
|
||||||
|
font-family: 'Museo Regular', sans-serif;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
input, select {
|
||||||
|
&:focus {
|
||||||
|
border: 1px solid $main-color;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
option {
|
||||||
|
padding-top: 5px;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-add {
|
||||||
|
&__item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 82px;
|
||||||
|
padding: 10px;
|
||||||
|
border: 1px solid #606266;
|
||||||
|
border-radius: 10px;
|
||||||
|
|
||||||
|
.btn-adding {
|
||||||
|
min-width: 90px;
|
||||||
|
border-color: #4cae4c !important;
|
||||||
|
background-color: #5cb85c !important;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
min-width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 48px;
|
||||||
|
|
||||||
|
&.mr10 {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-text {
|
||||||
|
color: #4c4c4c;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
h6 {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.guest-img {
|
||||||
|
div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
min-width: 395px;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
padding-left: 21px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cheque {
|
||||||
|
padding-top: 15px;
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
color: #4c4c4c;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 20px;
|
||||||
|
font-family: 'Museo Bold', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: $main-color;
|
||||||
|
font-size: 15px;
|
||||||
|
font-family: 'Museo Bold', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
position: relative;
|
||||||
|
padding-left: 15px;
|
||||||
|
border-bottom: 2px dashed #ffffff;
|
||||||
|
|
||||||
|
&.dots {
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: -7px;
|
||||||
|
left: -7px;
|
||||||
|
display: block;
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
right: -7px;
|
||||||
|
bottom: -7px;
|
||||||
|
display: block;
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-quest {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-date {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-guests {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-adding {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-sum {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu {
|
||||||
|
a {
|
||||||
|
background-color: #f5f7fa !important;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #606266 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.selected {
|
||||||
|
background-color: #fefefe;
|
||||||
|
color: $main-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group-btn {
|
||||||
|
button {
|
||||||
|
max-height: 34px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1200px) {
|
||||||
|
.guest-img {
|
||||||
|
div {
|
||||||
|
min-width: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-add__item {
|
||||||
|
align-items: center !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 576px) {
|
||||||
|
.form-add__item {
|
||||||
|
justify-content: space-between !important;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-block h1 {
|
||||||
|
font-size: 28px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-form {
|
||||||
|
position: unset;
|
||||||
|
|
||||||
|
&-submit {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 15px;
|
||||||
|
z-index: 9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-lg-8 {
|
||||||
|
position: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.all-form {
|
||||||
|
position: relative;
|
||||||
|
padding-bottom: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.guest-img {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
div {
|
||||||
|
align-items: center !important;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,74 +0,0 @@
|
|||||||
.gallery_box_single
|
|
||||||
width: 100%
|
|
||||||
.gallery-headers
|
|
||||||
margin-top: 30px
|
|
||||||
padding-top: 10px
|
|
||||||
text-align: center
|
|
||||||
button, button:focus
|
|
||||||
align-items: center
|
|
||||||
background: #fff
|
|
||||||
border-color: #fff
|
|
||||||
border-radius: 8px
|
|
||||||
box-shadow: 0 2px 12px 0 rgba(56,72,95,.49)
|
|
||||||
color: #000
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
font-family: 'Museo Regular', sans-serif
|
|
||||||
font-size: 18px !important
|
|
||||||
height: 78px
|
|
||||||
justify-content: center
|
|
||||||
max-width: 100px !important
|
|
||||||
min-width: 120px !important
|
|
||||||
padding: 5px 10px
|
|
||||||
text-transform: none
|
|
||||||
&.active
|
|
||||||
background: #bd2130
|
|
||||||
border-color: #bd2130
|
|
||||||
color: #fff
|
|
||||||
i
|
|
||||||
font-size: 30px
|
|
||||||
|
|
||||||
.gllr_image_row
|
|
||||||
display: flex
|
|
||||||
flex-wrap: wrap
|
|
||||||
justify-content: center
|
|
||||||
.gallery-photos
|
|
||||||
display: none
|
|
||||||
margin-top: 40px
|
|
||||||
|
|
||||||
.gallery-headers
|
|
||||||
button
|
|
||||||
&:focus, &:active
|
|
||||||
box-shadow: none
|
|
||||||
.gallery-content
|
|
||||||
.btn
|
|
||||||
&:focus
|
|
||||||
box-shadow: none !important
|
|
||||||
|
|
||||||
@media screen and (max-width: 768px)
|
|
||||||
.gllr_image_block
|
|
||||||
margin-left: 10px
|
|
||||||
margin-right: 10px
|
|
||||||
.gallery-headers button, .gallery-headers button:focus
|
|
||||||
font-size: 16px !important
|
|
||||||
max-width: 200px
|
|
||||||
min-width: 200px
|
|
||||||
|
|
||||||
@media screen and (max-width: 576px)
|
|
||||||
.gallery-headers
|
|
||||||
.btn
|
|
||||||
width: 81px
|
|
||||||
|
|
||||||
.gallery-photos
|
|
||||||
margin-top: 20px
|
|
||||||
|
|
||||||
.gallery-headers button, .gallery-headers button:focus
|
|
||||||
min-width: 80px !important
|
|
||||||
height: 65px
|
|
||||||
|
|
||||||
.gallery-headers button, .gallery-headers button:focus
|
|
||||||
font-size: 11px !important
|
|
||||||
margin-bottom: 10px
|
|
||||||
min-width: 30%
|
|
||||||
padding: 5px !important
|
|
||||||
|
|
||||||
96
src/sass/pages/gallery.scss
Normal file
96
src/sass/pages/gallery.scss
Normal file
@ -0,0 +1,96 @@
|
|||||||
|
.gallery_box_single {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-headers {
|
||||||
|
margin-top: 30px;
|
||||||
|
padding-top: 10px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
button {
|
||||||
|
&:focus, &:active {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
button, button:focus {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-width: 120px !important;
|
||||||
|
max-width: 100px !important;
|
||||||
|
height: 78px;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-color: #ffffff;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #ffffff;
|
||||||
|
color: #000000;
|
||||||
|
box-shadow: 0 2px 12px 0 rgba(56, 72, 95, 0.49);
|
||||||
|
font-size: 18px !important;
|
||||||
|
font-family: 'Museo Regular', sans-serif;
|
||||||
|
text-transform: none;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
border-color: #bd2130;
|
||||||
|
background: #bd2130;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.gllr_image_row {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-photos {
|
||||||
|
display: none;
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-content {
|
||||||
|
.btn {
|
||||||
|
&:focus {
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.gllr_image_block {
|
||||||
|
margin-right: 10px;
|
||||||
|
margin-left: 10px;
|
||||||
|
|
||||||
|
.gallery-headers button, .gallery-headers button:focus {
|
||||||
|
min-width: 200px;
|
||||||
|
max-width: 200px;
|
||||||
|
font-size: 16px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 576px) {
|
||||||
|
.gallery-headers {
|
||||||
|
.btn {
|
||||||
|
width: 81px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-photos {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery-headers button, .gallery-headers button:focus {
|
||||||
|
min-width: 80px !important;
|
||||||
|
height: 65px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
padding: 5px !important;
|
||||||
|
font-size: 11px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,453 +0,0 @@
|
|||||||
@import '../constansts'
|
|
||||||
|
|
||||||
h1, h2
|
|
||||||
font-family: 'Shadow Regular'
|
|
||||||
color: $title-color
|
|
||||||
|
|
||||||
body
|
|
||||||
font-family: 'Montserrat'
|
|
||||||
|
|
||||||
.graduation-btn
|
|
||||||
display: block
|
|
||||||
padding: 35px 71px
|
|
||||||
background: url('../../img/graduation/btn_bg.png') center no-repeat
|
|
||||||
outline: none
|
|
||||||
border: none
|
|
||||||
font-family: 'Shadow Regular'
|
|
||||||
color: #fff
|
|
||||||
font-size: 18px
|
|
||||||
&:active, &:focus
|
|
||||||
outline: none
|
|
||||||
|
|
||||||
main
|
|
||||||
background: center url('../../img/graduation/main_bg.png')
|
|
||||||
background-size: cover
|
|
||||||
height: 100vh
|
|
||||||
// height: 1019px
|
|
||||||
width: 100%
|
|
||||||
position: relative
|
|
||||||
|
|
||||||
.main-information
|
|
||||||
left: 100px
|
|
||||||
max-width: 550px
|
|
||||||
position: absolute
|
|
||||||
top: 300px
|
|
||||||
|
|
||||||
h1
|
|
||||||
margin-bottom: 24px
|
|
||||||
|
|
||||||
p
|
|
||||||
color: $text-color
|
|
||||||
font-size: 18px
|
|
||||||
font-weight: 600
|
|
||||||
margin-bottom: 48px
|
|
||||||
|
|
||||||
.main-more
|
|
||||||
position: absolute
|
|
||||||
bottom: 87px
|
|
||||||
transform: translateY(100%)
|
|
||||||
left: 50%
|
|
||||||
cursor: pointer
|
|
||||||
i
|
|
||||||
font-size: 45px
|
|
||||||
color: #fff
|
|
||||||
|
|
||||||
.description
|
|
||||||
background: #FCF1DB
|
|
||||||
padding-top: 120px
|
|
||||||
padding-bottom: 120px
|
|
||||||
.description_text
|
|
||||||
h2
|
|
||||||
color: #FFFFFF
|
|
||||||
font-size: 20px
|
|
||||||
text-align: center
|
|
||||||
margin-bottom: 38px
|
|
||||||
p
|
|
||||||
color: #E2E2E2
|
|
||||||
font-family: Montserrat
|
|
||||||
font-size: 18px
|
|
||||||
font-style: normal
|
|
||||||
font-weight: 500
|
|
||||||
line-height: 22px
|
|
||||||
text-align: center
|
|
||||||
|
|
||||||
.description_layout
|
|
||||||
background: linear-gradient(81.38deg, #552732 32.56%, #C1635C 116.69%);
|
|
||||||
border-radius: 4px
|
|
||||||
border: 3px solid #F9E7C1
|
|
||||||
box-shadow: 8px 8px 14px -2px #D6BBA7
|
|
||||||
margin: 0 auto
|
|
||||||
max-width: 1028px
|
|
||||||
padding: 97px 90px 87px
|
|
||||||
|
|
||||||
.graduation__block
|
|
||||||
padding: 120px 100px
|
|
||||||
|
|
||||||
.content
|
|
||||||
margin: 0 auto
|
|
||||||
|
|
||||||
.headers
|
|
||||||
margin: 0 auto
|
|
||||||
max-width: 710px
|
|
||||||
margin-bottom: 80px
|
|
||||||
|
|
||||||
h2
|
|
||||||
text-align: center
|
|
||||||
font-size: 40px
|
|
||||||
|
|
||||||
p
|
|
||||||
padding: 0 10px
|
|
||||||
font-family: Montserrat;
|
|
||||||
font-style: normal
|
|
||||||
font-weight: 500
|
|
||||||
text-align: center
|
|
||||||
|
|
||||||
&.offers
|
|
||||||
// background: url('../../img/graduation/offers_bg.png') center no-repeat
|
|
||||||
background: url('../../img/graduation/offers_2x.jpg') center no-repeat
|
|
||||||
background-size: cover
|
|
||||||
|
|
||||||
.packets
|
|
||||||
margin: 0 auto
|
|
||||||
|
|
||||||
.packet
|
|
||||||
&:nth-child(2)
|
|
||||||
margin-top: 70px
|
|
||||||
&:nth-child(3)
|
|
||||||
margin-top: 140px
|
|
||||||
|
|
||||||
.graduation__packet
|
|
||||||
background: #fff
|
|
||||||
border-radius: 2px
|
|
||||||
box-shadow: 8px 8px 14px #EBC8AE
|
|
||||||
margin: 0 auto
|
|
||||||
max-width: 392px
|
|
||||||
padding: 40px 60px
|
|
||||||
|
|
||||||
|
|
||||||
.graduation-btn
|
|
||||||
padding: 26px 70px
|
|
||||||
margin: 0 auto
|
|
||||||
background: url('../../img/graduation/btn_bg_packet.png') center no-repeat
|
|
||||||
|
|
||||||
.text
|
|
||||||
width: 263.01px
|
|
||||||
height: 248.68px
|
|
||||||
background: url('../../img/graduation/offer-packet/text_bg.png') center no-repeat
|
|
||||||
padding: 89px 0 80px 0
|
|
||||||
|
|
||||||
h3
|
|
||||||
text-align: center
|
|
||||||
font-family: 'Shadow'
|
|
||||||
font-size: 40px
|
|
||||||
color: #444444
|
|
||||||
|
|
||||||
p
|
|
||||||
font-family: 'Roboto'
|
|
||||||
font-weight: 500
|
|
||||||
font-size: 24px
|
|
||||||
color: #323232
|
|
||||||
text-align: center
|
|
||||||
|
|
||||||
span
|
|
||||||
&:last-child
|
|
||||||
font-size: 16px
|
|
||||||
|
|
||||||
.packet_description
|
|
||||||
margin-bottom: 40px
|
|
||||||
|
|
||||||
ul
|
|
||||||
list-style: none
|
|
||||||
list-style-image: url('../../img/graduation/list_before.png')
|
|
||||||
|
|
||||||
li
|
|
||||||
padding-left: 30px
|
|
||||||
font-family: Montserrat
|
|
||||||
font-style: normal
|
|
||||||
font-weight: 600
|
|
||||||
font-size: 18px
|
|
||||||
margin-bottom: 14px
|
|
||||||
|
|
||||||
&.why
|
|
||||||
|
|
||||||
.content
|
|
||||||
|
|
||||||
h2
|
|
||||||
color: #4A4A4A
|
|
||||||
|
|
||||||
.icons
|
|
||||||
|
|
||||||
.icon
|
|
||||||
width: 259px
|
|
||||||
margin: 0 auto
|
|
||||||
|
|
||||||
.img-icon
|
|
||||||
height: 164px
|
|
||||||
img
|
|
||||||
display: block
|
|
||||||
margin: 0 auto
|
|
||||||
height: 100%
|
|
||||||
|
|
||||||
h4
|
|
||||||
font-family: Shadow
|
|
||||||
font-size: 18px
|
|
||||||
text-align: center
|
|
||||||
margin-top: 40px
|
|
||||||
margin-bottom: 16px
|
|
||||||
|
|
||||||
p
|
|
||||||
font-family: Montserrat
|
|
||||||
font-size: 14px
|
|
||||||
text-align: center
|
|
||||||
|
|
||||||
&.callback
|
|
||||||
// background: url('../../img/graduation/callback_bg.png')
|
|
||||||
background: url('../../img/graduation/callback_2x.jpg')
|
|
||||||
background-size: 100%
|
|
||||||
background-position: left bottom
|
|
||||||
position: relative
|
|
||||||
height: 100vh
|
|
||||||
|
|
||||||
.content
|
|
||||||
|
|
||||||
.graduation-btn
|
|
||||||
min-width: 300px
|
|
||||||
|
|
||||||
form
|
|
||||||
|
|
||||||
label
|
|
||||||
display: block
|
|
||||||
width: 400px
|
|
||||||
margin: 0 auto 20px auto
|
|
||||||
padding: 14px
|
|
||||||
background: #fff
|
|
||||||
border-radius: 5px
|
|
||||||
|
|
||||||
input
|
|
||||||
width: 100%
|
|
||||||
border: 0px transparent
|
|
||||||
outline: none
|
|
||||||
|
|
||||||
button
|
|
||||||
margin: 40px auto 0 auto
|
|
||||||
|
|
||||||
.copyright
|
|
||||||
position: absolute
|
|
||||||
bottom: 40px
|
|
||||||
left: 50%
|
|
||||||
transform: translateX(-50%)
|
|
||||||
|
|
||||||
text-align: center
|
|
||||||
font-family: Montserrat
|
|
||||||
font-size: 14px
|
|
||||||
|
|
||||||
color: #FFFFFF;
|
|
||||||
|
|
||||||
.top__menu
|
|
||||||
position: fixed
|
|
||||||
height: 96px
|
|
||||||
top: 0
|
|
||||||
left: 0
|
|
||||||
right: 0
|
|
||||||
z-index: 1
|
|
||||||
|
|
||||||
.layer
|
|
||||||
position: absolute
|
|
||||||
top: 0
|
|
||||||
left: 0
|
|
||||||
bottom: 0
|
|
||||||
right: 0
|
|
||||||
background: rgba(0, 0, 0, 0.55)
|
|
||||||
z-index: 1
|
|
||||||
|
|
||||||
.content
|
|
||||||
position: absolute
|
|
||||||
top: 0
|
|
||||||
left: 0
|
|
||||||
bottom: 0
|
|
||||||
right: 0
|
|
||||||
z-index: 2
|
|
||||||
color: #fff
|
|
||||||
padding: 28px 105px
|
|
||||||
display: flex
|
|
||||||
justify-content: space-between
|
|
||||||
align-self: center
|
|
||||||
|
|
||||||
a
|
|
||||||
display: block
|
|
||||||
font-family: 'Shadow Regular'
|
|
||||||
font-size: 24px
|
|
||||||
cursor: pointer
|
|
||||||
color: #fff
|
|
||||||
outline: none
|
|
||||||
&:hover
|
|
||||||
// text-decoration: none
|
|
||||||
|
|
||||||
#tooltip
|
|
||||||
cursor: default
|
|
||||||
|
|
||||||
span
|
|
||||||
&:last-child
|
|
||||||
font-family: Montserrat
|
|
||||||
font-weight: 600
|
|
||||||
font-size: 14px
|
|
||||||
margin-left: 10px
|
|
||||||
|
|
||||||
&_button
|
|
||||||
outline: none
|
|
||||||
border: none
|
|
||||||
border-radius: 10px
|
|
||||||
background: linear-gradient(81.38deg, #552732 32.56%, #C1635C 116.69%)
|
|
||||||
// padding: 5px 10px
|
|
||||||
padding: 20px 25px
|
|
||||||
color: #fff
|
|
||||||
display: flex
|
|
||||||
align-items: center
|
|
||||||
|
|
||||||
|
|
||||||
@media screen and (max-width: 1366px)
|
|
||||||
.graduation__block.callback
|
|
||||||
background-size: cover
|
|
||||||
|
|
||||||
@media screen and (max-width: 1200px)
|
|
||||||
.graduation__block.callback
|
|
||||||
height: 800px
|
|
||||||
|
|
||||||
.description
|
|
||||||
padding: 50px
|
|
||||||
|
|
||||||
.graduation__block
|
|
||||||
padding: 50px 100px
|
|
||||||
|
|
||||||
.graduation__block.offers
|
|
||||||
.packet
|
|
||||||
&:nth-child(2), &:nth-child(3)
|
|
||||||
margin-top: 0
|
|
||||||
|
|
||||||
.graduation__block.why .content .icons .icon
|
|
||||||
width: auto
|
|
||||||
margin-bottom: 30px
|
|
||||||
|
|
||||||
p
|
|
||||||
max-width: 260px
|
|
||||||
margin: 0 auto
|
|
||||||
|
|
||||||
main .main-information p
|
|
||||||
max-width: 430px
|
|
||||||
|
|
||||||
@media screen and (max-width: 768px)
|
|
||||||
.top__menu .content
|
|
||||||
padding: 35px 50px
|
|
||||||
|
|
||||||
main .main-information
|
|
||||||
left: 50px
|
|
||||||
top: 230px
|
|
||||||
|
|
||||||
h1
|
|
||||||
font-size: 30px
|
|
||||||
|
|
||||||
p
|
|
||||||
font-size: 16px
|
|
||||||
max-width: 300px
|
|
||||||
|
|
||||||
.description .description_layout
|
|
||||||
padding: 37px 20px 37px
|
|
||||||
|
|
||||||
.description .description_text
|
|
||||||
h2
|
|
||||||
font-size: 18px
|
|
||||||
|
|
||||||
p
|
|
||||||
font-size: 16px
|
|
||||||
|
|
||||||
.graduation__block .content .headers
|
|
||||||
margin-bottom: 30px
|
|
||||||
|
|
||||||
.graduation__block.offers .graduation__packet
|
|
||||||
margin: 20px auto
|
|
||||||
|
|
||||||
@media screen and (max-width: 576px)
|
|
||||||
main .main-information
|
|
||||||
h1
|
|
||||||
font-size: 23px
|
|
||||||
p
|
|
||||||
font-size: 14px
|
|
||||||
|
|
||||||
.graduation-btn
|
|
||||||
font-size: 14px
|
|
||||||
background-size: contain
|
|
||||||
padding: 20px 30px
|
|
||||||
|
|
||||||
main .main-information p
|
|
||||||
max-width: 230px
|
|
||||||
|
|
||||||
.description .description_text
|
|
||||||
p
|
|
||||||
display: none
|
|
||||||
font-size: 14px
|
|
||||||
h2
|
|
||||||
font-size: 14px
|
|
||||||
margin-bottom: 0
|
|
||||||
|
|
||||||
.graduation__block.offers .graduation__packet
|
|
||||||
padding: 20px 30px
|
|
||||||
|
|
||||||
.graduation__block.offers .graduation__packet .text
|
|
||||||
padding: 60px 0 80px 0
|
|
||||||
|
|
||||||
.graduation__block.offers .graduation__packet .packet_description
|
|
||||||
margin-top: 20px
|
|
||||||
|
|
||||||
.graduation__block.offers .graduation__packet .packet_description ul li
|
|
||||||
padding-left: 20px
|
|
||||||
font-size: 16px
|
|
||||||
|
|
||||||
.graduation__block.offers .graduation__packet .graduation-btn
|
|
||||||
background-size: contain
|
|
||||||
|
|
||||||
.graduation__block.offers .graduation__packet .text
|
|
||||||
width: auto
|
|
||||||
height: 190px
|
|
||||||
background-size: contain
|
|
||||||
|
|
||||||
.graduation__block.offers .graduation__packet .text h3
|
|
||||||
font-size: 35px
|
|
||||||
|
|
||||||
@media screen and (max-width: 500px)
|
|
||||||
.top__menu
|
|
||||||
height: 50px
|
|
||||||
|
|
||||||
.top__menu .content
|
|
||||||
padding: 10px 35px
|
|
||||||
|
|
||||||
.top__menu .content a
|
|
||||||
font-size: 16px
|
|
||||||
|
|
||||||
.top__menu_button
|
|
||||||
padding: 5px 10px
|
|
||||||
|
|
||||||
main .main-information
|
|
||||||
left: 35px
|
|
||||||
top: 130px
|
|
||||||
|
|
||||||
p
|
|
||||||
max-width: 150px
|
|
||||||
h1
|
|
||||||
max-width: 150px
|
|
||||||
font-size: 23px
|
|
||||||
|
|
||||||
.description
|
|
||||||
padding: 35px
|
|
||||||
|
|
||||||
.description .description_text h2
|
|
||||||
font-size: 18px !important
|
|
||||||
|
|
||||||
.graduation__block
|
|
||||||
padding: 50px 10px
|
|
||||||
overflow: hidden
|
|
||||||
|
|
||||||
.graduation__block.callback .content form label
|
|
||||||
max-width: 100%
|
|
||||||
|
|
||||||
.graduation__block.callback
|
|
||||||
height: 600px
|
|
||||||
559
src/sass/pages/graduation.scss
Normal file
559
src/sass/pages/graduation.scss
Normal file
@ -0,0 +1,559 @@
|
|||||||
|
@import '../constansts';
|
||||||
|
|
||||||
|
h1, h2 {
|
||||||
|
color: $title-color;
|
||||||
|
font-family: 'Shadow Regular', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Montserrat', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graduation-btn {
|
||||||
|
display: block;
|
||||||
|
padding: 35px 71px;
|
||||||
|
border: 0;
|
||||||
|
background: url('../../img/graduation/btn_bg.png') center no-repeat;
|
||||||
|
color: #ffffff;
|
||||||
|
outline: none;
|
||||||
|
font-size: 18px;
|
||||||
|
font-family: 'Shadow Regular', sans-serif;
|
||||||
|
|
||||||
|
&:active, &:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
// height: 1019px
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: center url('../../img/graduation/main_bg.png');
|
||||||
|
background-size: cover;
|
||||||
|
|
||||||
|
.main-information {
|
||||||
|
position: absolute;
|
||||||
|
top: 300px;
|
||||||
|
left: 100px;
|
||||||
|
max-width: 550px;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 48px;
|
||||||
|
color: $text-color;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-more {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 87px;
|
||||||
|
left: 50%;
|
||||||
|
cursor: pointer;
|
||||||
|
transform: translateY(100%);
|
||||||
|
|
||||||
|
i {
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 45px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
padding-top: 120px;
|
||||||
|
padding-bottom: 120px;
|
||||||
|
background: #fcf1db;
|
||||||
|
|
||||||
|
.description_text {
|
||||||
|
h2 {
|
||||||
|
margin-bottom: 38px;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 20px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #e2e2e2;
|
||||||
|
font-weight: 500;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 18px;
|
||||||
|
font-family: 'Montserrat', sans-serif;
|
||||||
|
line-height: 22px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.description_layout {
|
||||||
|
max-width: 1028px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 97px 90px 87px;
|
||||||
|
border: 3px solid #f9e7c1;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: linear-gradient(81.38deg, #552732 32.56%, #c1635c 116.69%);
|
||||||
|
box-shadow: 8px 8px 14px -2px #d6bba7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.graduation__block {
|
||||||
|
padding: 120px 100px;
|
||||||
|
|
||||||
|
.content {
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
.headers {
|
||||||
|
max-width: 710px;
|
||||||
|
margin: 0 auto 80px;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 40px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
padding: 0 10px;
|
||||||
|
font-weight: 500;
|
||||||
|
font-style: normal;
|
||||||
|
font-family: 'Montserrat', sans-serif;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.offers {
|
||||||
|
background: url('../../img/graduation/offers_2x.jpg') center no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
|
||||||
|
.packets {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.packet {
|
||||||
|
&:nth-child(2) {
|
||||||
|
margin-top: 70px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(3) {
|
||||||
|
margin-top: 140px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.graduation__packet {
|
||||||
|
max-width: 392px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 40px 60px;
|
||||||
|
border-radius: 2px;
|
||||||
|
background: #ffffff;
|
||||||
|
box-shadow: 8px 8px 14px #ebc8ae;
|
||||||
|
|
||||||
|
.graduation-btn {
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 26px 70px;
|
||||||
|
background: url('../../img/graduation/btn_bg_packet.png') center no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
width: 263.01px;
|
||||||
|
height: 248.68px;
|
||||||
|
padding: 89px 0 80px;
|
||||||
|
background: url('../../img/graduation/offer-packet/text_bg.png') center no-repeat;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
color: #444444;
|
||||||
|
font-size: 40px;
|
||||||
|
font-family: 'Shadow Regular', sans-serif;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #323232;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 24px;
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
span {
|
||||||
|
&:last-child {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.packet_description {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style: none url('../../img/graduation/list_before.png');
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin-bottom: 14px;
|
||||||
|
padding-left: 30px;
|
||||||
|
font-weight: 600;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 18px;
|
||||||
|
font-family: 'Montserrat', sans-serif;;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.why {
|
||||||
|
.content {
|
||||||
|
h2 {
|
||||||
|
color: #4a4a4a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icons {
|
||||||
|
.icon {
|
||||||
|
width: 259px;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
.img-icon {
|
||||||
|
height: 164px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: block;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
margin-top: 40px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
font-size: 18px;
|
||||||
|
font-family: 'Shadow Regular', sans-serif;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: 'Montserrat', sans-serif;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.callback {
|
||||||
|
position: relative;
|
||||||
|
height: 100vh;
|
||||||
|
background: url('../../img/graduation/callback_2x.jpg') left bottom;
|
||||||
|
background-size: 100%;
|
||||||
|
|
||||||
|
.content {
|
||||||
|
.graduation-btn {
|
||||||
|
min-width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
label {
|
||||||
|
display: block;
|
||||||
|
width: 400px;
|
||||||
|
margin: 0 auto 20px;
|
||||||
|
padding: 14px;
|
||||||
|
border-radius: 5px;
|
||||||
|
background: #ffffff;
|
||||||
|
|
||||||
|
input {
|
||||||
|
width: 100%;
|
||||||
|
border: 0 transparent;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
margin: 40px auto 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.copyright {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 40px;
|
||||||
|
left: 50%;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: 'Montserrat', sans-serif;
|
||||||
|
text-align: center;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.top__menu {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 1;
|
||||||
|
height: 96px;
|
||||||
|
|
||||||
|
.layer {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 1;
|
||||||
|
background: rgba(0, 0, 0, 0.55);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 2;
|
||||||
|
display: flex;
|
||||||
|
align-self: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 28px 105px;
|
||||||
|
color: #ffffff;
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
color: #ffffff;
|
||||||
|
outline: none;
|
||||||
|
font-size: 24px;
|
||||||
|
font-family: 'Shadow Regular', sans-serif;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
// text-decoration: none
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#tooltip {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
&:last-child {
|
||||||
|
margin-left: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: 'Montserrat', sans-serif;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&_button {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
// padding: 5px 10px
|
||||||
|
padding: 20px 25px;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: linear-gradient(81.38deg, #552732 32.56%, #c1635c 116.69%);
|
||||||
|
color: #ffffff;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1366px) {
|
||||||
|
.graduation__block.callback {
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1200px) {
|
||||||
|
.graduation__block.callback {
|
||||||
|
height: 800px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
padding: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graduation__block {
|
||||||
|
padding: 50px 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graduation__block.offers {
|
||||||
|
.packet {
|
||||||
|
&:nth-child(2), &:nth-child(3) {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.graduation__block.why .content .icons .icon {
|
||||||
|
width: auto;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
max-width: 260px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
main .main-information p {
|
||||||
|
max-width: 430px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.top__menu .content {
|
||||||
|
padding: 35px 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
main .main-information {
|
||||||
|
top: 230px;
|
||||||
|
left: 50px;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
max-width: 300px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.description .description_layout {
|
||||||
|
padding: 37px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description .description_text {
|
||||||
|
h2 {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.graduation__block .content .headers {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graduation__block.offers .graduation__packet {
|
||||||
|
margin: 20px auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 576px) {
|
||||||
|
main .main-information {
|
||||||
|
h1 {
|
||||||
|
font-size: 23px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
max-width: 230px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.graduation-btn {
|
||||||
|
padding: 20px 30px;
|
||||||
|
background-size: contain;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description .description_text {
|
||||||
|
p {
|
||||||
|
display: none;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin-bottom: 0;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.graduation__block.offers .graduation__packet {
|
||||||
|
padding: 20px 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graduation__block.offers .graduation__packet .text {
|
||||||
|
width: auto;
|
||||||
|
height: 190px;
|
||||||
|
padding: 60px 0 80px;
|
||||||
|
background-size: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graduation__block.offers .graduation__packet .packet_description {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graduation__block.offers .graduation__packet .packet_description ul li {
|
||||||
|
padding-left: 20px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graduation__block.offers .graduation__packet .graduation-btn {
|
||||||
|
background-size: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graduation__block.offers .graduation__packet .text h3 {
|
||||||
|
font-size: 35px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 500px) {
|
||||||
|
.top__menu {
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top__menu .content {
|
||||||
|
padding: 10px 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top__menu .content a {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top__menu_button {
|
||||||
|
padding: 5px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
main .main-information {
|
||||||
|
top: 130px;
|
||||||
|
left: 35px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
max-width: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
max-width: 150px;
|
||||||
|
font-size: 23px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
padding: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description .description_text h2 {
|
||||||
|
font-size: 18px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graduation__block {
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 50px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graduation__block.callback .content form label {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graduation__block.callback {
|
||||||
|
height: 600px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,211 +0,0 @@
|
|||||||
@import "../parts/adding-service"
|
|
||||||
@import "../parts/packages"
|
|
||||||
@import "../parts/options"
|
|
||||||
@import "../parts/entertaiments"
|
|
||||||
@import "../parts/places"
|
|
||||||
@import "../parts/order"
|
|
||||||
@import "../pages/gallery"
|
|
||||||
|
|
||||||
.holiday
|
|
||||||
&-block
|
|
||||||
color: #1e212b
|
|
||||||
font-family: 'PT Sans', sans-serif
|
|
||||||
max-width: 1330px !important
|
|
||||||
padding-top: 20px
|
|
||||||
h2
|
|
||||||
font-size: 40px
|
|
||||||
font-weight: 600
|
|
||||||
letter-spacing: 0.5px
|
|
||||||
line-height: normal
|
|
||||||
text-align: center
|
|
||||||
p
|
|
||||||
font-size: 24px
|
|
||||||
letter-spacing: 0.5px
|
|
||||||
text-align: center
|
|
||||||
margin-bottom: 50px
|
|
||||||
|
|
||||||
|
|
||||||
&-photos
|
|
||||||
margin-bottom: 44px
|
|
||||||
margin-left: auto
|
|
||||||
margin-right: auto
|
|
||||||
padding-top: 44px
|
|
||||||
text-align: center
|
|
||||||
p
|
|
||||||
margin-left: auto
|
|
||||||
margin-right: auto
|
|
||||||
max-width: 650px
|
|
||||||
img
|
|
||||||
border-radius: 20px
|
|
||||||
margin-bottom: 40px
|
|
||||||
|
|
||||||
|
|
||||||
&-descr
|
|
||||||
font-family: 'Museo Regular', sans-serif
|
|
||||||
h2
|
|
||||||
margin-left: auto
|
|
||||||
margin-right: auto
|
|
||||||
max-width: 720px
|
|
||||||
&__text
|
|
||||||
margin-left: auto
|
|
||||||
margin-right: auto
|
|
||||||
max-width: 720px
|
|
||||||
transition: 0.15s ease-in-out
|
|
||||||
p
|
|
||||||
color: #363943
|
|
||||||
font-size: 18px
|
|
||||||
letter-spacing: 0.2px
|
|
||||||
line-height: 1.6
|
|
||||||
margin-bottom: 10px
|
|
||||||
text-align: left !important
|
|
||||||
li
|
|
||||||
color: #363943
|
|
||||||
font-size: 18px
|
|
||||||
letter-spacing: 0.2px
|
|
||||||
line-height: 1.6
|
|
||||||
a
|
|
||||||
background-color: #fff
|
|
||||||
color: $main-color
|
|
||||||
display: block
|
|
||||||
font-size: 1.125rem
|
|
||||||
letter-spacing: 0.2px
|
|
||||||
margin-left: auto
|
|
||||||
margin-right: auto
|
|
||||||
max-width: 720px
|
|
||||||
position: relative
|
|
||||||
text-decoration: underline
|
|
||||||
|
|
||||||
|
|
||||||
&-main
|
|
||||||
padding-bottom: 20px
|
|
||||||
padding-top: 30px
|
|
||||||
.container
|
|
||||||
font-family: 'Museo Regular', sans-serif
|
|
||||||
max-width: 1320px
|
|
||||||
.col-lg-5
|
|
||||||
img
|
|
||||||
height: 70px
|
|
||||||
h1
|
|
||||||
color: #000000
|
|
||||||
font-size: 45px
|
|
||||||
font-weight: 600
|
|
||||||
letter-spacing: 0.6px
|
|
||||||
margin-top: 25px
|
|
||||||
p
|
|
||||||
color: #000000
|
|
||||||
font-size: 24px
|
|
||||||
letter-spacing: 0.3px
|
|
||||||
line-height: 1.42
|
|
||||||
margin-bottom: 40px
|
|
||||||
max-width: 450px
|
|
||||||
.col-lg-7
|
|
||||||
img
|
|
||||||
transform: translateX(-25px) translateY(-45px)
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@media screen and (max-width: 1200px)
|
|
||||||
|
|
||||||
.holiday
|
|
||||||
&-block
|
|
||||||
max-width: 100% !important
|
|
||||||
h2
|
|
||||||
font-size: 30px !important
|
|
||||||
margin: 15px auto
|
|
||||||
p
|
|
||||||
font-size: 24px !important
|
|
||||||
margin-bottom: 30px
|
|
||||||
&-main
|
|
||||||
.container
|
|
||||||
.col-lg-7
|
|
||||||
img
|
|
||||||
transform: translateX(-90px) translateY(-45px) scale(0.7)
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@media screen and (max-width: 768px)
|
|
||||||
|
|
||||||
.holiday
|
|
||||||
& -block
|
|
||||||
h2
|
|
||||||
font-size: 30px
|
|
||||||
margin-top: 0
|
|
||||||
margin-bottom: 20px
|
|
||||||
p
|
|
||||||
font-size: 16px !important
|
|
||||||
margin-bottom: 50px
|
|
||||||
|
|
||||||
&-main
|
|
||||||
.container
|
|
||||||
.col-lg-7
|
|
||||||
display: none
|
|
||||||
.col-lg-5
|
|
||||||
padding-left: 90px
|
|
||||||
max-width: 676px
|
|
||||||
h1
|
|
||||||
font-size: 38px
|
|
||||||
margin-bottom: 25px
|
|
||||||
p
|
|
||||||
font-size: 20px
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@media screen and (max-width: 576px)
|
|
||||||
|
|
||||||
.places
|
|
||||||
background: #f2f2f2 !important
|
|
||||||
&-layout
|
|
||||||
background: #f2f2f2 !important
|
|
||||||
|
|
||||||
.holiday
|
|
||||||
&-photos
|
|
||||||
padding-top: 0
|
|
||||||
margin-bottom: 30px
|
|
||||||
&-block
|
|
||||||
padding-top: 20px
|
|
||||||
padding-left: 0
|
|
||||||
padding-right: 0
|
|
||||||
h2
|
|
||||||
margin-top: 0px
|
|
||||||
margin-bottom: 20px
|
|
||||||
font-size: 26px !important
|
|
||||||
p
|
|
||||||
font-size: 16px !important
|
|
||||||
margin-bottom: 30px
|
|
||||||
font-family: 'Museo Regular', sans-serif
|
|
||||||
letter-spacing: 0.5px
|
|
||||||
line-height: 1.15
|
|
||||||
button
|
|
||||||
font-size: 12px
|
|
||||||
max-width: 300px
|
|
||||||
&-descr
|
|
||||||
padding-left: 20px
|
|
||||||
padding-right: 20px
|
|
||||||
background: #f2f2f2 !important
|
|
||||||
p
|
|
||||||
margin-bottom: 10px
|
|
||||||
&__text
|
|
||||||
ul
|
|
||||||
li
|
|
||||||
font-size: 16px!important
|
|
||||||
font-family: 'Museo Regular', sans-serif
|
|
||||||
letter-spacing: .5px
|
|
||||||
line-height: 1.15
|
|
||||||
&-main
|
|
||||||
.container
|
|
||||||
.col-lg-5
|
|
||||||
padding: 0
|
|
||||||
text-align: center
|
|
||||||
img
|
|
||||||
max-width: 100%
|
|
||||||
height: 50px
|
|
||||||
h1
|
|
||||||
font-size: 28px !important
|
|
||||||
margin-bottom: 25px
|
|
||||||
p
|
|
||||||
font-size: 18px !important
|
|
||||||
max-width: 370px !important
|
|
||||||
margin: 0 auto 20px auto
|
|
||||||
button
|
|
||||||
font-size: 14px !important
|
|
||||||
margin-bottom: 5px
|
|
||||||
295
src/sass/pages/holiday.scss
Normal file
295
src/sass/pages/holiday.scss
Normal file
@ -0,0 +1,295 @@
|
|||||||
|
@import '../parts/adding-service';
|
||||||
|
@import '../parts/packages';
|
||||||
|
@import '../parts/options';
|
||||||
|
@import '../parts/entertaiments';
|
||||||
|
@import '../parts/places';
|
||||||
|
@import '../parts/order';
|
||||||
|
@import '../pages/gallery';
|
||||||
|
|
||||||
|
.holiday {
|
||||||
|
&-block {
|
||||||
|
max-width: 1330px !important;
|
||||||
|
padding-top: 20px;
|
||||||
|
color: #1e212b;
|
||||||
|
font-family: 'PT Sans', sans-serif;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 40px;
|
||||||
|
line-height: normal;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 50px;
|
||||||
|
font-size: 24px;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-photos {
|
||||||
|
margin-right: auto;
|
||||||
|
margin-bottom: 44px;
|
||||||
|
margin-left: auto;
|
||||||
|
padding-top: 44px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
p {
|
||||||
|
max-width: 650px;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-descr {
|
||||||
|
font-family: 'Museo Regular', sans-serif;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
max-width: 720px;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
max-width: 720px;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
transition: 0.15s ease-in-out;
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
color: #363943;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 1.6;
|
||||||
|
letter-spacing: 0.2px;
|
||||||
|
text-align: left !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
color: #363943;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 1.6;
|
||||||
|
letter-spacing: 0.2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
max-width: 720px;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
background-color: #ffffff;
|
||||||
|
color: $main-color;
|
||||||
|
font-size: 1.125rem;
|
||||||
|
letter-spacing: 0.2px;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-main {
|
||||||
|
padding-top: 30px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1320px;
|
||||||
|
font-family: 'Museo Regular', sans-serif;
|
||||||
|
|
||||||
|
.col-lg-5 {
|
||||||
|
img {
|
||||||
|
height: 70px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin-top: 25px;
|
||||||
|
color: #000000;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 45px;
|
||||||
|
letter-spacing: 0.6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
max-width: 450px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
color: #000000;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 1.42;
|
||||||
|
letter-spacing: 0.3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-lg-7 {
|
||||||
|
img {
|
||||||
|
transform: translateX(-25px) translateY(-45px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1200px) {
|
||||||
|
.holiday {
|
||||||
|
&-block {
|
||||||
|
max-width: 100% !important;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin: 15px auto;
|
||||||
|
font-size: 30px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
font-size: 24px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-main {
|
||||||
|
.container {
|
||||||
|
.col-lg-7 {
|
||||||
|
img {
|
||||||
|
transform: translateX(-90px) translateY(-45px) scale(0.7);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.holiday {
|
||||||
|
&-block {
|
||||||
|
h2 {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 50px;
|
||||||
|
font-size: 16px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-main {
|
||||||
|
.container {
|
||||||
|
.col-lg-7 {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-lg-5 {
|
||||||
|
max-width: 676px;
|
||||||
|
padding-left: 90px;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin-bottom: 25px;
|
||||||
|
font-size: 38px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 576px) {
|
||||||
|
.places {
|
||||||
|
background: #f2f2f2 !important;
|
||||||
|
|
||||||
|
&-layout {
|
||||||
|
background: #f2f2f2 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.holiday {
|
||||||
|
&-photos {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-block {
|
||||||
|
padding-top: 20px;
|
||||||
|
padding-right: 0;
|
||||||
|
padding-left: 0;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
font-size: 26px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
font-size: 16px !important;
|
||||||
|
font-family: 'Museo Regular', sans-serif;
|
||||||
|
line-height: 1.15;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
max-width: 300px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-descr {
|
||||||
|
padding-right: 20px;
|
||||||
|
padding-left: 20px;
|
||||||
|
background: #f2f2f2 !important;
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
ul {
|
||||||
|
li {
|
||||||
|
font-size: 16px !important;
|
||||||
|
font-family: 'Museo Regular', sans-serif;
|
||||||
|
line-height: 1.15;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-main {
|
||||||
|
.container {
|
||||||
|
.col-lg-5 {
|
||||||
|
padding: 0;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin-bottom: 25px;
|
||||||
|
font-size: 28px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
max-width: 370px !important;
|
||||||
|
margin: 0 auto 20px;
|
||||||
|
font-size: 18px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
font-size: 14px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,12 +0,0 @@
|
|||||||
@import "../parts/entertaiments"
|
|
||||||
@import "../parts/discounts"
|
|
||||||
@import "../parts/present"
|
|
||||||
@import "../parts/principals"
|
|
||||||
|
|
||||||
div.places.places_home, div.places_home .places-layout
|
|
||||||
background: #ffffff !important
|
|
||||||
padding-top: 20px
|
|
||||||
|
|
||||||
@media screen and (max-width: 576px)
|
|
||||||
div.places.places_home, div.places_home .places-layout
|
|
||||||
padding-top: 0 !important
|
|
||||||
15
src/sass/pages/home.scss
Normal file
15
src/sass/pages/home.scss
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
@import '../parts/entertaiments';
|
||||||
|
@import '../parts/discounts';
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,146 +0,0 @@
|
|||||||
@import '../constansts'
|
|
||||||
@import '../parts/main-block'
|
|
||||||
|
|
||||||
.prices
|
|
||||||
font-family: 'Museo Regular', sans-serif
|
|
||||||
padding-top: 30px
|
|
||||||
h1
|
|
||||||
color: $main-color
|
|
||||||
font-size: 24px
|
|
||||||
font-weight: bold
|
|
||||||
margin-bottom: 25px
|
|
||||||
text-align: center
|
|
||||||
&_sections__title
|
|
||||||
align-items: center
|
|
||||||
border-radius: 8px
|
|
||||||
box-shadow: 0 2px 12px 0 rgba(56,72,95,.49)
|
|
||||||
cursor: pointer
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
font-size: 18px
|
|
||||||
justify-content: center
|
|
||||||
max-width: 100px
|
|
||||||
width: 100px
|
|
||||||
padding: 5px 10px
|
|
||||||
&:hover
|
|
||||||
background-color: rgba(0,0,0,.05)
|
|
||||||
&.active
|
|
||||||
background-color: $main-color
|
|
||||||
color: #fff
|
|
||||||
i
|
|
||||||
font-size: 30px
|
|
||||||
&_sections__titles
|
|
||||||
padding: 15px 0
|
|
||||||
.col-4
|
|
||||||
display: flex
|
|
||||||
justify-content: center
|
|
||||||
&_sections__content
|
|
||||||
display: none
|
|
||||||
padding-top: 18px
|
|
||||||
h2
|
|
||||||
color: #4c4c4c
|
|
||||||
font-size: 21px
|
|
||||||
font-weight: bold
|
|
||||||
margin: 20px 0
|
|
||||||
text-align: center
|
|
||||||
&>span
|
|
||||||
color: $main-color
|
|
||||||
font-size: 18px
|
|
||||||
//&[data-price-section="rooms"]
|
|
||||||
// .row .price_section .price span
|
|
||||||
// font-size: 14px
|
|
||||||
// &>p
|
|
||||||
// font-size: 18px
|
|
||||||
// span
|
|
||||||
// color: $main-color
|
|
||||||
//&[data-price-section="tables"]
|
|
||||||
// &>p
|
|
||||||
// font-size: 18px
|
|
||||||
// span
|
|
||||||
// color: $main-color
|
|
||||||
.row
|
|
||||||
padding: 15px
|
|
||||||
.price_section
|
|
||||||
max-width: 575px
|
|
||||||
padding: 15px 15px 30px 15px
|
|
||||||
margin-bottom: 20px
|
|
||||||
&:nth-child(odd)
|
|
||||||
background-color: #fdebf3
|
|
||||||
&:nth-child(even)
|
|
||||||
background-color: #eaf6fc
|
|
||||||
h3
|
|
||||||
color: #2fabe1
|
|
||||||
font-size: 18px
|
|
||||||
font-weight: bold
|
|
||||||
margin: 15px 0
|
|
||||||
text-align: left
|
|
||||||
.price
|
|
||||||
display: flex
|
|
||||||
justify-content: space-between
|
|
||||||
margin: 18px 0
|
|
||||||
span
|
|
||||||
color: #605e5e
|
|
||||||
font-size: 18px
|
|
||||||
max-width: 70%
|
|
||||||
&:last-child
|
|
||||||
color: $main-color
|
|
||||||
&:last-child
|
|
||||||
margin-bottom: 0
|
|
||||||
&__adding
|
|
||||||
padding-bottom: 20px !important
|
|
||||||
padding-left: 0 !important
|
|
||||||
padding-right: 0 !important
|
|
||||||
padding-top: 0 !important
|
|
||||||
margin: 0
|
|
||||||
|
|
||||||
hr
|
|
||||||
width: 100%
|
|
||||||
|
|
||||||
h2
|
|
||||||
color: #4c4c4c
|
|
||||||
font-size: 21px
|
|
||||||
font-weight: bold
|
|
||||||
margin: 20px 0
|
|
||||||
text-align: center
|
|
||||||
p
|
|
||||||
font-size: 18px
|
|
||||||
color: #605e5e
|
|
||||||
span
|
|
||||||
color: $main-color
|
|
||||||
|
|
||||||
|
|
||||||
@media screen and (max-width: 576px)
|
|
||||||
.prices
|
|
||||||
padding-top: 20px
|
|
||||||
h1
|
|
||||||
font-size: 24px
|
|
||||||
font-family: 'Museo Bold',sans-serif;
|
|
||||||
margin: 0
|
|
||||||
h2
|
|
||||||
margin-top: 0
|
|
||||||
font-size: 16px !important
|
|
||||||
&_sections
|
|
||||||
&__title
|
|
||||||
font-size: 12px !important
|
|
||||||
width: 70px
|
|
||||||
&__content
|
|
||||||
padding-top: 0
|
|
||||||
&>span
|
|
||||||
font-size: 14px
|
|
||||||
.row
|
|
||||||
.price_section
|
|
||||||
h3
|
|
||||||
font-size: 16px
|
|
||||||
span
|
|
||||||
font-size: 14px
|
|
||||||
&__titles
|
|
||||||
padding: 20px 0
|
|
||||||
|
|
||||||
&_section
|
|
||||||
margin-bottom: 10px
|
|
||||||
&:last-child
|
|
||||||
margin-bottom: 0
|
|
||||||
|
|
||||||
&__adding
|
|
||||||
p
|
|
||||||
font-size: 14px
|
|
||||||
203
src/sass/pages/price.scss
Normal file
203
src/sass/pages/price.scss
Normal file
@ -0,0 +1,203 @@
|
|||||||
|
@import '../constansts';
|
||||||
|
@import '../parts/main-block';
|
||||||
|
|
||||||
|
.prices {
|
||||||
|
padding-top: 30px;
|
||||||
|
font-family: 'Museo Regular', sans-serif;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin-bottom: 25px;
|
||||||
|
color: $main-color;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 24px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&_sections__title {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100px;
|
||||||
|
max-width: 100px;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 12px 0 rgba(56, 72, 95, 0.49);
|
||||||
|
font-size: 18px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background-color: $main-color;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&_sections__titles {
|
||||||
|
padding: 15px 0;
|
||||||
|
|
||||||
|
.col-4 {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&_sections__content {
|
||||||
|
display: none;
|
||||||
|
padding-top: 18px;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin: 20px 0;
|
||||||
|
color: #4c4c4c;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 21px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
> span {
|
||||||
|
color: $main-color;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
padding: 15px;
|
||||||
|
|
||||||
|
.price_section {
|
||||||
|
max-width: 575px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding: 15px 15px 30px;
|
||||||
|
|
||||||
|
&:nth-child(odd) {
|
||||||
|
background-color: #fdebf3;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(even) {
|
||||||
|
background-color: #eaf6fc;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
margin: 15px 0;
|
||||||
|
color: #2fabe1;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 18px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: 18px 0;
|
||||||
|
|
||||||
|
span {
|
||||||
|
max-width: 70%;
|
||||||
|
color: #605e5e;
|
||||||
|
font-size: 18px;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
color: $main-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__adding {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0 0 20px !important;
|
||||||
|
|
||||||
|
hr {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin: 20px 0;
|
||||||
|
color: #4c4c4c;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 21px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #605e5e;
|
||||||
|
font-size: 18px;
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: $main-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 576px) {
|
||||||
|
.prices {
|
||||||
|
padding-top: 20px;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 24px;
|
||||||
|
font-family: 'Museo Bold', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin-top: 0;
|
||||||
|
font-size: 16px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&_sections {
|
||||||
|
&__title {
|
||||||
|
width: 70px;
|
||||||
|
font-size: 12px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
padding-top: 0;
|
||||||
|
|
||||||
|
> span {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
.price_section {
|
||||||
|
h3 {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__titles {
|
||||||
|
padding: 20px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&_section {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__adding {
|
||||||
|
p {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,165 +0,0 @@
|
|||||||
@import "../parts/compound"
|
|
||||||
|
|
||||||
.quests
|
|
||||||
margin-top: 30px
|
|
||||||
background-size: cover
|
|
||||||
position: relative
|
|
||||||
z-index: 1
|
|
||||||
font-family: 'PT Sans', sans-serif
|
|
||||||
.icon-hidden
|
|
||||||
opacity: 0.3
|
|
||||||
&-overlay
|
|
||||||
position: absolute
|
|
||||||
top: 0
|
|
||||||
left: 0
|
|
||||||
width: 100%
|
|
||||||
background-color: rgba(0, 0, 0, .35)
|
|
||||||
z-index: 2
|
|
||||||
height: 408px
|
|
||||||
&-headers
|
|
||||||
box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.5)
|
|
||||||
position: relative
|
|
||||||
height: 408px
|
|
||||||
z-index: 3
|
|
||||||
// height: 100%
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
justify-content: center
|
|
||||||
align-items: center
|
|
||||||
color: #ffffff
|
|
||||||
text-align: center
|
|
||||||
h1
|
|
||||||
font-size: 48px
|
|
||||||
font-weight: 600
|
|
||||||
line-height: 0.75
|
|
||||||
letter-spacing: 0.4px
|
|
||||||
margin-bottom: 32px
|
|
||||||
position: relative
|
|
||||||
z-index: 3
|
|
||||||
h2
|
|
||||||
font-size: 26px
|
|
||||||
font-weight: 600
|
|
||||||
line-height: 0.75
|
|
||||||
letter-spacing: 0.4px
|
|
||||||
position: relative
|
|
||||||
z-index: 3
|
|
||||||
&-content
|
|
||||||
margin: 70px auto
|
|
||||||
max-width: 1280px !important
|
|
||||||
margin-bottom: -20px
|
|
||||||
a
|
|
||||||
text-decoration: none
|
|
||||||
outline: none
|
|
||||||
&__item
|
|
||||||
height: 296px
|
|
||||||
width: 400px
|
|
||||||
max-width: 400px
|
|
||||||
min-width: 400px
|
|
||||||
background-size: cover
|
|
||||||
position: relative
|
|
||||||
border-radius: 20px
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
justify-content: flex-end
|
|
||||||
align-items: flex-start
|
|
||||||
padding: 0
|
|
||||||
margin-bottom: 50px
|
|
||||||
.quest__text
|
|
||||||
width: 100%
|
|
||||||
padding: 0 25px 60px 25px
|
|
||||||
background: url('../../img/quests/exitquests-mask.svg') top center no-repeat
|
|
||||||
border-radius: 0 0 20px 20px
|
|
||||||
height: 160px
|
|
||||||
color: #ffffff
|
|
||||||
h3
|
|
||||||
font-size: 24px
|
|
||||||
font-weight: 600
|
|
||||||
letter-spacing: 0.3px
|
|
||||||
margin: 25px 0 8px 0
|
|
||||||
p
|
|
||||||
font-size: 16px
|
|
||||||
letter-spacing: 0.1px
|
|
||||||
margin-bottom: 8px
|
|
||||||
&-icons
|
|
||||||
max-width: 350px
|
|
||||||
margin-right: auto
|
|
||||||
margin-left: auto
|
|
||||||
display: flex
|
|
||||||
// flex-direction:
|
|
||||||
justify-content: space-between
|
|
||||||
align-items: center
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@media screen and (max-width: 1200px)
|
|
||||||
.quests
|
|
||||||
&-headers
|
|
||||||
background-size: cover
|
|
||||||
&-content
|
|
||||||
.row
|
|
||||||
justify-content: center !important
|
|
||||||
&__item
|
|
||||||
margin: 30px auto
|
|
||||||
max-height: 450px !important
|
|
||||||
|
|
||||||
|
|
||||||
@media screen and (max-width: 768px)
|
|
||||||
.quests
|
|
||||||
&-headers
|
|
||||||
height: 200px
|
|
||||||
h1
|
|
||||||
font-size: 34px
|
|
||||||
h2
|
|
||||||
font-size: 20px
|
|
||||||
//max-width:
|
|
||||||
&-overlay
|
|
||||||
height: 200px
|
|
||||||
|
|
||||||
|
|
||||||
@media screen and (max-width: 576px)
|
|
||||||
.quests
|
|
||||||
margin-top: 0
|
|
||||||
.quests-content
|
|
||||||
.row
|
|
||||||
justify-content: center !important
|
|
||||||
.quests-content__item
|
|
||||||
margin: 15px auto !important
|
|
||||||
.quests
|
|
||||||
&-headers
|
|
||||||
box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.5)
|
|
||||||
h1
|
|
||||||
font-size: 28px
|
|
||||||
h2
|
|
||||||
font-size: 16px !important
|
|
||||||
max-width: 395px
|
|
||||||
line-height: 1.1
|
|
||||||
&-content
|
|
||||||
margin-top: 20px
|
|
||||||
margin-bottom: 20px
|
|
||||||
&__item
|
|
||||||
min-width: 288px
|
|
||||||
max-width: 288px
|
|
||||||
width: 288px
|
|
||||||
height: 213px
|
|
||||||
.quest__text
|
|
||||||
padding: 0 15px 15px 15px
|
|
||||||
height: 114px
|
|
||||||
h3
|
|
||||||
font-size: 16px
|
|
||||||
margin-top: 20px
|
|
||||||
p
|
|
||||||
font-size: 14px
|
|
||||||
margin-bottom: 0
|
|
||||||
line-height: 1.15
|
|
||||||
img
|
|
||||||
max-width: 14px
|
|
||||||
.quests-content__item-icons
|
|
||||||
justify-content: space-between !important
|
|
||||||
|
|
||||||
|
|
||||||
@media screen and (max-width: 320px)
|
|
||||||
.quest-slider
|
|
||||||
.carousel-control-next, .carousel-control-prev
|
|
||||||
top: 65% !important
|
|
||||||
222
src/sass/pages/quests.scss
Normal file
222
src/sass/pages/quests.scss
Normal file
@ -0,0 +1,222 @@
|
|||||||
|
@import '../parts/compound';
|
||||||
|
|
||||||
|
.quests {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
margin-top: 30px;
|
||||||
|
background-size: cover;
|
||||||
|
font-family: 'PT Sans', sans-serif;
|
||||||
|
|
||||||
|
.icon-hidden {
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 2;
|
||||||
|
width: 100%;
|
||||||
|
height: 408px;
|
||||||
|
background-color: rgba(0, 0, 0, 0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
&-headers {
|
||||||
|
position: relative;
|
||||||
|
z-index: 3;
|
||||||
|
|
||||||
|
// height: 100%
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 408px;
|
||||||
|
color: #ffffff;
|
||||||
|
box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.5);
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
position: relative;
|
||||||
|
z-index: 3;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 48px;
|
||||||
|
line-height: 0.75;
|
||||||
|
letter-spacing: 0.4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
position: relative;
|
||||||
|
z-index: 3;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 26px;
|
||||||
|
line-height: 0.75;
|
||||||
|
letter-spacing: 0.4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-content {
|
||||||
|
max-width: 1280px !important;
|
||||||
|
margin: 70px auto -20px;
|
||||||
|
|
||||||
|
a {
|
||||||
|
outline: none;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: flex-end;
|
||||||
|
width: 400px;
|
||||||
|
min-width: 400px;
|
||||||
|
max-width: 400px;
|
||||||
|
height: 296px;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
padding: 0;
|
||||||
|
border-radius: 20px;
|
||||||
|
background-size: cover;
|
||||||
|
|
||||||
|
.quest__text {
|
||||||
|
width: 100%;
|
||||||
|
height: 160px;
|
||||||
|
padding: 0 25px 60px;
|
||||||
|
border-radius: 0 0 20px 20px;
|
||||||
|
background: url('../../img/quests/exitquests-mask.svg') top center no-repeat;
|
||||||
|
color: #ffffff;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
margin: 25px 0 8px;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 24px;
|
||||||
|
letter-spacing: 0.3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-size: 16px;
|
||||||
|
letter-spacing: 0.1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-icons {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
// flex-direction:
|
||||||
|
justify-content: space-between;
|
||||||
|
max-width: 350px;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1200px) {
|
||||||
|
.quests {
|
||||||
|
&-headers {
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-content {
|
||||||
|
justify-content: center !important;
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
max-height: 450px !important;
|
||||||
|
margin: 30px auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.quests {
|
||||||
|
&-headers {
|
||||||
|
height: 200px;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 34px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-overlay {
|
||||||
|
height: 200px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 576px) {
|
||||||
|
.quests {
|
||||||
|
margin-top: 0;
|
||||||
|
|
||||||
|
&-headers {
|
||||||
|
box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.5);
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
max-width: 395px;
|
||||||
|
font-size: 16px !important;
|
||||||
|
line-height: 1.1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-content {
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
.row {
|
||||||
|
justify-content: center !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
width: 288px;
|
||||||
|
min-width: 288px;
|
||||||
|
max-width: 288px;
|
||||||
|
height: 213px;
|
||||||
|
margin: 15px auto !important;
|
||||||
|
|
||||||
|
.quest__text {
|
||||||
|
height: 114px;
|
||||||
|
padding: 0 15px 15px;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
margin-top: 20px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 0;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.15;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quests-content__item-icons {
|
||||||
|
justify-content: space-between !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 320px) {
|
||||||
|
.quest-slider {
|
||||||
|
.carousel-control-next, .carousel-control-prev {
|
||||||
|
top: 65% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,18 +0,0 @@
|
|||||||
@import "../parts/discounts"
|
|
||||||
|
|
||||||
.sales-block
|
|
||||||
align-items: center
|
|
||||||
display: flex
|
|
||||||
flex-wrap: wrap
|
|
||||||
justify-content: space-around
|
|
||||||
max-width: 1440px
|
|
||||||
padding-top: 30px
|
|
||||||
.discount-item
|
|
||||||
margin: 0 15px 80px 15px
|
|
||||||
&__badge
|
|
||||||
left: -45px
|
|
||||||
|
|
||||||
@media screen and (max-width: 425px)
|
|
||||||
.sales-block
|
|
||||||
.discount-item
|
|
||||||
margin-bottom: 30px
|
|
||||||
26
src/sass/pages/sales.scss
Normal file
26
src/sass/pages/sales.scss
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
@import '../parts/discounts';
|
||||||
|
|
||||||
|
.sales-block {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
max-width: 1440px;
|
||||||
|
padding-top: 30px;
|
||||||
|
|
||||||
|
.discount-item {
|
||||||
|
margin: 0 15px 80px;
|
||||||
|
|
||||||
|
&__badge {
|
||||||
|
left: -45px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 425px) {
|
||||||
|
.sales-block {
|
||||||
|
.discount-item {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,167 +0,0 @@
|
|||||||
.quest__booking
|
|
||||||
padding-bottom: 10px
|
|
||||||
|
|
||||||
.shSlots
|
|
||||||
display: flex
|
|
||||||
flex-wrap: wrap
|
|
||||||
justify-content: space-between
|
|
||||||
|
|
||||||
|
|
||||||
.quest-slider
|
|
||||||
max-height: 600px
|
|
||||||
position: relative
|
|
||||||
.carouselExampleControls
|
|
||||||
position: relative
|
|
||||||
.carousel-control-prev, .carousel-control-next
|
|
||||||
z-index: 3 !important
|
|
||||||
height: 80px
|
|
||||||
width: 40px
|
|
||||||
position: absolute
|
|
||||||
top: 50%
|
|
||||||
transform: translateY(-40px)
|
|
||||||
left: 15%
|
|
||||||
.carousel-control-next
|
|
||||||
left: 85%
|
|
||||||
.carousel-control-prev-icon
|
|
||||||
height: 80px
|
|
||||||
width: 40px
|
|
||||||
background: url('../../img/quest/arrow-disabled-prev.svg') center no-repeat
|
|
||||||
.carousel-control-next-icon
|
|
||||||
height: 80px
|
|
||||||
width: 40px
|
|
||||||
background: url('../../img/quest/arrow-disabled-next.svg') center no-repeat
|
|
||||||
.carousel-control-prev-icon:hover
|
|
||||||
background: url('../../img/quest/arrow-active-prev.svg') center no-repeat
|
|
||||||
.carousel-control-next-icon:hover
|
|
||||||
background: url('../../img/quest/arrow-active-next.svg') center no-repeat
|
|
||||||
&-overlay
|
|
||||||
position: absolute
|
|
||||||
top: 0
|
|
||||||
left: 0
|
|
||||||
width: 100%
|
|
||||||
height: 100%
|
|
||||||
background-color: rgba(0, 0, 0, .35)
|
|
||||||
z-index: 2
|
|
||||||
// .carousel-item
|
|
||||||
background-position: center top !important
|
|
||||||
background-repeat: no-repeat !important
|
|
||||||
img
|
|
||||||
max-height: 600px
|
|
||||||
&-header
|
|
||||||
position: absolute
|
|
||||||
bottom: 62px
|
|
||||||
z-index: 3
|
|
||||||
width: 100%
|
|
||||||
text-align: center
|
|
||||||
h1
|
|
||||||
color: #ffffff
|
|
||||||
line-height: 1.15
|
|
||||||
font-family: 'PT Sans', sans-serif
|
|
||||||
font-size: 48px
|
|
||||||
font-weight: 600
|
|
||||||
letter-spacing: 0.3px
|
|
||||||
|
|
||||||
.quest-description
|
|
||||||
margin-top: 40px
|
|
||||||
margin-bottom: 40px
|
|
||||||
font-family: 'PT Sans', sans-serif
|
|
||||||
&__icons
|
|
||||||
div
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
justify-content: center
|
|
||||||
align-items: center
|
|
||||||
margin-bottom: 20px
|
|
||||||
padding-bottom: 20px
|
|
||||||
border-bottom: 1px solid #e6e6e6
|
|
||||||
font-size: 16px
|
|
||||||
color: #000000
|
|
||||||
&:nth-child(3)
|
|
||||||
border: none
|
|
||||||
img
|
|
||||||
margin-bottom: 15px
|
|
||||||
&__text
|
|
||||||
max-width: 800px
|
|
||||||
p
|
|
||||||
font-size: 20px
|
|
||||||
line-height: 1.4
|
|
||||||
letter-spacing: 0.2px
|
|
||||||
color: #363943
|
|
||||||
.notice
|
|
||||||
margin-top: 30px
|
|
||||||
p
|
|
||||||
font-size: 16px !important
|
|
||||||
color: #000000
|
|
||||||
font-style: italic
|
|
||||||
letter-spacing: -0.6px
|
|
||||||
|
|
||||||
@media screen and (max-width: 1200px)
|
|
||||||
.carousel-inner
|
|
||||||
max-height: 450px
|
|
||||||
.carousel-control-prev, .carousel-control-next
|
|
||||||
top: 80% !important
|
|
||||||
left: 10% !important
|
|
||||||
.carousel-control-next
|
|
||||||
left: 90% !important
|
|
||||||
.quest-description
|
|
||||||
&__text
|
|
||||||
p
|
|
||||||
font-size: 16px !important
|
|
||||||
.notice
|
|
||||||
p
|
|
||||||
font-size: 14px !important
|
|
||||||
letter-spacing: -0.6px
|
|
||||||
|
|
||||||
|
|
||||||
@media screen and (max-width: 768px)
|
|
||||||
.quest-slider-header
|
|
||||||
h1
|
|
||||||
font-size: 32px
|
|
||||||
.carousel-control-next, .carousel-control-prev, .carousel-control-next-icon, .carousel-control-prev-icon
|
|
||||||
// width: 20px !important
|
|
||||||
height: 40px !important
|
|
||||||
z-index: 5
|
|
||||||
|
|
||||||
.quest-description
|
|
||||||
&__icons
|
|
||||||
padding: 0
|
|
||||||
display: flex
|
|
||||||
flex-direction: row
|
|
||||||
justify-content: center
|
|
||||||
align-items: center
|
|
||||||
div
|
|
||||||
width: 33%
|
|
||||||
border: none
|
|
||||||
border-right: 1px solid #e6e6e6
|
|
||||||
&__text
|
|
||||||
padding: 0
|
|
||||||
.notice
|
|
||||||
p
|
|
||||||
line-height: 1.1
|
|
||||||
|
|
||||||
|
|
||||||
@media screen and (max-width: 576px)
|
|
||||||
.carousel-inner
|
|
||||||
max-height: 300px
|
|
||||||
.quest-slider-header
|
|
||||||
h1
|
|
||||||
font-size: 22px
|
|
||||||
.carousel-item
|
|
||||||
height: 300px !important
|
|
||||||
background-position: center top !important
|
|
||||||
background-repeat: no-repeat !important
|
|
||||||
background-size: cover !important
|
|
||||||
.quest-slider .carousel-control-prev, .quest-slider .carousel-control-next
|
|
||||||
z-index: 5 !important
|
|
||||||
width: 20px
|
|
||||||
.quest-slider
|
|
||||||
.carousel-control-prev-icon, .carousel-control-next-icon
|
|
||||||
background-size: cover !important
|
|
||||||
width: 20px !important
|
|
||||||
height: 40px !important
|
|
||||||
.quest-description
|
|
||||||
&__text
|
|
||||||
padding: 0 15px
|
|
||||||
|
|
||||||
.quest-slider .carousel-control-next, .quest-slider .carousel-control-prev
|
|
||||||
height: 40px !important
|
|
||||||
247
src/sass/pages/single-quest.scss
Normal file
247
src/sass/pages/single-quest.scss
Normal file
@ -0,0 +1,247 @@
|
|||||||
|
.quest__booking {
|
||||||
|
padding-bottom: 10px;
|
||||||
|
|
||||||
|
.shSlots {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.quest-slider {
|
||||||
|
position: relative;
|
||||||
|
max-height: 600px;
|
||||||
|
|
||||||
|
.carouselExampleControls {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-control-prev, .carousel-control-next {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 15%;
|
||||||
|
z-index: 3 !important;
|
||||||
|
width: 40px;
|
||||||
|
height: 80px;
|
||||||
|
transform: translateY(-40px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-control-next {
|
||||||
|
left: 85%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-control-prev-icon {
|
||||||
|
width: 40px;
|
||||||
|
height: 80px;
|
||||||
|
background: url('../../img/quest/arrow-disabled-prev.svg') center no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-control-next-icon {
|
||||||
|
width: 40px;
|
||||||
|
height: 80px;
|
||||||
|
background: url('../../img/quest/arrow-disabled-next.svg') center no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-control-prev-icon:hover {
|
||||||
|
background: url('../../img/quest/arrow-active-prev.svg') center no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-control-next-icon:hover {
|
||||||
|
background: url('../../img/quest/arrow-active-next.svg') center no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 2;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-height: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-header {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 62px;
|
||||||
|
z-index: 3;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: #ffffff;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 48px;
|
||||||
|
font-family: 'PT Sans', sans-serif;
|
||||||
|
line-height: 1.15;
|
||||||
|
letter-spacing: 0.3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.quest-description {
|
||||||
|
margin-top: 40px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
font-family: 'PT Sans', sans-serif;
|
||||||
|
|
||||||
|
&__icons {
|
||||||
|
div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
border-bottom: 1px solid #e6e6e6;
|
||||||
|
color: #000000;
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
&:nth-child(3) {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
max-width: 800px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #363943;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 1.4;
|
||||||
|
letter-spacing: 0.2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notice {
|
||||||
|
margin-top: 30px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #000000;
|
||||||
|
font-style: italic;
|
||||||
|
font-size: 16px !important;
|
||||||
|
letter-spacing: -0.6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1200px) {
|
||||||
|
.carousel-inner {
|
||||||
|
max-height: 450px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-control-prev, .carousel-control-next {
|
||||||
|
top: 80% !important;
|
||||||
|
left: 10% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-control-next {
|
||||||
|
left: 90% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quest-description {
|
||||||
|
&__text {
|
||||||
|
p {
|
||||||
|
font-size: 16px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notice {
|
||||||
|
p {
|
||||||
|
font-size: 14px !important;
|
||||||
|
letter-spacing: -0.6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.quest-slider-header {
|
||||||
|
h1 {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-control-next, .carousel-control-prev, .carousel-control-next-icon, .carousel-control-prev-icon {
|
||||||
|
z-index: 5;
|
||||||
|
// width: 20px !important
|
||||||
|
height: 40px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.quest-description {
|
||||||
|
&__icons {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
div {
|
||||||
|
width: 33%;
|
||||||
|
border: 0;
|
||||||
|
border-right: 1px solid #e6e6e6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
.notice {
|
||||||
|
p {
|
||||||
|
line-height: 1.1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 576px) {
|
||||||
|
.carousel-inner {
|
||||||
|
max-height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quest-slider-header {
|
||||||
|
h1 {
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-item {
|
||||||
|
height: 300px !important;
|
||||||
|
background-position: center top !important;
|
||||||
|
background-size: cover !important;
|
||||||
|
background-repeat: no-repeat !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quest-slider .carousel-control-prev, .quest-slider .carousel-control-next {
|
||||||
|
z-index: 5 !important;
|
||||||
|
width: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quest-slider {
|
||||||
|
height: 40px !important;
|
||||||
|
|
||||||
|
.carousel-control-prev-icon, .carousel-control-next-icon {
|
||||||
|
width: 20px !important;
|
||||||
|
height: 40px !important;
|
||||||
|
background-size: cover !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.quest-description {
|
||||||
|
&__text {
|
||||||
|
padding: 0 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-control-next, .quest-slider .carousel-control-prev {
|
||||||
|
height: 40px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,39 +0,0 @@
|
|||||||
.adding-service
|
|
||||||
text-align: center
|
|
||||||
padding-bottom: 60px
|
|
||||||
.extras
|
|
||||||
>div
|
|
||||||
display: flex
|
|
||||||
justify-content: center
|
|
||||||
.wrapper
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
max-width: 170px
|
|
||||||
margin-bottom: 20px
|
|
||||||
.adding-service__image
|
|
||||||
min-height: 136px
|
|
||||||
// margin-bottom: 20px
|
|
||||||
img
|
|
||||||
max-width: 100%
|
|
||||||
max-height: 120px
|
|
||||||
span
|
|
||||||
text-align: center
|
|
||||||
font-size: 18px
|
|
||||||
color: #000000
|
|
||||||
font-family: 'Museo Thin'
|
|
||||||
line-height: 1.15
|
|
||||||
button
|
|
||||||
margin-top: 65px
|
|
||||||
|
|
||||||
|
|
||||||
@media screen and (max-width: 768px)
|
|
||||||
.adding-service
|
|
||||||
.extras
|
|
||||||
justify-content: center !important
|
|
||||||
|
|
||||||
@media screen and (max-width: 576px)
|
|
||||||
.adding-service
|
|
||||||
background-color: #fff
|
|
||||||
padding: 20px 0
|
|
||||||
.adding-service .extras div img
|
|
||||||
min-height: auto
|
|
||||||
59
src/sass/parts/adding-service.scss
Normal file
59
src/sass/parts/adding-service.scss
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
.adding-service {
|
||||||
|
padding-bottom: 60px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.extras {
|
||||||
|
> div {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
max-width: 170px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
.adding-service__image {
|
||||||
|
min-height: 136px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 120px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #000000;
|
||||||
|
font-size: 18px;
|
||||||
|
font-family: 'Museo Thin', sans-serif;
|
||||||
|
line-height: 1.15;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
margin-top: 65px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.adding-service {
|
||||||
|
.extras {
|
||||||
|
justify-content: center !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 576px) {
|
||||||
|
.adding-service {
|
||||||
|
padding: 20px 0;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.adding-service .extras div img {
|
||||||
|
min-height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,35 +0,0 @@
|
|||||||
@import "../constansts"
|
|
||||||
|
|
||||||
.compound
|
|
||||||
font-family: 'PT Sans', sans-serif
|
|
||||||
padding-top: 40px
|
|
||||||
padding-bottom: 20px
|
|
||||||
margin-top: 40px
|
|
||||||
width: 100%
|
|
||||||
font-size: 20px
|
|
||||||
line-height: 1.6
|
|
||||||
letter-spacing: 0.2px
|
|
||||||
color: #363943
|
|
||||||
&__text
|
|
||||||
height: 33%
|
|
||||||
transition: 0.15s ease-in-out
|
|
||||||
overflow: hidden
|
|
||||||
max-width: 720px !important
|
|
||||||
margin: 0 auto
|
|
||||||
.turn
|
|
||||||
color: $main-color
|
|
||||||
cursor: pointer
|
|
||||||
text-decoration: underline
|
|
||||||
max-width: 720px !important
|
|
||||||
margin: 0 auto
|
|
||||||
|
|
||||||
@media screen and (max-width: 768px)
|
|
||||||
.compound
|
|
||||||
font-size: 16px
|
|
||||||
|
|
||||||
@media screen and (max-width: 576px)
|
|
||||||
.compound
|
|
||||||
padding-top: 10px
|
|
||||||
padding-left: 15px
|
|
||||||
margin-top: 0
|
|
||||||
background: #f2f2f2 !important
|
|
||||||
44
src/sass/parts/compound.scss
Normal file
44
src/sass/parts/compound.scss
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
@import '../constansts';
|
||||||
|
|
||||||
|
.compound {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 40px;
|
||||||
|
padding-top: 40px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
color: #363943;
|
||||||
|
font-size: 20px;
|
||||||
|
font-family: 'PT Sans', sans-serif;
|
||||||
|
line-height: 1.6;
|
||||||
|
letter-spacing: 0.2px;
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
overflow: hidden;
|
||||||
|
max-width: 720px !important;
|
||||||
|
height: 33%;
|
||||||
|
margin: 0 auto;
|
||||||
|
transition: 0.15s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.turn {
|
||||||
|
max-width: 720px !important;
|
||||||
|
margin: 0 auto;
|
||||||
|
color: $main-color;
|
||||||
|
text-decoration: underline;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.compound {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 576px) {
|
||||||
|
.compound {
|
||||||
|
margin-top: 0;
|
||||||
|
padding-top: 10px;
|
||||||
|
padding-left: 15px;
|
||||||
|
background: #f2f2f2 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,300 +0,0 @@
|
|||||||
@import "../constansts"
|
|
||||||
|
|
||||||
.discount
|
|
||||||
padding-top: 40px
|
|
||||||
background: #f2f2f2
|
|
||||||
h2
|
|
||||||
color: #1e212b
|
|
||||||
font-family: 'PT Sans', sans-serif
|
|
||||||
font-size: 40px
|
|
||||||
font-weight: 600
|
|
||||||
letter-spacing: 0.5px
|
|
||||||
line-height: normal
|
|
||||||
margin-bottom: 40px
|
|
||||||
text-align: center
|
|
||||||
.owl-carousel .owl-item img
|
|
||||||
width: auto
|
|
||||||
max-height: 280px
|
|
||||||
&-slider
|
|
||||||
position: relative
|
|
||||||
max-width: 1200px
|
|
||||||
margin-right: auto
|
|
||||||
margin-left: auto
|
|
||||||
&__prev
|
|
||||||
align-items: center
|
|
||||||
background-color: #f2f2f2
|
|
||||||
border-radius: 50%
|
|
||||||
color: $main-color
|
|
||||||
cursor: pointer
|
|
||||||
display: flex
|
|
||||||
font-size: 32px
|
|
||||||
height: 55px
|
|
||||||
justify-content: center
|
|
||||||
left: -70px
|
|
||||||
position: absolute
|
|
||||||
top: 50%
|
|
||||||
transform: translateY(-27px)
|
|
||||||
width: 55px
|
|
||||||
&__next
|
|
||||||
align-items: center
|
|
||||||
background-color: #f2f2f2
|
|
||||||
border-radius: 50%
|
|
||||||
color: $main-color
|
|
||||||
cursor: pointer
|
|
||||||
display: flex
|
|
||||||
font-size: 32px
|
|
||||||
height: 55px
|
|
||||||
justify-content: center
|
|
||||||
position: absolute
|
|
||||||
right: -70px
|
|
||||||
top: 50%
|
|
||||||
transform: translateY(-27px)
|
|
||||||
width: 55px
|
|
||||||
&-item
|
|
||||||
font-family: 'PT Sans', sans-serif
|
|
||||||
height: 536px
|
|
||||||
margin-left: auto
|
|
||||||
margin-right: auto
|
|
||||||
position: relative
|
|
||||||
width: 360px
|
|
||||||
&__badge
|
|
||||||
align-items: center
|
|
||||||
background: url('../../img/discount/promo-badge-small.png') center center no-repeat
|
|
||||||
color: #ffffff
|
|
||||||
display: flex
|
|
||||||
font-size: 28px
|
|
||||||
font-weight: 600
|
|
||||||
height: 77px
|
|
||||||
justify-content: center
|
|
||||||
left: -51px
|
|
||||||
position: absolute
|
|
||||||
text-align: center
|
|
||||||
top: 28px
|
|
||||||
transform: rotateZ(-29deg)
|
|
||||||
width: 397px
|
|
||||||
z-index: 3
|
|
||||||
&__content
|
|
||||||
align-items: center
|
|
||||||
border-radius: 39px
|
|
||||||
border: 5px solid #ffffff
|
|
||||||
box-shadow: 0 0 15px 0 rgba(41, 48, 55, 0.5)
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
height: 100%
|
|
||||||
padding: 80px 35px 20px 35px
|
|
||||||
position: absolute
|
|
||||||
p
|
|
||||||
color: #ffffff
|
|
||||||
font-size: 20px
|
|
||||||
font-weight: 600
|
|
||||||
letter-spacing: 0.1px
|
|
||||||
line-height: 1.25
|
|
||||||
margin: 0 0 12px 0
|
|
||||||
text-align: center
|
|
||||||
button
|
|
||||||
background-color: #fff
|
|
||||||
border: none
|
|
||||||
color: $main-color
|
|
||||||
width: 100%
|
|
||||||
img
|
|
||||||
height: 280px
|
|
||||||
max-width: 100%
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.discount-modal
|
|
||||||
display: none
|
|
||||||
font-family: 'PT Sans', sans-serif
|
|
||||||
height: 100%
|
|
||||||
position: fixed
|
|
||||||
top: 0
|
|
||||||
width: 100%
|
|
||||||
z-index: 99999
|
|
||||||
&-close
|
|
||||||
color: #FFF
|
|
||||||
cursor: pointer
|
|
||||||
font-size: 20px
|
|
||||||
font-style: normal
|
|
||||||
line-height: 44px
|
|
||||||
opacity: 0.65
|
|
||||||
position: absolute
|
|
||||||
right: -100px
|
|
||||||
top: -50px
|
|
||||||
&-layout
|
|
||||||
background: rgba(0, 0, 0, .85)
|
|
||||||
height: 100%
|
|
||||||
left: 0
|
|
||||||
position: fixed
|
|
||||||
top: 0
|
|
||||||
width: 100%
|
|
||||||
&-wrapper
|
|
||||||
background: #ffffff
|
|
||||||
border-radius: 39px
|
|
||||||
border: 8px solid #ffffff
|
|
||||||
height: 523px
|
|
||||||
left: 50%
|
|
||||||
position: relative
|
|
||||||
top: 50%
|
|
||||||
transform: translateX(-460px) translateY(-262px)
|
|
||||||
width: 920px
|
|
||||||
z-index: 2
|
|
||||||
&-slider
|
|
||||||
height: 100%
|
|
||||||
.owl-stage
|
|
||||||
height: 100%
|
|
||||||
.owl-stage-outer
|
|
||||||
border-radius: 30px
|
|
||||||
height: 100%
|
|
||||||
padding: 0 !important
|
|
||||||
.owl-item
|
|
||||||
height: 100%
|
|
||||||
&-nav
|
|
||||||
align-items: center
|
|
||||||
background-color: #f2f2f2
|
|
||||||
border-radius: 50%
|
|
||||||
color: $main-color
|
|
||||||
cursor: pointer
|
|
||||||
display: flex
|
|
||||||
font-size: 32px
|
|
||||||
height: 55px
|
|
||||||
justify-content: center
|
|
||||||
position: absolute
|
|
||||||
right: -100px
|
|
||||||
top: 50%
|
|
||||||
transform: translateY(-27px)
|
|
||||||
width: 55px
|
|
||||||
i
|
|
||||||
transform: translateX(4px)
|
|
||||||
&-prev
|
|
||||||
right: 0
|
|
||||||
left: -100px
|
|
||||||
i
|
|
||||||
transform: translateX(-2px)
|
|
||||||
&-item
|
|
||||||
align-items: center
|
|
||||||
background: #ffffff
|
|
||||||
border-radius: 10px
|
|
||||||
display: flex
|
|
||||||
height: 100%
|
|
||||||
justify-content: space-between
|
|
||||||
position: relative
|
|
||||||
img
|
|
||||||
width: auto !important
|
|
||||||
max-width: 100%
|
|
||||||
&-badge
|
|
||||||
align-items: center
|
|
||||||
background: url('../../img/discount/promo-badge-large.png') center center no-repeat
|
|
||||||
color: #ffffff
|
|
||||||
display: flex
|
|
||||||
font-size: 26px
|
|
||||||
font-weight: 600
|
|
||||||
height: 77px
|
|
||||||
justify-content: center
|
|
||||||
left: -51px
|
|
||||||
line-height: 77px
|
|
||||||
position: absolute
|
|
||||||
text-align: center
|
|
||||||
top: 28px
|
|
||||||
transform: rotateZ(-29deg)
|
|
||||||
width: 432px
|
|
||||||
&__img
|
|
||||||
align-items: center
|
|
||||||
display: flex
|
|
||||||
height: 100%
|
|
||||||
justify-content: center
|
|
||||||
width: 360px
|
|
||||||
&__text
|
|
||||||
align-self: flex-start
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
font-size: 20px
|
|
||||||
height: 100%
|
|
||||||
justify-content: space-between
|
|
||||||
letter-spacing: 0.2px
|
|
||||||
line-height: 1.5
|
|
||||||
max-width: 540px
|
|
||||||
padding: 10px 30px
|
|
||||||
button
|
|
||||||
background: rgb(43, 187, 115)
|
|
||||||
border: none
|
|
||||||
width: 295px
|
|
||||||
&:hover
|
|
||||||
background: darken(rgb(43, 187, 115), 10%)
|
|
||||||
|
|
||||||
|
|
||||||
@media screen and (max-width: 576px)
|
|
||||||
|
|
||||||
.discount
|
|
||||||
padding-bottom: 20px
|
|
||||||
padding-top: 20px
|
|
||||||
h2
|
|
||||||
margin: 0 auto 20px auto
|
|
||||||
&-item
|
|
||||||
height: 350px
|
|
||||||
width: 260px
|
|
||||||
max-width: 100%
|
|
||||||
&__badge
|
|
||||||
align-items: center
|
|
||||||
background: url(../../img/discount/promo-badge-small.png) center center no-repeat
|
|
||||||
background-size: cover
|
|
||||||
color: #fff
|
|
||||||
display: flex
|
|
||||||
font-size: 18px
|
|
||||||
font-weight: 600
|
|
||||||
height: 48px
|
|
||||||
justify-content: center
|
|
||||||
left: -31px !important
|
|
||||||
position: absolute
|
|
||||||
text-align: center
|
|
||||||
top: 26px
|
|
||||||
transform: rotateZ(-29deg)
|
|
||||||
width: 277px
|
|
||||||
z-index: 3
|
|
||||||
&__content
|
|
||||||
padding: 80px 10px
|
|
||||||
img
|
|
||||||
max-height: 123px !important
|
|
||||||
p
|
|
||||||
min-height: 50px
|
|
||||||
font-size: 14px
|
|
||||||
font-weight: normal
|
|
||||||
button
|
|
||||||
width: auto
|
|
||||||
font-size: 16px
|
|
||||||
|
|
||||||
.discount-modal
|
|
||||||
padding: 10px
|
|
||||||
&-close
|
|
||||||
display: none
|
|
||||||
.owl-stage-outer
|
|
||||||
border-radius: 15px
|
|
||||||
&-wrapper
|
|
||||||
height: 470px
|
|
||||||
left: 0
|
|
||||||
max-width: 100%
|
|
||||||
top: 50%
|
|
||||||
transform: translateY(-225px)
|
|
||||||
&-slider-item
|
|
||||||
flex-direction: column
|
|
||||||
justify-content: center
|
|
||||||
&__img
|
|
||||||
display: none
|
|
||||||
&-badge
|
|
||||||
background: none
|
|
||||||
color: #000000
|
|
||||||
font-size: 24px
|
|
||||||
height: 40px
|
|
||||||
position: initial
|
|
||||||
text-align: center
|
|
||||||
transform: none
|
|
||||||
&__text
|
|
||||||
font-size: 16px
|
|
||||||
height: auto
|
|
||||||
p
|
|
||||||
margin: 5px 0 !important
|
|
||||||
a
|
|
||||||
display: none
|
|
||||||
justify-content: center
|
|
||||||
button
|
|
||||||
width: 200px
|
|
||||||
font-size: 14px
|
|
||||||
392
src/sass/parts/discounts.scss
Normal file
392
src/sass/parts/discounts.scss
Normal file
@ -0,0 +1,392 @@
|
|||||||
|
@import '../constansts';
|
||||||
|
|
||||||
|
.discount {
|
||||||
|
padding-top: 40px;
|
||||||
|
background: #f2f2f2;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
color: #1e212b;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 40px;
|
||||||
|
font-family: 'PT Sans', sans-serif;
|
||||||
|
line-height: normal;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.owl-carousel .owl-item img {
|
||||||
|
width: auto;
|
||||||
|
max-height: 280px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-slider {
|
||||||
|
position: relative;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
|
||||||
|
&__prev {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: -70px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 55px;
|
||||||
|
height: 55px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #f2f2f2;
|
||||||
|
color: $main-color;
|
||||||
|
font-size: 32px;
|
||||||
|
cursor: pointer;
|
||||||
|
transform: translateY(-27px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__next {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
right: -70px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 55px;
|
||||||
|
height: 55px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #f2f2f2;
|
||||||
|
color: $main-color;
|
||||||
|
font-size: 32px;
|
||||||
|
cursor: pointer;
|
||||||
|
transform: translateY(-27px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-item {
|
||||||
|
position: relative;
|
||||||
|
width: 360px;
|
||||||
|
height: 536px;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
font-family: 'PT Sans', sans-serif;
|
||||||
|
|
||||||
|
&__badge {
|
||||||
|
position: absolute;
|
||||||
|
top: 28px;
|
||||||
|
left: -51px;
|
||||||
|
z-index: 3;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 397px;
|
||||||
|
height: 77px;
|
||||||
|
background: url('../../img/discount/promo-badge-small.png') center center no-repeat;
|
||||||
|
color: #ffffff;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 28px;
|
||||||
|
text-align: center;
|
||||||
|
transform: rotateZ(-29deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
position: absolute;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
padding: 80px 35px 20px;
|
||||||
|
border: 5px solid #ffffff;
|
||||||
|
border-radius: 39px;
|
||||||
|
box-shadow: 0 0 15px 0 rgba(41, 48, 55, 0.5);
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0 0 12px;
|
||||||
|
color: #ffffff;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 1.25;
|
||||||
|
letter-spacing: 0.1px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
width: 100%;
|
||||||
|
border: 0;
|
||||||
|
background-color: #ffffff;
|
||||||
|
color: $main-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: 280px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.discount-modal {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
z-index: 99999;
|
||||||
|
display: none;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
font-family: 'PT Sans', sans-serif;
|
||||||
|
|
||||||
|
&-close {
|
||||||
|
position: absolute;
|
||||||
|
top: -50px;
|
||||||
|
right: -100px;
|
||||||
|
color: #ffffff;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 44px;
|
||||||
|
opacity: 0.65;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-layout {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.85);
|
||||||
|
}
|
||||||
|
|
||||||
|
&-wrapper {
|
||||||
|
position: relative;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
z-index: 2;
|
||||||
|
width: 920px;
|
||||||
|
height: 523px;
|
||||||
|
border: 8px solid #ffffff;
|
||||||
|
border-radius: 39px;
|
||||||
|
background: #ffffff;
|
||||||
|
transform: translateX(-460px) translateY(-262px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&-slider {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.owl-stage {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.owl-stage-outer {
|
||||||
|
height: 100%;
|
||||||
|
padding: 0 !important;
|
||||||
|
border-radius: 30px;
|
||||||
|
|
||||||
|
.owl-item {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-nav {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
right: -100px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 55px;
|
||||||
|
height: 55px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #f2f2f2;
|
||||||
|
color: $main-color;
|
||||||
|
font-size: 32px;
|
||||||
|
cursor: pointer;
|
||||||
|
transform: translateY(-27px);
|
||||||
|
|
||||||
|
i {
|
||||||
|
transform: translateX(4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&-prev {
|
||||||
|
right: 0;
|
||||||
|
left: -100px;
|
||||||
|
|
||||||
|
i {
|
||||||
|
transform: translateX(-2px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-item {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: #ffffff;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: auto !important;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-badge {
|
||||||
|
position: absolute;
|
||||||
|
top: 28px;
|
||||||
|
left: -51px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 432px;
|
||||||
|
height: 77px;
|
||||||
|
background: url('../../img/discount/promo-badge-large.png') center center no-repeat;
|
||||||
|
color: #ffffff;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 26px;
|
||||||
|
line-height: 77px;
|
||||||
|
text-align: center;
|
||||||
|
transform: rotateZ(-29deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__img {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 360px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-self: flex-start;
|
||||||
|
justify-content: space-between;
|
||||||
|
max-width: 540px;
|
||||||
|
height: 100%;
|
||||||
|
padding: 10px 30px;
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 1.5;
|
||||||
|
letter-spacing: 0.2px;
|
||||||
|
|
||||||
|
button {
|
||||||
|
width: 295px;
|
||||||
|
border: 0;
|
||||||
|
background: rgb(43, 187, 115);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: darken(rgb(43, 187, 115), 10%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 576px) {
|
||||||
|
.discount {
|
||||||
|
padding-top: 20px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin: 0 auto 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-item {
|
||||||
|
width: 260px;
|
||||||
|
max-width: 100%;
|
||||||
|
height: 350px;
|
||||||
|
|
||||||
|
&__badge {
|
||||||
|
position: absolute;
|
||||||
|
top: 26px;
|
||||||
|
left: -31px !important;
|
||||||
|
z-index: 3;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 277px;
|
||||||
|
height: 48px;
|
||||||
|
background: url('../../img/discount/promo-badge-small.png') center center no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
color: #ffffff;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 18px;
|
||||||
|
text-align: center;
|
||||||
|
transform: rotateZ(-29deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
padding: 80px 10px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-height: 123px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
min-height: 50px;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
width: auto;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.discount-modal {
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
&-close {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.owl-stage-outer {
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-wrapper {
|
||||||
|
top: 50%;
|
||||||
|
left: 0;
|
||||||
|
max-width: 100%;
|
||||||
|
height: 470px;
|
||||||
|
transform: translateY(-225px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&-slider-item {
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
&__img {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-badge {
|
||||||
|
position: initial;
|
||||||
|
height: 40px;
|
||||||
|
background: none;
|
||||||
|
color: #000000;
|
||||||
|
font-size: 24px;
|
||||||
|
text-align: center;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
height: auto;
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 5px 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: none;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
button {
|
||||||
|
width: 200px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -1,192 +0,0 @@
|
|||||||
.ent-container
|
|
||||||
p
|
|
||||||
font-size: 24px
|
|
||||||
letter-spacing: 0.5px
|
|
||||||
text-align: center
|
|
||||||
color: #1e212b
|
|
||||||
max-width: 940px
|
|
||||||
margin: 20px auto
|
|
||||||
margin-bottom: 0
|
|
||||||
|
|
||||||
.quest-description__icons_main
|
|
||||||
padding: 20px 0 !important
|
|
||||||
color: #fff
|
|
||||||
display: flex
|
|
||||||
flex-direction: row
|
|
||||||
justify-content: space-between
|
|
||||||
div
|
|
||||||
padding: 0 !important
|
|
||||||
img
|
|
||||||
height: 20px
|
|
||||||
width: auto !important
|
|
||||||
margin: 0 auto
|
|
||||||
.quest-age
|
|
||||||
img
|
|
||||||
height: 44px
|
|
||||||
.ent
|
|
||||||
// padding-top: 20px 10.10.2020
|
|
||||||
padding-top: 70px //10.10.2020
|
|
||||||
padding-bottom: 20px
|
|
||||||
position: relative
|
|
||||||
font-family: 'PT Sans', sans-serif
|
|
||||||
&-slider
|
|
||||||
padding-top: 35px
|
|
||||||
&-container
|
|
||||||
.owl-item
|
|
||||||
&:nth-child(4n+2)
|
|
||||||
h3
|
|
||||||
color: #5CBAE9
|
|
||||||
button
|
|
||||||
color: #ffffff
|
|
||||||
a
|
|
||||||
background: url('../../img/icons/arkids.svg') center 1px no-repeat
|
|
||||||
background-size: 102%
|
|
||||||
&:nth-child(2n+3)
|
|
||||||
h3
|
|
||||||
color: #F08D37
|
|
||||||
button
|
|
||||||
color: #ffffff
|
|
||||||
a
|
|
||||||
background: url('../../img/icons/faraon.svg') center 1px no-repeat
|
|
||||||
background-size: 102%
|
|
||||||
h2
|
|
||||||
margin: 0
|
|
||||||
text-align: center
|
|
||||||
font-size: 40px
|
|
||||||
font-weight: 600
|
|
||||||
letter-spacing: 0.5px
|
|
||||||
color: #1e212b
|
|
||||||
&__quest
|
|
||||||
height: 380px
|
|
||||||
max-width: 360px
|
|
||||||
border-radius: 20px
|
|
||||||
position: relative
|
|
||||||
&-overlay
|
|
||||||
position: absolute
|
|
||||||
left: 0
|
|
||||||
top: 0
|
|
||||||
right: 0
|
|
||||||
bottom: 0
|
|
||||||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.43), rgba(0, 0, 0, 0.57))
|
|
||||||
z-index: 50
|
|
||||||
border-radius: 20px
|
|
||||||
&-content
|
|
||||||
div
|
|
||||||
padding: 40px
|
|
||||||
padding-bottom: 0
|
|
||||||
position: relative
|
|
||||||
z-index: 99
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
justify-content: space-between
|
|
||||||
height: 100%
|
|
||||||
h3
|
|
||||||
font-size: 32px
|
|
||||||
font-weight: 600
|
|
||||||
letter-spacing: 0.4px
|
|
||||||
margin-bottom: 12px
|
|
||||||
color: red
|
|
||||||
p
|
|
||||||
color: #ffffff
|
|
||||||
font-size: 22px !important
|
|
||||||
letter-spacing: 0.5px
|
|
||||||
a
|
|
||||||
background: transparent
|
|
||||||
width: 100%
|
|
||||||
background-size: 360px 72px
|
|
||||||
height: 74px
|
|
||||||
padding: 23px
|
|
||||||
display: block
|
|
||||||
position: absolute
|
|
||||||
transition: 0.2s
|
|
||||||
bottom: 0
|
|
||||||
left: 0
|
|
||||||
right: 0
|
|
||||||
z-index: 70
|
|
||||||
border-radius: 0 0 20px 20px
|
|
||||||
overflow: hidden
|
|
||||||
background: url('../../img/icons/eger.svg') center 1px no-repeat
|
|
||||||
background-size: 102%
|
|
||||||
&:hover
|
|
||||||
height: 80px
|
|
||||||
button
|
|
||||||
font-size: 22px
|
|
||||||
|
|
||||||
button
|
|
||||||
background: transparent
|
|
||||||
transition: 0.2s
|
|
||||||
border: none
|
|
||||||
font-size: 18px
|
|
||||||
font-weight: 600
|
|
||||||
letter-spacing: 0.4px
|
|
||||||
text-align: center
|
|
||||||
width: 100%
|
|
||||||
color: #ffffff
|
|
||||||
text-decoration: none
|
|
||||||
font-size: 18px
|
|
||||||
font-weight: 600
|
|
||||||
letter-spacing: 0.4px
|
|
||||||
text-align: center
|
|
||||||
text-transform: uppercase
|
|
||||||
outline: none
|
|
||||||
|
|
||||||
.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
|
|
||||||
|
|
||||||
|
|
||||||
@media screen and (max-width: 576px)
|
|
||||||
.ent
|
|
||||||
margin-top: 0
|
|
||||||
padding-top: 40px !important
|
|
||||||
padding-bottom: 0px
|
|
||||||
&:before, &:after
|
|
||||||
display: none !important
|
|
||||||
&-slider
|
|
||||||
padding-top: 0
|
|
||||||
&-container
|
|
||||||
h2
|
|
||||||
font-size: 28px !important
|
|
||||||
p
|
|
||||||
font-size: 16px !important
|
|
||||||
&__quest
|
|
||||||
height: 280px !important
|
|
||||||
margin-top: 25px
|
|
||||||
max-width: 260px !important
|
|
||||||
&-content
|
|
||||||
div
|
|
||||||
padding: 15px
|
|
||||||
h3
|
|
||||||
font-size: 20px !important
|
|
||||||
p
|
|
||||||
font-size: 14px !important
|
|
||||||
.owl-item
|
|
||||||
// background-size: cover
|
|
||||||
&:nth-child(3n+1)
|
|
||||||
h3
|
|
||||||
color: #5CBAE9
|
|
||||||
a
|
|
||||||
background-size: 360px 70px
|
|
||||||
background: url('../../img/icons/arkids.svg') center 1px no-repeat
|
|
||||||
button
|
|
||||||
color: #ffffff
|
|
||||||
&:nth-child(3n+2)
|
|
||||||
h3
|
|
||||||
color: #F08D37
|
|
||||||
a
|
|
||||||
background-size: 360px 70px
|
|
||||||
background: url('../../img/icons/faraon.svg') center 1px no-repeat
|
|
||||||
button
|
|
||||||
color: #ffffff
|
|
||||||
&:nth-child(3n)
|
|
||||||
h3
|
|
||||||
color: red
|
|
||||||
a
|
|
||||||
background-size: 360px 70px
|
|
||||||
background: url('../../img/icons/eger.svg') center 1px no-repeat !important
|
|
||||||
button
|
|
||||||
color: #ffffff
|
|
||||||
280
src/sass/parts/entertaiments.scss
Normal file
280
src/sass/parts/entertaiments.scss
Normal file
@ -0,0 +1,280 @@
|
|||||||
|
.quest-description__icons_main {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 20px 0 !important;
|
||||||
|
color: #ffffff;
|
||||||
|
|
||||||
|
div {
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: auto !important;
|
||||||
|
height: 20px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quest-age {
|
||||||
|
img {
|
||||||
|
height: 44px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ent {
|
||||||
|
position: relative;
|
||||||
|
// padding-top: 20px 10.10.2020
|
||||||
|
padding-top: 70px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
font-family: 'PT Sans', sans-serif;
|
||||||
|
|
||||||
|
&-slider {
|
||||||
|
padding-top: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-container {
|
||||||
|
.owl-item {
|
||||||
|
&:nth-child(4n+2) {
|
||||||
|
h3 {
|
||||||
|
color: #5cbae9;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
background: url('../../img/icons/arkids.svg') center 1px no-repeat;
|
||||||
|
background-size: 102%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(2n+3) {
|
||||||
|
h3 {
|
||||||
|
color: #f08d37;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
background: url('../../img/icons/faraon.svg') center 1px no-repeat;
|
||||||
|
background-size: 102%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
max-width: 940px;
|
||||||
|
margin: 20px auto 0;
|
||||||
|
color: #1e212b;
|
||||||
|
font-size: 24px;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin: 0;
|
||||||
|
color: #1e212b;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 40px;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 576px) {
|
||||||
|
.ent {
|
||||||
|
margin-top: 0;
|
||||||
|
padding-top: 40px !important;
|
||||||
|
padding-bottom: 0;
|
||||||
|
|
||||||
|
&::before, &::after {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-slider {
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-container {
|
||||||
|
h2 {
|
||||||
|
font-size: 28px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
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 {
|
||||||
|
// background-size: cover
|
||||||
|
|
||||||
|
&:nth-child(3n+1) {
|
||||||
|
h3 {
|
||||||
|
color: #5cbae9;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
background: url('../../img/icons/arkids.svg') center 1px no-repeat;
|
||||||
|
background-size: 360px 70px;
|
||||||
|
|
||||||
|
button {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(3n+2) {
|
||||||
|
h3 {
|
||||||
|
color: #f08d37;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
background: url('../../img/icons/faraon.svg') center 1px no-repeat;
|
||||||
|
background-size: 360px 70px;
|
||||||
|
|
||||||
|
button {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(3n) {
|
||||||
|
h3 {
|
||||||
|
color: #ff0000;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
background: url('../../img/icons/eger.svg') center 1px no-repeat !important;
|
||||||
|
background-size: 360px 70px;
|
||||||
|
|
||||||
|
button {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,116 +0,0 @@
|
|||||||
.footer
|
|
||||||
// margin-top: 50px
|
|
||||||
padding-bottom: 25px
|
|
||||||
padding-top: 25px
|
|
||||||
background-color: #3C3D41
|
|
||||||
font-family: 'PT Sans', sans-serif
|
|
||||||
// &::before
|
|
||||||
// content: ""
|
|
||||||
// display: block
|
|
||||||
// height: 60px
|
|
||||||
// background: #ffffff url('../img/icons/footer-line.svg') center bottom no-repeat
|
|
||||||
// background-size: 100% 60px
|
|
||||||
img
|
|
||||||
height: 80px
|
|
||||||
margin-right: auto
|
|
||||||
margin-left: auto
|
|
||||||
display: none
|
|
||||||
&-links
|
|
||||||
margin-top: 10px
|
|
||||||
ul
|
|
||||||
list-style: none
|
|
||||||
padding-inline-start: 0
|
|
||||||
&__menu
|
|
||||||
li
|
|
||||||
font-size: 20px
|
|
||||||
font-weight: 600
|
|
||||||
letter-spacing: 0.2px
|
|
||||||
// margin: 0 0 20px 0
|
|
||||||
text-align: center
|
|
||||||
color: #ffffff
|
|
||||||
span
|
|
||||||
cursor: pointer
|
|
||||||
&__submenu
|
|
||||||
// margin-top: 30px
|
|
||||||
overflow: hidden
|
|
||||||
// transition: 0.15s ease-in-out
|
|
||||||
li
|
|
||||||
font-size: 16px
|
|
||||||
letter-spacing: 0.1px
|
|
||||||
color: #ffffff
|
|
||||||
margin: 15px 0
|
|
||||||
a
|
|
||||||
color: #ffffff
|
|
||||||
font-weight: normal
|
|
||||||
&__hide
|
|
||||||
height: 0
|
|
||||||
&-social
|
|
||||||
text-align: center
|
|
||||||
h3
|
|
||||||
font-size: 20px
|
|
||||||
font-weight: 600
|
|
||||||
letter-spacing: 0.2px
|
|
||||||
margin: 0 0 0 0
|
|
||||||
color: #ffffff
|
|
||||||
ul
|
|
||||||
list-style: none
|
|
||||||
padding-inline-start: 0
|
|
||||||
li
|
|
||||||
&:first-child
|
|
||||||
margin-right: 20px
|
|
||||||
a
|
|
||||||
color: #ffffff
|
|
||||||
font-size: 30px
|
|
||||||
&-docs
|
|
||||||
margin-top: 25px
|
|
||||||
ul
|
|
||||||
list-style: none
|
|
||||||
padding-inline-start: 0
|
|
||||||
li
|
|
||||||
a
|
|
||||||
color: #ffffff
|
|
||||||
padding: 15px
|
|
||||||
font-size: 14px
|
|
||||||
letter-spacing: 0.1px
|
|
||||||
text-decoration: none
|
|
||||||
outline: 0
|
|
||||||
&-coop
|
|
||||||
text-align: center
|
|
||||||
color: #ffffff
|
|
||||||
&-open
|
|
||||||
a
|
|
||||||
color: #ffffff !important
|
|
||||||
text-decoration: none
|
|
||||||
&-some
|
|
||||||
display: flex
|
|
||||||
|
|
||||||
@media screen and (max-width: 480px)
|
|
||||||
.footer
|
|
||||||
margin-top: 0px
|
|
||||||
&::before
|
|
||||||
height: 30px
|
|
||||||
background-size: 100% 30px
|
|
||||||
img
|
|
||||||
width: 100%
|
|
||||||
height: auto
|
|
||||||
&-social
|
|
||||||
margin-top: 30px
|
|
||||||
h3
|
|
||||||
margin-bottom: 10px
|
|
||||||
&-links
|
|
||||||
margin-top: 0
|
|
||||||
&-docs
|
|
||||||
margin-top: 0
|
|
||||||
&__submenu
|
|
||||||
&__hide
|
|
||||||
height: 100%
|
|
||||||
li
|
|
||||||
font-size: 14px !important
|
|
||||||
|
|
||||||
|
|
||||||
&__menu
|
|
||||||
span
|
|
||||||
text-decoration: underline
|
|
||||||
font-size: 18px
|
|
||||||
h3
|
|
||||||
font-size: 18px !important
|
|
||||||
180
src/sass/parts/footer.scss
Normal file
180
src/sass/parts/footer.scss
Normal file
@ -0,0 +1,180 @@
|
|||||||
|
.footer { // margin-top: 50px
|
||||||
|
padding-top: 25px;
|
||||||
|
padding-bottom: 25px;
|
||||||
|
background-color: #3c3d41;
|
||||||
|
font-family: 'PT Sans', sans-serif;
|
||||||
|
// &::before
|
||||||
|
// content: ""
|
||||||
|
// display: block
|
||||||
|
// height: 60px
|
||||||
|
// background: #ffffff url('../img/icons/footer-line.svg') center bottom no-repeat
|
||||||
|
// background-size: 100% 60px
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: none;
|
||||||
|
height: 80px;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-links {
|
||||||
|
margin-top: 10px;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
padding-inline-start: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__menu {
|
||||||
|
li {
|
||||||
|
color: #ffffff;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 20px;
|
||||||
|
letter-spacing: 0.2px;
|
||||||
|
// margin: 0 0 20px 0
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
span {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__submenu { // margin-top: 30px
|
||||||
|
overflow: hidden;
|
||||||
|
// transition: 0.15s ease-in-out
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin: 15px 0;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 16px;
|
||||||
|
letter-spacing: 0.1px;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #ffffff;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__hide {
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-social {
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
margin: 0;
|
||||||
|
color: #ffffff;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 20px;
|
||||||
|
letter-spacing: 0.2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
padding-inline-start: 0;
|
||||||
|
|
||||||
|
li {
|
||||||
|
&:first-child {
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-docs {
|
||||||
|
margin-top: 25px;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
padding-inline-start: 0;
|
||||||
|
|
||||||
|
li {
|
||||||
|
a {
|
||||||
|
padding: 15px;
|
||||||
|
color: #ffffff;
|
||||||
|
outline: 0;
|
||||||
|
font-size: 14px;
|
||||||
|
letter-spacing: 0.1px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-coop {
|
||||||
|
color: #ffffff;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-open {
|
||||||
|
a {
|
||||||
|
color: #ffffff !important;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-some {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 480px) {
|
||||||
|
.footer {
|
||||||
|
margin-top: 0;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
height: 30px;
|
||||||
|
background-size: 100% 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-social {
|
||||||
|
margin-top: 30px;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-links {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-docs {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__submenu {
|
||||||
|
&__hide {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
font-size: 14px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__menu {
|
||||||
|
span {
|
||||||
|
font-size: 18px;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 18px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -1,447 +0,0 @@
|
|||||||
@import '../constansts'
|
|
||||||
|
|
||||||
.header-number
|
|
||||||
color: #fff
|
|
||||||
&:hover
|
|
||||||
color: #fff
|
|
||||||
|
|
||||||
.header
|
|
||||||
// padding-top: 10px
|
|
||||||
// padding-bottom: 10px
|
|
||||||
transition: 0.55s ease-in-out
|
|
||||||
max-width: 1440px
|
|
||||||
margin: 0 auto
|
|
||||||
&-container
|
|
||||||
background-color: #dc3545
|
|
||||||
overflow: visible !important
|
|
||||||
transition: 0.35s ease-in-out
|
|
||||||
// position: fixed
|
|
||||||
top: 0
|
|
||||||
right: 0
|
|
||||||
left: 0
|
|
||||||
z-index: 99999
|
|
||||||
// background: #ffffff
|
|
||||||
margin-left: 0
|
|
||||||
margin-right: 0
|
|
||||||
max-width: 1920px !important
|
|
||||||
width: 100%
|
|
||||||
padding: 0px 250px
|
|
||||||
height: 70px
|
|
||||||
&-menu__hide
|
|
||||||
transform: translateY(-180px)
|
|
||||||
&-info
|
|
||||||
&__city
|
|
||||||
margin-right: 30px
|
|
||||||
color: $main-color
|
|
||||||
display: flex
|
|
||||||
cursor: pointer
|
|
||||||
i
|
|
||||||
font-size: 26px
|
|
||||||
margin-right: 10px
|
|
||||||
span
|
|
||||||
border-bottom: 1px dashed $main-color
|
|
||||||
color: $main-color
|
|
||||||
font-size: 20px
|
|
||||||
&__logo
|
|
||||||
img
|
|
||||||
height: 70px
|
|
||||||
&:last-child
|
|
||||||
display: none
|
|
||||||
&__btns_right
|
|
||||||
padding-right: 25px
|
|
||||||
padding-left: 25px
|
|
||||||
a:first-child
|
|
||||||
margin-right: 10px
|
|
||||||
.order-holiday
|
|
||||||
&:hover
|
|
||||||
background-color: #fff
|
|
||||||
color: $main-color
|
|
||||||
.social-links
|
|
||||||
a
|
|
||||||
font-size: 22px
|
|
||||||
border-radius: 50%
|
|
||||||
background-color: #ffffff
|
|
||||||
width: 40px
|
|
||||||
height: 40px
|
|
||||||
display: flex
|
|
||||||
justify-content: center
|
|
||||||
align-items: center
|
|
||||||
color: $main-color
|
|
||||||
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
|
|
||||||
text-decoration: none
|
|
||||||
margin: 0 5px
|
|
||||||
&:hover
|
|
||||||
background-color: #fff
|
|
||||||
color: $main-color
|
|
||||||
border: 1px solid $main-color
|
|
||||||
&-navmenu
|
|
||||||
&__list
|
|
||||||
list-style: none
|
|
||||||
padding-inline-start: 0
|
|
||||||
&__item
|
|
||||||
position: relative
|
|
||||||
cursor: pointer
|
|
||||||
&:hover
|
|
||||||
.header-submenu
|
|
||||||
display: block
|
|
||||||
a
|
|
||||||
text-decoration: none
|
|
||||||
.fa-bars
|
|
||||||
display: none
|
|
||||||
a
|
|
||||||
color: #999
|
|
||||||
font-size: 18px
|
|
||||||
i
|
|
||||||
margin-right: 10px
|
|
||||||
&:hover
|
|
||||||
color: darken(#999, 20%)
|
|
||||||
|
|
||||||
.sub-menu
|
|
||||||
display: none
|
|
||||||
z-index: 9
|
|
||||||
// width: 138px
|
|
||||||
width: 100%
|
|
||||||
position: absolute
|
|
||||||
top: 57px
|
|
||||||
right: 0
|
|
||||||
left: auto !important
|
|
||||||
padding-left: 0
|
|
||||||
font-family: 'Museo Regular'
|
|
||||||
background-color: $main-color
|
|
||||||
&__layout
|
|
||||||
padding-top: 20px
|
|
||||||
background-color: #ffffff
|
|
||||||
ul
|
|
||||||
background-color: #ffffff
|
|
||||||
list-style: none
|
|
||||||
padding-inline-start: 0
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
align-items: flex-start
|
|
||||||
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1)
|
|
||||||
li
|
|
||||||
// width: 100%
|
|
||||||
padding: 5px 10px
|
|
||||||
background: #f2f2f2
|
|
||||||
border-bottom: 1px solid rgba(0,0,0,.05)
|
|
||||||
a
|
|
||||||
font-size: 16px !important
|
|
||||||
width: 100%
|
|
||||||
display: block
|
|
||||||
padding: 0
|
|
||||||
text-align: left
|
|
||||||
color: $main-color
|
|
||||||
&:hover
|
|
||||||
background-color: #f2f2f2
|
|
||||||
a
|
|
||||||
color: #f2f2f2 !important
|
|
||||||
&.header-submenu__item-close
|
|
||||||
display: none
|
|
||||||
margin-bottom: 10px
|
|
||||||
list-style: none
|
|
||||||
line-height: 36px
|
|
||||||
// padding: 0 20px
|
|
||||||
margin: 0
|
|
||||||
font-size: 14px
|
|
||||||
font-weight: normal
|
|
||||||
color: #606266
|
|
||||||
&:hover
|
|
||||||
background: $main-color
|
|
||||||
a
|
|
||||||
color: #f2f2f2 !important
|
|
||||||
a
|
|
||||||
color: #606266
|
|
||||||
font-size: 18px
|
|
||||||
width: 100%
|
|
||||||
|
|
||||||
button
|
|
||||||
padding: 3px 10px
|
|
||||||
font-size: 18px !important
|
|
||||||
|
|
||||||
.popover
|
|
||||||
margin-top: 20px !important
|
|
||||||
z-index: 999999
|
|
||||||
|
|
||||||
.header-navmenu__item
|
|
||||||
width: 16.6%
|
|
||||||
display: flex
|
|
||||||
justify-content: center
|
|
||||||
border-right: 2px solid #fff
|
|
||||||
transition: 0.2s
|
|
||||||
color: $main-color
|
|
||||||
background: #f2f2f2
|
|
||||||
&:first-child
|
|
||||||
border-top-left-radius: 12px
|
|
||||||
border-bottom-left-radius: 12px
|
|
||||||
&:last-child
|
|
||||||
border-right: none
|
|
||||||
width: calc(100% - 16.6%*5)
|
|
||||||
border-top-right-radius: 12px
|
|
||||||
border-bottom-right-radius: 12px
|
|
||||||
&.current-menu-item
|
|
||||||
background: #f2f2f2
|
|
||||||
// border-bottom: 2px solid $main-color
|
|
||||||
a
|
|
||||||
color: $main-color
|
|
||||||
a
|
|
||||||
color: $main-color
|
|
||||||
width: 100%
|
|
||||||
text-align: center
|
|
||||||
padding: 15px
|
|
||||||
a:hover
|
|
||||||
text-decoration: none
|
|
||||||
&:hover
|
|
||||||
background: $main-color
|
|
||||||
border-bottom-right-radius: 0
|
|
||||||
a
|
|
||||||
color: #f2f2f2
|
|
||||||
|
|
||||||
.header-navmenu__list
|
|
||||||
margin-bottom: 0
|
|
||||||
|
|
||||||
.header-submenu
|
|
||||||
//right: -10px !important
|
|
||||||
|
|
||||||
.header-navmenu__container
|
|
||||||
overflow: visible !important
|
|
||||||
padding: 15px 350px
|
|
||||||
background: #fff
|
|
||||||
.header-navmenu
|
|
||||||
box-shadow: 0 2px 12px 0 rgba(153, 153, 153, 0.33)
|
|
||||||
|
|
||||||
|
|
||||||
.header-wrapper
|
|
||||||
position: sticky
|
|
||||||
top: 0
|
|
||||||
left: 0
|
|
||||||
right: 0
|
|
||||||
z-index: 99
|
|
||||||
transition: 0.3s ease-in-out
|
|
||||||
|
|
||||||
.sub-menu
|
|
||||||
.header-navmenu__item
|
|
||||||
background: none
|
|
||||||
|
|
||||||
.header-navmenu__list
|
|
||||||
&::before
|
|
||||||
display: none !important
|
|
||||||
&::after
|
|
||||||
display: none !important
|
|
||||||
|
|
||||||
@media screen and (max-width: 1200px)
|
|
||||||
.header-container
|
|
||||||
width: 100%
|
|
||||||
padding: 0 100px
|
|
||||||
.header-info__logo
|
|
||||||
order: -1
|
|
||||||
img
|
|
||||||
height: 40px
|
|
||||||
.header
|
|
||||||
margin-left: 0
|
|
||||||
margin-right: 0
|
|
||||||
max-width: 100%
|
|
||||||
padding-left: 20px
|
|
||||||
padding-right: 20px
|
|
||||||
&-container
|
|
||||||
padding: 0
|
|
||||||
max-width: 100% !important
|
|
||||||
&-info
|
|
||||||
&__logo
|
|
||||||
img
|
|
||||||
display: none
|
|
||||||
&:last-child
|
|
||||||
display: block
|
|
||||||
.social-links
|
|
||||||
display: none
|
|
||||||
|
|
||||||
@media screen and (max-width: 770px)
|
|
||||||
.header-info__logo
|
|
||||||
img
|
|
||||||
&:first-child
|
|
||||||
display: none
|
|
||||||
&:last-child
|
|
||||||
display: block
|
|
||||||
height: 55px
|
|
||||||
.header-navmenu__item a, .header-info__city span, .header button.order-holiday
|
|
||||||
font-size: 12px !important
|
|
||||||
.header button.order-holiday
|
|
||||||
line-height: 1.15
|
|
||||||
|
|
||||||
.header-navmenu
|
|
||||||
&__list
|
|
||||||
max-width: 100%
|
|
||||||
margin: 0
|
|
||||||
&__item
|
|
||||||
a
|
|
||||||
font-size: 16px
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
align-items: center
|
|
||||||
&:last-child
|
|
||||||
.fa-question-circle
|
|
||||||
display: none
|
|
||||||
span
|
|
||||||
display: none
|
|
||||||
.fa-bars
|
|
||||||
display: block
|
|
||||||
.header-submenu__item-close
|
|
||||||
display: block !important
|
|
||||||
|
|
||||||
@media screen and (max-width: 576px)
|
|
||||||
.header-phone-number-block
|
|
||||||
display: none
|
|
||||||
.header
|
|
||||||
.col-3
|
|
||||||
padding: 0
|
|
||||||
.col-4
|
|
||||||
padding: 5px
|
|
||||||
.ent
|
|
||||||
padding-top: 40px !important
|
|
||||||
.header-navmenu__item
|
|
||||||
&:hover
|
|
||||||
background: #f2f2f2
|
|
||||||
|
|
||||||
.header-navmenu__item:hover a
|
|
||||||
color: #999 !important
|
|
||||||
|
|
||||||
.header-number
|
|
||||||
display: none
|
|
||||||
.header
|
|
||||||
padding-left: 0px
|
|
||||||
padding-right: 0px
|
|
||||||
&-info
|
|
||||||
font-size: 14px
|
|
||||||
max-width: 100%
|
|
||||||
margin: 0 auto
|
|
||||||
padding: 0 7px 0 0
|
|
||||||
button
|
|
||||||
font-size: 12px
|
|
||||||
padding: 5px
|
|
||||||
&-navmenu
|
|
||||||
// padding-bottom: 5px
|
|
||||||
&__item
|
|
||||||
a
|
|
||||||
font-size: 12px
|
|
||||||
i
|
|
||||||
margin-right: 0 !important
|
|
||||||
.fa-bars
|
|
||||||
font-size: 26px !important
|
|
||||||
&:last-child:hover
|
|
||||||
.header-submenu
|
|
||||||
display: block
|
|
||||||
&__list
|
|
||||||
padding-left: 0px
|
|
||||||
&-container
|
|
||||||
// box-shadow: 0 10px 10px -10px rgba(0,0,0,.25)
|
|
||||||
padding: 0 0px
|
|
||||||
&-menu__hide
|
|
||||||
transform: translateY(-60px)
|
|
||||||
button.order-holiday
|
|
||||||
margin-right: 0 !important
|
|
||||||
width: 125px
|
|
||||||
transform: translateX(-10px)
|
|
||||||
// &-submenu
|
|
||||||
// width: 100vw
|
|
||||||
// height: 100vh
|
|
||||||
// z-index: -1
|
|
||||||
// top: 0px
|
|
||||||
// ul
|
|
||||||
// flex-grow: 100%
|
|
||||||
// height: 100%
|
|
||||||
// display: flex
|
|
||||||
// flex-direction: column
|
|
||||||
// // justify-content: flex-start
|
|
||||||
// transform: translareY(10px)
|
|
||||||
// background-color: #ffffff
|
|
||||||
// align-items: center
|
|
||||||
// li
|
|
||||||
// width: 100%
|
|
||||||
// text-align: center
|
|
||||||
// border-bottom: 1px solid #999
|
|
||||||
// // margin-bottom: 20px
|
|
||||||
// padding: 20px
|
|
||||||
// a
|
|
||||||
// &:nth-child(2)
|
|
||||||
// li
|
|
||||||
// text-align: end
|
|
||||||
&-submenu
|
|
||||||
position: absolute !important
|
|
||||||
top: 40px !important
|
|
||||||
width: 100vw !important
|
|
||||||
height: 100vh !important
|
|
||||||
justify-content: flex-start !important
|
|
||||||
li
|
|
||||||
width: 100%
|
|
||||||
text-align: center
|
|
||||||
border-bottom: 1px solid #f2f2f2
|
|
||||||
padding: 10px 10px !important
|
|
||||||
margin: 0
|
|
||||||
a
|
|
||||||
font-size: 14px !important
|
|
||||||
&__layout
|
|
||||||
display: none
|
|
||||||
&-close-sub
|
|
||||||
li
|
|
||||||
text-align: end !important
|
|
||||||
|
|
||||||
&-navmenu
|
|
||||||
margin-top: 0
|
|
||||||
&__item
|
|
||||||
padding: 10px !important
|
|
||||||
width: 20% !important
|
|
||||||
border: none
|
|
||||||
.header-navmenu__item .fa-bars
|
|
||||||
font-size: 20px !important
|
|
||||||
.header-container
|
|
||||||
position: sticky
|
|
||||||
top: 0
|
|
||||||
z-index: 99999
|
|
||||||
background: #ffffff
|
|
||||||
transition: 0.2s ease-in-out
|
|
||||||
// transform: translateY(-65px)
|
|
||||||
|
|
||||||
.header-info__btns_right
|
|
||||||
padding-right: 0 !important
|
|
||||||
.header-navmenu .sub-menu li a
|
|
||||||
text-align: center
|
|
||||||
.header-navmenu__item a
|
|
||||||
padding: 0 //10.10.2020
|
|
||||||
.header-wrapper
|
|
||||||
background: #fff
|
|
||||||
.header-navmenu__container
|
|
||||||
padding: 0
|
|
||||||
.header-navmenu__item a
|
|
||||||
color: #999
|
|
||||||
.header-navmenu__item
|
|
||||||
background: none
|
|
||||||
.header-navmenu__container .header-navmenu
|
|
||||||
// box-shadow: none
|
|
||||||
box-shadow: 0 10px 10px -10px rgba(0,0,0,.25)
|
|
||||||
.header-info__city
|
|
||||||
display: none
|
|
||||||
.header button
|
|
||||||
font-size: 12px !important
|
|
||||||
border-radius: 10px
|
|
||||||
width: 110px
|
|
||||||
.header-navmenu__list
|
|
||||||
justify-content: space-between
|
|
||||||
.header-info__btns_left
|
|
||||||
padding: 0
|
|
||||||
.header-navmenu__item:hover .header-submenu
|
|
||||||
display: none
|
|
||||||
left: -83vw
|
|
||||||
background: #f2f2f2
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@media screen and (min-width: 576px) and (max-width: 1700px)
|
|
||||||
.header-info__logo img
|
|
||||||
height: 60px
|
|
||||||
.header-container
|
|
||||||
padding: 0 50px
|
|
||||||
.header-navmenu__container
|
|
||||||
padding: 15px 50px
|
|
||||||
.header button
|
|
||||||
// padding: 3px 0
|
|
||||||
.header-phone-number-block
|
|
||||||
padding: 0
|
|
||||||
580
src/sass/parts/header.scss
Normal file
580
src/sass/parts/header.scss
Normal file
@ -0,0 +1,580 @@
|
|||||||
|
@import '../constansts';
|
||||||
|
|
||||||
|
.header-number {
|
||||||
|
color: #ffffff;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
max-width: 1440px;
|
||||||
|
margin: 0 auto;
|
||||||
|
transition: 0.55s ease-in-out;
|
||||||
|
|
||||||
|
&-container {
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 99999;
|
||||||
|
overflow: visible !important;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1920px !important;
|
||||||
|
height: 70px;
|
||||||
|
margin-right: 0;
|
||||||
|
margin-left: 0;
|
||||||
|
padding: 0 250px;
|
||||||
|
background-color: #dc3545;
|
||||||
|
transition: 0.35s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-menu__hide {
|
||||||
|
transform: translateY(-180px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&-info {
|
||||||
|
&__city {
|
||||||
|
display: flex;
|
||||||
|
margin-right: 30px;
|
||||||
|
color: $main-color;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
i {
|
||||||
|
margin-right: 10px;
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
border-bottom: 1px dashed $main-color;
|
||||||
|
color: $main-color;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__logo {
|
||||||
|
img {
|
||||||
|
height: 70px;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__btns_right {
|
||||||
|
padding-right: 25px;
|
||||||
|
padding-left: 25px;
|
||||||
|
|
||||||
|
a:first-child {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-holiday {
|
||||||
|
&:hover {
|
||||||
|
background-color: #ffffff;
|
||||||
|
color: $main-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-links {
|
||||||
|
a {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
margin: 0 5px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #ffffff;
|
||||||
|
color: $main-color;
|
||||||
|
font-size: 22px;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border: 1px solid $main-color;
|
||||||
|
background-color: #ffffff;
|
||||||
|
color: $main-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-navmenu {
|
||||||
|
&__list {
|
||||||
|
margin-bottom: 0;
|
||||||
|
list-style: none;
|
||||||
|
padding-inline-start: 0;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
width: 16.6%;
|
||||||
|
border-right: 2px solid #ffffff;
|
||||||
|
background: #f2f2f2;
|
||||||
|
color: $main-color;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: 0.2s;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
border-top-left-radius: 12px;
|
||||||
|
border-bottom-left-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
width: calc(100% - 16.6%*5);
|
||||||
|
border-right: 0;
|
||||||
|
border-top-right-radius: 12px;
|
||||||
|
border-bottom-right-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.current-menu-item {
|
||||||
|
background: #f2f2f2;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $main-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
width: 100%;
|
||||||
|
padding: 15px;
|
||||||
|
color: $main-color;
|
||||||
|
font-size: 18px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
i {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: darken(#999999, 20%);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
background: $main-color;
|
||||||
|
|
||||||
|
.header-submenu {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #f2f2f2;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-bars {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-menu {
|
||||||
|
position: absolute;
|
||||||
|
top: 57px;
|
||||||
|
right: 0;
|
||||||
|
left: auto !important;
|
||||||
|
z-index: 9;
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
// width: 138px
|
||||||
|
width: 100%;
|
||||||
|
padding-left: 0;
|
||||||
|
background-color: $main-color;
|
||||||
|
font-family: 'Museo Regular', sans-serif;
|
||||||
|
|
||||||
|
&__layout {
|
||||||
|
padding-top: 20px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
background-color: #ffffff;
|
||||||
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||||
|
list-style: none;
|
||||||
|
padding-inline-start: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin: 0 0 10px;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||||
|
background: #f2f2f2;
|
||||||
|
color: #606266;
|
||||||
|
list-style: none;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 36px;
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0;
|
||||||
|
color: $main-color;
|
||||||
|
font-size: 16px !important;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #f2f2f2;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #f2f2f2 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.header-submenu__item-close {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
width: 100%;
|
||||||
|
color: #606266;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
padding: 3px 10px;
|
||||||
|
font-size: 18px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.popover {
|
||||||
|
z-index: 999999;
|
||||||
|
margin-top: 20px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-submenu {
|
||||||
|
//right: -10px !important
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-navmenu__container {
|
||||||
|
overflow: visible !important;
|
||||||
|
padding: 15px 350px;
|
||||||
|
background: #ffffff;
|
||||||
|
|
||||||
|
.header-navmenu {
|
||||||
|
box-shadow: 0 2px 12px 0 rgba(153, 153, 153, 0.33);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-wrapper {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 99;
|
||||||
|
transition: 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-menu {
|
||||||
|
.header-navmenu__item {
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1200px) {
|
||||||
|
.header {
|
||||||
|
max-width: 100%;
|
||||||
|
margin-right: 0;
|
||||||
|
margin-left: 0;
|
||||||
|
padding-right: 20px;
|
||||||
|
padding-left: 20px;
|
||||||
|
|
||||||
|
&-container {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100% !important;
|
||||||
|
padding: 0 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-info {
|
||||||
|
&__logo {
|
||||||
|
order: -1;
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: none;
|
||||||
|
height: 40px;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-links {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 770px) {
|
||||||
|
.header-info__logo {
|
||||||
|
img {
|
||||||
|
&:first-child {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
display: block;
|
||||||
|
height: 55px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-navmenu__item a, .header-info__city span, .header button.order-holiday {
|
||||||
|
font-size: 12px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header button.order-holiday {
|
||||||
|
line-height: 1.15;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-navmenu {
|
||||||
|
&__list {
|
||||||
|
max-width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__item {
|
||||||
|
a {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
.fa-question-circle {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-bars {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-submenu__item-close {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 576px) {
|
||||||
|
.header-phone-number-block {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ent {
|
||||||
|
padding-top: 40px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-navmenu__item {
|
||||||
|
width: 20% !important;
|
||||||
|
padding: 10px !important;
|
||||||
|
border: 0;
|
||||||
|
background: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #f2f2f2;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
padding: 0;
|
||||||
|
color: #999999;
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
|
|
||||||
|
i {
|
||||||
|
margin-right: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-bars {
|
||||||
|
font-size: 20px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child:hover {
|
||||||
|
.header-submenu {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-navmenu__item:hover a {
|
||||||
|
color: #999999 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-number {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
padding-right: 0;
|
||||||
|
padding-left: 0;
|
||||||
|
|
||||||
|
.col-3 {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-4 {
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-info {
|
||||||
|
max-width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 7px 0 0;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
width: 110px;
|
||||||
|
padding: 5px;
|
||||||
|
border-radius: 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-navmenu {
|
||||||
|
margin-top: 0;
|
||||||
|
|
||||||
|
&__list {
|
||||||
|
justify-content: space-between;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-container {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 99999;
|
||||||
|
padding: 0;
|
||||||
|
background: #ffffff;
|
||||||
|
transition: 0.2s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-menu__hide {
|
||||||
|
transform: translateY(-60px);
|
||||||
|
}
|
||||||
|
|
||||||
|
button.order-holiday {
|
||||||
|
width: 125px;
|
||||||
|
margin-right: 0 !important;
|
||||||
|
transform: translateX(-10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&-submenu {
|
||||||
|
position: absolute !important;
|
||||||
|
top: 40px !important;
|
||||||
|
justify-content: flex-start !important;
|
||||||
|
width: 100vw !important;
|
||||||
|
height: 100vh !important;
|
||||||
|
|
||||||
|
li {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 10px !important;
|
||||||
|
border-bottom: 1px solid #f2f2f2;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-size: 14px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__layout {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-close-sub {
|
||||||
|
li {
|
||||||
|
text-align: end !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-info__btns_right {
|
||||||
|
padding-right: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-navmenu .sub-menu li a {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-wrapper {
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-navmenu__container {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-navmenu__container .header-navmenu {
|
||||||
|
// box-shadow: none
|
||||||
|
box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-info__city {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-info__btns_left {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-navmenu__item:hover .header-submenu {
|
||||||
|
left: -83vw;
|
||||||
|
display: none;
|
||||||
|
background: #f2f2f2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 576px) and (max-width: 1700px) {
|
||||||
|
.header-info__logo img {
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-container {
|
||||||
|
padding: 0 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-navmenu__container {
|
||||||
|
padding: 15px 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header button {
|
||||||
|
// padding: 3px 0
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-phone-number-block {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,69 +0,0 @@
|
|||||||
.main
|
|
||||||
// margin-top: 133px
|
|
||||||
// padding-top: 50px
|
|
||||||
&-text
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
h1
|
|
||||||
margin-top: 20px
|
|
||||||
margin-bottom: 25px
|
|
||||||
// font-family: 'Museo Bold'
|
|
||||||
font-family: 'PT Sans'
|
|
||||||
font-size: 45px
|
|
||||||
font-weight: 600
|
|
||||||
letter-spacing: 0.6px
|
|
||||||
p
|
|
||||||
font-size: 24px
|
|
||||||
line-height: 1.42
|
|
||||||
letter-spacing: 0.3px
|
|
||||||
font-family: 'PT Sans'
|
|
||||||
margin-bottom: 45px
|
|
||||||
button
|
|
||||||
padding: 14px 20px
|
|
||||||
font-size: 18px
|
|
||||||
font-weight: 600
|
|
||||||
letter-spacing: 1.2px
|
|
||||||
text-align: center
|
|
||||||
text-transform: uppercase
|
|
||||||
box-shadow: 0 2px 12px 0 rgba(56, 72, 95, 0.49)
|
|
||||||
margin-right: auto
|
|
||||||
margin-left: auto
|
|
||||||
border-radius: 44px
|
|
||||||
min-width: 165px
|
|
||||||
a
|
|
||||||
align-self: flex-start
|
|
||||||
img
|
|
||||||
height: 70px
|
|
||||||
&-img
|
|
||||||
overflow: hidden
|
|
||||||
img
|
|
||||||
transform: translateY(-30px)
|
|
||||||
max-width: 100%
|
|
||||||
|
|
||||||
|
|
||||||
@media screen and (max-width: 770px)
|
|
||||||
|
|
||||||
.main
|
|
||||||
&-text
|
|
||||||
align-items: center
|
|
||||||
text-align: center
|
|
||||||
img
|
|
||||||
// max-height: 30px
|
|
||||||
max-width: 100%
|
|
||||||
h1
|
|
||||||
font-size: 35px
|
|
||||||
a
|
|
||||||
align-self: center
|
|
||||||
&-img
|
|
||||||
display: none
|
|
||||||
|
|
||||||
@media screen and (max-width: 480px)
|
|
||||||
|
|
||||||
.main
|
|
||||||
padding-top: 0
|
|
||||||
margin-top: 105px
|
|
||||||
.owl-dots
|
|
||||||
position: relative
|
|
||||||
bottom: 25px
|
|
||||||
img
|
|
||||||
max-height: 180px
|
|
||||||
165
src/sass/parts/main-block.scss
Normal file
165
src/sass/parts/main-block.scss
Normal file
@ -0,0 +1,165 @@
|
|||||||
|
@import '../constansts';
|
||||||
|
|
||||||
|
.header-number {
|
||||||
|
color: #ffffff;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
&-navmenu {
|
||||||
|
.sub-menu {
|
||||||
|
li {
|
||||||
|
margin: 0 0 10px;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||||
|
background: #f2f2f2;
|
||||||
|
color: #606266;
|
||||||
|
list-style: none;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $main-color;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #f2f2f2 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
width: 100%;
|
||||||
|
color: #606266;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
padding: 3px 10px;
|
||||||
|
font-size: 18px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.popover {
|
||||||
|
z-index: 999999;
|
||||||
|
margin-top: 20px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-navmenu__item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
width: 16.6%;
|
||||||
|
border-right: 2px solid #ffffff;
|
||||||
|
background: #f2f2f2;
|
||||||
|
color: $main-color;
|
||||||
|
transition: 0.2s;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
border-top-left-radius: 12px;
|
||||||
|
border-bottom-left-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
width: calc(100% - 16.6%*5);
|
||||||
|
border-right: 0;
|
||||||
|
border-top-right-radius: 12px;
|
||||||
|
border-bottom-right-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.current-menu-item {
|
||||||
|
background: #f2f2f2;
|
||||||
|
|
||||||
|
// border-bottom: 2px solid $main-color
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $main-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
width: 100%;
|
||||||
|
padding: 15px;
|
||||||
|
color: $main-color;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
background: $main-color;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #f2f2f2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-navmenu__list {
|
||||||
|
margin-bottom: 0;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-submenu {
|
||||||
|
//right: -10px !important
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-navmenu__container {
|
||||||
|
overflow: visible !important;
|
||||||
|
padding: 15px 350px;
|
||||||
|
background: #ffffff;
|
||||||
|
|
||||||
|
.header-navmenu {
|
||||||
|
box-shadow: 0 2px 12px 0 rgba(153, 153, 153, 0.33);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-wrapper {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 99;
|
||||||
|
transition: 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-menu {
|
||||||
|
.header-navmenu__item {
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 576px) and (max-width: 1700px) {
|
||||||
|
.header-info__logo img {
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-container {
|
||||||
|
padding: 0 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-navmenu__container {
|
||||||
|
padding: 15px 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header button {
|
||||||
|
// padding: 3px 0
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-phone-number-block {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,77 +0,0 @@
|
|||||||
@import '../constansts'
|
|
||||||
|
|
||||||
.map-block
|
|
||||||
font-family: 'PT Sans', sans-serif
|
|
||||||
padding-bottom: 20px
|
|
||||||
&__home
|
|
||||||
padding-bottom: 0px
|
|
||||||
|
|
||||||
&__layout
|
|
||||||
// background-color: #f2f2f2
|
|
||||||
h2
|
|
||||||
font-size: 40px
|
|
||||||
font-weight: 600
|
|
||||||
letter-spacing: 0.5px
|
|
||||||
text-align: center
|
|
||||||
color: #1e212b
|
|
||||||
line-height: normal
|
|
||||||
&-container
|
|
||||||
margin-top: 50px
|
|
||||||
display: flex
|
|
||||||
justify-content: center
|
|
||||||
align-items: flex-start
|
|
||||||
max-width: 1440px !important
|
|
||||||
flex-wrap: wrap
|
|
||||||
&__text
|
|
||||||
ul
|
|
||||||
list-style: none
|
|
||||||
li
|
|
||||||
font-size: 24px
|
|
||||||
font-weight: 600
|
|
||||||
letter-spacing: 0.3px
|
|
||||||
color: #363943
|
|
||||||
margin-bottom: 40px
|
|
||||||
i
|
|
||||||
font-size: 27px
|
|
||||||
margin-right: 25px
|
|
||||||
color: $main-color
|
|
||||||
a
|
|
||||||
color: inherit
|
|
||||||
text-decoration: none
|
|
||||||
span
|
|
||||||
color: $main-color
|
|
||||||
text-transform: uppercase
|
|
||||||
transform: translateX(100px)
|
|
||||||
display: block
|
|
||||||
// text-align: center
|
|
||||||
|
|
||||||
@media screen and (max-width: 770px)
|
|
||||||
.map-block
|
|
||||||
&__yandex
|
|
||||||
&>ymaps
|
|
||||||
max-height: 600px !important
|
|
||||||
&__text
|
|
||||||
width: 100%
|
|
||||||
li
|
|
||||||
font-size: 18px !important
|
|
||||||
i
|
|
||||||
font-size: 18px !important
|
|
||||||
|
|
||||||
|
|
||||||
@media screen and (max-width: 480px)
|
|
||||||
.map-block
|
|
||||||
&__yandex
|
|
||||||
&>ymaps
|
|
||||||
max-width: 375px !important
|
|
||||||
width: 100%
|
|
||||||
height: 400px !important
|
|
||||||
&__text
|
|
||||||
padding-top: 20px
|
|
||||||
ul
|
|
||||||
padding-inline-start: 0
|
|
||||||
li
|
|
||||||
font-size: 18px
|
|
||||||
margin-bottom: 15px
|
|
||||||
font-weight: normal
|
|
||||||
&__layout
|
|
||||||
padding-top: 25px
|
|
||||||
114
src/sass/parts/map-block.scss
Normal file
114
src/sass/parts/map-block.scss
Normal file
@ -0,0 +1,114 @@
|
|||||||
|
@import '../constansts';
|
||||||
|
|
||||||
|
.map-block {
|
||||||
|
padding-bottom: 20px;
|
||||||
|
font-family: 'PT Sans', sans-serif;
|
||||||
|
|
||||||
|
&__home {
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
color: #1e212b;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 40px;
|
||||||
|
line-height: normal;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-container {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
max-width: 1440px !important;
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
color: #363943;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 24px;
|
||||||
|
letter-spacing: 0.3px;
|
||||||
|
|
||||||
|
i {
|
||||||
|
margin-right: 25px;
|
||||||
|
color: $main-color;
|
||||||
|
font-size: 27px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
color: $main-color;
|
||||||
|
text-transform: uppercase;
|
||||||
|
transform: translateX(100px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// text-align: center
|
||||||
|
|
||||||
|
@media screen and (max-width: 770px) {
|
||||||
|
.map-block {
|
||||||
|
&__yandex {
|
||||||
|
> ymaps {
|
||||||
|
max-height: 600px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
li {
|
||||||
|
font-size: 18px !important;
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 18px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 480px) {
|
||||||
|
.map-block {
|
||||||
|
&__yandex {
|
||||||
|
> ymaps {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 375px !important;
|
||||||
|
height: 400px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
padding-top: 20px;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
padding-inline-start: 0;
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__layout {
|
||||||
|
padding-top: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,83 +0,0 @@
|
|||||||
.var
|
|
||||||
&-line
|
|
||||||
max-width: 1440px
|
|
||||||
margin: 0 auto
|
|
||||||
&-item
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
align-items: center
|
|
||||||
margin-bottom: 40px
|
|
||||||
img
|
|
||||||
border-radius: 32px
|
|
||||||
box-shadow: 0 11px 20px 0 rgba(41, 50, 76, 0.31)
|
|
||||||
height: 257px
|
|
||||||
width: 257px
|
|
||||||
span
|
|
||||||
max-width: 257px
|
|
||||||
font-family: 'PT Sans', sans-serif
|
|
||||||
font-size: 18px
|
|
||||||
text-align: center
|
|
||||||
color: #000000
|
|
||||||
margin: 25px 0 0 0
|
|
||||||
line-height: 1.15
|
|
||||||
|
|
||||||
@media screen and (max-width: 1200px)
|
|
||||||
.var-item
|
|
||||||
span
|
|
||||||
font-size: 16px
|
|
||||||
.var-line
|
|
||||||
height: auto
|
|
||||||
.var-line
|
|
||||||
.col-lg-4
|
|
||||||
order: 1
|
|
||||||
&:nth-child(1)
|
|
||||||
order: 1
|
|
||||||
&:nth-child(2)
|
|
||||||
order: 2
|
|
||||||
&:nth-child(3)
|
|
||||||
order: 3
|
|
||||||
&:nth-child(4)
|
|
||||||
order: 6
|
|
||||||
&:nth-child(5)
|
|
||||||
order: 5
|
|
||||||
&:nth-child(6)
|
|
||||||
order: 4
|
|
||||||
&:nth-child(7)
|
|
||||||
order: 7
|
|
||||||
&:nth-child(8)
|
|
||||||
order: 8
|
|
||||||
&:nth-child(9)
|
|
||||||
order: 8
|
|
||||||
|
|
||||||
@media screen and (max-width: 576px)
|
|
||||||
.callback-modal__body
|
|
||||||
h2
|
|
||||||
font-size: 18px !important
|
|
||||||
.var-item
|
|
||||||
img
|
|
||||||
height: auto
|
|
||||||
max-width: 100%
|
|
||||||
|
|
||||||
@media screen and (min-width: 1200px)
|
|
||||||
.var-line
|
|
||||||
background: url('../../img/holiday/icons/scenario-path.svg') top left no-repeat
|
|
||||||
margin-bottom: 50px
|
|
||||||
padding-bottom: 30px
|
|
||||||
.row
|
|
||||||
.col-lg-4
|
|
||||||
&:nth-child(1)
|
|
||||||
transform: translateX(0px) translateY(-30px)
|
|
||||||
&:nth-child(2)
|
|
||||||
transform: translateX(-35px) translateY(75px)
|
|
||||||
&:nth-child(3)
|
|
||||||
transform: translateX(-85px) translateY(-45px)
|
|
||||||
&:nth-child(4)
|
|
||||||
transform: translateX(125px) translateY(30px)
|
|
||||||
&:nth-child(5)
|
|
||||||
transform: translateX(50px) translateY(90px)
|
|
||||||
&:nth-child(6)
|
|
||||||
transform: translateX(10px) translateY(-45px)
|
|
||||||
&:nth-child(7)
|
|
||||||
transform: translateX(-10px) translateY(30px)
|
|
||||||
&:nth-child(8)
|
|
||||||
transform: translateX(10px) translateY(80px)
|
|
||||||
143
src/sass/parts/options.scss
Normal file
143
src/sass/parts/options.scss
Normal file
@ -0,0 +1,143 @@
|
|||||||
|
.var {
|
||||||
|
&-line {
|
||||||
|
max-width: 1440px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 257px;
|
||||||
|
height: 257px;
|
||||||
|
border-radius: 32px;
|
||||||
|
box-shadow: 0 11px 20px 0 rgba(41, 50, 76, 0.31);
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
max-width: 257px;
|
||||||
|
margin: 25px 0 0;
|
||||||
|
color: #000000;
|
||||||
|
font-size: 18px;
|
||||||
|
font-family: 'PT Sans', sans-serif;
|
||||||
|
line-height: 1.15;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1200px) {
|
||||||
|
.var-item {
|
||||||
|
span {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.var-line {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.var-line {
|
||||||
|
.col-lg-4 {
|
||||||
|
order: 1;
|
||||||
|
|
||||||
|
&:nth-child(1) {
|
||||||
|
order: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(2) {
|
||||||
|
order: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(3) {
|
||||||
|
order: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(4) {
|
||||||
|
order: 6;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(5) {
|
||||||
|
order: 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(6) {
|
||||||
|
order: 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(7) {
|
||||||
|
order: 7;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(8) {
|
||||||
|
order: 8;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(9) {
|
||||||
|
order: 8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 576px) {
|
||||||
|
.callback-modal__body {
|
||||||
|
h2 {
|
||||||
|
font-size: 18px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.var-item {
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 1200px) {
|
||||||
|
.var-line {
|
||||||
|
margin-bottom: 50px;
|
||||||
|
padding-bottom: 30px;
|
||||||
|
background: url('../../img/holiday/icons/scenario-path.svg') top left no-repeat;
|
||||||
|
|
||||||
|
.row {
|
||||||
|
.col-lg-4 {
|
||||||
|
&:nth-child(1) {
|
||||||
|
transform: translateX(0) translateY(-30px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(2) {
|
||||||
|
transform: translateX(-35px) translateY(75px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(3) {
|
||||||
|
transform: translateX(-85px) translateY(-45px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(4) {
|
||||||
|
transform: translateX(125px) translateY(30px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(5) {
|
||||||
|
transform: translateX(50px) translateY(90px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(6) {
|
||||||
|
transform: translateX(10px) translateY(-45px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(7) {
|
||||||
|
transform: translateX(-10px) translateY(30px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(8) {
|
||||||
|
transform: translateX(10px) translateY(80px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,181 +0,0 @@
|
|||||||
@import "../constansts"
|
|
||||||
|
|
||||||
.order
|
|
||||||
align-items: center
|
|
||||||
background: #f2f2f2 url('../../img/order-form-bg.png') center no-repeat
|
|
||||||
display: flex
|
|
||||||
height: 790px
|
|
||||||
padding-bottom: 10px
|
|
||||||
padding-top: 10px
|
|
||||||
position: relative
|
|
||||||
.container
|
|
||||||
background-color: #fff
|
|
||||||
border-radius: 40px
|
|
||||||
box-shadow: 0 0 15px 0 rgba(41, 48, 55, 0.5)
|
|
||||||
color: #000000
|
|
||||||
display: flex
|
|
||||||
font-family: 'PT Sans', sans-serif
|
|
||||||
justify-content: flex-start
|
|
||||||
max-width: 1061px
|
|
||||||
padding: 30px 100px
|
|
||||||
&__text
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
height: 100%
|
|
||||||
justify-content: space-between
|
|
||||||
min-width: 430px
|
|
||||||
padding-right: 30px
|
|
||||||
width: 400px
|
|
||||||
h3
|
|
||||||
font-size: 32px
|
|
||||||
font-weight: 600
|
|
||||||
letter-spacing: 0.3px
|
|
||||||
line-height: 1.22
|
|
||||||
margin: 30px 0 25px 0
|
|
||||||
p
|
|
||||||
font-size: 24px
|
|
||||||
letter-spacing: 0.3px
|
|
||||||
line-height: 1.42
|
|
||||||
&__form
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
flex-grow: 1
|
|
||||||
width: 100%
|
|
||||||
.form-group
|
|
||||||
margin-bottom: 0
|
|
||||||
input,textarea
|
|
||||||
border-radius: 7px
|
|
||||||
border: 1px solid $main-color
|
|
||||||
color: $main-color
|
|
||||||
font-size: 16px
|
|
||||||
letter-spacing: 0.1px
|
|
||||||
margin-bottom: 10px
|
|
||||||
max-width: 400px
|
|
||||||
padding: 21px 20px
|
|
||||||
width: 100%
|
|
||||||
&:focus
|
|
||||||
box-shadow: none
|
|
||||||
&::placeholder
|
|
||||||
color: $main-color
|
|
||||||
small
|
|
||||||
display: block
|
|
||||||
font-size: 12px
|
|
||||||
letter-spacing: 0.3px
|
|
||||||
line-height: 1.42
|
|
||||||
margin: 10px 0
|
|
||||||
button
|
|
||||||
margin-top: 15px
|
|
||||||
width: 289px
|
|
||||||
|
|
||||||
|
|
||||||
.order-modal
|
|
||||||
background: rgba(0, 0, 0, 0.65) !important
|
|
||||||
bottom: 0
|
|
||||||
display: none
|
|
||||||
left: 0
|
|
||||||
position: fixed
|
|
||||||
right: 0
|
|
||||||
top: 0
|
|
||||||
z-index: 999999
|
|
||||||
&__overlay
|
|
||||||
bottom: 0
|
|
||||||
left: 0
|
|
||||||
position: absolute
|
|
||||||
right: 0
|
|
||||||
top: 0
|
|
||||||
.container
|
|
||||||
background-color: #fff
|
|
||||||
border-radius: 20px
|
|
||||||
box-shadow: 0 0 15px 0 rgba(41, 48, 55, 0.5)
|
|
||||||
padding: 40px 100px
|
|
||||||
position: relative
|
|
||||||
text-align: center
|
|
||||||
top: 50%
|
|
||||||
transform: translateY(-50%)
|
|
||||||
h2
|
|
||||||
font-family: 'Museo Regular', sans-serif
|
|
||||||
font-size: 32px
|
|
||||||
font-weight: 600
|
|
||||||
|
|
||||||
|
|
||||||
@media screen and (max-width: 1200px)
|
|
||||||
.order-call
|
|
||||||
display: none
|
|
||||||
|
|
||||||
@media screen and (max-width: 768px)
|
|
||||||
.order
|
|
||||||
background-size: cover
|
|
||||||
background: url('../../img/order-bg.jpg') center no-repeat
|
|
||||||
height: auto
|
|
||||||
padding: 30px 0
|
|
||||||
.container
|
|
||||||
align-items: center
|
|
||||||
flex-direction: column
|
|
||||||
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
|
|
||||||
max-width: 100%
|
|
||||||
width: 100%
|
|
||||||
|
|
||||||
.order-modal
|
|
||||||
.container
|
|
||||||
padding: 20px
|
|
||||||
|
|
||||||
.order-holiday
|
|
||||||
height: 34px !important
|
|
||||||
padding: 0 10px !important
|
|
||||||
|
|
||||||
@media screen and (max-width: 480px)
|
|
||||||
.order
|
|
||||||
h3
|
|
||||||
font-size: 16px
|
|
||||||
margin: 0 0 5px 0
|
|
||||||
p
|
|
||||||
font-size: 13px
|
|
||||||
margin-bottom: 5px
|
|
||||||
.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
|
|
||||||
font-size: 14px
|
|
||||||
margin: 0
|
|
||||||
&-holiday
|
|
||||||
border-radius: 10px
|
|
||||||
font-size: 12px !important
|
|
||||||
height: 30px !important
|
|
||||||
margin: 0
|
|
||||||
padding: 5px !important
|
|
||||||
width: 118px
|
|
||||||
|
|
||||||
|
|
||||||
.order-modal
|
|
||||||
padding: 0 30px
|
|
||||||
.container
|
|
||||||
img
|
|
||||||
height: 220px !important
|
|
||||||
|
|
||||||
.order-call
|
|
||||||
display: block
|
|
||||||
252
src/sass/parts/order.scss
Normal file
252
src/sass/parts/order.scss
Normal file
@ -0,0 +1,252 @@
|
|||||||
|
@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: 1200px) {
|
||||||
|
.order-call {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-holiday {
|
||||||
|
height: 34px !important;
|
||||||
|
padding: 0 10px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-holiday {
|
||||||
|
width: 118px;
|
||||||
|
height: 30px !important;
|
||||||
|
margin: 0;
|
||||||
|
padding: 5px !important;
|
||||||
|
border-radius: 10px;
|
||||||
|
font-size: 12px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-modal {
|
||||||
|
padding: 0 30px;
|
||||||
|
|
||||||
|
.container {
|
||||||
|
img {
|
||||||
|
height: 220px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-call {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,111 +0,0 @@
|
|||||||
@import '../constansts'
|
|
||||||
|
|
||||||
.packages
|
|
||||||
padding-top: 15px
|
|
||||||
background: url('../../img/order-bg.jpg') center no-repeat
|
|
||||||
background-size: cover
|
|
||||||
color: #ffffff
|
|
||||||
padding-bottom: 45px
|
|
||||||
&-slider
|
|
||||||
max-width: 1320px !important
|
|
||||||
width: 1400px
|
|
||||||
h2,p
|
|
||||||
color: #ffffff
|
|
||||||
max-width: 650px
|
|
||||||
margin-right: auto
|
|
||||||
margin-left: auto
|
|
||||||
img
|
|
||||||
width: 76px
|
|
||||||
height: 76px
|
|
||||||
&-item
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
align-items: center
|
|
||||||
justify-content: space-between
|
|
||||||
width: 300px
|
|
||||||
height: 640px
|
|
||||||
text-align: center
|
|
||||||
border-radius: 20px
|
|
||||||
box-shadow: 0 0 15px 0 rgba(41, 48, 55, 0.5)
|
|
||||||
background-color: #ffffff
|
|
||||||
padding: 25px
|
|
||||||
div
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
justify-content: space-between
|
|
||||||
height: 70%
|
|
||||||
&:first-child
|
|
||||||
height: 200px
|
|
||||||
h3
|
|
||||||
font-size: 32px
|
|
||||||
font-weight: 600
|
|
||||||
letter-spacing: 0.6px
|
|
||||||
&__price
|
|
||||||
color: #000000 !important
|
|
||||||
font-size: 18px !important
|
|
||||||
font-weight: 600
|
|
||||||
letter-spacing: 0.5px
|
|
||||||
font-family: 'PT Sans', sans-serif
|
|
||||||
margin-bottom: 0 !important
|
|
||||||
span
|
|
||||||
font-size: 32px
|
|
||||||
font-weight: 600
|
|
||||||
letter-spacing: 0.5px
|
|
||||||
color: $main-color !important
|
|
||||||
&__descr
|
|
||||||
color: $main-color !important
|
|
||||||
font-size: 16px !important
|
|
||||||
letter-spacing: 0.4px
|
|
||||||
text-align: center
|
|
||||||
margin-bottom: 0 !important
|
|
||||||
ul
|
|
||||||
padding-top: 20px
|
|
||||||
text-align: left
|
|
||||||
font-size: 18px
|
|
||||||
letter-spacing: 0.5px
|
|
||||||
color: #000000
|
|
||||||
margin: 0
|
|
||||||
font-weight: 600
|
|
||||||
padding-inline-start: 0
|
|
||||||
li
|
|
||||||
list-style: none
|
|
||||||
text-align: left
|
|
||||||
margin-left: 25px
|
|
||||||
font-size: 20px !important
|
|
||||||
line-height: 1.4
|
|
||||||
letter-spacing: 0.2px
|
|
||||||
margin: 5px 0 0 0
|
|
||||||
background: url('../../img/icons/check.svg') 0 8px no-repeat
|
|
||||||
padding: 0 0 0 30px
|
|
||||||
font-weight: normal
|
|
||||||
a
|
|
||||||
margin-top: 20px
|
|
||||||
|
|
||||||
@media screen and (max-width: 1200px)
|
|
||||||
.packages-slider
|
|
||||||
max-width: 100% !important
|
|
||||||
|
|
||||||
|
|
||||||
@media screen and (max-width: 768px)
|
|
||||||
.packages-item
|
|
||||||
width: 280px
|
|
||||||
ul
|
|
||||||
li
|
|
||||||
font-size: 16px !important
|
|
||||||
h3
|
|
||||||
font-size: 26px
|
|
||||||
&__price
|
|
||||||
font-size: 16px !important
|
|
||||||
&__descr
|
|
||||||
font-size: 16px !important
|
|
||||||
button
|
|
||||||
font-size: 18px
|
|
||||||
|
|
||||||
@media screen and (max-width: 576px)
|
|
||||||
.packages
|
|
||||||
padding-bottom: 30px
|
|
||||||
.packages-item
|
|
||||||
height: 570px
|
|
||||||
max-width: 100%
|
|
||||||
&__price
|
|
||||||
margin-bottom: 10px !important
|
|
||||||
252
src/sass/parts/packages.scss
Normal file
252
src/sass/parts/packages.scss
Normal file
@ -0,0 +1,252 @@
|
|||||||
|
@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: 1200px) {
|
||||||
|
.order-call {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-holiday {
|
||||||
|
height: 34px !important;
|
||||||
|
padding: 0 10px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-holiday {
|
||||||
|
width: 118px;
|
||||||
|
height: 30px !important;
|
||||||
|
margin: 0;
|
||||||
|
padding: 5px !important;
|
||||||
|
border-radius: 10px;
|
||||||
|
font-size: 12px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-modal {
|
||||||
|
padding: 0 30px;
|
||||||
|
|
||||||
|
.container {
|
||||||
|
img {
|
||||||
|
height: 220px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-call {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,258 +0,0 @@
|
|||||||
.places
|
|
||||||
font-family: 'PT Sans'
|
|
||||||
padding-bottom: 20px
|
|
||||||
position: relative
|
|
||||||
&-layout
|
|
||||||
// background: #f2f2f2
|
|
||||||
//START BALLLOONS
|
|
||||||
// &::before
|
|
||||||
// content: ''
|
|
||||||
// top: 220px
|
|
||||||
// left: 268px
|
|
||||||
// width: 163px
|
|
||||||
// height: 331px
|
|
||||||
// display: block
|
|
||||||
// position: absolute
|
|
||||||
// background: url('../img/places/balloon-blue.svg') center no-repeat
|
|
||||||
// z-index: 2
|
|
||||||
// &::after
|
|
||||||
// content: ''
|
|
||||||
// top: 90px
|
|
||||||
// right: 310px
|
|
||||||
// width: 163px
|
|
||||||
// height: 423px
|
|
||||||
// display: block
|
|
||||||
// position: absolute
|
|
||||||
// background: url('../img/places/balloon-red.svg') center no-repeat
|
|
||||||
// z-index: 2
|
|
||||||
//END BALLLOONS
|
|
||||||
.owl-carousel .owl-item img
|
|
||||||
display: inline-block
|
|
||||||
width: auto
|
|
||||||
.owl-nav
|
|
||||||
// display: block !important
|
|
||||||
position: absolute
|
|
||||||
bottom: 5px
|
|
||||||
// right: 268px
|
|
||||||
right: 320px
|
|
||||||
width: 200px
|
|
||||||
display: flex !important
|
|
||||||
justify-content: space-between
|
|
||||||
button
|
|
||||||
width: 55px
|
|
||||||
height: 55px
|
|
||||||
outline: none
|
|
||||||
// margin-left: 15px
|
|
||||||
// margin-right: 15px
|
|
||||||
// position: absolute
|
|
||||||
bottom: 0
|
|
||||||
span
|
|
||||||
color: transparent
|
|
||||||
&.owl-prev
|
|
||||||
background: url('../../img/icons/button-active-prev.svg')
|
|
||||||
right: 95px
|
|
||||||
&.owl-next
|
|
||||||
background: url('../../img/icons/button-active-next.svg')
|
|
||||||
right: -95px
|
|
||||||
h2
|
|
||||||
text-align: center
|
|
||||||
font-size: 40px
|
|
||||||
font-weight: 600
|
|
||||||
letter-spacing: 0.5px
|
|
||||||
color: #1e212b
|
|
||||||
line-height: normal
|
|
||||||
&-item
|
|
||||||
// background: none !important
|
|
||||||
position: relative
|
|
||||||
margin-top: 80px
|
|
||||||
width: 1100px
|
|
||||||
height: auto
|
|
||||||
margin-right: auto
|
|
||||||
margin-left: auto
|
|
||||||
border-radius: 20px
|
|
||||||
|
|
||||||
&__layout
|
|
||||||
display: none
|
|
||||||
background-color: #000000
|
|
||||||
opacity: 0.55
|
|
||||||
position: absolute
|
|
||||||
width: 100%
|
|
||||||
height: 570px
|
|
||||||
z-index: 2
|
|
||||||
border-radius: 20px
|
|
||||||
&-text
|
|
||||||
border-radius: 20px
|
|
||||||
box-shadow: 0 0 15px 0 rgba(41, 48, 55, 0.5)
|
|
||||||
background-color: #ffffff
|
|
||||||
padding: 40px 80px
|
|
||||||
max-width: 600px
|
|
||||||
display: inline-block
|
|
||||||
z-index: 5
|
|
||||||
position: relative
|
|
||||||
transform: translateX(11px)
|
|
||||||
h3
|
|
||||||
font-size: 32px
|
|
||||||
font-weight: 700
|
|
||||||
line-height: 1.22
|
|
||||||
letter-spacing: 0.3px
|
|
||||||
margin: 0 0 15px 0
|
|
||||||
span
|
|
||||||
font-size: 22px
|
|
||||||
line-height: 1.45
|
|
||||||
letter-spacing: 0.5px
|
|
||||||
margin-bottom: 15px
|
|
||||||
&__mainmenu
|
|
||||||
list-style: none
|
|
||||||
padding-inline-start: 0
|
|
||||||
img
|
|
||||||
margin-right: 20px
|
|
||||||
width: 34px
|
|
||||||
.icon-white
|
|
||||||
display: none !important
|
|
||||||
span
|
|
||||||
font-size: 24px
|
|
||||||
font-weight: 600
|
|
||||||
letter-spacing: 0.3px
|
|
||||||
li
|
|
||||||
margin-top: 15px
|
|
||||||
ul
|
|
||||||
list-style-type: none //url(../img/icons/check.svg)
|
|
||||||
padding-inline-start: 54px
|
|
||||||
li
|
|
||||||
// position: relative
|
|
||||||
font-size: 20px
|
|
||||||
line-height: 1.4
|
|
||||||
letter-spacing: 0.2px
|
|
||||||
margin-top: 5px
|
|
||||||
&:before
|
|
||||||
content: ''
|
|
||||||
display: inline-block
|
|
||||||
width: 16px
|
|
||||||
height: 16px
|
|
||||||
background: url(../../img/icons/check.svg) center no-repeat
|
|
||||||
margin-right: 14px
|
|
||||||
button
|
|
||||||
width: 225px
|
|
||||||
margin-top: 20px
|
|
||||||
&-img
|
|
||||||
display: inline-block
|
|
||||||
position: absolute
|
|
||||||
width: 777px
|
|
||||||
height: 557px
|
|
||||||
top: -43px
|
|
||||||
right: -65px
|
|
||||||
z-index: 2
|
|
||||||
img
|
|
||||||
border-radius: 20px
|
|
||||||
p
|
|
||||||
text-align: center
|
|
||||||
z-index: 90
|
|
||||||
font-size: 22px
|
|
||||||
letter-spacing: 0.3px
|
|
||||||
color: #363943
|
|
||||||
margin-top: 20px
|
|
||||||
&-slider
|
|
||||||
margin-right: auto
|
|
||||||
margin-left: auto
|
|
||||||
|
|
||||||
@media screen and (max-width: 1200px)
|
|
||||||
.places .owl-nav
|
|
||||||
right: 75px
|
|
||||||
|
|
||||||
@media screen and (max-width: 770px)
|
|
||||||
.places
|
|
||||||
color: #ffffff
|
|
||||||
&-slider
|
|
||||||
// padding: 0
|
|
||||||
&-item
|
|
||||||
height: 450px
|
|
||||||
width: 400px
|
|
||||||
&__layout
|
|
||||||
display: block
|
|
||||||
height: 450px
|
|
||||||
.owl-nav
|
|
||||||
display: none !important
|
|
||||||
&-img
|
|
||||||
display: none
|
|
||||||
&-text
|
|
||||||
background: transparent
|
|
||||||
color: #ffffff
|
|
||||||
z-index: 3
|
|
||||||
font-size: 16px
|
|
||||||
padding: 20px
|
|
||||||
h3
|
|
||||||
font-size: 20px
|
|
||||||
span
|
|
||||||
// font-size: 16px
|
|
||||||
font-size: 12px
|
|
||||||
line-height: 1.38
|
|
||||||
&__mainmenu
|
|
||||||
li
|
|
||||||
img
|
|
||||||
width: 30px !important
|
|
||||||
margin-right: 10px
|
|
||||||
display: none !important
|
|
||||||
ul
|
|
||||||
li
|
|
||||||
line-height: 1.25
|
|
||||||
font-size: 16px
|
|
||||||
&::before
|
|
||||||
background: url('../../img/icons/checkW.svg') center no-repeat
|
|
||||||
.icon-white
|
|
||||||
display: inline-block !important
|
|
||||||
|
|
||||||
button
|
|
||||||
width: 100px
|
|
||||||
font-size: 14px
|
|
||||||
|
|
||||||
@media screen and (max-width: 576px)
|
|
||||||
.places
|
|
||||||
margin-top: 20px
|
|
||||||
&:before, &:after
|
|
||||||
display: none
|
|
||||||
&-item
|
|
||||||
// height: 570px
|
|
||||||
height: 455px
|
|
||||||
width: 290px
|
|
||||||
max-width: 100% !important
|
|
||||||
margin-top: 15px
|
|
||||||
//background: none !important
|
|
||||||
&__layout
|
|
||||||
height: 570px
|
|
||||||
height: 100%
|
|
||||||
&-text
|
|
||||||
padding: 10px
|
|
||||||
display: flex
|
|
||||||
width: 100%
|
|
||||||
height: 100%
|
|
||||||
flex-direction: column
|
|
||||||
align-items: baseline
|
|
||||||
transform: none
|
|
||||||
p
|
|
||||||
max-width: 90%
|
|
||||||
a
|
|
||||||
align-self: center
|
|
||||||
&__mainmenu
|
|
||||||
li
|
|
||||||
img
|
|
||||||
width: 20px !important
|
|
||||||
&.list-price
|
|
||||||
font-size: 16px
|
|
||||||
text-align: center
|
|
||||||
ul
|
|
||||||
padding-inline-start: 0
|
|
||||||
li
|
|
||||||
font-size: 14px
|
|
||||||
.places
|
|
||||||
// background-color: #f2f2f2 !important
|
|
||||||
padding-top: 25px
|
|
||||||
&-layout
|
|
||||||
// background-color: #f2f2f2 !important
|
|
||||||
&:after
|
|
||||||
display: none !important
|
|
||||||
|
|
||||||
@media screen and (min-width: 576px)
|
|
||||||
.places-item
|
|
||||||
height: auto
|
|
||||||
padding-left: 5px
|
|
||||||
background: none !important
|
|
||||||
334
src/sass/parts/places.scss
Normal file
334
src/sass/parts/places.scss
Normal file
@ -0,0 +1,334 @@
|
|||||||
|
.places {
|
||||||
|
position: relative;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
font-family: 'PT Sans', sans-serif;
|
||||||
|
|
||||||
|
.owl-carousel .owl-item img {
|
||||||
|
display: inline-block;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.owl-nav {
|
||||||
|
// display: block !important
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
// right: 268px
|
||||||
|
right: 320px;
|
||||||
|
bottom: 5px;
|
||||||
|
display: flex !important;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 200px;
|
||||||
|
|
||||||
|
button {
|
||||||
|
|
||||||
|
// margin-left: 15px
|
||||||
|
// margin-right: 15px
|
||||||
|
// position: absolute
|
||||||
|
bottom: 0;
|
||||||
|
width: 55px;
|
||||||
|
height: 55px;
|
||||||
|
outline: none;
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.owl-prev {
|
||||||
|
right: 95px;
|
||||||
|
background: url('../../img/icons/button-active-prev.svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
&.owl-next {
|
||||||
|
right: -95px;
|
||||||
|
background: url('../../img/icons/button-active-next.svg');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
color: #1e212b;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 40px;
|
||||||
|
line-height: normal;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-item {
|
||||||
|
// background: none !important
|
||||||
|
position: relative;
|
||||||
|
width: 1100px;
|
||||||
|
height: auto;
|
||||||
|
margin-top: 80px;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
border-radius: 20px;
|
||||||
|
|
||||||
|
&__layout {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 2;
|
||||||
|
display: none;
|
||||||
|
width: 100%;
|
||||||
|
height: 570px;
|
||||||
|
border-radius: 20px;
|
||||||
|
background-color: #000000;
|
||||||
|
opacity: 0.55;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-text {
|
||||||
|
position: relative;
|
||||||
|
z-index: 5;
|
||||||
|
display: inline-block;
|
||||||
|
max-width: 600px;
|
||||||
|
padding: 40px 80px;
|
||||||
|
border-radius: 20px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
box-shadow: 0 0 15px 0 rgba(41, 48, 55, 0.5);
|
||||||
|
transform: translateX(11px);
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
margin: 0 0 15px;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 32px;
|
||||||
|
line-height: 1.22;
|
||||||
|
letter-spacing: 0.3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
font-size: 22px;
|
||||||
|
line-height: 1.45;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__mainmenu {
|
||||||
|
list-style: none;
|
||||||
|
padding-inline-start: 0;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 34px;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-white {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 24px;
|
||||||
|
letter-spacing: 0.3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin-top: 15px;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style-type: none;
|
||||||
|
padding-inline-start: 54px;
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin-top: 5px;
|
||||||
|
// position: relative
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 1.4;
|
||||||
|
letter-spacing: 0.2px;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
display: inline-block;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
margin-right: 14px;
|
||||||
|
background: url('../../img/icons/check.svg') center no-repeat;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
width: 225px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-img {
|
||||||
|
position: absolute;
|
||||||
|
top: -43px;
|
||||||
|
right: -65px;
|
||||||
|
z-index: 2;
|
||||||
|
display: inline-block;
|
||||||
|
width: 777px;
|
||||||
|
height: 557px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
z-index: 90;
|
||||||
|
margin-top: 20px;
|
||||||
|
color: #363943;
|
||||||
|
font-size: 22px;
|
||||||
|
letter-spacing: 0.3px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-slider {
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1200px) {
|
||||||
|
.places .owl-nav {
|
||||||
|
right: 75px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 770px) {
|
||||||
|
.places {
|
||||||
|
color: #ffffff;
|
||||||
|
|
||||||
|
&-item {
|
||||||
|
width: 400px;
|
||||||
|
height: 450px;
|
||||||
|
|
||||||
|
&__layout {
|
||||||
|
display: block;
|
||||||
|
height: 450px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.owl-nav {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-img {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-text {
|
||||||
|
z-index: 3;
|
||||||
|
padding: 20px;
|
||||||
|
background: transparent;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
// font-size: 16px
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 1.38;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__mainmenu {
|
||||||
|
li {
|
||||||
|
img {
|
||||||
|
display: none !important;
|
||||||
|
width: 30px !important;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
li {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.25;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
background: url('../../img/icons/checkW.svg') center no-repeat;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-white {
|
||||||
|
display: inline-block !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
width: 100px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 576px) {
|
||||||
|
.places {
|
||||||
|
margin-top: 20px;
|
||||||
|
padding-top: 25px;
|
||||||
|
|
||||||
|
&::before, &::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-item {
|
||||||
|
width: 290px;
|
||||||
|
max-width: 100% !important;
|
||||||
|
// height: 570px
|
||||||
|
height: 455px;
|
||||||
|
margin-top: 15px;
|
||||||
|
|
||||||
|
//background: none !important
|
||||||
|
|
||||||
|
&__layout {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-text {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: baseline;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
transform: none;
|
||||||
|
|
||||||
|
p {
|
||||||
|
max-width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__mainmenu {
|
||||||
|
li {
|
||||||
|
img {
|
||||||
|
width: 20px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.list-price {
|
||||||
|
font-size: 16px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
padding-inline-start: 0;
|
||||||
|
|
||||||
|
li {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 576px) {
|
||||||
|
.places-item {
|
||||||
|
height: auto;
|
||||||
|
padding-left: 5px;
|
||||||
|
background: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,191 +0,0 @@
|
|||||||
.present
|
|
||||||
font-family: 'PT Sans', sans-serif
|
|
||||||
// padding-left: 10px
|
|
||||||
// padding-right: 10px
|
|
||||||
padding-bottom: 20px
|
|
||||||
// background: #f2f2f2
|
|
||||||
padding-top: 60px //10.10.2020
|
|
||||||
.container
|
|
||||||
position: relative
|
|
||||||
padding-top: 10px
|
|
||||||
overflow: visible
|
|
||||||
&::before
|
|
||||||
content: ''
|
|
||||||
display: block
|
|
||||||
width: 296px
|
|
||||||
height: 293px
|
|
||||||
background: url('../../img/present/cube-purple.png') center no-repeat
|
|
||||||
position: absolute
|
|
||||||
top: -100px
|
|
||||||
left: -100px
|
|
||||||
&::after
|
|
||||||
content: ''
|
|
||||||
display: block
|
|
||||||
width: 296px
|
|
||||||
height: 293px
|
|
||||||
background: url('../../img/present/cube-yellow.png') center no-repeat
|
|
||||||
position: absolute
|
|
||||||
top: -215px
|
|
||||||
right: -100px
|
|
||||||
&-layout
|
|
||||||
// background: #f2f2f2
|
|
||||||
padding-bottom: 30px
|
|
||||||
h2
|
|
||||||
text-align: center
|
|
||||||
font-size: 40px
|
|
||||||
font-weight: 600
|
|
||||||
letter-spacing: 0.5px
|
|
||||||
color: #1e212b
|
|
||||||
line-height: normal
|
|
||||||
margin-bottom: 75px
|
|
||||||
&-item
|
|
||||||
display: flex
|
|
||||||
align-items: center
|
|
||||||
position: relative
|
|
||||||
margin-bottom: 70px
|
|
||||||
&:last-child
|
|
||||||
flex-direction: row-reverse
|
|
||||||
margin-bottom: 15px
|
|
||||||
img
|
|
||||||
// right: 115px
|
|
||||||
left: -115px
|
|
||||||
.present-item__text
|
|
||||||
right: 115px
|
|
||||||
left: 115px
|
|
||||||
padding: 70px 251px 0 100px
|
|
||||||
border-radius: 20px 0 0 20px
|
|
||||||
box-shadow: 0 0 15px 0 rgba(41, 48, 55, 0.5)
|
|
||||||
img
|
|
||||||
position: relative
|
|
||||||
z-index: 2
|
|
||||||
left: 115px
|
|
||||||
width: 360px
|
|
||||||
height: 360px
|
|
||||||
&__text
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
align-items: flex-start
|
|
||||||
// justify-content: center
|
|
||||||
width: 757px
|
|
||||||
height: 360px
|
|
||||||
position: absolute
|
|
||||||
right: 115px
|
|
||||||
top: 0
|
|
||||||
background-color: #f2f2f2
|
|
||||||
box-shadow: 0 0 15px 0 rgba(41, 48, 55, 0.5)
|
|
||||||
padding: 70px 100px 0 251px
|
|
||||||
border-radius: 0 20px 20px 0
|
|
||||||
z-index: 1
|
|
||||||
h3
|
|
||||||
font-size: 32px
|
|
||||||
font-weight: 600
|
|
||||||
line-height: 1.22
|
|
||||||
letter-spacing: 0.3px
|
|
||||||
margin: 0 0 10px 0
|
|
||||||
p
|
|
||||||
margin: 22px 0
|
|
||||||
max-width: 400px
|
|
||||||
font-size: 22px
|
|
||||||
line-height: 1.45
|
|
||||||
letter-spacing: 0.5px
|
|
||||||
a
|
|
||||||
font-size: 18px
|
|
||||||
font-weight: 600
|
|
||||||
letter-spacing: 1.2px
|
|
||||||
text-align: center
|
|
||||||
text-transform: uppercase
|
|
||||||
text-decoration: none
|
|
||||||
vertical-align: middle
|
|
||||||
line-height: 1.3
|
|
||||||
border: 0
|
|
||||||
button
|
|
||||||
width: 260px
|
|
||||||
box-shadow: 0 2px 12px 0 rgba(56, 72, 95, 0.49)
|
|
||||||
|
|
||||||
|
|
||||||
@media screen and (max-width: 1200px)
|
|
||||||
.present
|
|
||||||
&-item
|
|
||||||
&__text
|
|
||||||
max-width: 530px
|
|
||||||
padding: 20px 25px
|
|
||||||
&:last-child
|
|
||||||
.present-item__text
|
|
||||||
padding: 20px !important
|
|
||||||
//padding-right: 251px
|
|
||||||
|
|
||||||
@media screen and (max-width: 770px)
|
|
||||||
.present
|
|
||||||
&-item
|
|
||||||
// transform: scale(0.8)
|
|
||||||
height: 250px
|
|
||||||
img
|
|
||||||
max-height: 122px
|
|
||||||
left: 0 !important
|
|
||||||
right: 0 !important
|
|
||||||
&__text
|
|
||||||
max-width: 530px
|
|
||||||
padding: 20px
|
|
||||||
box-shadow: none
|
|
||||||
position: relative
|
|
||||||
right: 0 !important
|
|
||||||
left: 0 !important
|
|
||||||
height: auto
|
|
||||||
h3
|
|
||||||
font-size: 14px
|
|
||||||
p
|
|
||||||
font-size: 14px
|
|
||||||
button
|
|
||||||
width: 178px !important
|
|
||||||
font-size: 16px
|
|
||||||
&:last-child
|
|
||||||
.present-item__text
|
|
||||||
padding: 20px !important
|
|
||||||
padding-right: 251px
|
|
||||||
|
|
||||||
|
|
||||||
@media screen and (max-width: 576px)
|
|
||||||
.present
|
|
||||||
padding-bottom: 0
|
|
||||||
&:before, &:after
|
|
||||||
display: none
|
|
||||||
&-layout
|
|
||||||
padding-bottom: 0
|
|
||||||
.present
|
|
||||||
padding-left: 0
|
|
||||||
padding-right: 0
|
|
||||||
h2
|
|
||||||
margin-bottom: 0
|
|
||||||
margin-top: 20px
|
|
||||||
&-item
|
|
||||||
height: 200px
|
|
||||||
margin-bottom: 0
|
|
||||||
img
|
|
||||||
max-height: 110px
|
|
||||||
&__text
|
|
||||||
background: #fff
|
|
||||||
max-width: 530px
|
|
||||||
position: relative
|
|
||||||
right: 0
|
|
||||||
left: 0
|
|
||||||
padding: 20px
|
|
||||||
box-shadow: none
|
|
||||||
height: auto
|
|
||||||
h3
|
|
||||||
font-size: 16px
|
|
||||||
margin-bottom: 0
|
|
||||||
p
|
|
||||||
margin-top: 10px
|
|
||||||
margin-bottom: 10px
|
|
||||||
&:last-child
|
|
||||||
.present-item__text
|
|
||||||
padding: 10px !important
|
|
||||||
padding-right: 251px
|
|
||||||
box-shadow: none
|
|
||||||
.present-item__text button
|
|
||||||
max-width: 100px !important
|
|
||||||
padding: 5px
|
|
||||||
font-size: 14px !important
|
|
||||||
|
|
||||||
.present
|
|
||||||
padding-top: 0 //10.10.2020
|
|
||||||
265
src/sass/parts/present.scss
Normal file
265
src/sass/parts/present.scss
Normal file
@ -0,0 +1,265 @@
|
|||||||
|
.present {
|
||||||
|
|
||||||
|
// background: #f2f2f2
|
||||||
|
padding-top: 60px;
|
||||||
|
|
||||||
|
// padding-left: 10px
|
||||||
|
// padding-right: 10px
|
||||||
|
padding-bottom: 20px;
|
||||||
|
font-family: 'PT Sans', sans-serif;
|
||||||
|
|
||||||
|
.container {
|
||||||
|
position: relative;
|
||||||
|
overflow: visible;
|
||||||
|
padding-top: 10px;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -100px;
|
||||||
|
left: -100px;
|
||||||
|
display: block;
|
||||||
|
width: 296px;
|
||||||
|
height: 293px;
|
||||||
|
background: url('../../img/present/cube-purple.png') center no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -215px;
|
||||||
|
right: -100px;
|
||||||
|
display: block;
|
||||||
|
width: 296px;
|
||||||
|
height: 293px;
|
||||||
|
background: url('../../img/present/cube-yellow.png') center no-repeat;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-layout {
|
||||||
|
// background: #f2f2f2
|
||||||
|
padding-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin-bottom: 75px;
|
||||||
|
color: #1e212b;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 40px;
|
||||||
|
line-height: normal;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-item {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 70px;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
// right: 115px
|
||||||
|
left: -115px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.present-item__text {
|
||||||
|
right: 115px;
|
||||||
|
left: 115px;
|
||||||
|
padding: 70px 251px 0 100px;
|
||||||
|
border-radius: 20px 0 0 20px;
|
||||||
|
box-shadow: 0 0 15px 0 rgba(41, 48, 55, 0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
position: relative;
|
||||||
|
left: 115px;
|
||||||
|
z-index: 2;
|
||||||
|
width: 360px;
|
||||||
|
height: 360px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 115px;
|
||||||
|
z-index: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
|
||||||
|
// justify-content: center
|
||||||
|
width: 757px;
|
||||||
|
height: 360px;
|
||||||
|
padding: 70px 100px 0 251px;
|
||||||
|
border-radius: 0 20px 20px 0;
|
||||||
|
background-color: #f2f2f2;
|
||||||
|
box-shadow: 0 0 15px 0 rgba(41, 48, 55, 0.5);
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
margin: 0 0 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 32px;
|
||||||
|
line-height: 1.22;
|
||||||
|
letter-spacing: 0.3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
max-width: 400px;
|
||||||
|
margin: 22px 0;
|
||||||
|
font-size: 22px;
|
||||||
|
line-height: 1.45;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
vertical-align: middle;
|
||||||
|
border: 0;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 1.3;
|
||||||
|
letter-spacing: 1.2px;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
text-transform: uppercase;
|
||||||
|
|
||||||
|
button {
|
||||||
|
width: 260px;
|
||||||
|
box-shadow: 0 2px 12px 0 rgba(56, 72, 95, 0.49);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1200px) {
|
||||||
|
.present {
|
||||||
|
&-item {
|
||||||
|
&__text {
|
||||||
|
max-width: 530px;
|
||||||
|
padding: 20px 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
.present-item__text {
|
||||||
|
padding: 20px !important;
|
||||||
|
|
||||||
|
//padding-right: 251px
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 770px) {
|
||||||
|
.present {
|
||||||
|
&-item {
|
||||||
|
// transform: scale(0.8)
|
||||||
|
height: 250px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
right: 0 !important;
|
||||||
|
left: 0 !important;
|
||||||
|
max-height: 122px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
position: relative;
|
||||||
|
right: 0 !important;
|
||||||
|
left: 0 !important;
|
||||||
|
max-width: 530px;
|
||||||
|
height: auto;
|
||||||
|
padding: 20px;
|
||||||
|
box-shadow: none;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
width: 178px !important;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
.present-item__text {
|
||||||
|
padding: 20px !important;
|
||||||
|
padding-right: 251px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 576px) {
|
||||||
|
.present {
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-item {
|
||||||
|
height: 200px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-height: 110px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
position: relative;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
max-width: 530px;
|
||||||
|
height: auto;
|
||||||
|
padding: 20px;
|
||||||
|
background: #ffffff;
|
||||||
|
box-shadow: none;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
margin-bottom: 0;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
.present-item__text {
|
||||||
|
padding: 10px !important;
|
||||||
|
padding-right: 251px;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before, &::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-layout {
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.present-item__text button {
|
||||||
|
max-width: 100px !important;
|
||||||
|
padding: 5px;
|
||||||
|
font-size: 14px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,70 +0,0 @@
|
|||||||
@import "../constansts"
|
|
||||||
|
|
||||||
.principals
|
|
||||||
background: #f2f2f2
|
|
||||||
padding-top: 40px
|
|
||||||
padding-bottom: 30px
|
|
||||||
max-width: 1200px
|
|
||||||
margin-right: auto
|
|
||||||
margin-left: auto
|
|
||||||
.owl-stage
|
|
||||||
display: flex
|
|
||||||
align-items: center
|
|
||||||
.owl-item
|
|
||||||
img
|
|
||||||
width: auto
|
|
||||||
max-height: 104px
|
|
||||||
h2
|
|
||||||
text-align: center
|
|
||||||
font-size: 40px
|
|
||||||
font-weight: 600
|
|
||||||
letter-spacing: 0.5px
|
|
||||||
color: #1e212b
|
|
||||||
line-height: normal
|
|
||||||
margin-bottom: 40px
|
|
||||||
&-slider
|
|
||||||
padding: 0
|
|
||||||
// position: relative
|
|
||||||
// div
|
|
||||||
// display: flex
|
|
||||||
// justify-content: center
|
|
||||||
// align-items: center
|
|
||||||
// width: 141px
|
|
||||||
&__prev
|
|
||||||
background-color: #f2f2f2
|
|
||||||
font-size: 32px
|
|
||||||
display: flex
|
|
||||||
align-items: center
|
|
||||||
justify-content: center
|
|
||||||
border-radius: 50%
|
|
||||||
width: 55px
|
|
||||||
height: 55px
|
|
||||||
color: $main-color
|
|
||||||
position: absolute
|
|
||||||
top: 33%
|
|
||||||
left: -100px
|
|
||||||
transform: translateY(-27px)
|
|
||||||
cursor: pointer
|
|
||||||
outline: none
|
|
||||||
&__next
|
|
||||||
background-color: #f2f2f2
|
|
||||||
font-size: 32px
|
|
||||||
display: flex
|
|
||||||
align-items: center
|
|
||||||
justify-content: center
|
|
||||||
border-radius: 50%
|
|
||||||
width: 55px
|
|
||||||
height: 55px
|
|
||||||
color: $main-color
|
|
||||||
position: absolute
|
|
||||||
top: 33%
|
|
||||||
right: -100px
|
|
||||||
transform: translateY(-27px)
|
|
||||||
cursor: pointer
|
|
||||||
|
|
||||||
@media screen and (max-width: 480px)
|
|
||||||
.principals
|
|
||||||
padding-top: 20px !important
|
|
||||||
padding-bottom: 0 !important
|
|
||||||
h2
|
|
||||||
margin-bottom: 0
|
|
||||||
89
src/sass/parts/principals.scss
Normal file
89
src/sass/parts/principals.scss
Normal file
@ -0,0 +1,89 @@
|
|||||||
|
@import '../constansts';
|
||||||
|
|
||||||
|
.principals {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
padding-top: 40px;
|
||||||
|
padding-bottom: 30px;
|
||||||
|
background: #f2f2f2;
|
||||||
|
|
||||||
|
.owl-stage {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.owl-item {
|
||||||
|
img {
|
||||||
|
width: auto;
|
||||||
|
max-height: 104px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
color: #1e212b;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 40px;
|
||||||
|
line-height: normal;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-slider {
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
// position: relative
|
||||||
|
// div
|
||||||
|
// display: flex
|
||||||
|
// justify-content: center
|
||||||
|
// align-items: center
|
||||||
|
// // width: 141px
|
||||||
|
|
||||||
|
&__prev {
|
||||||
|
position: absolute;
|
||||||
|
top: 33%;
|
||||||
|
left: -100px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 55px;
|
||||||
|
height: 55px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #f2f2f2;
|
||||||
|
color: $main-color;
|
||||||
|
outline: none;
|
||||||
|
font-size: 32px;
|
||||||
|
cursor: pointer;
|
||||||
|
transform: translateY(-27px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__next {
|
||||||
|
position: absolute;
|
||||||
|
top: 33%;
|
||||||
|
right: -100px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 55px;
|
||||||
|
height: 55px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #f2f2f2;
|
||||||
|
color: $main-color;
|
||||||
|
font-size: 32px;
|
||||||
|
cursor: pointer;
|
||||||
|
transform: translateY(-27px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 480px) {
|
||||||
|
.principals {
|
||||||
|
padding-top: 20px !important;
|
||||||
|
padding-bottom: 0 !important;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,8 +0,0 @@
|
|||||||
@import 'parts/header'
|
|
||||||
@import 'parts/footer'
|
|
||||||
|
|
||||||
body
|
|
||||||
margin: 0
|
|
||||||
padding: 0
|
|
||||||
box-sizing: border-box
|
|
||||||
font-family: 'Museo Regular', sans-serif
|
|
||||||
9
src/sass/style.scss
Normal file
9
src/sass/style.scss
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
@import 'parts/header';
|
||||||
|
@import 'parts/footer';
|
||||||
|
|
||||||
|
body {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: 'Museo Regular', sans-serif;
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user