diff --git a/README.md b/README.md index 5f9e97051..b75f6bde5 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://vlad-ptashnichenko.github.io/Museum/). 14. Copy `DEMO LINK` to the PR description. > To update you PR repeat steps 7-11. diff --git a/src/images/events-first.png b/src/images/events-first.png new file mode 100644 index 000000000..d36e67158 Binary files /dev/null and b/src/images/events-first.png differ diff --git a/src/images/events-second.png b/src/images/events-second.png new file mode 100644 index 000000000..4c3c93be4 Binary files /dev/null and b/src/images/events-second.png differ diff --git a/src/images/facebook-logo.png b/src/images/facebook-logo.png new file mode 100644 index 000000000..f2053a10e Binary files /dev/null and b/src/images/facebook-logo.png differ diff --git a/src/images/gallery/1.1.png b/src/images/gallery/1.1.png new file mode 100644 index 000000000..10dd44b20 Binary files /dev/null and b/src/images/gallery/1.1.png differ diff --git a/src/images/gallery/1.2.png b/src/images/gallery/1.2.png new file mode 100644 index 000000000..a3f4af221 Binary files /dev/null and b/src/images/gallery/1.2.png differ diff --git a/src/images/gallery/2.1.png b/src/images/gallery/2.1.png new file mode 100644 index 000000000..3ebe29a9b Binary files /dev/null and b/src/images/gallery/2.1.png differ diff --git a/src/images/gallery/2.2.png b/src/images/gallery/2.2.png new file mode 100644 index 000000000..e178b0403 Binary files /dev/null and b/src/images/gallery/2.2.png differ diff --git a/src/images/gallery/swipper_1.png b/src/images/gallery/swipper_1.png new file mode 100644 index 000000000..e879cb173 Binary files /dev/null and b/src/images/gallery/swipper_1.png differ diff --git a/src/images/gallery/swipper_2.png b/src/images/gallery/swipper_2.png new file mode 100644 index 000000000..a848dabc3 Binary files /dev/null and b/src/images/gallery/swipper_2.png differ diff --git a/src/images/gallery/swipper_3.png b/src/images/gallery/swipper_3.png new file mode 100644 index 000000000..d4ed029aa Binary files /dev/null and b/src/images/gallery/swipper_3.png differ diff --git a/src/images/gallery/swipper_4.png b/src/images/gallery/swipper_4.png new file mode 100644 index 000000000..d0e57b2d6 Binary files /dev/null and b/src/images/gallery/swipper_4.png differ diff --git a/src/images/header-img.png b/src/images/header-img.png new file mode 100644 index 000000000..b81b70a99 Binary files /dev/null and b/src/images/header-img.png differ diff --git a/src/images/icon/arrow-right.svg b/src/images/icon/arrow-right.svg new file mode 100644 index 000000000..799b8a91d --- /dev/null +++ b/src/images/icon/arrow-right.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icon/arrow-up-green.svg b/src/images/icon/arrow-up-green.svg new file mode 100644 index 000000000..59f857ab0 --- /dev/null +++ b/src/images/icon/arrow-up-green.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/arrow-up-white.svg b/src/images/icon/arrow-up-white.svg new file mode 100644 index 000000000..b2113a781 --- /dev/null +++ b/src/images/icon/arrow-up-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/icon-close.svg b/src/images/icon/icon-close.svg new file mode 100644 index 000000000..e29f10494 --- /dev/null +++ b/src/images/icon/icon-close.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icon/icon-menu.svg b/src/images/icon/icon-menu.svg new file mode 100644 index 000000000..473a1f40a --- /dev/null +++ b/src/images/icon/icon-menu.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icon/icon.png b/src/images/icon/icon.png new file mode 100644 index 000000000..7cf58db94 Binary files /dev/null and b/src/images/icon/icon.png differ diff --git a/src/images/instagram-logo.png b/src/images/instagram-logo.png new file mode 100644 index 000000000..c778fc65d Binary files /dev/null and b/src/images/instagram-logo.png differ diff --git a/src/images/lecture_background_desktop.png b/src/images/lecture_background_desktop.png new file mode 100644 index 000000000..4c7c2b627 Binary files /dev/null and b/src/images/lecture_background_desktop.png differ diff --git a/src/images/lecture_background_mobile.png b/src/images/lecture_background_mobile.png new file mode 100644 index 000000000..0d60943d5 Binary files /dev/null and b/src/images/lecture_background_mobile.png differ diff --git a/src/images/lecture_background_tablet.png b/src/images/lecture_background_tablet.png new file mode 100644 index 000000000..7c44172dd Binary files /dev/null and b/src/images/lecture_background_tablet.png differ diff --git a/src/images/subscription_arrow_right.svg b/src/images/subscription_arrow_right.svg new file mode 100644 index 000000000..a0f526f04 --- /dev/null +++ b/src/images/subscription_arrow_right.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/subscription_background.png b/src/images/subscription_background.png new file mode 100644 index 000000000..36f29addb Binary files /dev/null and b/src/images/subscription_background.png differ diff --git a/src/index.html b/src/index.html index 8019b83ec..68217c2fe 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,365 @@ - + - Title + НАМУ + + + + + + + - -

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..f9d33a837 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,59 @@ 'use strict'; + +new Swiper('.swiper', { + pagination: { + el: '.swiper-pagination', + clickable: true, + type: 'bullets', + }, + spaceBetween: 16, + grabCursor: true, + loop: true, + breakpoints: { + 320: { + slidesPerView: 1, + }, + 768: { + slidesPerView: 2, + }, + 1024: { + init: false, + }, + }, +}); + +const paginationEl = document.querySelector('.swiper-pagination'); + +if (paginationEl) { + paginationEl.style.setProperty('--swiper-pagination-bullet-horizontal-gap', '11px'); + paginationEl.style.setProperty('--swiper-pagination-bottom', '-30px'); +} + +const btnScrollTop = document.querySelector('.scroll-to-top'); + +const scrollHandler = () => { + const scrollPosition = window.scrollY + if ( scrollPosition > 0) { + btnScrollTop.style.display = 'block' + } else { + btnScrollTop.style.display = 'none' + } +} + +const scrollTop = () => { + window.scrollTo(0, 0); +} + +document.addEventListener('scroll', scrollHandler); +window.onload = scrollHandler + +btnScrollTop.addEventListener('click', scrollTop); + +window.addEventListener('hashchange', () => { + if (window.location.hash === '#menu') { + document.body.classList.add('page__body--with-menu'); + } else { + document.body.classList.remove('page__body--with-menu'); + } +}); + diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index 45cdd5400..000000000 --- a/src/styles/_fonts.scss +++ /dev/null @@ -1,6 +0,0 @@ -@font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); - font-weight: normal; - font-style: normal; -} diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 000000000..d3743bd32 --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,49 @@ +.button { + --right-side-width: 50px; + --radius-value: 0; + + display: flex; + box-sizing: border-box; + overflow: hidden; + border: 1px solid #1A5A4C; + text-decoration: none; + width: 100%; + height: 50px; + + @include on-tablet { + --right-side-width: 70px; + + max-width: 270px; + height: 70px; + } + + @include hover(background-color, #1A5A4C); + @include hover(border-radius, 25px); + + &__left-side { + display: flex; + align-items: center; + justify-content: center; + width: calc(100% - var(--right-side-width)); + height: 100%; + background-color: var(--left-side-color); + } + + &__text { + font-family: $ibm-plex-font; + font-weight: 500; + font-size: 16px; + line-height: 16px; + color: $section-title-color; + } + + &__right-side { + width: var(--right-side-width); + height: 100%; + background-color: #1A5A4C; + background-image: url(../images/icon/arrow-right.svg); + background-position: center; + background-repeat: no-repeat; + border-radius: var( --radius-value); + } +} diff --git a/src/styles/blocks/contacts.scss b/src/styles/blocks/contacts.scss new file mode 100644 index 000000000..2cea6c88e --- /dev/null +++ b/src/styles/blocks/contacts.scss @@ -0,0 +1,30 @@ +.contacts { + display: flex; + flex-direction: column; + gap: 20px; + + &__title { + margin: 0; + font-family: $ibm-plex-font; + font-weight: 400; + font-size: 14px; + line-height: 20px; + color: $section-title-color; + } + + &__links { + display: flex; + flex-direction: column; + } + + &__link { + font-family: $ibm-plex-font; + font-weight: 400; + font-size: 14px; + line-height: 21px; + color: $section-title-color; + text-decoration: none; + + @include hover(color,#1A5A4C); + } +} diff --git a/src/styles/blocks/container.scss b/src/styles/blocks/container.scss new file mode 100644 index 000000000..0f37feaa8 --- /dev/null +++ b/src/styles/blocks/container.scss @@ -0,0 +1,13 @@ +.container { + max-width: 1170px; + padding-inline: 20px; + + @include on-tablet { + padding-inline: 39px; + } + + @include on-desktop { + padding-inline: 55px; + margin-inline: auto; + } +} diff --git a/src/styles/blocks/event.scss b/src/styles/blocks/event.scss new file mode 100644 index 000000000..c29272427 --- /dev/null +++ b/src/styles/blocks/event.scss @@ -0,0 +1,139 @@ +.event { + @include on-desktop { + @include page-grid; + } + + &__picture { + width: clamp(280px, 87vw, 700px); + height: clamp(210px, 65vw, 520px); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + + @include hover(transform, scale(1.1)); + + @include on-desktop { + grid-column: 1 / 8; + width: 53vw; + max-width: 670px; + } + + &--first { + background-image: url(../images/events-first.png); + } + + &--second { + background-image: url(../images/events-second.png); + } + } + + &__event-attributes { + display: flex; + flex-direction: column; + gap: 10px; + margin-top: 20px; + + @include on-tablet { + gap: 15px; + margin-top: 40px; + width: 460px; + } + + @include on-desktop { + grid-column: 9 / -1; + justify-content: center; + margin-top: 0; + width: 370px; + } + } + + &__date { + display: flex; + justify-content: space-between; + align-items: center; + + @include on-tablet { + width: 220px; + } + + @include on-desktop { + width: 270px; + } + } + + &__exhibition { + margin: 0; + font-family: $ibm-plex-font; + font-weight: 500; + font-size: 16px; + line-height: 16px; + color: #687480; + + @include on-tablet { + font-size: 14px; + line-height: 14px; + } + } + + &__period { + margin: 0; + font-family: $ibm-plex-font; + font-weight: 700; + font-size: 16px; + line-height: 24px; + color: #1A5A4C; + + @include on-tablet { + font-size: 14px; + line-height: 21px; + } + } + + &__title { + position: relative; + margin: 0; + width: max-content; + font-family: $monserrat-font; + font-weight: 400; + font-size: 28px; + line-height: 28px; + color: $section-title-color; + + &::after{ + content: ''; + display: block; + position: absolute; + top: 12px; + right: -20px; + width: 10px; + height: 10px; + background-color: red; + } + + @include on-tablet { + margin-top: 15px; + font-size: 36px; + line-height: 36px; + + &::after { + right: -40px; + width: 15px; + height: 15px; + } + } + + @include on-desktop { + &::after { + right: -30px; + } + } + } + + &__description { + margin: 0; + font-family: $ibm-plex-font; + font-size: 16px; + line-height: 24px; + color: #4E4E4E; + } +} diff --git a/src/styles/blocks/events.scss b/src/styles/blocks/events.scss new file mode 100644 index 000000000..e9c6c3dd3 --- /dev/null +++ b/src/styles/blocks/events.scss @@ -0,0 +1,25 @@ +.events { + margin-top: 70px; + + @include on-tablet { + margin-top: 88px; + } + + @include on-desktop { + margin-top: 200px; + } + + &__content { + display: flex; + flex-direction: column; + gap: 60px; + + @include on-tablet { + gap: 64px; + } + + @include on-desktop { + gap: 104px; + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..f34ae5a07 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,141 @@ +.footer { + margin: 50px 0 64px; + + @include on-tablet { + margin-bottom: 36px; + } + + &__content { + @include on-tablet { + @include page-grid; + } + } + + &__links { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 40px; + + @include on-tablet { + grid-column: 1 / 2; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + gap: 62px; + } + } + + &__media-links { + display: flex; + gap: 20px; + + @include on-tablet { + gap: 32px; + } + } + + &__media-link { + cursor: pointer; + + @include hover(scale, 1.2); + } + + &__all-information { + display: flex; + flex-direction: column; + margin-bottom: 80px; + + @include on-tablet { + grid-column: 2 / -2; + gap: 64px; + margin-bottom: 120px; + } + + @include on-desktop { + grid-column: 3 / -3; + flex-direction: row; + gap: 65px; + } + } + + &__timetable-and-contacts { + display: flex; + gap: 20px; + margin-bottom: 70px; + + @include on-tablet { + @include footer-grid; + + margin-bottom: 0; + } + } + + &__timetable { + @include on-tablet { + grid-column: 1 / 3; + } + } + + &__contacts { + @include on-tablet { + grid-column: 3 / 5; + } + } + + &__line { + width: 100%; + height: 1px; + background-color: #1A5A4C80; + margin-bottom: 40px; + + @include on-tablet { + margin: 0 auto; + height: 1px; + width: 100%; + } + + @include on-desktop { + width: 1px; + height: 260px; + } + } + + &__menu { + @include on-tablet { + @include footer-grid; + } + } + + &__nav { + @include on-tablet { + grid-column: 1 / -1; + } + + @include on-desktop { + grid-column: 1 / -1; + } + } + + &__design-and-copyright { + display: flex; + flex-direction: column; + gap: 10px; + + @include on-tablet { + flex-direction: row; + justify-content: space-between; + } + + &--font-style { + margin: 0; + font-family: $ibm-plex-font; + font-weight: 300; + font-size: 12px; + line-height: 16.88px; + text-align: center; + color: $section-title-color; + } + } + +} diff --git a/src/styles/blocks/gallery.scss b/src/styles/blocks/gallery.scss new file mode 100644 index 000000000..a61581c32 --- /dev/null +++ b/src/styles/blocks/gallery.scss @@ -0,0 +1,15 @@ +.gallery { + position: relative; + margin-top: 183px; + + &__desktop-content { + position: absolute; + overflow: hidden; + display: none; + + @include on-desktop { + overflow: visible; + display: contents; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..687fcf3fe --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,143 @@ +.header { + position: relative; + height: 483px; + + @include on-tablet { + height: 384px; + } + + @include on-desktop { + height: 655px; + } + + &__img { + position: relative; + width: 100%; + height: 300px; + background-image: url(../images/header-img.png); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + + @include on-tablet { + position: absolute; + left: calc(50vw - $scroll-width); + width: 50vw; + height: 384px; + } + + @include on-desktop { + height: 655px; + } + + &--logo-position { + margin: 0 auto; + padding-top: 9px; + + @include on-tablet { + position: absolute; + top: 15px; + left: 82px; + z-index: 1; + } + } + } + + &__content { + @include page-grid; + + @include on-desktop { + position: relative; + } + } + + &__icon { + display: block; + position: absolute; + top: 27px; + width: 24px; + height: 24px; + background-image: url(../images/icon/icon-menu.svg); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + cursor: pointer; + + @include hover(transform, scale(1.2)); + + @include on-tablet { + position: static; + grid-column: 1 / 2; + margin-top: 39px; + } + } + + &__title { + grid-column: 1 / -1; + margin: 20px 0; + font-family: $monserrat-font; + font-weight: 700; + font-size: 45px; + line-height: 45px; + text-align: center; + color: #000; + + @include on-tablet { + grid-column: 1 / 4; + + margin: 64px 0 38px; + font-size: 54px; + line-height: 64.8px; + text-align: left; + } + + @include on-desktop { + grid-column: 1 / 6; + + margin: 143px 0 89px; + font-size: 72px; + line-height: 86.4px; + } + } + + &__button { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 4; + } + + @include on-desktop { + grid-column: 3 / 6; + } + } + + &__event-link { + display: none; + + @include on-desktop { + display: flex; + position: absolute; + left: -60px; + bottom: -50px; + align-items: center; + gap: 20px; + transform: rotate(-90deg); + } + } + + &__line { + content: ''; + width: 70px; + height: 1px; + background-color:#1A5A4C; + } + + &__link { + text-decoration: none; + font-family: $ibm-plex-font; + font-size: 14px; + line-height: 14px; + color:#687480; + } +} diff --git a/src/styles/blocks/image-slider.scss b/src/styles/blocks/image-slider.scss new file mode 100644 index 000000000..cb14e721a --- /dev/null +++ b/src/styles/blocks/image-slider.scss @@ -0,0 +1,20 @@ +$swiper-pagination-bottom: 12px; + +.image-slider { + @include on-desktop { + position: absolute; + overflow: hidden; + display: none; + } + + &__pagination .swiper-pagination-bullet { + bottom: $swiper-pagination-bottom; + width: 9px; + height: 9px; + background-color:#1A5A4C; + } +} + + + + diff --git a/src/styles/blocks/image.scss b/src/styles/blocks/image.scss new file mode 100644 index 000000000..0e1898fb4 --- /dev/null +++ b/src/styles/blocks/image.scss @@ -0,0 +1,6 @@ +.image { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; +} diff --git a/src/styles/blocks/lecture.scss b/src/styles/blocks/lecture.scss new file mode 100644 index 000000000..a1e9a89ef --- /dev/null +++ b/src/styles/blocks/lecture.scss @@ -0,0 +1,115 @@ +.lecture { + position: relative; + margin-top: 60px; + width: 100%; + height: 210px; + background-image: url(../images/lecture_background_mobile.png); + background-position: bottom; + background-repeat: no-repeat; + background-size: cover; + + @include on-tablet { + margin-top: 112px; + height: 390px; + background-image: url(../images/lecture_background_tablet.png); + } + + @include on-desktop { + margin-top: 104px; + height: 550px; + background-image: url(../images/lecture_background_desktop.png); + } + + &__content { + position: absolute; + top: 153px; + width: calc(100% - 40px); + height: 140px; + background-color: #fff; + display: flex; + flex-direction: column; + gap: 20px; + box-shadow: 0 2px rgba(26, 90, 76, 0.25); + + @include on-tablet { + width: calc(100% - 198px); + left: calc((100vw - (100% - 184px)) / 2); + top: 306px; + height: 204px; + gap: 16px; + } + + @include on-desktop { + width: 570px; + left: calc((100vw - 584px) / 2); + top: 448px; + } + } + + &__pretitle { + margin-top: 20px; + display: flex; + align-items: center; + justify-content: center; + gap: 20px; + + @include on-tablet { + justify-content: space-between; + padding-inline: 55px; + margin-top: 45px; + } + + @include on-desktop { + padding-inline: 100px; + } + } + + &__name { + margin: 0; + font-family: $ibm-plex-font; + font-weight: 500; + font-size: 16px; + line-height: 16px; + color: #687480; + + @include on-tablet { + font-size: 14px; + line-height: 14px; + } + } + + &__date { + margin: 0; + font-family: $ibm-plex-font; + font-weight: 700; + font-size: 16px; + line-height: 24px; + color:#1A5A4C; + + @include on-tablet { + width: 210px; + font-size: 14px; + line-height: 21px; + } + } + + &__title { + font-family: $monserrat-font; + font-weight: 400; + font-size: 28px; + line-height: 28px; + text-align: center; + color: $section-title-color; + + @include on-tablet { + text-align: left; + padding-inline: 55px; + font-size: 36px; + line-height: 36px; + } + + @include on-desktop { + padding-inline: 100px; + } + } +} diff --git a/src/styles/blocks/logo.scss b/src/styles/blocks/logo.scss new file mode 100644 index 000000000..71f443e22 --- /dev/null +++ b/src/styles/blocks/logo.scss @@ -0,0 +1,12 @@ +.logo { + display: block; + width: max-content; + + + @include hover(transform, scale(1.1)); + + &__img { + width: 55px; + height: 61px; + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..b0db7baaf --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,80 @@ +.menu { + position: absolute; + z-index: 1; + width: 100%; + background-color: #1A5A4C; + + &::after { + content: ""; + width: 100%; + height: 100vh; + display: block; + position: absolute; + box-shadow: inset 100vw 100vh rgba(0,0,0,50%); + } + + &__content { + position: relative; + height: 400px; + + @include on-tablet { + display: flex; + gap: 38px; + height: 225px; + } + + @include on-desktop { + gap: 190px; + } + } + + &__top { + display: flex; + gap: 28px; + + @include on-tablet { + gap: 38px; + } + + @include on-desktop { + gap: 102px; + } + } + + &__icon { + display: block; + margin-top: 27px; + width: 24px; + height: 24px; + background-image: url(../images/icon/icon-close.svg); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + + @include hover(transform, scale(1.2)); + + @include on-tablet { + margin-top: 40px; + } + } + + &__nav { + margin: 11px 0 0; + + @include on-tablet { + margin: 23px 0 0; + } + } + + &__line { + width: 100%; + height: 1px; + background-color: #fff; + margin-block: 24px; + + @include on-tablet { + height: 145px; + width: 1px; + } + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 000000000..b8d7815bf --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,86 @@ +.nav { + @include local-grid; + + height: min-content; + gap: 24px 28px; + list-style: none; + padding: 0; + margin: 0; + + &--for-footer { + gap: 20px 47px; + + @include on-desktop { + gap: 20px 87px; + } + } + + &__item { + position: relative; + width: max-content; + height: min-content; + + &::after { + content: ''; + position: absolute; + bottom: -8px; + display: block; + height: 1px; + width: 100%; + background-color: #fff; + + transition: transform 0.3s; + transform: scale(0); + transform-origin: left; + } + + &:hover::after { + transform: scale(1); + } + + &--first { + grid-area: 1 / 1 / 2 / 2; + align-self: end; + } + + &--second { + grid-area: 1 / 2 / 2 / 3; + align-self: end; + } + + &--third { + grid-area: 2 / 1 / 3 / 2; + } + + &--fourth { + grid-area: 2 / 2 / 3 / 3; + } + + &--for-footer { + &::after { + background-color: $section-title-color; + } + } + } + + &__link { + text-decoration: none; + font-family: $ibm-plex-font; + font-weight: 500; + font-size: 16px; + line-height: 16px; + color: #fff; + + @include on-desktop { + font-size: 22px; + line-height: 22px; + } + + &--for-footer { + color: $section-title-color; + font-weight: 400; + font-size: 14px; + line-height: 14px; + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..f2c4c3fae --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,51 @@ +.page { + scroll-behavior: smooth; + box-sizing: border-box; + + &__body { + position: relative; + margin: 0; + min-width: calc(320px - $scroll-width); + + &--with-menu { + overflow: hidden; + } + } + + &__menu { + position: fixed; + top: -15; + left: 0; + right: 0; + + opacity: 0; + pointer-events: none; + transition: all ease-in .3s; + + &:target { + top: 0; + opacity: 1; + pointer-events: all; + } + } + + &::-webkit-scrollbar { + width: $scroll-width; + } + + &::-webkit-scrollbar-track { + border-radius: 8px; + } + + &::-webkit-scrollbar-thumb { + height: 56px; + border-radius: 8px; + border: 4px solid transparent; + background-clip: content-box; + background-color: #888; + } + + &::-webkit-scrollbar-thumb:hover { + background-color: #555; + } +} diff --git a/src/styles/blocks/paintings.scss b/src/styles/blocks/paintings.scss new file mode 100644 index 000000000..c6b42467c --- /dev/null +++ b/src/styles/blocks/paintings.scss @@ -0,0 +1,37 @@ +.paintings { + display: flex; + flex-direction: column; + gap: 30px; + + &__first-row { + @include page-grid; + } + + &__first-painting { + grid-column: 1 / 5; + + @include hover(scale, 1.1); + } + + &__second-painting { + grid-column: 5 / -1; + + @include hover(scale, 1.1); + } + + &__second-row { + @include page-grid; + } + + &__third-painting { + grid-column: 1 / 9; + + @include hover(scale, 1.1); + } + + &__fourth-painting { + grid-column: 9 / -1; + + @include hover(scale, 1.1); + } +} diff --git a/src/styles/blocks/scroll-to-top.scss b/src/styles/blocks/scroll-to-top.scss new file mode 100644 index 000000000..5f171543a --- /dev/null +++ b/src/styles/blocks/scroll-to-top.scss @@ -0,0 +1,25 @@ +.scroll-to-top { + position: fixed; + right: 20px; + bottom: 100px; + z-index: 2; + width: 50px; + height: 50px; + border-radius: 50%; + border: 1px solid #1A5A4C; + background-image: url(../images/icon/arrow-up-green.svg); + background-position: center; + background-repeat: no-repeat; + cursor: pointer; + transition: all .5s; + + @include on-desktop { + bottom: 60px; + } + + &:hover { + background-image: url(../images/icon/arrow-up-white.svg); + background-color: #1A5A4C; + } +} + diff --git a/src/styles/blocks/section-title.scss b/src/styles/blocks/section-title.scss new file mode 100644 index 000000000..dde900380 --- /dev/null +++ b/src/styles/blocks/section-title.scss @@ -0,0 +1,20 @@ +.section-title { + margin: 0 0 40px; + text-align: center; + font-family: $monserrat-font; + font-weight: 700; + font-size: 36px; + line-height: 36px; + color: $section-title-color; + + @include on-tablet { + text-align: start; + margin-bottom: 48px; + font-size: 48px; + line-height: 48px; + } + + @include on-desktop { + margin-bottom: 56px; + } +} diff --git a/src/styles/blocks/subscription.scss b/src/styles/blocks/subscription.scss new file mode 100644 index 000000000..424a40f1e --- /dev/null +++ b/src/styles/blocks/subscription.scss @@ -0,0 +1,141 @@ +.subscription { + position: relative; + margin-top: 100px; + width: 100%; + height: 386px; + background-image: url(../images/subscription_background.png); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + + @include on-tablet { + margin-top: 92px; + height: 380px; + } + + @include on-desktop { + margin-top: 200px; + height: 550px; + } + + &__content { + padding-top: 88px; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 50px; + + @include on-tablet { + padding-top: 82px; + gap: 64px; + } + + @include on-desktop { + padding-top: 163px; + gap: 72px; + } + } + + &__top { + display: flex; + flex-direction: column; + gap: 20px; + + @include on-tablet { + gap: 16px; + } + } + + &__title { + font-family: $monserrat-font; + font-weight: 700; + font-size: 36px; + line-height: 36px; + text-align: center; + color: #fff; + + @include on-tablet { + font-size: 48px; + line-height: 48px; + } + } + + &__text { + font-family: $ibm-plex-font; + font-weight: 400; + font-size: 18px; + line-height: 27px; + text-align: center; + color: #fff; + + @include on-tablet { + line-height: 18px; + } + } + + &__bottom { + display: flex; + justify-content: center; + + @include on-tablet { + gap: 16px; + } + + @include on-desktop { + gap: 30px; + } + } + + &__email-field { + width: 230px; + height: 50px; + padding: 0 0 0 24px; + border: none; + font-family: $monserrat-font; + font-size: 14px; + line-height: 14px; + color: $section-title-color; + + @include on-tablet { + width: 374px; + height: 70px; + } + + @include on-desktop { + width: 470px; + padding: 0 0 0 32px; + } + + &::placeholder { + font-family: $monserrat-font; + font-size: 14px; + line-height: 14px; + color: #687480; + } + + &:focus { + outline: none; + } + } + + &__button { + width: 50px; + height: 50px; + padding: 0; + border: none; + background-color:#F14A27; + background-image: url(../images/subscription_arrow_right.svg); + background-repeat: no-repeat; + background-position: center; + cursor: pointer; + + @include on-tablet { + width: 70px; + height: 70px; + } + + @include hover(scale, 1.2); + } +} diff --git a/src/styles/blocks/timetable.scss b/src/styles/blocks/timetable.scss new file mode 100644 index 000000000..ecf070880 --- /dev/null +++ b/src/styles/blocks/timetable.scss @@ -0,0 +1,63 @@ +.timetable { + display: flex; + flex-direction: column; + gap: 16px; + color: #fff; + + @include on-tablet { + flex-direction: row; + align-items: center; + gap: 26px; + } + + &--for-footer { + color: $section-title-color; + + @include on-tablet { + flex-direction: column; + align-items: flex-start; + } + } + + &__schedule { + display: flex; + flex-direction: column; + gap: 20px; + } + + &__title { + margin: 0; + font-family: $ibm-plex-font; + font-weight: 400; + font-size: 14px; + line-height: 20px; + color: inherit; + } + + &__hour { + margin: 0; + width: max-content; + font-family: $ibm-plex-font; + font-weight: 600; + font-size: 14px; + line-height: 21px; + color: inherit; + + &--day { + font-weight: 400; + } + } + + &__weekend { + margin: 0; + font-family: $ibm-plex-font; + font-weight: 600; + font-size: 14px; + line-height: 21px; + color: inherit; + + @include on-tablet { + max-width: 144px; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss deleted file mode 100644 index fb9195d12..000000000 --- a/src/styles/main.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} diff --git a/src/styles/style.scss b/src/styles/style.scss new file mode 100644 index 000000000..3dee38608 --- /dev/null +++ b/src/styles/style.scss @@ -0,0 +1,22 @@ +@import 'utils'; +@import 'typography'; +@import 'blocks/button'; +@import 'blocks/contacts'; +@import 'blocks/container'; +@import 'blocks/event'; +@import 'blocks/events'; +@import 'blocks/footer'; +@import 'blocks/gallery'; +@import 'blocks/header'; +@import 'blocks/image-slider'; +@import 'blocks/image'; +@import 'blocks/lecture'; +@import 'blocks/logo'; +@import 'blocks/menu'; +@import 'blocks/nav'; +@import 'blocks/page'; +@import 'blocks/paintings'; +@import 'blocks/scroll-to-top'; +@import 'blocks/section-title'; +@import 'blocks/subscription'; +@import 'blocks/timetable'; diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..e137fe68a 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,56 @@ #{$_property}: $_toValue; } } + +@mixin on-tablet { + @media(min-width: 576px) { + @content; + } +} + +@mixin on-desktop { + @media(min-width: 1024px) { + @content; + } +} + +@mixin page-grid { + --columns: 2; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 20px; + + @include on-tablet { + --columns: 6; + + column-gap: 20px; + } + + @include on-desktop { + --columns: 12; + + column-gap: 30px; + } +} + +@mixin local-grid { + display: grid; + grid-template-rows: repeat(2, 1fr); + grid-template-columns: repeat(2, 1fr); +} + +@mixin footer-grid { + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + + @include on-tablet { + --columns: 4; + + column-gap: 20px; + } + + @include on-desktop { + column-gap: 30px; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..b52256633 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,5 @@ $c-gray: #eee; +$monserrat-font: "Montserrat", sans-serif; +$ibm-plex-font: "IBM Plex Sans", sans-serif; +$section-title-color: #0F0E08; +$scroll-width: 14px;