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 5f9e97051..68a8bf3b5 100644 --- a/README.md +++ b/README.md @@ -49,7 +49,7 @@ Check font styles. Use [IBM Plex Sans](https://fonts.google.com/specimen/IBM+Ple 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/). + [DEMO LINK](https://notbelievable.github.io/Museum/). 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..c5dc45bd1 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,301 @@ - + - Title + Museum + + + + + + + - -

Hello Mate Academy

- + +
+ + +
+
+ +
+
+
+ museum-img +
+
+

ХУДОЖНІЙ МУЗЕЙ

+ + КВИТКИ + + arrow-img + + + icon-podii +
+
+ +
+

Актуальні події

+ +
+
+ current-events-img +
+
+

+ ВИСТАВКА + 26.08-29.11.2019 +

+ +

Йду і повертаюсь + squre-icon +

+

+ Національний Художній Музей України презентує унікальну + частину колекції Градобанку - українське мистецтво другої + половини 1980-1995 років. +

+
+
+ +
+
+ current-events-img +
+
+

ВИСТАВКА + 26.08-29.11.2019 +

+

І спогади і мрії + squre-icon +

+

+ Національний художній музей України до 100 річчя + від дня народження видатної української художниці + Тетяни Яблонської відкриває ретроспективну ювілейну + виставку «І спогади і мрії». +

+
+
+
+ +
+
+
+ +
+

+ ЛЕКЦІЯ + 26/08/2019 - 11:00 +

+

Від класицизму до романтизму

+
+
+ + + +
+
Підписка
+

Бути в курсі всіх актуальних подій та останніх новин.

+
+ + + + +
+
+
+ + + +
+ +
+
+ + Галерея + Про Нас + Виставки та
події + Контакти +
+ +
+
+

Графік роботи

+ +
    +
  • 12:00 — 20:00 середа
    • +
  • 12:00 — 20:00 четвер
    • +
  • 12:00 — 20:00 п’ятниця
    • +
  • 11:00 — 19:00 субота
    • +
  • 11:00 — 19:00 недiля
    • +
+
+ +
+

+ Вихідні: понеділок, вівторок
+ Каса припиняє роботу за 1 годину + до закриття музею +

+
+
+
+ diff --git a/package-lock.json b/package-lock.json index fbfeb1428..3bf64afbb 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 ab5f87b9b..d2c5a8560 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/Close.png b/src/images/Close.png new file mode 100644 index 000000000..eae2ebd50 Binary files /dev/null and b/src/images/Close.png differ diff --git a/src/images/Group 30.png b/src/images/Group 30.png new file mode 100644 index 000000000..5aa89e39b Binary files /dev/null and b/src/images/Group 30.png differ diff --git a/src/images/NA MU.png b/src/images/NA MU.png new file mode 100644 index 000000000..d1b6fd0e0 Binary files /dev/null and b/src/images/NA MU.png differ diff --git a/src/images/Natsionalnij-hudozhnij-muzej-Ukrayini-Kiyiv-10-1800x1200.png b/src/images/Natsionalnij-hudozhnij-muzej-Ukrayini-Kiyiv-10-1800x1200.png new file mode 100644 index 000000000..50dc48593 Binary files /dev/null and b/src/images/Natsionalnij-hudozhnij-muzej-Ukrayini-Kiyiv-10-1800x1200.png differ diff --git a/src/images/Rectangle 2.1.png b/src/images/Rectangle 2.1.png new file mode 100644 index 000000000..f8891fbff Binary files /dev/null and b/src/images/Rectangle 2.1.png differ diff --git a/src/images/Rectangle 23.4.png b/src/images/Rectangle 23.4.png new file mode 100644 index 000000000..97795ef5f Binary files /dev/null and b/src/images/Rectangle 23.4.png differ diff --git a/src/images/Rectangle 4.3.png b/src/images/Rectangle 4.3.png new file mode 100644 index 000000000..140b08697 Binary files /dev/null and b/src/images/Rectangle 4.3.png differ diff --git a/src/images/Rectangle-20.png b/src/images/Rectangle-20.png new file mode 100644 index 000000000..600d003ac Binary files /dev/null and b/src/images/Rectangle-20.png differ diff --git a/src/images/Rectangle-22.png b/src/images/Rectangle-22.png new file mode 100644 index 000000000..a94f5b42c Binary files /dev/null and b/src/images/Rectangle-22.png differ diff --git a/src/images/Vector 2.png b/src/images/Vector 2.png new file mode 100644 index 000000000..55cec2806 Binary files /dev/null and b/src/images/Vector 2.png differ diff --git a/src/images/Vector 3.png b/src/images/Vector 3.png new file mode 100644 index 000000000..7a4e4bf01 Binary files /dev/null and b/src/images/Vector 3.png differ diff --git a/src/images/Vector.png b/src/images/Vector.png new file mode 100644 index 000000000..48a8ce3ca Binary files /dev/null and b/src/images/Vector.png differ diff --git a/src/images/arrow1.png b/src/images/arrow1.png new file mode 100644 index 000000000..f2b066347 Binary files /dev/null and b/src/images/arrow1.png differ diff --git a/src/images/facebook-letter-logo.png b/src/images/facebook-letter-logo.png new file mode 100644 index 000000000..6ef368d6c Binary files /dev/null and b/src/images/facebook-letter-logo.png differ diff --git a/src/images/gal1.png b/src/images/gal1.png new file mode 100644 index 000000000..59dd3c361 Binary files /dev/null and b/src/images/gal1.png differ diff --git a/src/images/gal2.png b/src/images/gal2.png new file mode 100644 index 000000000..da9a12583 Binary files /dev/null and b/src/images/gal2.png differ diff --git a/src/images/gal3.png b/src/images/gal3.png new file mode 100644 index 000000000..c18cd18c7 Binary files /dev/null and b/src/images/gal3.png differ diff --git a/src/images/gal4.png b/src/images/gal4.png new file mode 100644 index 000000000..15e315a0e Binary files /dev/null and b/src/images/gal4.png differ diff --git a/src/images/instagram (3).png b/src/images/instagram (3).png new file mode 100644 index 000000000..f5c218f89 Binary files /dev/null and b/src/images/instagram (3).png differ diff --git a/src/images/slider.png b/src/images/slider.png new file mode 100644 index 000000000..385320ec9 Binary files /dev/null and b/src/images/slider.png differ diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..5688b2820 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,80 @@ 'use strict'; + +const btnOpen = document.querySelector('.header__menu-open'); +const btnClose = document.querySelector('.asside__menu-close'); +const asside = document.querySelector('.asside'); + +if (btnOpen && btnClose && asside) { + btnOpen.addEventListener('click', () => { + asside.classList.add('asside--opened'); + document.body.style.overflow = 'hidden'; + document.documentElement.style.overflow = 'hidden'; + }); + + btnClose.addEventListener('click', () => { + asside.classList.remove('asside--opened'); + document.body.style.overflow = ''; + document.documentElement.style.overflow = ''; + }); +} + +const wrapper = document.querySelector('.gallery__wrapper'); +const dotsContainer = document.querySelector('.gallery__scroll'); + +if (wrapper && dotsContainer) { + const setupPagination = () => { + const totalItems = wrapper.children.length; + + if (totalItems === 0) return; + dotsContainer.innerHTML = ''; + + for (let i = 0; i < totalItems; i++) { + const dot = document.createElement('span'); + + dot.classList.add('gallery__scroll-dot'); + + if (i === 0) dot.classList.add('gallery__scroll-dot--active'); + + dot.addEventListener('click', () => { + const itemWidth = wrapper.children[0].getBoundingClientRect().width; + const gap = parseFloat(window.getComputedStyle(wrapper).gap) || 0; + const scrollStep = itemWidth + gap; + + wrapper.scrollTo({ + left: scrollStep * i, + behavior: 'smooth' + }); + }); + + dotsContainer.appendChild(dot); + } + }; + + wrapper.addEventListener('scroll', () => { + if (!wrapper.clientWidth || !wrapper.children.length) return; + + const itemWidth = wrapper.children[0].getBoundingClientRect().width; + const gap = parseFloat(window.getComputedStyle(wrapper).gap) || 0; + const scrollStep = itemWidth + gap; + + const activeIndex = Math.round(wrapper.scrollLeft / scrollStep); + const activeDots = dotsContainer.querySelectorAll('.gallery__scroll-dot'); + + activeDots.forEach((dot, index) => { + dot.classList.toggle('gallery__scroll-dot--active', index === activeIndex); + }); + }); + + setupPagination(); + window.addEventListener('resize', setupPagination); +} + +const menuLinks = document.querySelectorAll('.menu__link'); + +menuLinks.forEach(link => { + link.addEventListener('click', () => { + asside.classList.remove('asside--opened'); + document.documentElement.style.overflow = ''; + document.body.style.overflow = ''; + }); +}); diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index 45cdd5400..000000000 --- a/src/styles/_fonts.scss +++ /dev/null @@ -1,6 +0,0 @@ -@font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); - font-weight: normal; - font-style: normal; -} 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/art-museum.scss b/src/styles/art-museum.scss new file mode 100644 index 000000000..c4cd81729 --- /dev/null +++ b/src/styles/art-museum.scss @@ -0,0 +1,129 @@ +@use './mixins' as *; +@use './variables' as *; + +.art-museum { + box-sizing: border-box; + + @include tablet { + display: flex; + flex-direction: row-reverse; + } + + @include desktop { + @include grid; + } + + &__podii { + display: none; + max-width: 14px; + max-height: 133px; + object-fit: contain; + + @include desktop { + display: flex; + align-items: center; + position: relative; + + top: 110px; + } + } + + &__images { + width: 100%; + min-height: 300px; + + @include desktop { + grid-column: 6 / span 7; + } + } + + &__img { + display: block; + height: 100%; + width: 100%; + object-fit: cover; + } + + &__item { + @include padd; + + position: relative; + box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + gap: 20px; + padding-block: 20px 0; + width: 100%; + + @include tablet { + padding-right: 20px; + padding-top: 127px; + align-items: flex-start; + } + + @include desktop { + grid-column: 1 / 6; + grid-row: 1; + width: 100%; + padding-right: 0; + display: grid; + grid-template-columns: repeat(5, 1fr); + } + } + + &__title { + margin: 0; + font-size: 45px; + font-weight: 700; + line-height: 100%; + + @include tablet { + text-align: left; + font-size: 54px; + line-height: 120%; + } + + @include desktop { + font-size: 72px; + grid-column: span 5; + } + } + + &__btn-ticket { + display: flex; + align-items: center; + text-decoration: none; + width: 100%; + border: 1px solid $color-gr; + + @include tablet { + max-width: 270px; + } + + @include desktop { + grid-column: 3 / span 3; + grid-row: 2; + } + } + + &__btn-text { + @include font-ibm; + + font-size: 16px; + line-height: 100%; + font-weight: 500; + color: $color-bl; + flex-grow: 1; + } + + &__btn-arrow { + display: flex; + align-items: center; + justify-content: center; + height: 50px; + width: 50px; + background-color: $color-gr; + } +} diff --git a/src/styles/asside-menu.scss b/src/styles/asside-menu.scss new file mode 100644 index 000000000..20c41ad6a --- /dev/null +++ b/src/styles/asside-menu.scss @@ -0,0 +1,163 @@ +@use './mixins' as *; +@use './variables' as *; + +.asside { + @include padd; + + box-sizing: border-box; + position: fixed; + display: flex; + flex-direction: column; + align-items: flex-start; + z-index: 100; + top: 0; + left: 0; + background-color: $color-gr; + width: 100%; + padding-block: 27px; + opacity: 0; + visibility: hidden; + transform: translateY(-100%); + transition: all 0.3s ease; + + &--opened { + opacity: 1; + visibility: visible; + transform: translateY(0); + } + + @include tablet { + @include grid; + } + + &__menu-close { + background-image: url(../images/Close.png); + background-size: 12px 12px; + + @include hover(1.1); + } + + .menu__nav { + @include font-ibm; + + position: relative; + display: grid; + gap: 24px 28px; + box-sizing: border-box; + padding-bottom: 24px; + border-bottom: 1px solid $color-wh; + width: 100%; + + @include tablet { + padding-right: 38px; + gap: 24px 20px; + padding-bottom: 0; + border-bottom: 0; + grid-column: span 3; + } + + @include desktop { + grid-column: span 6; + padding-right: 0; + } + + .menu__link { + color: $color-wh; + } + + & .menu__link:nth-child(4) { + grid-column: 2; + grid-row: 2; + } + + & .menu__link:nth-child(5) { + grid-column: 3; + grid-row: 2; + } + } + + .menu__schedule { + padding-block: 24px 16px; + + @include tablet { + padding: 0; + } + + @include desktop { + grid-column: 1 / 5; + } + } + + .menu__text { + color: $color-wh; + } + + .menu__hours-list { + color: $color-wh; + } + + .menu__warning { + @include font-ibm; + + margin: 0; + color: $color-wh; + font-size: 14px; + font-weight: 400; + line-height: 141%; + + @include tablet { + padding-top: 38px; + } + } + + .menu__day-off { + grid-column: 2; + + @include desktop { + grid-column: 5 / span 5; + } + } + + .menu__container { + @include tablet { + display: grid; + gap: 38px; + position: relative; + box-sizing: border-box; + grid-column: span 3; + grid-template-columns: 1.4fr 1.3fr; + + border-left: 1px solid $color-wh; + padding-left: 38px; + margin-left: -38px; + } + + @include desktop { + grid-column: 7 / 12; + padding-left: 102px; + margin-left: 0; + grid-template-columns: repeat(6, 1fr); + gap: 30px; + } + } +} + +.asside-wrap { + &::before { + content: ''; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100vh; + background-color: rgba(0, 0, 0, 0.5); + z-index: 10; + opacity: 0; + visibility: hidden; + } +} + +.asside-wrap:has(+ .asside--opened)::before { + opacity: 1; + visibility: visible; +} diff --git a/src/styles/base.scss b/src/styles/base.scss new file mode 100644 index 000000000..ccdaf6cbf --- /dev/null +++ b/src/styles/base.scss @@ -0,0 +1,94 @@ +@use './mixins' as *; +@use './variables' as *; + +.html { + scroll-behavior: smooth; +} + +.body { + margin: 0 auto; + max-width: 1280px; + width: 100%; + padding: 0; + font-family: Montserrat, sans-serif; + font-weight: 400; +} + +.menu-btn { + display: block; + padding: 0; + width: 24px; + height: 24px; + background-repeat: no-repeat; + background-position: center; + border: none; + background-color: transparent; + cursor: pointer; +} + +.insert { + @include font-ibm; + + display: flex; + justify-content: space-between; + align-items: center; + font-size: 16px; + font-weight: 500; + line-height: 100%; + color: $color-grey; + margin: 0; + width: 100%; + + @include tablet { + font-size: 14px; + } +} + +.date { + @include font-ibm; + + font-size: 16px; + line-height: 150%; + color: $color-gr; + + @include tablet { + font-size: 14px; + } +} + +.footer__schedule-container, +.schedule { + @include font-ibm; + + font-size: 14px; +} + +.text { + font-size: 14px; + font-weight: 400; + line-height: 141%; + color: $color-wh; + margin: 0; + margin-bottom: 20px; +} + +.hours-list { + list-style: none; + display: flex; + flex-direction: column; + justify-content: flex-start; + margin: 0; + padding: 0; +} + +.warning-text, +.time { + font-weight: 600; +} + +.nav__link { + text-decoration: none; + font-size: 16px; + line-height: 100%; + font-weight: 500; +} diff --git a/src/styles/current-events.scss b/src/styles/current-events.scss new file mode 100644 index 000000000..f3ded9a76 --- /dev/null +++ b/src/styles/current-events.scss @@ -0,0 +1,149 @@ +@use './mixins' as *; +@use './variables' as *; + +.current-events { + @include padd; + + padding-block: 70px 60px; + box-sizing: border-box; + + display: flex; + flex-direction: column; + align-items: center; + gap: 40px; + + @include tablet { + @include grid; + + padding-block: 88px 96px; + align-items: flex-start; + gap: 48px; + } + + @include desktop { + padding-block: 200px 56px; + } + + &__title { + font-size: 36px; + font-weight: 700; + line-height: 100%; + color: $color-bl; + margin: 0; + text-align: center; + + @include tablet { + font-size: 48px; + grid-column: span 4; + text-align: left; + } + + @include desktop { + grid-column: span 5; + } + } + + &__card { + box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: center; + + @include tablet { + @include grid; + + grid-column: span 6; + padding-block: 18px 16px; + } + + @include desktop { + padding-block: 26px 48px; + grid-column: span 12; + } + } + + &__image { + display: flex; + align-items: center; + padding-block: 20px; + + @include tablet { + padding-block: 0 10px; + grid-column: span 6; + } + + @include desktop { + padding: 0; + + @include hover(1.1); + } + } + + &__img { + width: 100%; + min-height: 210px; + object-fit: contain; + object-position: center; + } + + &__description { + display: flex; + flex-direction: column; + align-items: center; + + @include tablet { + align-items: flex-start; + grid-column: span 4; + } + + @include desktop { + @include hover(1.1); + + align-items: flex-start; + grid-column: 8 / span 4; + } + } + + &__name { + display: flex; + align-items: center; + justify-content: flex-start; + width: 100%; + font-weight: 400; + font-size: 28px; + line-height: 100%; + color: $color-bl; + margin-block: 15px 10px; + + @include tablet { + font-size: 36px; + margin-block: 30px 15px; + } + } + + &__icon { + display: block; + width: 10px; + height: 10px; + object-fit: contain; + margin-top: 5px; + padding-left: 10px; + } + + &__text { + @include font-ibm; + + font-weight: 300; + font-size: 16px; + line-height: 150%; + color: $color-grey2; + margin: 0; + } + + &__insert { + @include tablet { + justify-content: flex-start; + gap: 20px; + } + } +} diff --git a/src/styles/footer.scss b/src/styles/footer.scss new file mode 100644 index 000000000..53aa712f7 --- /dev/null +++ b/src/styles/footer.scss @@ -0,0 +1,202 @@ +@use './mixins' as *; +@use './variables' as *; + +.footer { + box-sizing: border-box; + padding-block: 50px; + + @include padd; + + @include tablet { + padding-block: 48px 35px; + + @include grid; + } + + &__contact-link { + color: $color-bl; + text-decoration: none; + } + + &__item { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 40px; + + @include tablet { + flex-direction: column; + align-items: flex-start; + gap: 62px; + justify-content: flex-start; + } + } + + &__social { + display: flex; + align-items: center; + gap: 20px; + } + + &__social-img { + display: block; + height: 24px; + width: 24px; + object-fit: contain; + transition: all 0.3s ease; + + @include hover(1.1); + } + + &__logo-img { + display: block; + height: 72px; + width: 100%; + object-fit: contain; + transition: all 0.3s ease; + + @include hover(1.1); + } + + &__text { + color: $color-bl; + margin-block: 0 20px; + } + + &__hours-list { + color: $color-bl; + } + + &__warning { + color: $color-bl; + font-weight: 400; + margin-bottom: 0; + } + + &__schedule { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 20px; + position: relative; + + border-bottom: 1px solid rgba(26, 90, 76, 0.5); + padding-bottom: 70px; + + @include tablet { + grid-column: span 4; + padding-bottom: 64px; + } + + @include desktop { + grid-column: 3 / span 5; + border-bottom: none; + border-right: 1px solid $color-gr; + padding-right: 65px; + padding-bottom: 0; + gap: 30px; + } + } + + &__contact-text { + @include font-ibm; + + margin: 0; + font-size: 14px; + line-height: 150%; + font-weight: 400; + } + + &__contact-info { + display: block; + margin-bottom: 20px; + } + + &__btn-up { + position: absolute; + z-index: 1000; + right: 20px; + bottom: 20px; + + display: flex; + justify-content: center; + align-items: center; + height: 50px; + width: 50px; + flex-shrink: 0; + border-radius: 50%; + border: 1px solid $color-gr; + transition: all 0.3s ease; + + @include hover(1.1); + + @include tablet { + display: none; + } + } + + &__btn-img { + display: block; + width: 10px; + height: 12px; + object-fit: contain; + } + + &__nav { + padding-block: 40px 80px; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 20px; + + @include tablet { + grid-row: 2; + grid-column: 2 / 6; + padding-block: 44px 120px; + } + + @include desktop { + grid-row: 1; + grid-column: 8 / 12; + padding-left: 30px; + padding-block: 0; + gap: 20px; + height: 60px; + } + + &-link { + @include font-ibm; + + color: $color-bl; + font-weight: 400; + line-height: 100%; + font-size: 14px; + } + } + + &__copyright { + display: flex; + align-items: center; + flex-direction: column; + gap: 10px; + + @include tablet { + grid-row: 3; + grid-column: span 6; + flex-direction: row; + justify-content: space-between; + } + + @include desktop { + grid-column: span 12; + padding-top: 17px; + } + + &-text { + @include font-ibm; + + margin: 0; + font-size: 12px; + font-weight: 300; + line-height: 141%; + } + } +} diff --git a/src/styles/from-cl-to-rom.scss b/src/styles/from-cl-to-rom.scss new file mode 100644 index 000000000..1ad1b0090 --- /dev/null +++ b/src/styles/from-cl-to-rom.scss @@ -0,0 +1,79 @@ +@use './mixins' as *; +@use './variables' as *; + +.from-cl-to-rom { + display: flex; + flex-direction: column; + + &__image { + min-height: 210px; + width: 100%; + background-image: url(../images/Rectangle-20.png); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + + @include tablet { + min-height: 390px; + } + + @include desktop { + min-height: 550px; + } + } + + &__item { + box-sizing: border-box; + display: flex; + align-items: center; + flex-direction: column; + text-align: center; + gap: 20px; + border-bottom: 2px solid rgba(26, 90, 76, 0.25); + padding-block: 20px; + margin-top: -60px; + background-color: $color-wh; + + margin-inline: 20px; + + @include tablet { + margin-inline: 65px; + text-align: left; + padding-inline: 55px; + gap: 16px; + padding-block: 45px 50px; + margin-top: -85px; + } + + @include desktop { + margin-inline: 355px; + padding-inline: 100px; + margin-top: -100px; + } + } + + &__title { + font-size: 28px; + line-height: 100%; + font-weight: 400; + margin: 0; + + @include tablet { + font-size: 36px; + } + } + + &__insert { + justify-content: space-around; + + @include tablet { + box-sizing: border-box; + justify-content: space-between; + padding-right: 160px; + } + + @include desktop { + padding-right: 35px; + } + } +} diff --git a/src/styles/gallery.scss b/src/styles/gallery.scss new file mode 100644 index 000000000..2a39cef6c --- /dev/null +++ b/src/styles/gallery.scss @@ -0,0 +1,150 @@ +@use './mixins' as *; +@use './variables' as *; + +.gallery { + max-width: 1280px; + display: flex; + flex-direction: column; + align-items: center; + + padding-block: 100px; + + @include padd; + + @include tablet { + padding-block: 88px 92px; + } + + @include desktop { + padding-block: 200px; + } + + &__title { + margin-block: 0 40px; + font-size: 36px; + line-height: 100%; + font-weight: 700; + width: 100%; + text-align: center; + + @include tablet { + text-align: left; + margin-bottom: 48px; + font-size: 48px; + } + } + + &__slider { + box-sizing: border-box; + position: relative; + overflow: visible; + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + + @include desktop { + @include grid; + } + } + + &__wrapper { + display: flex; + flex-direction: row; + overflow: hidden auto; + scroll-snap-type: x mandatory; + scroll-behavior: smooth; + scrollbar-width: none; + gap: 16px; + margin-right: -20px; + padding-right: 20px; + + &::-webkit-scrollbar { + display: none; + } + + @include tablet { + gap: 20px; + padding-right: 10px; + margin-right: -34px; + } + + @include desktop { + grid-column: span 12; + gap: 30px; + padding: 0; + margin: 0; + + @include grid; + } + } + + &__img { + width: 100%; + min-height: 410px; + object-fit: cover; + flex-shrink: 0; + scroll-snap-align: start; + + @include tablet { + min-height: 543px; + width: calc((100% - 40px) / 2); + } + + @include desktop { + min-height: 0; + width: 100%; + object-fit: contain; + + @include hover(1.04); + + &:nth-child(1) { + height: 600px; + grid-column: span 4; + } + + &:nth-child(2) { + grid-column: span 8; + height: 600px; + } + + &:nth-child(3) { + height: 360px; + grid-column: span 8; + } + + &:nth-child(4) { + height: 360px; + grid-column: span 4; + } + } + } + + &__scroll { + margin-top: 20px; + display: flex; + justify-content: center; + gap: 22px; + + @include tablet { + margin-top: 32px; + } + + @include desktop { + display: none; + } + + &-dot { + width: 9px; + height: 9px; + border-radius: 50%; + background-color: $color-grey5; + cursor: pointer; + transition: all 0.3s ease; + + &--active { + background-color: $color-gr; + } + } + } +} diff --git a/src/styles/header.scss b/src/styles/header.scss new file mode 100644 index 000000000..249ad9546 --- /dev/null +++ b/src/styles/header.scss @@ -0,0 +1,61 @@ +@use './mixins' as *; +@use './variables' as *; + +.header { + max-width: 1280px; + margin: 0 auto; + position: absolute; + z-index: 10; + top: 0; + left: 0; + right: 0; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: space-between; + background-color: transparent; + width: 100%; + padding-top: 9px; + + @include padd; + + &__placeholder { + width: 24px; + height: 24px; + } + + @include tablet { + padding-top: 15px; + } + + &__menu-open { + background-image: url(../images/Vector.png); + background-size: 18px 12px; + + @include hover(1.1); + } + + &__logo { + @include hover(1.1); + + @include tablet { + position: relative; + left: 115px; + } + + @include desktop { + position: static; + } + + &-img { + display: block; + width: 55px; + height: 61px; + object-fit: contain; + + @include tablet { + min-height: 72px; + } + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..536d35f0d 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,9 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} +@use './base'; +@use './header'; +@use './art-museum'; +@use './current-events'; +@use './asside-menu'; +@use './from-cl-to-rom'; +@use './gallery'; +@use './subscription'; +@use './footer'; diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss new file mode 100644 index 000000000..271846076 --- /dev/null +++ b/src/styles/mixins.scss @@ -0,0 +1,49 @@ +@mixin padd() { + padding-inline: 20px; + + @include tablet { + padding-inline: 34px; + } + + @include desktop { + padding-inline: 55px; + } +} + +@mixin tablet() { + @media (min-width: 768px) { + @content; + } +} + +@mixin desktop() { + @media (min-width: 1280px) { + @content; + } +} + +@mixin font-ibm() { + font-family: 'IBM Plex Sans', sans-serif; +} + +@mixin grid() { + display: grid; + + @include tablet { + grid-template-columns: repeat(6, 1fr); + gap: 20px; + } + + @include desktop { + grid-template-columns: repeat(12, 1fr); + gap: 30px; + } +} + +@mixin hover($scale) { + transition: transform 0.3s ease; + + &:hover { + transform: scale($scale); + } +} diff --git a/src/styles/subscription.scss b/src/styles/subscription.scss new file mode 100644 index 000000000..f21a932dd --- /dev/null +++ b/src/styles/subscription.scss @@ -0,0 +1,113 @@ +@use './mixins' as *; +@use './variables' as *; + +.subscription { + box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: center; + background-image: url(../images/Rectangle-22.png); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + padding-block: 88px; + + @include padd; + + @include tablet { + padding-block: 82px; + padding-inline: 154px; + } + + @include desktop { + padding-block: 163px; + padding-inline: 355px; + } + + &__title { + font-weight: 700; + font-size: 36px; + line-height: 100%; + color: $color-wh; + + @include tablet { + font-size: 48px; + } + } + + &__text { + @include font-ibm; + + width: 100%; + font-size: 18px; + font-weight: 400; + line-height: 150%; + color: $color-wh; + text-align: center; + margin-block: 20px 50px; + + @include tablet { + margin-block: 15px 64px; + } + + @include desktop { + margin-block: 15px 72px; + } + } + + &__form { + box-sizing: border-box; + display: flex; + align-items: center; + width: 100%; + height: 50px; + + @include tablet { + height: 70px; + } + } + + .form__input { + height: 100%; + width: 100%; + padding: 0 24px; + font-size: 14px; + line-height: 100%; + font-weight: 400; + color: $color-grey; + border: none; + outline: none; + + @include tablet { + margin-right: 16px; + } + + @include desktop { + margin-right: 30px; + } + } + + .form__btn { + box-sizing: border-box; + display: flex; + justify-content: center; + align-items: center; + border: none; + background-color: rgba(241, 74, 39, 1); + width: 50px; + height: 100%; + flex-shrink: 0; + cursor: pointer; + + @include tablet { + width: 70px; + } + + img { + display: block; + height: 12px; + width: 7.41px; + object-fit: contain; + } + } +} 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 deleted file mode 100644 index 80c79780d..000000000 --- a/src/styles/utils/_mixins.scss +++ /dev/null @@ -1,6 +0,0 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; - &:hover { - #{$_property}: $_toValue; - } -} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss deleted file mode 100644 index aeb006ffb..000000000 --- a/src/styles/utils/_vars.scss +++ /dev/null @@ -1 +0,0 @@ -$c-gray: #eee; diff --git a/src/styles/variables.scss b/src/styles/variables.scss new file mode 100644 index 000000000..f9656761a --- /dev/null +++ b/src/styles/variables.scss @@ -0,0 +1,6 @@ +$color-gr: rgba(26, 90, 76, 1); +$color-bl: rgba(15, 14, 8, 1); +$color-grey: rgba(104, 116, 128, 1); +$color-grey2: rgba(78, 78, 78, 1); +$color-grey5: rgba(224, 224, 224, 1); +$color-wh: rgba(255, 255, 255, 1);