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 3a2fb5928..64ad54ea7 100644 --- a/README.md +++ b/README.md @@ -22,7 +22,7 @@ Implement landing page according to [Figma design](https://www.figma.com/file/dY 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/layout_creativeBakery/). + [DEMO LINK](https://Dushkaaa-BabyBoss.github.io/layout_creativeBakery/). 14. Copy `DEMO LINK` to the PR description. > To update you PR repeat steps 7-11. diff --git a/package-lock.json b/package-lock.json index b59fee9b9..ed6d8c845 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,7 @@ "@linthtml/linthtml": "^0.9.6", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^1.8.6", + "@mate-academy/scripts": "^1.9.12", "@mate-academy/stylelint-config": "latest", "@parcel/transformer-sass": "^2.12.0", "jest": "^29.7.0", @@ -1222,10 +1222,11 @@ "dev": true }, "node_modules/@mate-academy/scripts": { - "version": "1.8.6", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.8.6.tgz", - "integrity": "sha512-b4om/whj4G9emyi84ORE3FRZzCRwRIesr8tJHXa8EvJdOaAPDpzcJ8A0sFfMsWH9NUOVmOwkBtOXDu5eZZ00Ig==", + "version": "1.9.12", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.9.12.tgz", + "integrity": "sha512-/OcmxMa34lYLFlGx7Ig926W1U1qjrnXbjFJ2TzUcDaLmED+A5se652NcWwGOidXRuMAOYLPU2jNYBEkKyXrFJA==", "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 f580caad3..0828659f6 100644 --- a/package.json +++ b/package.json @@ -18,12 +18,11 @@ "keywords": [], "author": "Mate Academy", "license": "GPL-3.0", - "dependencies": {}, "devDependencies": { "@linthtml/linthtml": "^0.9.6", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^1.8.6", + "@mate-academy/scripts": "^1.9.12", "@mate-academy/stylelint-config": "latest", "@parcel/transformer-sass": "^2.12.0", "jest": "^29.7.0", diff --git a/src/images/icons/favicon.ico b/src/images/icons/favicon.ico new file mode 100644 index 000000000..bdf2ebbe3 Binary files /dev/null and b/src/images/icons/favicon.ico differ diff --git a/src/images/icons/icon-arrow.svg b/src/images/icons/icon-arrow.svg new file mode 100644 index 000000000..a1bd54079 --- /dev/null +++ b/src/images/icons/icon-arrow.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 000000000..1225a6256 --- /dev/null +++ b/src/images/icons/icon-close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-cookie.svg b/src/images/icons/icon-cookie.svg new file mode 100644 index 000000000..992115b32 --- /dev/null +++ b/src/images/icons/icon-cookie.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-menu.svg b/src/images/icons/icon-menu.svg new file mode 100644 index 000000000..2b82cbfa5 --- /dev/null +++ b/src/images/icons/icon-menu.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 000000000..39b157356 --- /dev/null +++ b/src/images/icons/icon-phone.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/logo-botom.svg b/src/images/icons/logo-botom.svg new file mode 100644 index 000000000..733596f1f --- /dev/null +++ b/src/images/icons/logo-botom.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/logo.png b/src/images/icons/logo.png new file mode 100644 index 000000000..e68e0f255 Binary files /dev/null and b/src/images/icons/logo.png differ diff --git a/src/images/icons/social/icon-facebook.svg b/src/images/icons/social/icon-facebook.svg new file mode 100644 index 000000000..93b3835e8 --- /dev/null +++ b/src/images/icons/social/icon-facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/social/icon-instagram.svg b/src/images/icons/social/icon-instagram.svg new file mode 100644 index 000000000..a94faeecf --- /dev/null +++ b/src/images/icons/social/icon-instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/social/icon-twitter.svg b/src/images/icons/social/icon-twitter.svg new file mode 100644 index 000000000..097a19058 --- /dev/null +++ b/src/images/icons/social/icon-twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/img/cookie.png b/src/images/img/cookie.png new file mode 100644 index 000000000..82ac1d211 Binary files /dev/null and b/src/images/img/cookie.png differ diff --git a/src/images/img/crumbs.png b/src/images/img/crumbs.png new file mode 100644 index 000000000..fa073287d Binary files /dev/null and b/src/images/img/crumbs.png differ diff --git a/src/images/img/photo-product-01.png b/src/images/img/photo-product-01.png new file mode 100644 index 000000000..f8895ef61 Binary files /dev/null and b/src/images/img/photo-product-01.png differ diff --git a/src/images/img/photo-product-02.png b/src/images/img/photo-product-02.png new file mode 100644 index 000000000..2a3399c17 Binary files /dev/null and b/src/images/img/photo-product-02.png differ diff --git a/src/images/img/photo-product-03.png b/src/images/img/photo-product-03.png new file mode 100644 index 000000000..39ca31977 Binary files /dev/null and b/src/images/img/photo-product-03.png differ diff --git a/src/images/img/photo-product-04.png b/src/images/img/photo-product-04.png new file mode 100644 index 000000000..21cf0c288 Binary files /dev/null and b/src/images/img/photo-product-04.png differ diff --git a/src/images/img/photo-product-05.png b/src/images/img/photo-product-05.png new file mode 100644 index 000000000..25dd72178 Binary files /dev/null and b/src/images/img/photo-product-05.png differ diff --git a/src/images/img/photo-product-06.png b/src/images/img/photo-product-06.png new file mode 100644 index 000000000..5d8fc28d5 Binary files /dev/null and b/src/images/img/photo-product-06.png differ diff --git a/src/index.html b/src/index.html index 8019b83ec..f13cf3018 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,507 @@ - + + - - Title - + + Bakerlab + + - -

Hello Mate Academy

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

We bake your fantasies — croissants, cakes, cookies, and cupcakes.

+ +

Creative bakery

+ + + + + + + Learn more + +
+ + cookie +
+
+ + + +
+
+
+
+
+
+

What we bake

+

We can customize our cookies right for your needs. Just imagine it

+
+ +
+ bake +

Cakes

+

Oatmeal cookies with golden raisins, orange zest and chocolate chips

+ + + + + + Order + +
+ +
+ bake +

Cakes

+

Chocolate biscuit coffee cake topped with a buttercream and powder

+ + + + + + Order + +
+ +
+ bake +

Donuts

+

Light multi-layered croissant strewn with cinammon and almond “petals”

+ + + + + + Order + +
+ +
+ bake +

Donuts

+

Light multi-layered croissant strewn with coconut and nuts

+ + + + + + Order + +
+ + + +
+ bake +

Cookies

+

Oatmeal cookies with golden raisins, orange zest and chocolate chips

+ + + + + + Order + +
+
+
+
+ +
+
+
+
+

Few words About us

+

+ Like many design teams, Onfido made the transition from Abstract + Sketch, to Figma in the last couple of years. One of the common resistance points internally before making that switch, was Figma’s lack of Git-style branching that Abstract enabled. + The design team had come to rely on branching and had built a lot of our processes around it. +

+
+ +
+
+

2015

+

Foundation year

+
+ +
+

23

+

Stores

+
+ +
+

155

+

Companies

+
+ +
+

10k+

+

Clients

+
+
+
+ + crumbs +
+
+
+
+ + + diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 45cdd5400..c0165e5a8 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -4,3 +4,6 @@ font-weight: normal; font-style: normal; } + +@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz@0,14..32;1,14..32&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,500;1,14..32,500&display=swap'); diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss index 1837eb46e..13199e139 100644 --- a/src/styles/_typography.scss +++ b/src/styles/_typography.scss @@ -1,3 +1,18 @@ -h1 { - @extend %h1; +h1, h2, h3, h4, h5, h6, html, body, p { + margin: 0; + padding: 0; +} + +a { + text-decoration: none; +} + +ul { + list-style: none; + margin: 0; + padding: 0; +} + +img { + display: flex; } diff --git a/src/styles/blocks/_about-us.scss b/src/styles/blocks/_about-us.scss new file mode 100644 index 000000000..78f20f51b --- /dev/null +++ b/src/styles/blocks/_about-us.scss @@ -0,0 +1,127 @@ +.about-us { + + &__wrapper { + display: grid; + row-gap: 64px; + + @include onTablet { + row-gap: 72px; + } + + @include onDesctop { + row-gap: 144px; + } + + @include onLargeDesctop { + justify-content: center; + } + } + + &__header { + display: grid; + + @include onTablet { + grid-template-columns: repeat(8, 1fr); + column-gap: 24px; + } + + @include onDesctop { + grid-template-columns: repeat(8, 1fr); + column-gap: 24px; + } + + @include onLargeDesctop { + grid-template-columns: repeat(8, 128px); + column-gap: 24px; + } + } + + &__title { + + @include onTablet { + grid-column: span 4; + } + + @include onDesctop { + grid-column: span 3; + } + } + + &__description { + + @include onTablet { + padding-top: 0; + grid-column: span 4; + } + + @include onDesctop { + grid-column: 5 / -1; + } + } + + &__body { + display: grid; + row-gap: 48px; + + @include onTablet { + grid-template-columns: repeat(8, 1fr); + column-gap: 24px; + } + + @include onLargeDesctop { + grid-template-columns: repeat(8, 128px); + column-gap: 24px; + } + } + + &__item { + + @include onTablet { + grid-column: span 4; + } + + @include onDesctop { + grid-column: span 2; + } + } + + &__item-title { + font-size: 96px; + font-weight: 400; + line-height: 81.6px; + letter-spacing: -5%; + text-transform: uppercase; + + color: $accent-color; + } + + &__item-description { + font-size: 16px; + font-weight: 400; + line-height: 24px; + letter-spacing: -1%; + } + + &__bg { + position: absolute; + width: 320px; + z-index: -1; + + transform: translate(0%, -164%); + + @include onTablet { + transform: translate(15%, -97%); + width: 526px; + } + + @include onDesctop { + width: 718px; + transform: translate(40%, -58%); + } + + @include onLargeDesctop { + width: 718px; + transform: translate(66%, -55%); + } + } +} diff --git a/src/styles/blocks/_footer.scss b/src/styles/blocks/_footer.scss new file mode 100644 index 000000000..3ef897aa2 --- /dev/null +++ b/src/styles/blocks/_footer.scss @@ -0,0 +1,167 @@ +.footer { + + &__wrapper { + background-color: $main-color; + padding-bottom: 88px; + + @include paddingInline; + + @include onTablet { + display: grid; + grid-template-columns: repeat(8, 1fr); + column-gap: 24px; + } + + @include onLargeDesctop { + grid-template-columns: repeat(8, 128px); + justify-content: center; + } + } + + &__menu { + padding-top: 56px; + + @include onTablet { + grid-column: span 4; + } + } + + &__contact { + padding-top: 64px; + + @include onTablet { + grid-column: span 4; + } + + &--grid { + + @include onDesctop { + display: grid; + grid-template-columns: repeat(4, 1fr); + column-gap: 24px; + } + } + } + + &__logo { + width: 168px; + } + + &__social { + display: flex; + gap: 32px; + + padding-top: 40px; + + @include onTablet { + grid-column: span 4; + } + } + + &__copywrite { + font-size: 16px; + font-weight: 400; + line-height: 24px; + letter-spacing: -1%; + + color: $main-grey-color; + + padding-top: 40px; + + @include onTablet { + grid-column: span 4; + } + } + + &__contact-title { + font-size: 48px; + font-weight: 400; + line-height: 41px; + letter-spacing: -5%; + + color: #fff; + text-transform: uppercase; + + @include onTablet { + font-size: 56px; + line-height: 47.6px; + } + + @include onDesctop { + font-size: 72px; + line-height: 62.2px; + + grid-column: span 4; + } + } +} + +.footer-nav { + + &__menu { + padding-top: 40px; + + @include onTablet { + padding-top: 96px; + } + + @include onDesctop { + padding-top: 61px; + } + } + + &__list { + display: flex; + flex-direction: column; + gap: 16px; + } + + &__item { + text-align: left; + } + + &__link { + color: #fff; + transition: 0.3s; + + &:hover { + color: $accent-color; + } + + &:focus { + color: $accent-color-dark; + } + } + + &__title { + font-size: 16px; + font-weight: 500; + line-height: 16px; + letter-spacing: 2%; + text-transform: uppercase; + + color: $main-grey-color; + } + + &__call-us { + padding-top: 40px; + + @include onTablet { + padding-top: 96px; + } + + @include onDesctop { + padding-top: 40px; + grid-column: span 2; + } + } + + &__email { + padding-top: 40px; + + @include onDesctop { + grid-column: span 2; + } + } + +} diff --git a/src/styles/blocks/_header.scss b/src/styles/blocks/_header.scss new file mode 100644 index 000000000..c5b9abce8 --- /dev/null +++ b/src/styles/blocks/_header.scss @@ -0,0 +1,218 @@ +.header { + + &__wrapper { + position: relative; + display: flex; + justify-content: center; + } + + &__top { + display: flex; + justify-content: space-between; + align-items: center; + + padding: 16px; + } + + &__body { + display: flex; + flex-direction: column; + align-items: center; + max-width: 288px; + + @include paddingInline; + + @include onTablet { + display: grid; + grid-template-columns: repeat(8, 1fr); + column-gap: 24px; + max-width: fit-content; + } + + @include onLargeDesctop { + display: flex; + flex-direction: column; + align-items: start; + max-width: fit-content; + } + } + + &__description { + font-size: 16px; + line-height: 24px; + font-weight: 400; + letter-spacing: -1%; + text-align: center; + + padding-top: 32px; + + @include onTablet { + padding-top: 80px; + grid-column: span 4; + text-align: left; + } + + @include onDesctop { + padding-top: 135px; + grid-column: span 2; + } + + @include onLargeDesctop { + max-width: 281px; + } + } + + &__title { + font-size: 64px; + line-height: 54px; + letter-spacing: -5%; + font-weight: 400; + color: $accent-color; + text-transform: uppercase; + text-align: center; + + padding-top: 32px; + + @include onTablet { + grid-column: 1 / -1; + margin-top: 146px; + padding-top: 0; + + font-size: 80px; + line-height: 68px; + } + + @include onDesctop { + font-size: 129px; + line-height: 115.6px; + margin-top: 0; + } + + @include onLargeDesctop { + font-size: 139px; + line-height: 122px; + + margin-top: 64px; + } + } + + &__image { + position: absolute; + top: 220px; + transform: translateX(220px, -50%); + + z-index: -1; + + width: 288px; + + @include onTablet { + top: 144px; + // left: 221px; + + transform: translateX(144px, -50%); + // left: 29%; + width: 326px; + } + + @include onDesctop { + width: 544px; + top: 0; + // left: 328px; + // left: 25%; + + transform: translateX(0, -50%); + } + + @include onLargeDesctop { + width: 584px; + // left: 35%; + + transform: translateX(0, -50%); + } + } + + &__link { + width: 100%; + display: block; + height: fit-content; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + gap: 4px; + + font-size: 16px; + line-height: 16px; + font-weight: 500; + letter-spacing: 2%; + text-transform: uppercase; + color: $accent-color; + + border: 2px solid $accent-color; + border-radius: 32px; + padding-block: 16px; + + margin-top: 290px; + margin-bottom: 40px; + + transition: 0.3s; + + @include onTablet { + grid-column: 3 / 7; + margin-top: 210px; + } + + @include onDesctop { + grid-column: span 2; + margin-top: 64px; + } + + @include onLargeDesctop { + max-width: 280px; + + margin-top: 64px; + } + + &:hover { + background-color: $accent-color; + color: #fff; + } + + &:focus { + background-color: $accent-color-dark; + border: 2px solid $accent-color-dark; + color: #fff; + } + } + + &__nav { + display: none; + + &__list { + display: flex; + gap: 64px; + } + + @include onDesctop { + display: block; + } + + &__link { + transition: 0.3s; + + &:hover { + color: $accent-color; + border-bottom: 1px solid $accent-color; + + padding-bottom: 5px; + } + } + } + + &__icon { + + @include onDesctop { + display: none; + } + } +} diff --git a/src/styles/blocks/_icons.scss b/src/styles/blocks/_icons.scss new file mode 100644 index 000000000..90cc91014 --- /dev/null +++ b/src/styles/blocks/_icons.scss @@ -0,0 +1,28 @@ +.icon { + display: block; + width: 24px; + height: 24px; + + + &--menu { + fill: $main-color; + } + + &--cookie { + transition: 0.3s; + fill: $accent-color; + } + + &--arrow { + fill: $accent-color; + } + + &--social { + fill: $accent-color; + transition: 0.3s; + + &:hover { + fill: #fff; + } + } +} diff --git a/src/styles/blocks/_logo.scss b/src/styles/blocks/_logo.scss new file mode 100644 index 000000000..415a79356 --- /dev/null +++ b/src/styles/blocks/_logo.scss @@ -0,0 +1,8 @@ +.logo { + display: flex; + width: 136px; + + &__bottom { + fill: #fff; + } +} diff --git a/src/styles/blocks/_menu.scss b/src/styles/blocks/_menu.scss new file mode 100644 index 000000000..611929b95 --- /dev/null +++ b/src/styles/blocks/_menu.scss @@ -0,0 +1,37 @@ +.menu { + transition: 0.3s; + + &__wrapper { + background-color: $body-color; + height: 100vh; + } + + &__header { + display: flex; + justify-content: space-between; + align-items: center; + + padding: 16px; + } + + &__nav { + + padding-top: 132px; + + &__list { + display: flex; + flex-direction: column; + gap: 24px; + } + + &__link { + &:hover { + color: $accent-color; + } + + &:focus { + color: $accent-color-dark; + } + } + } +} diff --git a/src/styles/blocks/_nav.scss b/src/styles/blocks/_nav.scss new file mode 100644 index 000000000..0955f1999 --- /dev/null +++ b/src/styles/blocks/_nav.scss @@ -0,0 +1,32 @@ +.nav { + + &__item { + text-align: center; + } + + &__link { + font-size: 16px; + font-weight: 400; + line-height: 24px; + letter-spacing: -1%; + + color: $main-color; + + &--transition { + display: flex; + gap: 4px; + justify-content: center; + align-items: center; + + color: $accent-color; + text-transform: uppercase; + font-weight: 500; + letter-spacing: 2%; + line-height: 16px; + + &:hover { + color: $accent-color-dark; + } + } + } +} diff --git a/src/styles/blocks/_page.scss b/src/styles/blocks/_page.scss new file mode 100644 index 000000000..98cc1c8b9 --- /dev/null +++ b/src/styles/blocks/_page.scss @@ -0,0 +1,47 @@ +.page { + scroll-behavior: smooth; + overflow-x: hidden; + + &__body { + overflow-x: hidden; + } + + &:has(.page__menu:target) { + overflow: hidden; + } + + &:has(.header__link:hover, .header__link:focus) { + .icon--cookie { + fill: #fff; + } + } + + &:has(.nav__link--transition:hover, .product__order:hover) { + .icon--phone { + fill: $accent-color-dark; + } + + .icon--arrow { + fill: $accent-color-dark; + } + } + + &__menu { + position: fixed; + top: 0; + left: 0; + right: 0; + + opacity: 0; + pointer-events: none; + + &:target { + opacity: 1; + pointer-events: all; + } + } + + &__main { + @include paddingInline; + } +} diff --git a/src/styles/blocks/_product.scss b/src/styles/blocks/_product.scss new file mode 100644 index 000000000..2123b854f --- /dev/null +++ b/src/styles/blocks/_product.scss @@ -0,0 +1,88 @@ +.product { + + &__wrapper { + display: grid; + row-gap: 56px; + + padding-top: 56px; + + @include onTablet { + grid-template-columns: repeat(8, 1fr); + column-gap: 24px; + } + + @include onLargeDesctop { + justify-content: center; + grid-template-columns: repeat(8, 128px); + } + } + + &__cards { + cursor: pointer; + transition: 0.3s; + + @include onTablet { + grid-column: span 4; + } + + @include onDesctop { + grid-column: span 3; + } + + &--left { + @include onDesctop { + grid-column: 3 / 6; + } + } + + &:hover { + scale: 0.9; + } + } + + &__image { + width: 100%; + } + + &__title { + font-size: 16px; + font-weight: 500; + line-height: 16px; + letter-spacing: 2%; + text-transform: uppercase; + + color: $main-grey-color; + + padding-top: 16px; + } + + &__description { + font-size: 16px; + font-weight: 400; + line-height: 24px; + letter-spacing: -1%; + + padding-top: 8px; + } + + &__order { + display: flex; + align-items: center; + gap: 4px; + + font-size: 16px; + font-weight: 500; + line-height: 16px; + letter-spacing: 2%; + text-transform: uppercase; + + color: $accent-color; + + padding-top: 16px; + + &:hover { + + color: $accent-color-dark; + } + } +} diff --git a/src/styles/blocks/_section.scss b/src/styles/blocks/_section.scss new file mode 100644 index 000000000..5005216f0 --- /dev/null +++ b/src/styles/blocks/_section.scss @@ -0,0 +1,63 @@ +.section { + + &__wrapper { + padding-top: 64px; + + &--about-us { + padding-top: 72px; + position: relative; + + @include onTablet { + padding-top: 152px; + } + + @include onDesctop { + padding-top: 178px; + } + } + } + + &__title { + font-size: 48px; + font-weight: 400; + line-height: 41px; + letter-spacing: -5%; + + color: $accent-color; + text-transform: uppercase; + + @include onTablet { + font-size: 56px; + line-height: 47.6px; + } + + @include onDesctop { + font-size: 72px; + line-height: 61.2px; + } + } + + &__description { + font-size: 16px; + font-weight: 400; + line-height: 24px; + letter-spacing: -1%; + + padding-top: 24px; + } + + &__header { + + @include onTablet { + grid-column: 1 / -1; + } + + @include onDesctop { + grid-column: 1 / -1; + } + + @include onLargeDesctop { + grid-column: 1 / -1; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..61e890c54 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,39 @@ @import 'utils'; @import 'fonts'; +@import 'blocks/page'; @import 'typography'; +@import 'blocks/header'; +@import 'blocks/icons'; +@import 'blocks/logo'; +@import 'blocks/menu'; +@import 'blocks/nav'; +@import 'blocks/section'; +@import 'blocks/product'; +@import 'blocks/about-us'; +@import 'blocks/footer'; + body { - background: $c-gray; + background: $body-color; + font-family: Inter, sans-serif; + color: $main-color; +} + +.title { + text-transform: uppercase; +} + +.main { + + &__wrapper { + padding-bottom: 72px; + + @include onTablet { + padding-bottom: 152px; + } + + @include onDesctop { + padding-bottom: 349px; + } + } } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..8eeb6b7a1 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,37 @@ #{$_property}: $_toValue; } } + +@mixin onTablet { + @media (min-width: 640px) { + @content; + } +} + +@mixin onDesctop { + @media (min-width: 1024px) { + @content; + } +} + +@mixin onLargeDesctop { + @media (min-width: 1200px) { + @content; + } +} + +@mixin paddingInline { + padding-inline: 16px; + + @include onTablet { + padding-inline: 44px; + } + @include onDesctop() { + padding-inline: 44px; + } + @include onLargeDesctop() { + padding-inline: 124px; + } +} + + diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..aa765e7b1 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,8 @@ $c-gray: #eee; +$main-color: #1c1a26; +$accent-color: #f9512e; +$body-color: #FFEEFC; +$main-light-color: #ffffff; +$main-grey-color: #7f8096; +$accent-color-dark: #b2341a; +$accent-color-light: #fba28f;