diff --git a/README.md b/README.md index afee6c841..1530f67b2 100644 --- a/README.md +++ b/README.md @@ -1,37 +1,9 @@ -# Museum 2 landing page -Implement landing page according to [Figma design](https://www.figma.com/file/HL3XGt5ZatvJoYBhOaWY5x/museum-prototype?node-id=323%3A1957) - Use BEM and SCSS - -Check font styles. Use [Playfair Display](https://fonts.google.com/specimen/Playfair+Display?query=Playfair+Display), [Raleway](https://fonts.google.com/specimen/Raleway?query=Raleway) - -- The design 1440px -- Desktop 1280px -- Tablet 640px -- Mobile (> 320px) - -1. Implement the header with menu. -1. Implement `Актуальтні виставки` block. -1. Implement `Найближчі події` block. -1. Implement `Сплануйте візит до музею` block. -1. Implement `Новини` block with the three cards. -1. Implement `Підпишіться на дайджест` block. -1. Implement footer. - - -## Github flow -1. **Fork** the repo. -2. **Clone** the forked one. (The project link should have your name but not `mate-academy`) -3. Run `npm install` (or just `npm i`). -4. Run `npm start`. -5. Open one more terminal window for the next steps. -6. `git checkout -b develop` - to create new branch and switch on it. -7. Write you code in `src` folder. -8. Run `npm run lint` and fix code style errors. -9. Run `npm run deploy` to deploy your solution to `gh-pages`. -10. `git add . && git commit -m 'write a short description of the changes you made'` to save your changes. -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/). -14. Copy `DEMO LINK` to the PR description. - -> To update you PR repeat steps 7-11. +# Dia landing page +- Implemented landing page according to [Figma design](https://www.figma.com/file/HL3XGt5ZatvJoYBhOaWY5x/museum-prototype?node-id=323%3A1957) + +# Specifications +- The page was adapted to the desktop, tablet and mobile version +- HTML, SCSS, JS technologies were used +- Burger menu +- Semantic HTML, BEM, Grid, Flex +- Forms + validation diff --git a/src/images/header/header-bg.png b/src/images/header/header-bg.png new file mode 100644 index 000000000..724c8e1eb Binary files /dev/null and b/src/images/header/header-bg.png differ diff --git a/src/images/icons/icon-arrow-down.svg b/src/images/icons/icon-arrow-down.svg new file mode 100644 index 000000000..cba2a18c6 --- /dev/null +++ b/src/images/icons/icon-arrow-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-arrow-right-hover.svg b/src/images/icons/icon-arrow-right-hover.svg new file mode 100644 index 000000000..e1b6a8206 --- /dev/null +++ b/src/images/icons/icon-arrow-right-hover.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/icon-arrow-right.svg b/src/images/icons/icon-arrow-right.svg new file mode 100644 index 000000000..8110114d4 --- /dev/null +++ b/src/images/icons/icon-arrow-right.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/icon-arrow-up.svg b/src/images/icons/icon-arrow-up.svg new file mode 100644 index 000000000..701b9e4ec --- /dev/null +++ b/src/images/icons/icon-arrow-up.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/icon-burger-menu.svg b/src/images/icons/icon-burger-menu.svg new file mode 100644 index 000000000..0cb275019 --- /dev/null +++ b/src/images/icons/icon-burger-menu.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/icon-facebook.svg b/src/images/icons/icon-facebook.svg new file mode 100644 index 000000000..1cb7bb4ba --- /dev/null +++ b/src/images/icons/icon-facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-instagram.svg b/src/images/icons/icon-instagram.svg new file mode 100644 index 000000000..b1d63d9d9 --- /dev/null +++ b/src/images/icons/icon-instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-telegram.svg b/src/images/icons/icon-telegram.svg new file mode 100644 index 000000000..5c8590402 --- /dev/null +++ b/src/images/icons/icon-telegram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-twitter.svg b/src/images/icons/icon-twitter.svg new file mode 100644 index 000000000..238247341 --- /dev/null +++ b/src/images/icons/icon-twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/logo/NAMU.svg b/src/images/logo/NAMU.svg new file mode 100644 index 000000000..a243122cc --- /dev/null +++ b/src/images/logo/NAMU.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/main/bg/bg.png b/src/images/main/bg/bg.png new file mode 100644 index 000000000..fef2a3e15 Binary files /dev/null and b/src/images/main/bg/bg.png differ diff --git a/src/images/main/events/img-1.svg b/src/images/main/events/img-1.svg new file mode 100644 index 000000000..b37c42cdb --- /dev/null +++ b/src/images/main/events/img-1.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/main/events/img-2.svg b/src/images/main/events/img-2.svg new file mode 100644 index 000000000..4310396e0 --- /dev/null +++ b/src/images/main/events/img-2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/main/exhibitions/img-1.png b/src/images/main/exhibitions/img-1.png new file mode 100644 index 000000000..6c757305d Binary files /dev/null and b/src/images/main/exhibitions/img-1.png differ diff --git a/src/images/main/exhibitions/img-2.png b/src/images/main/exhibitions/img-2.png new file mode 100644 index 000000000..82b59a5a6 Binary files /dev/null and b/src/images/main/exhibitions/img-2.png differ diff --git a/src/images/main/news/img-1.svg b/src/images/main/news/img-1.svg new file mode 100644 index 000000000..d89989fdd --- /dev/null +++ b/src/images/main/news/img-1.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/main/news/img-2.svg b/src/images/main/news/img-2.svg new file mode 100644 index 000000000..eccbd7a27 --- /dev/null +++ b/src/images/main/news/img-2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/menu/menu-bg.svg b/src/images/menu/menu-bg.svg new file mode 100644 index 000000000..573b6c59f --- /dev/null +++ b/src/images/menu/menu-bg.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/index.html b/src/index.html index 8019b83ec..ed4f69aec 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,570 @@ - + + - Title + NAMU + + + + - -

Hello Mate Academy

- + + + + + +
+
+
+ +
+ +
+ + +
+
+ + +

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

+

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

+

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

+ + Купити квиток + +
+
10.08 - 10.10
+
+
+
+
+ + + + + + + +
+ +
+
+
+

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

+ +
+ Photo-1 +

11.07 - 22.09

+

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

+

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

+ + Купити квиток + +
+ +
+ Photo-2 +

Діє постійно

+

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

+

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

+ + Купити квиток + +
+ +
+ + Архів виставок + + +
+
+
+
+ + + +
+
+
+

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

+ +
+ Photo-1 +
+

14.08 о 13:00

+

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

+

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

+ + Зареєструватись + +
+
+ +
+ Photo-2 +
+

16.08 о 13:00

+

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

+

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

+ + Зареєструватись + +
+
+ +
+ + Календар подій + + +
+
+
+ +
+
+
+

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

+

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

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

Новини

+ +
+ Photo-1 +

9 серпня 2019

+

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

+

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

+
+
+ Photo-2 +

9 серпня 2019

+

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

+

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

+
+
+ + Архів виставок + + +
+
+

+ Підпишіться на дайджест +

+

+ Першими дізнавайтесь про новини музею та розіграші, отримуйте + запрошення на події та читайте статті від кураторів +

+
+ + +
+
+
+
+
+ +
+ + + + + + + + + + diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index 33c3ed2b3..000000000 --- a/src/styles/_fonts.scss +++ /dev/null @@ -1 +0,0 @@ -// put fonts here 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 deleted file mode 100644 index 3280c3fe1..000000000 --- a/src/styles/_utils.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import 'utils/vars'; -@import 'utils/mixins'; -@import 'utils/extends'; diff --git a/src/styles/blocks/_article.scss b/src/styles/blocks/_article.scss new file mode 100644 index 000000000..2dbd6659a --- /dev/null +++ b/src/styles/blocks/_article.scss @@ -0,0 +1,72 @@ +.article { + @include hover(cursor, pointer); + @include hover(transform, scale(1.02)); + + &__img { + display: flex; + width: 100%; + height: 356px; + object-fit: cover; + margin-bottom: 20px; + + @include tablet { + margin-bottom: 30px; + min-width: 330px; + height: inherit; + grid-column: span 3; + } + + @include desktop { + margin-bottom: 20px; + grid-column: span 4; + } + } + + &__info { + @include tablet { + grid-column: span 3; + } + + @include desktop { + grid-column: span 6; + } + } + + &__date { + line-height: 24px; + color: $button-color; + margin-bottom: 10px; + } + + &__text { + line-height: 24px; + color: $gray-text-color; + margin-bottom: 30px; + + @include tablet { + margin-bottom: 50px; + } + } + + &__mb { + @include tablet { + margin-bottom: 50px; + } + } + + &--first { + margin-bottom: 60px; + + @include tablet { + margin-bottom: 0; + } + } + + &--second { + margin-bottom: 30px; + + @include tablet { + margin-bottom: 0; + } + } +} diff --git a/src/styles/blocks/_button.scss b/src/styles/blocks/_button.scss new file mode 100644 index 000000000..46c55ac4c --- /dev/null +++ b/src/styles/blocks/_button.scss @@ -0,0 +1,101 @@ +.button { + text-decoration: none; + width: 100%; + height: 60px; + display: flex; + justify-content: center; + align-items: center; + font-weight: 600; + gap: 8px; + font-size: 16px; + line-height: 16px; + + &--width { + @include desktop { + width: 270px; + } + } + + &--header { + margin-bottom: 40px; + + @include tablet { + margin-bottom: 70px; + width: 100%; + } + + @include desktop { + margin-bottom: 135px; + } + } + + &__events { + @include tablet { + grid-column: span 3; + } + + @include desktop { + grid-column: 6/9; + } + } + + &--red { + color: white; + background-color: $button-color; + + @include hover(background-color, $button-hover-color); + } + + &__link { + text-decoration: none; + color: $button-color; + transition: color $effect-duration ease; + } + + &--white { + box-sizing: border-box; + border: 1 solid $button-color; + transition: background-color $effect-duration ease; + + &:hover { + background-color: $button-color; + + .button__link { + color: white; + } + + .icon--arrow-right { + background-image: url(../images/icons/icon-arrow-right-hover.svg); + } + } + } + + &--article { + margin-bottom: 90px; + } + + &--mb { + margin-bottom: 120px; + + @include tablet { + margin-bottom: 70px; + } + + @include desktop { + margin-bottom: 55px; + } + } + + &--form { + border: none; + font-weight: normal; + + @include tablet { + width: calc(100% - 90px); + } + + @include desktop { + width: 270px; + } + } +} diff --git a/src/styles/blocks/_card.scss b/src/styles/blocks/_card.scss new file mode 100644 index 000000000..9643ce340 --- /dev/null +++ b/src/styles/blocks/_card.scss @@ -0,0 +1,47 @@ +.card { + @include hover(cursor, pointer); + @include hover(transform, scale(1.02)); + + &__img { + height: 280px; + width: 100%; + object-fit: cover; + display: flex; + margin-bottom: 20px; + + @include tablet { + height: 330px; + margin-bottom: 30px; + } + + @include desktop { + height: 370px; + margin-bottom: 20px; + } + } + + &--first { + margin-bottom: 50px; + + @include tablet { + margin-bottom: 160px; + } + + @include desktop { + margin-bottom: 200px; + } + } + + &--second { + margin-bottom: 30px; + } + + &__date { + font-size: 14px; + line-height: 19.6px; + } + + &__text { + line-height: 24px; + } +} diff --git a/src/styles/blocks/_form.scss b/src/styles/blocks/_form.scss new file mode 100644 index 000000000..2ac183cca --- /dev/null +++ b/src/styles/blocks/_form.scss @@ -0,0 +1,30 @@ +.form { + font-family: Raleway, sans-serif; + display: flex; + flex-direction: column; + gap: 34px; + + @include tablet { + grid-column: span 4; + } + + @include desktop { + grid-column: span 5; + } + + &__input { + box-sizing: border-box; + border: none; + width: 100%; + height: 28px; + padding-bottom: 3px; + border-bottom: 1px solid $black-text-color; + outline: none; + line-height: 24px; + + &::placeholder { + color: $black-text-color; + line-height: 24px; + } + } +} diff --git a/src/styles/blocks/_icon.scss b/src/styles/blocks/_icon.scss new file mode 100644 index 000000000..ef7f71762 --- /dev/null +++ b/src/styles/blocks/_icon.scss @@ -0,0 +1,50 @@ +.icon { + background-size: cover; + background-repeat: no-repeat; + display: block; + width: 20px; + height: 20px; + + @include hover(transform, scale(1.2)); + + &--menu { + background-image: url(../images/icons/icon-burger-menu.svg); + height: 20px; + width: 25px; + } + + &--close { + width: 22px; + height: 22px; + background-image: url(../images/icons/icon-close.svg); + } + + &--arrow-right { + background-image: url(../images/icons/icon-arrow-right.svg); + width: 20px; + height: 20px; + transition: background-color $effect-duration ease; + } + + &--facebook { + background-image: url(../images/icons/icon-facebook.svg); + } + + &--twitter { + background-image: url(../images/icons/icon-twitter.svg); + } + + &--telegram { + background-image: url(../images/icons/icon-telegram.svg); + } + + &--instagram { + background-image: url(../images/icons/icon-instagram.svg); + } + + &--arrow-up { + background-image: url(../images/icons/icon-arrow-up.svg); + width: 30px; + height: 30px; + } +} diff --git a/src/styles/blocks/_menu.scss b/src/styles/blocks/_menu.scss new file mode 100644 index 000000000..fc7894ce4 --- /dev/null +++ b/src/styles/blocks/_menu.scss @@ -0,0 +1,108 @@ +.menu { + height: 100vh; + background-color: $background-green-color; + color: $white-text-color; + overflow: hidden; + + &__content { + @include tablet { + @include page-grid; + } + } + + &__top-bar { + @include tablet { + grid-column: 1/-1; + margin-bottom: 30px; + } + + @include desktop { + margin-bottom: 40px; + } + } + + &__schedule { + margin-bottom: 20px; + + @include tablet { + grid-column: span 2; + margin-bottom: 50px; + } + + @include desktop { + margin-bottom: 70px; + } + } + + &__text { + font-size: 14px; + line-height: 19.6px; + } + + &__info { + line-height: 24px; + font-weight: 600; + } + + &__address { + margin-bottom: 40px; + + @include tablet { + margin-bottom: 0; + grid-column: 3/6; + } + } + + &__nav { + grid-column: 1/-1; + + @include desktop { + grid-column: 1/7; + } + } + + &__button { + @include tablet { + margin-bottom: 30px; + grid-column: span 3; + } + + @include desktop { + margin-bottom: 108px; + grid-column: 1/4; + } + } + + &__bg-img { + display: none; + + @include tablet { + display: flex; + background-image: url(../images/menu/menu-bg.svg); + background-size: cover; + background-repeat: no-repeat; + grid-column: 2/-2; + height: 466px; + } + + @include desktop { + display: none; + } + } + + &__img { + display: none; + + @include desktop { + display: block; + background-image: url(../images/menu/menu-bg.svg); + background-repeat: no-repeat; + background-size: cover; + height: 663px; + width: 45vw; + position: absolute; + right: 0; + bottom: 0; + } + } +} diff --git a/src/styles/blocks/_nav.scss b/src/styles/blocks/_nav.scss new file mode 100644 index 000000000..a5ce4a092 --- /dev/null +++ b/src/styles/blocks/_nav.scss @@ -0,0 +1,79 @@ +.nav { + &__list { + display: flex; + flex-direction: column; + gap: 20px; + list-style: none; + width: fit-content; + + @include tablet { + gap: 30px; + } + + @include desktop { + gap: 60px; + } + + &--footer { + gap: 5px; + } + } + + &--after { + &::after { + content: ''; + width: 100%; + height: 1px; + background-color: $background-white-color; + display: block; + margin-block: 40px; + + @include tablet { + margin-block: 50px; + } + + @include desktop { + margin-block: 60px; + } + } + } + + &__link { + display: block; + text-decoration: none; + color: inherit; + position: relative; + width: fit-content; + + &--menu { + font-size: 20px; + line-height: 30px; + + @include tablet { + font-size: 48px; + line-height: 57.6px; + } + } + + &--fotter { + line-height: 24px; + font-weight: 400; + } + + &::after { + content: ''; + position: absolute; + bottom: -1px; + display: block; + height: 1px; + width: 100%; + background-color: $white-text-color; + transition: transform $effect-duration; + transform: scale(0); + } + + &:hover::after { + transform: scale(1); + } + } +} diff --git a/src/styles/blocks/_select.scss b/src/styles/blocks/_select.scss new file mode 100644 index 000000000..2c058fb35 --- /dev/null +++ b/src/styles/blocks/_select.scss @@ -0,0 +1,21 @@ +.select { + background-color: $background-green-color; + border: none; + color: $white-text-color; + outline: none; + font-size: 16px; + font-weight: 500; + line-height: 24px; + + &--header { + display: none; + + @include tablet { + display: block; + } + } + + &:hover { + cursor: pointer; + } +} diff --git a/src/styles/blocks/_title.scss b/src/styles/blocks/_title.scss new file mode 100644 index 000000000..b7754f54d --- /dev/null +++ b/src/styles/blocks/_title.scss @@ -0,0 +1,106 @@ +.title { + font-family: $playfair; + font-weight: 700; + + &--header { + font-size: 48px; + line-height: 48px; + margin-bottom: 30px; + + @include tablet { + font-size: 72px; + line-height: 72px; + margin-bottom: 20px; + } + + @include desktop { + font-size: 96px; + line-height: 96px; + margin-bottom: 30px; + } + } + + &--main { + font-size: 28px; + line-height: 35px; + text-align: center; + margin-bottom: 60px; + + @include tablet { + height: 50px; + font-size: 40px; + line-height: 50px; + } + } + + &--mb { + margin-bottom: 20px; + + @include tablet { + grid-column: 1/-1; + } + + @include desktop { + grid-column: span 5; + } + } + + &--grow { + flex-grow: 1; + } + + &--article { + font-size: 20px; + line-height: 25px; + margin-bottom: 20px; + + @include tablet { + font-size: 24px; + line-height: 30px; + } + } + + &--card { + font-size: 20px; + line-height: 25px; + margin-bottom: 20px; + + @include tablet { + line-height: 30px; + margin-bottom: 18px; + } + } + + &--museum { + font-size: 38px; + line-height: 38px; + margin-bottom: 20px; + + @include tablet { + grid-column: span 4; + font-size: 62px; + line-height: 62px; + } + + @include desktop { + grid-column: 6/11; + margin-bottom: 30px; + } + } + + &--left { + text-align: left; + } + + &--footer { + font-size: 18px; + line-height: 27px; + margin-bottom: 10px; + + @include tablet { + font-size: 20px; + line-height: 30px; + margin-bottom: 30px; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..e486cf92f 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,26 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; +// utils +@import 'utils/vars'; +@import 'utils/mixins'; +@import 'utils/reset'; +@import 'utils/container'; -body { - background: $c-gray; -} +// blocks +@import 'blocks/button'; +@import 'blocks/menu'; +@import 'blocks/nav'; +@import 'blocks/title'; +@import 'blocks/icon'; +@import 'blocks/select'; +@import 'blocks/article'; +@import 'blocks/card'; +@import 'blocks/form'; + +// sections +@import 'sections/html/page'; +@import 'sections/header/header'; +@import 'sections/header/top-bar'; +@import 'sections/main/main'; +@import 'sections/main/exhibitions/exhibitions'; +@import 'sections/main/news/news'; +@import 'sections/main/events/events'; +@import 'sections/footer/footer'; diff --git a/src/styles/sections/footer/_footer.scss b/src/styles/sections/footer/_footer.scss new file mode 100644 index 000000000..e9178e019 --- /dev/null +++ b/src/styles/sections/footer/_footer.scss @@ -0,0 +1,102 @@ +.footer { + background-color: $background-green-color; + padding-block: 30px 34px; + color: $white-text-color; + + @include desktop { + padding-block: 50px 30px; + } + + &__content { + @include tablet { + @include page-grid; + } + } + + &__links { + margin-bottom: 30px; + + @include tablet { + margin-bottom: 50px; + } + } + + &__link { + color: inherit; + text-decoration: none; + line-height: 24px; + display: block; + } + + &__socials { + display: flex; + gap: 20px; + } + + &__contacts { + margin-bottom: 50px; + + @include tablet { + grid-column: span 2; + } + } + + &__schedule { + margin-bottom: 50px; + + @include tablet { + grid-column: span 2; + margin-bottom: 60px; + } + + @include desktop { + grid-column: 5/7; + margin-bottom: 70px; + } + } + + &__day { + line-height: 24px; + } + + &__nav { + margin-bottom: 60px; + + @include desktop { + grid-column: 9/11; + } + } + + &__bottom { + display: flex; + justify-content: space-between; + align-items: flex-end; + + @include tablet { + grid-column: span 6; + } + + @include desktop { + grid-column: 1/-1; + } + } + + &__years { + font-size: 14px; + line-height: 19.6px; + } + + &__privacy { + font-size: 14px; + line-height: 19.6px; + } + + &__info { + display: flex; + gap: 22px; + + @include desktop { + gap: 102px; + } + } +} diff --git a/src/styles/sections/header/_header.scss b/src/styles/sections/header/_header.scss new file mode 100644 index 000000000..dde375eb6 --- /dev/null +++ b/src/styles/sections/header/_header.scss @@ -0,0 +1,118 @@ +.header { + background-color: $background-green-color; + color: $white-text-color; + + &__content { + position: relative; + + @include tablet { + @include page-grid; + } + } + + &__top-bar { + grid-column: 1/-1; + } + + &__date { + font-size: 14px; + line-height: 19.6px; + margin-bottom: 10px; + + @include tablet { + grid-column: span 2; + } + + @include desktop { + grid-column: span 6; + } + } + + &__title { + @include tablet { + grid-column: 1/6; + } + + @include desktop { + grid-column: 1/7; + } + } + + &__button { + grid-column: 1/4; + + @include desktop { + grid-column: 1/4; + } + } + + &__info { + font-size: 16px; + line-height: 24px; + margin-bottom: 40px; + + @include tablet { + grid-column: 1/4; + margin-bottom: 50px; + } + + @include desktop { + grid-column: 1/7; + margin-bottom: 80px; + } + } + + &__bg-img { + margin-inline: auto; + background-image: url(..//images/header/header-bg.png); + background-size: cover; + width: 245px; + height: 273px; + + @include tablet { + height: 494px; + width: 443px; + grid-column: 1/-1; + } + + @include desktop { + display: none; + } + } + + &__decor { + display: none; + + @include desktop { + display: flex; + gap: 20px; + align-items: center; + grid-column: 1/7; + margin-bottom: 50px; + + &::after { + content: ''; + display: block; + width: 80%; + height: 1px; + background-color: $white-text-color; + } + } + } + + &__img { + display: none; + + @include desktop { + display: block; + background-image: url(../images/header/header-bg.png); + background-repeat: no-repeat; + background-size: cover; + height: 663px; + width: 45vw; + position: absolute; + right: 0; + bottom: 0; + } + } +} diff --git a/src/styles/sections/header/_top-bar.scss b/src/styles/sections/header/_top-bar.scss new file mode 100644 index 000000000..1c21a1ebf --- /dev/null +++ b/src/styles/sections/header/_top-bar.scss @@ -0,0 +1,33 @@ +.top-bar { + padding-block: 20px; + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 50px; + + @include tablet { + margin-bottom: 100px; + } + + @include desktop { + padding-block: 26.5px; + margin-bottom: 90px; + } + + &__logo { + display: flex; + height: 37px; + + @include hover(transform, scale(1.1)); + } + + &__right { + display: flex; + gap: 30px; + + @include tablet { + flex-direction: row-reverse; + gap: 44px; + } + } +} diff --git a/src/styles/sections/html/_page.scss b/src/styles/sections/html/_page.scss new file mode 100644 index 000000000..dc6882f79 --- /dev/null +++ b/src/styles/sections/html/_page.scss @@ -0,0 +1,49 @@ +input:-webkit-autofill, +input:-webkit-autofill:hover, +input:-webkit-autofill:focus, +textarea:-webkit-autofill, +textarea:-webkit-autofill:hover, +textarea:-webkit-autofill:focus, +select:-webkit-autofill, +select:-webkit-autofill:hover, +select:-webkit-autofill:focus { + -webkit-text-fill-color: black; + -webkit-box-shadow: 0 0 0 1000px white inset; + transition: white 5000s ease-in-out 0s; +} + +* { + margin: 0; + padding: 0; +} + +.page { + font-family: Raleway, sans-serif; + scroll-behavior: smooth; + + &__menu { + position: fixed; + left: 0; + right: 0; + top: 0; + + opacity: 0; + pointer-events: none; + transform: translateY(-100%); + transition: all $effect-duration; + + &:target { + pointer-events: all; + opacity: 1; + transform: translateY(0); + } + } + + &:has(.page__menu:target) { + overflow: hidden; + } + + &__header { + position: relative; + } +} diff --git a/src/styles/sections/main/_main.scss b/src/styles/sections/main/_main.scss new file mode 100644 index 000000000..bd627935d --- /dev/null +++ b/src/styles/sections/main/_main.scss @@ -0,0 +1,31 @@ +.main { + padding-block: 90px 80px; + + @include tablet { + padding-block: 100px 128px; + } + + @include desktop { + padding-block: 110px 200px; + } + + &__exhibitions { + margin-bottom: 120px; + + @include tablet { + margin-bottom: 160px; + } + + @include desktop { + margin-bottom: 200px; + } + } + + &__events { + margin-bottom: 90px; + + @include desktop { + margin-bottom: 110px; + } + } +} diff --git a/src/styles/sections/main/events/_events.scss b/src/styles/sections/main/events/_events.scss new file mode 100644 index 000000000..236ddcad8 --- /dev/null +++ b/src/styles/sections/main/events/_events.scss @@ -0,0 +1,99 @@ +.events { + &__content { + @include tablet { + @include page-grid; + + grid-template-rows: 60px 1fr 1fr; + row-gap: 70px; + margin-bottom: 100px; + } + + @include desktop { + row-gap: 60px; + margin-bottom: 110px; + } + } + + &__bg-img { + display: none; + + @include desktop { + display: flex; + background-image: url(../images/main/bg/bg.png); + background-repeat: no-repeat; + background-size: cover; + width: 45%; + height: 800px; + position: absolute; + left: 0; + bottom: 0; + } + } + + &__title { + @include tablet { + grid-column: 1/4; + grid-row: 1/2; + } + + @include desktop { + grid-column: 1/6; + } + } + + &__button { + @include tablet { + grid-column: 5/7; + grid-row: 1/2; + } + + @include desktop { + grid-column: 10/13; + } + } + + &__article { + @include tablet { + grid-column: 1/-1; + + @include page-grid; + } + } + + &__grid { + @include tablet { + @include page-grid; + } + } + + &__museum { + background-color: $background-green-color; + padding-block: 50px; + color: $white-text-color; + + @include tablet { + padding-block: 80px; + } + + @include desktop { + padding-block: 205px; + position: relative; + overflow: hidden; + } + } + + &__text { + line-height: 24px; + margin-bottom: 40px; + + @include tablet { + grid-column: span 4; + margin-bottom: 60px; + } + + @include desktop { + grid-column: 6/11; + margin-bottom: 50px; + } + } +} diff --git a/src/styles/sections/main/exhibitions/_exhibitions.scss b/src/styles/sections/main/exhibitions/_exhibitions.scss new file mode 100644 index 000000000..97dd8797d --- /dev/null +++ b/src/styles/sections/main/exhibitions/_exhibitions.scss @@ -0,0 +1,45 @@ +.exhibitions { + &__content { + @include tablet { + @include page-grid; + + grid-template-rows: 60px 1fr; + row-gap: 70px; + } + } + + &__title { + @include tablet { + grid-column: 1/5; + grid-row: 1/2; + } + + @include desktop { + grid-column: 1/6; + } + } + + &__button { + @include tablet { + grid-column: 5/7; + grid-row: 1/2; + } + + @include desktop { + grid-column: 10/13; + } + } + + &__article { + @include tablet { + grid-column: span 3; + display: flex; + flex-direction: column; + justify-items: end; + } + + @include desktop { + grid-column: span 6; + } + } +} diff --git a/src/styles/sections/main/news/_news.scss b/src/styles/sections/main/news/_news.scss new file mode 100644 index 000000000..236d86643 --- /dev/null +++ b/src/styles/sections/main/news/_news.scss @@ -0,0 +1,62 @@ +.news { + &__content { + @include tablet { + @include page-grid; + + grid-template-columns: 1fr 1fr 1fr; + } + } + + &__title { + @include tablet { + grid-column: 1/3; + grid-row: 1/2; + } + } + + &__card { + @include tablet { + grid-column: span 3; + grid-row: 2/3; + } + + @include desktop { + grid-column: span 6; + } + } + + &__subscription { + @include tablet { + grid-column: 1/-1; + grid-row: 3/4; + + @include page-grid; + + row-gap: 50px; + } + } + + &__button { + @include tablet { + grid-column: 5/7; + grid-row: 1/2; + } + + @include desktop { + grid-column: 10/13; + } + } + + &__text { + line-height: 24px; + margin-bottom: 50px; + + @include tablet { + grid-column: span 5; + } + + @include desktop { + grid-column: 7/13; + } + } +} diff --git a/src/styles/utils/_container.scss b/src/styles/utils/_container.scss new file mode 100644 index 000000000..244ccc355 --- /dev/null +++ b/src/styles/utils/_container.scss @@ -0,0 +1,3 @@ +.container { + @include content-padding-inline; +} 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..908d61a96 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,47 @@ @mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; + transition: #{$_property} $effect-duration; &:hover { #{$_property}: $_toValue; } } + +@mixin content-padding-inline { + padding-inline: 20px; + + @include tablet { + padding-inline: 39px; + } + + @include desktop { + max-width: 1170px; + margin-inline: auto; + padding-inline: 55px; + } +} + +@mixin page-grid { + display: grid; + column-gap: 20px; + grid-template-columns: repeat($columns-on-mobile, 1fr); + + @include tablet { + grid-template-columns: repeat($columns-on-tablet, 1fr); + column-gap: 30px; + } + + @include desktop { + grid-template-columns: repeat($columns-on-desktop, 1fr); + } +} + +@mixin tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} diff --git a/src/styles/utils/_reset.scss b/src/styles/utils/_reset.scss new file mode 100644 index 000000000..47dd22334 --- /dev/null +++ b/src/styles/utils/_reset.scss @@ -0,0 +1,14 @@ +html { + scroll-behavior: smooth; +} + +body { + line-height: 1; + margin: 0; + padding: 0; +} + +ol, +ul { + list-style: none; +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..f6509d59b 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,14 @@ -$c-gray: #eee; +$background-green-color: #3f5252; +$background-white-color: #eee; +$button-color: #cd4d31; +$button-hover-color: #9f270c; +$white-text-color: #f1f5f4; +$black-text-color: #1c1b29; +$gray-text-color: #504f5e; +$playfair: 'Playfair Display', serif; +$columns-on-mobile: 2; +$columns-on-tablet: 6; +$columns-on-desktop: 12; +$tablet-min-width: 768px; +$desktop-min-width: 1280px; +$effect-duration: 0.3s;