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..22feb2bb1 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://SashaGlazko.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..883e513b3 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,253 @@ + - + - Title + Bakerlab + + - -

Hello Mate Academy

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

+
+
+ cake +
+

cakes

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

cakes

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

donuts

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

donuts

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

cakes

+
Chocolate salted caramel, Vanilla frutti pebbles
+
+ order +
+
+ cake +
+

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.

+
+
+
+
+ crumbs +
+
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..946d86d78 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", diff --git a/src/images/apples.png b/src/images/apples.png new file mode 100644 index 000000000..432253588 Binary files /dev/null and b/src/images/apples.png differ diff --git a/src/images/bakerlab-logo.png b/src/images/bakerlab-logo.png new file mode 100644 index 000000000..fb168b85b Binary files /dev/null and b/src/images/bakerlab-logo.png differ diff --git a/src/images/bakerlab-white.svg b/src/images/bakerlab-white.svg new file mode 100644 index 000000000..a0595e7ae --- /dev/null +++ b/src/images/bakerlab-white.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/brown-cake.png b/src/images/brown-cake.png new file mode 100644 index 000000000..1145705d9 Binary files /dev/null and b/src/images/brown-cake.png differ diff --git a/src/images/cookie-image.png b/src/images/cookie-image.png new file mode 100644 index 000000000..e10429a72 Binary files /dev/null and b/src/images/cookie-image.png differ diff --git a/src/images/cookies.png b/src/images/cookies.png new file mode 100644 index 000000000..cbaf0c207 Binary files /dev/null and b/src/images/cookies.png differ diff --git a/src/images/crumbs.png b/src/images/crumbs.png new file mode 100644 index 000000000..24d9cec69 Binary files /dev/null and b/src/images/crumbs.png differ diff --git a/src/images/icon/arrow-icon.svg b/src/images/icon/arrow-icon.svg new file mode 100644 index 000000000..139e70319 --- /dev/null +++ b/src/images/icon/arrow-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/burger-menu.svg b/src/images/icon/burger-menu.svg new file mode 100644 index 000000000..4f2194a84 --- /dev/null +++ b/src/images/icon/burger-menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/close-icon.svg b/src/images/icon/close-icon.svg new file mode 100644 index 000000000..65ae950c8 --- /dev/null +++ b/src/images/icon/close-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/cookie-icon-white.svg b/src/images/icon/cookie-icon-white.svg new file mode 100644 index 000000000..55b89a713 --- /dev/null +++ b/src/images/icon/cookie-icon-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/cookie-icon.svg b/src/images/icon/cookie-icon.svg new file mode 100644 index 000000000..5bf16c613 --- /dev/null +++ b/src/images/icon/cookie-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/facebook-icon.svg b/src/images/icon/facebook-icon.svg new file mode 100644 index 000000000..d629cfa5d --- /dev/null +++ b/src/images/icon/facebook-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/inst-icon.svg b/src/images/icon/inst-icon.svg new file mode 100644 index 000000000..87e645f62 --- /dev/null +++ b/src/images/icon/inst-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/orange-phone-icon.svg b/src/images/icon/orange-phone-icon.svg new file mode 100644 index 000000000..b3c49f859 --- /dev/null +++ b/src/images/icon/orange-phone-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icon/twitter-icon.svg b/src/images/icon/twitter-icon.svg new file mode 100644 index 000000000..0ca15e705 --- /dev/null +++ b/src/images/icon/twitter-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/one-donut.png b/src/images/one-donut.png new file mode 100644 index 000000000..f2f02a61a Binary files /dev/null and b/src/images/one-donut.png differ diff --git a/src/images/oranges.png b/src/images/oranges.png new file mode 100644 index 000000000..b5e901a4f Binary files /dev/null and b/src/images/oranges.png differ diff --git a/src/images/white-dunuts.png b/src/images/white-dunuts.png new file mode 100644 index 000000000..b5e9c9499 Binary files /dev/null and b/src/images/white-dunuts.png differ diff --git a/src/styles/blocks/about-us.scss b/src/styles/blocks/about-us.scss new file mode 100644 index 000000000..ce99b04c4 --- /dev/null +++ b/src/styles/blocks/about-us.scss @@ -0,0 +1,30 @@ +.about-us { + &__content { + @include page-grid; + + @include content-padding; + + row-gap: 32px; + } + + &__title { + grid-column: 1/-1; + + @include on-tablet { + grid-column: 1/5; + } + } + + &__description { + grid-column: 1/-1; + + margin: 0; + + font-size: 16px; + color: $text-color; + + @include on-tablet { + grid-column: 5/-1; + } + } +} diff --git a/src/styles/blocks/blog.scss b/src/styles/blocks/blog.scss new file mode 100644 index 000000000..3a4a2b1ac --- /dev/null +++ b/src/styles/blocks/blog.scss @@ -0,0 +1,75 @@ +.blog { + &__content { + @include content-padding; + + @include page-grid; + + row-gap: 48px; + position: relative; + + @include on-tablet { + row-gap: 80px; + } + } + + &__product { + display: grid; + row-gap: 8px; + grid-column: 1/-1; + + @include on-tablet { + &--year { + grid-column: 1/5; + } + &--companies { + grid-column: 1/5; + } + &--stores { + grid-column: 5/-1; + } + &--clients { + grid-column: 5/-1; + } + } + + @include on-tablet { + @media (min-width: 1200px) { + grid-column: span 2; + } + } + } + + &__title { + font-size: 96px; + line-height: 85%; + letter-spacing: -5%; + text-transform: uppercase; + color: $light-orange; + } + + &__description { + color: $text-color; + } + + &__background { + position: absolute; + z-index: -1; + bottom: 246px; + width: 100%; + + grid-column: 1/-1; + object-fit: contain; + + @include on-tablet { + grid-column: 2/-2; + bottom: 50px; + max-width: 550px; + } + + @include on-tablet-big { + grid-column: 3/-1; + max-width: 750px; + bottom: -250px; + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..6b58c2bf3 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,154 @@ +.footer { + background-color: $text-color; + &__content { + @include page-grid; + + @include content-padding; + + row-gap: 40px; + padding-block: 56px; + + @include on-tablet { + padding-block: 88px; + row-gap: 40px; + grid-auto-flow: column; + } + } + + &__title { + font-weight: 500; + color: $c-dark-gray; + line-height: 100%; + letter-spacing: 2%; + text-transform: uppercase; + } + + &__logo { + grid-column: 1/-1; + + @include hover(transform, scale(1.05)); + + @include on-tablet { + grid-column: 1/3; + } + } + + &__nav { + display: grid; + row-gap: 16px; + grid-column: 1/-1; + + @include on-tablet { + grid-column: 1/5; + } + } + + &__contact-us { + font-size: 48px; + line-height: 85%; + letter-spacing: -5%; + text-transform: uppercase; + color: $c-white; + + grid-column: 1/-1; + + @include on-tablet { + grid-column: 5/-1; + } + } + + &__call-us { + display: flex; + flex-direction: column; + row-gap: 16px; + grid-column: 1/-1; + + @include on-tablet { + grid-column: 5/7; + } + } + + &__number { + width: fit-content; + text-decoration: none; + color: $c-white; + position: relative; + + &::after { + transition: all 0.3s; + content: ''; + display: block; + position: absolute; + width: 100%; + bottom: -8px; + height: 1px; + background-color: $c-white; + transform: scale(0); + } + + &:hover::after { + content: ''; + transform: scale(1); + } + } + + &__email-us { + grid-column: 1/-1; + display: flex; + flex-direction: column; + row-gap: 16px; + + @include on-tablet { + grid-column: 7/-1; + } + } + + &__email { + width: fit-content; + text-decoration: none; + color: $c-white; + + position: relative; + + &::after { + transition: all 0.3s; + content: ''; + display: block; + position: absolute; + width: 100%; + bottom: -8px; + height: 1px; + background-color: $c-white; + transform: scale(0); + } + + &:hover::after { + content: ''; + transform: scale(1); + } + } + + &__icons { + grid-column: 1/-1; + display: flex; + gap: 32px; + + @include on-tablet { + grid-column: 1/5; + } + } + + &__icon { + width: fit-content; + @include hover(transform, scale(1.1)); + } + + &__last { + grid-column: 1/-1; + color: $c-dark-gray; + + @include on-tablet { + grid-column: 5/-1; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..c80a71908 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,123 @@ +.header { + &__content { + @include content-padding; + } + + &__bottom { + position: relative; + + justify-items: center; + + @include page-grid; + } + + &__description { + margin-top: 32px; + grid-column: 1/-1; + font-size: 16px; + letter-spacing: -1%; + text-align: center; + + @include on-tablet { + margin-top: 100px; + grid-column: 1/5; + text-align: left; + } + + @include on-tablet-big { + grid-column: 1/3; + } + } + + &__title { + grid-column: 1/-1; + font-size: 64px; + line-height: 85%; + letter-spacing: -5%; + text-align: center; + color: $light-orange; + text-transform: uppercase; + margin: 0; + margin-top: 32px; + + @include on-tablet { + font-size: 80px; + top: 40%; + position: absolute; + } + + @include on-tablet { + @media (min-width: 1250px) { + font-size: 135px; + top: 30%; + } + } + } + + &__cookie { + grid-column: 1/-1; + width: 100%; + + @include on-tablet { + grid-column: 3/7; + } + } + + &__button { + border-radius: 32px; + border: 2px solid $light-orange; + height: 56px; + grid-column: 1/-1; + width: 100%; + text-decoration: none; + color: $light-orange; + display: flex; + gap: 4px; + justify-content: center; + align-items: center; + + font-weight: 500; + font-size: 16px; + line-height: 100%; + letter-spacing: 2%; + text-transform: uppercase; + + transition: all 0.3s; + + &::before { + content: ''; + background-image: url(/src/images/icon/cookie-icon.svg); + height: 20px; + width: 20px; + } + + &:hover { + color: white; + background-color: $light-orange; + } + + &:hover::before { + content: ''; + background-image: url(/src/images/icon/cookie-icon-white.svg); + } + + &:active { + background-color: $dark-orange; + border: $dark-orange; + } + + @include on-tablet { + grid-column: 3/7; + + bottom: 0; + margin-top: 80px; + } + + @include on-tablet-big { + position: relative; + bottom: 200px; + grid-column: 1/3; + margin: 0; + } + } +} diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss new file mode 100644 index 000000000..d7eda1184 --- /dev/null +++ b/src/styles/blocks/icon.scss @@ -0,0 +1,21 @@ +.icon { + height: $icon-size; + width: $icon-size; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + + @include hover(transform, scale(1.05)); + + &--menu { + background-image: url(/src/images/icon/burger-menu.svg); + + @include on-tablet-big { + display: none; + } + } + + &--close { + background-image: url(/src/images/icon/close-icon.svg); + } +} diff --git a/src/styles/blocks/layout-main.scss b/src/styles/blocks/layout-main.scss new file mode 100644 index 000000000..2353a429b --- /dev/null +++ b/src/styles/blocks/layout-main.scss @@ -0,0 +1,10 @@ +.layout-main { + &__content { + display: grid; + row-gap: 72px; + + @include on-tablet { + row-gap: 144px; + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..3e218c868 --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,5 @@ +.menu { + &__content { + @include content-padding; + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 000000000..0a33e2ada --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,98 @@ +.nav { + margin-top: 132px; + + @include on-tablet-big { + margin: 0; + } + + &--header { + display: none; + + @include on-tablet-big { + display: block; + } + } + + &--footer { + margin: 0; + } + &__list { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + gap: 24px; + + @include on-tablet-big { + flex-direction: row; + gap: 64px; + } + + &--footer{ + @include on-tablet-big { + flex-direction: column; + gap: 16px; + } + } + + } + + &__link { + margin: auto; + width: fit-content; + position: relative; + display: flex; + align-items: center; + text-decoration: none; + font-size: 16px; + color: $text-color; + justify-content: center; + + &::after { + transition: all 0.3s; + + content: ''; + display: block; + position: absolute; + width: 100%; + bottom: -8px; + height: 1px; + background-color: $text-color; + transform: scale(0); + } + + &:hover::after { + content: ''; + transform: scale(1); + } + + &--footer { + color: #fff; + display: block; + margin: 0; + + &::after { + content: ''; + background-color: #fff; + } + } + } + &__contacts { + color: $light-orange; + text-transform: uppercase; + + &::before { + background-repeat: no-repeat; + content: ''; + background-image: url(/src/images/icon/orange-phone-icon.svg); + height: $icon-size; + width: $icon-size; + } + + &::after { + content: ''; + background-color: $light-orange; + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..1c704122b --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,45 @@ +.page { + scroll-behavior: smooth; + background-color: $light-pink; + font-family: Inter, sans-serif; + font-weight: 400; + line-height: 150%; + + &__body { + margin: 0; + } + + &__header { + padding-bottom: 40px; + } + + &__layout-main { + margin-top: 104px; + } + + &__menu { + background-color: $light-pink; + position: fixed; + left: 0; + right: 0; + top: 0; + min-height: 100vh; + opacity: 0; + pointer-events: none; + transition-duration: 0.3s; + transform: translate(-100%); + + &:target { + opacity: 1; + pointer-events: all; + transform: translate(0); + } + } + + &__footer { + margin-top: 72px; + @include on-tablet-big { + margin-top: 300px; + } + } +} diff --git a/src/styles/blocks/products.scss b/src/styles/blocks/products.scss new file mode 100644 index 000000000..76320fc42 --- /dev/null +++ b/src/styles/blocks/products.scss @@ -0,0 +1,108 @@ +.products { + &__container { + @include content-padding; + + @include page-grid; + + row-gap: 56px; + + @include on-tablet { + row-gap: 80px; + } + } + + &__top { + grid-column: 1/-1; + } + + &__describe { + margin: 0; + margin-top: 24px; + } + + &__photo { + width: 100%; + } + + &__product { + @include hover(transform, scale(1.03)); + + grid-column: span 2; + display: grid; + row-gap: 16px; + + @include on-tablet { + grid-column: span 4; + } + + &-info { + display: grid; + row-gap: 8px; + } + + &-title { + color: $c-dark-gray; + font-weight: 500; + font-size: 16px; + text-transform: uppercase; + margin: 0; + } + + @include on-tablet-big { + &--cakes { + grid-column: 1/4; + } + + &--bisquits { + grid-column: 4/7; + } + + &--donuts { + grid-column: 3/6; + } + + &--donut { + grid-column: 6/-1; + } + + &--browny { + grid-column: 1/4; + } + + &--cookies { + grid-column: 4/7; + } + } + + &-description { + color: $text-color; + } + } + + &__order { + display: flex; + font-weight: 500; + font-size: 16px; + line-height: 100%; + text-transform: uppercase; + color: $light-orange; + text-decoration: none; + transform: translate(8px); + + &::before { + content: ''; + background-size: contain; + background-repeat: no-repeat; + background-image: url(/src/images/icon/arrow-icon.svg); + height: 15.5px; + width: 16px; + transform: translate(-8px); + } + + &:hover::before { + content: ''; + transition: transform 0.3s; + transform: translate(1px); + } + } +} diff --git a/src/styles/blocks/section-title.scss b/src/styles/blocks/section-title.scss new file mode 100644 index 000000000..b8f90b989 --- /dev/null +++ b/src/styles/blocks/section-title.scss @@ -0,0 +1,16 @@ +.section-title { + color: $light-orange; + font-size: 48px; + line-height: 85%; + letter-spacing: -5%; + text-transform: uppercase; + font-weight: 400; + margin: 0; + + @include on-tablet { + font-size: 56px; + } + @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..f66f7b256 --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,19 @@ +.top-bar { + padding: 16px; + + @include on-tablet { + padding: 28px 0; + } + + &__logo-link { + display: flex; + width: 136px; + height: 32px; + + @include hover(transform, scale(1.05)); + } + + display: flex; + justify-content: space-between; + align-items: center; +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..291078881 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,19 @@ @import 'utils'; @import 'fonts'; @import 'typography'; +@import '/src/styles/blocks/page'; +@import '/src/styles/blocks/header'; +@import '/src/styles/blocks/top-bar'; +@import '/src/styles/blocks/icon'; +@import '/src/styles/blocks/section-title'; +@import '/src/styles/blocks/layout-main'; +@import '/src/styles/blocks/menu'; +@import '/src/styles/blocks/nav'; +@import '/src/styles/blocks/products'; +@import '/src/styles/blocks/about-us'; +@import '/src/styles/blocks/blog'; +@import '/src/styles/blocks/footer'; -body { - background: $c-gray; +* { + box-sizing: border-box; } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780d..6d4e365c2 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -4,3 +4,36 @@ #{$_property}: $_toValue; } } + +@mixin on-tablet() { + @media (min-width: $tablet-size) { + @content; + } +} + +@mixin on-tablet-big() { + @media (min-width: $big-tablet-size) { + @content; + } +} + +@mixin content-padding() { + padding-inline: 16px; + padding-top: 16px; + margin: 0 auto; + + @include on-tablet { + padding-inline: 44px; + max-width: 1440px; + } +} + +@mixin page-grid { + display: grid; + column-gap: 16px; + grid-template-columns: repeat(2, 1fr); + + @include on-tablet { + grid-template-columns: repeat(8, 1fr); + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..98a4b36d1 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,10 @@ +$c-white: #fff; $c-gray: #eee; +$c-dark-gray: #7f8096; +$light-orange: #f9512e; +$dark-orange: #b2341a; +$text-color: #1c1a26; +$light-pink: #ffeefc; +$tablet-size: 640px; +$big-tablet-size: 1280px; +$icon-size: 24px;