diff --git a/src/images/events/image-1.png b/src/images/events/image-1.png new file mode 100644 index 000000000..c0a48f171 Binary files /dev/null and b/src/images/events/image-1.png differ diff --git a/src/images/events/image-2.png b/src/images/events/image-2.png new file mode 100644 index 000000000..6dc554ea6 Binary files /dev/null and b/src/images/events/image-2.png differ diff --git a/src/images/gallery/image-1.png b/src/images/gallery/image-1.png new file mode 100644 index 000000000..ca1bcccb8 Binary files /dev/null and b/src/images/gallery/image-1.png differ diff --git a/src/images/gallery/image-2.png b/src/images/gallery/image-2.png new file mode 100644 index 000000000..67dd9e8e7 Binary files /dev/null and b/src/images/gallery/image-2.png differ diff --git a/src/images/gallery/image-3.png b/src/images/gallery/image-3.png new file mode 100644 index 000000000..257254366 Binary files /dev/null and b/src/images/gallery/image-3.png differ diff --git a/src/images/gallery/image-4.png b/src/images/gallery/image-4.png new file mode 100644 index 000000000..3d77c35a0 Binary files /dev/null and b/src/images/gallery/image-4.png differ diff --git a/src/images/icons/burger-menu.png b/src/images/icons/burger-menu.png new file mode 100644 index 000000000..223df807b Binary files /dev/null and b/src/images/icons/burger-menu.png differ diff --git a/src/images/icons/button-right-arrow.png b/src/images/icons/button-right-arrow.png new file mode 100644 index 000000000..d46d2e0fa Binary files /dev/null and b/src/images/icons/button-right-arrow.png differ diff --git a/src/images/icons/facebook.png b/src/images/icons/facebook.png new file mode 100644 index 000000000..f2053a10e Binary files /dev/null and b/src/images/icons/facebook.png differ diff --git a/src/images/icons/input-arrow_right-black.png b/src/images/icons/input-arrow_right-black.png new file mode 100644 index 000000000..8748e0958 Binary files /dev/null and b/src/images/icons/input-arrow_right-black.png differ diff --git a/src/images/icons/instagram.png b/src/images/icons/instagram.png new file mode 100644 index 000000000..686483834 Binary files /dev/null and b/src/images/icons/instagram.png differ diff --git a/src/images/icons/menu-close.png b/src/images/icons/menu-close.png new file mode 100644 index 000000000..1c97fb5fa Binary files /dev/null and b/src/images/icons/menu-close.png differ diff --git a/src/images/lesson/image-3.png b/src/images/lesson/image-3.png new file mode 100644 index 000000000..014eda3cd Binary files /dev/null and b/src/images/lesson/image-3.png differ diff --git a/src/images/main-image.png b/src/images/main-image.png new file mode 100644 index 000000000..296041104 Binary files /dev/null and b/src/images/main-image.png differ diff --git a/src/images/new-logo.png b/src/images/new-logo.png new file mode 100644 index 000000000..d630bc741 Binary files /dev/null and b/src/images/new-logo.png differ diff --git a/src/images/subscribe.png b/src/images/subscribe.png new file mode 100644 index 000000000..c1e7d5c0b Binary files /dev/null and b/src/images/subscribe.png differ diff --git a/src/index.html b/src/index.html index 8019b83ec..9c6413c93 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,532 @@ - + - Title + NAMU + + + + + - -

Hello Mate Academy

+ + +
+
+
+ +
+
+
+ +
+ +
+ + Museum image +
+ + +
+

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

+ + Квитки + + right arrow + + +
+ + +
+
+ +
+

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

+ + Квитки + + right arrow + + + +
+
+ Події +
+
+ + +
+ + Museum image +
+
+
+
+ + + +
+
+
+
+

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

+ +
+ image 1 + +
+
+
Виставка
+
+ 26.08-29.11.2019 +
+
+
+

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

+
+
+ +

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

+
+
+
+ image-2 + +
+
+
Виставка
+
+ 26.08-29.11.2019 +
+
+
+

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

+
+
+ +

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

+
+
+
+ +
+
+ image 3 + +
+
+
Лекція
+
+ 26/08/2019 - 11:00 +
+
+
+ Від класицизму до романтизму +
+
+
+
+ + +
+ + +
+
+ + + diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 45cdd5400..6aa1f84e3 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,6 +1,6 @@ -@font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); - font-weight: normal; - font-style: normal; -} +// @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/aside.scss b/src/styles/blocks/aside.scss new file mode 100644 index 000000000..ee192a0fe --- /dev/null +++ b/src/styles/blocks/aside.scss @@ -0,0 +1,117 @@ +.aside { + background-color: $background-color-menu; + z-index: 2; + padding-block: 27px; + + @include on-tablet { + padding-block: 39px; + } + + @include on-desktop { + padding-top: 40px; + padding-bottom: 48px; + } + + &__content { + display: grid; + + --columns: 2; + + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 20px; + + @include on-tablet { + --columns: 6; + + column-gap: 30px; + } + + @include on-desktop { + --columns: 12; + } + + &-left { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 4; + border-right: 1px solid white; + } + + @include on-desktop { + grid-column: 1 / 7; + } + } + + &-right { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 4 / 7; + } + + @include on-desktop { + grid-column: 8 / -1; + } + } + } + + &__menu { + display: flex; + column-gap: 28px; + + @include on-tablet { + column-gap: 38px; + } + + @include on-desktop { + column-gap: 102px; + } + } + + &__close-icon { + &-link { + background-image: url('../images/icons/menu-close.png'); + display: block; + width: 24px; + height: 24px; + + @include hover(transform, scale(1.1)); + } + } + + &__schedule { + color: white; + font-weight: 400; + font-size: 14px; + line-height: 150%; + + @include on-tablet { + display: grid; + grid-template-columns: 1fr 1fr; + column-gap: 26px; + align-items: end; + } + + &-times { + display: flex; + flex-direction: column; + gap: 20px; + margin-bottom: 16px; + + @include on-tablet { + margin-bottom: 0; + } + + &-closed { + @include on-tablet { + width: 144px; + } + } + } + } +} + +.bold-text { + font-weight: 600; +} diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 000000000..b23eae466 --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,46 @@ +.button { + box-sizing: border-box; + border: 1px solid $button-color; + background-color: white; + margin: 0; + padding: 0 0 0 80px; + + display: flex; + align-items: center; + + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 100%; + text-transform: uppercase; + + width: 280px; + height: 50px; + + position: relative; + + @include on-tablet { + width: 270px; + height: 70px; + padding: 0 0 0 68px; + } + + &__img { + width: 50px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + background-color: $button-color; + cursor: pointer; + + position: absolute; + right: 0; + top: 0; + + @include on-tablet { + width: 70px; + height: 68px; + } + } +} diff --git a/src/styles/blocks/divider.scss b/src/styles/blocks/divider.scss new file mode 100644 index 000000000..28c335449 --- /dev/null +++ b/src/styles/blocks/divider.scss @@ -0,0 +1,28 @@ +.divider { + display: block; + width: 100%; + height: 1px; + background-color: white; + margin-bottom: 24px; + + @include on-tablet { + display: none; + } + + &-footer { + background-color: #1a5a4c80; + + grid-column: 1 / -1; + margin-bottom: 40px; + + @include on-tablet { + display: grid; + grid-column: 2 / -2; + margin-bottom: 64px; + } + + @include on-desktop { + display: none; + } + } +} diff --git a/src/styles/blocks/events.scss b/src/styles/blocks/events.scss new file mode 100644 index 000000000..579f381cb --- /dev/null +++ b/src/styles/blocks/events.scss @@ -0,0 +1,152 @@ +.events { + width: 100%; + + &__section { + width: 100%; + + article { + width: 100%; + + img { + width: 100%; + height: auto; + max-width: 100%; + object-fit: cover; + display: block; + } + } + + &-title { + font-family: Montserrat, sans-serif; + font-weight: 700; + font-size: 36px; + line-height: 100%; + text-align: center; + margin: 0; + margin-bottom: 40px; + + @include on-tablet { + text-align: start; + font-size: 48px; + margin-bottom: 48px; + } + + @include on-desktop { + margin-bottom: 56px; + } + } + + &-content { + display: grid; + + --columns: 2; + + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 20px; + + padding-bottom: 60px; + + @include on-tablet { + --columns: 6; + + column-gap: 30px; + } + + @include on-desktop { + --columns: 12; + + align-items: center; + padding-bottom: 104px; + } + } + + &-image { + grid-column: 1 / -1; + + margin-bottom: 20px; + + @include on-tablet { + margin-bottom: 40px; + } + + @include on-desktop { + grid-column: 1 / 8; + + margin-bottom: 0; + } + } + + &-text { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-desktop { + grid-column: 9 / -1; + } + + &-wrapper { + display: flex; + + align-items: center; + gap: 10px; + margin-bottom: 15px; + } + + &-title { + margin: 0; + font-family: Montserrat, sans-serif; + font-weight: 400; + font-size: 28px; + line-height: 100%; + + @include on-tablet { + font-size: 36px; + } + } + + &-kvadrat { + display: block; + height: 10px; + width: 10px; + background-color: red; + } + + &-topic { + margin: 0; + font-weight: 300; + font-size: 16px; + line-height: 150%; + color: $event-topic-color; + } + } + + &-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 15px; + + @include on-tablet { + margin-bottom: 30px; + } + + &-title { + font-weight: 500; + font-size: 16px; + line-height: 100%; + color: #687480; + text-transform: uppercase; + } + + &-date { + font-weight: 700; + font-size: 16px; + line-height: 150%; + color: $button-color; + } + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..9400a64f0 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,180 @@ +.footer { + padding-block: 50px; + + &__content { + display: grid; + + --columns: 2; + + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 20px; + + @include on-tablet { + --columns: 6; + + column-gap: 30px; + } + + @include on-desktop { + --columns: 12; + } + } + + &__top { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 40px; + + grid-column: 1 / -1; + + @include on-tablet { + grid-column: span 1; + + flex-direction: column; + justify-content: start; + gap: 62px; + } + + @include on-desktop { + grid-column: span 1; + } + + &-logo { + @include hover(transform, scale(1.1)); + } + } + + &__social-media { + display: flex; + gap: 20px; + } + + &__schedule { + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 150%; + margin-bottom: 70px; + + @include on-tablet { + grid-column: span 2; + margin-bottom: 64px; + } + + @include on-desktop { + grid-column: 3 / 5; + margin-bottom: 87px; + } + + &-times { + &-margin { + margin-bottom: 20px; + } + } + + &-contact { + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 150%; + + &-margin { + margin-bottom: 20px; + } + + &-link { + text-decoration: none; + color: $main-font-color; + + &:hover { + color: $button-color; + } + } + + @include on-tablet { + grid-column: span 2; + } + + @include on-desktop { + grid-column: 5 / 7; + } + } + } + + &__nav { + grid-column: 1 / -1; + display: grid; + + --columns: 2; + + grid-template-columns: repeat(var(--columns), 1fr); + gap: 20px; + + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 100%; + + margin-bottom: 70px; + + @include on-tablet { + grid-column: 2 / -2; + gap: 30px; + + margin-bottom: 120px; + } + + @include on-desktop { + grid-column: 8 / -2; + } + + &-list { + padding: 0; + margin: 0; + list-style: none; + } + + &-item { + margin-bottom: 20px; + } + + &-link { + text-decoration: none; + color: $main-font-color; + } + } + + &__copyright { + grid-column: 1 / -1; + + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 300; + font-size: 12px; + line-height: 141%; + text-align: center; + + display: flex; + flex-direction: column; + gap: 10px; + + @include on-tablet { + flex-direction: row; + justify-content: space-between; + align-items: center; + } + } +} + +.horizontal { + display: none; + + @include on-desktop { + display: block; + height: 100%; + width: 1px; + background-color: #1a5a4c80; + justify-items: center; + margin-left: 34px; + } +} diff --git a/src/styles/blocks/gallery.scss b/src/styles/blocks/gallery.scss new file mode 100644 index 000000000..2a8018657 --- /dev/null +++ b/src/styles/blocks/gallery.scss @@ -0,0 +1,111 @@ +.gallery { + padding-top: 200px; + padding-bottom: 100px; + + @include on-desktop { + padding-top: 300px; + padding-bottom: 200px; + } + + &__title { + font-family: Montserrat, sans-serif; + font-weight: 700; + font-size: 36px; + line-height: 100%; + text-align: center; + margin: 0; + margin-bottom: 40px; + + @include on-tablet { + font-size: 48px; + text-align: start; + margin-bottom: 48px; + } + + @include on-desktop { + margin-bottom: 56px; + } + } + + &__images { + width: 100%; + + display: grid; + gap: 20px; + overflow: hidden; + scroll-behavior: smooth; + margin-bottom: 40px; + + grid-template-columns: repeat(4, calc(100vw - 40px)); + + @include on-tablet { + grid-template-columns: repeat(4, calc(50vw - 39px - 15px)); + } + + @include on-desktop { + --columns: 12; + + grid-template-columns: repeat(var(--columns), 1fr); + } + } + + &__image { + width: 100%; + height: 100%; + object-fit: cover; + + @include hover(transform, scale(1.02)); + + &-first { + @include on-desktop { + grid-column: 1 / 5; + } + } + + &-second { + @include on-desktop { + grid-column: 5 / -1; + } + } + + &-third { + @include on-desktop { + grid-column: 1 / 9; + } + } + + &-fourth { + @include on-desktop { + grid-column: 9 / -1; + } + } + } +} + +.pagination { + display: flex; + gap: 22px; + align-items: center; + place-content: center center; + margin-top: 20px; + + @include on-tablet { + margin-top: 32px; + } + + @include on-desktop { + display: none; + } + + &__ellipse { + display: block; + height: 9px; + width: 9px; + border-radius: 50%; + background-color: #e0e0e0; + } + + &__ellipse-green { + background-color: $button-color; + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..8150bc3e0 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,243 @@ +.header { + &__container { + display: grid; + + --columns: 2; + + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 20px; + + @include on-tablet { + // height: 100vh; + + --columns: 6; + + column-gap: 30px; + } + + @include on-desktop { + height: 100vh; + + --columns: 12; + } + } + + // МОБІЛЬНА ВЕРСІЯ - показуємо top і bottom + &__top { + grid-column: 1 / -1; + position: relative; + + @include on-tablet { + display: none; + } + + &-content { + position: absolute; + display: flex; + align-items: center; + gap: 88px; + } + + &-burger { + background-image: url('../images/icons/burger-menu.png'); + background-size: contain; + background-repeat: no-repeat; + height: 24px; + width: 24px; + cursor: pointer; + } + + &-logo { + top: 9px; + left: 20px; + + background-image: url('../images/new-logo.png'); + background-repeat: no-repeat; + background-size: contain; + width: 55px; + height: 61px; + margin-top: 15px; + z-index: 1; + } + + &-image { + width: calc(100% + 40px); + margin-left: -20px; + height: 300px; + } + } + + &__bottom { + grid-column: 1 / -1; + + @include on-tablet { + display: none; + } + + &-title { + font-family: Montserrat, sans-serif; + font-weight: 700; + font-size: 45px; + line-height: 100%; + text-align: center; + text-transform: uppercase; + color: #000; + } + + &-button { + text-decoration: none; + color: $main-font-color; + margin: 0 auto; + } + } + + // tablet and desktop + &__left-side { + display: none; + + @include on-tablet { + display: block; + grid-column: 1 / 4; + } + + @include on-desktop { + grid-column: 1 / 6; + position: relative; + } + + &-burger { + background-image: url('../images/icons/burger-menu.png'); + height: 24px; + width: 24px; + margin-top: 39px; + cursor: pointer; + + @include hover(transform, scale(1.1)); + } + + &-title { + font-family: Montserrat, sans-serif; + font-size: 45px; + line-height: 100%; + text-align: center; + text-transform: uppercase; + + @include on-tablet { + font-size: 54px; + line-height: 120%; + text-align: start; + margin: 64px 0 38px; + } + + @include on-desktop { + font-size: 72px; + margin: 143px 0 89px; + } + } + + &-button { + text-decoration: none; + color: $main-font-color; + + &:hover { + color: $button-color; + } + + @include on-desktop { + position: absolute; + right: 0; + } + } + + &-events { + display: none; + + @include on-desktop { + display: flex; + align-items: center; + gap: 20px; + rotate: -90deg; + position: absolute; + left: -60px; + bottom: 60px; + + &-title { + font-weight: 700; + font-size: 14px; + line-height: 100%; + color: #687480; + text-transform: uppercase; + } + + &-divider { + display: block; + height: 1px; + width: 70px; + background-color: $button-color; + } + } + } + } + + &__right-side { + display: none; + width: 100%; + + grid-column: 1 / -1; + + @include on-tablet { + display: block; + grid-column: 4 / -1; + position: relative; + } + + @include on-desktop { + grid-column: 6 / -1; + height: 100%; + } + + &-logo { + position: relative; + + background-image: url('../images/new-logo.png'); + background-repeat: no-repeat; + background-size: cover; + width: 55px; + height: 61px; + margin-top: 15px; + z-index: 1; + cursor: pointer; + + @include hover(transform, scale(1.1)); + + @include on-tablet { + width: 68px; + height: 74px; + margin-left: 70px; + } + + @include on-desktop { + margin-left: 55px; + } + } + + &-image { + width: 100%; + display: block; + + @include on-tablet { + position: absolute; + top: 0; + right: -39px; + width: calc(100% + 39px); + height: 384px; + } + + @include on-desktop { + right: -55px; + width: calc(100% + 55px); + height: 100%; + } + } + } +} diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss new file mode 100644 index 000000000..726cb2179 --- /dev/null +++ b/src/styles/blocks/icon.scss @@ -0,0 +1,26 @@ +.icon { + display: block; + + width: 24px; + height: 24px; + + background-position: center; + background-size: cover; + cursor: pointer; + + &-facebook { + background-image: url('../images/icons/facebook.png'); + + &:hover { + transform: scale(1.1); + } + } + + &-instagram { + background-image: url('../images/icons/instagram.png'); + + &:hover { + transform: scale(1.1); + } + } +} diff --git a/src/styles/blocks/lesson.scss b/src/styles/blocks/lesson.scss new file mode 100644 index 000000000..ec05dc3fb --- /dev/null +++ b/src/styles/blocks/lesson.scss @@ -0,0 +1,127 @@ +.lesson { + &__section { + width: 100%; + position: relative; + + &-content { + display: grid; + + --columns: 2; + + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 20px; + + @include on-tablet { + --columns: 6; + + column-gap: 30px; + } + } + + article { + width: 100%; + + img { + width: calc(100% + 40px); + min-height: 210px; + object-fit: cover; + display: block; + transform: translateX(-20px); + + @include on-tablet { + width: 100%; + min-height: 390px; + transform: translateX(0); + } + + @include on-desktop { + width: calc(100% + 110px); + transform: translateX(-55px); + } + } + } + + &-image { + display: grid; + grid-column: 1 / -1; + } + + &-block { + box-sizing: border-box; + position: absolute; + + bottom: -90px; + background-color: white; + box-shadow: 0 2px 0 0 #1a5a4c40; + padding-block: 20px; + + grid-column: 1 / -1; + justify-self: center; + + @include on-tablet { + padding-top: 45px; + padding-bottom: 50px; + padding-inline: 55px; + + bottom: -125px; + + max-width: 570px; + } + + @include on-desktop { + padding-inline: 100px; + } + + &-header { + display: flex; + justify-content: space-between; + align-items: center; + padding-inline: 20px; + margin-bottom: 20px; + + @include on-tablet { + padding-inline: 0; + justify-content: start; + gap: 160px; + margin-bottom: 16px; + } + } + + &-title { + font-weight: 500; + font-size: 16px; + line-height: 100%; + color: #687480; + text-transform: uppercase; + + @include on-tablet { + font-size: 14px; + } + } + + &-date { + font-weight: 700; + font-size: 16px; + line-height: 150%; + color: $button-color; + + @include on-tablet { + font-size: 14px; + } + } + + &-themas { + font-family: Montserrat, sans-serif; + font-weight: 400; + font-size: 28px; + line-height: 100%; + text-align: center; + + @include on-tablet { + font-size: 36px; + text-align: start; + } + } + } + } +} diff --git a/src/styles/blocks/main.scss b/src/styles/blocks/main.scss new file mode 100644 index 000000000..76578abd9 --- /dev/null +++ b/src/styles/blocks/main.scss @@ -0,0 +1,12 @@ +.main { + padding-top: 70px; + width: 100%; + + @include on-tablet { + padding-top: 88px; + } + + @include on-desktop { + padding-top: 200px; + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..9ba26d5e6 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,18 @@ +.menu { + pointer-events: none; + + position: fixed; + top: 0; + right: 0; + left: 0; + transform: translateX(-100%); + opacity: 0; + + transition: all 0.3s; + + &:target { + pointer-events: all; + transform: translateX(0); + opacity: 1; + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 000000000..4ca12ba7e --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,30 @@ +.nav { + display: flex; + column-gap: 28px; + + @include on-desktop { + column-gap: 50px; + } + + &__list { + list-style: none; + margin: 0; + padding: 0; + } + + &__item { + margin-bottom: 24px; + } + + &__link { + text-decoration: none; + color: $link-color; + font-weight: 500; + font-size: 16px; + line-height: 100%; + + @include on-desktop { + font-size: 22px; + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..31bbdff35 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,13 @@ +.page { + background: $background-color; + font-family: 'IBM Plex Sans', serif; + color: $main-font-color; + scroll-behavior: smooth; + + &__body { + box-sizing: border-box; + + min-width: 320px; + margin: 0; + } +} diff --git a/src/styles/blocks/subscribe.scss b/src/styles/blocks/subscribe.scss new file mode 100644 index 000000000..65abb5c04 --- /dev/null +++ b/src/styles/blocks/subscribe.scss @@ -0,0 +1,143 @@ +.subscribe { + display: block; + background-image: url('../images/subscribe.png'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + + padding: 88px 0; + + color: white; + text-align: center; + + width: calc(100% + 40px); + transform: translateX(-20px); + + @include on-tablet { + width: calc(100% + 78px); + transform: translateX(-39px); + padding: 82px 0; + } + + @include on-desktop { + width: calc(100% + 110px); + transform: translateX(-55px); + padding: 163px 0; + } + + &__content { + display: grid; + + --columns: 2; + + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 20px; + + @include on-tablet { + --columns: 6; + + column-gap: 30px; + } + + @include on-desktop { + --columns: 12; + } + } + + &__title { + font-family: Montserrat, sans-serif; + font-weight: 700; + font-size: 36px; + line-height: 100%; + margin: 0; + margin-bottom: 20px; + + grid-column: 1 / -1; + + @include on-tablet { + font-size: 48px; + margin-bottom: 16px; + grid-column: 2 / -2; + } + + @include on-desktop { + grid-column: 4 / -4; + } + } + + &__description { + font-weight: 400; + font-size: 18px; + line-height: 150%; + + margin: 0; + margin-bottom: 50px; + + grid-column: 1 / -1; + + @include on-tablet { + margin-bottom: 64px; + grid-column: 2 / -2; + } + + @include on-desktop { + margin-bottom: 72px; + grid-column: 4 / -4; + } + } + + &__form-wrapper { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 2 / -2; + } + + @include on-desktop { + grid-column: 4 / -4; + } + } + + &__form { + display: flex; + justify-content: center; + + @include on-tablet { + gap: 30px; + } + + &-input { + width: 100%; + height: 50px; + + padding: 0; + border: none; + + padding-left: 24px; + + @include on-tablet { + height: 70px; + } + } + + &-button { + min-width: 50px; + min-height: 50px; + display: flex; + align-items: center; + justify-content: center; + background-color: #f14a27; + cursor: pointer; + border: none; + + &:hover { + background-color: #e54725; + } + + @include on-tablet { + min-width: 70px; + min-height: 70px; + } + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..767929332 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,15 @@ @import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} +@import 'blocks/button'; +@import 'blocks/divider'; +@import 'blocks/page'; +@import 'blocks/header'; +@import 'blocks/icon'; +@import 'blocks/aside'; +@import 'blocks/nav'; +@import 'blocks/menu'; +@import 'blocks/main'; +@import 'blocks/events'; +@import 'blocks/lesson'; +@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..accba80b8 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -1,4 +1,4 @@ %h1 { - font-family: Roboto, sans-serif; - font-weight: 400; + // font-family: Roboto, sans-serif; + // font-weight: 400; } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..5fe8318f0 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,37 @@ #{$_property}: $_toValue; } } + +@mixin on-tablet { + @media (min-width: $tablet) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop) { + @content; + } +} + +@mixin on-desktop-large { + @media (min-width: $desktop-large) { + @content; + } +} + +@mixin content-padding-inline { + padding-inline: 20px; + + @include on-tablet { + padding-inline: 39px; + } + + @include on-desktop { + padding-inline: 55px; + } +} + +.container { + @include content-padding-inline; +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..a8ce2f2e5 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,14 @@ -$c-gray: #eee; +// screen viewport +$mobile: 320px; +$tablet: 768px; +$desktop: 1280px; +$desktop-large: 1440px; + +// colors +$background-color: #fff; +$background-color-menu: #1a5a4c; +$main-font-color: #0f0e08; +$button-color: #1a5a4c; +$link-color: #fff; +$event-topic-color: #4e4e4e; +$effect-duration: 0.3s;