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..8ec337384 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://Korochenko.github.io/layout_creativeBakery/). 14. Copy `DEMO LINK` to the PR description. > To update you PR repeat steps 7-11. diff --git a/dist/assets/Crumbs-Dd-GRtaa.png b/dist/assets/Crumbs-Dd-GRtaa.png new file mode 100644 index 000000000..b314081aa Binary files /dev/null and b/dist/assets/Crumbs-Dd-GRtaa.png differ diff --git a/dist/assets/cookie-header-CwQFGdJp.png b/dist/assets/cookie-header-CwQFGdJp.png new file mode 100644 index 000000000..d6817b2d3 Binary files /dev/null and b/dist/assets/cookie-header-CwQFGdJp.png differ diff --git a/dist/assets/index-D7q2JpqK.css b/dist/assets/index-D7q2JpqK.css new file mode 100644 index 000000000..7850ae02b --- /dev/null +++ b/dist/assets/index-D7q2JpqK.css @@ -0,0 +1 @@ +h1{font-family:Roboto,sans-serif;font-weight:400}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:100 900;src:url(/layout_creativeBakery/assets/inter-latin-wght-normal-Dx4kXJAl.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}*{padding:0;margin:0;list-style-type:none;scroll-behavior:smooth}a{text-decoration:none}.body{background:#fff0fc;font-family:Inter;box-sizing:border-box;display:flex;flex-direction:column;align-items:center}.header{height:100vh;max-width:1192px;width:100%;display:flex;flex-direction:column;align-items:center}.header__top{height:64px;width:100%;display:flex;justify-content:space-between;align-items:center;align-content:center;flex-wrap:wrap;padding:20px;box-sizing:border-box;margin-bottom:32px}@media(min-width:640px){.header__top{margin-bottom:80px}}@media(min-width:1200px){.header__top{margin-bottom:135px}}.header__top__logo{display:flex}.header__top__links{display:none}@media(min-width:1200px){.header__top__links{display:flex}}.header__top__links__list{display:flex;flex-direction:row;align-items:center;gap:64px}.header__top__links__list__link{display:flex;align-items:center;position:relative}.header__top__links__list__link:after{content:"";position:absolute;background-color:#f9512e;height:4px;bottom:-5px;left:0;width:100%;transform:scaleX(0);transition:transform .3s}.header__top__links__list__link:hover:after{transform:scaleX(1)}.header__top__links__list__link:focus:after{transform:scaleX(1)}.header__top__links__list__link__text{color:#1c1a26;font-weight:400;font-size:16px;line-height:150%;letter-spacing:-.01em;transition:all .4s ease}.header__top__links__list__link__text:hover{color:#f9512e}.header__top__links__list__link__text--contact-us{color:#f9512e;font-weight:500;font-size:16px;line-height:100%;letter-spacing:.02em;text-transform:uppercase}.header__top__links__list__link__img{margin-right:6px;width:18px;height:18px}@media(min-width:1200px){.header__top__burger{display:none}}.header__wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center}@media(min-width:640px){.header__wrapper{align-items:flex-start}}@media(min-width:1200px){.header__wrapper{width:100%;padding-left:44px}}.header__middle{margin-bottom:32px}@media(min-width:1200px){.header__middle{width:260px}}@media(min-width:1200px){.header__middle{margin-bottom:8px}}.header__middle__text{max-width:288px;width:100%;margin:0 auto;color:#1c1a26;font-weight:400;font-size:16px;line-height:150%;letter-spacing:-.01em;text-align:center}@media(min-width:640px){.header__middle__text{text-align:left}}.header__bottom{display:flex;flex-direction:column;align-items:center}@media(min-width:640px){.header__bottom{margin-top:100px}}@media(min-width:1200px){.header__bottom{margin-top:0;width:100%}}.header__bottom__title{color:#f9512e;font-weight:400;font-size:64px;line-height:85%;letter-spacing:-.05em;text-transform:uppercase;text-align:center}@media(min-width:640px){.header__bottom__title{position:relative;margin-bottom:-150px;z-index:3}}@media(min-width:1200px){.header__bottom__title{font-size:136px}}@media(min-width:640px){.header__bottom__box{position:relative;z-index:2;margin-bottom:80px}}@media(min-width:1200px){.header__bottom__box{position:absolute;top:7%}}.header__bottom__box__img{max-width:288px;width:100%;height:290px}@media(min-width:1200px){.header__bottom__box__img{max-width:544px;height:546px}}.header__bottom__btn{display:flex;align-items:center;gap:6px;color:#f9512e;font-weight:500;font-size:16px;line-height:100%;letter-spacing:.02em;text-transform:uppercase;border:2px solid #f9512e;padding:20px 78px;border-radius:16px;transition:all .4s ease}.header__bottom__btn:hover{color:#fff;background-color:#f9512e}.header__bottom__btn:hover .header__bottom__btn__img{filter:brightness(0) invert(1)}.header__bottom__btn:focus{color:#fff;background-color:#b2341a;border-color:#b2341a}.header__bottom__btn:focus .header__bottom__btn__img{filter:brightness(0) invert(1)}@media(min-width:640px){.header__bottom__btn{margin:0 auto}}@media(min-width:1200px){.header__bottom__btn{margin:188px 0 0}}.header__bottom__btn__img{width:20px;height:20px;transition:all .4s ease}.header__bottom__btn__img:hover{filter:brightness(0) invert(1)}.menu{opacity:0;position:fixed;top:0;left:0;right:0;height:100vh;width:100%;background-color:#ffeefc;pointer-events:none;z-index:100}.menu:target{opacity:1;pointer-events:all}.menu__top{height:64px;width:100%;display:flex;justify-content:space-between;align-items:center;align-content:center;flex-wrap:wrap;padding:20px;box-sizing:border-box;margin-bottom:32px}.menu__top__logo{display:flex}@media(min-width:1200px){.menu__top__close{display:none}}.menu__nav__list{margin-top:132px;display:flex;align-items:center;flex-direction:column;gap:24px}.menu__nav__list__item__link{color:#1c1a26;font-weight:400;font-size:16px;line-height:150%;letter-spacing:-.01em;text-align:center;transition:all .4 ease}.menu__nav__list__item__link:hover{color:#7f8096}.menu__nav__list__item--contact-us{color:#f9512e;font-weight:500;font-size:16px;line-height:100%;letter-spacing:.02em;text-transform:uppercase}.main{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;padding:0 16px 72px;box-sizing:border-box}@media(min-width:1200px){.main{padding:0 44px 56px}}.what-we-bake{margin-bottom:72px;max-width:1192px;width:100%}.what-we-bake__title{color:#f9512e;font-weight:400;font-size:48px;line-height:85%;letter-spacing:-.05em;text-transform:uppercase;margin-bottom:24px}.what-we-bake__desc{font-weight:400;font-size:16px;line-height:150%;letter-spacing:-.01em;margin-bottom:56px}@media(min-width:640px){.what-we-bake__desc{margin-bottom:80px}}.what-we-bake__grid{display:grid;grid-template-columns:1fr;gap:64px;justify-items:center}@media(min-width:640px){.what-we-bake__grid{grid-template-columns:repeat(2,1fr);row-gap:24px;column-gap:80px}}@media(min-width:1200px){.what-we-bake__grid{grid-template-columns:repeat(2,minmax(0,402px));row-gap:80px;column-gap:24px}}.what-we-bake__grid__card{width:100%;max-width:288px;height:492px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;transition:all .4s ease}.what-we-bake__grid__card:hover{transform:translateY(-4px)}@media(min-width:1200px){.what-we-bake__grid__card{max-width:402px}.what-we-bake__grid__card:nth-child(3),.what-we-bake__grid__card:nth-child(4){transform:translate(85%)}.what-we-bake__grid__card:nth-child(3):hover,.what-we-bake__grid__card:nth-child(4):hover{transform:translate(85%) translateY(-6px)}}.what-we-bake__grid__card__img{position:absolute;top:0;max-width:288px;width:100%;height:356px;border-radius:8px}@media(min-width:1200px){.what-we-bake__grid__card__img{max-width:402px}}.what-we-bake__grid__card__title{color:#7f8096;font-weight:500;font-size:16px;line-height:100%;letter-spacing:.02em;text-transform:uppercase;padding-bottom:16px}.what-we-bake__grid__card__desc{font-weight:400;font-size:16px;line-height:150%;letter-spacing:-.01em;padding-bottom:8px}.what-we-bake__grid__card__btn{display:flex;align-items:center;padding-bottom:8px;gap:6px;color:#f9512e;font-weight:500;font-size:16px;line-height:100%;letter-spacing:.02em;text-transform:uppercase}.what-we-bake__grid__card__btn:after{content:"";position:absolute;background-color:#f9512e;height:4px;bottom:-5px;left:0;width:20%;transform:scaleX(0);transition:transform .3s}.what-we-bake__grid__card__btn:hover:after{transform:scaleX(1)}.what-we-bake__grid__card__btn:focus:after{transform:scaleX(1)}.about-us{max-width:1192px;width:100%;display:flex;flex-direction:column;position:relative;overflow:hidden;z-index:1}.about-us__img{width:100%;max-width:400px;position:absolute;bottom:14%;z-index:2;pointer-events:none}@media(min-width:640px){.about-us__img{max-width:470px;bottom:13%;left:10%}}@media(min-width:1200px){.about-us__img{max-width:650px;bottom:0%;left:14%}}.about-us__top{display:flex;flex-direction:column;gap:32px;margin-bottom:64px}@media(min-width:640px){.about-us__top{position:relative;z-index:3;flex-direction:row;gap:24px}}@media(min-width:1200px){.about-us__top{justify-content:space-between}}.about-us__top__title{color:#f9512e;font-weight:400;font-size:48px;line-height:85%;letter-spacing:-.05em;text-transform:uppercase}@media(min-width:640px){.about-us__top__title{width:328px}}.about-us__top__text{font-weight:400;font-size:16px;line-height:150%;letter-spacing:-.01em}@media(min-width:640px){.about-us__top__text{width:328px}}@media(min-width:1200px){.about-us__top__text{width:544px}}.about-us__bottom{display:grid;grid-template-columns:1fr;gap:48px;position:relative}@media(min-width:640px){.about-us__bottom{grid-template-columns:repeat(2,1fr)}}@media(min-width:1200px){.about-us__bottom{grid-template-columns:repeat(4,1fr);grid-auto-flow:column;gap:24px;padding-bottom:293px}}.about-us__bottom__card{display:flex;flex-direction:column;gap:8px;z-index:2}.about-us__bottom__card__title{color:#f9512e;font-weight:400;font-size:96px;line-height:85%;letter-spacing:-.05em;text-transform:uppercase}.about-us__bottom__card__text{font-weight:400;font-size:16px;line-height:150%;letter-spacing:-.01em}.footer{background-color:#1c1a26;width:100%;display:flex;justify-content:center}.footer__wrapper{max-width:1192px;width:100%;padding:56px 16px;display:grid;grid-template-columns:1fr}@media(min-width:640px){.footer__wrapper{grid-template-columns:repeat(2,1fr)}}.footer__top{display:flex;flex-direction:column}.footer__top__logo{margin-bottom:40px}.footer__top__menu{display:flex;flex-direction:column;gap:16px;margin-bottom:64px}@media(min-width:1200px){.footer__top__menu{display:none}}.footer__top__menu__text{color:#fff;font-weight:400;font-size:16px;line-height:150%;letter-spacing:-.01em;transition:all ease .4s}.footer__top__menu__text:hover{color:#7f8096}.footer__top__menu__text--menu{color:#7f8096;font-weight:500;line-height:100%;letter-spacing:.02em;text-transform:uppercase}.footer__contact-us{display:flex;flex-direction:column}.footer__contact-us__wrapper{display:grid;grid-template-columns:1fr}@media(min-width:1200px){.footer__contact-us__wrapper{grid-template-columns:repeat(2,1fr)}}.footer__contact-us__title{margin-bottom:40px;color:#fff;font-weight:400;font-size:48px;line-height:85%;letter-spacing:-.05em;text-transform:uppercase}.footer__contact-us__numbers{display:flex;flex-direction:column;gap:16px;margin-bottom:40px}.footer__contact-us__numbers__number{color:#fff;font-weight:400;font-size:16px;line-height:150%;letter-spacing:-.01em;transition:all ease .4s}.footer__contact-us__numbers__number:hover{color:#7f8096}.footer__contact-us__numbers__number--call-us{color:gray;font-weight:500;line-height:100%;letter-spacing:.02em;text-transform:uppercase}.footer__contact-us__email-us{display:flex;flex-direction:column;gap:16px;margin-bottom:40px}.footer__contact-us__email-us__text{color:gray;font-weight:500;font-size:16px;line-height:100%;letter-spacing:.02em;text-transform:uppercase}.footer__contact-us__email-us__email{color:#fff;font-weight:400;font-size:16px;line-height:150%;letter-spacing:-.01em;transition:all ease .4s}.footer__contact-us__email-us__email:hover{color:#7f8096}.footer__network{display:grid;grid-template-columns:1fr;gap:16px}@media(min-width:640px){.footer__network{grid-column:span 2;grid-template-columns:repeat(2,1fr);align-items:center}}@media(min-width:640px){.footer__network{flex-direction:row}}.footer__network__socials{display:flex;justify-content:flex-start;gap:32px}.footer__network__socials__media{width:24px;height:24px;transition:all .4s ease}.footer__network__socials__media:hover{filter:brightness(0) invert(1)}.footer__network__socials__media:focus{filter:brightness(0) invert(1)}.footer__network__author{color:gray;font-weight:400;font-size:16px;line-height:150%;letter-spacing:-.01em} diff --git a/dist/assets/inter-latin-wght-normal-Dx4kXJAl.woff2 b/dist/assets/inter-latin-wght-normal-Dx4kXJAl.woff2 new file mode 100644 index 000000000..d15208de0 Binary files /dev/null and b/dist/assets/inter-latin-wght-normal-Dx4kXJAl.woff2 differ diff --git a/dist/assets/logo-BnZ5qMts.svg b/dist/assets/logo-BnZ5qMts.svg new file mode 100644 index 000000000..4eb4c54f3 --- /dev/null +++ b/dist/assets/logo-BnZ5qMts.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/dist/assets/logo-white-DFEqvRAe.svg b/dist/assets/logo-white-DFEqvRAe.svg new file mode 100644 index 000000000..a0595e7ae --- /dev/null +++ b/dist/assets/logo-white-DFEqvRAe.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/dist/assets/photo-product-01-BwiNK1Ow.png b/dist/assets/photo-product-01-BwiNK1Ow.png new file mode 100644 index 000000000..db510f55d Binary files /dev/null and b/dist/assets/photo-product-01-BwiNK1Ow.png differ diff --git a/dist/assets/photo-product-02-CZMUFOQ2.png b/dist/assets/photo-product-02-CZMUFOQ2.png new file mode 100644 index 000000000..0798eff48 Binary files /dev/null and b/dist/assets/photo-product-02-CZMUFOQ2.png differ diff --git a/dist/assets/photo-product-03-3ruSPxmS.png b/dist/assets/photo-product-03-3ruSPxmS.png new file mode 100644 index 000000000..850058ffc Binary files /dev/null and b/dist/assets/photo-product-03-3ruSPxmS.png differ diff --git a/dist/assets/photo-product-04-Cdom_ZO9.png b/dist/assets/photo-product-04-Cdom_ZO9.png new file mode 100644 index 000000000..8db1a4db0 Binary files /dev/null and b/dist/assets/photo-product-04-Cdom_ZO9.png differ diff --git a/dist/assets/photo-product-05-D2XU6Ona.png b/dist/assets/photo-product-05-D2XU6Ona.png new file mode 100644 index 000000000..1c654cf47 Binary files /dev/null and b/dist/assets/photo-product-05-D2XU6Ona.png differ diff --git a/dist/assets/photo-product-06-Bwg6shRp.png b/dist/assets/photo-product-06-Bwg6shRp.png new file mode 100644 index 000000000..c3545936c Binary files /dev/null and b/dist/assets/photo-product-06-Bwg6shRp.png differ diff --git a/dist/index.html b/dist/index.html new file mode 100644 index 000000000..4c238cac0 --- /dev/null +++ b/dist/index.html @@ -0,0 +1,498 @@ + + + + + + Creative Bakery + + + + +
+
+ + + + + burger-menu + +
+ +
+
+

+ 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 +

+
+
+ card-image +

Cakes

+

+ Oatmeal cookies with golden raisins, orange zest and chocolate + chips +

+ + order + order + +
+
+ card-image +

Cakes

+

+ Chocolate biscuit coffee cake topped with a buttercream and powder +

+ + # + order + +
+
+ card-image +

Donuts

+

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

+ + # + order + +
+
+ card-image +

Donuts

+

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

+ + # + order + +
+
+ card-image +

Cakes

+

+ Chocolate salted caramel, Vanilla frutti pebbles +

+ + # + order + +
+
+ card-image +

Cookies

+

+ Oatmeal cookies with golden raisins, orange zest and chocolate + chips +

+ + # + order + +
+
+
+
+ about-us-img +
+

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/index.html b/index.html index d339e6856..661aa2f4d 100644 --- a/index.html +++ b/index.html @@ -6,14 +6,507 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> - Title + Creative Bakery + + + - -

Hello Mate Academy

+ +
+
+ + + + + burger-menu + +
+ +
+
+

+ 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 +

+
+
+ card-image +

Cakes

+

+ Oatmeal cookies with golden raisins, orange zest and chocolate + chips +

+ + order + order + +
+
+ card-image +

Cakes

+

+ Chocolate biscuit coffee cake topped with a buttercream and powder +

+ + # + order + +
+
+ card-image +

Donuts

+

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

+ + # + order + +
+
+ card-image +

Donuts

+

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

+ + # + order + +
+
+ card-image +

Cakes

+

+ Chocolate salted caramel, Vanilla frutti pebbles +

+ + # + order + +
+
+ card-image +

Cookies

+

+ Oatmeal cookies with golden raisins, orange zest and chocolate + chips +

+ + # + order + +
+
+
+
+ about-us-img +
+

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..b3a9b1098 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,11 +9,14 @@ "version": "1.0.0", "hasInstallScript": true, "license": "GPL-3.0", + "dependencies": { + "@fontsource-variable/inter": "^5.2.8" + }, "devDependencies": { "@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", @@ -52,6 +55,7 @@ "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz", "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==", "dev": true, + "peer": true, "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.5", @@ -522,6 +526,7 @@ "url": "https://opencollective.com/csstools" } ], + "peer": true, "engines": { "node": ">=18" }, @@ -563,6 +568,7 @@ "url": "https://opencollective.com/csstools" } ], + "peer": true, "engines": { "node": ">=18" } @@ -1038,6 +1044,15 @@ "node": ">=18" } }, + "node_modules/@fontsource-variable/inter": { + "version": "5.2.8", + "resolved": "https://registry.npmjs.org/@fontsource-variable/inter/-/inter-5.2.8.tgz", + "integrity": "sha512-kOfP2D+ykbcX/P3IFnokOhVRNoTozo5/JxhAIVYLpea/UBmCQ/YWPBfWIDuBImXX/15KH+eKh4xpEUyS2sQQGQ==", + "license": "OFL-1.1", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, "node_modules/@inquirer/external-editor": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@inquirer/external-editor/-/external-editor-1.0.3.tgz", @@ -1510,10 +1525,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", @@ -1590,7 +1606,6 @@ "resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-6.0.0.tgz", "integrity": "sha512-P4YJBPdPSpWTQ1NU4XYdvHvXJJDxM6YwpS0FZHRgP7YFkdVxsWcpWGy/NVqlAA7PcPCnMacXlRm1y2PFZRWL/w==", "dev": true, - "peer": true, "engines": { "node": ">= 20" } @@ -1619,7 +1634,6 @@ "resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-11.0.2.tgz", "integrity": "sha512-4zCpzP1fWc7QlqunZ5bSEjxc6yLAlRTnDwKtgXfcI/FxxGoqedDG8V2+xJ60bV2kODqcGB+nATdtap/XYq2NZQ==", "dev": true, - "peer": true, "dependencies": { "@octokit/types": "^16.0.0", "universal-user-agent": "^7.0.2" @@ -1633,7 +1647,6 @@ "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-9.0.3.tgz", "integrity": "sha512-grAEuupr/C1rALFnXTv6ZQhFuL1D8G5y8CN04RgrO4FIPMrtm+mcZzFG7dcBm+nq+1ppNixu+Jd78aeJOYxlGA==", "dev": true, - "peer": true, "dependencies": { "@octokit/request": "^10.0.6", "@octokit/types": "^16.0.0", @@ -1647,8 +1660,7 @@ "version": "27.0.0", "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-27.0.0.tgz", "integrity": "sha512-whrdktVs1h6gtR+09+QsNk2+FO+49j6ga1c55YZudfEG+oKJVvJLQi3zkOm5JjiUXAagWK2tI2kTGKJ2Ys7MGA==", - "dev": true, - "peer": true + "dev": true }, "node_modules/@octokit/plugin-paginate-rest": { "version": "2.21.3", @@ -1710,7 +1722,6 @@ "resolved": "https://registry.npmjs.org/@octokit/request/-/request-10.0.7.tgz", "integrity": "sha512-v93h0i1yu4idj8qFPZwjehoJx4j3Ntn+JhXsdJrG9pYaX6j/XRz2RmasMUHtNgQD39nrv/VwTWSqK0RNXR8upA==", "dev": true, - "peer": true, "dependencies": { "@octokit/endpoint": "^11.0.2", "@octokit/request-error": "^7.0.2", @@ -1727,7 +1738,6 @@ "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-7.1.0.tgz", "integrity": "sha512-KMQIfq5sOPpkQYajXHwnhjCC0slzCNScLHs9JafXc4RAJI+9f+jNDlBNaIMTvazOPLgb4BnlhGJOTbnN0wIjPw==", "dev": true, - "peer": true, "dependencies": { "@octokit/types": "^16.0.0" }, @@ -1915,7 +1925,6 @@ "resolved": "https://registry.npmjs.org/@octokit/types/-/types-16.0.0.tgz", "integrity": "sha512-sKq+9r1Mm4efXW1FCk7hFSeJo4QKreL/tTbR0rz/qx/r1Oa2VV83LTA/H/MuCOX7uCIJmQVRKBcbmWoySjAnSg==", "dev": true, - "peer": true, "dependencies": { "@octokit/openapi-types": "^27.0.0" } @@ -2697,6 +2706,7 @@ "resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.1.tgz", "integrity": "sha512-GNWcUTRBgIRJD5zj+Tq0fKOJ5XZajIiBroOF0yvj2bSU1WvNdYS/dn9UxwsujGW4JX06dnHyjV2y9rRaybH0iQ==", "dev": true, + "peer": true, "dependencies": { "undici-types": "~7.16.0" } @@ -3070,8 +3080,7 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-4.0.0.tgz", "integrity": "sha512-q6tR3RPqIB1pMiTRMFcZwuG5T8vwp+vUvEG0vuI6B+Rikh5BfPp2fQ82c925FOs+b0lcFQ8CFrL+KbilfZFhOQ==", - "dev": true, - "peer": true + "dev": true }, "node_modules/bl": { "version": "4.1.0", @@ -3125,6 +3134,7 @@ "url": "https://github.com/sponsors/ai" } ], + "peer": true, "dependencies": { "baseline-browser-mapping": "^2.8.25", "caniuse-lite": "^1.0.30001754", @@ -4180,8 +4190,7 @@ "type": "opencollective", "url": "https://opencollective.com/fastify" } - ], - "peer": true + ] }, "node_modules/fast-deep-equal": { "version": "3.1.3", @@ -5925,6 +5934,7 @@ "resolved": "https://registry.npmjs.org/keyv/-/keyv-5.5.4.tgz", "integrity": "sha512-eohl3hKTiVyD1ilYdw9T0OiB4hnjef89e3dMYKz+mVKDzj+5IteTseASUsOB+EU9Tf6VNTCjDePcP6wkDGmLKQ==", "dev": true, + "peer": true, "dependencies": { "@keyv/serialize": "^1.1.1" } @@ -6721,6 +6731,7 @@ "url": "https://github.com/sponsors/ai" } ], + "peer": true, "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", @@ -6799,6 +6810,7 @@ "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.1.tgz", "integrity": "sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==", "dev": true, + "peer": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -7312,6 +7324,7 @@ "resolved": "https://registry.npmjs.org/sass/-/sass-1.94.2.tgz", "integrity": "sha512-N+7WK20/wOr7CzA2snJcUSSNTCzeCGUTFY3OgeQP3mZ1aj9NMQ0mSTXwlrnd89j33zzQJGqIN52GIOmYrfq46A==", "dev": true, + "peer": true, "dependencies": { "chokidar": "^4.0.0", "immutable": "^5.0.2", @@ -7645,6 +7658,7 @@ "url": "https://github.com/sponsors/stylelint" } ], + "peer": true, "dependencies": { "@csstools/css-parser-algorithms": "^3.0.5", "@csstools/css-syntax-patches-for-csstree": "^1.0.19", @@ -8081,6 +8095,7 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, + "peer": true, "engines": { "node": ">=12" }, @@ -8206,8 +8221,7 @@ "version": "7.0.3", "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-7.0.3.tgz", "integrity": "sha512-TmnEAEAsBJVZM/AADELsK76llnwcf9vMKuPz8JflO1frO8Lchitr0fNaN9d+Ap0BjKtqWqd/J17qeDnXh8CL2A==", - "dev": true, - "peer": true + "dev": true }, "node_modules/universalify": { "version": "2.0.1", @@ -8384,6 +8398,7 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, + "peer": true, "engines": { "node": ">=12" }, @@ -8721,20 +8736,6 @@ "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", "dev": true }, - "node_modules/yaml": { - "version": "2.8.1", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz", - "integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==", - "dev": true, - "optional": true, - "peer": true, - "bin": { - "yaml": "bin.mjs" - }, - "engines": { - "node": ">= 14.6" - } - }, "node_modules/yargs": { "version": "17.7.2", "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz", diff --git a/package.json b/package.json index 2500d08d2..095bc180c 100644 --- a/package.json +++ b/package.json @@ -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", @@ -42,5 +42,8 @@ "tests": { "backstop": false } + }, + "dependencies": { + "@fontsource-variable/inter": "^5.2.8" } } diff --git a/src/images/about-us-bckgr/Crumbs.png b/src/images/about-us-bckgr/Crumbs.png new file mode 100644 index 000000000..b314081aa Binary files /dev/null and b/src/images/about-us-bckgr/Crumbs.png differ diff --git a/src/images/cookies/cookie-header.png b/src/images/cookies/cookie-header.png new file mode 100644 index 000000000..d6817b2d3 Binary files /dev/null and b/src/images/cookies/cookie-header.png differ diff --git a/src/images/icons/arrow.svg b/src/images/icons/arrow.svg new file mode 100644 index 000000000..139e70319 --- /dev/null +++ b/src/images/icons/arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/burger.svg b/src/images/icons/burger.svg new file mode 100644 index 000000000..4f2194a84 --- /dev/null +++ b/src/images/icons/burger.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/button-img.svg b/src/images/icons/button-img.svg new file mode 100644 index 000000000..5bf16c613 --- /dev/null +++ b/src/images/icons/button-img.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/close.svg b/src/images/icons/close.svg new file mode 100644 index 000000000..65ae950c8 --- /dev/null +++ b/src/images/icons/close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/logo-white.svg b/src/images/icons/logo-white.svg new file mode 100644 index 000000000..a0595e7ae --- /dev/null +++ b/src/images/icons/logo-white.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/logo.svg b/src/images/icons/logo.svg new file mode 100644 index 000000000..4eb4c54f3 --- /dev/null +++ b/src/images/icons/logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/phone.svg b/src/images/icons/phone.svg new file mode 100644 index 000000000..b3c49f859 --- /dev/null +++ b/src/images/icons/phone.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/products/photo-product-01.png b/src/images/products/photo-product-01.png new file mode 100644 index 000000000..db510f55d Binary files /dev/null and b/src/images/products/photo-product-01.png differ diff --git a/src/images/products/photo-product-02.png b/src/images/products/photo-product-02.png new file mode 100644 index 000000000..0798eff48 Binary files /dev/null and b/src/images/products/photo-product-02.png differ diff --git a/src/images/products/photo-product-03.png b/src/images/products/photo-product-03.png new file mode 100644 index 000000000..850058ffc Binary files /dev/null and b/src/images/products/photo-product-03.png differ diff --git a/src/images/products/photo-product-04.png b/src/images/products/photo-product-04.png new file mode 100644 index 000000000..8db1a4db0 Binary files /dev/null and b/src/images/products/photo-product-04.png differ diff --git a/src/images/products/photo-product-05.png b/src/images/products/photo-product-05.png new file mode 100644 index 000000000..1c654cf47 Binary files /dev/null and b/src/images/products/photo-product-05.png differ diff --git a/src/images/products/photo-product-06.png b/src/images/products/photo-product-06.png new file mode 100644 index 000000000..c3545936c Binary files /dev/null and b/src/images/products/photo-product-06.png differ diff --git a/src/images/socials/facebook.svg b/src/images/socials/facebook.svg new file mode 100644 index 000000000..d629cfa5d --- /dev/null +++ b/src/images/socials/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/socials/instagram.svg b/src/images/socials/instagram.svg new file mode 100644 index 000000000..87e645f62 --- /dev/null +++ b/src/images/socials/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/socials/twitter.svg b/src/images/socials/twitter.svg new file mode 100644 index 000000000..0ca15e705 --- /dev/null +++ b/src/images/socials/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 45cdd5400..d546033cb 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,6 +1,13 @@ +/* inter-latin-wght-normal */ @font-face { - font-family: Roboto, Arial, Helvetica, sans-serif; - src: url('../fonts/Roboto-Regular-webfont.woff') format('woff'); - font-weight: normal; + font-family: Inter; font-style: normal; + font-display: swap; + font-weight: 100 900; + src: url(@fontsource-variable/inter/files/inter-latin-wght-normal.woff2) + format('woff2-variations'); + unicode-range: + U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, + U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, + U+2215, U+FEFF, U+FFFD; } diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..43e2d033b 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -2,6 +2,814 @@ @import 'fonts'; @import 'typography'; -body { - background: $c-gray; +* { + padding: 0; + margin: 0; + list-style-type: none; + scroll-behavior: smooth; +} + +a { + text-decoration: none; +} + +.body { + background: hsl(311deg, 100%, 97%); + font-family: Inter, serif; + box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: center; + + &:has([id='menu']:target) { + overflow: hidden; + } +} + +.header { + height: 100vh; + width: 100%; + + display: flex; + flex-direction: column; + align-items: center; + &__top { + height: 64px; + width: 100%; + display: flex; + place-content: center space-between; + align-items: center; + flex-wrap: wrap; + + padding: 20px; + box-sizing: border-box; + + margin-bottom: 32px; + + @include on-tablet { + margin-bottom: 80px; + } + + @include on-desktop { + margin-bottom: 135px; + } + &__logo { + display: flex; + } + + &__links { + display: none; + @include on-desktop { + display: flex; + } + &__list { + display: flex; + flex-direction: row; + align-items: center; + gap: 64px; + &__link { + display: flex; + align-items: center; + position: relative; + + &::after { + content: ''; + position: absolute; + background-color: #f9512e; + height: 4px; + bottom: -5px; + left: 0; + width: 100%; + transform: scaleX(0); + transition: transform 0.3s; + } + + &:hover::after { + transform: scaleX(1); + } + + &:focus::after { + transform: scaleX(1); + } + &__text { + color: #1c1a26; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: -0.01em; + transition: all 0.4s ease; + + &:hover { + color: #f9512e; + } + + &--contact-us { + color: #f9512e; + font-weight: 500; + font-size: 16px; + line-height: 100%; + letter-spacing: 0.02em; + text-transform: uppercase; + } + } + &__img { + margin-right: 6px; + width: 18px; + height: 18px; + } + } + } + } + + &__burger { + width: 24px; + height: 24px; + @include on-desktop { + display: none; + } + + &__img { + width: 24px; + height: 24px; + } + } + } + + &__wrapper { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + max-width: 1192px; + + @include on-tablet { + align-items: flex-start; + } + @include on-desktop { + width: 100%; + padding-left: 44px; + } + } + + &__middle { + margin-bottom: 32px; + + @include on-desktop { + width: 260px; + } + + @include on-desktop { + margin-bottom: 8px; + } + + &__text { + max-width: 288px; + width: 100%; + margin: 0 auto; + color: #1c1a26; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: -0.01em; + text-align: center; + + @include on-tablet { + text-align: left; + } + } + } + + &__bottom { + display: flex; + flex-direction: column; + align-items: center; + + @include on-tablet { + margin-top: 100px; + } + @include on-desktop { + margin-top: 0; + width: 100%; + } + &__title { + color: #f9512e; + font-weight: 400; + font-size: 64px; + line-height: 85%; + letter-spacing: -0.05em; + text-transform: uppercase; + text-align: center; + + @include on-tablet { + position: relative; + margin-bottom: -150px; + z-index: 3; + } + + @include on-desktop { + font-size: 136px; + } + } + + &__box { + @include on-tablet { + position: relative; + z-index: 2; + margin-bottom: 80px; + } + + @include on-desktop { + position: absolute; + top: 7%; + } + &__img { + max-width: 288px; + width: 100%; + height: 290px; + + @include on-desktop { + max-width: 544px; + height: 546px; + } + } + } + + &__btn { + display: flex; + align-items: center; + gap: 6px; + color: #f9512e; + font-weight: 500; + font-size: 16px; + line-height: 100%; + letter-spacing: 0.02em; + text-transform: uppercase; + border: 2px solid #f9512e; + padding: 20px 78px; + border-radius: 16px; + transition: all 0.4s ease; + + &__img { + width: 20px; + height: 20px; + transition: all 0.4s ease; + + &:hover { + filter: brightness(0) invert(1); + } + } + + &:hover { + color: #fff; + background-color: #f9512e; + .header__bottom__btn__img { + filter: brightness(0) invert(1); + } + } + + &:focus { + color: #fff; + background-color: #b2341a; + border-color: #b2341a; + .header__bottom__btn__img { + filter: brightness(0) invert(1); + } + } + + @include on-tablet { + margin: 0 auto; + } + + @include on-desktop { + margin: 0; + margin-top: 188px; + } + } + } +} + +.menu { + opacity: 0; + position: fixed; + top: 0; + left: 0; + right: 0; + height: 100vh; + width: 100%; + background-color: #ffeefc; + pointer-events: none; + z-index: 100; + + &:target { + overflow: hidden; + opacity: 1; + pointer-events: all; + } + + &__top { + height: 64px; + width: 100%; + display: flex; + place-content: center space-between; + align-items: center; + flex-wrap: wrap; + + padding: 20px; + box-sizing: border-box; + + margin-bottom: 32px; + + &__logo { + display: flex; + } + + &__close { + width: 24px; + height: 24px; + @include on-desktop { + display: none; + } + + &__img { + width: 24px; + height: 24px; + } + } + } + + &__nav { + &__list { + margin-top: 132px; + display: flex; + align-items: center; + flex-direction: column; + gap: 24px; + + &__item { + &__link { + color: #1c1a26; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: -0.01em; + text-align: center; + transition: all 0.4 ease; + &:hover { + color: #7f8096; + } + } + + &--contact-us { + color: #f9512e; + font-weight: 500; + font-size: 16px; + line-height: 100%; + letter-spacing: 0.02em; + text-transform: uppercase; + } + } + } + } +} + +.main { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + width: 100%; + + padding: 0 16px 72px; + box-sizing: border-box; + + @include on-desktop { + padding: 0 44px 56px; + } +} + +.what-we-bake { + margin-bottom: 72px; + max-width: 1192px; + width: 100%; + &__title { + color: #f9512e; + font-weight: 400; + font-size: 48px; + line-height: 85%; + letter-spacing: -0.05em; + text-transform: uppercase; + margin-bottom: 24px; + } + + &__desc { + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: -0.01em; + margin-bottom: 56px; + + @include on-tablet { + margin-bottom: 80px; + } + } + + &__grid { + display: grid; + grid-template-columns: 1fr; + gap: 64px; + justify-items: center; + + @include on-tablet { + grid-template-columns: repeat(2, 1fr); + gap: 24px 80px; + } + + @include on-desktop { + grid-template-columns: repeat(2, minmax(0, 402px)); + gap: 80px 24px; + } + + &__card { + width: 100%; + max-width: 288px; + height: 492px; + + display: flex; + flex-direction: column; + justify-content: flex-end; + position: relative; + transition: all 0.4s ease; + + &:hover { + transform: translateY(-4px); + } + + @include on-desktop { + max-width: 402px; + &:nth-child(3), + &:nth-child(4) { + transform: translateX(85%); + + &:hover { + transform: translateX(85%) translateY(-6px); + } + } + } + &__img { + position: absolute; + top: 0; + max-width: 288px; + width: 100%; + height: 356px; + border-radius: 8px; + @include on-desktop { + max-width: 402px; + } + } + + &__title { + color: #7f8096; + font-weight: 500; + font-size: 16px; + line-height: 100%; + letter-spacing: 0.02em; + text-transform: uppercase; + padding-bottom: 16px; + } + + &__desc { + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: -0.01em; + padding-bottom: 8px; + } + + &__btn { + display: flex; + align-items: center; + padding-bottom: 8px; + gap: 6px; + color: #f9512e; + font-weight: 500; + font-size: 16px; + line-height: 100%; + letter-spacing: 0.02em; + text-transform: uppercase; + + &::after { + content: ''; + position: absolute; + background-color: #f9512e; + height: 4px; + bottom: -5px; + left: 0; + width: 20%; + transform: scaleX(0); + transition: transform 0.3s; + } + + &:hover::after { + transform: scaleX(1); + } + + &:focus::after { + transform: scaleX(1); + } + } + } + } +} + +.about-us { + max-width: 1192px; + width: 100%; + display: flex; + flex-direction: column; + position: relative; + overflow: hidden; + z-index: 1; + + &__img { + width: 100%; + max-width: 400px; + position: absolute; + bottom: 14%; + z-index: 2; + pointer-events: none; + + @include on-tablet { + max-width: 470px; + bottom: 13%; + left: 10%; + } + + @include on-desktop { + max-width: 650px; + bottom: 0%; + left: 14%; + } + } + &__top { + display: flex; + flex-direction: column; + gap: 32px; + margin-bottom: 64px; + + @include on-tablet { + position: relative; + z-index: 3; + flex-direction: row; + gap: 24px; + } + + @include on-desktop { + justify-content: space-between; + } + &__title { + color: #f9512e; + font-weight: 400; + font-size: 48px; + line-height: 85%; + letter-spacing: -0.05em; + text-transform: uppercase; + + @include on-tablet { + width: 328px; + } + } + + &__text { + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: -0.01em; + + @include on-tablet { + width: 328px; + } + @include on-desktop { + width: 544px; + } + } + } + + &__bottom { + display: grid; + grid-template-columns: 1fr; + gap: 48px; + position: relative; + + @include on-tablet { + grid-template-columns: repeat(2, 1fr); + } + + @include on-desktop { + grid-template-columns: repeat(4, 1fr); + grid-auto-flow: column; + gap: 24px; + padding-bottom: 293px; + } + + &__card { + display: flex; + flex-direction: column; + gap: 8px; + z-index: 2; + &__title { + color: #f9512e; + font-weight: 400; + font-size: 96px; + line-height: 85%; + letter-spacing: -0.05em; + text-transform: uppercase; + } + + &__text { + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: -0.01em; + } + } + } +} + +.footer { + background-color: #1c1a26; + width: 100%; + display: flex; + justify-content: center; + + &__wrapper { + max-width: 1192px; + width: 100%; + padding: 56px 16px; + + display: grid; + grid-template-columns: 1fr; + + @include on-tablet { + grid-template-columns: repeat(2, 1fr); + } + } + &__top { + display: flex; + flex-direction: column; + + &__logo { + margin-bottom: 40px; + } + + &__menu { + display: flex; + flex-direction: column; + gap: 16px; + margin-bottom: 64px; + + @include on-desktop { + display: none; + } + &__text { + color: #fff; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: -0.01em; + transition: all ease 0.4s; + + &:hover { + color: #7f8096; + } + + &--menu { + color: #7f8096; + font-weight: 500; + line-height: 100%; + letter-spacing: 0.02em; + text-transform: uppercase; + } + } + } + } + + &__contact-us { + display: flex; + flex-direction: column; + + &__wrapper { + display: grid; + grid-template-columns: 1fr; + + @include on-desktop { + grid-template-columns: repeat(2, 1fr); + } + } + &__title { + margin-bottom: 40px; + color: #fff; + font-weight: 400; + font-size: 48px; + line-height: 85%; + letter-spacing: -0.05em; + text-transform: uppercase; + } + + &__numbers { + display: flex; + flex-direction: column; + gap: 16px; + margin-bottom: 40px; + &__number { + color: #fff; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: -0.01em; + transition: all ease 0.4s; + + &:hover { + color: #7f8096; + } + + &--call-us { + color: grey; + font-weight: 500; + line-height: 100%; + letter-spacing: 0.02em; + text-transform: uppercase; + } + } + } + + &__email-us { + display: flex; + flex-direction: column; + gap: 16px; + margin-bottom: 40px; + &__text { + color: grey; + font-weight: 500; + font-size: 16px; + line-height: 100%; + letter-spacing: 0.02em; + text-transform: uppercase; + } + + &__email { + color: #fff; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: -0.01em; + transition: all ease 0.4s; + + &:hover { + color: #7f8096; + } + } + } + } + + &__network { + display: grid; + grid-template-columns: 1fr; + gap: 16px; + @include on-tablet { + grid-column: span 2; + grid-template-columns: repeat(2, 1fr); + align-items: center; + } + + @include on-tablet { + flex-direction: row; + } + &__socials { + display: flex; + justify-content: flex-start; + gap: 32px; + &__media { + width: 24px; + height: 24px; + transition: all 0.4s ease; + + &:hover { + filter: brightness(0) invert(1); + } + + &:focus { + filter: brightness(0) invert(1); + } + } + } + + &__author { + color: grey; + font-weight: 400; + font-size: 16px; + line-height: 150%; + letter-spacing: -0.01em; + } + } } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..e5c8e15e0 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,15 @@ #{$_property}: $_toValue; } } + +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..500d49921 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,3 @@ $c-gray: #eee; +$tablet-min-width: 640px; +$desktop-min-width: 1200px;