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..8581b3f2f 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,6 @@ # Museum landing page -Implement landing page according to [Figma design](https://www.figma.com/file/cRBCqE06cDrY3s4jX7h3iY/%D0%9D%D0%90%D0%9C%D0%A3-(Edit)?node-id=0%3A1) - Use BEM and SCSS + +Implement landing page according to [Figma design]() - Use BEM and SCSS Check font styles. Use [IBM Plex Sans](https://fonts.google.com/specimen/IBM+Plex+Sans?query=ibm), [Montserrat](https://fonts.google.com/specimen/Montserrat?query=mon) @@ -20,22 +21,22 @@ Check font styles. Use [IBM Plex Sans](https://fonts.google.com/specimen/IBM+Ple 1. Don’t forget to add a title for the whole web page (it could be the name of your landing) 2. A landing page is implemented strictly according to the design in Figma -4. Links in the header and footer menus should lead to the corresponding blocks of the landing page -5. The speed of animations is the same throughout the landing page (for example, increasing when hovering or moving blocks when scrolling) -6. Placeholders in the forms suggest what to enter, and if there is a validation of the form, then it is clear in what format to enter the phone number -7. Make sure everything looks neat on mobile and without horizontal scrolling -8. Add favicon -9. Add a smooth scroll for the whole page -10. When you try to send the form there is no 405 error and the form is automatically cleared after submit and is scrolled to the top of the page or the page is reloaded -11. The form shouldn’t submit empty -12. The buttons "exhibitions" and "tickets" should lead to the block with current events -13. The button "about us" should lead to the email digest -14. Facebook and Instagram icons in the footer should be clickable and open the museum's social networks in a new tab -15. Pictures in the gallery and exhibitions sections should increase on hover -16. OPTIONAL: After everything is done, you can add a slider for viewing pictures in the gallery (for mobile version) - +3. Links in the header and footer menus should lead to the corresponding blocks of the landing page +4. The speed of animations is the same throughout the landing page (for example, increasing when hovering or moving blocks when scrolling) +5. Placeholders in the forms suggest what to enter, and if there is a validation of the form, then it is clear in what format to enter the phone number +6. Make sure everything looks neat on mobile and without horizontal scrolling +7. Add favicon +8. Add a smooth scroll for the whole page +9. When you try to send the form there is no 405 error and the form is automatically cleared after submit and is scrolled to the top of the page or the page is reloaded +10. The form shouldn’t submit empty +11. The buttons "exhibitions" and "tickets" should lead to the block with current events +12. The button "about us" should lead to the email digest +13. Facebook and Instagram icons in the footer should be clickable and open the museum's social networks in a new tab +14. Pictures in the gallery and exhibitions sections should increase on hover +15. OPTIONAL: After everything is done, you can add a slider for viewing pictures in the gallery (for mobile version) ## 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`). @@ -49,7 +50,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://naviailpach.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..4a0c63379 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,660 @@ - + + - Title + Художній Музей + + + + + + + + + + + + - -

Hello Mate Academy

- + + +
+
+ + +
+ + + + + художній музей +
+ +
+ + +

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

+ +
+ + Квитки + + + button arrow + + +
+ +
+ + Події + +
+
+ +
+ +
+ + + + + +
+
+
+
+

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

+
+
+ йду і повертаюсь +
+
+
Виставка
+

+ + - + +

+
+
+

Йду і повертаюсь

+ square decoration +
+

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

+
+
+ +
+ спогади і мрії +
+
+
Виставка
+

+ + - + +

+
+
+

І спогади і мрії

+ square decoration +
+

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

+
+
+ +
+
+
+
+
Лекція
+

+ + - + +

+
+

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

+
+
+
+
+
+ +
+ +
+ +
+ +
+ + + + + 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/events/classicism-and-romanticism.png b/src/images/events/classicism-and-romanticism.png new file mode 100644 index 000000000..b735df7c3 Binary files /dev/null and b/src/images/events/classicism-and-romanticism.png differ diff --git a/src/images/events/go-and-come-back.png b/src/images/events/go-and-come-back.png new file mode 100644 index 000000000..a8b247f2c Binary files /dev/null and b/src/images/events/go-and-come-back.png differ diff --git a/src/images/events/memories-and-dreams.png b/src/images/events/memories-and-dreams.png new file mode 100644 index 000000000..47f22882d Binary files /dev/null and b/src/images/events/memories-and-dreams.png differ diff --git a/src/images/events/square-decoration.png b/src/images/events/square-decoration.png new file mode 100644 index 000000000..ba3e97192 Binary files /dev/null and b/src/images/events/square-decoration.png differ diff --git a/src/images/favicon/apple-touch-icon.png b/src/images/favicon/apple-touch-icon.png new file mode 100644 index 000000000..39f2ff6ec Binary files /dev/null and b/src/images/favicon/apple-touch-icon.png differ diff --git a/src/images/favicon/favicon-96x96.png b/src/images/favicon/favicon-96x96.png new file mode 100644 index 000000000..d08ebc72c Binary files /dev/null and b/src/images/favicon/favicon-96x96.png differ diff --git a/src/images/favicon/favicon.ico b/src/images/favicon/favicon.ico new file mode 100644 index 000000000..279f29dd4 Binary files /dev/null and b/src/images/favicon/favicon.ico differ diff --git a/src/images/favicon/favicon.svg b/src/images/favicon/favicon.svg new file mode 100644 index 000000000..4cd07cb28 --- /dev/null +++ b/src/images/favicon/favicon.svg @@ -0,0 +1 @@ +RealFaviconGeneratorhttps://realfavicongenerator.net \ No newline at end of file diff --git a/src/images/favicon/site.webmanifest b/src/images/favicon/site.webmanifest new file mode 100644 index 000000000..658cbbde0 --- /dev/null +++ b/src/images/favicon/site.webmanifest @@ -0,0 +1,21 @@ +{ + "name": "Museum", + "short_name": "Museum", + "icons": [ + { + "src": "/web-app-manifest-192x192.png", + "sizes": "192x192", + "type": "image/png", + "purpose": "maskable" + }, + { + "src": "/web-app-manifest-512x512.png", + "sizes": "512x512", + "type": "image/png", + "purpose": "maskable" + } + ], + "theme_color": "#ffffff", + "background_color": "#ffffff", + "display": "standalone" +} \ No newline at end of file diff --git a/src/images/favicon/web-app-manifest-192x192.png b/src/images/favicon/web-app-manifest-192x192.png new file mode 100644 index 000000000..119928b75 Binary files /dev/null and b/src/images/favicon/web-app-manifest-192x192.png differ diff --git a/src/images/favicon/web-app-manifest-512x512.png b/src/images/favicon/web-app-manifest-512x512.png new file mode 100644 index 000000000..40f5b3f88 Binary files /dev/null and b/src/images/favicon/web-app-manifest-512x512.png differ diff --git a/src/images/gallery/gallery-1.png b/src/images/gallery/gallery-1.png new file mode 100644 index 000000000..b7c87400c Binary files /dev/null and b/src/images/gallery/gallery-1.png differ diff --git a/src/images/gallery/gallery-2.png b/src/images/gallery/gallery-2.png new file mode 100644 index 000000000..59146477e Binary files /dev/null and b/src/images/gallery/gallery-2.png differ diff --git a/src/images/gallery/gallery-3.png b/src/images/gallery/gallery-3.png new file mode 100644 index 000000000..8e315fe22 Binary files /dev/null and b/src/images/gallery/gallery-3.png differ diff --git a/src/images/gallery/gallery-4.png b/src/images/gallery/gallery-4.png new file mode 100644 index 000000000..76081e79d Binary files /dev/null and b/src/images/gallery/gallery-4.png differ diff --git a/src/images/gallery/gallery-5.png b/src/images/gallery/gallery-5.png new file mode 100644 index 000000000..cb497b2ba Binary files /dev/null and b/src/images/gallery/gallery-5.png differ diff --git a/src/images/header/header-logo.png b/src/images/header/header-logo.png new file mode 100644 index 000000000..d1b6fd0e0 Binary files /dev/null and b/src/images/header/header-logo.png differ diff --git a/src/images/header/natsionalnij-hudozhnij-muzej-bg.png b/src/images/header/natsionalnij-hudozhnij-muzej-bg.png new file mode 100644 index 000000000..50dc48593 Binary files /dev/null and b/src/images/header/natsionalnij-hudozhnij-muzej-bg.png differ diff --git a/src/images/icon/arrow-up.svg b/src/images/icon/arrow-up.svg new file mode 100644 index 000000000..59f857ab0 --- /dev/null +++ b/src/images/icon/arrow-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/burger-menu-2x.png b/src/images/icon/burger-menu-2x.png new file mode 100644 index 000000000..09192d566 Binary files /dev/null and b/src/images/icon/burger-menu-2x.png differ diff --git a/src/images/icon/button-arrow-black.svg b/src/images/icon/button-arrow-black.svg new file mode 100644 index 000000000..0da1e9b20 --- /dev/null +++ b/src/images/icon/button-arrow-black.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icon/button-arrow.svg b/src/images/icon/button-arrow.svg new file mode 100644 index 000000000..799b8a91d --- /dev/null +++ b/src/images/icon/button-arrow.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icon/menu-close-2x.png b/src/images/icon/menu-close-2x.png new file mode 100644 index 000000000..6a477a10a Binary files /dev/null and b/src/images/icon/menu-close-2x.png differ diff --git a/src/images/logos/footer-logo.png b/src/images/logos/footer-logo.png new file mode 100644 index 000000000..84acd146b Binary files /dev/null and b/src/images/logos/footer-logo.png differ diff --git a/src/images/social/facebook.svg b/src/images/social/facebook.svg new file mode 100644 index 000000000..6aa4f99a7 --- /dev/null +++ b/src/images/social/facebook.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/social/instagram.svg b/src/images/social/instagram.svg new file mode 100644 index 000000000..829b27f4e --- /dev/null +++ b/src/images/social/instagram.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/images/subscribe/subscribe-bg.png b/src/images/subscribe/subscribe-bg.png new file mode 100644 index 000000000..9c5a7eb17 Binary files /dev/null and b/src/images/subscribe/subscribe-bg.png differ diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..bc3e291c6 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,30 @@ 'use strict'; + +const dots = document.querySelectorAll('.gallery__dot'); +const track = document.querySelector('.gallery__track'); + +const updateActiveDot = () => { + const slideWidth = track.clientWidth; + const currentIndex = Math.round(track.scrollLeft / slideWidth); + + dots.forEach((dot) => dot.classList.remove('active')); + + if (dots[currentIndex]) { + dots[currentIndex].classList.add('active'); + } +}; + +dots.forEach((dot, index) => { + dot.addEventListener('click', (e) => { + e.preventDefault(); + + track.scrollTo({ + left: track.clientWidth * index, + behavior: 'smooth', + }); + }); +}); + +track.addEventListener('scroll', updateActiveDot); + +updateActiveDot(); diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 45cdd5400..8fb520526 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,6 +1,2 @@ -@font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); - font-weight: normal; - font-style: normal; -} +$font-base: 'IBM Plex Sans', sans-serif; +$font-heading: 'Montserrat', sans-serif; diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 000000000..41f05fb74 --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,84 @@ +.button { + display: flex; + + width: 100%; + height: 50px; + border: 1px solid $green; + + font-family: $font-base; + font-size: 16px; + font-weight: 500; + line-height: 1; + color: $title-color; + text-align: center; + text-decoration: none; + text-transform: uppercase; + + background-color: $white; + + transition: + color $effectDuration, + background-color $effectDuration; + + @include on-tablet { + max-width: 270px; + height: 70px; + } + + &__text { + display: flex; + flex: 1; + align-items: center; + justify-content: center; + } + + &__icon { + display: flex; + align-items: center; + justify-content: center; + + width: 50px; + height: 100%; + + background-color: $green; + + &-arrow { + display: flex; + transition: transform $effectDuration; + } + + @include on-tablet { + width: 70px; + } + } + + &:hover { + color: $white; + background-color: $green; + } + + &:hover &__icon-arrow { + transform: translateX(5px); + } + + &__subscribe { + cursor: pointer; + + display: flex; + align-items: center; + justify-content: center; + + width: 100%; + max-width: 50px; + height: auto; + border: none; + + background-color: $orange; + + @include hover(transform, translateX(10px)); + + @include on-tablet { + max-width: 70px; + } + } +} diff --git a/src/styles/blocks/container.scss b/src/styles/blocks/container.scss new file mode 100644 index 000000000..aeede44f8 --- /dev/null +++ b/src/styles/blocks/container.scss @@ -0,0 +1,14 @@ +.container { + width: 100%; + max-width: $container-max; + margin: 0 auto; + padding-inline: 20px; + + @include on-tablet { + padding-inline: 34px; + } + + @include on-desktop { + padding-inline: 55px; + } +} diff --git a/src/styles/blocks/divider.scss b/src/styles/blocks/divider.scss new file mode 100644 index 000000000..4feb83800 --- /dev/null +++ b/src/styles/blocks/divider.scss @@ -0,0 +1,35 @@ +.divider { + width: 100%; + height: 1px; + + &--menu { + background-color: rgba($white, 0.5); + + @include on-tablet { + width: 1px; + height: 100%; + min-height: 145px; + } + } + + &--footer { + grid-column: 1 / -1; + margin-bottom: 40px; + background-color: rgba($green, 0.5); + + @include on-tablet { + grid-column: 2 / 6; + margin-block: 64px; + } + + @include on-desktop { + grid-column: 7 / 8; + grid-row: 1 / 2; + justify-self: center; + + width: 1px; + height: 100%; + margin-block: 0; + } + } +} diff --git a/src/styles/blocks/events.scss b/src/styles/blocks/events.scss new file mode 100644 index 000000000..18ec1bc7d --- /dev/null +++ b/src/styles/blocks/events.scss @@ -0,0 +1,178 @@ +.events { + @include page-grid; + + row-gap: 60px; + + @include on-tablet { + row-gap: 64px; + } + + @include on-desktop { + row-gap: 104px; + } + + &__item { + grid-column: 1 / -1; + + @include on-desktop { + @include page-grid; + + align-items: center; + } + + &--card { + position: relative; + display: block; + } + } + + &__image { + cursor: pointer; + + display: block; + + width: 100%; + height: auto; + margin-bottom: 20px; + + object-fit: cover; + + @include hover(transform, translateY(-10px)); + + @include on-tablet { + margin-bottom: 40px; + } + + @include on-desktop { + grid-column: span 7; + margin-bottom: 0; + } + } + + &__content { + @include on-desktop { + grid-column: 9 / -1; + } + } + + &__info { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 15px; + + @include on-tablet { + margin-bottom: 30px; + } + + @include on-desktop { + gap: 30px; + justify-content: stretch; + } + + &--card { + gap: 25px; + justify-content: center; + } + } + + &__name { + font-weight: 500; + line-height: 1; + color: $gray; + text-transform: uppercase; + } + + &__date { + font-weight: 700; + color: $green; + text-transform: uppercase; + } + + &__wrapper { + display: flex; + gap: 15px; + align-items: center; + margin-bottom: 15px; + + @include on-tablet { + margin-bottom: 20px; + } + } + + &__title { + font-family: $font-heading; + font-size: 28px; + font-weight: 400; + line-height: 1; + color: $title-color; + + @include on-tablet { + font-size: 36px; + } + } + + &__square { + display: flex; + width: 10px; + height: 10px; + + @include on-tablet { + width: 15px; + height: 15px; + } + } + + &__text { + color: $text-color; + + @include on-tablet { + width: 100%; + max-width: 460px; + } + } + + &__image-bg { + width: $full-width; + min-height: 210px; + margin-bottom: 0; + margin-left: $full-bleed-offset; + + background: url(/src/images/events/classicism-and-romanticism.png) center + no-repeat; + background-size: cover; + + @include on-tablet { + width: 100%; + min-height: 390px; + margin-left: 0; + } + + @include on-desktop { + width: $full-width; + min-height: 550px; + margin-left: $full-bleed-offset; + } + } + + &__card { + position: absolute; + z-index: 1; + bottom: 0; + left: 50%; + transform: translate3d(-50%, 50%, 0); + + width: 280px; + padding-block: 20px; + + text-align: center; + + background-color: $white; + box-shadow: 0 2px 0 0 rgba(26, 90, 76, 0.25); + + @include on-tablet { + width: 570px; + padding-block: 45px; + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..9a6dcf5cb --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,152 @@ +.footer { + &__content { + @include page-grid; + + padding: 50px 0 56px; + + @include on-tablet { + padding-bottom: 36px; + } + } + + &__logos { + display: flex; + grid-column: 1 / -1; + align-items: center; + justify-content: space-between; + + margin-bottom: 40px; + + @include on-tablet { + grid-column: 1 / 2; + flex-direction: column; + gap: 62px; + align-items: normal; + justify-content: normal; + + margin-bottom: 0; + } + } + + &__logo { + display: flex; + width: 63px; + height: 72px; + + @include hover(transform, scale(1.2)); + } + + &__social { + display: flex; + gap: 20px; + align-items: center; + + @include on-tablet { + gap: 32px; + } + + &-icon { + display: flex; + width: 24px; + height: 24px; + + @include hover(transform, scale(1.2)); + } + } + + &__contacts { + grid-column: 2 / -1; + width: 100%; + max-width: 220px; + color: $title-color; + + @include on-tablet { + grid-column: 4 / 6; + max-width: 220px; + } + + @include on-desktop { + grid-column: 5 / 7; + } + + &-title { + margin-bottom: 15px; + font-size: 14px; + font-weight: 400; + } + } + + &__contact { + display: block; + + font-size: 14px; + font-weight: 400; + color: $black; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } + + &__home-button { + display: flex; + grid-column: 2 / -1; + justify-content: flex-end; + justify-self: end; + + padding-bottom: 20px; + + @include on-tablet { + display: none; + } + } + + &__home-button-link { + display: flex; + align-items: center; + justify-content: center; + + width: 50px; + height: 50px; + border: 1px solid $green; + border-radius: 50%; + + background-color: $white; + } + + &__copyright { + display: flex; + grid-column: 1 / -1; + flex-direction: column; + gap: 10px; + align-items: center; + + &-text { + font-size: 12px; + font-weight: 300; + line-height: 1.4; + color: $title-color; + + @include on-tablet { + &--order-1 { + order: 1; + } + + &--order-2 { + order: 2; + } + } + } + + @include on-tablet { + grid-column: 1 / -1; + flex-direction: row; + justify-content: space-between; + } + + @include on-desktop { + padding-top: 90px; + } + } +} diff --git a/src/styles/blocks/gallery.scss b/src/styles/blocks/gallery.scss new file mode 100644 index 000000000..7d4597211 --- /dev/null +++ b/src/styles/blocks/gallery.scss @@ -0,0 +1,106 @@ +.gallery { + &__slider { + overflow: hidden; + + @include on-desktop { + display: none; + } + } + + &__track { + scroll-behavior: smooth; + scrollbar-width: none; + scroll-snap-type: x mandatory; + + overflow-x: auto; + display: flex; + gap: 16px; + + &::-webkit-scrollbar { + display: none; + } + + @include on-tablet { + gap: 20px; + } + } + + &__slide { + display: block; + width: 100%; + height: 410px; + object-fit: cover; + + @include on-tablet { + height: 543px; + } + } + + &__dots { + display: flex; + gap: 22px; + justify-content: center; + margin-top: 20px; + + a { + display: flex; + + width: 9px; + height: 9px; + border-radius: 50%; + + background-color: $gray-slide; + + transition: background-color $effectDuration ease; + + &.active { + background-color: $green; + } + } + + @include on-tablet { + margin-top: 32px; + } + + @include on-desktop { + display: none; + } + } + + &__category { + display: none; + + @include on-desktop { + display: grid; + row-gap: 30px; + } + } + + &__row { + display: none; + + @include on-desktop { + @include page-grid; + } + } + + &__link { + transition: transform $effectDuration ease-in-out; + + @include hover(transform, translateY(-10px)); + + &--square { + grid-column: span 4; + } + + &--wide { + grid-column: span 8; + } + } + + &__image { + width: 100%; + height: 100%; + object-fit: cover; + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..8ee3b1ced --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,218 @@ +.header { + position: relative; + min-height: 490px; + + &__container { + display: flex; + flex-direction: column; + row-gap: 20px; + + @include on-tablet { + flex-direction: row; + } + } + + &__burger-icon { + position: absolute; + z-index: 1; + top: 27px; + left: 20px; + + display: block; + + width: 24px; + height: 24px; + + background: url(/src/images/icon/burger-menu-2x.png) center no-repeat; + background-size: cover; + + @include hover(transform, scale(1.2)); + + &--mobile { + @include on-tablet { + display: none; + } + } + + &--tablet { + display: none; + + @include on-tablet { + top: 39px; + left: 34px; + display: block; + } + + @include on-desktop { + left: 55px; + } + } + } + + &__logo-link { + position: absolute; + top: 10px; + left: 50%; + transform: translateX(-50%); + + @include on-tablet { + position: absolute; + top: 15px; + left: 50px; + transform: none; + } + } + + &__logo { + display: block; + width: 55px; + height: 61px; + + @include hover(transform, scale(1.2)); + } + + &__media { + position: relative; + min-height: 300px; + + @include on-tablet { + order: 2; + width: 50%; + min-height: 384px; + } + + @include on-desktop { + width: 55%; + min-height: 655px; + } + } + + &__content { + position: relative; + + display: flex; + flex-direction: column; + row-gap: 20px; + justify-content: center; + + padding-inline: 20px; + + @include on-tablet { + row-gap: 40px; + order: 1; + width: 50%; + padding-left: 34px; + } + + @include on-desktop { + row-gap: 90px; + width: 45%; + padding-right: 30px; + padding-left: 55px; + } + } + + &__btn-container { + display: flex; + + @include on-desktop { + justify-content: flex-end; + } + } + + &__wrapper { + display: none; + + @include on-desktop { + position: absolute; + bottom: 90px; + left: 70px; + display: block; + } + + &-text { + display: none; + + @include on-desktop { + display: inline-block; + transition: $effectDuration ease; + } + } + + &-link { + display: none; + + @include on-desktop { + position: relative; + transform-origin: left bottom; + transform: rotate(-90deg); + + display: block; + + font-family: inherit; + font-size: 14px; + font-weight: 700; + line-height: 1; + color: $gray; + text-decoration: none; + text-transform: uppercase; + + &::before { + content: ''; + + position: absolute; + top: 50%; + right: 100%; + + display: block; + + width: 70px; + height: 1px; + margin-right: 20px; + + background-color: $green; + + transition: $effectDuration ease; + } + + &:hover { + &::before { + transform: translateX(-5px); + } + + .header__wrapper-text { + transform: translateX(5px); + } + } + } + } + } + + &__image { + display: block; + width: 100%; + height: 100%; + object-fit: cover; + } + + &__title { + font-family: $font-heading; + font-size: 45px; + font-weight: 700; + line-height: 1; + color: $black; + text-align: center; + text-transform: uppercase; + + @include on-tablet { + margin-top: 64px; + font-size: 54px; + line-height: 1.2; + text-align: left; + } + + @include on-desktop { + font-size: 72px; + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..d1cbea940 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,26 @@ +.menu { + min-height: 400px; + font-family: inherit; + font-weight: 500; + background-color: $green; + + @include on-tablet { + min-height: 225px; + } + + @include on-desktop { + min-height: 233px; + } + + &__content { + display: flex; + flex-direction: column; + padding-block: 27px; + + @include on-tablet { + flex-direction: row; + justify-content: space-between; + padding-block: 40px; + } + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 000000000..b4c9a7945 --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,101 @@ +.nav { + display: flex; + gap: 28px; + padding-bottom: 24px; + + @include on-tablet { + padding-bottom: 0; + } + + &__menu-close { + display: block; + + width: 24px; + height: 24px; + + background: url(/src/images/icon/menu-close-2x.png) center no-repeat; + background-size: cover; + + @include hover(transform, scale(1.2)); + + @include on-desktop { + margin-right: 74px; + } + } + + &__list { + display: flex; + flex-direction: column; + gap: 24px; + + &--footer-left { + @include on-tablet { + grid-column: 2 / 3; + } + + @include on-desktop { + grid-column: auto; + } + } + + &--footer-right { + @include on-tablet { + grid-column: 4 / 5; + } + + @include on-desktop { + grid-column: auto; + } + } + } + + &__item { + position: relative; + } + + &__link { + padding-block: 15px; + + font-family: inherit; + font-weight: 500; + line-height: 1; + color: $white; + text-decoration: none; + + @include on-desktop { + font-size: 22px; + } + + &:hover { + text-decoration: underline; + } + } + + &--footer { + @include page-grid; + + grid-column: 1 / -1; + padding-bottom: 80px; + + @include on-tablet { + padding-bottom: 120px; + } + + @include on-desktop { + display: flex; + grid-column: 8 / 11; + justify-content: space-between; + padding-bottom: 0; + } + } + + &--footer .nav__link { + font-size: 14px; + font-weight: 400; + color: $title-color; + } + + &--footer .nav__list { + gap: 20px; + } +} diff --git a/src/styles/blocks/overlay.scss b/src/styles/blocks/overlay.scss new file mode 100644 index 000000000..857323b71 --- /dev/null +++ b/src/styles/blocks/overlay.scss @@ -0,0 +1,10 @@ +.overlay { + position: fixed; + inset: 0; + + visibility: hidden; + opacity: 0; + background: rgba($black, 0.5); + + transition: all $effectDuration ease; +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..87215a09a --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,62 @@ +.page { + scroll-behavior: smooth; + overflow-x: hidden; + + &:has(.page__menu:target) { + overflow: hidden; + } + + &__body { + min-width: 320px; + margin: 0; + + font-family: $font-base; + font-size: 16px; + font-weight: 300; + line-height: 1.5; + color: $text-color; + + background: $white; + } + + &__menu { + pointer-events: none; + + position: fixed; + z-index: 2; + top: 0; + right: 0; + left: 0; + transform: translateY(-100%); + + opacity: 0; + + transition: all $effectDuration ease; + + &:target { + pointer-events: all; + transform: translateY(0); + opacity: 1; + } + + &:target ~ .overlay { + visibility: visible; + opacity: 1; + } + } + + &__main-content { + display: grid; + row-gap: 100px; + padding: 70px 0 100px; + + @include on-tablet { + padding-top: 88px; + } + + @include on-desktop { + row-gap: 200px; + padding-block: 200px; + } + } +} diff --git a/src/styles/blocks/reset.scss b/src/styles/blocks/reset.scss new file mode 100644 index 000000000..7da9fef52 --- /dev/null +++ b/src/styles/blocks/reset.scss @@ -0,0 +1,22 @@ +h1, +h2, +h3, +h4, +h5, +h6, +p { + margin: 0; +} + +ul, +ol { + margin: 0; + padding: 0; + list-style: none; +} + +*, +*::before, +*::after { + box-sizing: border-box; +} diff --git a/src/styles/blocks/schedule.scss b/src/styles/blocks/schedule.scss new file mode 100644 index 000000000..08cf50285 --- /dev/null +++ b/src/styles/blocks/schedule.scss @@ -0,0 +1,81 @@ +.schedule { + padding-top: 24px; + + &--menu { + color: $white; + } + + &--footer { + padding-top: 0; + color: $title-color; + + @include on-tablet { + grid-column: 2 / 4; + } + + @include on-desktop { + grid-column: 3 / 5; + } + } + + @include on-tablet { + padding-top: 0; + } + + &__title { + margin-bottom: 20px; + font-size: 14px; + font-weight: 400; + } + + &__content { + display: flex; + flex-direction: column; + + @include on-tablet { + flex-direction: row; + gap: 38px; + } + + &--footer { + grid-column: 1 / 2; + max-width: none; + + @include on-tablet { + flex-direction: column; + max-width: 220px; + } + + @include on-desktop { + gap: 30px; + } + } + } + + &__list { + margin-bottom: 16px; + + @include on-tablet { + margin-bottom: 0; + } + } + + &__item { + font-size: 14px; + font-weight: 400; + } + + &__strong { + font-weight: 600; + } + + &__text { + font-size: 14px; + font-weight: 400; + + @include on-tablet { + width: 100%; + max-width: 145px; + } + } +} diff --git a/src/styles/blocks/section.scss b/src/styles/blocks/section.scss new file mode 100644 index 000000000..d48f9d5e4 --- /dev/null +++ b/src/styles/blocks/section.scss @@ -0,0 +1,39 @@ +.section { + &__title { + margin-bottom: 40px; + + font-family: $font-heading; + font-size: 36px; + font-weight: 700; + line-height: 1; + color: $title-color; + text-align: center; + + @include on-tablet { + margin-bottom: 48px; + font-size: 48px; + text-align: left; + } + + @include on-desktop { + margin-bottom: 56px; + } + + &--white { + margin-bottom: 20px; + color: $white; + + @include on-tablet { + text-align: center; + } + } + } + + &--events { + padding-bottom: 70px; + + @include on-tablet { + padding-bottom: 110px; + } + } +} diff --git a/src/styles/blocks/subscribe.scss b/src/styles/blocks/subscribe.scss new file mode 100644 index 000000000..72453617d --- /dev/null +++ b/src/styles/blocks/subscribe.scss @@ -0,0 +1,98 @@ +.subscribe { + padding-block: 88px; + background: url(/src/images/subscribe/subscribe-bg.png) center no-repeat; + background-size: cover; + + @include on-tablet { + padding-block: 82px; + } + + @include on-desktop { + padding-block: 163px; + } + + &__subtitle { + margin-bottom: 50px; + + font-size: 18px; + font-weight: 400; + color: $white; + text-align: center; + + @include on-tablet { + margin-bottom: 64px; + } + + @include on-desktop { + margin-bottom: 72px; + } + } + + &__form { + input:-webkit-autofill, + input:-webkit-autofill:hover, + input:-webkit-autofill:focus { + -webkit-box-shadow: 0 0 0 1000px $white inset !important; + transition: background-color 9999s ease-in-out 0s; + + -webkit-text-fill-color: $black !important; + } + } + + &__field { + display: flex; + + @include on-tablet { + gap: 16px; + justify-content: center; + } + + @include on-desktop { + gap: 30px; + } + } + + &__input { + width: 100%; + height: 50px; + padding: 18px 24px; + border: none; + + font-family: $font-heading; + font-size: 14px; + font-weight: 400; + line-height: 1; + color: $black; + + background-color: $white; + + transition: + box-shadow $effectDuration ease, + border-color $effectDuration ease; + + &::placeholder { + font-family: $font-heading; + font-size: 14px; + font-weight: 400; + line-height: 1; + color: $gray; + } + + &:focus { + border-color: $green; + outline: none; + box-shadow: $focus-form; + } + + @include on-tablet { + max-width: 374px; + height: 70px; + padding-block: 28px; + } + + @include on-desktop { + max-width: 470px; + padding-inline: 32px; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..64245aa40 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -2,6 +2,18 @@ @import 'fonts'; @import 'typography'; -body { - background: $c-gray; -} +@import 'blocks/page'; +@import 'blocks/overlay'; +@import 'blocks/reset'; +@import 'blocks/container'; +@import 'blocks/header'; +@import 'blocks/button'; +@import 'blocks/menu'; +@import 'blocks/divider'; +@import 'blocks/schedule'; +@import 'blocks/nav'; +@import 'blocks/section'; +@import 'blocks/events'; +@import 'blocks/gallery'; +@import 'blocks/subscribe'; +@import 'blocks/footer'; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss index d7201e7b3..beed94834 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; + font-family: Montserrat, sans-serif; + font-weight: 700; } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..edb6c781b 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,36 @@ @mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; + transition: #{$_property} $effectDuration; &:hover { #{$_property}: $_toValue; } } + +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin page-grid { + --columns: 2; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 20px; + + @include on-tablet { + --columns: 6; + + column-gap: 30px; + } + + @include on-desktop { + --columns: 12; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..a1e738c1d 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,18 @@ -$c-gray: #eee; +$tablet-min-width: 768px; +$desktop-min-width: 1280px; +$container-max: 1600px; +$full-width: 100vw; +$full-bleed-offset: calc(-50vw + 50%); +$size-height: 100vh; +$white: #fff; +$black: #000; +$green: #1a5a4c; +$gray: #687480; +$gray-slide: #e0e0e0; +$text-color: #4e4e4e; +$title-color: #0f0e08; +$orange: #f14a27; +$focus-form: + 0 0 0 1px $green, + 0 0 0 4px rgba(0, 150, 120, 0.25); +$effectDuration: 0.3s;