diff --git a/.eslintignore b/.eslintignore index 9b1c8b133c..89f52aaca4 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1 +1,2 @@ +/backstop_data /dist diff --git a/.eslintrc.js b/.eslintrc.js index 9af0c3ecfb..66c1bb9901 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,3 +1,3 @@ module.exports = { - extends: ['@mate-academy/eslint-config', 'plugin:cypress/recommended'], + extends: '@mate-academy/eslint-config', }; diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index ba7659c764..b9c880dccd 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -14,16 +14,16 @@ jobs: node-version: [14.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 start & sleep 5 && npm test - - name: Upload tests report(cypress mochaawesome merged HTML report) - if: ${{ always() }} - uses: actions/upload-artifact@v2 - with: - name: report - path: reports + - 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/.gitignore b/.gitignore index ecb0748b03..1558091fd7 100644 --- a/.gitignore +++ b/.gitignore @@ -9,10 +9,7 @@ node_modules .DS_Store # Generated files +backstop_data dist .cache .parcel-cache -raw_reports -cypress/screenshots -cypress/videos -reports diff --git a/.stylelintignore b/.stylelintignore index 9b1c8b133c..f1d4bd2757 100644 --- a/.stylelintignore +++ b/.stylelintignore @@ -1 +1,2 @@ +/backstop_data/ /dist diff --git a/README.md b/README.md index 2663d4520e..23d3fdb79b 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,7 @@ Follow the videos in this and next lessons to implement the page block by block - Start writing styles in the `main.scss` file. It is be explained in the `Sass` lesson - **DON'T** try to do it `Pixel Perfect` - implement it the most `simple` way so it looks similar; - When done check yourself using the [CHECKLIST](./checklist.md) when finished; -- Deploy and create a Pull Request with a [DEMO LINK](https://.github.io/layout_landing-page/) +- Deploy and create a Pull Request with a [DEMO LINK](https://IvanSierov.github.io/layout_landing-page/) # Tips & Hints - Check `background-image: url()` to be relative to the `main.scss`. So should start with `../images`. diff --git a/package.json b/package.json index 44f5d80b29..48e177668b 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "@linthtml/linthtml": "^0.9.5", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^1.7.3", + "@mate-academy/scripts": "^1.8.1", "@mate-academy/stylelint-config": "latest", "@parcel/transformer-sass": "^2.12.0", "cypress": "^9.7.0", diff --git a/src/images/exhibitions/Bodhisattvas_One.png b/src/images/exhibitions/Bodhisattvas_One.png new file mode 100644 index 0000000000..5b58edb177 Binary files /dev/null and b/src/images/exhibitions/Bodhisattvas_One.png differ diff --git a/src/images/exhibitions/Bodhisattvas_Three.png b/src/images/exhibitions/Bodhisattvas_Three.png new file mode 100644 index 0000000000..c6b56f2e73 Binary files /dev/null and b/src/images/exhibitions/Bodhisattvas_Three.png differ diff --git a/src/images/exhibitions/Bodhisattvas_Two.png b/src/images/exhibitions/Bodhisattvas_Two.png new file mode 100644 index 0000000000..122c80405a Binary files /dev/null and b/src/images/exhibitions/Bodhisattvas_Two.png differ diff --git a/src/images/exhibitions/Disney_One.png b/src/images/exhibitions/Disney_One.png new file mode 100644 index 0000000000..af1277ff97 Binary files /dev/null and b/src/images/exhibitions/Disney_One.png differ diff --git a/src/images/exhibitions/Disney_Two.png b/src/images/exhibitions/Disney_Two.png new file mode 100644 index 0000000000..c2b3043000 Binary files /dev/null and b/src/images/exhibitions/Disney_Two.png differ diff --git a/src/images/exhibitions/Disney_Two_mobile.png b/src/images/exhibitions/Disney_Two_mobile.png new file mode 100644 index 0000000000..eca0c811df Binary files /dev/null and b/src/images/exhibitions/Disney_Two_mobile.png differ diff --git a/src/images/exhibitions/Old_Masters_One.png b/src/images/exhibitions/Old_Masters_One.png new file mode 100644 index 0000000000..907b59128b Binary files /dev/null and b/src/images/exhibitions/Old_Masters_One.png differ diff --git a/src/images/exhibitions/Old_Masters_One_mobile.png b/src/images/exhibitions/Old_Masters_One_mobile.png new file mode 100644 index 0000000000..f056c038e1 Binary files /dev/null and b/src/images/exhibitions/Old_Masters_One_mobile.png differ diff --git a/src/images/exhibitions/Old_Masters_Two.png b/src/images/exhibitions/Old_Masters_Two.png new file mode 100644 index 0000000000..f5fd5d84d6 Binary files /dev/null and b/src/images/exhibitions/Old_Masters_Two.png differ diff --git a/src/images/footer/footer__desktop.png b/src/images/footer/footer__desktop.png new file mode 100644 index 0000000000..fd7959afd5 Binary files /dev/null and b/src/images/footer/footer__desktop.png differ diff --git a/src/images/footer/footer__mobile.png b/src/images/footer/footer__mobile.png new file mode 100644 index 0000000000..ad845fc74a Binary files /dev/null and b/src/images/footer/footer__mobile.png differ diff --git a/src/images/footer/footer__tablet.png b/src/images/footer/footer__tablet.png new file mode 100644 index 0000000000..ff79ce07a5 Binary files /dev/null and b/src/images/footer/footer__tablet.png differ diff --git a/src/images/header-bg.png b/src/images/header-bg.png new file mode 100644 index 0000000000..e09c5e0c44 Binary files /dev/null and b/src/images/header-bg.png 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 0000000000..1fc00346bf --- /dev/null +++ b/src/images/icons/Icon-Burger-menu-hover.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-burger-tablet.svg b/src/images/icons/icon-burger-tablet.svg new file mode 100644 index 0000000000..5d6b5a0b38 --- /dev/null +++ b/src/images/icons/icon-burger-tablet.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-burger.svg b/src/images/icons/icon-burger.svg new file mode 100644 index 0000000000..b5ea4b25d0 --- /dev/null +++ b/src/images/icons/icon-burger.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-close-tablet.svg b/src/images/icons/icon-close-tablet.svg new file mode 100644 index 0000000000..9a9e8c5e0d --- /dev/null +++ b/src/images/icons/icon-close-tablet.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-close.svg b/src/images/icons/icon-close.svg new file mode 100644 index 0000000000..75c57fb3f7 --- /dev/null +++ b/src/images/icons/icon-close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-phone-tablet.svg b/src/images/icons/icon-phone-tablet.svg new file mode 100644 index 0000000000..0c2c52cb54 --- /dev/null +++ b/src/images/icons/icon-phone-tablet.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-phone.svg b/src/images/icons/icon-phone.svg new file mode 100644 index 0000000000..ce3f027938 --- /dev/null +++ b/src/images/icons/icon-phone.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/logo-2x.png b/src/images/logo-2x.png new file mode 100644 index 0000000000..4a6bf571c8 Binary files /dev/null and b/src/images/logo-2x.png differ diff --git a/src/images/logo-tablet-2x.png b/src/images/logo-tablet-2x.png new file mode 100644 index 0000000000..2a7d0acf8c Binary files /dev/null and b/src/images/logo-tablet-2x.png differ diff --git a/src/images/logo-tablet.png b/src/images/logo-tablet.png new file mode 100644 index 0000000000..6b7b4ab5a7 Binary files /dev/null and b/src/images/logo-tablet.png differ diff --git a/src/images/logo.png b/src/images/logo.png new file mode 100644 index 0000000000..384318b2df Binary files /dev/null and b/src/images/logo.png differ diff --git a/src/images/products/Collection_Areas.png b/src/images/products/Collection_Areas.png new file mode 100644 index 0000000000..391e41eabe Binary files /dev/null and b/src/images/products/Collection_Areas.png differ diff --git a/src/images/products/Travel.png b/src/images/products/Travel.png new file mode 100644 index 0000000000..fa6ae386f2 Binary files /dev/null and b/src/images/products/Travel.png differ diff --git a/src/images/products/Virtual_Group_Tours.png b/src/images/products/Virtual_Group_Tours.png new file mode 100644 index 0000000000..690249d7ba Binary files /dev/null and b/src/images/products/Virtual_Group_Tours.png differ diff --git a/src/index.html b/src/index.html index 428e3b54bb..b5e6d4cc4a 100644 --- a/src/index.html +++ b/src/index.html @@ -1,22 +1,609 @@ + - + - Landing Page + THE MET + + + + - -

Landing Page

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

+ THE MET FIFTH AVENUE +

+ + +1 212-535-7710 + +
+
+

+ THE MET CLOISTER +

+ + +1 212-923-3700 + +
+
+ +
+ + +
+
+
+
+

+ Welcome +
+ to The MET +

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

Plan your visit

+

+ Museum hours +

+
+
+
+
+
+

+ The Met Fifth Avenue +

+
+
    +
  • + 10 am - 5 pm +
    • +
  • + 10 am - 9 pm +
    • +
  • + Closed +
    • +
+
    +
  • Sun, Mon, Tue, Thu
    • +
  • Fri, Sat
    • +
  • Wen
    • +
+
+
+

+ Closed on +

+

+ Thanksgiving Day, Dec 25, Jan 1, and the first Monday in + May. +

+
+
+
+

The Met Cloisters

+
+
    +
  • + 10 am – 4.30 pm +
    • +
  • + Closed +
    • +
+
    +
  • Thu - Tue
    • +
  • Fri, Sat
    • +
+
+
+

+ Closed on +

+

+ Thanksgiving Day, Dec 25, Jan 1 +

+
+
+
+
+
+ +
+
+
+

Now On View

+

+ Explore exhibition gallery guides, videos, articles, and more. +

+
+ +
+
+ + Old_Masters_One + + + Old_Masters_One + + + Old_Masters_Two + +
+

A New Look at Old Masters

+

+ December 12, 2020 – Through Spring 2023 +

+
+ +
+
+ + Bodhisattvas_One + + + Bodhisattvas_Two + + + Bodhisattvas_Three + +
+

+ Bodhisattvas of Wisdom, Compassion, and Power +

+

+ March 27, 2021 – October 30, 2022 +

+
+ +
+
+ + Disney_One + + + Disney_Two + + + Disney_Two + +
+

+ Inspiring Walt Disney: The Animation of French Decorative Arts +

+

+ December 10, 2021 – March 6, 2022 +

+
+
+ +
+ + View all exhibitions + +
+
+ +
+

More to Explore Online

+
+
+
+ + Collection Areas + +
+

Collection Areas

+

+ These collection areas study, exhibit, and care for the + objects in The Met collection. +

+
+
+
+ + Travel + +
+

Travel

+

+ Travel with The Met connects the Museum's wide and diverse + audience to art, inspiration, and historical perspective. +

+
+
+
+ + Virtual Group Tours + +
+

Virtual group tours

+

+ Request a guided tour, reserve admission and lead your own + small group, or request a live virtual tour led by a + Museum guide. +

+
+
+
+
+
+ +
+
+

Contact US

+
+
+
+
+

The Met Fifth Avenue

+

phone

+
+ + +1 212-535-7710 + +
+

Address

+

+ + 1000 Fifth Avenue +
+ New York, NY 10028 + +

+
+
+

The Met Closter

+

phone

+
+ + +1 212-923-3700 + +
+

Address

+

+ + 1000 Fifth Avenue +
+ New York, NY 10028 + +

+
+
+
+ + + + +
+
+
+
+
+
+ + diff --git a/src/styles/blocks/contact.scss b/src/styles/blocks/contact.scss new file mode 100644 index 0000000000..3ed64a1f6a --- /dev/null +++ b/src/styles/blocks/contact.scss @@ -0,0 +1,183 @@ +.contact { + display: grid; + grid-auto-flow: row; + row-gap: $mb-main-title; + + &__title { + margin-block: 16px; + margin-block: 0; + + @include page-grid; + + @include text { + font-weight: 700; + } + + .section-title { + grid-column: 1/-1; + + @include on-tablet { + grid-column: 2/6; + } + + @include on-desktop { + grid-column: 5/9; + } + } + } + + &__block { + @include page-grid; + + & > * { + grid-column: 1/-1; + } + } + + &__list { + display: grid; + row-gap: $mb-main-title; + margin-bottom: 48px; + + @include on-tablet { + grid-column: 1/4; + } + + @include on-desktop { + grid-column: 1/7; + + grid-auto-flow: column; + column-gap: $column-gap; + } + } + + &__item { + transition-duration: $effectDuration; + + &Title { + margin-top: $null; + margin-bottom: 16px; + } + + &Name { + margin-bottom: 4px; + margin-top: $null; + + @include text(14px); + } + + &Wrapper { + margin-bottom: 8px; + } + + &Phone { + margin-top: $null; + + @include text { + font-weight: 700; + color: #3e3e3e; + } + } + + &Address { + margin-block: $null; + text-decoration: none; + + @include text { + font-weight: 700; + line-height: 22.4px; + color: #3e3e3e; + } + } + + &Hover:hover { + color: #707070; + } + } + + &__form { + transition-duration: $effectDuration; + + @include on-tablet { + grid-column: 4/-1; + } + + @include on-desktop { + grid-column: 8/-1; + } + + &Input { + display: block; + margin-bottom: 16px; + + &Field { + outline: none; + border: none; + width: 100%; + height: 48px; + } + } + + &Item { + background-color: $bcFormItem; + box-sizing: border-box; + padding-left: 10.9px; + padding-block: 14px; + + @include text { + font-size: 14px; + line-height: 20px; + } + + @include on-tablet { + padding-left: 11.21px; + } + + @include on-desktop { + padding-left: 16px; + } + } + + &Item:hover { + border: 1px solid #d5d7de; + } + + &Item:focus { + border: 1px solid #161616; + } + + &Textarea { + display: block; + margin-bottom: 32px; + } + + &Message { + height: 144px; + resize: none; + border: none; + width: 100%; + outline: none; + } + + &Button { + width: 100%; + background-color: #ae1c23; + border: none; + height: 56px; + cursor: pointer; + + @include text { + color: $white; + font-weight: 700; + } + } + + & ::placeholder { + text-align: left; + + @include text { + @include text(14px, 400, 20px, #7e7e83, Cinzel); + } + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 0000000000..35d516d355 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,21 @@ +.footer { + &__wrapper { + height: 180px; + position: sticky; + bottom: 0; + z-index: -1; + background-image: url(../images/footer/footer__mobile.png); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + + @include on-tablet { + height: 394px; + background-image: url(../images/footer/footer__tablet.png); + } + + @include on-desktop { + background-image: url(../images/footer/footer__desktop.png); + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..90b39d2b63 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,42 @@ +.header { + box-sizing: border-box; + height: 100vh; + background-image: url(../images/header-bg.png); + background-size: cover; + background-position: center; + margin-bottom: 100px; + + @include on-tablet { + margin-bottom: 140px; + } + + &__sectionTitle { + @include page-grid; + + height: 80px; + display: flex; + justify-content: center; + width: 100%; + } + + &__title { + grid-column: 1 / -1; + margin: $null; + text-align: center; + letter-spacing: -1.5px; + + @include text(40px, 700, 40px, $white, Cinzel); + + @include on-tablet { + font-size: $header-fs-tablet; + line-height: $header-fs-tablet; + grid-column: 2 / 6; + } + + @include on-desktop { + font-size: $header-fs-desktop; + line-height: $header-fs-desktop; + grid-column: 4 / 10; + } + } +} diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss new file mode 100644 index 0000000000..287e53fb33 --- /dev/null +++ b/src/styles/blocks/icon.scss @@ -0,0 +1,53 @@ +.icon { + display: block; + height: 24px; + width: 24px; + background-position: center; + background-repeat: no-repeat; + + @include hover(transform, scale(1.2)); + + @include on-tablet { + &--main { + height: 32px; + width: 32px; + background-repeat: no-repeat; + background-position: center; + } + } + + &--phone { + background-image: url(../images/icons/icon-phone.svg); + + @include on-tablet { + background-image: url(../images/icons/icon-phone-tablet.svg); + } + } + + &--menu { + background-image: url(../images/icons/icon-burger.svg); + transition-duration: $effectDuration; + + @include on-tablet { + background-image: url(../images/icons/icon-burger-tablet.svg); + } + + &:hover { + background-image: url(../images/icons/Icon-Burger-menu-hover.svg); + + @include on-tablet { + background-size: 24px 16px; + } + } + } + + &--close { + background-image: url(../images/icons/icon-close.svg); + + @include on-tablet { + background-image: url(../images/icons/icon-close-tablet.svg); + height: 32px; + width: 32px; + } + } +} diff --git a/src/styles/blocks/main.scss b/src/styles/blocks/main.scss new file mode 100644 index 0000000000..0a8934befc --- /dev/null +++ b/src/styles/blocks/main.scss @@ -0,0 +1,23 @@ +.main { + background-color: $white; + + margin-bottom: 100px; + + @include on-tablet { + margin-bottom: 156px; + } + + @include on-desktop { + margin-bottom: 150px; + } + + &__content { + display: grid; + row-gap: 100px; + justify-content: center; + + @include on-tablet { + row-gap: 140px; + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 0000000000..e1891d20de --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,9 @@ +.menu { + box-sizing: border-box; + height: 100vh; + background-color: #d12d35; + font-weight: 700; + text-transform: uppercase; + color: $white; + overflow: auto; +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 0000000000..77860f3f05 --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,39 @@ +.nav { + &__list { + margin: $null; + padding: $null; + list-style: none; + display: grid; + row-gap: 32px; + margin-bottom: 32px; + + @include on-desktop { + margin-bottom: 48px; + } + } + + &__link { + position: relative; + text-decoration: none; + letter-spacing: 2px; + + @include text($fs-nav, 700, $fs-nav, $white, Cinzel); + + &::after { + content: ''; + position: absolute; + bottom: -8px; + display: block; + height: 1px; + width: 100%; + background-color: $white; + transform: scale(0); + transition: transform $effectDuration; + transform-origin: left; + } + + &:hover::after { + transform: scale(1); + } + } +} diff --git a/src/styles/blocks/online.scss b/src/styles/blocks/online.scss new file mode 100644 index 0000000000..0890aaa211 --- /dev/null +++ b/src/styles/blocks/online.scss @@ -0,0 +1,81 @@ +.online { + @include page-grid; + + row-gap: 40px; + + @include on-tablet { + row-gap: $mb-main-title; + } + + .section-title { + grid-column: 1/-1; + + @include on-tablet { + grid-column: 2/6; + } + + @include on-desktop { + grid-column: 4/10; + } + } + + &__mainBlock { + grid-column: 1/-1; + + &Wrapper { + @include page-grid; + + row-gap: 48px; + } + } + + &__exhibition { + grid-column: 1/-1; + + display: grid; + grid-auto-flow: row; + row-gap: 24px; + + @include on-tablet { + grid-column: 2/6; + row-gap: 32px; + } + + @include on-desktop { + grid-column: span 4; + grid-template-rows: max-content; + } + + &Link { + position: relative; + height: $null; + padding-bottom: 100%; + display: block; + } + + &Photo { + position: absolute; + object-fit: cover; + height: 100%; + width: 100%; + + @include hover(transform, scale(1.05)); + } + + &Title { + text-align: center; + margin-top: $null; + margin-bottom: 4; + + @include text(24px, 700, 33.6px, $red); + } + + &Text { + margin-block: $null; + + @include text { + font-family: Roboto, sans-serif; + } + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 0000000000..b530f3b861 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,38 @@ +.page { + font-family: Cinzel, serif; + font-optical-sizing: auto; + font-weight: weight; + font-style: normal; + font-size: 16px; + line-height: 27px; + color: #161616; + + scroll-behavior: smooth; + + &__body { + margin: 0; + min-width: 320px; + } + + &__menu { + position: fixed; + top: 0; + right: 0; + left: 0; + + opacity: 0; + transition: all 0.3s; + transform: translateX(-100%); + pointer-events: none; + + &:target { + opacity: 1; + transform: translateX(0); + pointer-events: all; + } + } + + &:has(.page__menu:target) { + overflow: hidden; + } +} diff --git a/src/styles/blocks/phone.scss b/src/styles/blocks/phone.scss new file mode 100644 index 0000000000..d81227ee83 --- /dev/null +++ b/src/styles/blocks/phone.scss @@ -0,0 +1,59 @@ +.phone { + display: flex; + flex-direction: column; + transition-duration: $effectDuration; + + &--header { + display: none; + position: absolute; + left: -217px; + top: -42px; + } + + &__contacts { + text-decoration: none; + } + + & > :first-child { + margin-bottom: 8px; + } + + & :nth-child(2) { + margin-bottom: 16px; + } + + &__number:hover { + color: #ccc; + } + + &__name { + margin: $null; + white-space: nowrap; + + @include text { + font-weight: 700; + color: $white; + } + + &--header { + text-align: right; + width: 100%; + } + + &:hover { + color: #ccc; + } + } + + &__call-to-order { + display: block; + width: fit-content; + text-decoration: none; + letter-spacing: 2px; + padding-bottom: 7px; + border-bottom: 1px solid $white; + margin-bottom: 4px; + + @include text(12px, 700, 16px, $white); + } +} diff --git a/src/styles/blocks/section-title.scss b/src/styles/blocks/section-title.scss new file mode 100644 index 0000000000..1af5bf9c1c --- /dev/null +++ b/src/styles/blocks/section-title.scss @@ -0,0 +1,16 @@ +.section-title { + letter-spacing: -1.5px; + text-align: center; + margin-block: $null; + + @include text($fs-main-title, 700, $fs-main-title, $regular-text-color); + + @include on-tablet { + font-size: 48px; + line-height: 48px; + } + + &--align--left { + text-align: left; + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 0000000000..ab45fd9a08 --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,82 @@ +.top-bar { + transition: $effectDuration; + + &__content { + padding-top: 25px; + + @include on-tablet { + padding-top: 50px; + } + + &--aside { + margin-bottom: 40px; + + @include on-tablet { + padding-top: 32px; + } + + @include on-tablet { + margin-bottom: 55px; + } + } + + display: flex; + justify-content: space-between; + align-items: center; + } + + @include on-tablet { + &--menu { + padding-top: 32px; + } + } + + &__icons { + display: flex; + gap: 24px; + + @include on-tablet { + gap: 55px; + } + } + + &__logo-link { + display: flex; + width: 64px; + height: 46px; + + @include hover(transform, scale(1.2)); + + @include on-tablet { + &--main { + width: 87px; + height: 65px; + } + } + + @include on-desktop { + &--aside { + width: 87px; + height: 65px; + } + } + } + + &__logo { + width: 100%; + } + + &__phone { + position: relative; + } + + @include on-desktop { + &__phone:hover { + .phone--header { + display: block; + text-align: right; + grid-template-rows: max-content; + } + } + } +} diff --git a/src/styles/blocks/view.scss b/src/styles/blocks/view.scss new file mode 100644 index 0000000000..26bea40bb6 --- /dev/null +++ b/src/styles/blocks/view.scss @@ -0,0 +1,164 @@ +.view { + &__wrapper { + display: grid; + grid-auto-flow: row; + row-gap: 48px; + margin-bottom: 40px; + } + + &__title { + @include page-grid; + + row-gap: 8px; + + & > * { + grid-column: 1/-1; + + @include on-tablet { + grid-column: 2/6; + } + } + + .section-title { + @include on-desktop { + grid-column: 4/10; + } + } + + &Describe { + margin-block: $null; + text-align: center; + + @include text; + + @include on-desktop { + grid-column: 5/9; + } + } + } + + &__button { + @include page-grid; + @include hover(transform, scale(1.05)); + + height: 56px; + + &Position { + display: block; + grid-column: 1 / -1; + background-color: $red; + border: none; + align-items: center; + text-align: center; + height: 100%; + + @include text { + font-weight: 700; + color: $white; + line-height: 56px; + text-decoration: none; + } + + @include on-tablet { + grid-column: 2/6; + padding: $null 48px; + } + + @include on-desktop { + grid-column: 5/9; + } + } + } +} + +.exhibition { + & > * { + margin-block: $null; + } + + &__photos { + display: grid; + grid-auto-flow: column; + column-gap: 20px; + + margin-bottom: 24px; + + &--includeWide { + --columns: 2; + + grid-template-columns: repeat(var(--columns), 1fr); + + @include on-tablet { + --columns: 3; + } + } + + &--squares { + column-gap: 8px; + } + + @include on-tablet { + column-gap: 24px; + } + } + + &__link { + position: relative; + + &--tabletNone { + @include on-tablet { + display: none; + } + } + + &--tabletNoneOnly { + @include on-tablet { + display: none; + } + + @include on-desktop { + display: block; + } + } + + &--wide { + display: none; + + @include on-tablet { + grid-column: span 2; + display: block; + } + } + + &--squareWithWide { + @include on-tablet { + grid-column: span 1; + } + } + + &--square { + height: $null; + padding-bottom: 100%; + } + } + + &__photo { + position: absolute; + width: 100%; + height: 100%; + object-fit: cover; + + @include hover(transform, scale(1.05)); + } + + &__name { + @include text { + font-weight: 700; + color: #d12d35; + } + } + + &__dates { + @include text; + } +} diff --git a/src/styles/blocks/workingTime.scss b/src/styles/blocks/workingTime.scss new file mode 100644 index 0000000000..d3842b7f96 --- /dev/null +++ b/src/styles/blocks/workingTime.scss @@ -0,0 +1,90 @@ +.workingTime { + @include page-grid; + + row-gap: 32px; + + @include on-desktop { + row-gap: $null; + } + + &__title { + grid-column: 1/-1; + + @include on-tablet { + grid-column: span 3; + } + + @include on-desktop { + grid-column: span 5; + } + + &Wrapper { + display: grid; + row-gap: 2px; + } + + &Visit { + text-align: left; + margin-block: $null; + + @include text(12px, 700, 16.8px, #d12d35); + } + } + + &__mainBlock { + grid-column: 1/-1; + + @include on-tablet { + grid-column: 4/7; + } + + @include on-desktop { + grid-column: 6/12; + } + + &Wrapper { + display: grid; + row-gap: 24px; + } + } + + &__address { + display: grid; + row-gap: 16px; + + &Title { + margin-block: $null; + text-align: left; + + @include text(24px, 700, 30px); + } + } + + &__listWrapper { + display: flex; + column-gap: 24px; + } + + &__list { + list-style: none; + margin: $null; + padding: $null; + row-gap: 8px; + } + + &__item { + text-align: left; + margin-block: $null; + white-space: nowrap; + + @include text; + + &--bold { + font-weight: 700; + } + + &--wrap { + white-space: normal; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index 293d3b1f13..5efaf57942 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,3 +1,16 @@ -body { - margin: 0; -} +@import './utils/variables'; +@import './utils/mixins'; +@import 'blocks/page'; +@import 'blocks/header'; +@import 'blocks/top-bar'; +@import 'blocks/menu'; +@import 'blocks/nav'; +@import 'blocks/phone'; +@import 'blocks/icon'; +@import 'blocks/main'; +@import 'blocks/section-title'; +@import 'blocks/workingTime'; +@import 'blocks/online'; +@import 'blocks/view'; +@import 'blocks/contact'; +@import 'blocks/footer'; diff --git a/src/styles/utils/mixins.scss b/src/styles/utils/mixins.scss new file mode 100644 index 0000000000..6c618db54a --- /dev/null +++ b/src/styles/utils/mixins.scss @@ -0,0 +1,98 @@ +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin content-padding-inline() { + padding-inline: 20px; + + @include on-tablet { + padding-inline: 72px; + } + + @include on-desktop { + padding-inline: 120px; + max-width: 1020px; + margin-inline: auto; + } +} + +.container { + @include content-padding-inline; + + &--header { + display: flex; + flex-direction: column; + gap: 129px; + + @include on-tablet { + gap: 141px; + } + + @include on-desktop { + gap: 83px; + } + } +} + +@mixin hover($property, $toValue) { + transition: #{$property} $effectDuration; + &:hover { + #{$property}: $toValue; + } +} + +@mixin page-grid { + --columns: 2; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 20px; + + @include on-tablet { + --columns: 6; + + column-gap: 24px; + } + + @include on-desktop { + --columns: 12; + } +} + +@mixin text( + $size: 16px, + $weight: 400, + $height: 27px, + $color: #161616, + $family: Cinzel +) { + font-size: $size; + font-weight: $weight; + line-height: $height; + color: $color; + font-family: $family; + @content; +} + +.phone__number { + text-decoration: none; + text-align: left; + white-space: nowrap; + + @include text { + font-weight: 700; + color: $white; + } + + &--black { + color: #3e3e3e; + } +} diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss new file mode 100644 index 0000000000..bfadd58fc1 --- /dev/null +++ b/src/styles/utils/variables.scss @@ -0,0 +1,15 @@ +$tablet-min-width: 576px; +$desktop-min-width: 1024px; +$fs-big-screen: 48px; +$mb-main-title: 48px; +$fs-main-title: 32px; +$effectDuration: 0.3s; +$white: #fff; +$regular-text-color: #161616; +$red: #d12d35; +$column-gap: 24px; +$bcFormItem: #f8f8fa; +$header-fs-tablet: 64px; +$header-fs-desktop: 80px; +$fs-nav: 22px; +$null: 0;