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..dd9314302 100644 --- a/README.md +++ b/README.md @@ -1,55 +1,10 @@ -# 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 +A responsive museum landing page built to a Figma design with semantic HTML, modular SCSS, and minimal JavaScript. Sections +Tech stack and architecture -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) +HTML5: semantic structure (header/nav/main/section/footer) with anchor navigation and accessible labels. -- The design 1440px -- Desktop 1280px -- Tablet 640px -- Mobile (> 320px) +SCSS: modular architecture (variables, mixins, base, layout, components, blocks), BEM naming, single minified bundle, font-display: swap. -1. Implement the header with hamburger menu. -1. Implement `Художній Музей` block. -1. Implement `Актуальні події` block with two similar blocks `Йду і повертаюсь`, `І спогади і мрії`. -1. Implement `Від класицизму до романтизму` block. -1. Implement `Галерея` block and slider. -1. Implement `Підписка` block. -1. Implement footer. +JavaScript: lightweight image slider; minimal class toggling on hover states only where needed; no heavy frameworks or global state. -## Checklist for preparing a portfolio project for HR review - -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) - - -## 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`). -4. Run `npm start`. -5. Open one more terminal window for the next steps. -6. `git checkout -b develop` - to create new branch and switch on it. -7. Write you code in `src` folder. -8. Run `npm run lint` and fix code style errors. -9. Run `npm run deploy` to deploy your solution to `gh-pages`. -10. `git add . && git commit -m 'solution'` to save your changes. -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/). -14. Copy `DEMO LINK` to the PR description. - -> To update you PR repeat steps 7-11. +DEMO: https://artemyakhno.github.io/Museum/ diff --git a/package-lock.json b/package-lock.json index b4785d298..2d2560907 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,9 @@ "version": "1.0.0", "hasInstallScript": true, "license": "GPL-3.0", + "dependencies": { + "swiper": "^12.0.1" + }, "devDependencies": { "@linthtml/linthtml": "^0.9.6", "@mate-academy/eslint-config": "latest", @@ -14352,6 +14355,25 @@ "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==", "dev": true }, + "node_modules/swiper": { + "version": "12.0.1", + "resolved": "https://registry.npmjs.org/swiper/-/swiper-12.0.1.tgz", + "integrity": "sha512-Fi+gNw/tfc4hsGowQU5tRC/f1HFknkh4Vz8PaDI4JTinLUMTwhZyaovcH/va+iXq98BNUHN5ok0c2lEI82Fsgw==", + "funding": [ + { + "type": "patreon", + "url": "https://www.patreon.com/swiperjs" + }, + { + "type": "open_collective", + "url": "http://opencollective.com/swiper" + } + ], + "license": "MIT", + "engines": { + "node": ">= 4.7.0" + } + }, "node_modules/symbol-tree": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", diff --git a/package.json b/package.json index 178a3d841..f5bd6dfe6 100644 --- a/package.json +++ b/package.json @@ -54,5 +54,8 @@ "backstop": false, "cypress": true } + }, + "dependencies": { + "swiper": "^12.0.1" } } diff --git a/src/fonts/.gitkeep b/src/fonts/.gitkeep deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/fonts/Roboto-Regular-webfont.woff b/src/fonts/Roboto-Regular-webfont.woff deleted file mode 100755 index 8aa07d731..000000000 Binary files a/src/fonts/Roboto-Regular-webfont.woff and /dev/null differ diff --git a/src/images/Icons/Icon-Burger-menu-hover.svg b/src/images/Icons/Icon-Burger-menu-hover.svg new file mode 100644 index 000000000..a25313819 --- /dev/null +++ b/src/images/Icons/Icon-Burger-menu-hover.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/Icons/Icon-Burger-menu.svg b/src/images/Icons/Icon-Burger-menu.svg new file mode 100644 index 000000000..7290cdaa0 --- /dev/null +++ b/src/images/Icons/Icon-Burger-menu.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/Icons/Icon-Close.svg b/src/images/Icons/Icon-Close.svg new file mode 100644 index 000000000..e29f10494 --- /dev/null +++ b/src/images/Icons/Icon-Close.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/Icons/NA MU.svg b/src/images/Icons/NA MU.svg new file mode 100644 index 000000000..2cda206c3 --- /dev/null +++ b/src/images/Icons/NA MU.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/Icons/facebook-letter-logo.svg b/src/images/Icons/facebook-letter-logo.svg new file mode 100644 index 000000000..4ccaf0aba --- /dev/null +++ b/src/images/Icons/facebook-letter-logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/Icons/instagram.svg b/src/images/Icons/instagram.svg new file mode 100644 index 000000000..77b9fafa0 --- /dev/null +++ b/src/images/Icons/instagram.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/images/Icons/shevron-black.svg b/src/images/Icons/shevron-black.svg new file mode 100644 index 000000000..0da1e9b20 --- /dev/null +++ b/src/images/Icons/shevron-black.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/Icons/shevron-green.svg b/src/images/Icons/shevron-green.svg new file mode 100644 index 000000000..59f857ab0 --- /dev/null +++ b/src/images/Icons/shevron-green.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/Icons/shevron-white.svg b/src/images/Icons/shevron-white.svg new file mode 100644 index 000000000..7148adc24 --- /dev/null +++ b/src/images/Icons/shevron-white.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/actual-events/go-and-back.png b/src/images/actual-events/go-and-back.png new file mode 100644 index 000000000..a2be567af Binary files /dev/null and b/src/images/actual-events/go-and-back.png differ diff --git a/src/images/actual-events/memories-and-dream.png b/src/images/actual-events/memories-and-dream.png new file mode 100644 index 000000000..a6012cfae Binary files /dev/null and b/src/images/actual-events/memories-and-dream.png differ diff --git a/src/images/background/Natsionalnij-hudozhnij-muzej-Ukrayini-Kiyiv-10-1800x1200.png b/src/images/background/Natsionalnij-hudozhnij-muzej-Ukrayini-Kiyiv-10-1800x1200.png new file mode 100644 index 000000000..a197d8f27 Binary files /dev/null and b/src/images/background/Natsionalnij-hudozhnij-muzej-Ukrayini-Kiyiv-10-1800x1200.png differ diff --git a/src/images/background/sky.png b/src/images/background/sky.png new file mode 100644 index 000000000..55fb26f17 Binary files /dev/null and b/src/images/background/sky.png differ diff --git a/src/images/background/subscription.png b/src/images/background/subscription.png new file mode 100644 index 000000000..63ffb2222 Binary files /dev/null and b/src/images/background/subscription.png differ diff --git a/src/images/galery/chair.png b/src/images/galery/chair.png new file mode 100644 index 000000000..818c59377 Binary files /dev/null and b/src/images/galery/chair.png differ diff --git a/src/images/galery/home.png b/src/images/galery/home.png new file mode 100644 index 000000000..22028896e Binary files /dev/null and b/src/images/galery/home.png differ diff --git a/src/images/galery/sea.png b/src/images/galery/sea.png new file mode 100644 index 000000000..35f9889bd Binary files /dev/null and b/src/images/galery/sea.png differ diff --git a/src/images/galery/ukraine-woman.png b/src/images/galery/ukraine-woman.png new file mode 100644 index 000000000..6093092a6 Binary files /dev/null and b/src/images/galery/ukraine-woman.png differ diff --git a/src/index.html b/src/index.html index 8019b83ec..6b8d2fd09 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,491 @@ - + - Title + NAMU + - -

Hello Mate Academy

- + +
+
+
+ +
+ +

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

+
+ +

Квитки

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

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

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

Лекцій

+

26/08/2019 - 11:00

+
+

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

+
+
+
+ + +
+
+
+
+

Підписка

+

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

+ +
+
+
+
+
+ + + diff --git a/src/scripts/main.js b/src/scripts/main.js index ad9a93a7c..a2b1ca6ac 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1 +1,41 @@ -'use strict'; +/* eslint-disable no-console */ +import Swiper from 'swiper'; +import { Pagination, Autoplay } from 'swiper/modules'; +import 'swiper/swiper-bundle.min.css'; +Swiper.use([Pagination, Autoplay]); + +const swiper = new Swiper('.swiper', { + slidesPerView: 1, + spaceBetween: 16, + centeredSlides: false, + pagination: { + el: '.swiper-pagination', + clickable: true, + }, + autoplay: { + delay: 2000, + disableOnInteraction: false, + }, + breakpoints: { + 600: { + slidesPerView: 2, + spaceBetween: 20, + }, + }, +}); + +console.log(swiper); + +const buttons = document.querySelectorAll('.header__button'); + +buttons.forEach((btn) => { + const icon = btn.querySelector('.header__interaction'); + + const on = () => icon.classList.add('header__interaction--rotated'); + const off = () => icon.classList.remove('header__interaction--rotated'); + + btn.addEventListener('mouseenter', on); + btn.addEventListener('mouseleave', off); + btn.addEventListener('focusin', on); + btn.addEventListener('focusout', off); +}); 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 index 3280c3fe1..a39dd0395 100644 --- a/src/styles/_utils.scss +++ b/src/styles/_utils.scss @@ -1,3 +1,3 @@ @import 'utils/vars'; @import 'utils/mixins'; -@import 'utils/extends'; +@import 'utils/extends-typography'; diff --git a/src/styles/blocks.scss b/src/styles/blocks.scss new file mode 100644 index 000000000..45f39322b --- /dev/null +++ b/src/styles/blocks.scss @@ -0,0 +1,14 @@ +@import './blocks/header'; +@import './blocks/icon'; +@import './blocks/menu'; +@import './blocks/nav'; +@import './blocks/schedule'; +@import './blocks/main'; +@import './blocks/section'; +@import './blocks/actual-events'; +@import './blocks/event'; +@import './blocks/lection'; +@import './blocks/gallery'; +@import './blocks/swiper'; +@import './blocks/subscription'; +@import './blocks/footer'; diff --git a/src/styles/blocks/actual-events.scss b/src/styles/blocks/actual-events.scss new file mode 100644 index 000000000..bb6551ad7 --- /dev/null +++ b/src/styles/blocks/actual-events.scss @@ -0,0 +1,14 @@ +.actual-events { + &__content { + display: grid; + row-gap: 60px; + + @include on-tablet { + row-gap: 64px; + } + + @include on-desktop { + row-gap: 104px; + } + } +} diff --git a/src/styles/blocks/event.scss b/src/styles/blocks/event.scss new file mode 100644 index 000000000..0f6169e81 --- /dev/null +++ b/src/styles/blocks/event.scss @@ -0,0 +1,80 @@ +.event { + @include page-grid; + + row-gap: 20px; + text-decoration: none; + + @include on-tablet { + row-gap: 40px; + } + + @include on-desktop { + row-gap: 0; + } + &__photo { + width: 100%; + grid-column: 1/-1; + object-fit: cover; + height: 210px; + + @include on-tablet { + height: 520px; + } + + @include on-desktop { + grid-column: 1/8; + } + + @include hover(transform, scale(1.1)); + } + &__details { + grid-column: 1/-1; + + @include on-desktop { + grid-column: 9/-1; + } + + display: flex; + align-items: center; + } + &__dates { + display: flex; + justify-content: space-between; + + @include on-tablet { + justify-content: start; + column-gap: 48px; + } + } + &__label { + @extend %fm-imb-fw-500-fz-14-lh-100; + } + &__date { + @extend %fm-imb-fw-700-fz-14-lh-100; + + color: $prime-color; + font-size: 16px; + } + &__title { + @extend %h3; + + margin-top: 30px; + margin-bottom: 15px; + position: relative; + width: fit-content; + + &::after { + content: ''; + width: 15px; + aspect-ratio: 1; + position: absolute; + right: -30px; + top: 50%; + transform: translateY(-50%); + background-color: $orange-color; + } + } + &__info { + @extend %fm-imb-fw-300-fz-16-lh-150; + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..9846944c1 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,174 @@ +.footer { + &__content { + padding-block: 50px; + + @include page-grid; + + grid-template-rows: repeat(5, auto); + + @include on-tablet { + grid-template-rows: repeat(4, auto); + } + + @include on-desktop { + grid-template-rows: repeat(2, auto); + row-gap: 98px; + } + } + + &__logo-socials { + display: flex; + justify-content: space-between; + + grid-column: 1/-1; + margin-bottom: 40px; + + @include on-tablet { + flex-direction: column; + justify-content: start; + grid-column: 1/2; + row-gap: 60px; + margin-bottom: 0; + } + + @include on-desktop { + grid-column: 1/3; + } + } + + &__logo { + display: block; + width: 70px; + height: 72px; + + @include hover(transform, scale(1.2)); + } + + &__socials { + display: flex; + column-gap: 20px; + } + &__schedule { + grid-column: 1/2; + margin-bottom: 70px; + color: $main-text-color; + + @include on-tablet { + grid-column: 2/4; + margin-bottom: 64px; + } + + @include on-desktop { + grid-column: 3/5; + margin-bottom: 0; + } + } + &__contact { + grid-column: 2/-1; + display: flex; + flex-direction: column; + row-gap: 20px; + position: relative; + + @extend %schedule-text; + + @include on-tablet { + grid-column: 4/6; + row-gap: 1/-1; + } + + @include on-desktop { + grid-column: 5/7; + } + } + + &__contact-info { + display: flex; + flex-direction: column; + row-gap: 2px; + } + + &__contact-data { + color: $main-text-color; + text-decoration: none; + font-weight: 400; + font-size: 14px; + + @include hover(font-weight, 500); + + &--email { + white-space: nowrap; + } + } + + &__go-up { + position: absolute; + border: 1px solid $prime-color; + border-radius: 50px; + bottom: 20px; + right: 0; + width: 50px; + height: 50px; + background-image: url(../images/Icons/shevron-green.svg); + background-repeat: no-repeat; + background-position: center; + + @include on-tablet { + display: none; + } + } + + &__center { + grid-column: 1/-1; + height: 1px; + background-color: #1a5a4c80; + margin-bottom: 40px; + + @include on-tablet { + grid-column: 2/-2; + margin-bottom: 64px; + } + + @include on-desktop { + width: 1px; + grid-column: 7/8; + height: 100%; + margin-bottom: 0; + justify-self: center; + } + } + &__nav { + grid-column: 1/-1; + margin-bottom: 80px; + + @include on-tablet { + grid-column: 2/-2; + margin-bottom: 120px; + } + + @include on-desktop { + grid-column: 8/12; + margin-bottom: 0; + } + } + + &__adition-info { + grid-column: 1/-1; + display: flex; + flex-direction: column; + align-items: center; + row-gap: 10px; + + @extend %fm-imb-fw-300-fz-12-lh-140; + + @include on-tablet { + flex-direction: row; + justify-content: space-between; + } + } + &__copyright { + @include on-tablet { + order: -1; + } + } +} diff --git a/src/styles/blocks/gallery.scss b/src/styles/blocks/gallery.scss new file mode 100644 index 000000000..5fcd8671f --- /dev/null +++ b/src/styles/blocks/gallery.scss @@ -0,0 +1,30 @@ +.gallery { + &__content { + display: none; + + @include on-desktop { + @include page-grid; + + row-gap: 30px; + } + } + + &__photo { + height: 100%; + object-fit: cover; + &--short { + grid-column: span 4; + } + &--long { + grid-column: span 8; + } + &--tall { + height: 600px; + } + &--small { + height: 360px; + } + + @include hover(transform, scale(1.05)); + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..b7a716853 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,187 @@ +.header { + display: flex; + flex-direction: column; + row-gap: 20px; + + @include on-tablet { + flex-direction: row; + column-gap: 20px; + height: 100vh; + } + + @include on-desktop { + max-width: 1280px; + margin: auto; + column-gap: 30px; + } + + &__left-side { + order: 1; + width: 100%; + box-sizing: border-box; + padding-inline: 20px; + display: flex; + flex-direction: column; + justify-content: space-between; + row-gap: 20px; + + @include on-tablet { + order: 0; + width: auto; + padding: 40px 0 34px 20px; + } + + @include on-desktop { + padding-left: 55px; + padding-bottom: 0; + } + } + + &__text-logo { + @extend %h1; + + text-align: center; + + @include on-tablet { + max-width: 340px; + text-align: left; + } + + @include on-desktop { + max-width: 470px; + } + } + + &__tickets-events { + box-sizing: border-box; + + @include on-desktop { + height: 188px; + position: relative; + } + } + &__button { + box-sizing: border-box; + border: 1px solid $prime-color; + display: flex; + align-items: center; + text-decoration: none; + + @include on-tablet { + width: 270px; + } + + @include on-desktop { + position: absolute; + right: 0; + } + } + &__tickets { + flex-grow: 1; + + text-align: center; + + @extend %fm-imb-fw-500-fz-16-lh-100; + + text-transform: uppercase; + } + + &__interaction { + width: 50px; + height: 50px; + background-color: $prime-color; + background-image: url(../images/Icons/shevron-white.svg); + background-repeat: no-repeat; + background-position: center; + transition: transform $effect-duration ease; + + @include on-tablet { + width: 70px; + height: 70px; + } + &--rotated { + transform: rotate(-90deg); + } + } + + &__events { + display: none; + + @extend %fm-imb-fw-700-fz-14-lh-100; + + @include on-desktop { + display: block; + position: absolute; + width: 1px; + height: 70px; + background-color: $prime-color; + bottom: 0; + left: 0; + + &::before { + content: 'ПОДІЇ'; + position: absolute; + left: 50%; + bottom: calc(100% + 20px); + writing-mode: vertical-rl; + transform: translateX(-50%) rotate(180deg); + } + &::after { + content: ''; + position: absolute; + inset: -12px -16px; + } + } + } + + &__right-side { + background-image: url(../images/background/Natsionalnij-hudozhnij-muzej-Ukrayini-Kiyiv-10-1800x1200.png); + background-size: cover; + background-repeat: no-repeat; + background-position: center bottom; + width: 100%; + padding-inline: 20px; + padding-top: 9px; + box-sizing: border-box; + aspect-ratio: 1; + + @include on-tablet { + width: auto; + flex-grow: 1; + padding-inline: 80px; + padding-top: 15px; + aspect-ratio: 0; + } + } + + &__up-side { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + } + + &__logo { + width: 55px; + height: 61px; + + @include hover(transform, scale(1.2)); + + @include on-desktop { + height: 72px; + } + } + + &__burger--mobile { + @include on-tablet { + display: none; + } + } + &__burger--desktop { + display: none; + + @include on-tablet { + display: block; + } + } +} diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss new file mode 100644 index 000000000..06a082ac3 --- /dev/null +++ b/src/styles/blocks/icon.scss @@ -0,0 +1,24 @@ +.icon { + display: block; + width: 24px; + height: 24px; + background-size: cover; + + @include hover(transform, scale(1.2)); + + &--burger { + background-image: url(../images/icons/Icon-Burger-menu.svg); + &:hover { + background-image: url(../images/icons/Icon-Burger-menu-hover.svg); + } + } + &--close { + background-image: url(../images/icons/Icon-Close.svg); + } + &--facebook { + background-image: url(../images/Icons/facebook-letter-logo.svg); + } + &--instagram { + background-image: url(../images/Icons/instagram.svg); + } +} diff --git a/src/styles/blocks/lection.scss b/src/styles/blocks/lection.scss new file mode 100644 index 000000000..8d78205e5 --- /dev/null +++ b/src/styles/blocks/lection.scss @@ -0,0 +1,84 @@ +.lection { + padding-bottom: 0; + &__photo { + background-image: url(../images/background/sky.png); + background-size: cover; + height: 210px; + + @include on-tablet { + height: 390px; + padding-bottom: 0; + } + + @include on-desktop { + height: 550px; + padding-bottom: 0; + } + } + &__details { + transform: translateY(-50%); + background-color: #fff; + box-shadow: 0 2px 0 0 #1a5a4c40; + box-sizing: border-box; + max-width: 570px; + padding-block: 20px; + + margin-left: auto; + margin-right: auto; + + display: flex; + flex-direction: column; + row-gap: 20px; + + @include on-tablet { + padding-block: 45px; + padding-inline: 55px; + row-gap: 24px; + } + + @include on-desktop { + row-gap: 16px; + } + } + &__data { + display: flex; + justify-content: space-between; + padding-inline: 20px; + + @include on-tablet { + justify-content: start; + column-gap: 160px; + padding-inline: 0; + } + } + + &__label { + @extend %fm-imb-fw-500-fz-14-lh-100; + + text-align: center; + + @include on-tablet { + text-align: start; + } + } + &__date { + @extend %fm-imb-fw-700-fz-14-lh-100; + + color: $prime-color; + font-size: 16px; + text-align: center; + + @include on-tablet { + text-align: start; + } + } + &__title { + @extend %h3; + + text-align: center; + + @include on-tablet { + text-align: start; + } + } +} diff --git a/src/styles/blocks/main.scss b/src/styles/blocks/main.scss new file mode 100644 index 000000000..1db77cb61 --- /dev/null +++ b/src/styles/blocks/main.scss @@ -0,0 +1,18 @@ +.main { + padding-top: 70px; + display: grid; + + // display: flex; + // flex-direction: column; + + row-gap: 100px; + + @include on-tablet { + padding-top: 88; + } + + @include on-desktop { + padding-top: 200; + row-gap: 200px; + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..36044a3f6 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,48 @@ +.menu { + overflow: auto; + background-color: $prime-color; + padding-block: 28px; + + @include on-tablet { + padding-block: 40px; + } + + &__content { + display: flex; + flex-direction: column; + row-gap: 24px; + + @include on-tablet { + flex-direction: row; + justify-content: space-between; + } + } + &__center-side { + background-color: #ffffff80; + height: 1px; + + @include on-tablet { + width: 1px; + height: 145px; + } + } + &__left-side { + display: flex; + justify-content: space-between; + + @include on-tablet { + column-gap: 38px; + } + + @include on-desktop { + column-gap: 102px; + } + } + &__right-side { + color: #fff; + + @include on-tablet { + flex-direction: column; + } + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 000000000..1a3a7bf49 --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,82 @@ +.nav { + &--header { + display: flex; + column-gap: 28px; + + @include on-tablet { + column-gap: 20px; + } + + @include on-desktop { + column-gap: 60px; + } + } + &--footer { + display: grid; + + --colums: 2; + + grid-template-columns: repeat(var(--colums), 1fr); + grid-template-rows: repeat(2, auto); + + @include on-tablet { + --colums: 4; + } + } + + &__list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + flex-direction: column; + + &--header { + width: 100px; + row-gap: 24px; + } + + &--footer { + grid-column: span 1; + row-gap: 20px; + + @include on-tablet { + grid-column: span 2; + } + } + } + + &__link { + --back-color: #fff; + + position: relative; + + &--header { + @extend %nav-header-text; + } + + &--footer { + @extend %nav-footer-text; + + --back-color: #0f0e08; + } + + &::before { + content: ''; + position: absolute; + left: 0; + bottom: -4; + width: 100%; + height: 1px; + background-color: var(--back-color); + transform: scaleX(0); + transform-origin: left center; + transition: transform 240ms ease $effect-duration; + } + + // ховер: розгортання лінії + &:hover::before { + transform: scaleX(1); + } + } +} diff --git a/src/styles/blocks/schedule.scss b/src/styles/blocks/schedule.scss new file mode 100644 index 000000000..282dcab0b --- /dev/null +++ b/src/styles/blocks/schedule.scss @@ -0,0 +1,40 @@ +.schedule { + @extend %schedule-text; + + display: flex; + flex-direction: column; + row-gap: 20px; + &__top { + line-height: 140%; + } + &__bottom { + display: flex; + flex-direction: column; + row-gap: 16px; + + &--header { + @include on-tablet { + flex-direction: row; + column-gap: 24px; + } + + @include on-desktop { + column-gap: 30px; + } + } + } + &__work-days { + width: 100%; + + @include on-tablet { + width: 170px; + } + } + &__days-off { + width: 100%; + + @include on-tablet { + width: 144px; + } + } +} diff --git a/src/styles/blocks/section.scss b/src/styles/blocks/section.scss new file mode 100644 index 000000000..be205b8e2 --- /dev/null +++ b/src/styles/blocks/section.scss @@ -0,0 +1,14 @@ +.section { + min-width: 0; + &__title { + @extend %h2; + + padding-bottom: 40px; + text-align: center; + + @include on-tablet { + text-align: left; + padding-bottom: 48px; + } + } +} diff --git a/src/styles/blocks/subscription.scss b/src/styles/blocks/subscription.scss new file mode 100644 index 000000000..5f9d3ae95 --- /dev/null +++ b/src/styles/blocks/subscription.scss @@ -0,0 +1,90 @@ +.subscription { + background-image: url(../images/background/subscription.png); + background-size: cover; + background-repeat: no-repeat; + padding-block: 88px; + + @include on-tablet { + padding-block: 82px; + } + + @include on-desktop { + padding-block: 163px; + } + + &__content { + @include page-grid; + } + &__form { + grid-column: 1/-1; + + @include on-tablet { + grid-column: 2/-2; + } + + @include on-desktop { + grid-column: 4/-4; + } + } + + &__title { + @extend %h2; + + text-align: center; + color: #fff; + } + &__info { + @extend %fm-imb-fw-400-fz-18-lh-150; + + text-align: center; + + margin-top: 20px; + margin-bottom: 50px; + + @include on-tablet { + margin-top: 16px; + margin-bottom: 64px; + } + + @include on-desktop { + margin-bottom: 72px; + } + } + + &__email { + display: flex; + + @include on-tablet { + column-gap: 16px; + } + + @include on-desktop { + column-gap: 30px; + } + } + + &__input { + flex-grow: 1; + + @extend %input-main; + } + + &__target { + width: 50px; + cursor: pointer; + aspect-ratio: 1; + border: 0; + padding: 0; + background-color: $orange-color; + + background-image: url(../images/Icons/shevron-black.svg); + background-repeat: no-repeat; + background-position: center; + + @include on-tablet { + width: 70px; + } + + @include hover(background-image, url(../images/Icons/shevron-white.svg)); + } +} diff --git a/src/styles/blocks/swiper.scss b/src/styles/blocks/swiper.scss new file mode 100644 index 000000000..2b4f6c4f7 --- /dev/null +++ b/src/styles/blocks/swiper.scss @@ -0,0 +1,22 @@ +.swiper { + overflow: hidden; + + @include on-desktop { + display: none; + } + + &-slide { + height: 510px; + display: block; + object-fit: cover; + + @include on-tablet { + height: 543px; + } + } + &__photo { + width: 100%; + height: 100%; + object-fit: cover; + } +} diff --git a/src/styles/helpers/container.scss b/src/styles/helpers/container.scss new file mode 100644 index 000000000..a45a4af30 --- /dev/null +++ b/src/styles/helpers/container.scss @@ -0,0 +1,10 @@ +.container { + @include padding-inline; + + box-sizing: border-box; + + @include on-desktop { + max-width: 1280px; + margin-inline: auto; + } +} diff --git a/src/styles/layout/layout.scss b/src/styles/layout/layout.scss new file mode 100644 index 000000000..a6aad6a17 --- /dev/null +++ b/src/styles/layout/layout.scss @@ -0,0 +1,33 @@ +@import 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap'; +@import 'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap'; + +.page { + font-family: Montserrat, Helvetica, sans-serif; + scroll-behavior: smooth; + &__body { + margin: 0; + background: #fff; + min-width: 320px; + } + &__menu { + position: fixed; + top: 0; + left: 0; + right: 0; + opacity: 0; + height: 100vh; + background-color: rgba(0, 0, 0, 0.4); + visibility: hidden; + + transform: translateY(-100%); + transition: all $effect-duration; + &:target { + opacity: 1; + visibility: visible; + transform: translateY(0); + } + } + &:has(.page__menu:target) { + overflow: hidden; /* not to scroll the page */ + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..2f067c942 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,5 @@ +@import 'reset'; @import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} +@import './layout/layout'; +@import './helpers/container'; +@import 'blocks'; diff --git a/src/styles/reset.scss b/src/styles/reset.scss new file mode 100644 index 000000000..4a19c1e54 --- /dev/null +++ b/src/styles/reset.scss @@ -0,0 +1,131 @@ +/* stylelint-disable */ +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} + +body { + line-height: 1; +} + +ol, +ul { + list-style: none; +} + +blockquote, +q { + quotes: none; +} + +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ''; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} +/* stylelint-enable */ diff --git a/src/styles/utils/_extends-typography.scss b/src/styles/utils/_extends-typography.scss new file mode 100644 index 000000000..86f6fa5ff --- /dev/null +++ b/src/styles/utils/_extends-typography.scss @@ -0,0 +1,158 @@ +%h1 { + font: inherit; + font-weight: 700; + font-size: 45px; + line-height: 100%; + letter-spacing: 0; + color: $main-text-color; + + @include on-tablet { + font-size: 54px; + line-height: 120%; + } + + @include on-desktop { + font-size: 72px; + } +} + +%h2 { + font-family: inherit; + font-weight: 700; + font-size: 36px; + line-height: 100%; + letter-spacing: 0; + color: $main-text-color; + + @include on-tablet { + font-size: 48px; + } +} +%h3 { + font-family: inherit; + font-weight: 400; + font-size: 28px; + line-height: 100%; + letter-spacing: 0; + color: $main-text-color; + + @include on-tablet { + font-size: 36px; + } +} +%fm-imb-fw-500-fz-16-lh-100 { + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 100%; + letter-spacing: 0; + color: $main-text-color; +} + +%fm-imb-fw-700-fz-14-lh-100 { + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 700; + font-size: 14px; + line-height: 100%; + letter-spacing: 0; + color: $adition-text-color; +} + +%fm-imb-fw-500-fz-14-lh-100 { + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 100%; + letter-spacing: 0; + color: $adition-text-color; +} + +%fm-imb-fw-300-fz-16-lh-150 { + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 300; + font-size: 16px; + line-height: 150%; + letter-spacing: 0; + color: $third-text-color; +} + +%fm-imb-fw-300-fz-12-lh-140 { + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 300; + font-size: 12px; + line-height: 140%; + letter-spacing: 0; + color: $main-text-color; +} + +%nav-header-text { + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 100%; + letter-spacing: 0; + text-decoration: none; + color: #fff; + + @include on-desktop { + font-size: 22px; + } +} +%nav-footer-text { + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 100%; + letter-spacing: 0; + text-decoration: none; + color: $main-text-color; +} + +%schedule-text { + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 150%; + letter-spacing: 0; +} + +%fm-imb-fw-400-fz-18-lh-150 { + font-family: 'IBM Plex Sans', sans-serif; + font-weight: 400; + font-size: 18px; + line-height: 150%; + letter-spacing: 0; + color: #fff; + + @include on-tablet { + line-height: 100%; + } +} + +%input-main { + display: block; + font-family: inherit; + box-sizing: border-box; + border: 0; + background-color: #fff; + color: $main-text-color; + font-weight: 400; + font-size: 14px; + line-height: 100%; + outline: none; + transition: border-color, $effect-duration; + padding: 18px 24px; + max-height: 50px; + + @include on-tablet { + padding: 28px 24px; + max-height: 70px; + } + + @include on-desktop { + padding: 28px 32px; + } + &::placeholder { + color: $adition-text-color; + } +} 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..84d2fa1e5 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,55 @@ @mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; + transition: #{$_property} $effect-duration; &:hover { #{$_property}: $_toValue; } } + +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin on-mobile { + @media (max-width: $tablet-min-width) { + @content; + } +} + +@mixin page-grid { + --columns: 2; + + display: grid; + column-gap: 20px; + + grid-template-columns: repeat(var(--columns), 1fr); + + @include on-tablet { + column-gap: 30px; + + --columns: 6; + } + + @include on-desktop { + --columns: 12; + } +} + +@mixin padding-inline { + padding-inline: 20px; + + @include on-tablet { + padding-inline: 34px; + } + + @include on-desktop { + padding-inline: 55px; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..1b356c9cb 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,9 @@ -$c-gray: #eee; +$phone-min-width: 320px; +$tablet-min-width: 768px; +$desktop-min-width: 1280px; +$prime-color: #1a5a4c; +$orange-color: #f14a27; +$main-text-color: #0f0e08; +$third-text-color: #4e4e4e; +$adition-text-color: #687480; +$effect-duration: 0.3s;