diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template new file mode 100644 index 0000000000..8b5743ecb4 --- /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 8b16c19cb9..3469ef61e1 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@ Follow the instructions in this and next lessons to implement the page block by - 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://Moises-S001.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/index.html b/index.html index 317e1141dd..aa81738dbb 100644 --- a/index.html +++ b/index.html @@ -1,22 +1,332 @@ + - + - Landing Page + The Met + + + + - -

Landing Page

+ + +
+
+ + + + +
+ +
+ The Met Fifth Avenue
+ +1 212-535-7710
+ The Met Cloisters
+ +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

+

Wen

+
+
+ +

Closed on

+

Thanksgiving Day, Dec 25, Jan 1

+
+
+ +
+
NOW ON VIEW +

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

+
+
+ +
+
+ + Layer46 + + + Layer47 + +
+ + +
+

A NEW LOOK AT OLD MASTERS

+

DECEMBER 12, 2020 - THROUGH SPRING 2023

+
+
+ +
+
+
+ + Layer48 + + + Layer49 + + + Layer50 + +
+
+ +
+

BODHISATTVAS OF WISDOM, COMPASSION, AND POWER

+

MARCH 27, 2021 – OCTOBER 30, 2022

+
+
+ +
+
+ + Layer46 + + + Layer47 + +
+ + + + +
+

Inspiring Walt Disney: The Animation of French Decorative Arts

+

December 10, 2021 – March 6, 2022

+
+
+ + + +
+
+ +
+

More to Explore Online

+
+
+ +
+ + Layer46 + +
+ + +
+

Collection Areas

+

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

+
+
+ +
+ +
+ + Layer46 + +
+ + +
+

Travel

+

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

+
+
+ +
+ +
+ + Layer46 + +
+ + +
+

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 Cloisters

+ +

Phone

+

+ + +1 212-923-3700 + +

+

Address

+ +

99 Margaret Corbin Drive
Fort Tryon Park
New York, NY 10040

+ +
+
+ +
+
+ + + + + + +
+
+ +
+
+
+ + diff --git a/src/imagens/THE MET.svg b/src/imagens/THE MET.svg new file mode 100644 index 0000000000..3eb55048ef --- /dev/null +++ b/src/imagens/THE MET.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/imagens/icons/Icon-Burger-menu-hover.svg b/src/imagens/icons/Icon-Burger-menu-hover.svg new file mode 100644 index 0000000000..f273e6ba61 --- /dev/null +++ b/src/imagens/icons/Icon-Burger-menu-hover.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/imagens/icons/Icon-Burger-menu.png b/src/imagens/icons/Icon-Burger-menu.png new file mode 100644 index 0000000000..a510c8e8a0 Binary files /dev/null and b/src/imagens/icons/Icon-Burger-menu.png differ diff --git a/src/imagens/icons/Icon-Phone-call.png b/src/imagens/icons/Icon-Phone-call.png new file mode 100644 index 0000000000..ac1e4ffa05 Binary files /dev/null and b/src/imagens/icons/Icon-Phone-call.png differ diff --git a/src/imagens/icons/vector.svg b/src/imagens/icons/vector.svg new file mode 100644 index 0000000000..b1b3b6002d --- /dev/null +++ b/src/imagens/icons/vector.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/imagens/image-backgroud/img-backgroud.png b/src/imagens/image-backgroud/img-backgroud.png new file mode 100644 index 0000000000..273b23ca33 Binary files /dev/null and b/src/imagens/image-backgroud/img-backgroud.png differ diff --git a/src/imagens/image-backgroud/img-background-footer.png b/src/imagens/image-backgroud/img-background-footer.png new file mode 100644 index 0000000000..80b824e5c7 Binary files /dev/null and b/src/imagens/image-backgroud/img-background-footer.png differ diff --git a/src/imagens/img-content-page/Layer46.png b/src/imagens/img-content-page/Layer46.png new file mode 100644 index 0000000000..8aac5f5dc5 Binary files /dev/null and b/src/imagens/img-content-page/Layer46.png differ diff --git a/src/imagens/img-content-page/Layer47.png b/src/imagens/img-content-page/Layer47.png new file mode 100644 index 0000000000..5992412ef6 Binary files /dev/null and b/src/imagens/img-content-page/Layer47.png differ diff --git a/src/imagens/img-content-page/Layer48.png b/src/imagens/img-content-page/Layer48.png new file mode 100644 index 0000000000..79070807cc Binary files /dev/null and b/src/imagens/img-content-page/Layer48.png differ diff --git a/src/imagens/img-content-page/Layer49.png b/src/imagens/img-content-page/Layer49.png new file mode 100644 index 0000000000..165e2634d6 Binary files /dev/null and b/src/imagens/img-content-page/Layer49.png differ diff --git a/src/imagens/img-content-page/Layer50.png b/src/imagens/img-content-page/Layer50.png new file mode 100644 index 0000000000..b7244f196d Binary files /dev/null and b/src/imagens/img-content-page/Layer50.png differ diff --git a/src/imagens/img-content-page/Layer51.png b/src/imagens/img-content-page/Layer51.png new file mode 100644 index 0000000000..91ba5dbd04 Binary files /dev/null and b/src/imagens/img-content-page/Layer51.png differ diff --git a/src/imagens/img-content-page/Layer52.png b/src/imagens/img-content-page/Layer52.png new file mode 100644 index 0000000000..db85fe7c2e Binary files /dev/null and b/src/imagens/img-content-page/Layer52.png differ diff --git a/src/imagens/img-content-page/Layer53.png b/src/imagens/img-content-page/Layer53.png new file mode 100644 index 0000000000..a4b558fd1f Binary files /dev/null and b/src/imagens/img-content-page/Layer53.png differ diff --git a/src/imagens/img-content-page/Layer54.png b/src/imagens/img-content-page/Layer54.png new file mode 100644 index 0000000000..e51dce889b Binary files /dev/null and b/src/imagens/img-content-page/Layer54.png differ diff --git a/src/imagens/img-content-page/Layer55.png b/src/imagens/img-content-page/Layer55.png new file mode 100644 index 0000000000..235f99d64a Binary files /dev/null and b/src/imagens/img-content-page/Layer55.png differ diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..431472bdda --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,28 @@ +.header { + box-sizing: border-box; + background-image: url(../imagens/image-backgroud/img-backgroud.png); + background-size: cover; + background-position: center; + height: 100vh; + + &__title { + position: relative; + display: flex; + color: $color-text; + justify-self: center; + top: 45px; + + @include on-desktop { + font-size: 64px; + } + } + + &__title-page { + font-weight: 700; + font-style: Bold; + font-size: 40px; + line-height: 100%; + letter-spacing: -1.5px; + text-align: center; + } +} diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss new file mode 100644 index 0000000000..c9bf34e6a8 --- /dev/null +++ b/src/styles/blocks/icon.scss @@ -0,0 +1,43 @@ +.icon { + display: block; + width: 24px; + height: 24px; + background-size: cover; + text-decoration: none; + transition: transform 0.5s ease; + + @include on-desktop { + height: 32px; + width: 32px; + } + + &--menu { + background-image: url(../imagens/icons/Icon-Burger-menu.png); + } + &--menu:hover { + background-image: url(../imagens/icons/Icon-Burger-menu-hover.svg); + } + + &--phone { + background-image: url(../imagens/icons/Icon-Phone-call.png); + } + + &--phone:hover { + &__phone-contat { + display: flex; + } + } + + &--close { + background-image: url(../imagens/icons/vector.svg); + } + + &__phone-contat { + display: none; + position: relative; + right: 200px; + text-align: end; + width: 200px; + color: $color-text; + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 0000000000..c6df71fff4 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,67 @@ +.menu { + overflow: auto; + box-sizing: border-box; + height: 100vh; + background-color: rgba(209, 45, 53, 1); + font-weight: 700; + text-transform: uppercase; + font-style: Bold; + + &__top { + position: sticky; + top: 0; + z-index: 1; + background-color: #e5e5e5; + + @include on-tablet { + margin-bottom: 0; + } + } + + &__nav { + margin-bottom: 40px; + } + + &__content { + @include content-padding-inline; + } + + &__phone-number { + display: block; + margin-bottom: 16px; + color: $color-text; + text-decoration: none; + font-size: 16px; + line-height: 27px; + letter-spacing: 0; + transition: color 0.3s ease; + } + &__phone-number:hover { + color: blue; + } + + &__call-to-order { + display: block; + width: fit-content; + + text-decoration: none; + color: $color-text; + font-size: 12px; + line-height: 16px; + letter-spacing: 2px; + padding-bottom: 7px; + border-bottom: 1px solid $color-text; + } +} + +.location_contact { + font-family: $font-page; + font-weight: 700; + font-style: Bold; + font-size: 16px; + line-height: 27px; + letter-spacing: 0; + vertical-align: middle; + text-transform: uppercase; + color: rgba(255, 255, 255, 1); +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 0000000000..af225e557b --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,37 @@ +.nav { + &__list { + margin: 0; + padding: 0; + list-style: none; + + display: flex; + flex-direction: column; + gap: 32px; + } + + &__link { + position: relative; + color: $color-text; + text-decoration: none; + font-size: 22px; + letter-spacing: 2px; + + &::after { + content: ''; + position: absolute; + bottom: -8px; + display: block; + height: 1px; + width: 100%; + background-color: $color-text; + + transition: transform 0.3s; + transform: scale(0); + transform-origin: left; + } + + &:hover::after { + transform: scale(1); + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 0000000000..b3c5bf177f --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,34 @@ +.page { + font-family: $font-page; + color: rgba(22, 22, 22, 1); + margin: 0; + scroll-behavior: smooth; + + &__body { + margin: 0; + min-width: 320px; + } + + &__menu { + position: fixed; + top: 0; + left: 0; + right: 0; + + transition: all 0.3s; + opacity: 0; + transform: translateX(-100%); + pointer-events: none; + } + + &__menu:target { + overflow: hidden; + opacity: 1; + transform: translateX(0); + pointer-events: all; + } +} + +.page:has(.page__menu:target) { + overflow: hidden; +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 0000000000..82460fc3ab --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,33 @@ +.top-bar { + padding-block: 24px; + + @include content-padding-inline; + + display: flex; + justify-content: space-between; + align-items: center; + + @include on-tablet { + padding-block: 64px; + } + + &__logo-link { + display: flex; + gap: 24px; + } + + &__icons { + display: flex; + gap: 24px; + } + + &__logo { + @include on-tablet { + height: 40px; + } + } +} + +.top__menu { + margin-bottom: 32px; +} diff --git a/src/styles/blocks/view-content-contact_us.scss b/src/styles/blocks/view-content-contact_us.scss new file mode 100644 index 0000000000..28d366ad2c --- /dev/null +++ b/src/styles/blocks/view-content-contact_us.scss @@ -0,0 +1,143 @@ +.contact-us { + .contacts_content { + display: grid; + gap: 32px; + grid-template-columns: repeat(2, 1fr); + .container_information-contacts { + grid-column: 1 / -1; + } + .form_contact { + grid-column: 1 / -1; + } + + @include on-tablet { + grid-template-columns: repeat(6, 1fr); + row-gap: 24px; + + .container_information-contacts { + grid-column: 1 / 4; + } + .form_contact { + grid-column: 4 / -1; + grid-row: 1 / -1; + } + } + + @include on-desktop { + grid-template-columns: repeat(12, 1fr); + gap: 24px; + + .container_information-contacts { + grid-column: 1 / 8; + display: grid; + grid-template-columns: repeat(7, 1fr); + gap: 24px; + .contacts_content-fifth_Avenue { + grid-column: 1 / 4; + } + .contacts_content-cloisters { + grid-column: 5 / -1; + } + } + .form_contact { + grid-column: 8 / -1; + } + } + } +} + +.form_contact-camp { + display: flex; + flex-direction: column; + gap: 16px; +} + +.form_input-contact { + font-family: $font-page; + font-weight: 400; + font-size: 14px; + background-color: rgba(248, 248, 250, 1); + height: 48px; + border: none; +} + +.form_input-contact::placeholder { + font-family: Cinzel, serif; + font-weight: 400; + font-size: 14px; + line-height: 20px; + letter-spacing: 0; + color: rgba(126, 126, 131, 1); +} + +.message_contact { + font-family: $font-page; + font-weight: 400; + font-size: 14px; + background-color: rgba(248, 248, 250, 1); + height: 144px; + border: none; +} + +.message_contact::placeholder { + font-family: Cinzel, serif; + font-weight: 400; + font-size: 14px; + line-height: 20px; + letter-spacing: 0; + color: rgba(126, 126, 131, 1); +} + +.button_contact { + width: 100%; + height: 56px; + margin-top: 32px; + background-color: rgba(209, 45, 53, 1); + color: $color-text; + font-family: $font-page; + font-size: 16px; + font-weight: 700; + grid-column: 1 / -1; + border: none; + + &:hover { + background-color: rgba(174, 28, 35, 1); + } + &:active { + background-color: rgba(235, 52, 61, 1); + } +} + +.contact_phone { + display: block; + margin-bottom: 16px; + color: rgba(62, 62, 62, 1); + text-decoration: none; + font-size: 16px; + line-height: 27px; + letter-spacing: 0; + font-family: $font-page; + font-weight: 700; + font-style: Bold; + transition: color 0.3s ease; +} + +.contact_phone:hover { + color: #c41230; +} + +.location { + font-family: $font-page; + font-weight: 700; + font-style: Bold; + font-size: 16px; + line-height: 140%; + letter-spacing: 0; + text-decoration: none; + color: rgba(62, 62, 62, 1); + transition: color 0.3s ease; +} + +.location:hover { + color: #c41230; +} diff --git a/src/styles/blocks/view-content-more_explore.scss b/src/styles/blocks/view-content-more_explore.scss new file mode 100644 index 0000000000..28de15cde5 --- /dev/null +++ b/src/styles/blocks/view-content-more_explore.scss @@ -0,0 +1,60 @@ +.more-to-explore { + .more-to-explore_content { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 32px; + + .exhibition-card { + grid-column: 1 / -1; + } + + @include on-tablet { + grid-template-columns: repeat(6, 1fr); + + .exhibition-card { + grid-column: 2 / 6; + } + } + + @include on-desktop { + grid-template-columns: repeat(12, 1fr); + gap: 24px; + + .exhibition-card { + grid-column: span 4; + } + } + } + + .img-box { + width: 100%; + img { + width: 100%; + height: auto; + object-fit: cover; + transition: transform 0.3s ease; + &:hover { + transform: scale(1.05); + } + } + } + + .exhibition-title-center { + color: #d11212; + text-transform: uppercase; + font-weight: bold; + margin-top: 15px; + margin-bottom: 10px; + font-size: 20px; + text-align: center; + } + + .exhibition-text { + color: #555; + font-size: 16px; + font-family: Roboto, sans-serif; + font-weight: 400; + text-align: center; + line-height: 1.5; + } +} diff --git a/src/styles/blocks/view-content-page.scss b/src/styles/blocks/view-content-page.scss new file mode 100644 index 0000000000..ca9142f1fb --- /dev/null +++ b/src/styles/blocks/view-content-page.scss @@ -0,0 +1,154 @@ +.now-on-view { + .now-on-view_content { + display: grid; + grid-template-columns: 1fr; + gap: 32px; + + .exhibition-card { + grid-column: 1 / -1; + } + + @include on-tablet { + grid-template-columns: repeat(6, 1fr); + + .exhibition-card { + grid-column: 1 / -1; + } + } + + @include on-desktop { + grid-template-columns: repeat(12, 1fr); + + .exhibition-card { + grid-column: 1 / -1; + } + } + } + + .img-box { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + overflow: hidden; + + @include on-tablet { + grid-template-columns: repeat(6, 1fr); + .--extend { + grid-column: 1 / 5; + } + .--standard { + grid-column: 5 / -1; + } + .--standard-reverse { + grid-column: 1 / 3; + } + .--extend-reverse { + grid-column: 3 / -1; + } + } + + @include on-desktop { + grid-template-columns: repeat(12, 1fr); + .--extend { + grid-column: 1 / 9; + } + .--standard { + grid-column: 9 / -1; + } + .--standard-reverse { + grid-column: 1 / 5; + } + .--extend-reverse { + grid-column: 5 / -1; + } + } + } +} + +.img-3colums { + grid-column: 1 / -1; + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 10px; + + @include on-tablet { + grid-template-columns: repeat(6, 1fr); + gap: 24px; + .--one-img { + grid-column: 1 / 4; + } + .--two-img { + grid-column: 4 / -1; + } + .--tree-img { + display: none; + } + } + + @include on-desktop { + grid-template-columns: repeat(12, 1fr); + gap: 24px; + .--one-img { + grid-column: 1 / 5; + } + .--two-img { + grid-column: 5 / 9; + } + .--tree-img { + display: block; + grid-column: 9 / -1; + } + } +} + +.img-link { + display: block; + overflow: hidden; + width: 100%; + height: 100%; +} + +.img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.3s ease; + + &:hover { + transform: scale(1.05); + } +} + +.text-content { + .exhibition-title { + color: #d11212; + font-size: 22px; + margin-bottom: 5px; + text-transform: uppercase; + } + .exhibition-date { + font-size: 14px; + color: #666; + text-transform: uppercase; + } +} + +.view-all-exhibitions { + grid-column: 1 / -1; + justify-self: center; + background-color: #d11212; + color: white; + border: none; + padding: 15px 40px; + text-transform: uppercase; + cursor: pointer; + font-weight: bold; + margin-top: 20px; +} + +.subtitle { + font-size: 18px; + font-weight: normal; + text-transform: none; + margin-top: 10px; +} diff --git a/src/styles/blocks/visit-hours.scss b/src/styles/blocks/visit-hours.scss new file mode 100644 index 0000000000..05a9bf75bb --- /dev/null +++ b/src/styles/blocks/visit-hours.scss @@ -0,0 +1,77 @@ +.plan_your_visit { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + margin-bottom: 150px; + + @include on-tablet { + grid-template-columns: repeat(6, 1fr); + gap: 24px; + } +} + +.section-title-container { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 4; + } +} + +.section-title-hours { + font-family: $font-page; + font-weight: 700; + font-style: Bold; + font-size: 48px; + line-height: 48px; + letter-spacing: -1.5px; + text-align: start; +} + +.hours_visit { + display: flex; + flex-direction: column; + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 4 / -1; + } +} + +.opening-hours { + display: flex; + gap: 24px; +} + +.opening_hours-bold { + font-family: Cinzel, sans-serif; + font-weight: 700; + font-size: 16px; + line-height: 27px; + letter-spacing: 0; +} + +.opening_days { + font-family: Cinzel, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 27px; + letter-spacing: 0; +} + +.plan__visit { + font-weight: 700; + font-size: 12px; + line-height: 140%; + letter-spacing: 0; + color: rgba(209, 45, 53, 1); +} + +.location-visit { + font-family: $font-page; + font-weight: 700; + font-style: Bold; + font-size: 24px; + line-height: 30px; + letter-spacing: 0; +} diff --git a/src/styles/main.scss b/src/styles/main.scss index 293d3b1f13..ceae3e7d9f 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,3 +1,56 @@ -body { - margin: 0; +@import './utils/mixins'; +@import './utils/variables'; +@import 'blocks/page'; +@import 'blocks/header'; +@import 'blocks/nav'; +@import 'blocks/icon'; +@import 'blocks/menu'; +@import 'blocks/top-bar'; +@import 'blocks/visit-hours'; +@import 'blocks/view-content-page'; +@import 'blocks/view-content-contact_us'; +@import 'blocks/view-content-more_explore'; + +.main { + row-gap: 96px; + padding-block: 96px; + + @include content-padding-inline; + + @include on-tablet { + padding-block: 120px; + row-gap: 120px; + } + + @include on-desktop { + padding-block: 120px; + row-gap: 120px; + } +} + +.section-title { + font-family: $font-page; + font-weight: 700; + font-style: Bold; + font-size: 48px; + line-height: 48px; + letter-spacing: -1.5px; + text-align: center; +} + +.footer { + background-image: url(../imagens/image-backgroud/img-background-footer.png); + background-position: center; + background-size: cover; + background-repeat: no-repeat; + bottom: 0; + left: 0; + z-index: -1; + + height: 180px; + width: 100%; + + @include on-desktop { + height: 359px; + } } diff --git a/src/styles/utils/mixins.scss b/src/styles/utils/mixins.scss new file mode 100644 index 0000000000..21e04d1f57 --- /dev/null +++ b/src/styles/utils/mixins.scss @@ -0,0 +1,23 @@ +@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; + } +} diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss new file mode 100644 index 0000000000..35a78e1d84 --- /dev/null +++ b/src/styles/utils/variables.scss @@ -0,0 +1,4 @@ +$tablet-min-width: 576px; +$desktop-min-width: 1024px; +$color-text: rgba(255, 255, 255, 1); +$font-page: Cinzel, serif;