diff --git a/README.md b/README.md index afee6c841..0356353c6 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ # 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) @@ -16,8 +17,8 @@ Check font styles. Use [Playfair Display](https://fonts.google.com/specimen/Play 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`). @@ -31,7 +32,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://KazymyrYan.github.io/Museum_2/). 14. Copy `DEMO LINK` to the PR description. > To update you PR repeat steps 7-11. diff --git a/src/images/events-1.png b/src/images/events-1.png new file mode 100644 index 000000000..4e594457f Binary files /dev/null and b/src/images/events-1.png differ diff --git a/src/images/events-2.png b/src/images/events-2.png new file mode 100644 index 000000000..957395545 Binary files /dev/null and b/src/images/events-2.png differ diff --git a/src/images/exibition-1.png b/src/images/exibition-1.png new file mode 100644 index 000000000..1176d6e8a Binary files /dev/null and b/src/images/exibition-1.png differ diff --git a/src/images/exibition-2.png b/src/images/exibition-2.png new file mode 100644 index 000000000..4b2205be3 Binary files /dev/null and b/src/images/exibition-2.png differ diff --git a/src/images/hero.png b/src/images/hero.png new file mode 100644 index 000000000..94e9e2fee Binary files /dev/null and b/src/images/hero.png differ diff --git a/src/images/icons/arrow.svg b/src/images/icons/arrow.svg new file mode 100644 index 000000000..f03cd85c1 --- /dev/null +++ b/src/images/icons/arrow.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/dropdown.svg b/src/images/icons/dropdown.svg new file mode 100644 index 000000000..cba2a18c6 --- /dev/null +++ b/src/images/icons/dropdown.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/facebook.svg b/src/images/icons/facebook.svg new file mode 100644 index 000000000..1cb7bb4ba --- /dev/null +++ b/src/images/icons/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/favicon.png b/src/images/icons/favicon.png new file mode 100644 index 000000000..c8f9149ca Binary files /dev/null and b/src/images/icons/favicon.png differ 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/icon-scroll-up.svg b/src/images/icons/icon-scroll-up.svg new file mode 100644 index 000000000..701b9e4ec --- /dev/null +++ b/src/images/icons/icon-scroll-up.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/images/icons/instagram.svg b/src/images/icons/instagram.svg new file mode 100644 index 000000000..b1d63d9d9 --- /dev/null +++ b/src/images/icons/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/telegram.svg b/src/images/icons/telegram.svg new file mode 100644 index 000000000..5c8590402 --- /dev/null +++ b/src/images/icons/telegram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/twitter.svg b/src/images/icons/twitter.svg new file mode 100644 index 000000000..238247341 --- /dev/null +++ b/src/images/icons/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/logo.svg b/src/images/logo.svg new file mode 100644 index 000000000..a243122cc --- /dev/null +++ b/src/images/logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/menu-img.png b/src/images/menu-img.png new file mode 100644 index 000000000..690870fde Binary files /dev/null and b/src/images/menu-img.png differ diff --git a/src/images/news-1.png b/src/images/news-1.png new file mode 100644 index 000000000..7f57b36f7 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..ed431f0b4 Binary files /dev/null and b/src/images/news-2.png differ diff --git a/src/images/visit-bg.png b/src/images/visit-bg.png new file mode 100644 index 000000000..fe0e4dbb3 Binary files /dev/null and b/src/images/visit-bg.png differ diff --git a/src/index.html b/src/index.html index 8019b83ec..7ac33aba1 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,576 @@ - + + - Title + NAMU + + + + + - -

Hello Mate Academy

+ + + +
+
+
+
+ + + + + +
+
+
+

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

+

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

+

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

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

10.08 - 10.10

+
+
+
+
+ hero__img +
+
+
+
+
+ + + + + +
+ +
+
+
+

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

+ +
+ picture +

11.07 - 22.09

+

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

+

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

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

Діє постійно

+

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

+

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

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

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

+ +
+ picture +
+

14.08 о 13:00

+

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

+

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

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

16.08 о 13:00

+

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

+

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

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

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

+

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

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

Новини

+ +
+ picture +

9 серпня 2019

+

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

+

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

+
+ +
+ picture +

9 серпня 2019

+

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

+

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

+
+ + + Усі новини + arrow + +
+
+
+ + + + +
+ + + + diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..1338fe410 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,7 @@ 'use strict'; + +document.querySelector('.form').addEventListener('submit', e => { + e.preventDefault(); + e.target.reset(); + window.scrollTo(0, 0); +}); 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 index 1837eb46e..81721ad7c 100644 --- a/src/styles/_typography.scss +++ b/src/styles/_typography.scss @@ -1,3 +1,3 @@ -h1 { - @extend %h1; -} +// h1 { +// @extend %h1; +// } diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 000000000..73223808f --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,7 @@ +.button { + @include btn-style; + + &__section { + @include secondary-btn-style; + } +} diff --git a/src/styles/blocks/card.scss b/src/styles/blocks/card.scss new file mode 100644 index 000000000..9facd13c7 --- /dev/null +++ b/src/styles/blocks/card.scss @@ -0,0 +1,107 @@ +.card { + // transition: all $animation-speed; + + &__img { + display: block; + + width: 100%; + height: 356px; + margin-bottom: 20px; + + object-fit: cover; + + @include animation-pulse; + @include shadow; + + @include on-tablet { + height: 420px; + margin-bottom: 30px; + } + + @include on-desktop { + height: 484px; + margin-bottom: 20px; + } + } + + &__data { + margin: 0; + margin-bottom: 10px; + color: $color-orange; + + @include raleway-text-styles; + + &--news { + color: $color-black; + } + } + + &__title { + margin: 0; + margin-bottom: 20px; + + font-size: 20px; + font-weight: 700; + line-height: 125%; + color: $color-black; + + @include on-tablet { + min-height: 60px; + font-size: 24px; + } + } + + &__subtitle { + margin: 0; + margin-bottom: 30px; + color: $color-gray; + + @include raleway-text-styles; + + @include on-tablet { + min-height: 96px; + margin-bottom: 40px; + } + + @include on-desktop { + margin-bottom: 50px; + } + + &--news { + @include on-tablet { + height: auto; + min-height: 0; + margin-bottom: 0; + } + } + } +} + +.event--card { + @include grid-page; + + &__img { + grid-column: span 2; + + @include on-tablet { + grid-column: 1 / 4; + } + + @include on-desktop { + grid-column: 1 / 5; + } + } + + &__content { + grid-column: span 2; + + @include on-tablet { + grid-column: 4 / 7; + grid-row: 1; + } + + @include on-desktop { + grid-column: 5 / 12; + } + } +} diff --git a/src/styles/blocks/container.scss b/src/styles/blocks/container.scss new file mode 100644 index 000000000..07193fb3d --- /dev/null +++ b/src/styles/blocks/container.scss @@ -0,0 +1,12 @@ +.container { + margin-inline: 20px; + + @include on-tablet { + margin-inline: 39px; + } + + @include on-desktop { + max-width: 1280px; + margin-inline: auto; + } +} diff --git a/src/styles/blocks/events.scss b/src/styles/blocks/events.scss new file mode 100644 index 000000000..43dc593b6 --- /dev/null +++ b/src/styles/blocks/events.scss @@ -0,0 +1,11 @@ +.events { + margin-bottom: 90px; + + @include on-tablet { + margin-bottom: 100px; + } + + @include on-desktop { + margin-bottom: 110px; + } +} diff --git a/src/styles/blocks/exibitions.scss b/src/styles/blocks/exibitions.scss new file mode 100644 index 000000000..63879ab5b --- /dev/null +++ b/src/styles/blocks/exibitions.scss @@ -0,0 +1,14 @@ +.exibitions { + margin-top: 90px; + margin-bottom: 120px; + + @include on-tablet { + margin-top: 100px; + margin-bottom: 160px; + } + + @include on-desktop { + margin-top: 110px; + margin-bottom: 200px; + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..6ec852fab --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,150 @@ +.footer { + padding-top: 34px; + padding-bottom: 30px; + background-color: $color-bg; + + &__cards-wrapper { + @include grid-page; + + grid-gap: 50px; + + @include on-tablet { + grid-template-columns: repeat(6, 1fr); + } + + @include on-desktop { + @include grid-page; + } + } + + &__card { + grid-column: span 2; + + @include on-desktop { + grid-column: span 4; + } + } + + &__title { + margin: 0; + margin-bottom: 10px; + + font-size: 18px; + font-weight: 700; + line-height: 150%; + color: $color-white; + + @include on-tablet { + margin-bottom: 30px; + font-size: 20px; + } + + &--link { + @include hover(font-weight, 900); + } + } + + &__list { + gap: 5px; + margin: 0; + padding: 0; + list-style: none; + + &--social-links { + display: flex; + gap: 20px; + margin-top: 30px; + + @include on-tablet { + margin-top: 50px; + } + } + } + + &__item { + @include raleway-text-styles; + + color: $color-white; + text-decoration: none; + &--a { + color: $color-white; + text-decoration: none; + + @include underline; + } + } + + &__menu { + &--title { + margin: 0; + margin-bottom: 10px; + + font-size: 20px; + font-weight: 700; + color: $color-white; + + @include on-tablet { + margin-bottom: 30px; + } + } + + &--nav { + @include flex-column; + + gap: 5px; + margin: 0; + padding: 0; + list-style: none; + + @include on-tablet { + gap: 10px; + } + } + + &--link { + @include raleway-text-styles; + + height: 30px; + color: $color-white; + text-decoration: none; + + @include hover(font-weight, 700); + } + + &--link-title { + font-family: inherit; + } + } + + &__bottom { + display: flex; + align-items: flex-end; + justify-content: space-between; + margin-top: 60px; + + &--content { + display: flex; + gap: 22px; + + @include on-desktop { + gap: 102px; + } + } + + &--copyright, + &--terms { + margin: 0; + + @include font-raleway; + + font-size: 14px; + line-height: 140%; + color: $color-white; + text-decoration: none; + } + + &--terms { + @include underline; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..e8c9271ab --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,10 @@ +.header { + background-color: $color-bg; + + &__content { + overflow: hidden; + height: 100vh; + + @include flex-column; + } +} diff --git a/src/styles/blocks/hero.scss b/src/styles/blocks/hero.scss new file mode 100644 index 000000000..325fe99e0 --- /dev/null +++ b/src/styles/blocks/hero.scss @@ -0,0 +1,121 @@ +.hero { + display: flex; + flex: 1; + flex-direction: column; + height: 100%; + + @include on-desktop { + @include grid-page; + } + + &__content { + // flex: 0 0 auto; + display: flex; + flex: 1; + flex-direction: column; + + @include on-desktop { + grid-column: 1 / 7; + } + } + + &__data { + margin: 50px 0 10px; + font-size: 14px; + line-height: 140%; + color: $color-white; + + @include font-raleway; + + @include on-tablet { + margin-top: 100px; + } + } + + &__title { + margin: 0 0 30px; + font-size: 48px; + font-weight: 700; + color: $color-white; + + @include on-tablet { + margin-bottom: 20px; + font-size: 72px; + } + } + + &__subtitle { + margin: 0 0 30px; + color: $color-white; + + @include raleway-text-styles; + + @include on-tablet { + margin-bottom: 50px; + } + } + + &__button { + margin-bottom: 40px; + + @include on-desktop { + margin-bottom: auto; + } + } + + &__img-wrap { + overflow: hidden; + display: flex; + flex: 1 1 auto; + align-items: flex-end; + justify-content: center; + + @include on-desktop { + grid-column: 7 / -1; + } + } + + &__img { + display: block; + + width: auto; + max-width: 100%; + height: auto; + max-height: 100%; + + object-fit: contain; + } + + &__decor { + display: none; + + @include on-desktop { + display: flex; + gap: 20px; + align-items: center; + + margin-top: auto; + margin-bottom: 50px; + } + + &--data { + width: 100px; + height: 18px; + margin: 0; + + font-size: 14px; + font-weight: 700; + line-height: 125%; + color: $color-white; + + opacity: 70%; + } + + &--line { + width: 100%; + height: 1px; + border: none; + background-color: $color-white; + } + } +} diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss new file mode 100644 index 000000000..575f8427f --- /dev/null +++ b/src/styles/blocks/icon.scss @@ -0,0 +1,52 @@ +.icon { + display: block; + + width: 20px; + height: 20px; + + background-position: center; + background-size: cover; + + @include icon-pulse; + + &__burger { + width: 25px; + background-image: url(../images/icons/icon-burger.svg); + } + + &__close { + width: 22px; + height: 22px; + background-image: url(../images/icons/icon-close.svg); + } + + &__scroll { + width: 30px; + height: 30px; + background-image: url(../images/icons/icon-scroll-up.svg); + } + + &__facebook { + width: 20px; + height: 20px; + background-image: url(../images/icons/facebook.svg); + } + + &__x { + width: 20px; + height: 20px; + background-image: url(../images/icons/twitter.svg); + } + + &__telegram { + width: 20px; + height: 20px; + background-image: url(../images/icons/telegram.svg); + } + + &__instagram { + width: 20px; + height: 20px; + background-image: url(../images/icons/instagram.svg); + } +} diff --git a/src/styles/blocks/main.scss b/src/styles/blocks/main.scss new file mode 100644 index 000000000..9bbb3f646 --- /dev/null +++ b/src/styles/blocks/main.scss @@ -0,0 +1,3 @@ +.main { + display: grid; +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..67c6e0046 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,132 @@ +.menu { + @include flex-column; + + overflow: hidden; + height: 100vh; + + &__top { + flex: 0 0 auto; + } + + &__wrapper { + @include flex-column; + + overflow: hidden; + flex: 1 1 auto; + + @include on-desktop { + @include grid-page; + } + } + + &__bottom { + flex: 0 0 auto; + gap: 40px; + margin-top: 10px; + + @include flex-column; + + @include on-tablet { + gap: 50px; + } + + @include on-desktop { + grid-column: 1 / 7; + } + } + + &__info { + @include flex-column; + + gap: 20px; + color: $color-white; + + @include font-raleway; + + @include on-tablet { + flex-direction: row; + gap: 123px; + } + } + + &__subtitle { + margin: 0; + font-size: 14px; + font-weight: 400; + line-height: 140%; + } + + &__text { + margin: 0; + font-size: 16px; + font-weight: 600; + line-height: 150%; + } + + &__list { + @include flex-column; + + gap: 20px; + margin: 0; + padding: 0; + list-style: none; + + @include on-tablet { + gap: 30px; + } + + @include on-desktop { + gap: 60px; + } + } + + &__link { + font-size: 20px; + font-weight: 700; + line-height: 150%; + color: $color-white; + text-decoration: none; + + @include underline; + @include hover(font-weight, 900); + + @include on-tablet { + font-size: 48px; + line-height: 120%; + } + } + + &__decore-line { + height: 1px; + margin-bottom: 40px; + border: none; + background-color: $color-white; + } + + &__img-div { + display: none; + + @include on-tablet { + overflow: hidden; + display: flex; + flex: 1 1 auto; + align-items: flex-end; + justify-content: center; + } + + @include on-desktop { + grid-column: 7 / -1; + } + } + + &__img { + display: block; + + width: auto; + max-width: 100%; + height: auto; + max-height: 100%; + + object-fit: contain; + } +} diff --git a/src/styles/blocks/news.scss b/src/styles/blocks/news.scss new file mode 100644 index 000000000..305312dcc --- /dev/null +++ b/src/styles/blocks/news.scss @@ -0,0 +1,11 @@ +.news { + margin-bottom: 120px; + + @include on-tablet { + margin-bottom: 160px; + } + + @include on-desktop { + margin-bottom: 200px; + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..5212ba831 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,35 @@ +.page { + scroll-behavior: smooth; + font-family: 'Playfair Display', serif; + + &__body { + min-width: 320px; + max-width: 1440px; + margin: 0; + margin-right: auto; + margin-left: auto; + + background-color: $color-white; + } + + &__menu { + pointer-events: none; + + position: fixed; + top: 0; + right: 0; + left: 0; + transform: translateX(-100%); + + opacity: 0; + background-color: $color-bg; + + transition: all $animation-speed; + + &:target { + pointer-events: all; + transform: translateX(0); + opacity: 1; + } + } +} diff --git a/src/styles/blocks/section.scss b/src/styles/blocks/section.scss new file mode 100644 index 000000000..9ce042fd6 --- /dev/null +++ b/src/styles/blocks/section.scss @@ -0,0 +1,87 @@ +.section { + &__content { + @include grid-page; + + row-gap: $grid-gap-mobile; + + @include on-desktop { + row-gap: $grid-gap-tablet; + } + } + + &__title { + grid-column: 1 / -1; + + margin: 0; + + font-size: 28px; + font-weight: 700; + line-height: 125%; + color: $color-black; + + @include on-tablet { + grid-column: 1 / 5; + grid-row: 1; + font-size: 40px; + } + + @include on-desktop { + grid-column: 1 / 9; + grid-row: 1; + font-size: 48px; + line-height: 120%; + } + } + + &__card { + grid-column: span 2; + + @include on-tablet { + grid-column: span 3; + } + + @include on-desktop { + grid-column: span 6; + } + } + + &__button { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 5 / 7; + grid-row: 1; + justify-self: end; + } + + @include on-desktop { + grid-column: 9 / 13; + grid-row: 1; + justify-self: end; + } + } +} + +.section--event { + &__content { + row-gap: $grid-gap-mobile; + + @include grid-page; + + @include on-tablet { + row-gap: $grid-gap-tablet; + } + } + + &__card { + grid-column: span 2; + + @include on-tablet { + grid-column: span 6; + } + + @include on-desktop { + grid-column: span 10; + } + } +} diff --git a/src/styles/blocks/subscribe.scss b/src/styles/blocks/subscribe.scss new file mode 100644 index 000000000..bc31c5fb7 --- /dev/null +++ b/src/styles/blocks/subscribe.scss @@ -0,0 +1,132 @@ +.subscribe { + margin-bottom: 80px; + + @include on-tablet { + margin-bottom: 128px; + } + + @include on-desktop { + margin-bottom: 200px; + } + + &__content { + @include on-desktop { + @include grid-page; + + row-gap: 50px; + } + } + + &__title { + margin: 0; + margin-bottom: 20px; + + font-size: 28px; + font-weight: 700; + line-height: 125%; + color: $color-black; + + @include on-tablet { + font-size: 40px; + } + + @include on-desktop { + grid-column: 1 / 7; + + max-width: 570px; + margin-bottom: 0; + + font-size: 48px; + line-height: 120%; + } + } + + &__subtitle { + margin: 0; + margin-bottom: 50px; + color: $color-black; + + @include raleway-text-styles; + + @include on-tablet { + max-width: 570px; + } + + @include on-desktop { + grid-column: 7 / 13; + margin-bottom: 0; + } + } + + &__form--wrapper { + @include on-desktop { + grid-column: 1 / 7; + grid-row: 2; + } + } + + &__form { + &--email { + width: 100%; + margin-bottom: 30px; + padding: 0; + border: none; + border-bottom: 1px solid $color-black; + + color: $color-black; + + background-color: $color-white; + + @include raleway-text-styles; + + @include on-tablet { + max-width: 450px; + } + + @include on-desktop { + width: 470px; + max-width: none; + } + + &::placeholder { + color: $color-black; + + @include raleway-text-styles; + } + + &:hover { + border-color: $color-orange; + color: $color-orange; + + &::placeholder { + color: $color-orange; + } + } + + &:focus { + border-color: $color-orange; + color: $color-orange; + outline: none; + + &::placeholder { + color: transparent; + } + } + + &:valid { + border-color: $color-black; + font-weight: 700; + color: $color-black; + } + } + } + + &__btn { + @include btn-style; + + cursor: pointer; + width: 100%; + height: 58px; + padding: 0; + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 000000000..39fd5d78b --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,75 @@ +.top-bar { + display: flex; + align-items: center; + justify-content: space-between; + + height: 40px; + padding: 20px 0; + + &__logo { + order: 0; + width: 123px; + height: 40px; + + @include blink; + } + + &__lang-btn { + cursor: pointer; + + display: flex; + gap: 5px; + align-items: center; + order: 1; + + margin-inline: auto 30px; + border: none; + + color: $color-white; + + background: transparent; + + @include hover(transform, scale(1.1)); + + @include on-tablet { + order: 2; + margin-inline: 0; + } + + &--header { + display: none; + + @include on-tablet { + display: flex; + } + } + + &--text { + font-size: 16px; + font-weight: 500; + line-height: 150%; + text-transform: uppercase; + + @include font-raleway; + } + + &--icon { + display: block; + + width: 8px; + height: 4px; + + background-position: center; + background-size: cover; + } + } + + &__icon { + order: 2; + + @include on-tablet { + order: 1; + margin-inline: auto 44px; + } + } +} diff --git a/src/styles/blocks/visit.scss b/src/styles/blocks/visit.scss new file mode 100644 index 000000000..99bb68824 --- /dev/null +++ b/src/styles/blocks/visit.scss @@ -0,0 +1,80 @@ +.visit { + margin-bottom: 90px; + background-color: $color-bg; + + @include on-tablet { + margin-bottom: 120px; + } + + @include on-desktop { + margin-bottom: 110px; + background-image: url(../images/visit-bg.png); + background-repeat: no-repeat; + background-position: left; + } + + &__wrapper { + @include on-desktop { + @include grid-page; + } + } + + &__content { + @include on-desktop { + grid-column: 6 / 13; + } + } + + &__title { + margin: 0; + margin-top: 50px; + margin-bottom: 20px; + + font-size: 38px; + font-weight: 700; + line-height: 100%; + color: $color-white; + + @include on-tablet { + max-width: 570px; + margin-bottom: 80px; + font-size: 62px; + } + + @include on-desktop { + max-width: none; + margin-top: 205px; + margin-bottom: 20px; + font-size: 80px; + } + } + + &__subtitle { + margin: 0; + margin-bottom: 40px; + color: $color-white; + + @include raleway-text-styles; + + @include on-tablet { + max-width: 450px; + margin-bottom: 60px; + } + + @include on-desktop { + max-width: 470px; + } + } + + &__button { + margin-bottom: 50px; + + @include on-tablet { + margin-bottom: 80px; + } + + @include on-desktop { + margin-bottom: 205px; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..fa5f2fa4c 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,19 @@ @import 'utils'; -@import 'fonts'; @import 'typography'; - -body { - background: $c-gray; -} +@import './blocks/header'; +@import './blocks/page'; +@import './blocks/container'; +@import './blocks/top-bar'; +@import './blocks/icon'; +@import './blocks/hero'; +@import './blocks/button'; +@import './blocks/menu'; +@import './blocks/footer'; +@import './blocks/visit'; +@import './blocks/main'; +@import './blocks/section'; +@import './blocks/card'; +@import './blocks/exibitions'; +@import './blocks/events'; +@import './blocks/news'; +@import './blocks/subscribe'; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index d7201e7b3..1be6fbea4 100644 --- a/src/styles/utils/_extends.scss +++ b/src/styles/utils/_extends.scss @@ -1,4 +1,4 @@ -%h1 { - font-family: Roboto, sans-serif; - font-weight: 400; -} +// %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..6b518ca21 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,202 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin font-raleway { + font-family: Raleway, sans-serif; +} + +@mixin grid-page { + display: grid; + grid-template-columns: repeat($grid-columns-mobile, 1fr); + column-gap: $grid-gap-mobile; + + @include on-tablet { + grid-template-columns: repeat($grid-columns-tablet, 1fr); + column-gap: $grid-gap-tablet; + } + + @include on-desktop { + grid-template-columns: repeat($grid-columns-desctop, 1fr); + } +} + +@mixin btn-style { + display: flex; + align-items: center; + justify-content: center; + + max-width: 278px; + height: 58px; + border: 1px solid $color-orange; + + font-size: 16px; + font-weight: 600; + line-height: 100%; + color: $color-white; + text-decoration: none; + + background-color: $color-orange; + + @include font-raleway; + + &:hover { + border-color: $color-btn-hover; + background-color: $color-btn-hover; + } + + &:active { + border-color: $color-btn-active; + background-color: $color-btn-active; + } + + @include on-tablet { + max-width: 328px; + } + + @include on-desktop { + width: 268px; + } +} + +@mixin secondary-btn-style { + @include btn-style; + + gap: 8px; + height: 58px; + color: $color-orange; + background-color: $color-white; + + &:hover { + border-color: $color-btn-hover; + color: $color-btn-hover; + background-color: $color-white; + } + + &:active { + border-color: $color-btn-active; + color: $color-btn-active; + } + + @include on-tablet { + width: 208px; + } + + @include on-desktop { + width: 268px; + } +} + +@mixin flex-column { + display: flex; + flex-direction: column; +} + +@mixin raleway-text-styles { + font-size: 16px; + font-weight: 400; + line-height: 150%; + + @include font-raleway; +} + +@mixin hover($property, $toValue) { + transition: #{$property} $animation-speed; + &:hover { + #{$property}: $toValue; + } +} + +@mixin underline { + position: relative; + + &::after { + content: ''; + + position: absolute; + bottom: -4px; + left: 0; + transform-origin: left; + transform: scale(0); + + display: block; + + width: 100%; + height: 1px; + + background-color: $color-white; + + transition: transform ($animation-speed * 2); + } + &:hover::after { + transform: scaleX(1); + } +} + +@mixin animation-pulse { + &:hover { + animation: pulse ($animation-speed * 2) infinite; + } +} + +@keyframes pulse { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.02); + } + 100% { + transform: scale(1); + } +} + +@mixin shadow { + transition: all $animation-speed; + + &:hover { + box-shadow: 0 0 20px $color-orange; + } +} + +@mixin icon-pulse { + &:hover { + animation: icon-pulse ($animation-speed * 3) infinite; + } +} + +@keyframes icon-pulse { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.2); + } + 100% { + transform: scale(1); + } +} + +@mixin blink { &:hover { - #{$_property}: $_toValue; + animation: blink ($animation-speed * 4) infinite ease-in-out; + } +} + +@keyframes blink { + 0%, + 100% { + opacity: 1; + } + 50% { + opacity: 0.5; } } diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..b17f714ac 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,21 @@ -$c-gray: #eee; +$tablet-min-width: 640px; +$desktop-min-width: 1280px; + +// grid +$grid-columns-mobile: 2; +$grid-columns-tablet: 6; +$grid-columns-desctop: 12; +$grid-gap-mobile: 20px; +$grid-gap-tablet: 30px; + +// colors +$color-bg: #3f5252; +$color-white: #f1f5f4; +$color-orange: #cd4d31; +$color-black: #1c1b29; +$color-gray: #504f5e; +$color-btn-hover: #af3419; +$color-btn-active: #ea340d; + +// animations +$animation-speed: 0.3s;