diff --git a/src/images/desktop-header.webp b/src/images/desktop-header.webp new file mode 100644 index 000000000..ae130b8ba Binary files /dev/null and b/src/images/desktop-header.webp differ diff --git a/src/images/desktop_menu.webp b/src/images/desktop_menu.webp new file mode 100644 index 000000000..b4dc9db6a Binary files /dev/null and b/src/images/desktop_menu.webp differ diff --git a/src/images/events/desktop-1.webp b/src/images/events/desktop-1.webp new file mode 100644 index 000000000..a1a565797 Binary files /dev/null and b/src/images/events/desktop-1.webp differ diff --git a/src/images/events/desktop-2.webp b/src/images/events/desktop-2.webp new file mode 100644 index 000000000..915e1b0d4 Binary files /dev/null and b/src/images/events/desktop-2.webp differ diff --git a/src/images/events/mobile-1.webp b/src/images/events/mobile-1.webp new file mode 100644 index 000000000..1ff650f5c Binary files /dev/null and b/src/images/events/mobile-1.webp differ diff --git a/src/images/events/mobile-2.webp b/src/images/events/mobile-2.webp new file mode 100644 index 000000000..c596c6278 Binary files /dev/null and b/src/images/events/mobile-2.webp differ diff --git a/src/images/events/tablet-1.webp b/src/images/events/tablet-1.webp new file mode 100644 index 000000000..a77186322 Binary files /dev/null and b/src/images/events/tablet-1.webp differ diff --git a/src/images/events/tablet-2.webp b/src/images/events/tablet-2.webp new file mode 100644 index 000000000..5f26535d9 Binary files /dev/null and b/src/images/events/tablet-2.webp differ diff --git a/src/images/exhibitions/angel.webp b/src/images/exhibitions/angel.webp new file mode 100644 index 000000000..0e76546e8 Binary files /dev/null and b/src/images/exhibitions/angel.webp differ diff --git a/src/images/exhibitions/image -2.webp b/src/images/exhibitions/image -2.webp new file mode 100644 index 000000000..5204110a5 Binary files /dev/null and b/src/images/exhibitions/image -2.webp differ diff --git a/src/images/favicon.ico b/src/images/favicon.ico new file mode 100644 index 000000000..77b1893fa Binary files /dev/null and b/src/images/favicon.ico differ diff --git a/src/images/icons/arrow-disabled.svg b/src/images/icons/arrow-disabled.svg new file mode 100644 index 000000000..bf8442b58 --- /dev/null +++ b/src/images/icons/arrow-disabled.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/arrow-hover.svg b/src/images/icons/arrow-hover.svg new file mode 100644 index 000000000..af2b7eb53 --- /dev/null +++ b/src/images/icons/arrow-hover.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/arrow-pressed.svg b/src/images/icons/arrow-pressed.svg new file mode 100644 index 000000000..ebb2691fb --- /dev/null +++ b/src/images/icons/arrow-pressed.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/arrow.svg b/src/images/icons/arrow.svg new file mode 100644 index 000000000..1e8fb1c95 --- /dev/null +++ b/src/images/icons/arrow.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/burger-menu-icon.svg b/src/images/icons/burger-menu-icon.svg new file mode 100644 index 000000000..c86f620af --- /dev/null +++ b/src/images/icons/burger-menu-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icons/close-icon.svg b/src/images/icons/close-icon.svg new file mode 100644 index 000000000..2acae5e18 --- /dev/null +++ b/src/images/icons/close-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/dropdown-icon.svg b/src/images/icons/dropdown-icon.svg new file mode 100644 index 000000000..59ee73af5 --- /dev/null +++ b/src/images/icons/dropdown-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/facebook-icon.svg b/src/images/icons/facebook-icon.svg new file mode 100644 index 000000000..b7fd3f87c --- /dev/null +++ b/src/images/icons/facebook-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/instagram-icon.svg b/src/images/icons/instagram-icon.svg new file mode 100644 index 000000000..565be7fac --- /dev/null +++ b/src/images/icons/instagram-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/logo.svg b/src/images/icons/logo.svg new file mode 100644 index 000000000..e0eefadf9 --- /dev/null +++ b/src/images/icons/logo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/icons/menu-hover-icon.svg b/src/images/icons/menu-hover-icon.svg new file mode 100644 index 000000000..16c3d8446 --- /dev/null +++ b/src/images/icons/menu-hover-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icons/telegram-icon.svg b/src/images/icons/telegram-icon.svg new file mode 100644 index 000000000..4d5f64e31 --- /dev/null +++ b/src/images/icons/telegram-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/twitter-icon.svg b/src/images/icons/twitter-icon.svg new file mode 100644 index 000000000..b25455b0f --- /dev/null +++ b/src/images/icons/twitter-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/up-arrow-icon.svg b/src/images/icons/up-arrow-icon.svg new file mode 100644 index 000000000..53825bccc --- /dev/null +++ b/src/images/icons/up-arrow-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/mobile-header.webp b/src/images/mobile-header.webp new file mode 100644 index 000000000..b1e809ff6 Binary files /dev/null and b/src/images/mobile-header.webp differ diff --git a/src/images/news/desktop-new-1.webp b/src/images/news/desktop-new-1.webp new file mode 100644 index 000000000..9959f8527 Binary files /dev/null and b/src/images/news/desktop-new-1.webp differ diff --git a/src/images/news/desktop-new-2.webp b/src/images/news/desktop-new-2.webp new file mode 100644 index 000000000..20ecabd6a Binary files /dev/null and b/src/images/news/desktop-new-2.webp differ diff --git a/src/images/news/mobile-new-1.webp b/src/images/news/mobile-new-1.webp new file mode 100644 index 000000000..58cd8c818 Binary files /dev/null and b/src/images/news/mobile-new-1.webp differ diff --git a/src/images/news/mobile-new-2.webp b/src/images/news/mobile-new-2.webp new file mode 100644 index 000000000..eeb84e670 Binary files /dev/null and b/src/images/news/mobile-new-2.webp differ diff --git a/src/images/news/table-new-1.webp b/src/images/news/table-new-1.webp new file mode 100644 index 000000000..c21fc0c5d Binary files /dev/null and b/src/images/news/table-new-1.webp differ diff --git a/src/images/news/table-new-2.webp b/src/images/news/table-new-2.webp new file mode 100644 index 000000000..db5037029 Binary files /dev/null and b/src/images/news/table-new-2.webp differ diff --git a/src/images/plan/plan.webp b/src/images/plan/plan.webp new file mode 100644 index 000000000..fae7c8a42 Binary files /dev/null and b/src/images/plan/plan.webp differ diff --git a/src/images/tablet-header.webp b/src/images/tablet-header.webp new file mode 100644 index 000000000..9de0b0ac1 Binary files /dev/null and b/src/images/tablet-header.webp differ diff --git a/src/images/tablet_menu.webp b/src/images/tablet_menu.webp new file mode 100644 index 000000000..9e38c9666 Binary files /dev/null and b/src/images/tablet_menu.webp differ diff --git a/src/index.html b/src/index.html index 8019b83ec..ab9ce9d1c 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,613 @@ - + - Title + NAMU + + + + + + + -

Hello Mate Academy

+
+
+
+ + +
+ + +
+ +
+
+
+ +
+

+ 10 серпня - 10 листопада +

+

Мистецтво ХІХ - ХХ ст.

+

+ Внесок українських митців у світову культуру 19-20 ст. +

+ + + Купити квиток + +
+ +
+
10.08 - 10.11
+
+
+ +
+ Дівчина з Поділля +
+
+
+ +
+
+

Актуальні виставки

+
+
+ Скульптура ангела + +

11.07 - 22.09

+ +

Кураторська виставка “Ангели”

+ +

+ Виставковий проект «Ангели» – знакова подія для української + культури і водночас наймасштабніший... +

+ + + Купити квиток + +
+
+ Скульптура ангела + +

Діє постійно

+ +

Мистецтво ХХ ст. — XXI ст.

+ +

+ Знакові роботи Алли Горської, Миколи Самокиша, Федора Кричевського + та інших митців. +
+
+ +

+ + + Купити квиток + +
+
+ + Архів виставок + + + + + +
+ +
+

Найближчі події

+
+ Скульптура ангела +
+

14.08 о 13:00

+ +

Кураторські екскурсії від Павла Гудімова

+ +

+ Таємниці підготовки, історії експонатів, магія дійства до і в момент вашої присутності – розгортатиметься... +

+ + + Зареєструватись + +
+
+ +
+ Скульптура ангела +
+

16.08 о 13:00

+ +

Майстер-клас “Подорож до Австралії”

+ +

+ Цієї неділі о 14:00 на арт-мандрівників чекає останній пункт кругосвітньої подорожі - Австралія. +

+ + + Зареєструватись + +
+
+ + + Календар подій + + + + + +
+ +
+
+
+

+ Сплануйте візит до музею +

+

+ Оберіть зручний день, зареєструйтесь на події, що цікавлять, купіть квиток заздалегідь, щоб ніщо не завадило вам насолоджуватись мистецтвом. +

+ + Почати + +
+
+ +
+

Новини

+
+
+ Виставкові картини + +

9 серпня 2025

+ +

Оголошення переможця

+ +

+ Друзі, сьогодні п'ятниця! А це означає, що час оголосити переможця розіграшу... +

+
+ +
+ Скульптура ангела + +

9 серпня 2025

+ +

Міжнародний день котів

+ +

+ Музей з левами не може просто так взяти і пропустити Міжнародний день котів! +

+
+
+ + + Усі новини + + + + + +
+ +
+ + + + +
+
+ +
+ +
+ + + diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..39cb8e284 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,44 @@ 'use strict'; + +const input = document.querySelector('.form__input'); +const inputButton = document.querySelector('.form__input-button'); + +input.addEventListener('input', (e) => { + const stringValue = e.target.value; + const check = /@.*\./.test(stringValue); + + if (stringValue === '') { + e.target.classList.remove('form__input--filled'); + inputButton.disabled = true; + } else if (!check) { + e.target.classList.remove('form__input--filled'); + inputButton.disabled = true; + } else if (check) { + e.target.classList.add('form__input--filled'); + inputButton.disabled = false; + } +}); + +const exhibitions = document.querySelector('.section__article-wrapper'); +const events = document.querySelectorAll('.events'); +const news = document.querySelectorAll('.news'); + +const sectionObserver = new IntersectionObserver( + (entries, observer) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + entry.target.classList.add('visible'); + observer.unobserve(entry.target); + } + }); + }, + { + root: null, + threshold: 0.1, + delay: 100, + }, +); + +sectionObserver.observe(exhibitions); +events.forEach(article => sectionObserver.observe(article)); +news.forEach((article) => sectionObserver.observe(article)); diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss index 1837eb46e..6cea5b25f 100644 --- a/src/styles/_typography.scss +++ b/src/styles/_typography.scss @@ -1,3 +1,23 @@ h1 { @extend %h1; } + +h2 { + @extend %h2; +} + +h3 { + @extend %h3; +} + +h4 { + @extend %h4; +} + +h5 { + @extend %h5; +} + +p { + @extend %main-text; +} diff --git a/src/styles/aside/menu.scss b/src/styles/aside/menu.scss new file mode 100644 index 000000000..0d06e91a9 --- /dev/null +++ b/src/styles/aside/menu.scss @@ -0,0 +1,149 @@ +.menu { + height: 100vh; + display: flex; + flex-direction: column; + gap: 40px; + background-color: $main-gray; + overflow: auto; + + position: relative; + + @include on-tablet { + // height: fit-content; + gap: 50px; + } + + @include on-desktop { + gap: 60px; + } + + @include content-padding-inline; + @include page-grid; + + & > :nth-child(1) { + margin-bottom: -30px; + + @include on-tablet { + margin-bottom: -20px; + } + } + + &__top-bar { + grid-column: 1 / -1; + + position: sticky; + top: 0; + z-index: 1; + background-color: $main-gray; + box-shadow: 0 5px 9px -2px rgba(0, 0, 0, 0.75); + + margin-inline: -20px; + padding-inline: 20px; + + @include on-tablet { + margin-inline: -39px; + padding-inline: 39px; + } + + @include on-desktop { + margin-inline: -55px; + padding-inline: 55px; + } + } + + &__wrapper-info { + grid-column: 1 / -1; + + @include on-tablet { + display: flex; + gap: 123px; + } + + @include on-desktop { + margin-bottom: 10px; + gap: 83px; + } + } + + &__schedule { + padding-bottom: 20px; + } + + &__paragraph-title { + margin: 0; + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 140%; + letter-spacing: 0; + vertical-align: middle; + color: $main-white; + } + + &__paragraph-info { + margin: 0; + font-family: Raleway, sans-serif; + font-weight: 600; + font-size: 16px; + line-height: 150%; + letter-spacing: 0; + vertical-align: middle; + color: $main-white; + + &--link { + text-decoration: none; + + @include underscore; + } + } + + &__address { + font-style: normal; + } + + &__nav { + grid-column: 1 / -1; + } + + &__hr { + grid-column: 1 / -1; + color: $main-white; + width: 100%; + height: 1px; + border: none; + background-color: $main-white; + + @include on-desktop { + grid-column: 1 / 7; + } + } + + &__button { + grid-column: 1 / -1; + } + + &__container-image { + display: none; + + @include on-tablet { + display: block; + grid-column: 1 / -1; + background-image: url('../images/tablet_menu.webp'); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + height: 466px; + margin: auto; + aspect-ratio: 1 / 1.1; + } + + @include on-desktop { + background-image: url('../images/desktop_menu.webp'); + position: absolute; + bottom: 0; + right: 0; + transform: translateX(55px); + height: calc(100vh - 100px); + } + } +} diff --git a/src/styles/blocks/button/button.scss b/src/styles/blocks/button/button.scss new file mode 100644 index 000000000..2176b2721 --- /dev/null +++ b/src/styles/blocks/button/button.scss @@ -0,0 +1,47 @@ +.button { + @include button; + @include hover(box-shadow, -1px 5px 14px 2px rgba(173, 47, 47, 0.74)); + @include hover(transform, translateY(-3px)); + @include hover(background-color, $hover-red-button); + + &--light-shadow{ + @include hover(box-shadow, 0 3px 14px 2px rgba(232,213,213,0.74)); + + + } + + &:active { + background-color: $active-red-button; + } + + &:disabled { + background-color: $disabled-red-button; + } + + &--light { + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + box-sizing: border-box; + border: 1px solid $main-red-button; + color: $main-red-button; + background-color: $main-white; + + @include hover(color, $hover-red-button); + @include hover(border-color, $hover-red-button); + @include hover(background-color, $main-white); + @include hover(box-shadow, -1px 5px 14px 2px rgba(173, 47, 47, 0.74)); + @include hover(transform, translateY(-3px)); + + &:active { + border-color: $active-red-button; + color: $active-red-button; + } + + &:disabled { + border-color: $disabled-red-button; + color: $disabled-red-button; + } + } +} diff --git a/src/styles/blocks/nav/nav.scss b/src/styles/blocks/nav/nav.scss new file mode 100644 index 000000000..3d41311af --- /dev/null +++ b/src/styles/blocks/nav/nav.scss @@ -0,0 +1,46 @@ +.nav { + &__list { + list-style-type: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + gap: 20px; + + @include on-tablet { + gap: 30px; + } + + @include on-desktop { + gap: 60px; + } + + &--footer { + gap: 5px; + + @include on-tablet { + gap: 10px; + } + } + } + + &__link { + text-decoration: none; + font-family: 'Playfair Display', sans-serif; + font-weight: 700; + font-size: 20px; + line-height: 150%; + letter-spacing: 0; + vertical-align: middle; + color: $main-white; + + @include underscore; + + &--footer { + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 150%; + } + } +} diff --git a/src/styles/footer/footer.scss b/src/styles/footer/footer.scss new file mode 100644 index 000000000..efe09684a --- /dev/null +++ b/src/styles/footer/footer.scss @@ -0,0 +1,158 @@ +.footer { + background-color: $main-gray; + padding-block: 35px 30px; + + @include page-grid; + @include content-padding-inline; + + &__contacts { + margin-bottom: 50px; + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / span 2; + margin-bottom: 60px; + } + + @include on-desktop { + grid-column: 1 / span 3; + margin-bottom: 70px; + } + } + + &__title { + color: $main-white; + margin-bottom: 10px; + + @include on-tablet { + margin-bottom: 30px; + } + } + + &__address { + font-style: normal; + } + + &__link { + text-decoration: none; + color: $main-white; + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 150%; + + @include underscore; + } + + &__wrapper-email { + padding-bottom: 30px; + + @include on-tablet { + padding-bottom: 50px; + } + } + + &__social-media { + display: flex; + gap: 20px; + } + + &__icon { + width: 20px; + height: 20px; + + @include hover(transform, scale(1.2)); + + &--face { + background-image: url('../images/icons/facebook-icon.svg'); + } + + &--twit { + background-image: url('../images/icons/twitter-icon.svg'); + } + + &--teleg { + background-image: url('../images/icons/telegram-icon.svg'); + } + + &--inst { + background-image: url('../images/icons/instagram-icon.svg'); + } + } + + &__sicial-media-link { + display: block; + width: 20px; + height: 20px; + } + + &__schedul { + margin-bottom: 50px; + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 3 / span 2; + margin-bottom: 60px; + } + + @include on-desktop { + grid-column: 5 / span 4; + margin-bottom: 70px; + } + } + + &__wrapper-nav { + margin-bottom: 50px; + + @include on-tablet { + margin-bottom: 60px; + grid-column: 5 / -1; + } + + @include on-desktop { + grid-column: 9 / -1; + } + } + + &__work-time { + color: $main-white; + } + + &__link-title { + display: block; + text-decoration: none; + width: fit-content; + + @include underscore; + } + + &__wrapper-legal { + display: flex; + gap: 22px; + } + + &__privacy-terms { + display: flex; + justify-content: space-between; + align-items: center; + + grid-column: 1 / -1; + } + + &__legal { + color: $main-white; + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 140%; + text-align: center; + } + + &__up-arrow { + background-image: url('../images/icons/up-arrow-icon.svg'); + width: 30px; + height: 30px; + + @include hover(transform, scale(1.2)); + } +} diff --git a/src/styles/header/header.scss b/src/styles/header/header.scss new file mode 100644 index 000000000..be34a9a02 --- /dev/null +++ b/src/styles/header/header.scss @@ -0,0 +1,130 @@ +.header { + position: relative; + background-color: $main-gray; + + @include page-grid; + @include content-padding-inline; + + &__top-bar { + grid-column: 1 / -1; + } + + &__center { + padding-block: 50px; + grid-column: 1 / -1; + + @include on-tablet { + padding-block: 100px 70px; + grid-column: 1 / span 5; + } + + @include on-desktop { + padding-block: 90px 135px; + grid-column: 1 / span 6; + grid-row: 2; + } + } + + &__title { + margin: 0; + margin-block: 10px 30px; + font-family: 'Playfair Display', sans-serif; + font-weight: 700; + font-size: 48px; + line-height: 100%; + letter-spacing: 0; + color: $main-white; + + @include on-tablet { + margin-bottom: 20px; + font-size: 72px; + } + + @include on-desktop { + margin-bottom: 30px; + } + } + + &__paragraph { + margin: 0; + font-family: Raleway, sans-serif; + font-weight: 400; + letter-spacing: 0; + color: $main-white; + + &--before-title { + font-size: 14px; + line-height: 140%; + } + + &--after-title { + font-size: 16px; + line-height: 150%; + margin-bottom: 40px; + + @include on-tablet { + margin-bottom: 50px; + } + + @include on-desktop { + margin-bottom: 81px; + } + } + } + + &__wrapper-hr { + display: none; + gap: 20px; + align-items: center; + + grid-column: 1 / span 6; + grid-row: 3; + padding-bottom: 50px; + + @include on-desktop { + display: flex; + } + } + + &__date { + margin: 0; + font-family: 'Playfair Display', sans-serif; + font-weight: 700; + font-size: 14px; + line-height: 125%; + letter-spacing: 0; + color: $main-white; + } + + &__hr { + height: 1px; + background-color: $main-white; + flex-grow: 1; + } + + &__image-container { + grid-column: 1 / -1; + + @include on-desktop { + // grid-column: 7 / -1; + // grid-row: 2 / span 2; + + position: absolute; + left: 100%; + bottom: 0; + transform: translateX(calc(-100% + 55px)); + } + } + + &__image { + display: block; + margin: auto; + object-fit: cover; + + @include on-desktop { + margin: 0; + max-width: 703px; + max-height: 746px; + } + } +} diff --git a/src/styles/header/top-bar.scss b/src/styles/header/top-bar.scss new file mode 100644 index 000000000..5d516d014 --- /dev/null +++ b/src/styles/header/top-bar.scss @@ -0,0 +1,89 @@ +.top-bar { + display: flex; + justify-content: space-between; + align-items: center; + height: 80px; + + @include on-tablet { + height: 77px; + } + + @include on-desktop { + height: 90px; + } + + &__logo { + background-image: url('../images/icons/logo.svg'); + background-size: contain; + background-position: center; + width: 123px; + height: 40px; + } + + &__menu { + display: flex; + gap: 40px; + align-items: center; + } + + &__burger-memu { + display: block; + text-decoration: none; + width: 30px; + height: 30px; + z-index: 1; + + background-size: cover; + + @include hover(scale, 1.2); + + &--open { + background-image: url('../images/icons/burger-menu-icon.svg'); + + @include hover( + background-image, + url('../images/icons/menu-hover-icon.svg') + ); + } + + &--close { + background-image: url('../images/icons/close-icon.svg'); + } + } + + &__lang { + display: none; + + @include on-tablet { + display: block; + } + + &--mobile { + display: block; + order: -1; + + @include on-tablet { + order: 0; + } + } + } + + &__select { + background-color: $main-gray; + border: none; + outline: none; + color: $main-white; + cursor: pointer; + } + + &__option { + color: $main-white; + font-family: Raleway, sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 150%; + letter-spacing: 0; + text-align: center; + vertical-align: middle; + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..922af8c6c 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,44 @@ @import 'utils'; @import 'fonts'; @import 'typography'; +@import './header/header'; +@import './header/top-bar'; +@import './blocks/button/button'; +@import './blocks/nav/nav'; +@import './aside/menu'; +@import './main/main-block'; +@import './footer/footer'; body { + margin: 0; background: $c-gray; } + +.page { + position: relative; + scroll-behavior: smooth; + + &:has(.page__menu:target) { + overflow: hidden; + } + + &__menu { + position: fixed; + left: 0; + right: 0; + top: 0; + transform: translateY(-100%); + opacity: 0; + transition: all $transition; + z-index: 2; + + &:target { + opacity: 1; + transform: translateY(0); + } + } + + &__container { + background-color: $main-gray; + } +} diff --git a/src/styles/main/events.scss b/src/styles/main/events.scss new file mode 100644 index 000000000..61aa4d7a3 --- /dev/null +++ b/src/styles/main/events.scss @@ -0,0 +1,95 @@ +.events { + display: flex; + flex-direction: column; + + grid-column: 1 / -1; + margin-bottom: 60px; + + @include on-tablet { + flex-direction: row; + gap: 30px; + } + + &--translate-right { + opacity: 0; + transform: translateX(100px); + transition: all $transition; + + &.visible { + opacity: 1; + transform: translateX(0); + } + } + + &--translate-left { + opacity: 0; + transform: translateX(-100px); + transition: all $transition; + + &.visible { + opacity: 1; + transform: translateX(0); + } + } + + &__image { + width: 100%; + + @include on-tablet { + height: 422px; + width: 330px; + } + + @include on-desktop { + height: 475px; + width: 370px; + } + + @include hover(transform, scale(1.05)); + } + + &__wrapper-info { + @include on-tablet { + width: calc((100% - 30px) / 2); + } + } + + &__period { + margin: 0; + margin-top: 20px; + color: $main-red-button; + + @include on-tablet { + margin-top: 0; + } + + @include on-desktop { + margin-top: 20px; + } + } + + &__title { + margin: 0; + margin-block: 10px 20px; + } + + &__description { + margin-bottom: 30px; + + @include on-tablet { + margin-bottom: 40px; + } + + @include on-desktop { + margin-bottom: 50px; + } + } + + &__button { + margin-top: -30px; + + @include on-tablet { + margin-top: 0; + } + } +} diff --git a/src/styles/main/exhibitions.scss b/src/styles/main/exhibitions.scss new file mode 100644 index 000000000..4e0ec1467 --- /dev/null +++ b/src/styles/main/exhibitions.scss @@ -0,0 +1,67 @@ +.exhibitions { + height: 100%; + + @include on-tablet { + width: 50%; + } + + &__period { + margin: 0; + margin-top: 20px; + color: $main-red-button; + + @include on-tablet { + margin-top: 30px; + } + + @include on-desktop { + margin-top: 20px; + } + } + + &__image { + width: 100%; + aspect-ratio: 1 / 1.27; + object-fit: cover; + object-position: 20% 50%; + + @include on-tablet { + height: 420px; + } + + @include on-desktop { + height: 484px; + } + + @include hover(transform, scale(1.05)); + } + + &__title { + margin: 0; + margin-block: 10px 20px; + } + + &__description { + margin-bottom: 30px; + + @include on-tablet { + margin-bottom: 40px; + } + + @include on-desktop { + margin-bottom: 50px; + } + } + + &__break-line { + display: none; + + @include on-tablet { + display: block; + } + + @include on-tablet-max { + display: none; + } + } +} diff --git a/src/styles/main/form.scss b/src/styles/main/form.scss new file mode 100644 index 000000000..52d81f0f9 --- /dev/null +++ b/src/styles/main/form.scss @@ -0,0 +1,80 @@ +.form { + &__input { + outline: none; + border: none; + display: block; + background-color: $c-gray; + border-bottom: 1px solid $title-black; + width: 100%; + box-sizing: border-box; + margin-bottom: 30px; + transition: all $transition; + + @include on-desktop { + margin-bottom: 40px; + } + + &::placeholder { + content: 'e-mail'; + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: 0%; + vertical-align: middle; + color: $title-black; + transition: all $transition; + } + + &:hover { + border-color: $main-red-button; + + &::placeholder { + color: $main-red-button; + } + } + + &:focus { + color: $main-red-button; + border-color: $main-red-button; + } + + &:focus::placeholder { + color: transparent; + border-color: $main-red-button; + } + + &--filled { + font-family: Raleway, sans-serif; + font-weight: 700; + font-size: 16px; + line-height: 150%; + vertical-align: middle; + color: $title-black; + border-color: $title-black; + + &:focus { + border-color: $title-black; + color: $title-black; + } + } + } + + &__input-button { + all: unset; + width: 100%; + cursor: pointer; + + @include button; + @include hover(background-color, $hover-red-button); + + &:active { + background-color: $active-red-button; + } + + &:disabled { + background-color: $disabled-red-button; + cursor: not-allowed; + } + } +} diff --git a/src/styles/main/main-block.scss b/src/styles/main/main-block.scss new file mode 100644 index 000000000..e69073343 --- /dev/null +++ b/src/styles/main/main-block.scss @@ -0,0 +1,8 @@ +@import './exhibitions'; +@import './section'; +@import './events'; +@import './plan'; +@import './news'; +@import './subscribe'; +@import './form'; + diff --git a/src/styles/main/news.scss b/src/styles/main/news.scss new file mode 100644 index 000000000..ae5c05d2c --- /dev/null +++ b/src/styles/main/news.scss @@ -0,0 +1,61 @@ +.news { + &--translate-left { + opacity: 0; + transform: translateX(-100px); + transition: all $transition; + + &.visible { + opacity: 1; + transform: translateX(0); + } + } + + &--translate-right { + opacity: 0; + transform: translateX(100px); + transition: all $transition; + + &.visible { + opacity: 1; + transform: translateX(0); + } + } + + &__image { + width: 100%; + aspect-ratio: 1 / 1; + object-fit: cover; + + @include on-tablet { + height: 330px; + width: 330px; + } + + @include on-desktop { + height: 370px; + width: 570px; + } + + @include hover(transform, scale(1.05)); + } + + &__period { + margin-top: 20px; + + @include on-tablet { + margin-top: 30px; + } + + @include on-desktop { + margin-top: 20px; + } + } + + &__title { + margin: 0; + } + + &__description { + margin-top: 20px; + } +} diff --git a/src/styles/main/plan.scss b/src/styles/main/plan.scss new file mode 100644 index 000000000..5f80bfc01 --- /dev/null +++ b/src/styles/main/plan.scss @@ -0,0 +1,53 @@ +.plan { + background-color: $main-gray; + position: relative; + + @include content-padding-inline; + @include page-grid; + + &__info { + padding-block: 50px; + grid-column: 1 / -1; + + @include on-tablet { + padding-block: 80px; + grid-column: 1 / span 5; + } + + @include on-desktop { + padding-block: 205px; + grid-column: 6 / -1; + } + } + + &__title { + margin: 0; + color: $main-white; + } + + &__description { + margin-block: 20px 40px; + color: $main-white; + + @include on-tablet { + margin-block: 20px 60px; + } + + @include on-desktop { + margin-block: 10px 50px; + } + } + + &__img-container { + display: none; + + @include on-desktop { + display: block; + position: absolute; + width: 555px; + height: 100%; + background-image: url('../images/plan/plan.webp'); + background-repeat: no-repeat; + } + } +} diff --git a/src/styles/main/section.scss b/src/styles/main/section.scss new file mode 100644 index 000000000..2f656c447 --- /dev/null +++ b/src/styles/main/section.scss @@ -0,0 +1,72 @@ +.section { + padding-block: 90px 30px; + overflow-x: hidden; + + + @include content-padding-inline; + @include page-grid; + + &__title { + margin: 0; + margin-bottom: 60px; + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 5; + grid-row: 1; + } + + @include on-desktop { + grid-column: 1 / 7; + grid-row: 1; + } + } + + &__article-wrapper { + display: flex; + flex-direction: column; + gap: 60px; + padding-bottom: 30px; + grid-column: 1 / -1; + overflow-x: hidden; + + @include on-tablet { + flex-direction: row; + gap: 30px; + } + + &--news { + gap: 50px; + + @include on-tablet { + flex-direction: row; + gap: 30px; + } + } + + &--translate { + opacity: 0; + transform: translateX(-100px); + transition: all $transition; + + &.visible { + opacity: 1; + transform: translateX(0); + } + } + } + + &__button { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 5 / -1; + grid-row: 1; + } + + @include on-desktop { + grid-column: 10 / span 3; + grid-row: 1; + } + } +} diff --git a/src/styles/main/subscribe.scss b/src/styles/main/subscribe.scss new file mode 100644 index 000000000..702282f8d --- /dev/null +++ b/src/styles/main/subscribe.scss @@ -0,0 +1,48 @@ +.subscribe { + padding-block: 90px 80px; + + @include content-padding-inline; + @include page-grid; + + @include on-tablet { + padding-block: 130px 128px; + } + + @include on-desktop { + padding-block: 170px 200px; + } + + &__title { + grid-column: 1 / -1; + margin: 0; + margin-block: 90px 20px; + + @include on-desktop { + grid-column: 1 / span 5; + grid-row: 1; + margin-block: 0 50px; + } + } + + &__description { + grid-column: 1 / -1; + margin-bottom: 50px; + + @include on-desktop { + grid-column: 7 / -1; + grid-row: 1; + } + } + + &__form { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / span 4; + } + + @include on-desktop { + grid-column: 1 / span 5; + } + } +} diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index d7201e7b3..e30b9841b 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -2,3 +2,75 @@ font-family: Roboto, sans-serif; font-weight: 400; } + +%h2 { + font-family: 'Playfair Display', sans-serif; + font-weight: 700; + font-size: 38px; + line-height: 125%; + letter-spacing: 0; + vertical-align: middle; + color: $title-black; + + @include on-tablet { + font-size: 62px; + } + + @include on-desktop { + font-size: 80px; + line-height: 120%; + } +} + +%h3 { + font-family: 'Playfair Display', sans-serif; + font-weight: 700; + font-size: 28px; + line-height: 125%; + letter-spacing: 0; + vertical-align: middle; + color: $title-black; + + @include on-tablet { + font-size: 40px; + } + + @include on-desktop { + font-size: 48px; + } +} + +%h4 { + font-family: 'Playfair Display', sans-serif; + font-weight: 700; + font-size: 20px; + line-height: 125%; + letter-spacing: 0; + + @include on-tablet { + font-size: 24px; + } +} + +%h5 { + margin: 0; + font-family: 'Playfair Display', sans-serif; + font-weight: 700; + font-size: 18px; + line-height: 150%; + vertical-align: middle; + + @include on-tablet { + font-size: 20px; + } +} + +%main-text { + margin: 0; + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: 0; + vertical-align: middle; +} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..ef3a95730 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,101 @@ @mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; + transition: all $transition; &:hover { #{$_property}: $_toValue; } } + +@mixin on-tablet { + @media (min-width: $table-min-width) { + @content; + } +} + +@mixin on-tablet-max { + @media (min-width: 705px) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin on-design { + @media (min-width: $design-min-width) { + @content; + } +} + +@mixin content-padding-inline { + padding-inline: 20px; + + @include on-tablet { + padding-inline: 39px; + } + + @include on-desktop { + padding-inline: 55px; + } + + @include on-design { + max-width: 1440px; + margin: auto; + } +} + +@mixin page-grid { + --columns: 2; + + display: grid; + column-gap: 20px; + grid-template-columns: repeat(var(--columns), 1fr); + + @include on-tablet { + --columns: 6; + + column-gap: 30px; + } + + @include on-desktop { + --columns: 12; + } +} + +@mixin button { + display: block; + text-decoration: none; + max-width: 330px; + height: 60px; + background-color: $main-red-button; + color: $main-white; + font-family: Raleway, sans-serif; + font-weight: 600; + font-size: 16px; + line-height: 60px; + letter-spacing: 0; + text-align: center; +} + +@mixin underscore { +position: relative; + +&::after { + content: ''; + display: block; + position: absolute; + height: 2px; + width: 100%; + background-color: #f1f5f4; + bottom: -3px; + transform: scale(0); + transform-origin: left; + transition: transform $transition; + } + + &:hover::after { + transform: scale(1); + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..6608fb155 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,12 @@ $c-gray: #eee; +$main-white: #f1f5f4; +$main-gray: #3f5252; +$title-black: #1C1B29; +$main-red-button: #cd4d31; +$hover-red-button: #af3419; +$active-red-button: #ea340d; +$disabled-red-button: #dd836f; +$table-min-width: 640px; +$desktop-min-width: 1280px; +$design-min-width: 1440px; +$transition: 0.3s;