diff --git a/src/images/events/event-one-desktop.png b/src/images/events/event-one-desktop.png new file mode 100644 index 000000000..a2e4b12e6 Binary files /dev/null and b/src/images/events/event-one-desktop.png differ diff --git a/src/images/events/event-one-mob.png b/src/images/events/event-one-mob.png new file mode 100644 index 000000000..f3734d125 Binary files /dev/null and b/src/images/events/event-one-mob.png differ diff --git a/src/images/events/event-one-tablet.png b/src/images/events/event-one-tablet.png new file mode 100644 index 000000000..166f901dd Binary files /dev/null and b/src/images/events/event-one-tablet.png differ diff --git a/src/images/events/event-three-mob.png b/src/images/events/event-three-mob.png new file mode 100644 index 000000000..c7b3c2bb9 Binary files /dev/null and b/src/images/events/event-three-mob.png differ diff --git a/src/images/events/event-two-desktop.png b/src/images/events/event-two-desktop.png new file mode 100644 index 000000000..429ba5a92 Binary files /dev/null and b/src/images/events/event-two-desktop.png differ diff --git a/src/images/events/event-two-mob.png b/src/images/events/event-two-mob.png new file mode 100644 index 000000000..9e74fa8d3 Binary files /dev/null and b/src/images/events/event-two-mob.png differ diff --git a/src/images/events/event-two-tablet.png b/src/images/events/event-two-tablet.png new file mode 100644 index 000000000..f822e0409 Binary files /dev/null and b/src/images/events/event-two-tablet.png 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/gallery/one.jpg b/src/images/gallery/one.jpg new file mode 100644 index 000000000..0f68e92b1 Binary files /dev/null and b/src/images/gallery/one.jpg differ diff --git a/src/images/gallery/park.png b/src/images/gallery/park.png new file mode 100644 index 000000000..e378b220b Binary files /dev/null and b/src/images/gallery/park.png differ diff --git a/src/images/gallery/slide-four.png b/src/images/gallery/slide-four.png new file mode 100644 index 000000000..983539a88 Binary files /dev/null and b/src/images/gallery/slide-four.png differ diff --git a/src/images/gallery/slide-one.png b/src/images/gallery/slide-one.png new file mode 100644 index 000000000..dffe70ea3 Binary files /dev/null and b/src/images/gallery/slide-one.png differ diff --git a/src/images/gallery/slide-three.png b/src/images/gallery/slide-three.png new file mode 100644 index 000000000..1267a9ccc Binary files /dev/null and b/src/images/gallery/slide-three.png differ diff --git a/src/images/gallery/slide-two.png b/src/images/gallery/slide-two.png new file mode 100644 index 000000000..2b64d0a16 Binary files /dev/null and b/src/images/gallery/slide-two.png differ diff --git a/src/images/gallery/subscription-desck.png b/src/images/gallery/subscription-desck.png new file mode 100644 index 000000000..3f8e40352 Binary files /dev/null and b/src/images/gallery/subscription-desck.png differ diff --git a/src/images/gallery/subscription-mob.png b/src/images/gallery/subscription-mob.png new file mode 100644 index 000000000..02ccd663b Binary files /dev/null and b/src/images/gallery/subscription-mob.png differ diff --git a/src/images/gallery/subscription-tab.png b/src/images/gallery/subscription-tab.png new file mode 100644 index 000000000..7cc7e101b Binary files /dev/null and b/src/images/gallery/subscription-tab.png differ diff --git a/src/images/icon/arrow-icon.svg b/src/images/icon/arrow-icon.svg new file mode 100644 index 000000000..0992cc787 --- /dev/null +++ b/src/images/icon/arrow-icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icon/arrow-up-icon.png b/src/images/icon/arrow-up-icon.png new file mode 100644 index 000000000..c0a26f72d Binary files /dev/null and b/src/images/icon/arrow-up-icon.png differ diff --git a/src/images/icon/black-arrow-icon.svg b/src/images/icon/black-arrow-icon.svg new file mode 100644 index 000000000..0da1e9b20 --- /dev/null +++ b/src/images/icon/black-arrow-icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icon/close-icon.svg b/src/images/icon/close-icon.svg new file mode 100644 index 000000000..e29f10494 --- /dev/null +++ b/src/images/icon/close-icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icon/facebook-logo.svg b/src/images/icon/facebook-logo.svg new file mode 100644 index 000000000..4ccaf0aba --- /dev/null +++ b/src/images/icon/facebook-logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icon/instagram-logo.svg b/src/images/icon/instagram-logo.svg new file mode 100644 index 000000000..4c9b6ca10 --- /dev/null +++ b/src/images/icon/instagram-logo.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/images/icon/logo.svg b/src/images/icon/logo.svg new file mode 100644 index 000000000..07e6290c4 --- /dev/null +++ b/src/images/icon/logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/menu-hover-icon.svg b/src/images/icon/menu-hover-icon.svg new file mode 100644 index 000000000..8c4c5b56e --- /dev/null +++ b/src/images/icon/menu-hover-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/images/icon/menu-icon.svg b/src/images/icon/menu-icon.svg new file mode 100644 index 000000000..f08cc7c6a --- /dev/null +++ b/src/images/icon/menu-icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/musem.png b/src/images/musem.png new file mode 100644 index 000000000..aba31ed2e Binary files /dev/null and b/src/images/musem.png differ diff --git a/src/index.html b/src/index.html index 8019b83ec..437993fef 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,551 @@ - + - Title + Art Museum + + + + + + + -

Hello Mate Academy

- +
+
+
+ +
+ +
+ + + +
+ +
+
+

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

+
+ +
+ + КВИТКИ + +
+
+
+
+
+ +
+
+

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

+ +
+
+
+ Йду і повертаюсь +
+ +
+
+
ВИСТАВКА
+ +
26.08-29.11.2019
+
+ +

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

+ +

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

+
+
+ +
+
+ І спогади і мрії +
+ +
+
+
ВИСТАВКА
+ +
26.08-29.11.2019
+
+ +

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

+ +

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

+
+
+
+ +
+
+ І спогади і мрії +
+ +
+
+
+
лекція
+ +
26/08/2019 - 11:00
+
+ +

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

+
+
+
+
+ + + +
+
+

Підписка

+ + +
+
+ + Бути в курсі всіх актуальних подій та останніх новин. + + +
+ + +
+
+
+
+
+
+ + diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..2f0c203ee 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,3 @@ -'use strict'; +import slider from './slider'; + +slider(); diff --git a/src/scripts/slider.js b/src/scripts/slider.js new file mode 100644 index 000000000..777bcdc98 --- /dev/null +++ b/src/scripts/slider.js @@ -0,0 +1,68 @@ +export default function slider() { + const collectionSlides = document.querySelectorAll('.slider__slide'); + const slides = Array.from(collectionSlides); + const dotContainer = document.querySelector('.slider__dots'); + let currentSlide = 0; + const cloneFirsSlide = collectionSlides[0].cloneNode(true); + + slides.push(cloneFirsSlide); + dotContainer.insertAdjacentElement('beforebegin', cloneFirsSlide); + + const createDots = () => { + slides.forEach((_, i) => { + if (i <= 3) { + dotContainer.insertAdjacentHTML( + 'beforeend', + ``, + ); + } + }); + }; + + const activateDot = (numberSlide) => { + const collectonDots = document.querySelectorAll('.slider__button'); + + collectonDots.forEach((dot) => { + dot.classList.remove('slider__button--active'); + }); + + document + .querySelector(`.slider__button[data-slide='${numberSlide}']`) + .classList.add('slider__button--active'); + }; + + const goToSlide = (numberSlide) => { + slides.forEach((s, i) => { + s.style.transform = `translate(${100 * (i - numberSlide)}%)`; + }); + }; + + slides.forEach((s, i) => { + s.style.transform = `translate(${100 * i}%)`; + }); + + dotContainer.addEventListener('click', (e) => { + const { slide } = e.target.dataset; + + if (!slide) { + return; + } + + activateDot(slide); + goToSlide(slide); + }); + + setInterval(() => { + goToSlide(currentSlide); + activateDot(currentSlide); + currentSlide = (currentSlide + 1) % 4; + }, 1500); + + const init = () => { + createDots(); + activateDot(0); + goToSlide(0); + }; + + init(); +} diff --git a/src/styles/aside/aside.scss b/src/styles/aside/aside.scss new file mode 100644 index 000000000..dbff9bd3c --- /dev/null +++ b/src/styles/aside/aside.scss @@ -0,0 +1,137 @@ +.menu { + &__content { + height: fit-content; + display: flex; + flex-direction: column; + gap: 24px; + padding-inline: 20px; + padding-block: 27px; + background-color: $dark-green; + + @include on-tablet { + padding: 39px; + flex-direction: row; + gap: 39px; + } + + @include on-desktop { + padding-left: 55px; + margin-inline: auto; + justify-content: space-between; + } + + &--footer { + padding: 0; + background-color: $c-gray; + } + } + + &__top { + display: flex; + gap: 28px; + + @include on-tablet { + gap: 39px; + } + + @include on-desktop { + gap: 102px; + } + } + + &__close { + text-decoration: none; + display: block; + background-image: url(../images/icon/close-icon.svg); + width: 24px; + height: 24px; + + @include hover(transform, scale(1.2)); + } + + &__hr { + height: 1px; + background-color: rgba(255, 255, 255, 0.5); + + @include on-tablet { + width: 1px; + height: auto; + } + } + + &__bottom { + @include on-tablet { + display: flex; + gap: 39px; + justify-content: space-between; + } + + &--footer { + display: flex; + flex-direction: column; + gap: 25px; + } + } + + &__schedule { + flex-grow: 1; + } + + &__schedule-title { + margin: 0; + margin-bottom: 20px; + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 141%; + letter-spacing: 0; + color: $white-color; + + &--footer { + color: $dark-title; + } + } + + &__hours { + margin: 0; + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 600; + font-size: 14px; + line-height: 150%; + letter-spacing: 0; + color: $white-color; + + &--footer { + color: $dark-title; + } + } + + &__day { + font-weight: 400; + } + + &__day-on-tablet { + display: none; + + @include on-tablet { + display: inline; + } + } + + &__info { + margin-top: 16px; + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 600; + font-size: 14px; + line-height: 150%; + letter-spacing: 0; + color: $white-color; + align-self: flex-end; + + &--footer { + color: $dark-title; + align-self: flex-start; + margin-top: 0; + } + } +} diff --git a/src/styles/footer/contacts.scss b/src/styles/footer/contacts.scss new file mode 100644 index 000000000..6f26b7468 --- /dev/null +++ b/src/styles/footer/contacts.scss @@ -0,0 +1,28 @@ +.contacts { + &__title { + margin: 0; + margin-bottom: 20px; + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 141%; + letter-spacing: 0; + } + + &__address { + all: unset; + } + + &__link { + text-decoration: none; + display: block; + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 150%; + letter-spacing: 0; + color: $dark-title; + + @include hover(font-weight, 600); + } +} diff --git a/src/styles/footer/footer.scss b/src/styles/footer/footer.scss new file mode 100644 index 000000000..c2c4ad268 --- /dev/null +++ b/src/styles/footer/footer.scss @@ -0,0 +1,172 @@ +@import './contacts'; + +.footer { + padding-top: 50px; + + @include grid-page; + @include content-padding-inline; + + &__logo { + margin-bottom: 40px; + display: flex; + justify-content: space-between; + align-items: center; + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / span 1; + flex-direction: column; + justify-content: start; + gap: 62px; + } + } + + &__menu { + @include on-tablet { + grid-column: 2 / span 2; + } + + @include on-desktop { + grid-column: 3 / span 2; + } + } + + &__logo-link { + all: unset; + display: block; + background-image: url(../images/icon/logo.svg); + background-repeat: no-repeat; + background-size: cover; + width: 67px; + height: 72px; + + @include hover(transform, scale(1.2)); + } + + &__social-media-container { + display: flex; + gap: 20px; + } + + &__social-media { + all: unset; + display: block; + width: 24px; + height: 24px; + background-repeat: no-repeat; + background-size: cover; + + &--face { + background-image: url(../images/icon/facebook-logo.svg); + + @include hover(transform, scale(1.2)); + } + + &--insta { + background-image: url(../images/icon/instagram-logo.svg); + + @include hover(transform, scale(1.2)); + } + } + + &__contacts { + grid-column: 2 / -1; + + @include on-tablet { + grid-column: 4 / span 2; + } + + @include on-desktop { + grid-column: 5 / span 2; + } + } + + &__hr { + position: relative; + width: 100%; + height: 1px; + grid-column: 1 / -1; + background-color: $footer-hr; + margin-block: 70px 40px; + + @include on-tablet { + margin-block: 64px; + } + + @include on-desktop { + grid-column: 7 / 8; + width: 1px; + height: 100%; + margin-block: 0; + margin: auto; + } + + } + + &__hr-link { + all: unset; + display: block; + position: absolute; + width: 50px; + height: 50px; + border-radius: 50%; + background-image: url(../images/icon/arrow-up-icon.png); + right: 0; + top: -70px; + + @include hover(box-shadow, 0 1px 18px 4px rgba(44, 44, 44, 0.64)); + + @include on-tablet { + display: none; + } + } + + &__bottom { + grid-column: 1 / -1; + padding-block: 80px 60px; + + @include on-tablet { + padding-block: 120px 36px; + } + + @include on-desktop { + padding-block: 87px 35px; + } + } + + &__bottom-wrapper { + display: flex; + flex-direction: column; + align-items: center; + + @include on-tablet { + flex-direction: row; + justify-content: space-between; + } + } + &__paragraph { + margin: 0; + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 300; + font-size: 12px; + line-height: 141%; + letter-spacing: 0; + text-align: center; + color: $dark-title; + + &--one { + @include on-tablet { + order: 1; + } + } + + &:first-of-type { + margin-bottom: 10px; + + @include on-tablet { + margin-bottom: 0; + order: 2; + } + } + } +} diff --git a/src/styles/header/header.scss b/src/styles/header/header.scss new file mode 100644 index 000000000..9b999b8df --- /dev/null +++ b/src/styles/header/header.scss @@ -0,0 +1,218 @@ +.header { + position: relative; + + @include on-desktop { + max-width: 1280px; + margin-inline: auto; + } + + &__container { + display: flex; + flex-direction: column; + gap: 20px; + + @include on-tablet { + @include grid-page; + + padding-left: 39px; + } + + @include on-desktop { + padding-left: 55px; + } + } + + &__menu { + width: 24px; + height: 24px; + background-image: url(../images/icon/menu-icon.svg); + background-repeat: no-repeat; + background-size: cover; + position: absolute; + left: 20px; + top: 27px; + cursor: pointer; + + @include hover(background-image, url(../images/icon/menu-hover-icon.svg)); + @include hover(transform, scale(1.2)); + + @include on-tablet { + left: 39px; + top: 39px; + } + + @include on-desktop { + left: 55px; + } + } + + &__menu-link { + display: block; + width: 100%; + height: 100%; + } + + &__image-container { + display: flex; + justify-content: center; + background-image: url(../images/musem.png); + background-repeat: no-repeat; + background-size: cover; + width: 100%; + aspect-ratio: 1.07 / 1; + padding-top: 9px; + + @include on-tablet { + grid-column: 4 / -1; + grid-row: 1; + + aspect-ratio: 0.97 / 1; + justify-content: start; + } + + @include on-desktop { + grid-column: 6 / -1; + aspect-ratio: 1 / 0.91; + } + } + + &__title-container { + @include on-tablet { + grid-column: 1 / span 3; + grid-row: 1; + } + } + + &__logo-link { + display: flex; + justify-content: center; + align-items: center; + width: 55px; + height: 61px; + + @include hover(transform, scale(1.2)); + + @include on-tablet { + margin-left: 72px; + margin-top: 15px; + } + + @include on-desktop { + margin-left: 60px; + } + } + + &__logo { + display: block; + object-position: center; + } + + &__container-tikets-title { + display: flex; + flex-direction: column; + gap: 20px; + width: 100%; + + @include on-tablet { + grid-column: 1 / span 3; + padding-top: 127px; + gap: 38px; + } + + @include on-desktop { + grid-column: 1 / span 5; + padding-top: 206px; + gap: 89px; + } + } + + &__title { + margin: 0; + font-family: Montserrat, sans-serif; + font-weight: 700; + font-size: 45px; + line-height: 100%; + letter-spacing: 0; + text-align: center; + + @include on-tablet { + font-size: 54px; + line-height: 120%; + text-align: left; + } + + @include on-desktop { + font-size: 72px; + line-height: 120%; + } + } + + &__tickets { + display: flex; + margin-inline: 20px; + + @include hover(box-shadow, 0 3px 14px 4px rgba(30, 38, 37, 0.75)); + @include hover(transform, translateY(-10%)); + + @include on-tablet { + margin-inline: 0; + width: 270px; + } + + @include on-desktop { + align-self: end; + } + } + + &__link-tickets { + all: unset; + display: block; + box-sizing: border-box; + height: 50px; + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 50px; + letter-spacing: 0; + cursor: pointer; + border: 1px solid $dark-green; + flex-grow: 1; + text-align: center; + + @include hover(background-color, #d3d1d1); + + @include on-tablet { + height: 70px; + line-height: 70px; + } + } + + &__tickets-arrow { + position: relative; + width: 50px; + height: 50px; + background-color: $dark-green; + + @include on-tablet { + width: 70px; + height: 70px; + } + + &::after { + display: block; + content: ''; + position: absolute; + width: 24px; + height: 24px; + background-image: url(../images/icon/arrow-icon.svg); + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + transition: all $transition; + } + + &:hover::after { + transform: translate(-50%, -50%) rotate(360deg); + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..63edd72ed 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 './aside/aside'; +@import './nav/nav'; +@import './main/main-block'; +@import './footer/footer'; + +* { + box-sizing: border-box; +} + +.page { + position: relative; + scroll-behavior: smooth; + + &:has(.page__menu:target) { + overflow: hidden; /* not to scroll the page */ + } + + &__menu { + position: fixed; + top: 0; + left: 0; + right: 0; + background-color: rgba(0, 0, 0, 0.4); + opacity: 0; + transform: translateY(-100%); + transition: all $transition; + height: 100vh; + + &:target { + transform: translateY(0); + opacity: 1; + } + } +} body { background: $c-gray; + padding: 0; + margin: 0; } diff --git a/src/styles/main/events.scss b/src/styles/main/events.scss new file mode 100644 index 000000000..fd1b3ce3d --- /dev/null +++ b/src/styles/main/events.scss @@ -0,0 +1,50 @@ +.events { + margin: auto; + + &__title { + margin: 0; + margin-bottom: 40px; + margin-top: 70px; + padding-inline: 20px; + font-family: Montserrat, sans-serif; + font-weight: 700; + font-size: 36px; + line-height: 100%; + letter-spacing: 0; + text-align: center; + color: $dark-title; + + @include on-tablet { + text-align: left; + padding-inline: 39px; + } + + @include on-desktop { + padding-inline: 55px; + max-width: 1280px; + margin-inline: auto; + } + } + + &__wrapper { + display: flex; + flex-direction: column; + gap: 60px; + margin-bottom: 60px; + + @include content-padding-inline; + + @include on-tablet { + gap: 64px; + } + + @include on-desktop { + max-width: 1280px; + gap: 104px; + } + } + + &__exhibition { + max-width: 100vw; + } +} diff --git a/src/styles/main/exhibition.scss b/src/styles/main/exhibition.scss new file mode 100644 index 000000000..d7a44bc89 --- /dev/null +++ b/src/styles/main/exhibition.scss @@ -0,0 +1,175 @@ +.exhibition { + @include grid-page; + + &__container-image { + grid-column: 1 / -1; + margin-bottom: 20px; + + @include on-tablet { + margin-bottom: 40px; + } + + @include on-desktop { + grid-column: 1 / span 7; + } + + &--lection { + margin-bottom: 0; + + @include on-tablet { + padding-inline: 35px; + } + + @include on-desktop { + grid-column: 1 / -1; + padding-inline: 0; + } + } + } + + &__image { + width: 100%; + height: 210px; + object-fit: cover; + + @include hover(box-shadow, 0 1px 18px 4px rgba(44, 44, 44, 0.64)); + @include hover(transform, scale(1.05)); + + @include on-tablet { + height: 520px; + } + + &--lection { + @include on-tablet { + height: 390px; + } + + @include on-desktop { + height: 550px; + } + } + } + + &__info { + display: flex; + flex-direction: column; + gap: 10px; + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / span 4; + gap: 15px; + } + + @include on-desktop { + grid-column: 9 / -1; + justify-content: center; + } + + &--lection { + padding-inline: 20px; + transform: translateY(-50%); + + @include on-tablet { + grid-column: 1 / -1; + padding-inline: 100px; + } + } + } + + &__shadow { + display: flex; + flex-direction: column; + gap: 20px; + padding-block: 20px; + box-shadow: 0 2px 0 0 #1a5a4c40; + background-color: $c-gray; + max-width: 570px; + margin-inline: auto; + + @include on-tablet { + padding-inline: 55px; + padding-block: 45px 50px; + } + } + + &__wrapper-info { + display: flex; + justify-content: space-between; + align-items: center; + + @include on-tablet { + margin-bottom: 15px; + justify-content: flex-start; + gap: 35px; + } + + &--lection { + justify-content: space-evenly; + + @include on-tablet { + gap: 140px; + } + } + } + + &__name { + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 100%; + letter-spacing: 0; + color: $gray-name; + text-transform: uppercase; + } + + &__date { + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 700; + font-size: 16px; + line-height: 150%; + letter-spacing: 0; + color: $green-date; + } + + &__title { + margin: 0; + position: relative; + font-family: Montserrat, sans-serif; + font-weight: 400; + font-size: 28px; + line-height: 100%; + letter-spacing: 0; + color: $dark-title; + width: fit-content; + text-align: center; + + @include on-tablet { + text-align: left; + } + + &--red { + &::after { + display: block; + content: ''; + position: absolute; + top: 50%; + right: -20px; + transform: translateY(-25%); + width: 10px; + height: 10px; + background-color: $title-red; + } + } + } + + &__description { + margin: 0; + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 300; + font-size: 16px; + line-height: 150%; + letter-spacing: 0; + color: $dark-paragtaph; + } +} diff --git a/src/styles/main/form.scss b/src/styles/main/form.scss new file mode 100644 index 000000000..710e186ee --- /dev/null +++ b/src/styles/main/form.scss @@ -0,0 +1,94 @@ +.form { + &__fieldset { + border: none; + padding: 0; + } + + &__legend { + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 400; + font-size: 18px; + line-height: 150%; + letter-spacing: 0; + text-align: center; + color: $white-color; + } + + &__wrapper-input { + display: flex; + margin-top: 50px; + + @include hover(transform, translateY(-10%)); + @include hover(box-shadow, 0 3px 14px 4px rgba(107, 109, 109, 0.75)); + + @include on-tablet { + margin-top: 65px; + } + + @include on-desktop { + margin-top: 72px; + gap: 30px; + } + } + + &__input { + display: block; + height: 50px; + border: none; + padding: 0; + padding-left: 24px; + flex-grow: 1; + font-family: Montserrat, sans-serif; + font-size: 14px; + + @include on-tablet { + height: 70px; + } + + &::placeholder { + font-family: Montserrat, sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 100%; + letter-spacing: 0; + color: $gray-name; + } + + &:focus { + outline: none; + background-color: $c-gray; + transition: all $transition; + } + } + + &__button { + all: unset; + display: block; + position: relative; + width: 50px; + height: 50px; + background-color: $title-red; + + @include on-tablet { + width: 70px; + height: 70px; + } + + &::after { + display: block; + content: ''; + position: absolute; + width: 24px; + height: 24px; + background-image: url(../images/icon/black-arrow-icon.svg); + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + transition: all $transition; + } + + &:hover::after { + transform: translate(-50%, -50%) rotate(360deg); + } + } +} diff --git a/src/styles/main/gallery.scss b/src/styles/main/gallery.scss new file mode 100644 index 000000000..74c1025de --- /dev/null +++ b/src/styles/main/gallery.scss @@ -0,0 +1,83 @@ +.gallery { + padding-bottom: 100px; + + @include on-tablet { + padding-bottom: 92px; + } + + @include on-desktop { + padding-bottom: 200px; + } + + @include content-padding-inline; + + &__title { + margin: 0; + margin-block: 40px; + font-family: Montserrat, sans-serif; + font-weight: 700; + font-size: 48px; + line-height: 100%; + letter-spacing: 0; + color: $dark-title; + + @include on-tablet { + margin-block: 0 48px; + } + + @include on-desktop { + margin-block: 150px 56px; + } + } + + &__wrapper { + display: none; + flex-direction: column; + gap: 30px; + + @include on-desktop { + display: flex; + } + } + + &__row { + display: grid; + grid-template-columns: repeat(12, 1fr); + column-gap: 30px; + + &--one { + height: 600px; + } + + &--two { + height: 360px; + } + } + + &__container { + &--one { + grid-column: 1 / span 4; + } + + &--two { + grid-column: 5 / -1; + } + + &--three { + grid-column: 1 / span 8; + } + + &--four { + grid-column: 9 / -1; + } + + @include hover(box-shadow, 0 1px 18px 4px rgba(44, 44, 44, 0.64)); + @include hover(transform, scale(1.05)); + } + + &__image { + width: 100%; + height: 100%; + object-fit: cover; + } +} diff --git a/src/styles/main/main-block.scss b/src/styles/main/main-block.scss new file mode 100644 index 000000000..40f9c8946 --- /dev/null +++ b/src/styles/main/main-block.scss @@ -0,0 +1,6 @@ +@import './events'; +@import './exhibition'; +@import './gallery'; +@import './slider'; +@import './subscription'; +@import './form'; diff --git a/src/styles/main/slider.scss b/src/styles/main/slider.scss new file mode 100644 index 000000000..6eae1489a --- /dev/null +++ b/src/styles/main/slider.scss @@ -0,0 +1,61 @@ +.slider { + position: relative; + height: 440px; + overflow: hidden; + + @include on-tablet { + height: 584px; + } + + @include on-desktop { + display: none; + } + + @include grid-page; + + &__slide { + position: absolute; + grid-column: 1 / -1; + height: 410px; + width: 100%; + transition: all $transition; + + @include on-tablet { + height: 543px; + min-width: 340px; + padding-right: 20px; + width: 50%; + } + } + + &__image { + width: 100%; + height: 100%; + object-fit: cover; + } + + &__dots { + display: flex; + justify-content: space-between; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: 0; + width: 102px; + } + + &__button { + border: none; + width: 9px; + height: 9px; + border-radius: 50%; + padding: 0; + margin: 0; + background-color: $gray-button; + cursor: pointer; + + &--active { + background-color: $active-button-gallery; + } + } +} diff --git a/src/styles/main/subscription.scss b/src/styles/main/subscription.scss new file mode 100644 index 000000000..bdb7bf306 --- /dev/null +++ b/src/styles/main/subscription.scss @@ -0,0 +1,56 @@ +.subscription { + background-image: url(../images/gallery/subscription-mob.png); + background-repeat: no-repeat; + background-size: cover; + padding-block: 88px; + + @include content-padding-inline; + + @include on-tablet { + background-image: url(../images/gallery/subscription-tab.png); + padding-block: 82px; + } + + @include on-desktop { + background-image: url(../images/gallery/subscription-desck.png); + padding-block: 163px; + max-width: 100vw; + } + + &__content { + @include grid-page; + } + + &__title { + margin: 0; + margin-bottom: 20px; + font-family: Montserrat, sans-serif; + font-weight: 700; + font-size: 48px; + line-height: 100%; + letter-spacing: 0; + text-align: center; + color: $white-color; + grid-column: 1 / -1; + + @include on-tablet { + margin-bottom: 16px; + } + + @include on-desktop { + margin-bottom: 20px; + } + } + + &__form { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 2 / span 4; + } + + @include on-desktop { + grid-column: 4 / span 6; + } + } +} diff --git a/src/styles/nav/nav.scss b/src/styles/nav/nav.scss new file mode 100644 index 000000000..be8bd9e0f --- /dev/null +++ b/src/styles/nav/nav.scss @@ -0,0 +1,85 @@ +.nav { + display: flex; + gap: 28px; + + &--footer { + grid-column: 1 / -1; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 20px; + + @include on-tablet { + grid-column: 2 / span 3; + grid-template-columns: repeat(3, 1fr); + gap: 30px; + } + + @include on-desktop { + grid-column: 8 / span 3; + } + } + + @include on-tablet { + gap: 20px; + } + + @include on-desktop { + gap: 80px; + } + + &__list { + padding: 0; + margin: 0; + list-style: none; + display: flex; + flex-direction: column; + gap: 24px; + + &--footer { + @include on-tablet { + grid-column: 3 / -1; + } + } + } + + &__link { + position: relative; + text-decoration: none; + font-family: + 'IBM Plex Sans', + sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 100%; + letter-spacing: 0; + color: $white-color; + + &::after { + display: block; + content: ''; + width: 100%; + height: 2px; + background-color: $semi-transparent-white; + bottom: -3px; + transform: scale(0); + transform-origin: left; + transition: transform $transition; + } + + &:hover::after { + transform: scale(1); + } + + &--footer { + color: $dark-title; + font-weight: 400; + font-size: 14px; + + @include hover(font-weight, 600); + + &::after { + display: none; + } + } + } +} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..830c5f104 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,50 @@ @mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; + transition: all 0.3s; &:hover { #{$_property}: $_toValue; } } + +@mixin on-tablet { + @media (min-width: $table-min-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin content-padding-inline { + padding-inline: 20px; + + @include on-tablet { + padding-inline: 35px; + } + + @include on-desktop { + padding-inline: 55px; + max-width: 1280px; + margin: auto; + } +} + +@mixin grid-page { + --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; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..f9bafda4f 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,16 @@ $c-gray: #eee; +$dark-green: #1A5A4C; +$green-date: #1A5A4C; +$white-color: #fff; +$gray-name: #687480; +$dark-title: #0F0E08; +$dark-paragtaph: #4E4E4E; +$title-red: #F14A27; +$gray-button: #bdbaba; +$active-button-gallery: #1A5A4C; +$semi-transparent-white: #ffffff80; +$footer-hr: #1A5A4C80; +$table-min-width: 768px; +$desktop-min-width: 1280px; +$transition: 0.3s; +