diff --git a/README.md b/README.md index 5f9e97051..07c0da8b2 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://Cumacea.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..1f4eb968d 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,577 @@ - + - Title + NAMU + + - -

Hello Mate Academy

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

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

+ +
+
+

+ ПОДІЇ +

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

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

+ +
+
+
+ Landscape_with_sea_view +
+ +
+
+

+ ВИСТАВКА +

+ +

+ 26.08-29.11.2019 +

+
+ +
+

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

+ +
+
+ +

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

+
+
+ +
+
+ Girl_with_a_peacock +
+ +
+
+

+ ВИСТАВКА +

+ +

+ 26.08-29.11.2019 +

+
+ +
+

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

+ +
+
+ +

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

+
+
+
+
+ +
+
+ +
+
+

+ ЛЕКЦІЯ +

+ +

+ 26/08/2019 - 11:00 +

+
+ +

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

+
+
+
+ + + + +
+ + + + + + diff --git a/src/fonts/Roboto-Regular-webfont.woff b/src/fonts/Roboto-Regular-webfont.woff deleted file mode 100755 index 8aa07d731..000000000 Binary files a/src/fonts/Roboto-Regular-webfont.woff and /dev/null differ diff --git a/src/fonts/ibm-plex-sans-v23-cyrillic_latin-300.woff2 b/src/fonts/ibm-plex-sans-v23-cyrillic_latin-300.woff2 new file mode 100644 index 000000000..f82f0a48a Binary files /dev/null and b/src/fonts/ibm-plex-sans-v23-cyrillic_latin-300.woff2 differ diff --git a/src/fonts/ibm-plex-sans-v23-cyrillic_latin-500.woff2 b/src/fonts/ibm-plex-sans-v23-cyrillic_latin-500.woff2 new file mode 100644 index 000000000..288a1c703 Binary files /dev/null and b/src/fonts/ibm-plex-sans-v23-cyrillic_latin-500.woff2 differ diff --git a/src/fonts/ibm-plex-sans-v23-cyrillic_latin-600.woff2 b/src/fonts/ibm-plex-sans-v23-cyrillic_latin-600.woff2 new file mode 100644 index 000000000..53bf02da5 Binary files /dev/null and b/src/fonts/ibm-plex-sans-v23-cyrillic_latin-600.woff2 differ diff --git a/src/fonts/ibm-plex-sans-v23-cyrillic_latin-700.woff2 b/src/fonts/ibm-plex-sans-v23-cyrillic_latin-700.woff2 new file mode 100644 index 000000000..38029ca9a Binary files /dev/null and b/src/fonts/ibm-plex-sans-v23-cyrillic_latin-700.woff2 differ diff --git a/src/fonts/ibm-plex-sans-v23-cyrillic_latin-regular.woff2 b/src/fonts/ibm-plex-sans-v23-cyrillic_latin-regular.woff2 new file mode 100644 index 000000000..b82e11732 Binary files /dev/null and b/src/fonts/ibm-plex-sans-v23-cyrillic_latin-regular.woff2 differ diff --git a/src/fonts/montserrat-v31-cyrillic_latin-700.woff2 b/src/fonts/montserrat-v31-cyrillic_latin-700.woff2 new file mode 100644 index 000000000..5c136d763 Binary files /dev/null and b/src/fonts/montserrat-v31-cyrillic_latin-700.woff2 differ diff --git a/src/fonts/montserrat-v31-cyrillic_latin-regular.woff2 b/src/fonts/montserrat-v31-cyrillic_latin-regular.woff2 new file mode 100644 index 000000000..d13c06aa5 Binary files /dev/null and b/src/fonts/montserrat-v31-cyrillic_latin-regular.woff2 differ diff --git a/src/images/arrows/footer-arrow.svg b/src/images/arrows/footer-arrow.svg new file mode 100644 index 000000000..3ac7d7967 --- /dev/null +++ b/src/images/arrows/footer-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/arrows/form-button-arrow.svg b/src/images/arrows/form-button-arrow.svg new file mode 100644 index 000000000..0da1e9b20 --- /dev/null +++ b/src/images/arrows/form-button-arrow.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/arrows/ticket-button-arrow.svg b/src/images/arrows/ticket-button-arrow.svg new file mode 100644 index 000000000..799b8a91d --- /dev/null +++ b/src/images/arrows/ticket-button-arrow.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/events/events-1.png b/src/images/events/events-1.png new file mode 100644 index 000000000..529af6552 Binary files /dev/null and b/src/images/events/events-1.png differ diff --git a/src/images/events/events-2.png b/src/images/events/events-2.png new file mode 100644 index 000000000..9702d7cc7 Binary files /dev/null and b/src/images/events/events-2.png differ diff --git a/src/images/gallery/gallery-1.png b/src/images/gallery/gallery-1.png new file mode 100644 index 000000000..a4eeb3c09 Binary files /dev/null and b/src/images/gallery/gallery-1.png differ diff --git a/src/images/gallery/gallery-2.png b/src/images/gallery/gallery-2.png new file mode 100644 index 000000000..3b1a5938a Binary files /dev/null and b/src/images/gallery/gallery-2.png differ diff --git a/src/images/gallery/gallery-3.png b/src/images/gallery/gallery-3.png new file mode 100644 index 000000000..0097173d6 Binary files /dev/null and b/src/images/gallery/gallery-3.png differ diff --git a/src/images/gallery/gallery-4.png b/src/images/gallery/gallery-4.png new file mode 100644 index 000000000..558de0bdf Binary files /dev/null and b/src/images/gallery/gallery-4.png differ diff --git a/src/images/gallery/gallery-5.png b/src/images/gallery/gallery-5.png new file mode 100644 index 000000000..7cf48d113 Binary files /dev/null and b/src/images/gallery/gallery-5.png differ diff --git a/src/images/header/museum.png b/src/images/header/museum.png new file mode 100644 index 000000000..9b6ce249f Binary files /dev/null and b/src/images/header/museum.png differ diff --git a/src/images/icons/menu-burger.svg b/src/images/icons/menu-burger.svg new file mode 100644 index 000000000..473a1f40a --- /dev/null +++ b/src/images/icons/menu-burger.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/menu-close.svg b/src/images/icons/menu-close.svg new file mode 100644 index 000000000..e29f10494 --- /dev/null +++ b/src/images/icons/menu-close.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/lecture/lecture.png b/src/images/lecture/lecture.png new file mode 100644 index 000000000..c0112e211 Binary files /dev/null and b/src/images/lecture/lecture.png differ diff --git a/src/images/logo/logo.svg b/src/images/logo/logo.svg new file mode 100644 index 000000000..07e6290c4 --- /dev/null +++ b/src/images/logo/logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/social-media/facebook.svg b/src/images/social-media/facebook.svg new file mode 100644 index 000000000..4ccaf0aba --- /dev/null +++ b/src/images/social-media/facebook.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/social-media/instagram.svg b/src/images/social-media/instagram.svg new file mode 100644 index 000000000..4c9b6ca10 --- /dev/null +++ b/src/images/social-media/instagram.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/images/subscription/subscription.png b/src/images/subscription/subscription.png new file mode 100644 index 000000000..e5bf0b943 Binary files /dev/null and b/src/images/subscription/subscription.png differ diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..809d3ad96 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,97 @@ +/* global Swiper */ 'use strict'; + +document.addEventListener('DOMContentLoaded', () => { + const slides = document.querySelectorAll('.swiper-slide'); + + const gallerySwiper = new Swiper('.gallery__swiper', { + slidesPerView: 1, + spaceBetween: 20, + + breakpoints: { + 640: { + slidesPerView: 2, + spaceBetween: 20, + }, + }, + + pagination: { + el: '.gallery__pagination', + clickable: true, + dynamicBullets: false, + }, + + autoplay: { + delay: 5000, + disableOnInteraction: false, + pauseOnMouseEnter: true, + }, + + effect: 'slide', + + speed: 600, + + loop: true, + loopAdditionalSlides: 1, + + centeredSlides: false, + + lazy: { + loadPrevNext: true, + loadPrevNextAmount: 2, + }, + + keyboard: { + enabled: true, + }, + + mousewheel: { + invert: false, + forceToAxis: true, + }, + + grabCursor: true, + + parallax: true, + }); + + slides.forEach((slide) => { + slide.addEventListener('click', () => { + gallerySwiper.autoplay.stop(); + }); + }); +}); + +const subscribeForm = document.querySelector('.subscribe__form'); + +if (subscribeForm) { + subscribeForm.addEventListener('submit', (e) => { + e.preventDefault(); + subscribeForm.reset(); + }); +} + +const burgerButton = document.querySelector('.top-bar__menu'); +const closeButton = document.querySelector('.menu__close'); +const menuLinks = document.querySelectorAll('.menu__link'); +const menu = document.querySelector('.menu'); + +burgerButton.addEventListener('click', () => { + menu.classList.add('is-open'); + menu.classList.remove('is-close'); + document.body.classList.add('no-scroll'); +}); + +closeButton.addEventListener('click', () => { + menu.classList.remove('is-open'); + menu.classList.add('is-close'); + document.body.classList.remove('no-scroll'); +}); + +menuLinks.forEach((menuLink) => { + menuLink.addEventListener('click', () => { + menu.classList.remove('is-open'); + menu.classList.add('is-close'); + document.body.classList.remove('no-scroll'); + }); +}); diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 45cdd5400..b17b7a763 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,6 +1,61 @@ @font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); - font-weight: normal; + font-family: Montserrat; + font-weight: 400; font-style: normal; + font-display: swap; + src: url('../fonts/montserrat-v31-cyrillic_latin-regular.woff2') + format('woff2'); +} + +@font-face { + font-family: Montserrat; + font-weight: 700; + font-style: normal; + font-display: swap; + src: url('../fonts/montserrat-v31-cyrillic_latin-700.woff2') format('woff2'); +} + +@font-face { + font-family: 'IBM Plex Sans'; + font-weight: 300; + font-style: normal; + font-display: swap; + src: url('../fonts/ibm-plex-sans-v23-cyrillic_latin-300.woff2') + format('woff2'); +} + +@font-face { + font-family: 'IBM Plex Sans'; + font-weight: 400; + font-style: normal; + font-display: swap; + src: url('../fonts/ibm-plex-sans-v23-cyrillic_latin-regular.woff2') + format('woff2'); +} + +@font-face { + font-family: 'IBM Plex Sans'; + font-weight: 500; + font-style: normal; + font-display: swap; + src: url('../fonts/ibm-plex-sans-v23-cyrillic_latin-500.woff2') + format('woff2'); +} + +@font-face { + font-family: 'IBM Plex Sans'; + font-weight: 600; + font-style: normal; + font-display: swap; + src: url('../fonts/ibm-plex-sans-v23-cyrillic_latin-600.woff2') + format('woff2'); +} + +@font-face { + font-family: 'IBM Plex Sans'; + font-weight: 700; + font-style: normal; + font-display: swap; + src: url('../fonts/ibm-plex-sans-v23-cyrillic_latin-700.woff2') + format('woff2'); } diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss index 1837eb46e..ff25be307 100644 --- a/src/styles/_typography.scss +++ b/src/styles/_typography.scss @@ -1,3 +1,7 @@ h1 { @extend %h1; } + +h2 { + @extend %h2; +} diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss index 3280c3fe1..f044aad29 100644 --- a/src/styles/_utils.scss +++ b/src/styles/_utils.scss @@ -1,3 +1,4 @@ @import 'utils/vars'; @import 'utils/mixins'; @import 'utils/extends'; +@import 'utils/reset'; diff --git a/src/styles/blocks/events.scss b/src/styles/blocks/events.scss new file mode 100644 index 000000000..a09de36a0 --- /dev/null +++ b/src/styles/blocks/events.scss @@ -0,0 +1,154 @@ +.events { + margin: 70px 20px 60px; + + @include on-tablet { + margin: 88px 34px 112px; + } + + @include on-desktop { + margin: 200px 55px 104px; + } + + &__container { + display: flex; + flex-direction: column; + gap: 60px; + + @include on-tablet { + gap: 64px; + } + + @include on-desktop { + gap: 104px; + } + } + + &__event { + display: grid; + gap: 20px; + + @include on-tablet { + grid-template-columns: repeat(6, 1fr); + gap: 40px; + } + + @include on-desktop { + grid-template-columns: repeat(12, 1fr); + gap: 30px; + } + } + + &__title { + margin-bottom: 40px; + text-align: center; + + @include on-tablet { + margin-bottom: 48px; + text-align: start; + } + + @include on-desktop { + margin-bottom: 56px; + } + } + + &__content { + display: flex; + flex-direction: column; + gap: 10px; + + @include on-tablet { + grid-column: 1 / 5; + gap: 15px; + } + + @include on-desktop { + grid-column: 8 / -1; + justify-content: center; + } + } + + &__name { + @extend %title; + } + + &__name-container { + display: flex; + align-items: center; + } + + &__name-square { + display: block; + + width: 10px; + height: 10px; + margin-left: 30px; + + background-color: $form-button-color; + + @include on-tablet { + width: 15px; + height: 15px; + margin-left: 40px; + } + } + + &__info { + display: flex; + justify-content: space-between; + padding-bottom: 5px; + + @include on-tablet { + gap: 30px; + justify-content: start; + padding-bottom: 15px; + } + } + + &__subtitle { + @extend %main-date; + + font-weight: 500; + color: $inner-title-color; + } + + &__date { + @extend %main-date; + + color: $menu-background-color; + } + + &__description { + @extend %description; + + color: $description-color; + } + + &__image { + will-change: transform; + + aspect-ratio: 4 / 3; + width: 100%; + height: 100%; + + object-fit: cover; + + transition: transform 0.5s ease; + } + + &__image-container { + position: relative; + overflow: hidden; + grid-column: 1 / -1; + + @include on-desktop { + grid-column: 1 / 7; + } + + &:hover { + .events__image { + transform: scale(1.1); + } + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..a8f5b621d --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,233 @@ +.footer { + @extend %menu-footer; + + display: grid; + grid-template-columns: repeat(2, 1fr); + margin: 50px 20px; + + @include on-tablet { + grid-template-columns: repeat(6, 1fr); + margin: 51px 36px 36px; + } + + @include on-desktop { + grid-template-columns: repeat(12, 1fr); + margin: 48px 55px; + } + + &__icons { + display: flex; + grid-column: 1 / -1; + justify-content: space-between; + margin-bottom: 40px; + + @include on-tablet { + grid-column: 1; + flex-direction: column; + gap: 62px; + justify-content: flex-start; + } + } + + &__logo { + transition: transform 0.3s ease; + + &:hover { + transform: scale(1.1); + } + } + + &__social { + display: flex; + gap: 20px; + align-items: center; + + @include on-tablet { + gap: 32px; + } + } + + &__social-icon { + width: 24px; + height: 24px; + + background-repeat: no-repeat; + background-position: center; + + transition: transform 0.3s ease; + + &:hover { + transform: scale(1.2); + } + } + + &__facebook { + background-image: url('../images/social-media/facebook.svg'); + } + + &__instagram { + background-image: url('../images/social-media/instagram.svg'); + } + + &__schedule { + display: flex; + flex-direction: column; + gap: 20px; + + @include on-tablet { + grid-column: 2 / 4; + } + + @include on-desktop { + grid-column: 2 / 5; + } + } + + &__item-bold { + font-weight: 600; + } + + &__contacts { + display: flex; + flex-direction: column; + gap: 20px; + + @include on-tablet { + grid-column: 4 / 6; + } + + @include on-desktop { + grid-column: 5 / 7; + } + } + + &__address, + &__num, + &__fax, + &__email { + transition: color 0.3s ease; + + &:hover { + color: $menu-background-color; + } + } + + &__button-arrow { + cursor: pointer; + + position: absolute; + top: 17px; + left: 17px; + + display: block; + + width: 16px; + height: 16px; + + background-image: url('../images/arrows/footer-arrow.svg'); + background-repeat: no-repeat; + background-position: center; + + transition: transform 0.3s ease; + } + + &__button { + position: relative; + + grid-column: 1 / -1; + + width: 50px; + height: 50px; + margin-left: auto; + border: 1px solid $menu-background-color; + border-radius: 50%; + + &:hover { + .footer__button-arrow { + transform: scale(1.6); + } + } + + @include on-tablet { + display: none; + } + } + + &__line { + grid-column: 1 / -1; + + width: 100%; + margin-block: 20px 40px; + border: none; + border-top: 1px solid #1a5a4c80; + + @include on-tablet { + grid-column: 2 / 6; + margin-block: 64px; + } + + @include on-desktop { + grid-column: 7; + + width: 1px; + height: 260px; + margin-block: 0; + border: none; + border-right: 1px solid #1a5a4c80; + + writing-mode: vertical-rl; + } + } + + &__nav { + display: grid; + grid-column: 1/-1; + grid-template-columns: repeat(2, 1fr); + line-height: 100%; + + @include on-tablet { + grid-column: 2 / 6; + } + + @include on-desktop { + grid-column: 8 / -1; + } + } + + &__nav-group { + display: flex; + flex-direction: column; + gap: 20px; + } + + &__link { + transition: color 0.3s ease; + + &:hover { + color: $menu-background-color; + } + } + + &__bottom { + display: flex; + grid-column: 1 / -1; + flex-direction: column; + gap: 10px; + + margin-top: 80px; + + font-size: 12px; + font-weight: 300; + text-align: center; + + @include on-tablet { + flex-direction: row; + justify-content: space-between; + margin-top: 120px; + } + + @include on-desktop { + margin-top: 87px; + } + } +} diff --git a/src/styles/blocks/gallery.scss b/src/styles/blocks/gallery.scss new file mode 100644 index 000000000..803596e02 --- /dev/null +++ b/src/styles/blocks/gallery.scss @@ -0,0 +1,152 @@ +.gallery { + position: relative; + box-sizing: border-box; + margin: 183px 0 100px; + padding-inline: 20px; + + @include on-tablet { + margin: 208px 0 92px; + padding-inline: 34px; + } + + @include on-desktop { + margin: 302px 55px 200px; + } + + &__container { + display: none; + + @include on-desktop { + display: grid; + grid-template-areas: + 'woman village village' + 'woman village village' + 'park park beach'; + gap: 30px; + } + } + + &__slide-1 { + grid-area: woman; + } + + &__slide-2 { + grid-area: village; + } + + &__slide-3 { + grid-area: park; + } + + &__slide-4 { + grid-area: beach; + } + + &__title { + margin-bottom: 40px; + text-align: center; + + @include on-tablet { + margin-bottom: 48px; + text-align: start; + } + + @include on-desktop { + margin-bottom: 56px; + } + } + + &__swiper { + overflow: hidden; + width: 100%; + height: auto; + + @include on-desktop { + display: none; + } + } + + &__image { + will-change: transform; + + display: block; + + aspect-ratio: 28 / 41; + width: 100%; + height: auto; + + object-fit: cover; + + transition: transform 0.5s ease; + + @include on-tablet { + aspect-ratio: 340 / 543; + } + + @include on-desktop { + aspect-ratio: auto; + } + } + + &__image-3 { + object-position: left; + + @include on-desktop { + object-position: center; + } + } + + &__image-4 { + object-position: 82%; + + @include on-desktop { + object-position: center; + } + } + + &__slide { + overflow: hidden; + transition: transform 0.5s ease; + + &:hover { + .gallery__image { + transform: scale(1.1); + } + } + } + + &__pagination { + position: relative; + bottom: 0 !important; + + display: flex; + gap: 22px; + justify-content: center; + + margin-block: 20px; + + @include on-tablet { + margin-block: 32px; + } + + .swiper-pagination-bullet { + width: 9px; + height: 9px; + + opacity: 1; + background-color: $radio-button; + + transition: + transform 0.3s ease, + background-color 0.3s ease; + + &:hover { + transform: scale(1.6); + } + + &-active { + background-color: $menu-background-color; + } + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..237e91e8d --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,183 @@ +.header { + position: relative; + display: grid; + grid-template-columns: repeat(2, 1fr); + + @include on-tablet { + height: 50vh; + } + + @include on-desktop { + grid-template-columns: repeat(12, 1fr); + height: 100vh; + } + + &__top-bar { + grid-column: 1 / -1; + } + + &__bottom-container { + display: flex; + grid-column: 1 / -1; + + @include on-desktop { + justify-content: space-between; + } + } + + &__bottom { + display: none; + + @include on-desktop { + display: flex; + grid-column: 1 / 2; + flex-direction: column; + gap: 20px; + align-items: center; + + margin-top: 43px; + } + } + + &__events { + @extend %main-date; + + transform: rotate(180deg); + writing-mode: vertical-rl; + color: $inner-title-color; + } + + &__line { + flex-grow: 1; + min-height: 70px; + max-height: max-content; + border-right: 1px solid $menu-background-color; + } + + &__picture { + height: calc(100vw - 50px); + + @include on-tablet { + grid-column: 2 / -1; + height: 100%; + } + + @include on-desktop { + grid-column: 6 / -1; + } + } + + &__image { + position: absolute; + z-index: -1; + top: 0; + left: 0; + + aspect-ratio: 3 / 3; + width: 100%; + + background-image: url('../images/header/museum.png'); + background-position: center; + background-size: cover; + + @include on-tablet { + grid-column: 2 / -1; + height: 100%; + min-height: 384px; + } + + @include on-desktop { + grid-column: 6 / -1; + max-height: 100vh; + } + } + + &__content { + display: flex; + grid-column: 1 / -1; + flex-direction: column; + gap: 20px; + + margin: 20px 20px 0; + + @include on-tablet { + grid-column: 1 / 2; + gap: 38px; + margin: 40px 20px 0 34px; + } + + @include on-desktop { + grid-column: 1 / 6; + gap: 89px; + margin: 120px 30px 0 55px; + } + } + + &__title { + text-align: center; + + @include on-tablet { + text-align: start; + } + } + + &__button-arrow { + cursor: pointer; + + position: absolute; + top: 0; + right: 0; + bottom: 0; + + display: block; + + width: 50px; + height: 50px; + + background-color: $menu-background-color; + background-image: url('../images/arrows/ticket-button-arrow.svg'); + background-repeat: no-repeat; + background-position: center; + + transition: background-image 0.5s ease; + + @include on-tablet { + width: 70px; + height: 70px; + } + } + + &__button { + @extend %button; + + position: relative; + + width: 100%; + padding-right: 50px; + padding-block: 18px; + border: 1px solid $menu-background-color; + + color: $inner-title-color; + text-align: center; + + transition: box-shadow 0.5s ease; + + &:hover { + box-shadow: 5px 7px 3px 0 #1a5a4c40; + + .header__button-arrow { + background-image: url('../images/arrows/form-button-arrow.svg'); + } + } + + @include on-tablet { + width: 270px; + padding-right: 70px; + padding-block: 27px; + } + + @include on-desktop { + align-self: flex-start; + } + } +} diff --git a/src/styles/blocks/lecture.scss b/src/styles/blocks/lecture.scss new file mode 100644 index 000000000..4d6bd825a --- /dev/null +++ b/src/styles/blocks/lecture.scss @@ -0,0 +1,110 @@ +.lecture { + position: relative; + height: 236px; + + @include on-tablet { + height: 426px; + } + + @include on-desktop { + height: 550px; + } + + &__info { + display: flex; + justify-content: space-between; + padding: 24px 21px; + + @include on-tablet { + gap: 140px; + justify-content: start; + padding: 45px 0 23px 55px; + } + + @include on-desktop { + gap: 130px; + padding-left: 100px; + } + } + + &__subtitle { + @extend %main-date; + + font-weight: 500; + color: $inner-title-color; + } + + &__date { + @extend %main-date; + + color: $menu-background-color; + } + + &__name { + @extend %title; + + text-align: center; + + @include on-tablet { + padding-left: 55px; + text-align: start; + } + + @include on-desktop { + padding-left: 100px; + } + } + + &__content { + position: absolute; + z-index: 2; + top: 153px; + left: 50%; + transform: translateX(-50%); + + display: flex; + flex-direction: column; + + width: 280px; + height: 140px; + + background-color: $menu-footer-text-color; + box-shadow: 0 2px 0 0 #1a5a4c40; + + transition: box-shadow 0.5s ease; + + @include on-tablet { + top: 306px; + width: 570px; + height: 204px; + } + + @include on-desktop { + top: 448px; + width: 570px; + height: 204px; + } + + &:hover { + box-shadow: 5px 7px 3px 0 #1a5a4c40; + } + } + + &__image { + position: absolute; + z-index: 1; + top: 0; + right: 0; + left: 0; + + display: block; + + width: 100%; + height: 100%; + + background-image: url('../images/lecture/lecture.png'); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..83ba01950 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,165 @@ +.menu { + @extend %menu-footer; + + pointer-events: none; + + position: fixed; + top: 0; + left: 0; + transform: translateY(-100%); + + overflow: auto; + display: flex; + flex-direction: column; + + box-sizing: border-box; + width: 100%; + height: 100vh; + + color: $menu-footer-text-color; + + opacity: 0; + + transition: + opacity 0.5s ease-in-out, + transform 0.5s ease-in-out; + + &.is-open { + pointer-events: all; + transform: translateY(0); + opacity: 1; + } + + &.is-close { + pointer-events: none; + transform: translateY(-100%); + opacity: 0; + } + + &__top { + flex-shrink: 0; + + height: auto; + min-height: 400px; + padding: 27px 20px 0; + + background-color: $menu-background-color; + + @include on-tablet { + display: grid; + grid-template-columns: repeat(12, 1fr); + min-height: 280px; + padding: 39px 34px 0; + } + + @include on-desktop { + padding: 40px 56px 0; + } + } + + &__close { + cursor: pointer; + + display: block; + + width: 24px; + height: 24px; + + background-image: url('../images/icons/menu-close.svg'); + background-repeat: no-repeat; + background-position: center; + + transition: transform 0.3s ease; + + &:hover { + transform: scale(1.1); + } + } + + &__nav { + display: flex; + gap: 28px; + + @include on-tablet { + grid-column: 1 / 6; + gap: 38px; + } + + @include on-desktop { + gap: 102px; + } + } + + &__nav-group { + display: flex; + flex-direction: column; + gap: 24px; + } + + &__link { + @extend %button; + + font-size: 16px; + transition: color 0.5s ease; + + @include on-desktop { + font-size: 22px; + } + + &:hover { + color: $inner-title-color; + } + } + + &__line { + width: 100%; + margin-block: 24px; + border: none; + border-top: 1px solid #ffffff80; + + @include on-tablet { + grid-column: 7; + + width: 1px; + height: 80%; + margin-block: 0; + margin-inline: 0; + border: none; + border-right: 1px solid #ffffff80; + + writing-mode: vertical-rl; + } + } + + &__schedule { + display: flex; + flex-direction: column; + gap: 20px; + + @include on-tablet { + grid-column: 8 / -1; + } + } + + &__schedule-block { + display: flex; + flex-direction: column; + gap: 20px; + + @include on-tablet { + display: grid; + grid-template-columns: repeat(2, 1fr); + } + } + + &__item-bold { + font-weight: 600; + } + + &__bottom { + flex-grow: 1; + width: 100%; + height: auto; + background-color: #1a5a4c50; + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..4e9002758 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,9 @@ +.page { + scroll-behavior: smooth; + color: $title-color; + background-color: $main-background; + + &__body:has(.menu:target) { + overflow: hidden; + } +} diff --git a/src/styles/blocks/subscribe.scss b/src/styles/blocks/subscribe.scss new file mode 100644 index 000000000..82bef7ee9 --- /dev/null +++ b/src/styles/blocks/subscribe.scss @@ -0,0 +1,151 @@ +.subscribe { + position: relative; + + display: flex; + flex-direction: column; + gap: 50px; + justify-content: center; + + height: 386px; + + @include on-tablet { + gap: 64px; + align-items: center; + height: 380px; + } + + @include on-desktop { + gap: 72px; + height: 550px; + } + + &__content { + z-index: 2; + color: $menu-footer-text-color; + text-align: center; + } + + &__description { + @extend %menu-footer; + + margin-top: 20px; + font-size: 18px; + + @include on-tablet { + margin-top: 16px; + line-height: 100%; + } + } + + &__form { + z-index: 2; + + display: flex; + gap: 0; + + margin-inline: 20px; + + transition: box-shadow 0.5s ease; + + @include on-tablet { + gap: 16px; + } + + @include on-desktop { + gap: 30px; + } + + &:hover { + box-shadow: 5px 7px 3px 0 #f14a2760; + + @include on-tablet { + box-shadow: none; + } + } + } + + &__input { + @extend %title; + + width: 80vw; + height: 50px; + padding-left: 24px; + border: none; + + font-size: 14px; + color: $title-color; + + background-color: $menu-footer-text-color; + outline: none; + + transition: box-shadow 0.5s ease; + + @include on-tablet { + width: 374px; + height: 70px; + + &:hover { + box-shadow: 5px 7px 3px 0 #f14a2760; + } + } + + @include on-desktop { + width: 470px; + padding-left: 32px; + } + + &::placeholder { + color: $inner-title-color; + } + } + + &__button { + cursor: pointer; + + display: block; + + width: 50px; + height: 50px; + border: none; + + background-color: $form-button-color; + background-image: url('../images/arrows/form-button-arrow.svg'); + background-repeat: no-repeat; + background-position: center; + + transition: + box-shadow 0.5s ease, + background-image 0.5s ease; + + &:hover { + background-image: url('../images/arrows/ticket-button-arrow.svg'); + } + + @include on-tablet { + width: 70px; + height: 70px; + + &:hover { + box-shadow: 5px 7px 3px 0 #f14a2760; + } + } + } + + &__image { + position: absolute; + z-index: 1; + top: 0; + right: 0; + left: 0; + + display: block; + + width: 100%; + height: 100%; + + background-image: url('../images/subscription/subscription.png'); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 000000000..a72eb36c5 --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,56 @@ +.top-bar { + display: grid; + grid-template-columns: repeat(2, 1fr); + align-items: center; + + padding-top: 10px; + padding-left: 20px; + + @include on-tablet { + padding-top: 15px; + padding-left: 34px; + } + + @include on-desktop { + padding-left: 55px; + } + + &__menu { + cursor: pointer; + + display: block; + + width: 24px; + height: 24px; + + background-image: url('../images/icons/menu-burger.svg'); + background-repeat: no-repeat; + background-position: center; + + transition: transform 0.3s ease; + + &:hover { + transform: scale(1.1); + } + } + + &__logo { + width: 55px; + height: 61px; + transition: transform 0.3s ease; + + &:hover { + transform: scale(1.1); + } + + @include on-tablet { + width: 63px; + height: 72px; + margin-left: 78px; + } + + @include on-desktop { + margin-left: 54px; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..cd803e7bd 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,12 @@ @import 'utils'; @import 'fonts'; @import 'typography'; - -body { - background: $c-gray; -} +@import 'blocks/page'; +@import 'blocks/top-bar'; +@import 'blocks/header'; +@import 'blocks/menu'; +@import 'blocks/events'; +@import 'blocks/lecture'; +@import 'blocks/gallery'; +@import 'blocks/subscribe'; +@import 'blocks/footer'; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index d7201e7b3..5b853c597 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -1,4 +1,73 @@ %h1 { - font-family: Roboto, sans-serif; + font-family: Montserrat, sans-serif; + font-size: 45px; + font-weight: 700; + line-height: 100%; + + @include on-tablet { + font-size: 54px; + line-height: 120%; + } + + @include on-desktop { + font-size: 72px; + } +} + +%h2 { + font-family: Montserrat, sans-serif; + font-size: 36px; + font-weight: 700; + line-height: 100%; + + @include on-tablet { + font-size: 48px; + } +} + +%title { + font-family: Montserrat, sans-serif; + font-size: 28px; + font-weight: 400; + line-height: 100%; + + @include on-tablet { + font-size: 36px; + } +} + +%button { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 14px; + font-weight: 500; + line-height: 100%; + + @include on-tablet { + font-size: 16px; + } +} + +%main-date { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 16px; + font-weight: 700; + line-height: 150%; + + @include on-tablet { + font-size: 14px; + } +} + +%description { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 16px; + font-weight: 300; + line-height: 150%; +} + +%menu-footer { + font-family: 'IBM Plex Sans', sans-serif; + font-size: 14px; font-weight: 400; + line-height: 150%; } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..590ea0329 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,23 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; - &:hover { - #{$_property}: $_toValue; +@mixin on-mobile { + @media screen and (min-width: 320px) { + @content; + } +} + +@mixin on-tablet { + @media screen and (min-width: 640px) { + @content; + } +} + +@mixin on-desktop { + @media screen and (min-width: 1280px) { + @content; + } +} + +@mixin on-large-desktop { + @media screen and (min-width: 1440px) { + @content; } } diff --git a/src/styles/utils/_reset.scss b/src/styles/utils/_reset.scss new file mode 100644 index 000000000..eacfd5078 --- /dev/null +++ b/src/styles/utils/_reset.scss @@ -0,0 +1,32 @@ +body, +html, +ul, +p, +h1, +h2, +h3, +h4, +h5, +input { + margin: 0; + padding: 0; +} + +a { + color: inherit; + text-decoration: none; +} + +ul { + list-style: none; +} + +input:-webkit-autofill, +input:-webkit-autofill:hover, +input:-webkit-autofill:focus, +input:-webkit-autofill:active { + -webkit-box-shadow: 0 0 0 50px $menu-footer-text-color inset !important; + transition: background-color 0.3s ease-in-out 0s; + + -webkit-text-fill-color: $title-color !important; +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..ee5d61c06 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,8 @@ -$c-gray: #eee; +$main-background: #eee; +$title-color: #0f0e08; +$menu-background-color: #1a5a4c; +$menu-footer-text-color: #fff; +$inner-title-color: #687480; +$description-color: #4e4e4e; +$form-button-color: #f14a27; +$radio-button: #e0e0e0;