diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template new file mode 100644 index 000000000..8b5743ecb --- /dev/null +++ b/.github/workflows/test.yml-template @@ -0,0 +1,29 @@ +name: Test + +on: + pull_request: + branches: [ master ] + +jobs: + build: + + runs-on: ubuntu-latest + + strategy: + matrix: + node-version: [20.x] + + steps: + - uses: actions/checkout@v2 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v1 + with: + node-version: ${{ matrix.node-version }} + - run: npm install + - run: npm test + - name: Upload HTML report(backstop data) + if: ${{ always() }} + uses: actions/upload-artifact@v2 + with: + name: report + path: backstop_data diff --git a/README.md b/README.md index afee6c841..ecd97870b 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://notbelievable.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..448c8d160 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,407 @@ - + - Title + Museum2 + + + + + + + - -

Hello Mate Academy

- + +
+ + + logo-icon + + +
+ UAua-arrow + + + +
+ +
+ +
+
+

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

+

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

+

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

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

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

+ +
+ card-img +

11.07 - 22.09

+

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

+

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

+ Купити квиток +
+ +
+ card-img +

Діє постійно

+

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

+

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

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

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

+ +
+ card-img +
+

14.08 о 13:00

+

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

+

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

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

16.08 о 13:00

+

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

+

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

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

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

+

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

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

Новини

+ +
+ foto-img + +

9 серпня 2019

+

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

+

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

+
+ +
+ foto-img + +

9 серпня 2019

+

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

+

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

+
+ + Усі новиниarrow-img + +
+ + + + + + + + diff --git a/package-lock.json b/package-lock.json index 5d3b07d5a..6b9fd05c4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,7 @@ "@mate-academy/eslint-config": "latest", "@mate-academy/jest-mochawesome-reporter": "^1.0.0", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.1", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "cypress": "^13.13.0", "eslint": "^8.57.0", @@ -1875,10 +1875,11 @@ "dev": true }, "node_modules/@mate-academy/scripts": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.2.tgz", - "integrity": "sha512-gUXFdqqOfYzF9R3RSx2pCa5GLdOkxB9bFbF+dpUpzucdgGAANqOGdqpmNnMj+e3xA9YHraUWq3xo9cwe5vD9pQ==", + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.3.tgz", + "integrity": "sha512-a07wHTj/1QUK2Aac5zHad+sGw4rIvcNl5lJmJpAD7OxeSbnCdyI6RXUHwXhjF5MaVo9YHrJ0xVahyERS2IIyBQ==", "dev": true, + "license": "MIT", "dependencies": { "@octokit/rest": "^17.11.2", "@types/get-port": "^4.2.0", diff --git a/package.json b/package.json index 9e79dfff1..4cd3200dd 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "@mate-academy/eslint-config": "latest", "@mate-academy/jest-mochawesome-reporter": "^1.0.0", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.1", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "cypress": "^13.13.0", "eslint": "^8.57.0", diff --git a/src/images/Group.png b/src/images/Group.png new file mode 100644 index 000000000..1b242bbeb Binary files /dev/null and b/src/images/Group.png differ diff --git a/src/images/NAMU-1.png b/src/images/NAMU-1.png new file mode 100644 index 000000000..607a06f3e Binary files /dev/null and b/src/images/NAMU-1.png differ diff --git a/src/images/UA.png b/src/images/UA.png new file mode 100644 index 000000000..72465f516 Binary files /dev/null and b/src/images/UA.png differ diff --git a/src/images/close.png b/src/images/close.png new file mode 100644 index 000000000..594896b34 Binary files /dev/null and b/src/images/close.png differ diff --git a/src/images/f.png b/src/images/f.png new file mode 100644 index 000000000..d0e852bb0 Binary files /dev/null and b/src/images/f.png differ diff --git a/src/images/foto1.png b/src/images/foto1.png new file mode 100644 index 000000000..69d893da1 Binary files /dev/null and b/src/images/foto1.png differ diff --git a/src/images/foto2.png b/src/images/foto2.png new file mode 100644 index 000000000..1b0e405be Binary files /dev/null and b/src/images/foto2.png differ diff --git a/src/images/foto3.png b/src/images/foto3.png new file mode 100644 index 000000000..0c1858aa6 Binary files /dev/null and b/src/images/foto3.png differ diff --git a/src/images/foto4.png b/src/images/foto4.png new file mode 100644 index 000000000..111ac2a51 Binary files /dev/null and b/src/images/foto4.png differ diff --git a/src/images/image-angel.png b/src/images/image-angel.png new file mode 100644 index 000000000..1a32d5f1d Binary files /dev/null and b/src/images/image-angel.png differ diff --git a/src/images/image-poet.png b/src/images/image-poet.png new file mode 100644 index 000000000..8feb978af Binary files /dev/null and b/src/images/image-poet.png differ diff --git a/src/images/img-1.png b/src/images/img-1.png new file mode 100644 index 000000000..a062a32e8 Binary files /dev/null and b/src/images/img-1.png differ diff --git a/src/images/img_07.png b/src/images/img_07.png new file mode 100644 index 000000000..59241bfb6 Binary files /dev/null and b/src/images/img_07.png differ diff --git a/src/images/img_menu.png b/src/images/img_menu.png new file mode 100644 index 000000000..4e549aa7c Binary files /dev/null and b/src/images/img_menu.png differ diff --git a/src/images/instagram.png b/src/images/instagram.png new file mode 100644 index 000000000..6fa66cfae Binary files /dev/null and b/src/images/instagram.png differ diff --git a/src/images/menu.png b/src/images/menu.png new file mode 100644 index 000000000..866ab44e9 Binary files /dev/null and b/src/images/menu.png differ diff --git a/src/images/scroll-up.png b/src/images/scroll-up.png new file mode 100644 index 000000000..bab158f75 Binary files /dev/null and b/src/images/scroll-up.png differ diff --git a/src/images/telegram.png b/src/images/telegram.png new file mode 100644 index 000000000..f704f9e06 Binary files /dev/null and b/src/images/telegram.png differ diff --git a/src/images/twitter.png b/src/images/twitter.png new file mode 100644 index 000000000..44e620535 Binary files /dev/null and b/src/images/twitter.png differ diff --git a/src/images/ua-Union.png b/src/images/ua-Union.png new file mode 100644 index 000000000..b79fbd71e Binary files /dev/null and b/src/images/ua-Union.png differ diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..583a43b19 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,39 @@ 'use strict'; + +document.addEventListener('DOMContentLoaded', () => { + const asideMenu = document.querySelector('.aside'); + const burgerBtn = document.querySelector('.top-bar__menu-btn'); + const asideBtn = document.querySelector('.aside__menu-btn'); + + if (asideBtn && asideMenu && burgerBtn) { + burgerBtn.addEventListener('click', () => { + asideMenu.classList.add('aside--open'); + document.body.style.overflow = 'hidden'; + }); + + asideBtn.addEventListener('click', () => { + asideMenu.classList.remove('aside--open'); + document.body.style.overflow = ''; + }); + } + + const asideMenuLinks = document.querySelectorAll('.nav__link'); + + asideMenuLinks.forEach(link => { + link.addEventListener('click', () => { + if (asideMenu) { + asideMenu.classList.remove('aside--open'); + } + document.body.style.overflow = ''; + }); + }); + + const subscribeForm = document.querySelector('.subscribe-form'); + + if (subscribeForm) { + subscribeForm.addEventListener('submit', function(event) { + event.preventDefault(); + subscribeForm.reset(); + }); + } +}); 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/aside.scss b/src/styles/aside.scss new file mode 100644 index 000000000..63ad18439 --- /dev/null +++ b/src/styles/aside.scss @@ -0,0 +1,204 @@ +@use './utils/vars' as *; +@use './utils/mixins' as *; + +.aside { + box-sizing: border-box; + position: fixed; + z-index: 10; + top: 0; + left: 0; + width: 100%; + background-color: $c-back; + transform: translateX(-200%); + transition: all 0.3s ease-in-out; + + display: flex; + flex-direction: column; + max-height: 100vh; + height: 100%; + overflow-y: auto; + + @include desktop { + overflow-y: hidden; + } + + &__top-bar { + @include padd-inl; + } + + &--open { + transform: translateX(0); + } + + &-container { + @include padd-inl; + + box-sizing: border-box; + height: 100%; + width: 100%; + + @include tablet { + padding-top: 30px; + + @include grid; + } + + @include desktop { + padding-inline: 55px 0; + padding-top: 20px; + } + } + + &__back { + display: none; + width: 100%; + max-height: 700px; + + @include tablet { + display: block; + grid-column: 2 / 6; + } + + @include desktop { + grid-column: 7 / span 6; + } + + &-img { + display: block; + height: 100%; + width: 100%; + object-fit: contain; + object-position: center; + } + } + + &__link-btn { + margin-top: 40px; + + @include tablet { + max-width: 330px; + margin-top: 50px; + } + + @include desktop { + max-width: 270px; + margin-top: 60px; + } + } + + &__menu-btn { + background-image: url(../images/close.png); + background-size: 22px 22px; + + @include tablet { + order: -1; + } + } + + &__ua-link { + display: flex; + } + + &__schedule { + @include font-r; + + line-height: 140%; + color: $c-wh; + margin-block: 10px 20px; + + &-time { + font-weight: 600; + font-size: 16px; + line-height: 150%; + } + + @include tablet { + grid-column: span 2; + margin: 0; + } + } + + &__address { + @include font-r; + + color: $c-wh; + margin: 0; + + &-link { + color: inherit; + font-size: 16px; + font-weight: 600; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } + + @include tablet { + grid-column: 3 / span 5; + margin: 0; + } + + @include tablet { + grid-column: 3 / span 3; + margin: 0; + } + } + + &__div { + display: block; + grid-column: span 6; + + &-item { + display: flex; + flex-direction: column; + + @include tablet { + width: 100%; + flex-direction: row; + align-items: center; + gap: 123px; + } + + @include desktop { + gap: 83px; + } + } + } + + .nav { + padding-block: 40px; + margin: 0; + align-self: flex-start; + padding-inline: 0; + list-style: none; + + display: flex; + flex-direction: column; + gap: 20px; + + border-bottom: 1px solid $c-wh; + width: 100%; + + @include tablet { + font-size: 48px; + padding-block: 20px 50px; + } + + @include desktop { + padding-block: 70px 60px; + gap: 60px; + } + + &__link { + text-decoration: none; + color: $c-wh; + + &:hover { + text-decoration: underline; + text-decoration-thickness: 2px; + } + } + } +} diff --git a/src/styles/base.scss b/src/styles/base.scss new file mode 100644 index 000000000..bf25c5344 --- /dev/null +++ b/src/styles/base.scss @@ -0,0 +1,53 @@ +@use './utils/vars' as *; +@use './utils/mixins' as *; + +.html { + font-family: 'Playfair Display', sans-serif; + font-size: 20px; + scroll-behavior: smooth; + font-weight: 700; +} + +.body { + margin: 0; +} + +.link-btn { + @include font-r; + + display: flex; + justify-content: center; + align-items: center; + height: 60px; + font-size: 16px; + line-height: 100%; + text-decoration: none; + color: $c-wh; + background-color: $c-red; + + @include desktop { + max-width: 270px; + } + + @include color( + $hover-bg: $c-back-red, + $disabled-bg: $c-dissabled-red, + $pressed-bg: $c-press-red + ); +} + +.title { + font-size: 28px; + line-height: 125%; + margin: 0; + + @include tablet { + font-size: 40px; + grid-column: 1 / 5; + } + + @include desktop { + font-size: 48px; + grid-column: 1 / 7; + } +} diff --git a/src/styles/cards.scss b/src/styles/cards.scss new file mode 100644 index 000000000..43fd1ee6b --- /dev/null +++ b/src/styles/cards.scss @@ -0,0 +1,111 @@ +@use './utils/vars' as *; +@use './utils/mixins' as *; + +.card { + box-sizing: border-box; + display: flex; + flex-direction: column; + padding-top: 60px; + + @include tablet { + padding-top: 40px; + } + + &-img { + display: block; + min-height: 356px; + width: 100%; + object-fit: cover; + + @include tablet { + min-height: 420px; + } + + @include desktop { + min-height: 484px; + object-fit: contain; + + @include hover($scale: 1.04); + } + } + + &-date { + @include font-r; + + font-size: 16px; + color: $c-red; + margin-block: 20px 10px; + } + + &-title { + line-height: 125%; + color: $c-black; + margin: 0; + + @include tablet { + font-size: 24px; + } + } + + &-text { + @include font-r; + + font-size: 16px; + line-height: 150%; + color: $c-gray; + margin-block: 20px 30px; + + @include tablet { + margin-bottom: 40px; + } + + @include desktop { + margin-bottom: 50px; + } + } + + &-link { + margin-block: 0; + text-decoration: none; + } + + &-arc { + @include font-r; + + text-decoration: none; + color: $c-red; + font-size: 16px; + line-height: 100%; + font-weight: 600; + display: flex; + justify-content: center; + align-items: center; + gap: 8px; + margin-top: 30px; + height: 60px; + border: 1px solid $c-red; + + @include tablet { + grid-column: 5 / 7; + grid-row: 1; + margin: 0; + } + + @include desktop { + grid-column: 10 / 13; + + @include color( + $hover-cl: $c-back-red, + $pressed-cl: $c-press-red, + $disabled-cl: $c-dissabled-red + ); + } + + .arrow { + display: block; + height: 12px; + width: 13px; + object-fit: contain; + } + } +} diff --git a/src/styles/current-exhibitions.scss b/src/styles/current-exhibitions.scss new file mode 100644 index 000000000..9aa3f0f0c --- /dev/null +++ b/src/styles/current-exhibitions.scss @@ -0,0 +1,44 @@ +@use './utils/vars' as *; +@use './utils/mixins' as *; + +.current-exhibitions { + @include padd-inl; + + box-sizing: border-box; + padding-block: 90px 120px; + max-width: 1280px; + margin: 0 auto; + + @include tablet { + @include grid; + + padding-block: 100px 160px; + + .card-text-two { + margin-top: 50px; + + @include desktop { + margin-top: 20px; + } + } + + &__card { + grid-column: span 3; + padding-top: 45px; + + @include desktop { + grid-column: span 6; + padding-top: 71px; + display: flex; + } + } + } + + @include desktop { + padding-block: 110px 200px; + } + + &__card-img--first { + object-position: left; + } +} diff --git a/src/styles/events.scss b/src/styles/events.scss new file mode 100644 index 000000000..18ebbe81e --- /dev/null +++ b/src/styles/events.scss @@ -0,0 +1,49 @@ +@use './utils/vars' as *; +@use './utils/mixins' as *; + +.events { + @include padd-inl; + + box-sizing: border-box; + padding-bottom: 90px; + max-width: 1280px; + margin: 0 auto; + + @include tablet { + @include grid; + + &__card.card { + @include grid; + + grid-column: span 6; + + @include desktop { + grid-column: span 12; + } + } + + &__card { + @include grid; + + &-img { + grid-column: span 3; + + @include desktop { + grid-column: span 4; + } + } + + &-item { + grid-column: span 3; + + @include desktop { + grid-column: span 6; + } + } + + &-date.card-date { + margin-top: 0; + } + } + } +} diff --git a/src/styles/first-screen.scss b/src/styles/first-screen.scss new file mode 100644 index 000000000..8af2e61db --- /dev/null +++ b/src/styles/first-screen.scss @@ -0,0 +1,132 @@ +@use './utils/vars' as *; +@use './utils/mixins' as *; + +.first-screen { + box-sizing: border-box; + display: flex; + flex-direction: column; + background-color: $c-back; + padding-top: 50px; + + @include padd-inl; + + @include tablet { + @include grid; + + padding-top: 99px; + } + + @include desktop { + padding-top: 90px; + padding-right: 0; + } + + &__item { + box-sizing: border-box; + grid-column: span 5; + + @include desktop { + grid-column: span 6; + } + } + + &__date { + @include font-r; + + color: $c-wh; + line-height: 140%; + margin: 0; + } + + &__art { + font-size: 48px; + line-height: 100%; + color: $c-wh; + margin: 10px 0 30px; + + @include tablet { + font-size: 72px; + } + + @include tablet { + font-size: 96px; + } + } + + &__text { + @include font-r; + + font-size: 16px; + color: $c-wh; + margin: 0; + line-height: 150%; + + @include tablet { + max-width: 330px; + } + + @include desktop { + max-width: 569px; + } + } + + &__link-btn { + margin-block: 40px; + + @include tablet { + max-width: 330px; + } + + @include desktop { + max-width: 270px; + } + } + + &__images { + height: 100%; + width: 100%; + + @include tablet { + grid-column: 2 / 6; + } + + @include desktop { + grid-column: 7 / span 6; + grid-row: 1 / span 2; + } + } + + &__img { + display: block; + object-fit: contain; + object-position: center; + height: 100%; + width: 100%; + } + + &__event { + color: $c-wh; + font-size: 14px; + display: none; + + @include desktop { + display: flex; + grid-column: 1 / span 2; + grid-row: 2; + } + + &-rule { + display: none; + + @include desktop { + display: block; + width: 100%; + grid-column: 2 / span 5; + grid-row: 2; + border: none; + border-top: 1px solid $c-wh; + margin-top: 10px; + } + } + } +} diff --git a/src/styles/footer.scss b/src/styles/footer.scss new file mode 100644 index 000000000..cc8e102eb --- /dev/null +++ b/src/styles/footer.scss @@ -0,0 +1,186 @@ +@use './utils/vars' as *; +@use './utils/mixins' as *; + +.footer { + @include padd-inl; + + position: relative; + padding-block: 34px 30px; + display: flex; + flex-direction: column; + gap: 50px; + background-color: $c-back; + + @include tablet { + @include grid; + + padding-top: 50px; + } + + &__contacts { + grid-column: span 2; + display: flex; + flex-direction: column; + + @include desktop { + grid-column: span 3; + } + } + + &__title { + font-size: 18px; + color: $c-wh; + margin-block: 0 10px; + + @include tablet { + margin-bottom: 30px; + } + } + + &__contacts-container { + display: flex; + flex-direction: column; + } + + &__contacts-link { + @include font-r; + + font-size: 16px; + text-decoration: none; + color: $c-wh; + + @include desktop { + &:hover { + text-decoration: underline; + } + } + } + + &__contacts-socials { + display: flex; + align-items: center; + gap: 20px; + margin-top: 30px; + + } + + &__contacts-img { + display: block; + height: 20px; + width: 20px; + object-fit: contain; + + @include hover($scale: 1.3); + } + + &__schedule { + display: flex; + flex-direction: column; + + @include tablet { + grid-column: span 2; + } + + @include desktop { + grid-column: 5 / span 2; + } + } + + &__schedule-text { + @include font-r; + + font-size: 16px; + color: $c-wh; + margin: 0; + } + + &__nav { + @include desktop { + grid-column: 9; + } + } + + &__nav-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + flex-direction: column; + gap: 5px; + + @include tablet { + gap: 10px; + } + } + + &__nav-link { + @include font-r; + + text-decoration: none; + color: $c-wh; + font-size: 16px; + + &:hover { + text-decoration: underline; + } + } + + &__link-span { + display: block; + font-family: 'Playfair Display', sans-serif; + font-size: 20px; + font-weight: 700; + margin-bottom: 5px; + + @include tablet { + margin-bottom: 20px; + } + } + + &__bottom { + position: relative; + display: flex; + align-items: center; + gap: 22px; + + @include tablet { + grid-column: span 6; + margin-top: 30px; + } + + @include desktop { + gap: 102px; + grid-column: span 12; + } + + &-copiright { + @include font-r; + + color: $c-wh; + margin: 0; + } + + &-privacy { + @include font-r; + + color: $c-wh; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } + } + + &__button { + height: 30px; + width: 30px; + display: block; + object-fit: contain; + position: absolute; + bottom: -5px; + right: 0; + + @include hover($scale: 1.3); + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..97445da11 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,11 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} +@use './base'; +@use './top-bar'; +@use './first-screen'; +@use './current-exhibitions'; +@use './aside'; +@use './events'; +@use './cards'; +@use './visit'; +@use './news'; +@use './subscribe'; +@use './footer'; diff --git a/src/styles/news.scss b/src/styles/news.scss new file mode 100644 index 000000000..0d0b4bfd9 --- /dev/null +++ b/src/styles/news.scss @@ -0,0 +1,40 @@ +@use './utils/vars' as *; +@use './utils/mixins' as *; + +.news { + @include padd-inl; + + box-sizing: border-box; + padding-block: 90px 120px; + max-width: 1280px; + margin: 0 auto; + + @include tablet { + @include grid; + + padding-block: 125px 160px; + } + + &__card { + @include tablet { + grid-column: span 3; + } + + @include desktop { + grid-column: span 6; + } + } + + &__card-date { + color: $c-black; + margin-bottom: 0; + } + + &__card-text { + margin-block: 20px 0; + } + + &__card-img { + @include hover($scale: 1.04); + } +} diff --git a/src/styles/subscribe.scss b/src/styles/subscribe.scss new file mode 100644 index 000000000..b91e17272 --- /dev/null +++ b/src/styles/subscribe.scss @@ -0,0 +1,108 @@ +@use './utils/vars' as *; +@use './utils/mixins' as *; + +.subscribe { + @include padd-inl; + + box-sizing: border-box; + padding-bottom: 80px; + max-width: 1280px; + margin: 0 auto; + + @include tablet { + @include grid; + + padding-bottom: 128px; + } + + @include desktop { + padding-block: 40px 200px; + } + + &__title { + @include tablet { + grid-column: span 5; + } + } + + &__text { + margin-bottom: 50px; + color: $c-black; + + @include tablet { + grid-column: span 5; + margin-block: -10px 20px; + } + + @include desktop { + grid-column: 7 / span 6; + margin: 0; + } + } + + &-form { + display: flex; + flex-direction: column; + gap: 30px; + + &__link { + border: none; + + @include tablet { + max-width: 330px; + } + + @include desktop { + max-width: 270px; + cursor: pointer; + } + } + + @include tablet { + grid-column: span 4; + } + + &__input { + padding: 0; + height: 28px; + width: 100%; + border: none; + border-bottom: 1px solid $c-black; + background: transparent; + outline: none; + font-size: 16px; + transition: all 0.3s ease; + + &:hover { + border-bottom: 1px solid $c-red; + + &::placeholder { + color: $c-red; + } + } + + &:focus { + color: $c-red; + border-bottom: 1px solid $c-red; + + &::placeholder { + color: transparent; + } + } + + &:not(:placeholder-shown) { + font-weight: 700; + } + + &:-webkit-autofill, + &:-webkit-autofill:hover, + &:-webkit-autofill:focus { + -webkit-box-shadow: 0 0 0 1000px #fff inset !important; + -webkit-text-fill-color: #000 !important; + transition: background-color 5000s ease-in-out 0s; + } + } + } +} + + diff --git a/src/styles/top-bar.scss b/src/styles/top-bar.scss new file mode 100644 index 000000000..8c587aa7a --- /dev/null +++ b/src/styles/top-bar.scss @@ -0,0 +1,76 @@ +@use './utils/vars' as *; +@use './utils/mixins' as *; + +.top-bar { + box-sizing: border-box; + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + padding-block: 20px; + background-color: $c-back; + + @include padd-inl; + + &__item { + display: flex; + align-items: center; + gap: 30px; + } + + &__ua-link { + align-items: center; + gap: 5px; + color: $c-wh; + text-decoration: none; + + @include font-r; + @include hover($scale: 1.3); + + font-size: 16px; + font-weight: 500; + + display: none; + + @include tablet { + display: flex; + order: 1; + } + } + + &__ua-img { + object-fit: contain; + object-position: center; + height: 4.61px; + width: 8px; + } + + &__menu-btn { + background-image: url(../images/menu.png); + background-position: center; + background-repeat: no-repeat; + background-size: 25px 20px; + width: 25px; + height: 20px; + border: none; + cursor: pointer; + background-color: transparent; + filter: invert(1); + + @include hover($scale: 1.3); + } + + &__logo-link { + display: flex; + align-items: center; + + @include hover($scale: 1.3); + } + + &__logo-img { + display: block; + object-fit: contain; + height: 40px; + width: 123px; + } +} 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..66e287878 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,97 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; +@mixin padd-inl() { + padding-inline: 20px; + + @include tablet { + padding-inline: 39px; + } + + @include desktop { + padding-inline: 55px; + } +} + +@mixin tablet() { + @media (min-width: 768px) { + @content; + } +} + +@mixin desktop() { + @media (min-width: 1280px) { + @content; + } +} + +@mixin font-r { + font-family: Raleway, sans-serif; + font-size: 14px; + line-height: 150%; + font-weight: 400; +} + +@mixin grid { + display: grid; + + @include tablet { + grid-template-columns: repeat(6, 1fr); + gap: 30px; + } + + @include desktop { + grid-template-columns: repeat(12, 1fr); + } +} + +@mixin color( + $hover-bg: null, + $pressed-bg: null, + $disabled-bg: null, + $hover-cl: null, + $pressed-cl: null, + $disabled-cl: null +) { + transition: all 0.3s ease; + + &:hover { + @if $hover-bg { + background-color: $hover-bg; + } + @if $hover-cl { + color: $hover-cl; + border: 1px solid $hover-cl; + } + } + + &:active { + @if $pressed-bg { + background-color: $pressed-bg; + } + @if $pressed-cl { + color: $pressed-cl; + border: 1px solid $pressed-cl; + } + } + + &:disabled { + @if $disabled-bg { + background-color: $disabled-bg; + } + @if $disabled-cl { + color: $disabled-cl; + border: 1px solid $disabled-cl; + } + } +} + +@mixin hover($color: null, $scale: null) { + transition: all 0.3s ease; + &:hover { - #{$_property}: $_toValue; + @if $scale { + transform: scale($scale); + } + @if $color { + color: $color; + } } } diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..1718d41da 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,8 @@ -$c-gray: #eee; +$c-wh: rgba(241, 245, 244, 1); +$c-red: rgba(205, 77, 49, 1); +$c-back: rgba(63, 82, 82, 1); +$c-black: rgba(28, 27, 41, 1); +$c-gray: rgba(80, 79, 94, 1); +$c-back-red: rgba(175, 52, 25, 1); +$c-press-red: rgba(234, 52, 13, 1); +$c-dissabled-red: rgba(221, 131, 111, 1); diff --git a/src/styles/visit.scss b/src/styles/visit.scss new file mode 100644 index 000000000..43919c91a --- /dev/null +++ b/src/styles/visit.scss @@ -0,0 +1,89 @@ +@use './utils/vars' as *; +@use './utils/mixins' as *; + +.visit { + @include padd-inl; + @include grid; + + padding-block: 50px; + background-color: $c-back; + + @include tablet { + padding-block: 80px; + + &__item { + grid-column: span 4; + + @include desktop { + padding-block: 205px; + grid-column: 6 / span 6; + } + } + } + + @include desktop { + padding: 0; + } + + &__title { + font-size: 38px; + line-height: 100%; + color: $c-wh; + margin: 0; + + @include tablet { + font-size: 62px; + grid-column: span 4; + } + + @include desktop { + font-size: 80px; + } + } + + &__text { + @include font-r; + + margin-block: 20px 40px; + color: $c-wh; + font-size: 16px; + + @include tablet { + margin-bottom: 40px; + } + + @include desktop { + margin-block: 20px 50px; + max-width: 470px; + } + } + + &__link.link-btn { + @include tablet { + max-width: 330px; + } + + @include desktop { + max-width: 270px; + } + } + + &__images { + width: 100%; + height: 100&; + display: none; + + @include desktop { + display: block; + grid-column: span 5; + } + + &-img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; + } + } +}