diff --git a/README.md b/README.md index 5f9e97051..9d40d0d81 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://vitamartsekhovska.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..74c029942 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,433 @@ - - + + - Title + Museum + + + + + + + + - -

Hello Mate Academy

- + +
+
+ + + + +
+ +
+
+ Museum +
+ +
+

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

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

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

+ +
+
+ + I'm leaving and coming back + + +
+
+

Виставка

+

26.08-29.11.2019

+
+ +

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

+

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

+
+
+ +
+ + And memories and dreams + + +
+
+

Виставка

+

26.08-29.11.2019

+
+ +

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

+

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

+
+
+ +
+ + From Classicism to Romanticism + + +
+
+

Лекція

+

26/08/2019 - 11:00

+
+ +

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

+
+
+
+
+ + + +
+
+
+

+ Підписка +

+

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

+
+ +
+
+ + + +
+
+
+
+
+ + diff --git a/package-lock.json b/package-lock.json index fbfeb1428..3bf64afbb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,7 @@ "@mate-academy/eslint-config": "latest", "@mate-academy/jest-mochawesome-reporter": "^1.0.0", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.1", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "cypress": "^13.13.0", "eslint": "^8.57.0", @@ -1875,10 +1875,11 @@ "dev": true }, "node_modules/@mate-academy/scripts": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.2.tgz", - "integrity": "sha512-gUXFdqqOfYzF9R3RSx2pCa5GLdOkxB9bFbF+dpUpzucdgGAANqOGdqpmNnMj+e3xA9YHraUWq3xo9cwe5vD9pQ==", + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.3.tgz", + "integrity": "sha512-a07wHTj/1QUK2Aac5zHad+sGw4rIvcNl5lJmJpAD7OxeSbnCdyI6RXUHwXhjF5MaVo9YHrJ0xVahyERS2IIyBQ==", "dev": true, + "license": "MIT", "dependencies": { "@octokit/rest": "^17.11.2", "@types/get-port": "^4.2.0", diff --git a/package.json b/package.json index ab5f87b9b..d2c5a8560 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "@mate-academy/eslint-config": "latest", "@mate-academy/jest-mochawesome-reporter": "^1.0.0", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.1", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "cypress": "^13.13.0", "eslint": "^8.57.0", diff --git a/src/images/current-event-1.png b/src/images/current-event-1.png new file mode 100644 index 000000000..995d3f4da Binary files /dev/null and b/src/images/current-event-1.png differ diff --git a/src/images/current-event-2.png b/src/images/current-event-2.png new file mode 100644 index 000000000..40b1f43ea Binary files /dev/null and b/src/images/current-event-2.png differ diff --git a/src/images/current-event-3.png b/src/images/current-event-3.png new file mode 100644 index 000000000..cbeb0a270 Binary files /dev/null and b/src/images/current-event-3.png differ diff --git a/src/images/gallery-1.png b/src/images/gallery-1.png new file mode 100644 index 000000000..441781e7a Binary files /dev/null and b/src/images/gallery-1.png differ diff --git a/src/images/gallery-2.png b/src/images/gallery-2.png new file mode 100644 index 000000000..d5a960917 Binary files /dev/null and b/src/images/gallery-2.png differ diff --git a/src/images/gallery-3.png b/src/images/gallery-3.png new file mode 100644 index 000000000..1af31cba7 Binary files /dev/null and b/src/images/gallery-3.png differ diff --git a/src/images/gallery-4.png b/src/images/gallery-4.png new file mode 100644 index 000000000..405eaec89 Binary files /dev/null and b/src/images/gallery-4.png differ diff --git a/src/images/gallery-5.png b/src/images/gallery-5.png new file mode 100644 index 000000000..1c7813946 Binary files /dev/null and b/src/images/gallery-5.png differ diff --git a/src/images/gallery-drops.png b/src/images/gallery-drops.png new file mode 100644 index 000000000..9e6c83e6c Binary files /dev/null and b/src/images/gallery-drops.png differ diff --git a/src/images/header-bg.png b/src/images/header-bg.png new file mode 100644 index 000000000..bb9e8cfad Binary files /dev/null and b/src/images/header-bg.png differ diff --git a/src/images/header-vector.png b/src/images/header-vector.png new file mode 100644 index 000000000..99e7c9ed6 Binary files /dev/null and b/src/images/header-vector.png differ diff --git a/src/images/icon-burger.png b/src/images/icon-burger.png new file mode 100644 index 000000000..09192d566 Binary files /dev/null and b/src/images/icon-burger.png differ diff --git a/src/images/icon-facebook.png b/src/images/icon-facebook.png new file mode 100644 index 000000000..549504a00 Binary files /dev/null and b/src/images/icon-facebook.png differ diff --git a/src/images/icon-instagram.png b/src/images/icon-instagram.png new file mode 100644 index 000000000..0f4d22ddd Binary files /dev/null and b/src/images/icon-instagram.png differ diff --git a/src/images/icon-menu.png b/src/images/icon-menu.png new file mode 100644 index 000000000..728659224 Binary files /dev/null and b/src/images/icon-menu.png differ diff --git a/src/images/logo.png b/src/images/logo.png new file mode 100644 index 000000000..4f85a83c9 Binary files /dev/null and b/src/images/logo.png differ diff --git a/src/images/subscription-bg.png b/src/images/subscription-bg.png new file mode 100644 index 000000000..09782bd98 Binary files /dev/null and b/src/images/subscription-bg.png differ diff --git a/src/images/subscription-vector.png b/src/images/subscription-vector.png new file mode 100644 index 000000000..92419aede Binary files /dev/null and b/src/images/subscription-vector.png differ diff --git a/src/styles/blocks/current-events.scss b/src/styles/blocks/current-events.scss new file mode 100644 index 000000000..c57af76ac --- /dev/null +++ b/src/styles/blocks/current-events.scss @@ -0,0 +1,30 @@ +.current-events { + @include content-padding-inline; + + &__title { + margin-top: 0; + margin-bottom: 40px; + + @include on-tablet { + margin-bottom: 48px; + } + + @include on-desktop { + margin-bottom: 56px; + } + } + + &__events { + display: flex; + flex-direction: column; + gap: 60px; + + @include on-tablet { + gap: 64px; + } + + @include on-desktop { + gap: 104px; + } + } +} diff --git a/src/styles/blocks/event.scss b/src/styles/blocks/event.scss new file mode 100644 index 000000000..90c5500c1 --- /dev/null +++ b/src/styles/blocks/event.scss @@ -0,0 +1,112 @@ +.event { + @include page-grid; + + &__link { + grid-column: 1 / -1; + + @include on-desktop { + grid-column: 1 / 8; + } + } + + &__photo { + width: 100%; + object-fit: cover; + display: block; + min-height: 210px; + max-height: 520px; + + @include on-tablet { + min-height: 520px; + } + + @include hover(transform, scale(1.05)); + } + + &__bottom { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-desktop { + grid-column: 9 / -1; + align-self: center; + } + } + + &__period { + display: flex; + gap: 28px; + align-items: center; + margin-top: 20px; + + @include on-tablet { + margin-top: 44px; + } + + @include on-desktop { + margin-top: 0; + } + } + + &__name { + font-weight: $fw-m; + line-height: 100%; + color: $secondary-color; + text-transform: uppercase; + margin: 0; + + @include on-tablet { + font-size: $fs-xs; + } + } + + &__date { + font-weight: $fw-xl; + line-height: 150%; + color: $color-accent-green; + margin: 0; + + @include on-tablet { + font-size: $fs-xs; + } + } + + &__title { + font-family: Montserrat, sans-serif; + font-weight: $fw-s; + font-size: $fs-m; + line-height: 100%; + color: $accent-text-color; + margin: 10px 0; + + @include on-tablet { + margin: 30px 0 15px; + font-size: $fs-l; + } + + &::after { + content: ''; + display: inline-block; + width: 10px; + height: 10px; + margin-left: 10px; + background-color: #f14a27; + vertical-align: middle; + + @include on-tablet { + width: 15px; + height: 15px; + margin-left: 15px; + } + } + } + + &__description { + font-weight: $fw-xs; + line-height: 150%; + margin: 0; + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..1e707ff28 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,190 @@ +.footer { + background-color: $light-color; + font-size: $fs-xs; + line-height: 150%; + color: $accent-text-color; + padding-top: 50px; + padding-bottom: 36px; + @include content-padding-inline; + @include page-grid; + + &__links { + grid-column: 1 / -1; + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 40px; + + @include on-tablet { + margin-bottom: 0; + grid-column: 1 / 2; + grid-row: 1; + flex-direction: column; + justify-content: flex-start; + align-items: start; + gap: 62px; + } + } + + &__logo { + height: 72px; + + @include hover(transform, scale(1.05)); + } + + &__icons { + display: flex; + gap: 20px; + + @include on-tablet { + gap: 32px; + } + + @include on-desktop { + gap: 22px; + } + } + + &__icon { + height: 24px; + width: 24px; + display: block; + background-size: cover; + + &--facebook { + background-image: url(/src/images/icon-facebook.png); + } + + &--instagram { + background-image: url(/src/images/icon-instagram.png); + } + + @include hover(transform, scale(1.2)); + } + + &__top { + grid-column: 1 / -1; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 20px; + align-items: start; + border-bottom: 1px solid rgba($color-accent-green, 0.5); + padding-bottom: 70px; + + @include on-tablet { + gap: 30px; + grid-column: 2 / 6; + grid-row: 1; + padding-bottom: 64px; + } + + @include on-desktop { + grid-column: 3 / 7; + grid-row: 1; + border-bottom: 0; + padding-bottom: 0; + border-right: 1px solid rgba($color-accent-green, 0.5); + padding-right: 65px; + margin-right: -65px; + } + } + + &__title { + line-height: 141%; + margin: 0; + margin-bottom: 20px; + } + + &__schedule { + padding: 0; + margin: 0; + margin-bottom: 16px; + list-style: none; + } + + &__time { + font-weight: $fw-l; + } + + &__exclusion { + margin: 0; + } + + &__weekend { + font-weight: $fw-l; + } + + &__contact { + line-height: 141%; + margin: 0; + margin-bottom: 20px; + } + + &__contact-us { + margin: 0; + } + + &__bottom { + grid-column: 1 / -1; + padding-top: 40px; + + @include on-tablet { + grid-column: 2 / 6; + grid-row: 2; + padding-top: 64px; + } + + @include on-desktop { + grid-column: 8 / 12; + grid-row: 1; + padding-top: 0; + } + } + + &__list { + list-style: none; + padding: 0; + margin: 0; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 20px; + + @include on-tablet { + gap: 20px 30px; + } + } + + &__link { + line-height: 100%; + text-decoration: none; + color: $accent-text-color; + + @include hover(opacity, 0.7); + } + + &__another { + grid-column: 1 / -1; + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + font-weight: $fw-xs; + font-size: 12px; + line-height: 141%; + margin-top: 80px; + + @include on-tablet { + flex-direction: row; + justify-content: space-between; + margin-top: 120px; + } + + @include on-desktop { + margin-top: 88px; + } + } + + &__anotherone { + margin: 0; + } +} diff --git a/src/styles/blocks/gallery.scss b/src/styles/blocks/gallery.scss new file mode 100644 index 000000000..9698700d2 --- /dev/null +++ b/src/styles/blocks/gallery.scss @@ -0,0 +1,164 @@ +.gallery { + @include content-padding-inline; + + margin-top: 182px; + padding-right: 0; + + @include on-tablet { + margin-top: 208px; + } + + @include on-desktop { + margin-top: 302px; + padding-right: 55px; + } + + &__title { + margin-top: 0; + margin-bottom: 40px; + + @include on-tablet { + margin-bottom: 48px; + } + + @include on-desktop { + margin-bottom: 56px; + } + } + + &__trigger { + display: none; + } + + &__slider { + overflow: hidden; + } + + &__list { + display: flex; + gap: 16px; + transition: transform 0.5s ease; + + @include on-tablet { + gap: 20px; + } + + @include on-desktop { + @include page-grid; + + overflow: visible; + row-gap: 30px; + transform: none; + } + } + + &__link { + flex-shrink: 0; + width: 90%; + + @include on-tablet { + width: 45%; + } + + @include on-desktop { + width: auto; + + &:nth-child(1) { + grid-column: span 4; + height: 600px; + } + + &:nth-child(2) { + display: none; + } + + &:nth-child(3) { + grid-column: span 8; + height: 600px; + } + + &:nth-child(4) { + grid-column: span 8; + height: 360px; + } + + &:nth-child(5) { + grid-column: span 4; + height: 360px; + } + } + } + + &__photo { + display: block; + object-fit: cover; + width: 100%; + height: 100%; + + @include on-desktop { + @include hover(transform, scale(1.05)); + } + } + + @media (max-width: 1279px) { + [id='slide-1']:checked ~ &__slider &__list { + transform: translateX(0); + } + [id='slide-2']:checked ~ &__slider &__list { + transform: translateX(calc(-90% - 16px)); + } + [id='slide-3']:checked ~ &__slider &__list { + transform: translateX(calc(-180% - 32px)); + } + [id='slide-4']:checked ~ &__slider &__list { + transform: translateX(calc(-270% - 48px)); + } + + @include on-tablet { + [id='slide-2']:checked ~ &__slider &__list { + transform: translateX(calc(-45% - 20px)); + } + [id='slide-3']:checked ~ &__slider &__list { + transform: translateX(calc(-90% - 40px)); + } + [id='slide-4']:checked ~ &__slider &__list { + transform: translateX(calc(-135% - 60px)); + } + } + } + + &__dots { + display: flex; + justify-content: center; + gap: 22px; + margin-top: 20px; + + @include on-tablet { + margin-top: 32px; + } + + @include on-desktop { + display: none; + } + } + + &__dot { + width: 9px; + height: 9px; + background-color: #e0e0e0; + border-radius: 50%; + cursor: pointer; + transition: background-color 0.3s; + + &:hover { + background-color: rgba($color-accent-green, 0.5); + } + } + + [id='slide-21']:checked ~ &__dots label[for='slide-1'], + [id='slide-2']:checked ~ &__dots label[for='slide-2'], + [id='slide-3']:checked ~ &__dots label[for='slide-3'], + [id='slide-4']:checked ~ &__dots label[for='slide-4'] { + background-color: $color-accent-green; + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..561a5daf8 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,122 @@ +.header { + position: relative; + background-color: $light-color; + @include content-padding-inline; + + &__wrapper { + @include page-grid; + } + + &__bg { + margin-inline: -20px; + grid-column: 1 / -1; + + @include on-tablet { + margin-inline: 0 -39px; + grid-column: 4 / -1; + } + + @include on-desktop { + margin-inline-end: -55px; + grid-column: 6 / -1; + } + } + + &__image { + display: block; + object-fit: cover; + width: 100%; + height: 100%; + } + + &__content { + margin-top: 20px; + grid-column: 1 / -1; + display: flex; + flex-direction: column; + text-align: center; + gap: 20px; + + @include on-tablet { + margin-top: 128px; + grid-column: 1 / 4; + grid-row: 1; + align-items: flex-start; + text-align: left; + gap: 38px; + } + + @include on-desktop { + margin-top: 206px; + grid-column: 1 / 6; + align-items: flex-end; + gap: 88px; + } + } + + &__title { + font-family: Montserrat, sans-serif; + font-weight: $fw-xl; + font-size: 45px; + line-height: 100%; + color: $dark-color; + text-transform: uppercase; + margin: 0; + + @include on-tablet { + font-size: 54px; + line-height: 120%; + } + + @include on-desktop { + font-size: 72px; + } + } + + &__reserv { + display: flex; + align-items: stretch; + text-decoration: none; + } + + &__text { + display: flex; + align-items: center; + justify-content: center; + font-weight: $fw-m; + line-height: 100%; + color: $accent-text-color; + box-sizing: border-box; + border: 1px solid $color-accent-green; + width: 100%; + margin: 0; + + @include on-tablet { + width: 200px; + } + } + + &__button { + display: flex; + align-items: center; + justify-content: center; + background-color: $color-accent-green; + width: 50px; + height: 50px; + border: 1px solid $color-accent-green; + cursor: pointer; + + @include on-tablet { + width: 70px; + height: 70px; + } + } + + &__vector { + display: block; + height: 24px; + width: 24px; + + @include hover(transform, scale(1.2)); + } +} diff --git a/src/styles/blocks/lecture.scss b/src/styles/blocks/lecture.scss new file mode 100644 index 000000000..69c69a942 --- /dev/null +++ b/src/styles/blocks/lecture.scss @@ -0,0 +1,97 @@ +.lecture { + @include page-grid; + + position: relative; + + &__link { + grid-column: 1 / -1; + margin-inline: -20px; + + @include on-tablet { + margin-inline: -39px; + } + + @include on-desktop { + margin-inline: -55px; + } + } + + &__photo { + width: 100%; + object-fit: cover; + display: block; + min-height: 210px; + max-height: 390px; + + @include on-tablet { + max-height: 550px; + } + } + + &__bottom { + display: flex; + flex-direction: column; + gap: 16px; + position: absolute; + bottom: 0; + transform: translateY(50%); + left: 0; + right: 0; + background-color: $light-color; + box-shadow: 0 2px 0 0 rgba($color-accent-green, 0.25); + padding: 20px; + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 2 / -2; + padding: 45px 55px 50px; + } + + @include on-desktop { + grid-column: 4 / 10; + padding: 45px 100px 50px; + } + } + + &__period { + display: flex; + justify-content: space-between; + align-items: center; + } + + &__name { + font-weight: $fw-m; + line-height: 100%; + color: $secondary-color; + text-transform: uppercase; + margin: 0; + + @include on-tablet { + font-size: $fs-xs; + } + } + + &__date { + font-weight: $fw-xl; + line-height: 150%; + color: $color-accent-green; + margin: 0; + + @include on-tablet { + font-size: $fs-xs; + } + } + + &__title { + font-family: Montserrat, sans-serif; + font-weight: $fw-s; + font-size: $fs-m; + line-height: 100%; + color: $accent-text-color; + margin: 0; + + @include on-tablet { + font-size: $fs-l; + } + } +} diff --git a/src/styles/blocks/main-block.scss b/src/styles/blocks/main-block.scss new file mode 100644 index 000000000..b9c4b4db0 --- /dev/null +++ b/src/styles/blocks/main-block.scss @@ -0,0 +1,13 @@ +.main { + background-color: $light-color; + padding-top: 70px; + padding-bottom: 0; + + @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..e2bfcaaa7 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,121 @@ +.menu { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 1; + background-color: $color-accent-green; + display: none; + color: $light-color; + padding-block: 26px; + @include content-padding-inline; + + @include on-tablet { + padding-block: 40px; + } + + @include on-desktop { + padding-bottom: 48px; + } + + &:target { + display: block; + box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5); + } + + &__wrapper { + display: flex; + flex-direction: column; + + @include on-tablet { + flex-direction: row; + } + } + + &__top { + display: flex; + flex-direction: row; + gap: 28px; + padding-bottom: 24px; + border-bottom: 1px solid rgba($light-color, 0.5); + + @include on-tablet { + padding-bottom: 0; + border-bottom: 0; + border-right: 1px solid rgba($light-color, 0.5); + padding-right: 38px; + gap: 38px; + } + + @include on-desktop { + padding-right: 102px; + gap: 102px; + } + } + + &__icon { + height: 24px; + width: 24px; + display: block; + background-size: cover; + background-image: url(/src/images/icon-menu.png); + + @include hover(transform, scale(1.2)); + } + + &__bottom { + font-size: $fs-xs; + line-height: 150%; + padding-top: 24px; + + @include on-tablet { + padding-top: 0; + padding-left: 38px; + } + + @include on-desktop { + padding-left: 102px; + } + } + + &__title { + line-height: 141%; + margin-top: 0; + margin-bottom: 20px; + } + + &__info { + display: flex; + flex-direction: column; + gap: 16px; + + @include on-tablet { + flex-direction: row; + gap: 26px; + } + + @include on-desktop { + gap: 30px; + } + } + + &__schedule { + list-style: none; + padding: 0; + margin: 0; + flex-shrink: 0; + } + + &__time { + font-weight: $fw-l; + } + + &__weekend { + font-weight: $fw-l; + } + + &__exclusion { + margin: 0; + flex-shrink: 1; + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 000000000..5a8f1d6f4 --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,31 @@ +.nav { + &__list { + list-style: none; + padding: 0; + margin: 0; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 24px 28px; + + @include on-tablet { + gap: 24px 20px; + } + + @include on-desktop { + gap: 30px; + } + } + + &__link { + font-weight: $fw-m; + line-height: 100%; + text-decoration: none; + color: $light-color; + + @include on-desktop { + font-size: 22px; + } + + @include hover(opacity, 0.7); + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..3700f873a --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,16 @@ +.page { + scroll-behavior: smooth; + + &__body { + margin: 0; + padding: 0; + min-width: 320px; + overflow-x: hidden; + background: $c-gray; + + font-family: 'IBM Plex Sans', sans-serif; + font-weight: $fw-s; + font-size: $fs-s; + color: $main-text-color; + } +} diff --git a/src/styles/blocks/section-title.scss b/src/styles/blocks/section-title.scss new file mode 100644 index 000000000..b1caa5dc1 --- /dev/null +++ b/src/styles/blocks/section-title.scss @@ -0,0 +1,15 @@ +.section-title { + font-family: Montserrat, sans-serif; + font-weight: $fw-xl; + font-size: $fs-l; + line-height: 100%; + color: $accent-text-color; + + @include on-tablet { + font-size: $fs-xl; + } + + &--white { + color: $light-color; + } +} diff --git a/src/styles/blocks/subscription.scss b/src/styles/blocks/subscription.scss new file mode 100644 index 000000000..bdb4de567 --- /dev/null +++ b/src/styles/blocks/subscription.scss @@ -0,0 +1,130 @@ +.subscription { + box-sizing: border-box; + background-image: url(/src/images/subscription-bg.png); + background-size: cover; + margin-top: 100px; + + @include on-tablet { + margin-top: 92px; + } + + @include on-desktop { + margin-top: 200px; + } + + @include content-padding-inline; + @include page-grid; + + &__wrapper { + margin: 88px 0; + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 2 / -2; + margin: 82px 0; + } + + @include on-desktop { + grid-column: 4 / 10; + margin: 162px 0; + } + } + + &__top { + display: flex; + flex-direction: column; + gap: 20px; + align-items: center; + margin-bottom: 50px; + + @include on-tablet { + gap: 16px; + margin-bottom: 64px; + } + + @include on-desktop { + margin-bottom: 72px; + } + } + + &__title { + margin: 0; + } + + &__description { + font-size: 18px; + line-height: 150%; + color: $light-color; + margin: 0; + + @include on-tablet { + line-height: 100%; + } + } + + &__form { + display: flex; + + @include on-tablet { + gap: 16px; + } + + @include on-desktop { + gap: 30px; + } + } + + &__input { + font-family: Montserrat, sans-serif; + font-size: $fs-xs; + line-height: 100%; + color: $accent-text-color; + padding-left: 24px; + width: 100%; + outline: none; + background-color: $light-color; + border: none; + + @include on-desktop { + padding-left: 32px; + } + + &::placeholder { + color: $secondary-color; + } + + &:-webkit-autofill, + &:-webkit-autofill:hover, + &:-webkit-autofill:focus, + &:-webkit-autofill:active { + -webkit-box-shadow: 0 0 0 1000px $light-color inset; + -webkit-text-fill-color: $accent-text-color; + transition: background-color 5000s ease-in-out 0s; + } + } + + &__button { + display: flex; + align-items: center; + justify-content: center; + background-color: #f14a27; + width: 50px; + height: 50px; + border: none; + flex-shrink: 0; + + @include on-tablet { + width: 70px; + height: 70px; + } + + cursor: pointer; + @include hover(opacity, 0.8); + } + + &__vector { + display: block; + height: 24px; + width: 24px; + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 000000000..6fd7ec218 --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,36 @@ +.top-bar { + display: grid; + grid-template-columns: 1fr auto 1fr; + align-items: center; + position: absolute; + top: 0; + right: 0; + left: 0; + z-index: 0; + padding-top: 9px; + @include content-padding-inline; + + @include on-tablet { + padding-top: 15px; + } + + &__icon { + height: 24px; + width: 24px; + display: block; + background-size: cover; + background-image: url(/src/images/icon-burger.png); + + @include hover(transform, scale(1.2)); + } + + &__logo { + height: 60px; + + @include on-tablet { + height: 72px; + } + + @include hover(transform, scale(1.05)); + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..2188ae7e8 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,16 @@ @import 'utils'; @import 'fonts'; @import 'typography'; - -body { - background: $c-gray; -} +@import './blocks/page'; +@import './blocks/header'; +@import './blocks/top-bar'; +@import './blocks/menu'; +@import './blocks/nav'; +@import './blocks/main-block'; +@import './blocks/section-title'; +@import './blocks/current-events'; +@import './blocks/event'; +@import './blocks/lecture'; +@import './blocks/gallery'; +@import './blocks/subscription'; +@import './blocks/footer'; diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..6230a67cd 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,49 @@ @mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; + transition: #{$_property} $effect-duration; + &:hover { #{$_property}: $_toValue; } } + +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin content-padding-inline { + padding-inline: 20px; + + @include on-tablet { + padding-inline: 39px; + } + + @include on-desktop { + padding-inline: 55px; + } +} + +@mixin page-grid { + --columns: 2; + + display: grid; + column-gap: 20px; + grid-template-columns: repeat(var(--columns), 1fr); + + @include on-tablet { + --columns: 6; + + column-gap: 30px; + } + + @include on-desktop { + --columns: 12; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..9978e7f26 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,20 @@ $c-gray: #eee; +$tablet-min-width: 768px; +$desktop-min-width: 1280px; +$effect-duration: 0.3s; +$fw-xs: 300; +$fw-s: 400; +$fw-m: 500; +$fw-l: 600; +$fw-xl: 700; +$fs-xs: 14px; +$fs-s: 16px; +$fs-m: 28px; +$fs-l: 36px; +$fs-xl: 48px; +$color-accent-green: #1a5a4c; +$main-text-color: #4e4e4e; +$accent-text-color: #0f0e08; +$secondary-color: #687480; +$light-color: #fff; +$dark-color: #000;