diff --git a/README.md b/README.md index afee6c841..0c6eb1cdf 100644 --- a/README.md +++ b/README.md @@ -31,7 +31,7 @@ Check font styles. Use [Playfair Display](https://fonts.google.com/specimen/Play 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_2/). + [DEMO LINK](https://IrynaZahorodnia.github.io/Museum_2/). 14. Copy `DEMO LINK` to the PR description. > To update you PR repeat steps 7-11. diff --git a/package-lock.json b/package-lock.json index 05ac51229..9567d7a35 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,7 @@ "@linthtml/linthtml": "^0.9.6", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^1.8.6", + "@mate-academy/scripts": "^1.9.12", "@mate-academy/stylelint-config": "latest", "@parcel/transformer-sass": "^2.12.0", "jest": "^29.7.0", @@ -1222,10 +1222,11 @@ "dev": true }, "node_modules/@mate-academy/scripts": { - "version": "1.8.6", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.8.6.tgz", - "integrity": "sha512-b4om/whj4G9emyi84ORE3FRZzCRwRIesr8tJHXa8EvJdOaAPDpzcJ8A0sFfMsWH9NUOVmOwkBtOXDu5eZZ00Ig==", + "version": "1.9.12", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.9.12.tgz", + "integrity": "sha512-/OcmxMa34lYLFlGx7Ig926W1U1qjrnXbjFJ2TzUcDaLmED+A5se652NcWwGOidXRuMAOYLPU2jNYBEkKyXrFJA==", "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 83c8373ca..d7f0fbd91 100644 --- a/package.json +++ b/package.json @@ -18,12 +18,11 @@ "keywords": [], "author": "Mate Academy", "license": "GPL-3.0", - "dependencies": {}, "devDependencies": { "@linthtml/linthtml": "^0.9.6", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^1.8.6", + "@mate-academy/scripts": "^1.9.12", "@mate-academy/stylelint-config": "latest", "@parcel/transformer-sass": "^2.12.0", "jest": "^29.7.0", diff --git a/src/images/events/event1.png b/src/images/events/event1.png new file mode 100644 index 000000000..da1c1ae2d Binary files /dev/null and b/src/images/events/event1.png differ diff --git a/src/images/events/event2.png b/src/images/events/event2.png new file mode 100644 index 000000000..3a5496038 Binary files /dev/null and b/src/images/events/event2.png differ diff --git a/src/images/exhibitions/exhibition1.png b/src/images/exhibitions/exhibition1.png new file mode 100644 index 000000000..19762c44c Binary files /dev/null and b/src/images/exhibitions/exhibition1.png differ diff --git a/src/images/exhibitions/exhibition2.png b/src/images/exhibitions/exhibition2.png new file mode 100644 index 000000000..908bb9368 Binary files /dev/null and b/src/images/exhibitions/exhibition2.png differ diff --git a/src/images/favicon-namu.ico b/src/images/favicon-namu.ico new file mode 100644 index 000000000..48b485d65 Binary files /dev/null and b/src/images/favicon-namu.ico differ diff --git a/src/images/footer/X.svg b/src/images/footer/X.svg new file mode 100644 index 000000000..493d29131 --- /dev/null +++ b/src/images/footer/X.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/footer/facebook.svg b/src/images/footer/facebook.svg new file mode 100644 index 000000000..1cb7bb4ba --- /dev/null +++ b/src/images/footer/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/footer/instagram.svg b/src/images/footer/instagram.svg new file mode 100644 index 000000000..b1d63d9d9 --- /dev/null +++ b/src/images/footer/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/footer/telegram.svg b/src/images/footer/telegram.svg new file mode 100644 index 000000000..5c8590402 --- /dev/null +++ b/src/images/footer/telegram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/header.png b/src/images/header.png new file mode 100644 index 000000000..0abf70bd6 Binary files /dev/null and b/src/images/header.png differ diff --git a/src/images/icons/arrow-hover.svg b/src/images/icons/arrow-hover.svg new file mode 100644 index 000000000..af2b7eb53 --- /dev/null +++ b/src/images/icons/arrow-hover.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/arrow-main.svg b/src/images/icons/arrow-main.svg new file mode 100644 index 000000000..1e8fb1c95 --- /dev/null +++ b/src/images/icons/arrow-main.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/arrow-pressed.svg b/src/images/icons/arrow-pressed.svg new file mode 100644 index 000000000..ebb2691fb --- /dev/null +++ b/src/images/icons/arrow-pressed.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/icon-burger.svg b/src/images/icons/icon-burger.svg new file mode 100644 index 000000000..0cb275019 --- /dev/null +++ b/src/images/icons/icon-burger.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icons/icon-close.svg b/src/images/icons/icon-close.svg new file mode 100644 index 000000000..ef3e96fa3 --- /dev/null +++ b/src/images/icons/icon-close.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/scroll-up.svg b/src/images/icons/scroll-up.svg new file mode 100644 index 000000000..701b9e4ec --- /dev/null +++ b/src/images/icons/scroll-up.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/logo.png b/src/images/logo.png new file mode 100644 index 000000000..20e64ef1b Binary files /dev/null and b/src/images/logo.png differ diff --git a/src/images/logo2x.png b/src/images/logo2x.png new file mode 100644 index 000000000..57a264365 Binary files /dev/null and b/src/images/logo2x.png differ diff --git a/src/images/menu.png b/src/images/menu.png new file mode 100644 index 000000000..cc3e8a209 Binary files /dev/null and b/src/images/menu.png differ diff --git a/src/images/news/news1.png b/src/images/news/news1.png new file mode 100644 index 000000000..c79eb22ee Binary files /dev/null and b/src/images/news/news1.png differ diff --git a/src/images/news/news2.png b/src/images/news/news2.png new file mode 100644 index 000000000..b91dc1934 Binary files /dev/null and b/src/images/news/news2.png differ diff --git a/src/images/plan-visit/plan-visit.png b/src/images/plan-visit/plan-visit.png new file mode 100644 index 000000000..20a86f5ac Binary files /dev/null and b/src/images/plan-visit/plan-visit.png differ diff --git a/src/index.html b/src/index.html index 8019b83ec..1bfe65617 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,538 @@ - + - Title + NAMU + + + + - -

Hello Mate Academy

+ + +
+
+
+
+ + Museum logo + +
+ + +
+
+ +
+
+

10 серпня - 10 листопада

+

Мистецтво ХІХ - ХХ ст.

+

+ Внесок українських митців у світову культуру 19-20 ст. +

+ + Купити квиток + +

10.08 - 10.10

+
+
+ Header image +
+
+
+
+
+ + + +
+
+
+
+

+ Актуальні виставки +

+ + Архів виставок + +
+
+ a sculpture of an angel +

11.07 - 22.09

+

+ Кураторська виставка “Ангели” +

+

+ Виставковий проект «Ангели» – знакова подія для української + культури і водночас наймасштабніший... +

+ + Купити квиток + +
+
+ a painting of a man +

Діє постійно

+

+ Мистецтво ХХ ст. — XXI ст. +

+

+ Знакові роботи Алли Горської, Миколи Самокиша, Федора + Кричевського та інших митців. +

+ + Купити квиток + +
+
+
+ +
+

Найближчі події

+ + Календар подій + +
+
+ photo of Pavlo Hudimov +
+

14.08 о 13:00

+

+ Кураторські екскурсії від Павла Гудімова +

+

+ Таємниці підготовки, історії експонатів, магія дійства до і + в момент вашої присутності – розгортатиметься... +

+ + Зареєструватись + +
+
+
+ a photo of a girl in the museum +
+

16.08 о 13:00

+

+ Майстер-клас “Подорож до Австралії” +

+

+ Цієї неділі о 14:00 на + арт-мандрівників + чекає останній пункт кругосвітньої подорожі - Австралія. +

+ + Зареєструватись + +
+
+
+
+
+
+ +
+
+
+ a man +
+

+ Сплануйте візит до музею +

+

+ Оберіть зручний день, зареєструйтесь на події, що цікавлять, + купіть квиток заздалегідь, щоб ніщо не завадило вам + насолоджуватись мистецтвом +

+ + Почати + +
+
+
+
+ +
+
+
+

Новини

+ + Усі новини + +
+
+ three post-cards +

9 серпня 2019

+

Оголошення переможця

+

+ Друзі, сьогодні п'ятниця! А це означає, що час оголосити + переможця розіграшу... +

+
+
+ a cat with a mouse +

9 серпня 2019

+

+ Міжнародний день котів +

+

+ Музей з левами не може просто так взяти і пропустити + Міжнародний день котів! +

+
+
+
+ + +
+
+
+ + diff --git a/src/styles/blocks/announcement.scss b/src/styles/blocks/announcement.scss new file mode 100644 index 000000000..b31619d2c --- /dev/null +++ b/src/styles/blocks/announcement.scss @@ -0,0 +1,60 @@ +.announcement { + grid-column: 1/-1; + + @include on-tablet { + grid-column: span 3; + } + + @include on-desktop { + grid-column: span 6; + } + + &__img { + display: block; + grid-column: span 2; + margin-bottom: 20px; + + width: 100%; + aspect-ratio: 1; + object-fit: cover; + + @include hover(transform, scale($scale-size)); + + @include on-tablet { + grid-column: span 3; + margin-bottom: 30px; + } + + @include on-desktop { + grid-column: span 4; + margin-bottom: 20px; + + aspect-ratio: 3/1.95; + } + + &--position { + object-position: -20px top; + } + } + + &__date { + font-size: 14px; + line-height: 140%; + } + + &__title { + margin-bottom: 20px; + font-size: 20px; + line-height: 125%; + + @include on-tablet { + margin-bottom: 18px; + + line-height: 150%; + } + } + + &__description { + color: $main-gray-color; + } +} diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 000000000..d66df35d5 --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,57 @@ +.button { + display: block; + text-align: center; + padding-block: 22px; + text-decoration: none; + max-width: 330px; + height: 60px; + font-weight: 600; + line-height: 100%; + + @include hover(transform, scale($scale-size)); + + &--primary { + color: $main-white-color; + background-color: $main-accent-color; + + &:hover { + background-color: $button-hover-color; + } + + &:active { + background-color: $button-pressed-color; + } + } + + &--secondary { + color: $main-accent-color; + border: 1px solid $main-accent-color; + + &::after { + display: inline-block; + content: url(../images/icons/arrow-main.svg); + height: 20px; + width: 20px; + vertical-align: middle; + margin-left: 8px; + } + + &:hover { + color: $button-hover-color; + border: 1px solid $button-hover-color; + + &::after { + content: url(../images/icons/arrow-hover.svg); + } + } + + &:active { + color: $button-pressed-color; + border: 1px solid $button-pressed-color; + + &::after { + content: url(../images/icons/arrow-pressed.svg); + } + } + } +} diff --git a/src/styles/blocks/container.scss b/src/styles/blocks/container.scss new file mode 100644 index 000000000..244ccc355 --- /dev/null +++ b/src/styles/blocks/container.scss @@ -0,0 +1,3 @@ +.container { + @include content-padding-inline; +} diff --git a/src/styles/blocks/event.scss b/src/styles/blocks/event.scss new file mode 100644 index 000000000..a0fe41e0b --- /dev/null +++ b/src/styles/blocks/event.scss @@ -0,0 +1,61 @@ +.event { + @include page-grid; + + &__img { + grid-column: span 2; + margin-bottom: 20px; + + width: 100%; + + @include hover(transform, scale($scale-size)); + + @include on-tablet { + grid-column: span 3; + margin-bottom: 0; + } + + @include on-desktop { + grid-column: span 4; + } + } + + &__info { + grid-column: span 2; + + @include on-tablet { + grid-column: span 3; + } + + @include on-desktop { + grid-column: span 6; + } + } + + &__date { + margin-bottom: 10px; + color: $main-accent-color; + } + + &__title { + margin-bottom: 20px; + font-size: 20px; + line-height: 125%; + + @include on-tablet { + font-size: 24px; + } + } + + &__description { + margin-bottom: 30px; + color: $main-gray-color; + + @include on-tablet { + margin-bottom: 50px; + } + } + + &__nowrap { + white-space: nowrap; + } +} diff --git a/src/styles/blocks/events.scss b/src/styles/blocks/events.scss new file mode 100644 index 000000000..d27065b0e --- /dev/null +++ b/src/styles/blocks/events.scss @@ -0,0 +1,49 @@ +.events { + @include page-grid; + + &__title { + grid-column: 1/-1; + + @include on-tablet { + grid-column: 1/5; + } + + @include on-desktop { + grid-column: span 6; + } + } + + &__button { + order: 1; + grid-column: 1/-1; + + @include on-tablet { + order: 0; + grid-column: 5/-1; + } + + @include on-desktop { + grid-column: 10/-1; + } + } + + &__content { + display: flex; + flex-direction: column; + + margin-bottom: 30px; + + grid-column: 1/-1; + gap: 60px; + + @include on-tablet { + margin-bottom: 0; + + gap: 70px; + } + + @include on-desktop { + gap: 60px; + } + } +} diff --git a/src/styles/blocks/exhibition.scss b/src/styles/blocks/exhibition.scss new file mode 100644 index 000000000..ee5e28c92 --- /dev/null +++ b/src/styles/blocks/exhibition.scss @@ -0,0 +1,66 @@ +.exhibition { + display: flex; + flex-direction: column; + grid-column: 1/-1; + + @include on-tablet { + grid-column: span 3; + } + + @include on-desktop { + grid-column: span 6; + } + + &__img { + display: block; + grid-column: span 2; + margin-bottom: 20px; + + width: 100%; + aspect-ratio: 4/5.1; + object-fit: cover; + + @include hover(transform, scale($scale-size)); + + @include on-tablet { + grid-column: span 3; + } + + @include on-desktop { + grid-column: span 4; + aspect-ratio: 4 / 3.4; + } + + &--position { + object-position: -20px top; + } + } + + &__date { + margin-bottom: 10px; + color: $main-accent-color; + } + + &__title { + margin-bottom: 20px; + font-size: 20px; + line-height: 125%; + + @include on-tablet { + font-size: 24px; + } + + &--grow { + flex-grow: 1; + } + } + + &__description { + margin-bottom: 30px; + color: $main-gray-color; + + @include on-tablet { + margin-bottom: 50px; + } + } +} diff --git a/src/styles/blocks/exhibitions.scss b/src/styles/blocks/exhibitions.scss new file mode 100644 index 000000000..c3367ad7b --- /dev/null +++ b/src/styles/blocks/exhibitions.scss @@ -0,0 +1,46 @@ +.exhibitions { + @include page-grid; + + &__title { + grid-column: 1/-1; + + @include on-tablet { + grid-column: 1/5; + } + + @include on-desktop { + grid-column: span 6; + } + } + + &__button { + order: 1; + grid-column: 1/-1; + + @include on-tablet { + order: 0; + grid-column: 5/-1; + } + + @include on-desktop { + grid-column: 10/-1; + } + } + + &__content { + @include page-grid; + + margin-bottom: 30px; + + grid-column: 1/-1; + gap: 60px; + + @include on-tablet { + margin-bottom: 60px; + } + + @include on-desktop { + margin-bottom: 90px; + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..971887615 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,140 @@ +.footer { + background-color: $bgcolor; + color: $main-white-color; + + &__content { + @include page-grid; + + row-gap: 50px; + padding: 34px 0 30px; + + @include on-tablet { + padding-top: 50px; + row-gap: 60px; + } + + @include on-tablet { + row-gap: 70px; + } + } + + &__section { + grid-column: 1/-1; + + @include on-tablet { + grid-column: span 2; + } + + @include on-desktop { + grid-column: span 4; + } + } + + &__title { + margin-bottom: 10px; + font-size: 18px; + line-height: 150%; + + @include on-tablet { + margin-bottom: 30px; + font-size: 20px; + } + + &--big { + font-size: 20px; + } + } + + &__contacts { + margin-bottom: 30px; + display: flex; + flex-direction: column; + + @include on-tablet { + margin-bottom: 50px; + } + } + + &__icons { + display: flex; + gap: 20px; + } + + &__icon { + display: block; + height: 20px; + width: 20px; + background-size: cover; + + @include hover(transform, scale($scale-size)); + + &--facebook { + background-image: url(../images/footer/facebook.svg); + } + &--x { + background-image: url(../images/footer/X.svg); + } + &--telegram { + background-image: url(../images/footer/telegram.svg); + } + &--instagram { + background-image: url(../images/footer/instagram.svg); + } + } + + &__list { + margin: 0; + margin-bottom: 10px; + padding: 0; + list-style: none; + display: flex; + flex-direction: column; + gap: 5px; + } + + &__link { + text-decoration: none; + color: inherit; + + @include hover(color, $main-accent-color); + + &--title { + margin-bottom: 5px; + font-weight: 700; + font-size: 20px; + line-height: 150%; + + @include on-tablet { + margin-bottom: 20px; + } + } + } + + &__bottom { + grid-column: 1/-1; + display: flex; + justify-content: space-between; + align-items: center; + font-size: 14px; + line-height: 140%; + } + + &__copyright { + display: flex; + gap: 22px; + + @include on-desktop { + gap: 102px; + } + } + + &__scroll-up { + display: block; + height: 30px; + width: 30px; + background-size: cover; + background-image: url(../images/icons/scroll-up.svg); + + @include hover(transform, scale($scale-size)); + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..bf95d58c9 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,118 @@ +.header { + background: $bgcolor; + + &__content { + color: $main-white-color; + height: 100vh; + } + + &__top { + margin-bottom: 50px; + + @include on-tablet { + margin-bottom: 100px; + } + + @include on-desktop { + margin-bottom: 90px; + } + } + + &__lang { + display: none; + + @include on-tablet { + display: block; + } + } + + &__container { + display: flex; + flex-direction: column; + justify-content: space-between; + height: calc(100vh - 127px); + + @include on-tablet { + height: calc(100vh - 177px); + } + + @include on-desktop { + height: calc(100vh - 180px); + flex-direction: row; + } + } + + &__dates { + margin-bottom: 10px; + + font-size: 14px; + line-height: 140%; + } + + &__title { + font-size: 48px; + line-height: 100%; + margin-bottom: 30px; + + max-width: 570px; + + @include on-tablet { + margin-bottom: 20px; + font-size: 72px; + } + + @include on-desktop { + margin-bottom: 30px; + font-size: 96px; + } + } + + &__subtitle { + margin: 0 10px 40px 0; + + @include on-tablet { + max-width: 330px; + margin-bottom: 50px; + } + + @include on-desktop { + max-width: 570px; + margin-bottom: 80px; + } + } + + &__num-dates { + display: none; + overflow: hidden; + + @include on-desktop { + display: block; + } + + margin-top: 135px; + + font-size: 14px; + line-height: 125%; + + &::after { + display: inline-block; + vertical-align: middle; + width: 100%; + margin-right: -100%; + margin-left: 20px; + content: ''; + height: 1px; + background-color: $main-white-color; + } + } + + &__picture { + display: flex; + overflow: hidden; + } + + &__image { + object-fit: contain; + width: 100%; + } +} diff --git a/src/styles/blocks/main.scss b/src/styles/blocks/main.scss new file mode 100644 index 000000000..7e6522f01 --- /dev/null +++ b/src/styles/blocks/main.scss @@ -0,0 +1,19 @@ +.main { + background-color: $main-white-color; + + &__content { + display: grid; + row-gap: 90px; + padding-block: 90px; + + @include on-tablet { + row-gap: 100px; + padding-block: 100px; + } + + @include on-desktop { + row-gap: 110px; + padding-block: 110px; + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..8508d8926 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,96 @@ +.menu { + background: $bgcolor; + + &__content { + color: $main-white-color; + height: 100vh; + } + + &__top { + margin-bottom: 10px; + + @include on-tablet { + margin-bottom: 30px; + } + + @include on-desktop { + margin-bottom: 14px; + } + } + + &__bottom { + display: flex; + flex-direction: column; + justify-content: space-between; + height: calc(100vh - 87px); + + @include on-tablet { + height: calc(100vh - 107px); + } + + @include on-desktop { + height: calc(100vh - 103px); + flex-direction: row; + } + } + + &__info { + display: flex; + flex-direction: column; + gap: 20px; + margin-bottom: 40px; + + @include on-tablet { + flex-direction: row; + gap: 124px; + margin-bottom: 50px; + } + + @include on-desktop { + gap: 84px; + margin-bottom: 70px; + } + } + + &__info-data { + font-weight: 600; + text-decoration: none; + color: inherit; + + @include hover(color, $main-accent-color); + } + + &__info-name { + @include on-tablet { + font-size: 14px; + line-height: 140%; + } + } + + &__nav { + margin-bottom: 40px; + + font-weight: 700; + font-size: 20px; + + @include on-tablet { + font-size: 48px; + line-height: 120%; + margin-bottom: 50px; + } + + @include on-desktop { + margin-bottom: 60px; + } + } + + &__picture { + display: flex; + overflow: hidden; + } + + &__image { + object-fit: contain; + width: 100%; + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 000000000..a28ee3574 --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,39 @@ +.nav { + &__list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + flex-direction: column; + gap: 20px; + + font-size: 20px; + line-height: 150%; + + padding-bottom: 40px; + border-bottom: 1px solid $main-white-color; + } + + &__link { + text-decoration: none; + color: inherit; + position: relative; + + &::after { + display: block; + content: ''; + position: absolute; + height: 1px; + width: 100%; + background-color: $main-white-color; + + transition: transform $effect-duration; + transform: scale(0); + transform-origin: left; + } + + &:hover::after { + transform: scale(1); + } + } +} diff --git a/src/styles/blocks/news.scss b/src/styles/blocks/news.scss new file mode 100644 index 000000000..7b77cad83 --- /dev/null +++ b/src/styles/blocks/news.scss @@ -0,0 +1,46 @@ +.news { + @include page-grid; + + &__title { + grid-column: 1/-1; + + @include on-tablet { + grid-column: 1/5; + } + + @include on-desktop { + grid-column: span 6; + } + } + + &__button { + order: 1; + grid-column: 1/-1; + + @include on-tablet { + order: 0; + grid-column: 5/-1; + } + + @include on-desktop { + grid-column: 10/-1; + } + } + + &__content { + @include page-grid; + + margin-bottom: 30px; + + grid-column: 1/-1; + gap: 50px; + + @include on-tablet { + margin-bottom: 60px; + } + + @include on-desktop { + margin-bottom: 90px; + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..15d42c739 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,42 @@ +* { + box-sizing: border-box; +} + +body, +p, +h1, +h2, +h3 { + margin: 0; +} + +.page { + font-family: Raleway, sans-serif; + font-size: 16px; + line-height: 150%; + color: $main-black-color; + scroll-behavior: smooth; + + &:has(.page__menu:target) { + overflow: hidden; + } + + &__body { + min-width: 320px; + background: $main-white-color; + } + + &__menu { + position: fixed; + top: 0; + right: 0; + left: 0; + + transition: transform $effect-duration; + transform: translateX(-100%); + + &:target { + transform: translateX(0); + } + } +} diff --git a/src/styles/blocks/plan-visit.scss b/src/styles/blocks/plan-visit.scss new file mode 100644 index 000000000..2ad82dd82 --- /dev/null +++ b/src/styles/blocks/plan-visit.scss @@ -0,0 +1,42 @@ +.plan-visit { + background-color: $bgcolor; + + &__content { + @include page-grid; + } + + &__img { + display: none; + + @include on-desktop { + display: block; + grid-column: span 5; + } + } + + &__info { + grid-column: 1/-1; + + margin: 50px 0; + color: $main-white-color; + + @include on-tablet { + margin-top: 80px; + } + + @include on-desktop { + grid-column: span 7; + + margin-top: 205px; + } + } + + &__title { + font-size: 38px; + line-height: 100%; + } + + &__description { + margin-bottom: 40px; + } +} diff --git a/src/styles/blocks/section-title.scss b/src/styles/blocks/section-title.scss new file mode 100644 index 000000000..6be257425 --- /dev/null +++ b/src/styles/blocks/section-title.scss @@ -0,0 +1,20 @@ +.section-title { + margin: 0; + margin-bottom: 60px; + + font-size: 28px; + line-height: 125%; + + @include on-tablet { + margin-bottom: 75px; + + font-size: 40px; + } + + @include on-desktop { + margin-bottom: 70px; + + font-size: 48px; + line-height: 120%; + } +} diff --git a/src/styles/blocks/subscribe.scss b/src/styles/blocks/subscribe.scss new file mode 100644 index 000000000..18820ddd2 --- /dev/null +++ b/src/styles/blocks/subscribe.scss @@ -0,0 +1,82 @@ +.subscribe { + @include page-grid; + + &__title { + grid-column: 1/-1; + margin-bottom: 20px; + + @include on-desktop { + grid-column: span 6; + margin-bottom: 50px; + } + } + + &__description { + grid-column: 1/-1; + margin-bottom: 50px; + + @include on-tablet { + grid-column: span 5; + } + + @include on-desktop { + grid-column: span 6; + } + } + + &__form { + grid-column: 1/-1; + + @include on-tablet { + grid-column: span 4; + } + + @include on-desktop { + grid-column: span 5; + } + } + + &__input { + width: 100%; + height: 28px; + margin-bottom: 30px; + border: 0; + border-bottom: 1px solid $main-black-color; + background-color: $main-white-color; + color: $main-black-color; + font-weight: 700; + caret-color: $main-accent-color; + + @include on-desktop { + margin-bottom: 40px; + } + + &::placeholder { + font-weight: 400; + } + + &:hover { + border: 0; + border-bottom: 1px solid $main-accent-color; + + &::placeholder { + color: $main-accent-color; + } + } + + &:focus-visible { + border: 0; + border-bottom: 1px solid $main-accent-color; + outline: none; + + &::placeholder { + color: transparent; + } + } + } + + &__button { + width: 100%; + border: 0; + } +} diff --git a/src/styles/blocks/title.scss b/src/styles/blocks/title.scss new file mode 100644 index 000000000..395612b54 --- /dev/null +++ b/src/styles/blocks/title.scss @@ -0,0 +1,4 @@ +.title { + font-family: 'Playfair Display', sans-serif; + font-weight: 700; +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 000000000..330034d7b --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,71 @@ +.top-bar { + padding: 20px 0; + + @include on-desktop { + padding: 26px 0; + } + + display: flex; + justify-content: space-between; + align-items: center; + + &__logo-link { + display: flex; + height: 37px; + width: 124px; + + @include hover(transform, scale($scale-size)); + } + + &__icons { + display: flex; + gap: 30px; + + @include on-tablet { + gap: 40px; + } + } + + &__lang { + background-color: $bgcolor; + border: 0; + color: $main-white-color; + outline: none; + font-family: inherit; + font-weight: 500; + font-size: 16px; + + @include on-tablet { + order: 2; + } + } + + &__icon { + display: block; + height: 22px; + width: 22px; + background-size: cover; + + @include on-desktop { + height: 30px; + width: 30px; + } + + @include hover(transform, scale($scale-size)); + + &--menu { + background-image: url(../images/icons/icon-burger.svg); + height: 20px; + width: 25px; + + @include on-tablet { + height: 30px; + width: 30px; + } + } + + &--close { + background-image: url(../images/icons/icon-close.svg); + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..52ddb526b 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,22 @@ @import 'utils'; @import 'fonts'; @import 'typography'; - -body { - background: $c-gray; -} +@import './blocks/page'; +@import './blocks/container'; +@import './blocks/header'; +@import './blocks/button'; +@import './blocks/top-bar'; +@import './blocks/menu'; +@import './blocks/nav'; +@import './blocks/main'; +@import './blocks/title'; +@import './blocks/section-title'; +@import './blocks/exhibitions'; +@import './blocks/exhibition'; +@import './blocks/events'; +@import './blocks/event'; +@import './blocks/plan-visit'; +@import './blocks/news'; +@import './blocks/announcement'; +@import './blocks/subscribe'; +@import './blocks/footer'; diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..80a69f61a 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,50 @@ +@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: 40px; + } + + @include on-desktop { + margin-inline: auto; + padding-inline: 55px; + max-width: 1440px; + } +} + @mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; + transition: #{$_property} $effect-duration; &:hover { #{$_property}: $_toValue; } } + +@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..cff856e6b 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,13 @@ -$c-gray: #eee; +$tablet-min-width: 640px; +$desktop-min-width: 1280px; +$design-min-width: 1440px; +$bgcolor: #3f5252; +$main-white-color: #f1f5f4; +$main-black-color: #1c1b29; +$main-gray-color: #504f5e; +$main-accent-color: #cd4d31; +$button-hover-color: #af3419; +$button-pressed-color: #ea340d; +$button-disabled-color: #dd836f; +$effect-duration: 0.3s; +$scale-size: 1.09;