diff --git a/README.md b/README.md index 5f9e97051..4e46029e1 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://Krykunov.github.io/Museum/). 14. Copy `DEMO LINK` to the PR description. > To update you PR repeat steps 7-11. diff --git a/src/images/announcement.jpeg b/src/images/announcement.jpeg new file mode 100644 index 000000000..bc310252a Binary files /dev/null and b/src/images/announcement.jpeg differ diff --git a/src/images/events/event1.jpeg b/src/images/events/event1.jpeg new file mode 100644 index 000000000..4cd5ae494 Binary files /dev/null and b/src/images/events/event1.jpeg differ diff --git a/src/images/events/event2.jpeg b/src/images/events/event2.jpeg new file mode 100644 index 000000000..36b3982d2 Binary files /dev/null and b/src/images/events/event2.jpeg differ diff --git a/src/images/favicon/apple-touch-icon.png b/src/images/favicon/apple-touch-icon.png new file mode 100644 index 000000000..41b3e53c3 Binary files /dev/null and b/src/images/favicon/apple-touch-icon.png differ diff --git a/src/images/favicon/favicon-48x48.png b/src/images/favicon/favicon-48x48.png new file mode 100644 index 000000000..0b3e4d39d Binary files /dev/null and b/src/images/favicon/favicon-48x48.png differ diff --git a/src/images/favicon/favicon.ico b/src/images/favicon/favicon.ico new file mode 100644 index 000000000..b9cc03c75 Binary files /dev/null and b/src/images/favicon/favicon.ico differ diff --git a/src/images/favicon/favicon.svg b/src/images/favicon/favicon.svg new file mode 100644 index 000000000..6648c6c1a --- /dev/null +++ b/src/images/favicon/favicon.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/src/images/favicon/site.webmanifest b/src/images/favicon/site.webmanifest new file mode 100644 index 000000000..487dfe80d --- /dev/null +++ b/src/images/favicon/site.webmanifest @@ -0,0 +1,21 @@ +{ + "name": "Художній музей", + "short_name": "NaMu", + "icons": [ + { + "src": "./web-app-manifest-192x192.png", + "sizes": "192x192", + "type": "image/png", + "purpose": "maskable" + }, + { + "src": "./web-app-manifest-512x512.png", + "sizes": "512x512", + "type": "image/png", + "purpose": "maskable" + } + ], + "theme_color": "#ffffff", + "background_color": "#ffffff", + "display": "standalone" +} diff --git a/src/images/favicon/web-app-manifest-192x192.png b/src/images/favicon/web-app-manifest-192x192.png new file mode 100644 index 000000000..7202c0fd5 Binary files /dev/null and b/src/images/favicon/web-app-manifest-192x192.png differ diff --git a/src/images/favicon/web-app-manifest-512x512.png b/src/images/favicon/web-app-manifest-512x512.png new file mode 100644 index 000000000..cc7056de9 Binary files /dev/null and b/src/images/favicon/web-app-manifest-512x512.png differ diff --git a/src/images/gallery/gal1.jpeg b/src/images/gallery/gal1.jpeg new file mode 100644 index 000000000..0f68e92b1 Binary files /dev/null and b/src/images/gallery/gal1.jpeg differ diff --git a/src/images/gallery/gal2.jpeg b/src/images/gallery/gal2.jpeg new file mode 100644 index 000000000..2882f4e36 Binary files /dev/null and b/src/images/gallery/gal2.jpeg differ diff --git a/src/images/gallery/gal3.jpeg b/src/images/gallery/gal3.jpeg new file mode 100644 index 000000000..1b497b632 Binary files /dev/null and b/src/images/gallery/gal3.jpeg differ diff --git a/src/images/gallery/gal4.jpeg b/src/images/gallery/gal4.jpeg new file mode 100644 index 000000000..e928d603a Binary files /dev/null and b/src/images/gallery/gal4.jpeg differ diff --git a/src/images/icons/arrow.svg b/src/images/icons/arrow.svg new file mode 100644 index 000000000..eac955d31 --- /dev/null +++ b/src/images/icons/arrow.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/dot.svg b/src/images/icons/dot.svg new file mode 100644 index 000000000..2be36d1fe --- /dev/null +++ b/src/images/icons/dot.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/fb.svg b/src/images/icons/fb.svg new file mode 100644 index 000000000..511e7205b --- /dev/null +++ b/src/images/icons/fb.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/icon-close.svg b/src/images/icons/icon-close.svg new file mode 100644 index 000000000..d7eac2e47 --- /dev/null +++ b/src/images/icons/icon-close.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/icon-menu.svg b/src/images/icons/icon-menu.svg new file mode 100644 index 000000000..f08cc7c6a --- /dev/null +++ b/src/images/icons/icon-menu.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/in.svg b/src/images/icons/in.svg new file mode 100644 index 000000000..575d51788 --- /dev/null +++ b/src/images/icons/in.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/images/icons/right.svg b/src/images/icons/right.svg new file mode 100644 index 000000000..0da1e9b20 --- /dev/null +++ b/src/images/icons/right.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/up.svg b/src/images/icons/up.svg new file mode 100644 index 000000000..59f857ab0 --- /dev/null +++ b/src/images/icons/up.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/logo.svg b/src/images/logo.svg new file mode 100644 index 000000000..2b4e1a3c1 --- /dev/null +++ b/src/images/logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/museum.jpg b/src/images/museum.jpg new file mode 100644 index 000000000..cf09e0767 Binary files /dev/null and b/src/images/museum.jpg differ diff --git a/src/images/subscription.jpeg b/src/images/subscription.jpeg new file mode 100644 index 000000000..f12a6886c Binary files /dev/null and b/src/images/subscription.jpeg differ diff --git a/src/index.html b/src/index.html index 8019b83ec..7de5bd277 100644 --- a/src/index.html +++ b/src/index.html @@ -1,3 +1,4 @@ + @@ -6,14 +7,367 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> - Title + Художній музей + + + + + + + + + + - -

Hello Mate Academy

- + + + +
+
+ +
+
+

Художній музей

+ + + Квитки + + +

події

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

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

+
+
+ event1 +
+
+
Виставка
+
26.08-29.11.2019
+
+ +

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

+

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

+
+ +
+ +
+ event2 +
+
+
Виставка
+
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..8419159cd 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,31 @@ 'use strict'; + +const gallery = document.querySelector('.gallery__images'); +const images = document.querySelectorAll('.gallery__image'); +const navigation = document.querySelector('.gallery__navigation'); + +let currentIndex = 0; + +images.forEach((_, i) => { + const dot = document.createElement('button'); + dot.classList.add('gallery__dot'); + navigation.appendChild(dot); +}); + +const dots = Array.from(navigation.querySelectorAll(".gallery__dot")); +dots[0].classList.add("active"); + +function updateActiveDot() { + const scrollPosition = gallery.scrollLeft; + + const imageWidth = images[0].clientWidth + 20; + const currentIndex = Math.round(scrollPosition / imageWidth); + + + dots.forEach((dot, index) => { + dot.classList.toggle("active", index === currentIndex); + }); +} + +gallery.addEventListener("scroll", updateActiveDot); + 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/_typography.scss b/src/styles/_typography.scss deleted file mode 100644 index 1837eb46e..000000000 --- a/src/styles/_typography.scss +++ /dev/null @@ -1,3 +0,0 @@ -h1 { - @extend %h1; -} diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss index 3280c3fe1..71b422441 100644 --- a/src/styles/_utils.scss +++ b/src/styles/_utils.scss @@ -1,3 +1,3 @@ +@import 'utils/reset'; @import 'utils/vars'; @import 'utils/mixins'; -@import 'utils/extends'; diff --git a/src/styles/blocks/announcement.scss b/src/styles/blocks/announcement.scss new file mode 100644 index 000000000..1a62b5686 --- /dev/null +++ b/src/styles/blocks/announcement.scss @@ -0,0 +1,82 @@ +.announcement { + height: 210px; + margin-bottom: 183px; + display: flex; + align-items: flex-end; + background-image: url('/src/images/announcement.jpeg'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + + @include on-tablet { + height: 390px; + margin-bottom: 208px; + } + + @include on-desktop { + height: 550px; + margin-bottom: 302px; + } + + &__content { + background-color: #fff; + padding-top: 20px; + padding-bottom: 20px; + gap: 20px; + display: flex; + flex-direction: column; + align-items: center; + margin: auto; + max-width: 570px; + transform: translateY(57px); + box-shadow: 0 2px 0 0 rgba(26, 90, 76, 0.25); + + @include on-tablet { + padding: 45px 55px 50px; + } + + @include on-desktop { + padding: 45px 100px 50px; + } + } + + &__meta { + display: flex; + align-items: center; + width: 100%; + justify-content: space-evenly; + padding-left: 21px; + padding-right: 21px; + + @include on-tablet { + justify-content: space-between; + } + } + + &__type { + font-size: 16px; + line-height: 16px; + font-weight: 500; + color: $text-subheaders-color; + } + + &__date { + font-size: 16px; + line-height: 24px; + font-weight: 700; + color: $accent-color; + } + + &__title { + font-size: 28px; + line-height: 28px; + font-weight: 400; + text-align: center; + + @include on-tablet { + font-size: 36px; + line-height: 36px; + text-align: left; + } + } +} diff --git a/src/styles/blocks/aside.scss b/src/styles/blocks/aside.scss new file mode 100644 index 000000000..623388409 --- /dev/null +++ b/src/styles/blocks/aside.scss @@ -0,0 +1,72 @@ +.side-menu { + box-sizing: border-box; + height: 100vh; + background-color: rgba(0, 0, 0, 0.5); + width: 100%; + overflow: auto; + opacity: 0; + pointer-events: none; + transition: all $effect-duration ease-in-out; + position: fixed; + top: 0; + left: 0; + right: 0; + transform: translateY(-100%); + z-index: 2; + color: $text-light-color; + + &__top { + padding: 27px 0; + background-color: $accent-color; + + @include on-tablet { + padding: 40px 20px; + margin-bottom: 0; + } + } + + &__content { + display: flex; + flex-direction: column; + justify-content: flex-start; + + @include on-tablet { + flex-direction: row; + } + } + + &__nav { + display: flex; + gap: 28px; + border-bottom: 1px solid rgba(255,255,255,0.5); + padding-bottom: 24px; + + @include on-tablet { + gap: 38px; + border-bottom: 0; + border-right: 1px solid rgba(255,255,255,0.5); + padding-right: 38px; + } + + @include on-desktop { + gap: 102px; + padding-right: 102px; + } + } +} + +.side-menu:target { + opacity: 1; + pointer-events: all; + transform: translateY(0); +} + +.nav__list { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.nav__link { + color: $text-light-color; +} diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 000000000..486eddf82 --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,38 @@ +.button { + box-sizing: border-box; + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + font-size: 16px; + line-height: 16px; + font-weight: 500; + text-transform: uppercase; + border: 1px solid $accent-color; + height: 50px; + width: 280px; + cursor: pointer; + + @include on-tablet { + height: 70px; + width: 270px; + } + &__text { + flex-grow: 1; + text-align: center; + } + &__icon { + right: -50px; + width: 50px; + height: 100%; + background: $accent-color; + background-image: url('../images/icons/arrow.svg'); + background-position: center; + background-repeat: no-repeat; + + @include on-tablet { + width: 70px; + right: -70px; + } + } +} diff --git a/src/styles/blocks/event.scss b/src/styles/blocks/event.scss new file mode 100644 index 000000000..9a235ad3c --- /dev/null +++ b/src/styles/blocks/event.scss @@ -0,0 +1,105 @@ +.event { + @include page-grid; + + align-items: center; + row-gap: 20px; + + &__img { + width: 100%; + height: 100%; + object-fit: cover; + grid-column: 1/-1; + transition: transform $effect-duration; + + @include on-desktop { + grid-column: 1/8; + } + + &:hover { + transform: scale(1.05); + } + } + + &__info { + grid-column: 1/-1; + + @include on-desktop { + grid-column: 9/-1; + + } + } + + &__meta { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 10px; + + @include on-tablet { + justify-content: flex-start; + gap: 30px; + } + } + + &__type { + line-height: 16px; + font-weight: 500; + text-transform: uppercase; + color: $text-subheaders-color; + + @include on-tablet { + font-size: 14px; + line-height: 14px; + } + } + + &__date { + color: $accent-color; + line-height: 24px; + font-weight: 700; + + @include on-tablet { + font-size: 14px; + line-height: 21px; + } + } + + &__title { + position: relative; + display: inline-block; + font-size: 28px; + line-height: 28px; + font-weight: 400; + margin-bottom: 10px; + + @include on-tablet { + font-size: 36px; + line-height: 36px; + margin-bottom: 15px; + } + + &::after { + position: absolute; + right: -20px; + top: 50%; + transform: translateY(-50%); + content: ''; + display: inline-block; + width: 10px; + height: 10px; + background-color: $accent2-color; + + @include on-tablet { + width: 15px; + height: 15px; + right: -30px; + } + } + } + + &__descr { + font-size: 16px; + line-height: 24px; + font-weight: 300; + } +} diff --git a/src/styles/blocks/events.scss b/src/styles/blocks/events.scss new file mode 100644 index 000000000..f09c32d9d --- /dev/null +++ b/src/styles/blocks/events.scss @@ -0,0 +1,19 @@ +.events { + padding-top: 70px; + padding-bottom: 60px; + + @include on-tablet { + padding-top: 88px; + padding-bottom: 112px; + } + + @include on-desktop { + padding-bottom: 104px; + } + + &__list { + display: flex; + flex-direction: column; + gap: 64px; + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..1129b1d06 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,133 @@ +.footer { + padding-block: 50px; + + &__top { + font-size: 14px; + line-height: 21px; + + @include page-grid; + } + + &__logo-social { + grid-column: 1 / -1; + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 40px; + + @include on-tablet { + grid-column: 1 / 2; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + gap: 62px; + } + } + + &__schedule { + grid-column: 1 / 2; + padding-inline: 0; + padding-top: 0; + padding-bottom: 70px; + + @include on-tablet { + grid-column: 2 / 4; + } + + @include on-desktop { + grid-column: 3 / 5; + } + + & .schedule__content { + display: flex; + flex-direction: column; + gap: 20px; + } + + & .schedule__item { + display: flex; + flex-wrap: wrap; + } + + & .schedule__time { + display: block; + white-space: nowrap; + } + + } + + &__address { + position: relative; + grid-column: 2 / 3; + + @include on-tablet { + grid-column: 4 / 6; + } + + @include on-desktop { + grid-column: 5 / 7; + } + } + + &__link { + display: block; + &:hover { + text-decoration: underline; + } + } + + &__menu { + padding-top: 40px; + margin-bottom: 80px; + grid-column: 1 / -1; + + & .menu__link { + font-size: 14px; + font-weight: 400; + } + + @include on-tablet { + grid-column: 2 / 5; + border-top: 0; + padding-top: 65px; + } + + @include on-desktop { + grid-column: 8 / 11; + padding-top: 0; + } + } + + &__divider { + height: 1px; + grid-column: 1 / -1; + background-color: rgba(26, 90, 76, 0.5); + + @include on-tablet { + grid-column: 2 / 6; + } + + @include on-desktop { + grid-column: 7 / 8; + width: 1px; + height: 260px; + margin: 0 auto; + } + } + + &__bottom { + display: flex; + flex-direction: column-reverse; + align-items: center; + font-size: 12px; + line-height: 17px; + font-weight: 300; + gap: 10px; + + @include on-tablet { + flex-direction: row; + justify-content: space-between; + + } + } +} diff --git a/src/styles/blocks/gallery.scss b/src/styles/blocks/gallery.scss new file mode 100644 index 000000000..48b6a5d6e --- /dev/null +++ b/src/styles/blocks/gallery.scss @@ -0,0 +1,88 @@ +.gallery { + margin-bottom: 200px; + position: relative; + max-width: 100%; + overflow: hidden; + + &__images { + display: flex; + gap: 20px; + margin-bottom: 20px; + overflow-x: scroll; + scrollbar-width: none; + scroll-snap-type: x mandatory; + + @include on-desktop { + @include gallery-grid; + + overflow: visible; + } + } + + &__image { + height: 410px; + width: 100%; + object-fit: cover; + transition: transform $effect-duration; + scroll-snap-align: center; + + @include on-tablet { + height: 543px; + } + + @include on-desktop { + width: 100%; + height: 100%; + object-fit: cover; + + &--1 { + grid-column: 1/5; + grid-row: 1/8; + } + + &--2 { + grid-column: 5/-1; + grid-row: 1/8; + } + + &--3 { + grid-column: 1/9; + grid-row: 8/-1; + } + + &--4 { + grid-column: 9/-1; + grid-row: 8/-1; + } + } + &:hover { + transform: scale(1.05); + } + } + + &__navigation { + display: flex; + justify-content: center; + gap: 22px; + + @include on-desktop { + display: none; + } + } + + &__dot { + width: 9px; + height: 9px; + padding: 0; + border-radius: 50%; + border: 0; + cursor: pointer; + background-color: $nav-color; + transition: background-color $effect-duration; + + &.active { + background-color: $accent-color; + transition: background-color $effect-duration; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..9eb55ca25 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,90 @@ +.header { + display: flex; + flex-direction: column-reverse; + position: relative; + + &__content { + position: relative; + padding-top: 20px; + grid-column: 1 / -1; + + @include page-grid; + + @include on-tablet { + padding-top: 127px; + padding-bottom: 19px; + } + + @include on-desktop { + padding-top: 206px; + padding-bottom: 118px; + } + } + + &__info { + display: flex; + flex-direction: column; + align-items: center; + grid-column: 1/-1; + + @include on-tablet { + align-items: flex-start; + grid-column: 1 / 4; + } + + @include on-desktop { + align-items: flex-end; + grid-column: 1 / 6; + } + } + + &__title { + text-transform: uppercase; + margin-bottom: 20px; + font-size: 45px; + line-height: 45px; + text-align: center; + font-weight: 700; + color: #000; + + @include on-tablet { + margin-bottom: 38px; + font-size: 54px; + line-height: 65px; + text-align: left; + } + + @include on-desktop { + margin-bottom: 89px; + font-size: 4.5rem; + line-height: 86px; + text-align: left; + } + } + + &__descr { + display: none; + position: absolute; + left: -10px; + bottom: 100px; + transform: rotate(-90deg); + font-size: 14px; + line-height: 14px; + color: $text-subheaders-color; + + &::before { + content: ''; + position: absolute; + left: -90px; + width: 70px; + height: 1px; + top: 50%; + transform: translateY(-50%); + background: #000; + } + + @include on-desktop { + display: block; + } + } +} diff --git a/src/styles/blocks/hero.scss b/src/styles/blocks/hero.scss new file mode 100644 index 000000000..3c457d5bf --- /dev/null +++ b/src/styles/blocks/hero.scss @@ -0,0 +1,27 @@ +.hero { + box-sizing: border-box; + padding-top: 9px; + height: 300px; + display: flex; + justify-content: center; + background-image: url('../images/museum.jpg'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + + @include on-tablet { + justify-content: flex-start; + padding-left: 80px; + padding-top: 15px; + width: 45%; + right: 0; + top: 0; + bottom: 0; + position: absolute; + height: 100%; + } + + @include on-desktop { + width: 50%; + } +} diff --git a/src/styles/blocks/icons.scss b/src/styles/blocks/icons.scss new file mode 100644 index 000000000..14f8fdc00 --- /dev/null +++ b/src/styles/blocks/icons.scss @@ -0,0 +1,22 @@ +.icon { + display: block; + width: 1.5rem; + height: 1.5rem; + background-size: cover; + background-position: center; + transition: transform $effect-duration; + + &--menu { + position: absolute; + top: 27px; + z-index: 1; + background-image: url('../images/icons/icon-menu.svg'); + + @include on-tablet { + top: 40px; + } + } + &--close { + background-image: url('../images/icons/icon-close.svg'); + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..a148fec33 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,20 @@ +.menu { + + &__list { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 30px; + } + + &__link { + font-size: 1rem; + line-height: 1rem; + font-weight: 500; + + @include on-desktop { + font-size: 22px; + line-height: 22px; + } + } + +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..33f842025 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,25 @@ +html { + scroll-behavior: smooth; + font-size: 16px; +} + +h1, +h2, +h3, +h4 { + font-family: $headers-font; +} + +.page__body { + padding: 0; + margin: 0; + background-color: #fff; + font-family: 'IBM Plex Sans', sans-serif; + color: $text-regular-color; + overflow-y: scroll; + scroll-behavior: smooth; + + &:has(.side-menu:target) { + overflow: hidden; + } +} diff --git a/src/styles/blocks/schedule.scss b/src/styles/blocks/schedule.scss new file mode 100644 index 000000000..c97b0dc37 --- /dev/null +++ b/src/styles/blocks/schedule.scss @@ -0,0 +1,45 @@ +.schedule { + box-sizing: border-box; + padding-top: 24px; + font-size: 14px; + line-height: 21px; + font-weight: 400; + + @include on-tablet { + padding-top: 0; + padding-inline: 38px; + } + + @include on-desktop { + padding-inline: 102px; + } + + &__header { + margin-bottom: 20px; + } + + &__content { + display: grid; + grid-template-columns: repeat(1, 1fr); + gap: 1rem; + + @include on-tablet { + grid-template-columns: repeat(2, minmax(170px, 1fr)); + gap: 30px; + } + } + + &__item { + display: flex; + flex-wrap: nowrap; + } + + &__time { + font-weight: 600; + margin-right: 10px; + } + + &__descr { + max-width: 170px; + } +} diff --git a/src/styles/blocks/scroll-to-top.scss b/src/styles/blocks/scroll-to-top.scss new file mode 100644 index 000000000..34b015feb --- /dev/null +++ b/src/styles/blocks/scroll-to-top.scss @@ -0,0 +1,19 @@ +.scroll-to-top { + position: absolute; + bottom: 20px; + right: 0; + padding: 0; + margin: 0; + background-image: url('../images/icons/up.svg'); + background-color: #fff; + background-position: center; + background-repeat: no-repeat; + width: 50px; + height: 50px; + border-radius: 50%; + border: 1px solid $accent-color; + + @include on-tablet { + display: none; + } +} diff --git a/src/styles/blocks/section-title.scss b/src/styles/blocks/section-title.scss new file mode 100644 index 000000000..dbb8c11e3 --- /dev/null +++ b/src/styles/blocks/section-title.scss @@ -0,0 +1,9 @@ +.section-title { + font-size: 36px; + text-align: center; + margin-bottom: 40px; + + @include on-tablet { + text-align: left; + } +} diff --git a/src/styles/blocks/social.scss b/src/styles/blocks/social.scss new file mode 100644 index 000000000..35f50ed26 --- /dev/null +++ b/src/styles/blocks/social.scss @@ -0,0 +1,25 @@ +.social { + display: flex; + flex-direction: row; + gap: 22px; + + @include on-tablet { + gap: 30px; + } + + &__icon { + display: flex; + width: 24px; + height: 24px; + background-size: cover; + background-position: center; + } + + &__icon--fb { + background-image: url(../images/icons/fb.svg); + } + + &__icon--in { + background-image: url(../images/icons/in.svg); + } +} diff --git a/src/styles/blocks/subscription.scss b/src/styles/blocks/subscription.scss new file mode 100644 index 000000000..fedf49b63 --- /dev/null +++ b/src/styles/blocks/subscription.scss @@ -0,0 +1,75 @@ +.subscription { + padding-block: 88px; + display: flex; + align-items: center; + background: url('/src/images/subscription.jpeg') rgba(0, 0, 0, 0.75); + background-blend-mode: multiply; + background-size: cover; + background-position: center; + background-repeat: no-repeat; + color: #fff; + + &__content { + display: flex; + flex-direction: column; + align-items: center; + } + + &__title { + margin-bottom: 20px; + } + + &__text { + font-size: 18px; + line-height: 27px; + text-align: center; + margin-bottom: 50px; + } + + &__form { + display: flex; + justify-content: center; + min-width: 100%; + + @include on-tablet { + gap: 16px; + } + + @include on-desktop { + gap: 16px; + } + } + + &__input { + box-sizing: border-box; + display: flex; + flex-grow: 1; + padding: 0 24px; + border: 0; + font-size: 14px; + + @include on-tablet { + width: 374px; + } + + @include on-desktop { + width: 470px; + } + } + + &__button { + width: 50px; + height: 50px; + background-color: $accent2-color; + border: 0; + background-image: url('/src/images/icons/right.svg'); + background-size: 24px; + background-position: center; + background-repeat: no-repeat; + + @include on-tablet { + width: 70px; + height: 70px; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..815be6157 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,22 @@ @import 'utils'; -@import 'fonts'; -@import 'typography'; +@import 'blocks/button'; +@import 'blocks/page'; +@import 'blocks/header'; +@import 'blocks/menu'; +@import 'blocks/icons'; +@import 'blocks/hero'; +@import 'blocks/aside'; +@import 'blocks/schedule'; +@import 'blocks/section-title'; +@import 'blocks/events'; +@import 'blocks/event'; +@import 'blocks/announcement'; +@import 'blocks/subscription'; +@import 'blocks/gallery'; +@import 'blocks/footer'; +@import 'blocks/social'; +@import 'blocks/scroll-to-top'; body { - background: $c-gray; + background: #fff; } diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss deleted file mode 100644 index d7201e7b3..000000000 --- a/src/styles/utils/_extends.scss +++ /dev/null @@ -1,4 +0,0 @@ -%h1 { - font-family: Roboto, sans-serif; - font-weight: 400; -} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..407d9afd5 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,64 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; - &:hover { - #{$_property}: $_toValue; +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; } } + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin on-large-desktop { + @media (min-width: $desktop-large-min-width) { + @content; + } +} + +@mixin content-padding-inline() { + margin-inline: auto; + padding-inline: 20px; + + @include on-tablet { + max-width: 640px; + padding-inline: 34px; + + } + + @include on-desktop { + max-width: 1280px; + padding-inline: 55px; + } + +} + +.container { + @include content-padding-inline; +} + +@mixin page-grid { + --columns: 2; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 20px; + + @include on-tablet { + --columns: 6; + + column-gap: 30px; + } + + @include on-desktop { + --columns: 12; + } +} + +@mixin gallery-grid { + display: grid; + grid-template-columns: repeat(12, 1fr); + grid-template-rows: repeat(12, 60px); + gap: 30px; +} + diff --git a/src/styles/utils/_reset.scss b/src/styles/utils/_reset.scss new file mode 100644 index 000000000..03f73dc9c --- /dev/null +++ b/src/styles/utils/_reset.scss @@ -0,0 +1,115 @@ +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + vertical-align: baseline; +} + +ol, +ul { + list-style: none; +} + +a { + text-decoration: none; + color: inherit; +} + +blockquote, +q { + quotes: none; +} + +blockquote::before, +blockquote::after, +q::before, +q::after { + content: ''; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..9baf9d92d 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,15 @@ -$c-gray: #eee; +$tablet-min-width: 640px; +$desktop-min-width: 1280px; +$desktop-large-min-width: 1440px; +$effect-duration: 0.3s; +$accent-color: #1a5a4c; +$accent2-color: #f14a27; +$text-regular-color: #4e4e4e; +$text-headers-color: #0f0e08; +$text-subheaders-color: #687480; +$text-light-color: #fff; +$text-light-color-hover: #c6c6c6; +$overlay-color: rgba(0, 0, 0, 0.75); +$nav-color: #E0E0E0; +$headers-font: Montserrat, sans-serif; +$letter-spacing: 3px;