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..b6cb39ebf 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://itsmeoleg.github.io/layout_creativeBakery/). 14. Copy `DEMO LINK` to the PR description. > To update you PR repeat steps 7-11. diff --git a/index.html b/index.html index d339e6856..e0ff10fc6 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,440 @@ - + - Title + Creative Bakery + + - -

Hello Mate Academy

- + + +
+
+
+ + Bakerlab-logo + + + + + + +
+
+
+
+ + + +
+
+
+
+

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

+

Creative bakery

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

What we bake

+

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

+
+ +
    +
  • +
    + Cakes +
    +

    cakes

    +

    Oatmeal cookies with golden raisins, orange zest and chocolate chips

    +
    + + + Order + +
    +
    • +
  • +
    + Cakes +
    +

    cakes

    +

    Chocolate biscuit coffee cake topped with a buttercream and powder

    +
    + + + Order + +
    +
    • +
  • +
    + Cakes +
    +

    donuts

    +

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

    +
    + + + Order + +
    +
    • +
  • +
    + Cakes +
    +

    donuts

    +

    Light multi-layered croissant strewn with + coconut and
    nuts + +

    +
    + + + Order + +
    +
    • +
  • +
    + Cakes +
    +

    cakes

    +

    Chocolate salted caramel, Vanilla frutti pebbles

    +
    + + + Order + +
    +
    • +
  • +
    + Cakes +
    +

    cakes

    +

    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 +
    • +
+
+
+
+ + diff --git a/package-lock.json b/package-lock.json index d5f989323..b0712f389 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": "^2.1.2", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", @@ -1510,10 +1510,11 @@ "dev": true }, "node_modules/@mate-academy/scripts": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.2.tgz", - "integrity": "sha512-gUXFdqqOfYzF9R3RSx2pCa5GLdOkxB9bFbF+dpUpzucdgGAANqOGdqpmNnMj+e3xA9YHraUWq3xo9cwe5vD9pQ==", + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.3.tgz", + "integrity": "sha512-a07wHTj/1QUK2Aac5zHad+sGw4rIvcNl5lJmJpAD7OxeSbnCdyI6RXUHwXhjF5MaVo9YHrJ0xVahyERS2IIyBQ==", "dev": true, + "license": "MIT", "dependencies": { "@octokit/rest": "^17.11.2", "@types/get-port": "^4.2.0", diff --git a/package.json b/package.json index 2500d08d2..ad8c6cd06 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "creative-bakery", "version": "1.0.0", "description": "Layout Creative Bakery", - "homepage": "layout_creativeBakery", + "homepage": "https://itsmeoleg.github.io/layout_creativeBakery/", "scripts": { "init": "mate-scripts init", "start": "mate-scripts start", @@ -23,7 +23,7 @@ "@linthtml/linthtml": "^0.9.6", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^2.1.2", + "@mate-academy/scripts": "^2.1.3", "@mate-academy/stylelint-config": "latest", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", diff --git a/src/fonts/Inter_18pt-Bold.ttf b/src/fonts/Inter_18pt-Bold.ttf new file mode 100644 index 000000000..57704d104 Binary files /dev/null and b/src/fonts/Inter_18pt-Bold.ttf differ diff --git a/src/fonts/Inter_18pt-Regular.ttf b/src/fonts/Inter_18pt-Regular.ttf new file mode 100644 index 000000000..ce097c825 Binary files /dev/null and b/src/fonts/Inter_18pt-Regular.ttf differ diff --git a/src/fonts/Inter_28pt-Bold.ttf b/src/fonts/Inter_28pt-Bold.ttf new file mode 100644 index 000000000..14db99406 Binary files /dev/null and b/src/fonts/Inter_28pt-Bold.ttf differ diff --git a/src/fonts/Inter_28pt-Regular.ttf b/src/fonts/Inter_28pt-Regular.ttf new file mode 100644 index 000000000..855b6f476 Binary files /dev/null and b/src/fonts/Inter_28pt-Regular.ttf differ diff --git a/src/icons/Icon-arrow.svg b/src/icons/Icon-arrow.svg new file mode 100644 index 000000000..a1bd54079 --- /dev/null +++ b/src/icons/Icon-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/icons/Icon-close.svg b/src/icons/Icon-close.svg new file mode 100644 index 000000000..8c10df3c5 --- /dev/null +++ b/src/icons/Icon-close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/icons/Icon-cookie-png.png b/src/icons/Icon-cookie-png.png new file mode 100644 index 000000000..9f0752a8a Binary files /dev/null and b/src/icons/Icon-cookie-png.png differ diff --git a/src/icons/Icon-cookie.svg b/src/icons/Icon-cookie.svg new file mode 100644 index 000000000..992115b32 --- /dev/null +++ b/src/icons/Icon-cookie.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/icons/Icon-facebook.svg b/src/icons/Icon-facebook.svg new file mode 100644 index 000000000..93b3835e8 --- /dev/null +++ b/src/icons/Icon-facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/icons/Icon-instagram.svg b/src/icons/Icon-instagram.svg new file mode 100644 index 000000000..a94faeecf --- /dev/null +++ b/src/icons/Icon-instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/icons/Icon-menu.svg b/src/icons/Icon-menu.svg new file mode 100644 index 000000000..2b82cbfa5 --- /dev/null +++ b/src/icons/Icon-menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/icons/Icon-phone.svg b/src/icons/Icon-phone.svg new file mode 100644 index 000000000..39b157356 --- /dev/null +++ b/src/icons/Icon-phone.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/icons/Icon-twitter.svg b/src/icons/Icon-twitter.svg new file mode 100644 index 000000000..d603a143e --- /dev/null +++ b/src/icons/Icon-twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/Bakerlab-logo.svg b/src/images/Bakerlab-logo.svg new file mode 100644 index 000000000..4eb4c54f3 --- /dev/null +++ b/src/images/Bakerlab-logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/Cookie.png b/src/images/Cookie.png new file mode 100644 index 000000000..aedb6fbde Binary files /dev/null and b/src/images/Cookie.png differ diff --git a/src/images/Crumbs.png b/src/images/Crumbs.png new file mode 100644 index 000000000..fa073287d Binary files /dev/null and b/src/images/Crumbs.png differ diff --git a/src/images/photo-product-01.png b/src/images/photo-product-01.png new file mode 100644 index 000000000..4eed1734c Binary files /dev/null and b/src/images/photo-product-01.png differ diff --git a/src/images/photo-product-02.png b/src/images/photo-product-02.png new file mode 100644 index 000000000..9462ac2cf Binary files /dev/null and b/src/images/photo-product-02.png differ diff --git a/src/images/photo-product-03.png b/src/images/photo-product-03.png new file mode 100644 index 000000000..b5238311d Binary files /dev/null and b/src/images/photo-product-03.png differ diff --git a/src/images/photo-product-04.png b/src/images/photo-product-04.png new file mode 100644 index 000000000..087ce7a80 Binary files /dev/null and b/src/images/photo-product-04.png differ diff --git a/src/images/photo-product-05.png b/src/images/photo-product-05.png new file mode 100644 index 000000000..c9b4e9290 Binary files /dev/null and b/src/images/photo-product-05.png differ diff --git a/src/images/photo-product-06.png b/src/images/photo-product-06.png new file mode 100644 index 000000000..1016d7cb1 Binary files /dev/null and b/src/images/photo-product-06.png differ diff --git a/src/scripts/index.js b/src/scripts/index.js new file mode 100644 index 000000000..26ca1ebd7 --- /dev/null +++ b/src/scripts/index.js @@ -0,0 +1,14 @@ +'use strict'; + +const page = document.querySelector('.page'); +const switcher = document.querySelector('.theme-switcher'); + +switcher.addEventListener('click', () => { + if (page.classList.contains('page--theme--red')) { + page.classList.remove('page--theme--red'); + switcher.classList.remove('theme-switcher--theme--red'); + } else { + page.classList.add('page--theme--red'); + switcher.classList.add('theme-switcher--theme--red'); + } +}); diff --git a/src/scripts/main.js b/src/scripts/main.js deleted file mode 100644 index ad9a93a7c..000000000 --- a/src/scripts/main.js +++ /dev/null @@ -1 +0,0 @@ -'use strict'; 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 deleted file mode 100644 index 3280c3fe1..000000000 --- a/src/styles/_utils.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import 'utils/vars'; -@import 'utils/mixins'; -@import 'utils/extends'; diff --git a/src/styles/blocks/about-us.scss b/src/styles/blocks/about-us.scss new file mode 100644 index 000000000..325ddff92 --- /dev/null +++ b/src/styles/blocks/about-us.scss @@ -0,0 +1,128 @@ +.about { + position: relative; + + margin-bottom: 56px; + + background-image: url(../images/Crumbs.png); + background-repeat: no-repeat; + background-position: top 500px left 0; + background-size: 320px auto; + + @include on-tablet { + background-position: center; + background-size: 526px auto; + } + + @include on-desktop-l { + min-height: 675px; + background-position: left 281px top 0; + background-size: 715px auto; + } + + &__achive { + position: relative; + } + + &__content { + display: flex; + flex-direction: column; + gap: 32px; + margin-bottom: 64px; + + @include on-tablet { + @include page-grid; + } + + @include on-desktop-l { + margin-bottom: 144px; + } + } + + &__title { + margin: 0; + + font-size: 48px; + font-weight: 400; + line-height: 85%; + color: $dark-text; + text-transform: uppercase; + letter-spacing: -0.05em; + + transition: color 0.3s; + + @include on-tablet { + grid-column: span 4; + } + + @include on-desktop-l { + font-size: 72px; + } + } + + &__subtitle { + margin: 0; + font-weight: 400; + line-height: 150%; + letter-spacing: -0.01em; + + @include on-tablet { + grid-column: span 4; + } + } + + &__text { + display: flex; + flex-direction: column; + gap: 32px; + margin-bottom: 64px; + } + + &__stats { + display: flex; + flex-direction: column; + gap: 48px; + + margin: 0; + margin-bottom: 72px; + padding: 0; + + text-align: left; + + @include on-tablet { + gap: 80px; + + @include page-grid; + } + } + + &__stat { + display: flex; + flex-direction: column; + gap: 8px; + + text-align: left; + + transition: color 0.3s; + + @include on-tablet { + grid-column: span 4; + } + + @include on-desktop-l { + grid-column: span 2; + } + } + + &__stat-value { + font-size: 96px; + font-weight: 400; + line-height: 85%; + letter-spacing: -0.05em; + } + + &__stat-label { + margin: 0; + padding: 0; + color: $grey-text; + } +} diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 000000000..de42ef27c --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,47 @@ +.button { + cursor: pointer; + + display: flex; + gap: 4px; + align-items: center; + justify-content: center; + + box-sizing: border-box; + height: 56px; + border: 2px solid red; + border-radius: 32px; + + line-height: 56px; + color: $red-text; + text-align: center; + text-decoration: none; + text-transform: uppercase; + + &--card { + position: relative; + + justify-content: left; + + width: fit-content; + height: 32px; + margin: 0; + border: none; + + @include underline-hover($red-text, 1px, -4px, 0.3s); + } + + &__icon { + display: inline-block; + + width: 24px; + height: 24px; + + background-image: url(../icons/Icon-cookie.svg); + background-position: center; + background-size: cover; + + &--order { + background-image: url(../icons/Icon-arrow.svg); + } + } +} diff --git a/src/styles/blocks/card.scss b/src/styles/blocks/card.scss new file mode 100644 index 000000000..224cf75cd --- /dev/null +++ b/src/styles/blocks/card.scss @@ -0,0 +1,39 @@ +.card { + display: flex; + flex-direction: column; + gap: 16px; + + &__img { + display: block; + width: 100%; + border-radius: 8px; + object-fit: cover; + + @include hover(transform, scale(1.05)); + } + + &__description { + margin: 0; + line-height: 150%; + color: $dark-text; + + &--break--xl { + display: none; + + @include on-desktop-xl { + display: inline; + } + } + } + + &__title { + margin: 0; + margin-bottom: 8px; + + font-weight: 500; + line-height: 100%; + color: $grey-text; + text-transform: uppercase; + letter-spacing: 0.02em; + } +} diff --git a/src/styles/blocks/fonts.scss b/src/styles/blocks/fonts.scss new file mode 100644 index 000000000..5dfb259f8 --- /dev/null +++ b/src/styles/blocks/fonts.scss @@ -0,0 +1,11 @@ +@font-face { + font-family: Inter; + font-weight: normal; + src: url(../fonts/Inter_18pt-Regular.ttf); +} + +@font-face { + font-family: Inter; + font-weight: normal; + src: url(../fonts/Inter_28pt-Regular.ttf); +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..0d6418bfc --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,148 @@ +.footer { + padding-block: 56px; + background-color: $dark-text; + + &__logo-link { + display: block; + width: 168px; + height: 40px; + color: $white-text; + + @include on-tablet { + grid-column: 1 / 4; + } + } + + &__content { + display: flex; + flex-direction: column; + gap: 40px; + + @include on-tablet { + @include page-grid; + } + } + + &__section { + display: flex; + flex-direction: column; + gap: 40px; + justify-content: left; + + &--right { + @include on-tablet { + grid-column: 4 / -1; + } + + @include on-desktop-l { + grid-column: 5 / -1; + } + } + + &--left { + @include on-tablet { + grid-column: 1 / 4; + } + } + } + + &__section-subtitle { + margin: 0; + font-size: 16px; + color: $grey-text; + text-transform: uppercase; + } + + &__section-title { + margin: 0; + + font-size: 48px; + line-height: 85%; + color: $white-text; + text-transform: uppercase; + + @include on-tablet { + grid-column: 4 / -1; + grid-row-start: 1; + font-size: 56px; + } + + @include on-desktop-l { + grid-column: 5 / -1; + grid-row-start: 1; + font-size: 72px; + } + } + + &__section-group { + display: flex; + flex-direction: column; + gap: 16px; + } + + &__list { + gap: 16px; + } + + &__nav-item { + display: flex; + justify-content: left; + } + + &__nav-link { + position: relative; + + width: fit-content; + + font-size: 16px; + font-weight: 400; + line-height: 150%; + color: $white-text; + text-decoration: none; + letter-spacing: -0.01em; + + @include hover(transform, scale(1.1)); + @include underline-hover($white-text, 1px, -4px, 0.3s); + } + + &__socials { + display: flex; + gap: 32px; + + margin: 0; + padding: 0; + + list-style: none; + } + + &__icon { + display: block; + + width: 24px; + height: 24px; + + color: $red-text; + + transition: color 0.3s; + + @include hover(transform, scale(1.1)); + + &:hover { + color: $white-text; + } + } + + &__watermark { + color: $grey-text; + + @include on-tablet { + grid-column: 4 / -1; + grid-row-start: 3; + } + + @include on-desktop-l { + grid-column: 5 / -1; + grid-row-start: 3; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..8abd5f788 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,42 @@ +.header { + &__content { + position: relative; + } +} + +.theme-switcher { + position: absolute; + right: 64px; + + width: 40px; + padding: 5px; + border: $grey-text 2px solid; + border-radius: 20px; + + transition: border-color 0.3s; + + @include on-desktop-l { + right: 32px; + } +} + +.theme-switcher::after { + content: ''; + + display: block; + + width: 50%; + padding-bottom: 50%; + border-radius: 50%; + + background-color: $grey-text; + + transition: + transform 0.3s, + color 0.3s; +} + +.theme-switcher--theme--red::after { + transform: translateX(100%); + background-color: $red-text; +} diff --git a/src/styles/blocks/hero.scss b/src/styles/blocks/hero.scss new file mode 100644 index 000000000..303b6701f --- /dev/null +++ b/src/styles/blocks/hero.scss @@ -0,0 +1,113 @@ +.hero { + &__content { + padding-top: 32px; + padding-bottom: 40px; + text-align: center; + + @include on-tablet { + @include page-grid; + + row-gap: 0; + place-items: center; + padding-top: 80px; + } + + @include on-desktop-l { + padding-top: 0; + } + } + + &__image { + pointer-events: none; + width: 100%; + height: 100%; + + @include on-tablet { + grid-column: 3 / 7; + grid-row: 2; + } + + @include on-desktop-l { + grid-column: 3 / 7; + grid-row: 1 / 3; + } + } + + &__title { + z-index: 2; + + margin: 0; + + font-size: 64px; + font-weight: 400; + line-height: 85%; + text-transform: uppercase; + + transition: color 0.3s; + + @include on-tablet { + grid-column: 1 / -1; + grid-row: 2; + justify-self: stretch; + + font-size: 80px; + letter-spacing: -0.05em; + } + + @include on-desktop-l { + grid-column: 1 / -1; + grid-row: 1 / 3; + font-size: 125px; + letter-spacing: -0.05em; + } + + @include on-desktop-xl { + font-size: 144px; + } + } + + &__subtitle { + margin: 0; + margin-bottom: 20px; + + @include on-tablet { + grid-column: span 4; + text-align: left; + } + + @include on-desktop-l { + grid-column: 1 / 3; + grid-row: 1 / 2; + letter-spacing: -0.01em; + } + } + + &__button { + @include on-tablet { + grid-column: 3 / 7; + justify-self: stretch; + margin-top: 80px; + } + + @include on-desktop-l { + grid-column: 1 / 3; + grid-row: 2 / 3; + justify-self: stretch; + margin-top: 0; + } + + transition: + background-color 0.3s, + color 0.3s; + + &:hover { + border: none; + color: $white-text; + background-color: $red-text; + } + + &:focus { + background-color: $dark-red-text; + } + } +} diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss new file mode 100644 index 000000000..e0794d6ed --- /dev/null +++ b/src/styles/blocks/icon.scss @@ -0,0 +1,27 @@ +.icon { + display: block; + + width: 24px; + height: 24px; + + background-repeat: no-repeat; + background-position: center; + + transition: background-image 0.3s; + + &--menu { + background-image: url(../icons/Icon-menu.svg); + + &:hover { + background-image: url(../icons/Icon-close.svg); + } + } + + &--close { + background-image: url(../icons/Icon-close.svg); + } + + &--phone { + background-image: url(../icons/Icon-phone.svg); + } +} diff --git a/src/styles/blocks/item.scss b/src/styles/blocks/item.scss new file mode 100644 index 000000000..231d28489 --- /dev/null +++ b/src/styles/blocks/item.scss @@ -0,0 +1,37 @@ +.item { + &__card { + @include on-tablet { + grid-column: span 4; + } + + @include on-desktop-l { + grid-column: span 3; + } + + &--right { + @include on-desktop-l { + &:nth-child(3) { + grid-column: 3 / 6; + } + } + } + } + + &__list { + display: flex; + flex-direction: column; + gap: 56px; + + margin: 0; + margin-bottom: 72px; + padding: 0; + + list-style: none; + + @include on-tablet { + @include page-grid; + + justify-items: end; + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..93f041cb5 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,17 @@ +.menu { + z-index: 5; + + overflow: auto; + + box-sizing: border-box; + height: 100vh; + + background-color: $light-blue; + + &__bottom { + display: flex; + justify-content: center; + margin-top: 132px; + text-align: center; + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 000000000..623adfc32 --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,40 @@ +.nav { + &__list { + display: flex; + flex-direction: column; + gap: 24px; + + margin: 0; + padding: 0; + + list-style: none; + + &--horizontal { + flex-direction: row; + gap: 64px; + } + } + + &__item { + display: flex; + justify-content: center; + } + + &__link { + color: $dark-text; + text-decoration: none; + + @include hover(transform, scale(1.1)); + + &--contact { + display: flex; + gap: 4px; + justify-content: center; + color: $red-text; + } + + &--white { + color: #fff; + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..55220be55 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,45 @@ +.page { + scroll-behavior: smooth; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: normal; + font-style: normal; + line-height: 150%; + letter-spacing: -0.01em; + + &:has(.page__menu:target) { + overflow: hidden; + } + + &__body { + z-index: -1; + + min-width: 320px; + margin: 0; + + background-color: $light-blue; + + transition: background-color 0.3s; + } + + &__menu { + pointer-events: none; + + position: fixed; + top: 0; + right: 0; + left: 0; + transform: translateY(-100%); + + opacity: 1; + + transition: all 0.3s; + + &:target { + pointer-events: all; + transform: translateY(0); + opacity: 1; + } + } +} diff --git a/src/styles/blocks/pink--theme.scss b/src/styles/blocks/pink--theme.scss new file mode 100644 index 000000000..96f3215bb --- /dev/null +++ b/src/styles/blocks/pink--theme.scss @@ -0,0 +1,33 @@ +.page--theme--red { + .page__body { + background-color: $light-pink; + } + + .hero__title { + color: $red-text; + } + + .section-title { + color: $red-text; + } + + .about__title { + color: $red-text; + } + + .about__stat-value { + color: $red-text; + } + + .theme-switcher { + border-color: $red-text; + } + + .page__menu { + background-color: $light-pink; + } + + .top-bar { + background-color: $light-pink; + } +} diff --git a/src/styles/blocks/section-title.scss b/src/styles/blocks/section-title.scss new file mode 100644 index 000000000..377b0e823 --- /dev/null +++ b/src/styles/blocks/section-title.scss @@ -0,0 +1,26 @@ +.section-title { + margin: 0; + + font-size: 48px; + font-weight: 400; + line-height: 85%; + text-transform: uppercase; + letter-spacing: -0.05em; + + transition: color 0.3s; + + &--main { + margin-top: 68px; + } + &--secondary { + margin-top: 72px; + + @include on-tablet { + margin-top: 0; + } + } + + @include on-tablet { + font-size: 72px; + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 000000000..f0298237b --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,37 @@ +.top-bar { + display: flex; + align-items: center; + justify-content: space-between; + + margin: 0; + padding: 16px; + + transition: background-color 0.3s; + + @include on-desktop-l { + padding: 28px 32px; + } + + &__mobile { + @include on-desktop-l { + display: none; + } + } + + &__nav { + display: none; + + @include on-desktop-l { + padding-right: 80px; + } + + @include on-desktop-l { + display: flex; + flex-direction: column; + } + } + + &__logo-img { + @include hover(transform, scale(1.1)); + } +} diff --git a/src/styles/blocks/what-we-bake.scss b/src/styles/blocks/what-we-bake.scss new file mode 100644 index 000000000..0f94ab16d --- /dev/null +++ b/src/styles/blocks/what-we-bake.scss @@ -0,0 +1,20 @@ +.what-we-bake { + display: flex; + flex-direction: column; + gap: 56px; + + &__text { + display: flex; + flex-direction: column; + gap: 24px; + margin: 0; + + @include on-tablet { + grid-column: 1 / -1; + } + } + + &__subtitle { + margin: 0; + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..9e0481cae 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,19 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; +@import './utils/vars'; +@import './utils/mixins'; +@import './blocks/fonts'; -body { - background: $c-gray; -} +@import './blocks/pink--theme'; +@import './blocks/menu'; +@import './blocks/about-us'; +@import './blocks/item'; +@import './blocks/what-we-bake'; +@import './blocks/card'; +@import './blocks/section-title'; +@import './blocks/hero'; +@import './blocks/nav'; +@import './blocks/button'; +@import './blocks/page'; +@import './blocks/icon'; +@import './blocks/header'; +@import './blocks/top-bar'; +@import './blocks/footer'; diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..0c2f36509 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,81 @@ #{$_property}: $_toValue; } } + +@mixin on-tablet() { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-desktop-l() { + @media (min-width: $desktop-l-min-width) { + @content; + } +} + +@mixin on-desktop-xl() { + @media (min-width: $desktop-xl-min-width) { + @content; + } +} + +@mixin content-padding-inline() { + margin: 0 auto; + padding-inline: 16px; + + @include on-tablet { + padding-inline: 44px; + } + + @include on-desktop-l { + max-width: 1020px; + } + + @include on-desktop-xl { + max-width: 1201px; + margin-inline: auto; + } +} + +.container { + @include content-padding-inline; +} + +@mixin page-grid { + --columns: 2; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 20px; + + @include on-tablet { + --columns: 8; + + column-gap: 24px; + } +} + +@mixin underline-hover($color, $height, $offset, $duration) { + &::after { + content: ''; + + position: absolute; + bottom: #{$offset}; + transform-origin: center; + transform: scale(0); + + display: block; + + width: 100%; + height: #{$height}; + + background-color: $color; + + transition: transform 0.3s; + } + + &:hover::after { + transform: scale(1); + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..7bcf9ada7 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,12 @@ $c-gray: #eee; +$light-blue: #eef7ff; +$dark-text: #1c1a26; +$red-text: #f9512e; +$light-orange: #fba28f; +$light-pink: #ffeefc; +$dark-red-text: #82341a; +$grey-text: #7f8096; +$white-text: #fff; +$tablet-min-width: 639px; +$desktop-l-min-width: 1023px; +$desktop-xl-min-width: 1201px;