diff --git a/README.md b/README.md index 5f9e97051..cd1c5c3cc 100644 --- a/README.md +++ b/README.md @@ -49,7 +49,7 @@ Check font styles. Use [IBM Plex Sans](https://fonts.google.com/specimen/IBM+Ple 11. `git push origin develop` - to send you code for PR. 12. Create a Pull Request (PR) from your branch `develop` to branch `master` of original repo. 13. Replace `` with your Github username in the - [DEMO LINK](https://.github.io/Museum/). + [DEMO LINK](https://RuslanV23.github.io/Museum/). 14. Copy `DEMO LINK` to the PR description. > To update you PR repeat steps 7-11. diff --git a/index.html b/index.html index d339e6856..76c300cd8 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,777 @@ - + - Title + Національний художній музей України - namu.ua + + + + + - -

Hello Mate Academy

- + + +
+
+ +
+ +
+ + NA +
+ MU + +
+
+
+

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

+
ПОДІЇ
+ + КВИТКИ +
+
+
+ +
+
+
+ +
+
+
+

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

+
+
+
+
+
+ image +
+
+
+

ВИСТАВКА

+

26.08-29.11.2019

+
+

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

+

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

+
+
+
+
+
+
+ image +
+
+
+

ВИСТАВКА

+

26.08-29.11.2019

+
+

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

+

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

+
+
+
+
+
+ current lecture image +
+
+
+

ЛЕКЦІЯ

+

26/08/2019 - 11:00

+
+

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

+
+
+
+
+ + + +
+
+
+

Підписка

+

+ Бути в курсі всіх актуальних подій та останніх новин. +

+
+ + +
+
+
+
+
+ + + + + + + diff --git a/src/images/current-event/current-event1.png b/src/images/current-event/current-event1.png new file mode 100644 index 000000000..75d77e01e Binary files /dev/null and b/src/images/current-event/current-event1.png differ diff --git a/src/images/current-event/current-event2.png b/src/images/current-event/current-event2.png new file mode 100644 index 000000000..6f8ec5c82 Binary files /dev/null and b/src/images/current-event/current-event2.png differ diff --git a/src/images/current-event/current-lecture.png b/src/images/current-event/current-lecture.png new file mode 100644 index 000000000..edbeeea9a Binary files /dev/null and b/src/images/current-event/current-lecture.png differ diff --git a/src/images/gallery/gallery1.png b/src/images/gallery/gallery1.png new file mode 100644 index 000000000..2ff35d69e Binary files /dev/null and b/src/images/gallery/gallery1.png differ diff --git a/src/images/gallery/gallery2.png b/src/images/gallery/gallery2.png new file mode 100644 index 000000000..dbbff040b Binary files /dev/null and b/src/images/gallery/gallery2.png differ diff --git a/src/images/gallery/gallery3.png b/src/images/gallery/gallery3.png new file mode 100644 index 000000000..7a9b3f576 Binary files /dev/null and b/src/images/gallery/gallery3.png differ diff --git a/src/images/gallery/gallery4.png b/src/images/gallery/gallery4.png new file mode 100644 index 000000000..686026c16 Binary files /dev/null and b/src/images/gallery/gallery4.png differ diff --git a/src/images/gallery/gallery5.png b/src/images/gallery/gallery5.png new file mode 100644 index 000000000..ab61b3b5c Binary files /dev/null and b/src/images/gallery/gallery5.png differ diff --git a/src/images/header-bg.png b/src/images/header-bg.png new file mode 100644 index 000000000..a7eddff20 Binary files /dev/null and b/src/images/header-bg.png differ diff --git a/src/images/icon/arrow-right.svg b/src/images/icon/arrow-right.svg new file mode 100644 index 000000000..41cc0b9ce --- /dev/null +++ b/src/images/icon/arrow-right.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icon/burger-menu.svg b/src/images/icon/burger-menu.svg new file mode 100644 index 000000000..749112984 --- /dev/null +++ b/src/images/icon/burger-menu.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icon/close.svg b/src/images/icon/close.svg new file mode 100644 index 000000000..e29f10494 --- /dev/null +++ b/src/images/icon/close.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icon/facebook.svg b/src/images/icon/facebook.svg new file mode 100644 index 000000000..4ccaf0aba --- /dev/null +++ b/src/images/icon/facebook.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icon/instagram.svg b/src/images/icon/instagram.svg new file mode 100644 index 000000000..4c9b6ca10 --- /dev/null +++ b/src/images/icon/instagram.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/images/logo.svg b/src/images/logo.svg new file mode 100644 index 000000000..f9d6c858d --- /dev/null +++ b/src/images/logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/subscribe-bg.png b/src/images/subscribe-bg.png new file mode 100644 index 000000000..7cce6ea7f Binary files /dev/null and b/src/images/subscribe-bg.png differ diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..cdbab6f8c 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,257 @@ 'use strict'; + +const swipper = document.querySelector('.section-gallery__swipper'); + +const swipperWrapper = document.querySelector( + '.section-gallery__swipper-wrapper', +); + +const swipperList = document.querySelector('.section-gallery__swipper-list'); + +const swippetImages = document.querySelectorAll( + '.section-gallery__swipper-image', +); + +let currentFrame = 0; + +let frameSize = 0; +const maxframe = 5; +let wrapperWidth = 0; + +let imageWidth = 0; +/* eslint-env browser */ + +currentFrame = Math.round( + swipperWrapper.scrollLeft / + (imageWidth + parseFloat(getComputedStyle(swipperList).gap)), +); + +const buttons = document.querySelector('.section-gallery__buttons'); + +const updateButtons = () => { + currentFrame = Math.min( + Math.max(currentFrame, 0), + maxframe - (frameSize - 1) - 1, + ); + + let innerbuttons = ''; + + for (let i = 0; i < maxframe - (frameSize - 1); i++) { + if (i === currentFrame) { + innerbuttons += + ''; + } else { + innerbuttons += ''; + } + } + buttons.innerHTML = innerbuttons; + + [...buttons.children].forEach((button, index) => { + button.addEventListener('click', () => { + const gap = + parseFloat(getComputedStyle(swipperList).gap) * Math.max(0, index - 1); + + currentFrame = index; + wrapper.scrollLeft = imageWidth * index + gap; + updateButtons(); + }); + }); +}; + +updateButtons(); + +const resizeImages = () => { + const old = frameSize; + + frameSize = +getComputedStyle(swipper).getPropertyValue('--frame-size'); + + if (old !== frameSize) { + updateButtons(); + } + + const gap = parseFloat(getComputedStyle(swipperList).gap) * (frameSize - 1); + + wrapperWidth = swipperWrapper.clientWidth; + imageWidth = wrapperWidth / frameSize - gap / 2; + + swippetImages.forEach((image) => { + image.style.width = imageWidth + 'px'; + }); +}; + +resizeImages(); + +window.addEventListener('resize', () => { + resizeImages(); +}); + +class MouseVelocity { + onMove = (e) => { + if (!this.enabled) { + return; + } + + const now = performance.now(); + + this.x = e.clientX; + this.y = e.clientY; + + this.samples.push({ + x: this.x, + y: this.y, + time: now, + }); + + while ( + this.samples.length > 0 && + now - this.samples[0].time > this.sampleTime + ) { + this.samples.shift(); + } + }; + + constructor(sampleTime = 100) { + this.sampleTime = sampleTime; + this.start(); + } + + getVelocity() { + if (!this.enabled || this.samples.length < 2) { + return { vx: 0, vy: 0, speed: 0 }; + } + + const first = this.samples[0]; + const last = this.samples[this.samples.length - 1]; + + const dt = (last.time - first.time) / 1000; + + if (dt <= 0) { + return { vx: 0, vy: 0, speed: 0 }; + } + + const vx = (last.x - first.x) / dt; + const vy = (last.y - first.y) / dt; + + return { + vx, + vy, + speed: vx, + }; + } + + start() { + if (this.enabled) { + return; + } + + this.enabled = true; + this.samples = []; + + window.addEventListener('mousemove', this.onMove); + } + + stop() { + if (!this.enabled) { + return; + } + + this.enabled = false; + this.samples = []; + + window.removeEventListener('mousemove', this.onMove); + } +} + +const mouseVelocity = new MouseVelocity(100); + +function loop() { + requestAnimationFrame(loop); +} + +loop(); +mouseVelocity.stop(); + +const wrapper = document.querySelector('.section-gallery__swipper-wrapper'); + +let isDragging = false; +let startX = 0; +let startScrollLeft = 0; + +wrapper.addEventListener('pointerdown', (e) => { + isDragging = true; + mouseVelocity.start(); + wrapper.setPointerCapture(e.pointerId); + + startX = e.clientX; + startScrollLeft = wrapper.scrollLeft; + + wrapper.style.scrollBehavior = 'auto'; + wrapper.style.cursor = 'grabbing'; + wrapper.style.scrollSnapType = 'none'; +}); + +wrapper.addEventListener('pointermove', (e) => { + if (!isDragging) { + return; + } + + const deltaX = e.clientX - startX; + + wrapper.scrollLeft = startScrollLeft - deltaX; +}); + +wrapper.addEventListener('pointerup', (e) => { + isDragging = false; + wrapper.releasePointerCapture(e.pointerId); + + wrapper.style.cursor = ''; + wrapper.style.scrollBehavior = ''; + wrapper.style.scrollSnapType = 'x mandatory'; + + const scroll2 = (wrapper.scrollLeft -= mouseVelocity.getVelocity().speed / 3); + + wrapper.scrollLeft = scroll2; + mouseVelocity.stop(); + + currentFrame = Math.round( + scroll2 / (imageWidth + parseFloat(getComputedStyle(swipperList).gap)), + ); + + currentFrame = Math.min( + Math.max(currentFrame, 0), + maxframe - (frameSize - 1) - 1, + ); + updateButtons(); +}); + +wrapper.addEventListener('pointercancel', () => { + isDragging = false; + + wrapper.style.cursor = ''; + wrapper.style.scrollBehavior = ''; + wrapper.style.scrollSnapType = 'x mandatory'; + + const scroll2 = (wrapper.scrollLeft -= mouseVelocity.getVelocity().speed / 3); + + wrapper.scrollLeft = scroll2; + mouseVelocity.stop(); + + currentFrame = Math.round( + scroll2 / (imageWidth + parseFloat(getComputedStyle(swipperList).gap)), + ); + + currentFrame = Math.min( + Math.max(currentFrame, 0), + maxframe - (frameSize - 1) - 1, + ); + updateButtons(); +}); + +const form = document.querySelector('.section-subscription__form'); + +form.addEventListener('submit', (event2) => { + event2.preventDefault(); + + form.reset(); +}); diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss index 1837eb46e..3badbc994 100644 --- a/src/styles/_typography.scss +++ b/src/styles/_typography.scss @@ -1,3 +1,20 @@ -h1 { - @extend %h1; +h1, +h2, +h3 { + font-family: Montserrat, sans-serif; + font-size: 700; + margin: 0; + padding: 0; +} + +h3 { + font-size: 400; +} + +p, +div { + margin: 0; + padding: 0; + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 300; } diff --git a/src/styles/blocks/container.scss b/src/styles/blocks/container.scss new file mode 100644 index 000000000..cb61e53e5 --- /dev/null +++ b/src/styles/blocks/container.scss @@ -0,0 +1,21 @@ +.container { + --grid-culumn: 2; + + display: grid; + grid-template-columns: repeat(var(--grid-culumn), 1fr); + column-gap: 20px; + padding-inline: 20px; + + @include on-tablet { + --grid-culumn: 6; + + padding-inline: 39px; + column-gap: 30px; + } + + @include on-small-desktop { + --grid-culumn: 12; + + padding-inline: 55px; + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..45b9bb0af --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,216 @@ +.footer { + &__container { + padding-block: 50px 64px; + @include on-tablet { + padding-block: 50px 36px; + } + } + + &__socials-logo-container { + grid-column: 1 / -1; + display: flex; + justify-content: space-between; + + @include on-tablet { + grid-column: 1 / 2; + flex-direction: column; + gap: 62px; + justify-content: start; + + align-items: center; + } + } + + &__logo { + font-family: Montserrat, sans-serif; + font-weight: 700; + text-decoration: none; + font-size: 30px; + display: block; + height: fit-content; + text-align: center; + color: $black; + text-shadow: 0 0 10px white; + margin-top: 9px; + width: fit-content; + + transition: + transform $translition, + color $translition; + + &:hover { + color: $orange; + transform: scale(1.1); + } + } + + &__socials-container { + display: flex; + align-items: center; + gap: 20px; + } + + &__work-schedule-container { + margin-top: 40px; + grid-column: 1 span; + @include on-tablet { + margin: 0; + grid-column: 2 span; + } + } + + &__contacts-container { + margin-top: 40px; + grid-column: 1 span; + + @include on-tablet { + margin: 0; + grid-column: 2 span; + } + } + + &__line { + background-color: #1a5a4c80; + height: 1px; + grid-column: 1 / -1; + margin-block: 64px; + + @include on-tablet { + grid-column: 2 / -2; + } + + @include on-small-desktop { + justify-self: center; + width: 1px; + grid-column: 1 span; + height: 100%; + margin: 0; + } + } + + &__nav { + display: flex; + flex-direction: column; + gap: 20px; + + &--1 { + grid-column: 1 / 2; + + @include on-tablet { + grid-column: 2 / 4; + } + + @include on-small-desktop { + grid-column: 2 span; + } + } + + &--2 { + grid-column: 2 / 3; + + @include on-tablet { + grid-column: 4 / 6; + } + + @include on-small-desktop { + grid-column: 2 span; + } + } + } + + &__nav-link { + width: fit-content; + display: block; + text-decoration: none; + font-weight: 400; + font-size: 14px; + color: $black; + line-height: 150%; + + transition: + color $translition, + transform $translition; + + &:hover { + color: $orange; + transform: scale(1.05); + } + } + + &__copyright-info { + margin-top: 80px; + grid-column: 1 / -1; + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + + @include on-tablet { + margin-top: 120px; + + flex-direction: row; + gap: 0; + justify-content: space-between; + } + + @include on-small-desktop { + margin-top: 87px; + } + + &__copyright { + font-weight: 300; + font-size: 12px; + color: $black; + } + &__author { + color: $black; + font-weight: 300; + font-size: 12px; + } + } +} + +.info { + display: flex; + flex-direction: column; + gap: 20px; + + &__link { + display: block; + text-decoration: none; + font-weight: 400; + font-size: 14px; + color: $black; + line-height: 150%; + width: fit-content; + + transition: + color $translition, + transform $translition; + + &:hover { + color: $orange; + transform: scale(1.05); + } + } + + &__title { + font-weight: 400; + font-size: 14px; + color: $black; + } + + &__summary { + text-decoration: none; + font-weight: 400; + font-size: 14px; + color: $black; + line-height: 150%; + & strong { + font-weight: 600; + font-size: 14px; + color: $black; + line-height: 150%; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..31f5ff6eb --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,191 @@ +.header { + &__background { + position: relative; + width: 100%; + height: 320px; + background-image: url('../images/header-bg.png'); + background-position: center; + background-size: cover; + display: flex; + justify-content: center; + + @include on-tablet { + position: absolute; + justify-content: start; + width: 50%; + height: 374px; + margin-left: 50%; + } + + @include on-small-desktop { + margin-left: 42.8%; + width: 57.2%; + height: 655px; + } + } + + &__button-span { + box-sizing: border-box; + place-content: center; + height: 70px; + width: 100%; + border: 1px solid $green; + font-family: 'IBM Plex Sans', sans-serif; + font-size: 16px; + font-weight: 500; + color: $black; + + transition: + color $translition, + background-color $translition; + + display: flex; + align-items: center; + } + + &__button-arrow { + box-sizing: border-box; + + display: flex; + justify-content: center; + align-items: center; + background-color: $green; + border: 1px solid $green; + + height: 100%; + aspect-ratio: 1 / 1; + + transition: background-color $translition; + } + + &__content { + display: flex; + flex-direction: column; + grid-column: 1 / -1; + @include on-tablet { + grid-column: 1 / 4; + } + @include on-small-desktop { + grid-column: 1 / 6; + } + } + + &__icon-burger-container { + height: 24px; + z-index: 1; + position: absolute; + + padding-top: 27px; + + @include on-tablet { + padding-top: 39px; + } + + @include padding-content; + } + + &__background-icon { + font-family: Montserrat, sans-serif; + font-weight: 700; + text-decoration: none; + font-size: 30px; + display: block; + height: fit-content; + text-align: center; + color: $black; + text-shadow: 0 0 10px white; + margin-top: 9px; + + transition: + transform $translition, + color $translition; + + @include on-tablet { + margin-top: 15px; + width: 220px; + } + + &:hover { + color: $orange; + transform: scale(1.1); + } + } + + &__button { + display: flex; + height: 70px; + width: 100%; + align-self: start; + align-items: center; + text-decoration: none; + + margin-top: 20px; + + @include on-tablet { + width: 270px; + margin-top: 38px; + } + + @include on-small-desktop { + right: 0; + margin-top: 89px; + align-self: flex-end; + } + + &:hover .icon { + background-color: $black; + } + + &:hover .header__button-span { + background-color: $green; + color: #d7dde3; + } + + &:hover .header__button-arrow { + background-color: #ff00; + } + } + + &__title { + margin-top: 20px; + line-height: 120%; + color: #000; + font-size: 45px; + + @include on-tablet { + margin-top: 127px; + font-size: 6cqw; + } + + @include on-small-desktop { + margin-top: 206px; + font-size: 72px; + } + } + + &__title-events { + position: absolute; + display: none; + width: fit-content; + margin-top: 522px; + writing-mode: vertical-rl; + transform: rotate(180deg); + color: #687480; + font-size: 14px; + font-weight: 700; + font-family: 'IBM Plex Sans', sans-serif; + + @include on-small-desktop { + display: block; + } + + &::before { + content: ''; + margin-bottom: 20px; + background-color: $green; + display: inline-block; + width: 1px; + height: 70px; + } + } +} diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss new file mode 100644 index 000000000..6548d215a --- /dev/null +++ b/src/styles/blocks/icon.scss @@ -0,0 +1,54 @@ +.icon { + display: block; + width: 24px; + height: 24px; + background-color: black; + + -webkit-mask-image: url('../images/icon/burger-menu.svg'); + mask-image: url('../images/icon/burger-menu.svg'); + + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + + -webkit-mask-size: contain; + mask-size: contain; + + -webkit-mask-position: center; + mask-position: center; + + transition: + transform $translition, + background-color $translition; + + &:hover { + background-color: $orange; + transform: scale(1.1); + } + + &--arrow-right { + background-color: #d7dde3; + -webkit-mask-image: url('../images/icon/arrow-right.svg'); + mask-image: url('../images/icon/arrow-right.svg'); + } + + &--facebook { + -webkit-mask-image: url('../images/icon/facebook.svg'); + mask-image: url('../images/icon/facebook.svg'); + } + + &--instagram { + -webkit-mask-image: url('../images/icon/instagram.svg'); + mask-image: url('../images/icon/instagram.svg'); + } + + &--burger { + -webkit-mask-image: url('../images/icon/burger-menu.svg'); + mask-image: url('../images/icon/burger-menu.svg'); + } + + &--close { + background-color: white; + -webkit-mask-image: url('../images/icon/close.svg'); + mask-image: url('../images/icon/close.svg'); + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..3494d0b4c --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,151 @@ +.menu { + min-width: 320px; + color: #fff; + background-color: #18181a7a; + width: 100%; + height: 100%; + transform: translateY(-100%); + + transition: + transform $translition, + opacity $translition; + opacity: 0%; + + &:target { + opacity: 100%; + transform: translateX(0); + } + + &__container { + background-color: $green; + padding-block: 27px; + position: relative; + + @include on-tablet { + padding-block: 40px; + } + + @include on-small-desktop { + padding-block: 40px 48px; + } + } + + &__nav-link-container { + display: flex; + gap: 24px; + flex-direction: column; + } + + &__nav-close-container { + grid-column: 1 / -1; + display: flex; + gap: 32px; + + @include on-tablet { + grid-column: 1 / 4; + } + + @include on-small-desktop { + grid-column: 1 / 7; + } + } + + &__nav { + display: flex; + width: 75%; + justify-content: space-around; + gap: 20px; + } + + &__nav-link { + width: fit-content; + display: block; + text-decoration: none; + font-weight: 500; + font-size: 16px; + color: #fff; + line-height: 150%; + + @include on-small-desktop { + font-size: 22px; + } + + transition: + color $translition, + transform $translition; + + &:hover { + color: $orange; + transform: scale(1.05); + } + } + + &__line { + background-color: #fff; + height: 1px; + grid-column: 1 / -1; + margin-top: 24px; + + @include on-tablet { + position: absolute; + left: 48%; + width: 1px; + height: 75%; + align-self: center; + margin: 0; + } + } + + &__work-schedule-container { + margin-top: 24px; + + grid-column: 1 span; + + @include on-tablet { + margin: 0; + grid-column: 3 span; + } + + @include on-small-desktop { + grid-column: 8 / -1; + } + } + + &__info { + display: flex; + gap: 20px; + flex-direction: column; + + // @include on-tablet { + // padding-left: 5%; + // } + } + + &__info-summary-container { + display: flex; + flex-direction: column; + gap: 24px; + justify-content: start; + width: 100%; + + @include on-tablet { + flex-direction: row; + } + } + + &__info-summary { + text-decoration: none; + font-weight: 400; + font-size: 14px; + line-height: 150%; + & strong { + font-weight: 600; + font-size: 14px; + line-height: 150%; + } + + @include on-tablet { + width: 40%; + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..b8db50288 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,21 @@ +.page { + scroll-behavior: smooth; + min-width: 320px; + position: relative; + &__menu { + z-index: 2; + inset: 0; + + position: fixed; + } + + &:has(.page__menu:target) { + overflow: hidden; + } + + &__body { + padding: 0; + margin: 0; + background: #fff; + } +} diff --git a/src/styles/blocks/section-current-events.scss b/src/styles/blocks/section-current-events.scss new file mode 100644 index 000000000..1db5c7a2c --- /dev/null +++ b/src/styles/blocks/section-current-events.scss @@ -0,0 +1,215 @@ +.section-current-events { + margin-top: 70px; + + @include on-tablet { + margin-top: 107px; + } + + @include on-small-desktop { + margin-top: 318px; + } + &__title { + grid-column: 1 / -1; + font-weight: 700; + font-size: 36px; + color: $black; + + @include on-tablet { + font-size: 48px; + } + } + + &__container { + margin-top: 40px; + display: flex; + flex-direction: column; + gap: 60px; + } +} + +.current-event { + &__image-wrapper { + grid-column: 1 / -1; + overflow: hidden; + + @include on-small-desktop { + grid-column: 1 / 8; + } + } + + &__image { + display: block; + width: 100%; + object-fit: cover; + object-position: center; + + transition: transform $translition; + + &:hover { + transform: scale(1.05); + } + } + + &__details { + display: flex; + gap: 30px; + + &-title { + font-weight: 500; + font-size: 16px; + color: #687480; + + @include on-tablet { + font-size: 14px; + } + } + + &-date { + font-weight: 700; + font-size: 16px; + color: $green; + + @include on-tablet { + font-size: 14px; + } + } + } + + &__discription { + display: flex; + flex-direction: column; + gap: 10px; + grid-column: 1 / -1; + margin-top: 20px; + + @include on-tablet { + margin-top: 44 px; + } + + @include on-small-desktop { + margin-top: 0; + grid-column: -5 / -1; + align-self: center; + } + } + + &__title { + margin-top: 10px; + display: inline-flex; + color: $black; + font-weight: 400; + font-size: 28px; + gap: 10px; + + @include on-tablet { + font-size: 36px; + } + + &::after { + align-self: flex-end; + content: ''; + display: inline-block; + margin-bottom: 11px; + width: 10px; + height: 10px; + background-color: $orange; + } + } + + &__paragraph { + color: $gray; + line-height: 150%; + font-size: 16px; + font-weight: 300; + } +} + +.current-lecture { + display: flex; + flex-direction: column; + align-items: center; + &__image-wrapper { + overflow: hidden; + width: 100%; + } + &__image { + display: block; + width: 100%; + object-fit: cover; + object-position: center; + + transition: transform $translition; + + &:hover { + transform: scale(1.05); + } + } + + &__discription { + box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: center; + position: relative; + background-color: #fff; + box-shadow: 0 2px 0 0 #1a5a4c40; + margin-inline: 20px; + padding: 20px; + top: -50px; + max-width: 570px; + + @include on-tablet { + padding: 45px 55px 50px; + width: 75%; + top: -80px; + } + + @include on-small-desktop { + padding-inline: 100px; + } + } + + &__title { + font-weight: 400; + font-size: 28px; + margin-top: 20px; + text-align: center; + + @include on-tablet { + text-align: start; + font-weight: 400; + font-size: 36px; + } + } + + &__details { + display: flex; + justify-content: space-between; + gap: 20px; + + @include on-tablet { + justify-content: start; + gap: 140px; + } + + &-title { + font-weight: 500; + font-size: 16px; + color: #687480; + + @include on-tablet { + font-size: 14px; + } + } + + &-date { + font-weight: 700; + font-size: 16px; + color: $green; + + @include on-tablet { + font-size: 14px; + } + } + } +} diff --git a/src/styles/blocks/section-gallery.scss b/src/styles/blocks/section-gallery.scss new file mode 100644 index 000000000..711d6f94f --- /dev/null +++ b/src/styles/blocks/section-gallery.scss @@ -0,0 +1,171 @@ +.section-gallery { + margin-top: 80px; + + @include on-tablet { + margin-top: 0; + } + + @include on-small-desktop { + margin-top: 150px; + } + + &__title { + color: $black; + font-weight: 700; + font-size: 36px; + text-align: center; + + @include on-tablet { + font-size: 48px; + margin-inline: 34px; + text-align: start; + } + + @include on-small-desktop { + margin-inline: 55px; + } + } + + &__swipper { + --frame-size: 1; + + margin-top: 40px; + + @include on-tablet { + --frame-size: 2; + + margin-top: 48px; + } + } + + &__swipper-wrapper { + --frame-size: 1; + + touch-action: none; + overflow: hidden; + margin-inline: 20px; + scroll-behavior: smooth; + scroll-snap-type: x mandatory; + + @include on-tablet { + margin-inline: 34px; + } + + @include on-small-desktop { + display: none; + } + } + + &__swipper-list { + --gap: 16px; + + user-select: none; + transform: translateX(0); + padding: 0; + margin: 0; + display: flex; + gap: 16px; + height: 100%; + width: fit-content; + list-style: none; + + @include on-tablet { + --gap: 20px; + + gap: 20px; + } + } + + &__swipper-item { + display: block; + width: 100%; + } + + &__swipper-image { + aspect-ratio: 8.2 / 12; + height: 100%; + width: 100%; + object-fit: cover; + object-position: center; + scroll-snap-align: start; + transition: transform $translition; + + &:hover { + transform: scale(1.05); + } + } + + &__buttons { + margin-top: 20px; + justify-self: center; + display: flex; + width: 102px; + height: 10px; + justify-content: space-between; + + @include on-tablet { + margin-top: 32px; + } + + @include on-small-desktop { + display: none; + } + } + + &__button { + padding: 0; + display: block; + height: 10px; + width: 10px; + border-radius: 50%; + border: none; + background-color: #e0e0e0; + cursor: pointer; + + &:hover { + background-color: $orange; + } + + &--active { + background-color: $green; + } + } + + &__container { + display: none; + grid-template-rows: repeat(1, 600px 320px); + gap: 30px; + margin-top: 56px; + + @include on-small-desktop { + display: grid; + } + } + + &__image { + display: block; + object-fit: cover; + object-position: center; + width: 100%; + height: 100%; + + transition: transform $translition; + + &--1 { + grid-column: 1 / 5; + } + &--2 { + grid-column: 5 / -1; + } + &--3 { + grid-column: 1 / 9; + } + &--4 { + grid-column: 9 / -1; + } + + &:hover { + transform: scale(1.05); + } + } +} diff --git a/src/styles/blocks/section-subscription.scss b/src/styles/blocks/section-subscription.scss new file mode 100644 index 000000000..559085553 --- /dev/null +++ b/src/styles/blocks/section-subscription.scss @@ -0,0 +1,111 @@ +.section-subscription { + background-image: url('../images/subscribe-bg.png'); + background-position: center; + background-size: cover; + padding-block: 88px; + margin-top: 100px; + + @include on-small-desktop { + padding-block: 163px; + } + + &__content { + grid-column: 1/ -1; + + @include on-tablet { + grid-column: 2/ -2; + } + + @include on-small-desktop { + grid-column: 4/ -4; + } + } + &__title { + color: #fff; + font-weight: 700; + font-size: 36px; + text-align: center; + } + + &__paragraph { + margin-top: 20px; + + text-align: center; + color: #fff; + font-weight: 400; + font-size: 18px; + line-height: 150%; + + @include on-tablet { + margin-top: 16px; + } + } + + &__form { + margin-top: 50px; + display: flex; + height: 70px; + width: 100%; + align-self: start; + + grid-column: 1/ -1; + align-items: center; + text-decoration: none; + + @include on-tablet { + gap: 16px; + grid-column: 2/ -2; + margin-top: 64px; + } + + @include on-small-desktop { + gap: 30px; + right: 0; + margin-top: 72px; + align-self: flex-end; + } + } + + &__form-input { + box-sizing: border-box; + place-content: center; + height: 70px; + width: 100%; + border: 1px solid $green; + font-family: 'IBM Plex Sans', sans-serif; + font-size: 16px; + font-weight: 500; + color: $black; + padding: 18px 24px; + display: flex; + align-items: center; + + transition: + color $translition, + background-color $translition; + } + + &__form-arrow { + box-sizing: border-box; + + display: flex; + justify-content: center; + align-items: center; + background-color: $orange; + border: 1px solid $green; + cursor: pointer; + + height: 100%; + aspect-ratio: 1 / 1; + + transition: transform $translition; + + &:hover { + transform: scale(1.1); + } + + & .icon:hover { + background-color: #fff; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..b73158b42 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -2,6 +2,12 @@ @import 'fonts'; @import 'typography'; -body { - background: $c-gray; -} +@import './blocks/page'; +@import './blocks/menu'; +@import './blocks/container'; +@import './blocks/header'; +@import './blocks/icon'; +@import './blocks/section-current-events'; +@import './blocks/section-gallery'; +@import './blocks/section-subscription'; +@import './blocks/footer'; diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..c28ad955d 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,33 @@ #{$_property}: $_toValue; } } + +@mixin padding-content { + padding-inline: 20px; + + @include on-tablet { + padding-inline: 39px; + } + + @include on-small-desktop { + padding-inline: 55px; + } +} + +@mixin on-tablet { + @media (min-width: 640px) { + @content; + } +} + +@mixin on-small-desktop { + @media (min-width: 1280px) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: 1440px) { + @content; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..db0dd4282 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,5 @@ -$c-gray: #eee; +$translition: 0.3s; +$orange: #f14a27; +$green: #1a5a4c; +$black: #0f0e08; +$gray: #4e4e4e;