diff --git a/src/images/Section1_p1.png b/src/images/Section1_p1.png new file mode 100644 index 000000000..461ae0f04 Binary files /dev/null and b/src/images/Section1_p1.png differ diff --git a/src/images/Section1_p2.png b/src/images/Section1_p2.png new file mode 100644 index 000000000..e287846dc Binary files /dev/null and b/src/images/Section1_p2.png differ diff --git a/src/images/Section2_p1.png b/src/images/Section2_p1.png new file mode 100644 index 000000000..95a0f8e55 Binary files /dev/null and b/src/images/Section2_p1.png differ diff --git a/src/images/Section3_p1.png b/src/images/Section3_p1.png new file mode 100644 index 000000000..10dd44b20 Binary files /dev/null and b/src/images/Section3_p1.png differ diff --git a/src/images/Section3_p2.png b/src/images/Section3_p2.png new file mode 100644 index 000000000..a3f4af221 Binary files /dev/null and b/src/images/Section3_p2.png differ diff --git a/src/images/Section3_p3.png b/src/images/Section3_p3.png new file mode 100644 index 000000000..3ebe29a9b Binary files /dev/null and b/src/images/Section3_p3.png differ diff --git a/src/images/Section3_p4.png b/src/images/Section3_p4.png new file mode 100644 index 000000000..e178b0403 Binary files /dev/null and b/src/images/Section3_p4.png differ diff --git a/src/images/footer-img.png b/src/images/footer-img.png new file mode 100644 index 000000000..36f29addb Binary files /dev/null and b/src/images/footer-img.png differ diff --git a/src/images/header-img.png b/src/images/header-img.png new file mode 100644 index 000000000..c66b791ac Binary files /dev/null and b/src/images/header-img.png differ diff --git a/src/images/icons/Vector.png b/src/images/icons/Vector.png new file mode 100644 index 000000000..d427ab9d5 Binary files /dev/null and b/src/images/icons/Vector.png differ diff --git a/src/images/icons/arr-up.svg b/src/images/icons/arr-up.svg new file mode 100644 index 000000000..3ac7d7967 --- /dev/null +++ b/src/images/icons/arr-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/arrow-black.svg b/src/images/icons/arrow-black.svg new file mode 100644 index 000000000..eef80e97d --- /dev/null +++ b/src/images/icons/arrow-black.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/arrow.svg b/src/images/icons/arrow.svg new file mode 100644 index 000000000..56ae3496a --- /dev/null +++ b/src/images/icons/arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/close.png b/src/images/icons/close.png new file mode 100644 index 000000000..ec0f30654 Binary files /dev/null and b/src/images/icons/close.png differ diff --git a/src/images/icons/facebook-letter-logo.svg b/src/images/icons/facebook-letter-logo.svg new file mode 100644 index 000000000..4ccaf0aba --- /dev/null +++ b/src/images/icons/facebook-letter-logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/instagram.svg b/src/images/icons/instagram.svg new file mode 100644 index 000000000..77b9fafa0 --- /dev/null +++ b/src/images/icons/instagram.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/images/icons/logo.png b/src/images/icons/logo.png new file mode 100644 index 000000000..3be9c9282 Binary files /dev/null and b/src/images/icons/logo.png differ diff --git a/src/images/icons/orange-sq.svg b/src/images/icons/orange-sq.svg new file mode 100644 index 000000000..2191e58b5 --- /dev/null +++ b/src/images/icons/orange-sq.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/index.html b/src/index.html index 8019b83ec..d8437d032 100644 --- a/src/index.html +++ b/src/index.html @@ -6,14 +6,493 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> - Title + ХУДОЖНІЙ МУЗЕЙ + + - -

Hello Mate Academy

- + + +
+ +
+

ХУДОЖНІЙ МУЗЕЙ

+ +
+ +

КВИТКИ

+ + +
+
+ +
+
+

+ + NA +
+ MU + +

+
+
+ +
+ + ПОДІЇ + +
+
+ + + +
+

Актуальні події

+ +
+
+ +
+
+

ВИСТАВКА

+

+ 26.08-29.11.2019 +

+
+ +

+ Йду і повертаюсь + s +

+ +

+ Національний Художній Музей України презентує унікальну частину + колекції Градобанку - українське мистецтво другої половини 1980-1995 + років. +

+
+
+ +
+
+ +
+
+

ВИСТАВКА

+

+ 26.08-29.11.2019 +

+
+ +

+ І спогади і мрії + s +

+ +

+ Національний художній музей України до 100 річчя від дня народження + видатної української художниці Тетяни Яблонської відкриває + ретроспективну ювілейну виставку «І спогади і мрії». +

+
+
+ +
+
+ +
+
+

ЛЕКЦІЯ

+

+ 26/08/2019 - 11:00 +

+
+ +

+ Від класицизму до романтизму +

+
+
+ +
+

Галерея

+ +
+
+
+ pic1 +
+
+ pic2 +
+
+ pic3 +
+
+ pic4 +
+
+ +
+ + + +
+
+
+
+ + diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..babb65f24 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,41 @@ 'use strict'; + +const page = document.querySelector('.baseline-menu'); +const switcher = document.querySelector('.page__header'); +const switcher2 = document.querySelector('.page__main'); + +function toggleOpacity() { + page.classList.toggle('baseline-opacity'); + switcher.classList.toggle('page__header--opacity'); + switcher2.classList.toggle('page__main--opacity'); +} + +const toggleElements = [ + page, + document.querySelector('.baseline-close--tablet'), + document.querySelector('.baseline-close--phone'), + document.querySelector('.page__menu-section--first--element--a-gal'), + document.querySelector('.page__menu-section--first--element--a-eve'), + document.querySelector('.page__menu-section--first--element--a-gal-lec'), + document.querySelector('.page__menu-section--first--element--a-gal-cont') +]; + +toggleElements.forEach(el => { + if (el) { + el.addEventListener('click', toggleOpacity); + } +}); + +let currentSlide = 0; +const bullets = document.querySelectorAll('.page__main-section--gallery--slider-buttons--bullet'); + +function updateSlider(index) { + + bullets.forEach(bullet => bullet.classList.remove('page__main-section--gallery--slider-buttons--bullet-active')); + bullets[index].classList.add('page__main-section--gallery--slider-buttons--bullet-active'); +} + + +function changeSlide(index) { + updateSlider(index); +} diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index 45cdd5400..000000000 --- a/src/styles/_fonts.scss +++ /dev/null @@ -1,6 +0,0 @@ -@font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); - font-weight: normal; - font-style: normal; -} diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss deleted file mode 100644 index 3280c3fe1..000000000 --- a/src/styles/_utils.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import 'utils/vars'; -@import 'utils/mixins'; -@import 'utils/extends'; diff --git a/src/styles/blocks/_fonts.scss b/src/styles/blocks/_fonts.scss new file mode 100644 index 000000000..8e8d7294a --- /dev/null +++ b/src/styles/blocks/_fonts.scss @@ -0,0 +1,9 @@ +@font-face { + font-family: Roboto, Arial, Helvetica, sans-serif; + src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); + font-weight: normal; + font-style: normal; +} + +@import 'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap'; +@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'; diff --git a/src/styles/_typography.scss b/src/styles/blocks/_typography.scss similarity index 100% rename from src/styles/_typography.scss rename to src/styles/blocks/_typography.scss diff --git a/src/styles/blocks/_utils.scss b/src/styles/blocks/_utils.scss new file mode 100644 index 000000000..3fb975abf --- /dev/null +++ b/src/styles/blocks/_utils.scss @@ -0,0 +1,3 @@ +@import '../utils/vars'; +@import '../utils/mixins'; +@import '../utils/extends'; diff --git a/src/styles/blocks/baseline-menu.scss b/src/styles/blocks/baseline-menu.scss new file mode 100644 index 000000000..055d17610 --- /dev/null +++ b/src/styles/blocks/baseline-menu.scss @@ -0,0 +1,55 @@ +.baseline-menu { + opacity: 1; + background-image: url(../images/icons/Vector.png); + background-repeat: no-repeat; + background-position: center; + background-size: auto; + + width: 24px; + height: 24px; + + display: block; + position: absolute; + + margin-top: 27px; + + @include on-tablet { + margin-top: 39px; + } + + @include on-desktop { + margin-top: 40px; + } +} + +.baseline-opacity { + opacity: 1; +} + +.baseline-close { + &--tablet { + @include on-tablet { + background-image: url(../images/icons/close.png); + background-repeat: no-repeat; + background-position: center; + background-size: auto; + + width: 24px; + height: 24px; + } + } + + &--phone { + background-image: url(../images/icons/close.png); + background-repeat: no-repeat; + background-position: center; + background-size: auto; + + width: 24px; + height: 24px; + + @include on-tablet { + display: none; + } + } +} diff --git a/src/styles/blocks/footer-0.scss b/src/styles/blocks/footer-0.scss new file mode 100644 index 000000000..8f5a71502 --- /dev/null +++ b/src/styles/blocks/footer-0.scss @@ -0,0 +1,151 @@ +.page__footer--first { + margin: 100px -20px 50px; + + @include on-desktop { + margin-top: 200px; + } + + background-image: url('../images/footer-img.png'); + background-position: center; + background-size: cover; + background-repeat: no-repeat; + height: 386px; + + @include on-tablet { + height: 380px; + + margin-right: -39px; + margin-left: -39px; + } + + @include on-desktop { + height: 550px; + + margin-right: -55px; + margin-left: -55px; + } + + &-section { + margin: auto; + + &-h3 { + width: 100%; + padding-top: 88px; + margin: 0; + font-family: Montserrat, sans-serif; + font-size: 36px; + font-weight: 700; + line-height: 36px; + text-align: center; + color: #fff; + + @include on-tablet { + padding-top: 82px; + font-size: 48px; + line-height: 48px; + } + + @include on-desktop { + padding-top: 163px; + } + } + + &-p { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 18px; + line-height: 27px; + text-align: center; + color: #fff; + margin-top: 20px; + max-width: 280px; + margin-bottom: 50px; + + @include on-tablet { + max-width: 460px; + + font-size: 18px; + font-weight: 400; + line-height: 18px; + text-align: center; + margin-top: 16px; + margin-bottom: 64px; + } + + @include on-desktop { + margin-bottom: 72px; + } + } + + &--sub { + display: flex; + flex-wrap: wrap; + justify-content: center; + } + + &--form { + display: flex; + justify-content: center; + } + + &--cont { + display: flex; + } + + &__email { + height: 50px; + width: 230px; + padding-left: 24px; + + @include on-tablet { + height: 70px; + width: 374px; + margin-right: 16px; + } + + @include on-desktop { + height: 70px; + width: 470px; + margin-right: 20px; + padding-left: 32px; + } + + border: none; + outline-width: 0; + + font-family: Montserrat, sans-serif; + font-size: 14px; + line-height: 14px; + text-align: left; + color: #687480; + } + + &__button { + border: none; + outline-width: 0; + background-color: #f14a27; + transition: all $transition-speed; + + width: 50px; + height: 50px; + + @include on-tablet { + height: 70px; + width: 70px; + } + + &-arr { + width: 7.41px; + height: 12px; + + background-image: url(../images/icons/arrow-black.svg); + background-repeat: no-repeat; + background-position: center; + margin: auto; + } + + &:hover { + rotate: 90deg; + } + } + } +} diff --git a/src/styles/blocks/footer-1.scss b/src/styles/blocks/footer-1.scss new file mode 100644 index 000000000..a24bf8497 --- /dev/null +++ b/src/styles/blocks/footer-1.scss @@ -0,0 +1,258 @@ +.page__footer--second { + @include page-grid; + + &__NAMU { + margin-bottom: 40px; + grid-column: span 2; + grid-row: span 1; + + @include on-tablet { + grid-column: span 1; + } + + @include on-desktop { + grid-column: span 1; + } + + display: flex; + justify-content: space-between; + + @include on-tablet { + display: block; + } + + &--text { + font-family: Montserrat, sans-serif; + font-size: 36px; + font-weight: 700; + line-height: 36px; + text-align: left; + color: #0f0e08; + height: min-content; + } + + &--icons { + display: flex; + flex-wrap: nowrap; + gap: 20px; + margin-top: 24px; + + @include on-tablet { + margin-top: 62px; + } + + @include on-desktop { + margin-top: 69px; + } + } + + &--icon { + height: 24px; + width: 24px; + + &-fac { + background-image: url(../images/icons/facebook-letter-logo.svg); + } + + &-ins { + background-image: url(../images/icons/instagram.svg); + } + } + } + + &__schedule { + grid-column: span 1; + + @include on-tablet { + grid-column: span 2; + } + + @include on-desktop { + grid-column: 3 / 5; + } + + &--p { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 21px; + text-align: left; + color: #0f0e08; + margin-top: 0; + } + + &--li { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 21px; + text-align: left; + + &--span { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 14px; + font-weight: 600; + line-height: 21px; + text-align: left; + margin-right: 2px; + } + } + } + + &__сontacts { + grid-column: span 1; + + @include on-tablet { + grid-column: span 2; + } + + @include on-desktop { + grid-column: 5 / 7; + } + + &--p { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 21px; + text-align: left; + color: #0f0e08; + margin-top: 0; + } + } + + &__button { + @include on-tablet { + display: none; + } + + grid-column: 2 / 2; + + height: 50px; + width: 50px; + border: 1px solid #1a5a4c; + border-radius: 50%; + + background-image: url(../images/icons/arr-up.svg); + background-repeat: no-repeat; + background-position: center; + + justify-self: end; + } + + &__arr { + height: 1px; + width: 100%; + background: #1a5a4c80; + + grid-column: span 2; + margin-top: 20px; + margin-bottom: 20px; + + @include on-tablet { + grid-column: 2/ -2; + margin-top: 64px; + margin-bottom: 64px; + } + + @include on-desktop { + grid-column: 7 / 7; + width: 1px; + height: 260px; + margin-top: 0; + } + } + + &__about-us { + &--first { + grid-column: 1 / 1; + + @include on-tablet { + grid-column: 2 / 4; + } + + @include on-desktop { + grid-column: 8 / 10; + } + } + + &--second { + grid-column: 2 / 2; + + @include on-tablet { + grid-column: 4 / 6; + } + + @include on-desktop { + grid-column: 10 / 12; + } + } + + &-p { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 14px; + text-align: left; + color: #0f0e08; + display: block; + margin-bottom: 20px; + } + } + + &__copyright { + &-des { + grid-column: span 2; + + @include on-tablet { + grid-column: 1 / 3; + } + + @include on-desktop { + grid-column: 1 / 3; + } + } + + &-cop { + grid-column: span 2; + + @include on-tablet { + grid-column: 5 / 7; + } + + @include on-desktop { + grid-column: 11 / 13; + } + } + + &-p { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 12px; + font-weight: 300; + line-height: 16.88px; + text-align: center; + min-width: max-content; + margin-top: 80px; + + @include on-tablet { + margin-top: 120px; + } + + @include on-desktop { + margin-top: 87px; + } + + &-sec { + margin-top: 0; + + @include on-tablet { + margin-top: 120px; + } + + @include on-desktop { + margin-top: 87px; + } + } + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..7a6544158 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,182 @@ +.page__header { + height: 480px; + + @include on-tablet { + height: auto; + } + + transition: opacity $transition-speed; + + @include page-grid; + + grid-template-rows: repeat(2, 1fr); + + @include on-tablet { + grid-template-rows: repeat(1, 1fr); + } + + @include on-desktop { + grid-template-rows: repeat(1, 1fr); + } + + &--opacity { + opacity: 0.5; + } + + &-section { + &--h1 { + margin-top: 20px; + margin-bottom: 20px; + font-family: Montserrat, sans-serif; + font-size: 45px; + font-weight: 700; + line-height: 45px; + text-align: center; + + @include on-tablet { + font-size: 54px; + line-height: 64.8px; + text-align: left; + + margin-top: 127px; + margin-bottom: 38px; + } + + @include on-desktop { + font-size: 72px; + line-height: 86.4px; + text-align: left; + + margin-top: 206px; + + margin-bottom: 0; + } + } + + &--first { + grid-column: span 2; + + @include on-tablet { + grid-column: span 3; + } + + @include on-desktop { + grid-column: span 5; + + display: flex; + flex-wrap: wrap; + justify-content: flex-end; + } + } + + &--second { + margin-left: -20px; + margin-right: -20px; + + height: 300px; + width: 100vw; + + grid-column: span 2; + grid-row: 1 / 2; + + @include on-tablet { + grid-column: 4 / -1; + grid-row: span 1; + width: auto; + height: 384px; + margin-left: 0; + margin-right: -39px; + } + + @include on-desktop { + grid-column: 6 / -1; + height: 655px; + margin-right: -55px; + } + + background-image: url('../images/header-img.png'); + background-repeat: no-repeat; + background-size: cover; + background-position: bottom; + &--wrapper { + display: grid; + grid-template-columns: repeat(1, 1fr); + + @include on-tablet { + grid-template-columns: repeat(3, 1fr); + } + + @include on-desktop { + grid-template-columns: repeat(7, 1fr); + } + } + } + + &--h2 { + font-family: Montserrat, sans-serif; + font-size: 30px; + font-weight: 700; + line-height: 30px; + text-align: center; + margin: 0; + margin-top: 9px; + + grid-column: 1; + transition: all $transition-speed; + + &:hover { + transform: scale(1.1); + } + + @include on-tablet { + grid-column: 1 / 3; + + font-size: 36px; + line-height: 36px; + margin-top: 15px; + } + + @include on-desktop { + grid-column: 1 / 3; + + font-size: 36px; + line-height: 36px; + } + + &-a { + color: #0f0e08; + } + } + } + + &--events { + transform: rotate(-90deg); + display: none; + + @include on-desktop { + display: block; + } + + position: absolute; + top: 522px; + left: 55px; + + &::before { + content: ''; + background-color: #1a5a4c; + width: 70px; + height: 1px; + margin-bottom: 5px; + margin-right: 20px; + display: inline-block; + } + + &-a { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 14px; + line-height: 14px; + text-align: left; + color: #687480; + } + } +} diff --git a/src/styles/blocks/html.scss b/src/styles/blocks/html.scss new file mode 100644 index 000000000..23ad75c08 --- /dev/null +++ b/src/styles/blocks/html.scss @@ -0,0 +1,40 @@ +* { + box-sizing: border-box; +} + +li { + list-style-type: none; +} + +a { + text-decoration: none; +} + +.page { + scroll-behavior: smooth; + min-width: 320px; + margin: 0; + padding: 0; + + background: #fff; + padding-left: 20px; + padding-right: 20px; + + @include on-tablet { + padding-left: 39px; + padding-right: 39px; + } + + @include on-desktop { + padding-left: 55px; + padding-right: 55px; + } + + &--opacity { + opacity: 0.5; + } +} + +html { + scroll-behavior: smooth; +} diff --git a/src/styles/blocks/main.scss b/src/styles/blocks/main.scss new file mode 100644 index 000000000..46539dcfc --- /dev/null +++ b/src/styles/blocks/main.scss @@ -0,0 +1,399 @@ +.page__main { + margin-top: 70px; + + &--opacity { + opacity: 0.5; + } + + &-h2 { + grid-column: span 2; + + @include on-tablet { + grid-column: span 6; + } + + @include on-desktop { + grid-column: span 12; + grid-row: span 1; + } + + font-family: Montserrat, sans-serif; + font-size: 36px; + font-weight: 700; + line-height: 36px; + text-align: center; + color: #0f0e08; + + @include on-tablet { + font-size: 48px; + line-height: 48px; + text-align: left; + } + } + + &-section { + &--exhibition { + @include page-grid; + + margin-bottom: 60px; + + @include on-tablet { + margin-bottom: 64px; + } + + @include on-desktop { + margin-bottom: 104px; + } + + &--pic { + transition: all $transition-speed; + + &:hover { + transform: scale(1.03); + } + + &-first { + background-image: url('../images/Section1_p1.png'); + } + + &-second { + background-image: url('../images/Section1_p2.png'); + } + + background-size: 100% auto; + background-repeat: no-repeat; + background-position: center; + height: 210px; + + @include on-tablet { + height: 520px; + margin-bottom: 40px; + } + + grid-column: span 2; + + @include on-tablet { + grid-column: span 6; + } + + @include on-desktop { + grid-column: span 7; + } + } + + &--block { + grid-column: span 2; + + @include on-tablet { + grid-column: span 6; + } + + @include on-desktop { + grid-column: 8 / 13; + } + + &--date { + display: flex; + flex-wrap: nowrap; + gap: 20px; + align-items: center; + justify-content: space-between; + + @include on-tablet { + justify-content: left; + } + } + + &-p { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 16px; + text-align: left; + color: #687480; + + @include on-tablet { + font-size: 14px; + line-height: 14px; + } + } + + &-date { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 16px; + line-height: 24px; + text-align: left; + color: #1a5a4c; + font-weight: 700; + + @include on-tablet { + font-size: 14px; + font-weight: 700; + line-height: 21px; + } + } + } + + &-h3 { + font-family: Montserrat, sans-serif; + font-size: 28px; + line-height: 28px; + text-align: left; + color: #0f0e08; + margin: 0; + font-weight: normal; + + @include on-tablet { + font-size: 36px; + font-weight: 400; + line-height: 36px; + } + + &--img { + margin-bottom: 4px; + margin-left: 5px; + } + } + + &-p { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 16px; + line-height: 24px; + text-align: left; + color: #4e4e4e; + + @include on-tablet { + font-weight: 300; + } + } + } + &--lection { + &--img { + background-image: url(../images/Section2_p1.png); + background-repeat: no-repeat; + background-position: bottom; + height: 210px; + + margin-right: -20px; + margin-left: -20px; + + @include on-tablet { + height: 390px; + + margin-right: -39px; + margin-left: -39px; + } + + @include on-desktop { + height: 550px; + + margin-right: -55px; + margin-left: -55px; + } + } + + &--block { + position: relative; + top: -60px; + width: 280px; + background-color: #fff; + box-shadow: 0 2px 0 0 #1a5a4c40; + + margin: auto; + + padding: 20px 1px; + + @include on-tablet { + padding: 55px 50px; + width: 570px; + top: -114.5px; + } + + @include on-desktop { + padding: 100px 50px; + top: -156px; + } + + &--date { + display: flex; + flex-wrap: nowrap; + align-items: center; + justify-content: space-between; + gap: 20px; + } + + &-p { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 16px; + line-height: 24px; + text-align: left; + color: #4e4e4e; + margin: 0; + margin-left: 21px; + + @include on-tablet { + font-weight: 300; + margin: 0; + } + } + + &-date { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 16px; + line-height: 24px; + text-align: left; + color: #1a5a4c; + margin: 0; + width: 174px; + font-weight: 700; + + @include on-tablet { + font-size: 14px; + line-height: 21px; + width: 220px; + } + } + + &-h3 { + font-family: Montserrat, sans-serif; + font-size: 28px; + font-weight: 400; + line-height: 28px; + text-align: center; + color: #0f0e08; + margin: 0; + margin-top: 20px; + + @include on-tablet { + font-size: 36px; + line-height: 36px; + text-align: left; + margin-top: 23px; + } + + @include on-desktop { + font-size: 36px; + line-height: 36px; + text-align: left; + margin-top: 16px; + } + } + } + } + &--gallery { + &-h2 { + font-family: Montserrat, sans-serif; + font-size: 36px; + line-height: 36px; + text-align: left; + color: #0f0e08; + + @include on-tablet { + font-size: 48px; + font-weight: 700; + line-height: 48px; + } + } + + &--slider { + &-container { + @include page-grid; + } + + &-img { + & img { + width: 100%; + height: 100%; + object-fit: cover; + transition: all $transition-speed; + + &:hover { + transform: scale(1.03); + } + } + + &--first { + margin-bottom: 30px; + grid-column: span 2; + + @include on-tablet { + grid-column: span 3; + } + + @include on-desktop { + grid-column: span 4; + } + } + + &--second { + margin-bottom: 30px; + grid-column: span 1; + display: none; + + @include on-tablet { + display: block; + grid-column: span 3; + } + + @include on-desktop { + grid-column: 5 / -1; + } + } + + &--third { + display: none; + + @include on-tablet { + display: none; + } + + @include on-desktop { + display: block; + grid-column: span 8; + } + } + + &--fourth { + display: none; + + @include on-tablet { + display: none; + } + + @include on-desktop { + display: block; + grid-column: 9 / -1; + } + } + } + + &-buttons { + display: flex; + justify-content: center; + gap: 22px; + + @include on-desktop { + display: none; + } + + &--bullet { + display: inline-block; + + cursor: pointer; + text-align: center; + border: 1px solid #e0e0e0; + border-radius: 50%; + height: 8px; + width: 8px; + background-color: #e0e0e0; + + &-active { + border-color: #1a5a4c; + background-color: #1a5a4c; + } + } + } + } + } + } +} diff --git a/src/styles/blocks/page__menu.scss b/src/styles/blocks/page__menu.scss new file mode 100644 index 000000000..45a2615bc --- /dev/null +++ b/src/styles/blocks/page__menu.scss @@ -0,0 +1,155 @@ +.page__menu { + background-color: #1a5a4c; + position: fixed; + top: 0; + left: 0; + right: 0; + + opacity: 0; + transition: all $transition-speed; + transform: translateX(-100%); + pointer-events: none; + + padding: 27px 20px; + z-index: 2; + + @include on-tablet { + padding: 39px 40px; + height: 225px; + } + + @include on-desktop { + padding: 40px 55px; + height: 234px; + } + + display: flex; + flex-wrap: wrap; + justify-content: space-between; + + @include on-tablet { + flex-wrap: nowrap; + } + + &:target { + opacity: 1; + transform: translateX(0); + pointer-events: all; + } + + &-section { + &--line { + border-top: 1px solid #fff; + width: 100%; + height: 1px; + + @include on-tablet { + border-top: none; + border-left: 1px solid #fff; + width: 1px; + height: 100%; + } + } + + &--first { + width: 100%; + + @include on-tablet { + width: auto; + gap: 20px; + } + + @include on-desktop { + width: auto; + gap: 31px; + } + + display: flex; + flex-direction: row; + justify-content: space-between; + + &--element { + display: flex; + flex-direction: column; + + &--a { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 16px; + text-align: left; + color: #fff; + width: 100px; + + margin-bottom: 24px; + } + } + } + + &--second { + @include on-tablet { + display: flex; + gap: 38px; + } + + &--element { + margin-bottom: 20px; + margin-top: 24px; + + @include on-tablet { + margin-bottom: 0; + margin-top: 0; + + // max-width: 144px; + } + + &-text { + @include on-tablet { + display: flex; + gap: 20px; + flex-flow: column wrap; + } + } + + &--a { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 21px; + text-align: left; + color: #fff; + + &-grafic { + display: block; + margin-bottom: 20px; + } + } + + &-span { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 14px; + font-weight: 600; + line-height: 21px; + text-align: left; + color: #fff; + } + + &-weekends { + @include on-tablet { + max-width: 144px; + align-self: end; + } + + @include on-desktop { + max-width: 170px; + margin-right: 100px; + } + } + } + } + } +} + +.page:has(.page__menu:target) { + overflow: hidden; +} diff --git a/src/styles/blocks/tickets.scss b/src/styles/blocks/tickets.scss new file mode 100644 index 000000000..93038e38b --- /dev/null +++ b/src/styles/blocks/tickets.scss @@ -0,0 +1,43 @@ +.tickets { + width: 100%; + border: 1px solid #1a5a4c; + height: 50px; + display: flex; + + @include on-tablet { + max-width: 270px; + } + + &-section { + &--first { + display: flex; + justify-content: center; + width: calc(100% - 48px); + } + + &--second { + width: 48px; + height: 48px; + + background-color: #1a5a4c; + + background-image: url(../images/icons/arrow.svg); + background-repeat: no-repeat; + background-position: center; + transition: all $transition-speed; + + &:hover { + rotate: 90deg; + } + } + } + + &__text { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 16px; + font-weight: 500; + line-height: 16px; + text-align: center; + color: #0f0e08; + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..c9d82c34f 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,11 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} +@import './blocks/utils'; +@import './blocks/fonts'; +@import './blocks/typography'; +@import './blocks/html'; +@import './blocks/header'; +@import './blocks/baseline-menu'; +@import './blocks/page__menu'; +@import './blocks/tickets'; +@import './blocks/main'; +@import './blocks/footer-0'; +@import './blocks/footer-1'; diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..e20bfa2f7 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,33 @@ #{$_property}: $_toValue; } } + +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin page-grid { + --columns: 2; + + display: grid; + column-gap: 20px; + grid-template-columns: repeat(var(--columns), 1fr); + + @include on-tablet { + column-gap: 30px; + + --columns: 6; + } + + @include on-desktop { + --columns: 12; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..e15056e82 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,4 @@ $c-gray: #eee; +$tablet-min-width: 576px; +$desktop-min-width: 1024px; +$transition-speed: 0.3s;