diff --git a/README.md b/README.md index afee6c841..bb7d47c64 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://RuslanV23.github.io/Museum_2/). 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..239048ddd 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,675 @@ - + - Title + Національний художній музей України - namu.ua + + + + + + + - -

Hello Mate Academy

- + +
+
+
+ +
+ +
+ UA +
+
+
+
+
+
+

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

+

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

+

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

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

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

+ +
+
+ +
+
+
+ exhibition image +
+ 11.07 - 22.09 +

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

+

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

+
+ + Купити квиток + +
+
+ +
+
+ exhibition image +
+ Діє постійно +

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

+

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

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

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

+ +
+
+
+
+ event image +
+
+ 14.08 о 13:00 +

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

+

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

+
+ + Зареєструватись + +
+
+ +
+ event image +
+
+ 16.08 о 13:00 +

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

+

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

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

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

+

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

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

Новини

+ +
+
+ +
+
+
+ new +
+ +

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

+

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

+
+ +
+
+ new +
+ +

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

+

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

+
+
+ +
+ +
+
+ +
+
+

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

+

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

+
+
+
+ + +
+
+
+
+ + + + + diff --git a/src/images/event/1.png b/src/images/event/1.png new file mode 100644 index 000000000..cf13a6e94 Binary files /dev/null and b/src/images/event/1.png differ diff --git a/src/images/event/2.png b/src/images/event/2.png new file mode 100644 index 000000000..1c670769e Binary files /dev/null and b/src/images/event/2.png differ diff --git a/src/images/exhibition/1.png b/src/images/exhibition/1.png new file mode 100644 index 000000000..c6d6d5943 Binary files /dev/null and b/src/images/exhibition/1.png differ diff --git a/src/images/exhibition/2.png b/src/images/exhibition/2.png new file mode 100644 index 000000000..936b60afb Binary files /dev/null and b/src/images/exhibition/2.png differ diff --git a/src/images/header-bg.png b/src/images/header-bg.png new file mode 100644 index 000000000..ac9390b31 Binary files /dev/null and b/src/images/header-bg.png differ diff --git a/src/images/icon/arrow-right.svg b/src/images/icon/arrow-right.svg new file mode 100644 index 000000000..1e8fb1c95 --- /dev/null +++ b/src/images/icon/arrow-right.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icon/close.svg b/src/images/icon/close.svg new file mode 100644 index 000000000..ef3e96fa3 --- /dev/null +++ b/src/images/icon/close.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icon/dropdown.svg b/src/images/icon/dropdown.svg new file mode 100644 index 000000000..dc63ad397 --- /dev/null +++ b/src/images/icon/dropdown.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/logo.svg b/src/images/icon/logo.svg new file mode 100644 index 000000000..97e7b55bd --- /dev/null +++ b/src/images/icon/logo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/icon/menu.svg b/src/images/icon/menu.svg new file mode 100644 index 000000000..c86f620af --- /dev/null +++ b/src/images/icon/menu.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/icon/scroll-up.svg b/src/images/icon/scroll-up.svg new file mode 100644 index 000000000..701b9e4ec --- /dev/null +++ b/src/images/icon/scroll-up.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icon/socials/facebook.svg b/src/images/icon/socials/facebook.svg new file mode 100644 index 000000000..1cb7bb4ba --- /dev/null +++ b/src/images/icon/socials/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/socials/instagram.svg b/src/images/icon/socials/instagram.svg new file mode 100644 index 000000000..b1d63d9d9 --- /dev/null +++ b/src/images/icon/socials/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/socials/telegram.svg b/src/images/icon/socials/telegram.svg new file mode 100644 index 000000000..5c8590402 --- /dev/null +++ b/src/images/icon/socials/telegram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/socials/twitter.svg b/src/images/icon/socials/twitter.svg new file mode 100644 index 000000000..238247341 --- /dev/null +++ b/src/images/icon/socials/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/menu/img_menu.png b/src/images/menu/img_menu.png new file mode 100644 index 000000000..b659804a5 Binary files /dev/null and b/src/images/menu/img_menu.png differ diff --git a/src/images/news/1.png b/src/images/news/1.png new file mode 100644 index 000000000..8cbfeb9fc Binary files /dev/null and b/src/images/news/1.png differ diff --git a/src/images/news/2.png b/src/images/news/2.png new file mode 100644 index 000000000..577e91685 Binary files /dev/null and b/src/images/news/2.png differ diff --git a/src/images/planes/bg.png b/src/images/planes/bg.png new file mode 100644 index 000000000..59241bfb6 Binary files /dev/null and b/src/images/planes/bg.png differ diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss index 1837eb46e..f4d17d5f4 100644 --- a/src/styles/_typography.scss +++ b/src/styles/_typography.scss @@ -1,3 +1,72 @@ +// h1,h2,h3,h4,h5,h6 { +// margin: 0; +// padding: 0; +// } + h1 { - @extend %h1; + font-weight: 700; + font-size: 48px; + + @include on-table { + font-size: 72px; + } + + @include on-desktop { + font-size: 96px; + } +} + +h2 { + font-weight: 700; + font-size: 38px; + + @include on-table { + font-size: 62px; + } + + @include on-desktop { + font-size: 80px; + } +} + +h3 { + font-weight: 700; + font-size: 28px; + line-height: 125%; + + @include on-table { + font-size: 40px; + } + + @include on-desktop { + font-size: 48px; + } +} + +h4 { + font-weight: 700; + font-size: 20px; + line-height: 125%; + + @include on-table { + font-size: 24px; + } + + @include on-desktop { + font-size: 24px; + } +} + +h5 { + font-weight: 700; + font-size: 20px; + line-height: 150%; +} + +p { + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 16px; + color: $gray; + line-height: 150%; } diff --git a/src/styles/blocks/buttons.scss b/src/styles/blocks/buttons.scss new file mode 100644 index 000000000..14e9d5d93 --- /dev/null +++ b/src/styles/blocks/buttons.scss @@ -0,0 +1,80 @@ +.button-primary { + cursor: pointer; + border: none; + width: 270px; + height: 60px; + color: $white; + display: flex; + justify-content: center; + align-items: center; + text-decoration: none; + background-color: $main; + text-align: center; + + transition: background-color $transition; + + font-weight: 600; + font-size: 16px; + font-family: Raleway, sans-serif; + + &:hover { + background-color: #af3419; + } + + &:active { + background-color: #ea340d; + } + + &:disabled { + background-color: #dd836f; + } +} + +.button-secondary { + --button-secondary-color: #cd4d31; + + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + background-color: $white; + width: 270px; + height: 60px; + border: var(--button-secondary-color) solid 1px; + + transition: + border $transition, + box-shadow $transition; + + &__span { + font-weight: 600; + font-size: 16px; + color: var(--button-secondary-color); + font-family: Raleway, sans-serif; + + transition: color $transition; + } + + &__icon { + background-color: var(--button-secondary-color); + + transition: + background-color $transition, + transform cubic-bezier(0.42, -1.08, 0.53, 1.7) $transition; + } + + &:hover { + --button-secondary-color: #af3419; + + box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); + + & .button-secondary__icon { + transform: translateX(10px); + } + } + + &:active { + --button-secondary-color: #ea340d; + } +} diff --git a/src/styles/blocks/container.scss b/src/styles/blocks/container.scss new file mode 100644 index 000000000..8332c6fa8 --- /dev/null +++ b/src/styles/blocks/container.scss @@ -0,0 +1,26 @@ +.container { + --count-columns: 2; + + display: grid; + grid-template-columns: repeat(var(--count-columns), 1fr); + column-gap: 20px; + padding-inline: 20px; + + &--no-grid { + display: block; + } + + @include on-table { + --count-columns: 6; + + column-gap: 30px; + padding-inline: 39px; + } + + @include on-desktop { + --count-columns: 12; + + column-gap: 30px; + padding-inline: 55px; + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..7c57d8b3e --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,125 @@ +.footer { + --margin-top-title: 10px; + + color: $white; + + @include on-table { + --margin-top-title: 30px; + } + + &__container { + row-gap: 50px; + } + + &__container-copyright { + display: flex; + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 140%; + margin-top: 60px; + gap: 12vw; + + @include on-table { + margin-top: 70px; + } + } + + &__bg { + background-color: $bg; + padding-block: 34px 30px; + + @include on-table { + padding-block: 50px 30px; + } + } + + &__contacts, + &__work-schedule, + &__nav { + grid-column: 2 span; + + @include on-table { + grid-column: 2 span; + } + + @include on-desktop { + grid-column: 4 span; + } + } + + &__contacts { + display: flex; + flex-direction: column; + + &-list { + display: flex; + gap: 2px; + flex-direction: column; + color: $white; + list-style: none; + margin-top: var(--margin-top-title); + } + + &-link { + text-decoration: none; + color: $white; + font-weight: 400; + font-family: Raleway, sans-serif; + line-height: 150%; + font-size: 16px; + + transition: color $transition; + + &:hover { + color: $main; + } + } + + &-social-list { + margin-top: 30px; + list-style: none; + display: flex; + gap: 20px; + + @include on-table { + margin-top: auto; + margin-bottom: 2px; + bottom: 0; + } + } + } + + &__work-schedule { + &-p { + margin-top: var(--margin-top-title); + color: $white; + } + } + + &__nav { + &-list { + margin-top: var(--margin-top-title); + display: flex; + flex-direction: column; + list-style: none; + gap: 5px; + + @include on-table { + gap: 10px; + } + } + + &-link { + color: $white; + font-family: Raleway, sans-serif; + text-decoration: none; + + transition: color $transition; + + &:hover { + color: $main; + } + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..564a23693 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,113 @@ +.header { + background-color: $bg; + color: $white; + + &__p-1 { + margin-top: 50px; + color: $white; + grid-column: 1 / -1; + + @include on-table { + margin-top: 100px; + } + + @include on-desktop { + margin-top: 90px; + + grid-column: 1 / 7; + } + } + + &__title { + margin-top: 10px; + grid-column: 1 / -1; + + @include on-desktop { + grid-column: 1 / 7; + } + } + + &__p-2 { + margin-top: 30px; + color: $white; + grid-column: 1 / -1; + + @include on-table { + margin-top: 20px; + grid-column: 1 / 4; + } + + @include on-desktop { + margin-top: 30px; + + grid-column: 1 / 7; + } + } + + &__button { + margin-top: 40px; + grid-column: 1 / -1; + width: 100%; + + @include on-table { + margin-top: 50px; + grid-column: 1 / 4; + } + + @include on-desktop { + margin-top: 80px; + } + } + + &__image { + margin-top: 40px; + background-image: url('../images/header-bg.png'); + background-repeat: no-repeat; + background-position: top; + background-size: contain; + grid-column: 1 / -1; + aspect-ratio: 1/1; + + @include on-table { + margin-top: 70px; + grid-column: 2 / -2; + } + + @include on-desktop { + // background-position: bottom; + align-self: flex-end; + + margin-top: 0; + grid-column: 7 / -1; + grid-row: 1 / 6; + } + } + + &__date-box { + display: none; + + @include on-desktop { + margin-top: 135px; + margin-bottom: 50px; + display: flex; + align-items: center; + gap: 20px; + grid-column: 1 / -7; + } + } + + &__date { + display: block; + font-family: 'Playfair Display', serif; + font-size: 14px; + font-weight: 700; + opacity: 70%; + } + + &__date-line { + flex-grow: 1; + background-color: $white; + height: 1px; + opacity: 30%; + } +} diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss new file mode 100644 index 000000000..fc683f95e --- /dev/null +++ b/src/styles/blocks/icon.scss @@ -0,0 +1,57 @@ +.icon { + &--menu { + @include icon(30px, 30px, '../images/icon/menu.svg', $white, $main); + } + + &--close { + @include icon(22px, 22px, '../images/icon/close.svg', $white, $main); + } + + &--lang { + @include icon(10px, 7px, '../images/icon/dropdown.svg', $white); + } + + &--arrow-right { + @include icon(20px, 20px, '../images/icon/arrow-right.svg', $main); + } + + &--facebook { + @include icon( + 20px, + 20px, + '../images/icon/socials/facebook.svg', + $white, + $main + ); + } + + &--twitter { + @include icon( + 20px, + 20px, + '../images/icon/socials/twitter.svg', + $white, + $main + ); + } + + &--telegram { + @include icon( + 20px, + 20px, + '../images/icon/socials/telegram.svg', + $white, + $main + ); + } + + &--instagram { + @include icon( + 20px, + 20px, + '../images/icon/socials/instagram.svg', + $white, + $main + ); + } +} diff --git a/src/styles/blocks/lang.scss b/src/styles/blocks/lang.scss new file mode 100644 index 000000000..716cfbdd7 --- /dev/null +++ b/src/styles/blocks/lang.scss @@ -0,0 +1,40 @@ +.lang { + cursor: pointer; + display: none; + justify-content: center; + align-items: center; + gap: 2px; + + &--tb { + display: none; + + @include on-table { + display: flex; + } + } + + &--mb { + display: flex; + + @include on-table { + display: none; + } + } + + &__span { + font-weight: 500; + font-size: 16px; + display: block; + font-family: Raleway, sans-serif; + + transition: color $transition; + } + + &:hover .icon--lang { + background-color: $main; + } + + &:hover &__span { + color: $main; + } +} diff --git a/src/styles/blocks/logo.scss b/src/styles/blocks/logo.scss new file mode 100644 index 000000000..4694474bf --- /dev/null +++ b/src/styles/blocks/logo.scss @@ -0,0 +1,8 @@ +.logo { + color: $white; + transition: color $transition; + + &:hover { + color: $main; + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..bee745b86 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,215 @@ +.menu { + display: flex; + flex-direction: column; + color: $white; + background-color: $bg; + font-family: Raleway, sans-serif; + + &__close-box { + display: flex; + width: 30px; + height: 30px; + justify-content: center; + align-items: center; + } + + & p { + color: inherit; + } + + &__schedule { + grid-column: 1/-1; + margin-top: 10px; + + @include on-table { + grid-column: 1/3; + margin-top: 30px; + } + + @include on-desktop { + margin-top: 20px; + } + + &-title { + font-weight: 400; + font-size: 14px; + line-height: 140%; + } + + &-text { + font-weight: 600; + font-size: 16px; + line-height: 150%; + } + } + + &__address { + grid-column: 1/-1; + margin-top: 20px; + + @include on-table { + grid-column: 3/6; + margin-top: 30px; + } + + @include on-desktop { + grid-column: 3/7; + margin-top: 20px; + } + + &-title { + font-weight: 400; + font-size: 14px; + line-height: 140%; + } + + &-text { + text-decoration: none; + font-family: Raleway, sans-serif; + font-weight: 600; + font-size: 16px; + line-height: 150%; + color: $white; + + transition: color $transition; + + &:hover { + color: $main; + } + } + } + + &__nav { + grid-column: 1/-1; + margin-top: 40px; + + @include on-table { + margin-top: 50px; + } + + @include on-desktop { + grid-column: 1/7; + margin-top: 70px; + } + + &-list { + display: flex; + flex-direction: column; + gap: 20px; + list-style: none; + font-family: Playfair, sans-serif; + font-weight: 700; + font-size: 20px; + line-height: 150%; + } + + &-link { + position: relative; + display: block; + text-decoration: none; + color: $white; + width: fit-content; + + font-weight: 700; + font-size: 20px; + line-height: 150%; + + transition: color $transition; + + @include on-table { + font-weight: 700; + font-size: 48px; + line-height: 120%; + } + + &::after { + content: ''; + position: absolute; + width: 100%; + left: 0; + bottom: 0; + height: 1px; + background-color: $main; + transform: scaleX(0); + transform-origin: right; + transition: transform $transition; + } + + &:hover { + color: $main; + + &::after { + transform: scaleX(1); + transform-origin: left; + } + } + } + } + + &__container-content { + grid-template-rows: auto; + + @include on-table { + height: 100%; + grid-template-rows: auto auto auto auto 1fr; + } + + @include on-desktop { + height: 100%; + grid-template-rows: auto auto auto 1fr; + } + } + + &__line { + height: 1px; + background-color: $white; + grid-column: 1 / -1; + margin-top: 40px; + + @include on-table { + margin-top: 50px; + } + + @include on-desktop { + grid-column: 1/7; + margin-top: 60px; + } + } + + &__button { + grid-column: 1 / -1; + width: 100%; + margin-top: 40px; + + @include on-table { + margin-top: 50px; + grid-column: 1 / 4; + } + + @include on-desktop { + margin-top: 60px; + } + } + + &__image { + box-sizing: border-box; + background-origin: content-box; + padding-top: 30px; + display: none; + background-image: url('../images/menu/img_menu.png'); + background-repeat: no-repeat; + background-position: bottom; + background-size: contain; + + @include on-table { + height: 100%; + grid-column: 2 / -2; + display: block; + } + + @include on-desktop { + grid-row: 1 / 6; + grid-column: 7 / -1; + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..e1070f7fc --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,29 @@ +.page { + scroll-behavior: smooth; + position: relative; + min-width: 320px; + font-family: 'Playfair Display', serif; + color: $black; + + &__body { + background: $white; + } + + &:has(&__menu:target) { + overflow: hidden; + } + + &__menu { + position: fixed; + inset: 0; + opacity: 0; + + transition: transform $transition, opacity $transition; + transform: translateY(-100%); + + &:target { + opacity: 1; + transform: translateY(0); + } + } +} diff --git a/src/styles/blocks/sections/exhibition.scss b/src/styles/blocks/sections/exhibition.scss new file mode 100644 index 000000000..38be20d98 --- /dev/null +++ b/src/styles/blocks/sections/exhibition.scss @@ -0,0 +1,92 @@ +.current-exhibitions { + margin-top: 90px; + + &__exhibition { + margin-top: 60px; + grid-column: 1 / -1; + + @include on-table { + margin-top: 70px; + + grid-column: 3 span; + } + + @include on-desktop { + grid-column: 6 span; + } + } +} + +.exhibition { + display: flex; + flex-direction: column; + justify-content: start; + + &__image-wrapper { + width: 100%; + overflow: hidden; + } + + &__image { + display: block; + width: 100%; + object-fit: cover; + object-position: center; + + transition: transform $transition; + + &:hover { + transform: scale(1.05); + } + } + + &__date { + display: block; + margin-top: 20px; + color: $main; + + @include on-table { + margin-top: 30px; + } + + @include on-desktop { + margin-top: 20px; + } + } + + &__title { + margin-top: 10px; + } + + &__p { + margin-top: 20px; + + @include on-table { + margin-top: 50px; + } + + @include on-desktop { + margin-top: 20px; + } + } + + &__button-wrapper { + margin-top: 30px; + width: 100%; + + @include on-table { + padding-top: 40px; + margin-top: auto; + bottom: 0; + } + + @include on-desktop { + padding-top: 50px; + width: calc((100% - 30px * 5) / 6 * 3 + (30px * 2)); + } + } + + &__button { + width: 100%; + } +} diff --git a/src/styles/blocks/sections/news.scss b/src/styles/blocks/sections/news.scss new file mode 100644 index 000000000..468b57ea1 --- /dev/null +++ b/src/styles/blocks/sections/news.scss @@ -0,0 +1,68 @@ +.news { + margin-top: 90px; + + &__container { + row-gap: 50px; + padding-block: 60px 30px; + + @include on-table { + padding-block: 70px 0; + } + + @include on-desktop { + padding-top: 50px; + } + } +} + +.new { + grid-column: 1 / -1; + + @include on-table { + grid-column: 3 span; + } + + @include on-desktop { + grid-column: 6 span; + } + + &__image-wrapper { + width: 100%; + overflow: hidden; + } + + &__image { + display: block; + width: 100%; + object-fit: cover; + object-position: center; + + transition: transform $transition; + + &:hover { + transform: scale(1.05); + } + } + + &__title { + line-height: 125%; + } + + &__date { + color: $black; + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 140%; + display: block; + margin-top: 20px; + + @include on-table { + margin-top: 30px; + } + } + + &__p { + margin-top: 20px; + } +} diff --git a/src/styles/blocks/sections/planes.scss b/src/styles/blocks/sections/planes.scss new file mode 100644 index 000000000..8e7a87015 --- /dev/null +++ b/src/styles/blocks/sections/planes.scss @@ -0,0 +1,71 @@ +.planes { + margin-top: 90px; + color: $white; + + @include on-table { + margin-top: 90px; + } + + &__bg { + width: 100%; + background-color: $bg; + padding-block: 50px; + + @include on-table { + padding-block: 80px; + } + + @include on-desktop { + padding-block: 205px; + + background-image: url('../images/planes/bg.png'); + background-size: contain; + background-repeat: no-repeat; + } + } + + &__title { + line-height: 100%; + grid-column: 1/-1; + + @include on-table { + grid-column: 1/ 6; + } + + @include on-desktop { + grid-column: 6/ 13; + } + } + + &__p { + margin-top: 20px; + color: $white; + grid-column: 1/-1; + + @include on-table { + grid-column: 1/ 5; + } + + @include on-desktop { + margin-top: 30px; + grid-column: 6/ 11; + } + } + + &__button { + width: 100%; + margin-top: 40px; + grid-column: 1/-1; + + @include on-table { + margin-top: 60px; + grid-column: 1/ 4; + } + + @include on-desktop { + margin-top: 50px; + + grid-column: 6/ 9; + } + } +} diff --git a/src/styles/blocks/sections/small-blocks.scss b/src/styles/blocks/sections/small-blocks.scss new file mode 100644 index 000000000..225c1dcef --- /dev/null +++ b/src/styles/blocks/sections/small-blocks.scss @@ -0,0 +1,38 @@ +.section-title { + &__title { + grid-column: 1 /-1; + + @include on-table { + grid-column: 1 /-3; + } + + @include on-desktop { + grid-column: 1 /-4; + } + } + + &__button-tb { + display: none; + + width: 100%; + + @include on-table { + grid-column: -3 / -1; + display: flex; + } + + @include on-desktop { + grid-column: -4 / -1; + } + } + + &__button-mb { + margin-top: 30px; + grid-column: 1 / -1; + width: 100%; + + @include on-table { + display: none; + } + } +} diff --git a/src/styles/blocks/sections/subscription.scss b/src/styles/blocks/sections/subscription.scss new file mode 100644 index 000000000..5036389b0 --- /dev/null +++ b/src/styles/blocks/sections/subscription.scss @@ -0,0 +1,103 @@ +@use 'sass:color'; + +.subscription { + padding-block: 120px 80px; + + @include on-table { + padding-block: 160px 128px; + } + + @include on-desktop { + padding-block: 200px; + } + + &__title { + grid-column: 1/-1; + + @include on-desktop { + grid-column: 1/7; + } + } + + &__p { + margin-top: 20px; + grid-column: 1/-1; + + @include on-table { + grid-column: 1/-2; + } + + @include on-desktop { + grid-column: 7/-1; + margin-top: 0; + } + } + + &__field-email { + height: 28px; + margin-top: 50px; + background-color: transparent; + outline: none; + border-width: 0; + border-bottom: 1px solid; + border-color: $black; + + color: $black; + font-weight: 500; + font-size: 16px; + font-family: Raleway, sans-serif; + + grid-column: 1/-1; + + transition: + color $transition, + border-color $transition; + + @include on-table { + grid-column: 1/-3; + } + + @include on-desktop { + grid-column: 1/6; + } + + &::placeholder { + font-family: Raleway, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 150%; + color: color.adjust($black, $alpha: -0.7); + + transition: color $transition; + } + + &:focus { + color: $main; + border-color: $main; + } + + &:hover { + color: $main; + border-color: $main; + + &::placeholder { + color: $main; + } + } + } + + &__button { + margin-top: 30px; + grid-column: 1/-1; + width: 100%; + + @include on-table { + grid-column: 1/-4; + } + + @include on-desktop { + margin-top: 40px; + grid-column: 1/4; + } + } +} diff --git a/src/styles/blocks/sections/upcoming-events.scss b/src/styles/blocks/sections/upcoming-events.scss new file mode 100644 index 000000000..b7b6f4ea2 --- /dev/null +++ b/src/styles/blocks/sections/upcoming-events.scss @@ -0,0 +1,101 @@ +.upcoming-events { + margin-top: 120px; + + @include on-table { + margin-top: 160px; + } + + @include on-desktop { + margin-top: 200px; + } +} + +.event { + &__image-wrapper { + margin-top: 60px; + grid-column: 1/-1; + width: 100%; + overflow: hidden; + + @include on-table { + margin-top: 70px; + grid-column: 3 span; + } + + @include on-desktop { + grid-column: 4 span; + } + } + + &__image { + display: block; + width: 100%; + object-fit: cover; + object-position: center; + + transition: transform $transition; + + &:hover { + transform: scale(1.05); + } + } + + &__text-box { + grid-column: 1/-1; + + @include on-table { + margin-top: 70px; + grid-column: 3 span; + } + + @include on-desktop { + grid-column: 6 span; + } + } + + &__date { + display: block; + margin-top: 20px; + color: $main; + + @include on-table { + margin-top: 0; + } + } + + &__title { + margin-top: 10px; + } + + &__p { + margin-top: 20px; + + @include on-table { + margin-top: 20px; + } + + @include on-desktop { + margin-top: 20px; + } + } + + &__button-wrapper { + margin-top: 30px; + width: 100%; + + @include on-table { + padding-top: 50px; + margin-top: auto; + bottom: 0; + } + + @include on-desktop { + padding-top: 50px; + width: calc((100% - 30px * 5) / 6 * 3 + (30px * 2)); + } + } + + &__button { + width: 100%; + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 000000000..6324bf0a7 --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,19 @@ +.top-bar { + display: flex; + align-items: center; + justify-content: space-between; + height: 80px; + + @include on-desktop { + height: 90px; + } + + &__right-box { + display: flex; + gap: 30px; + + @include on-table { + gap: 40px; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..8bc85ddc0 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,56 @@ +@use 'sass:color'; + @import 'utils'; @import 'fonts'; @import 'typography'; +@import './normalize'; + +@import './blocks/icon'; +@import './blocks/buttons'; +@import './blocks/container'; +@import './blocks/page'; +@import './blocks/header'; +@import './blocks/top-bar'; +@import './blocks/lang'; +@import './blocks/logo'; +@import './blocks/sections/small-blocks'; +@import './blocks/sections/exhibition'; +@import './blocks/sections/upcoming-events'; +@import './blocks/sections/planes'; +@import './blocks/sections/news'; +@import './blocks/sections/subscription'; +@import './blocks/footer'; +@import './blocks/menu'; + +.button-scroll-up { + padding: 5px; + position: fixed; + right: 0; + bottom: 0; + z-index: 2; + margin: 30px 20px; + border-radius: 50%; + border: 2px solid color.adjust($black, $alpha: -0.7); + background-color: color.adjust($bg, $alpha: -0.5); + cursor: pointer; + + transform: translateY(100%); + + transition: background-color $transition, transform $transition; + + @include on-table { + margin: 30px 39px; + } + + @include on-desktop { + margin: 30px 55px; + } + + &:hover { + background-color: $main + } -body { - background: $c-gray; + &-icon { + @include icon(30px, 30px, '../images/icon/scroll-up.svg', $white); + } } diff --git a/src/styles/normalize.scss b/src/styles/normalize.scss new file mode 100644 index 000000000..b1a05bbab --- /dev/null +++ b/src/styles/normalize.scss @@ -0,0 +1,15 @@ +html, +body, +h1, +h2, +h3, +h4, +h5, +h6, +p, +ul, +li { + margin: 0; + padding: 0; + box-sizing: border-box; +} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..7958341f8 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,43 @@ #{$_property}: $_toValue; } } + +@mixin on-table { + @media (min-width: 640px) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: 1280px) { + @content; + } +} + +@mixin icon($width, $height, $url, $color, $hover-color: false) { + display: block; + + width: $width; + height: $height; + + background-color: $color; + + -webkit-mask-image: url(#{$url}); + mask-image: url(#{$url}); + + -webkit-mask-size: contain; + mask-size: contain; + + -webkit-mask-position: center; + mask-position: center; + + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + transition: background-color $transition; + + @if $hover-color { + &:hover { + background-color: $hover-color; + } + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..f5bca7f19 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,6 @@ -$c-gray: #eee; +$main: #cd4d31; +$white: #f1f5f4; +$bg: #3f5252; +$black: #1c1b29; +$gray: #504f5e; +$transition: 0.3s;