diff --git a/.stylelintrc.js b/.stylelintrc.js index 2e345321d..e89e8ad35 100644 --- a/.stylelintrc.js +++ b/.stylelintrc.js @@ -3,5 +3,7 @@ module.exports = { plugins: [ "stylelint-scss" ], - rules: {} + rules: { + "declaration-empty-line-before": null, + } }; diff --git a/README.md b/README.md index 3a2fb5928..83f147131 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://JordanKoby.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..ead7e4174 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,705 @@ - + - Title + Сreative Bakery + + + + - -

Hello Mate Academy

- + +
+
+ + + +
+
+
+

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

+
+

Creative bakery

+
+
+ +
+
+ +
+
+
+
+

What we bake

+

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

+
+ + + + +
+
+ + + + + + + cakes photo + + +

Cakes

+

+ Chocolate salted caramel, Vanilla frutti pebbles +

+

+ Cake with chocolate salted caramel, Vanilla frutti pebbles + inside +

+ + + +
+
+ +
+
+
+
+ + + + + + Crumbs photo + +
+
+

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/src/images/Cookie-320.png b/src/images/Cookie-320.png new file mode 100644 index 000000000..be7b465c1 Binary files /dev/null and b/src/images/Cookie-320.png differ diff --git a/src/images/Cookie-on-desktop-big.png b/src/images/Cookie-on-desktop-big.png new file mode 100644 index 000000000..4628b082a Binary files /dev/null and b/src/images/Cookie-on-desktop-big.png differ diff --git a/src/images/Cookie-on-desktop-small.png b/src/images/Cookie-on-desktop-small.png new file mode 100644 index 000000000..251a5ba76 Binary files /dev/null and b/src/images/Cookie-on-desktop-small.png differ diff --git a/src/images/Cookie-on-tablet.png b/src/images/Cookie-on-tablet.png new file mode 100644 index 000000000..29e96a1b8 Binary files /dev/null and b/src/images/Cookie-on-tablet.png differ diff --git a/src/images/Crumbs-stats-desktop-small.png b/src/images/Crumbs-stats-desktop-small.png new file mode 100644 index 000000000..fde47a5dd Binary files /dev/null and b/src/images/Crumbs-stats-desktop-small.png differ diff --git a/src/images/Crumbs-stats-mobile.png b/src/images/Crumbs-stats-mobile.png new file mode 100644 index 000000000..3ff7ab9c5 Binary files /dev/null and b/src/images/Crumbs-stats-mobile.png differ diff --git a/src/images/Crumbs-stats-tablet.png b/src/images/Crumbs-stats-tablet.png new file mode 100644 index 000000000..6ec16d3bc Binary files /dev/null and b/src/images/Crumbs-stats-tablet.png differ diff --git a/src/images/Crumbs-stats.png b/src/images/Crumbs-stats.png new file mode 100644 index 000000000..3ff7ab9c5 Binary files /dev/null and b/src/images/Crumbs-stats.png differ diff --git a/src/images/Footer-logo.svg b/src/images/Footer-logo.svg new file mode 100644 index 000000000..733596f1f --- /dev/null +++ b/src/images/Footer-logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/Logo.svg b/src/images/Logo.svg new file mode 100644 index 000000000..a2cc9d0d7 --- /dev/null +++ b/src/images/Logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/favicon-32x32.png b/src/images/favicon-32x32.png new file mode 100644 index 000000000..12985b297 Binary files /dev/null and b/src/images/favicon-32x32.png differ diff --git a/src/images/icons/Icon-arrow.png b/src/images/icons/Icon-arrow.png new file mode 100644 index 000000000..ae7ead4ec Binary files /dev/null and b/src/images/icons/Icon-arrow.png differ diff --git a/src/images/icons/Icon-close.svg b/src/images/icons/Icon-close.svg new file mode 100644 index 000000000..8c10df3c5 --- /dev/null +++ b/src/images/icons/Icon-close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/Icon-cookie.png b/src/images/icons/Icon-cookie.png new file mode 100644 index 000000000..c757aefd6 Binary files /dev/null and b/src/images/icons/Icon-cookie.png differ diff --git a/src/images/icons/Icon-facebook.png b/src/images/icons/Icon-facebook.png new file mode 100644 index 000000000..e2bbe4b0f Binary files /dev/null and b/src/images/icons/Icon-facebook.png differ diff --git a/src/images/icons/Icon-instagram.png b/src/images/icons/Icon-instagram.png new file mode 100644 index 000000000..7c03b92c5 Binary files /dev/null and b/src/images/icons/Icon-instagram.png differ diff --git a/src/images/icons/Icon-menu.svg b/src/images/icons/Icon-menu.svg new file mode 100644 index 000000000..2b82cbfa5 --- /dev/null +++ b/src/images/icons/Icon-menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/Icon-phone.png b/src/images/icons/Icon-phone.png new file mode 100644 index 000000000..dafee5734 Binary files /dev/null and b/src/images/icons/Icon-phone.png differ diff --git a/src/images/icons/Icon-twitter.png b/src/images/icons/Icon-twitter.png new file mode 100644 index 000000000..37ac631c5 Binary files /dev/null and b/src/images/icons/Icon-twitter.png differ diff --git a/src/images/products/product-cakes-1.png b/src/images/products/product-cakes-1.png new file mode 100644 index 000000000..f7631e2fb Binary files /dev/null and b/src/images/products/product-cakes-1.png differ diff --git a/src/images/products/product-cakes-2.png b/src/images/products/product-cakes-2.png new file mode 100644 index 000000000..adc9f714e Binary files /dev/null and b/src/images/products/product-cakes-2.png differ diff --git a/src/images/products/product-cakes-desktop-big-1.png b/src/images/products/product-cakes-desktop-big-1.png new file mode 100644 index 000000000..420a94fa7 Binary files /dev/null and b/src/images/products/product-cakes-desktop-big-1.png differ diff --git a/src/images/products/product-cakes-desktop-big-2.png b/src/images/products/product-cakes-desktop-big-2.png new file mode 100644 index 000000000..fc087de23 Binary files /dev/null and b/src/images/products/product-cakes-desktop-big-2.png differ diff --git a/src/images/products/product-cakes-desktop-big.png b/src/images/products/product-cakes-desktop-big.png new file mode 100644 index 000000000..1ba91b828 Binary files /dev/null and b/src/images/products/product-cakes-desktop-big.png differ diff --git a/src/images/products/product-cakes-desktop-small-1.png b/src/images/products/product-cakes-desktop-small-1.png new file mode 100644 index 000000000..575076da8 Binary files /dev/null and b/src/images/products/product-cakes-desktop-small-1.png differ diff --git a/src/images/products/product-cakes-desktop-small-2.png b/src/images/products/product-cakes-desktop-small-2.png new file mode 100644 index 000000000..e0627aa79 Binary files /dev/null and b/src/images/products/product-cakes-desktop-small-2.png differ diff --git a/src/images/products/product-cakes-desktop-small.png b/src/images/products/product-cakes-desktop-small.png new file mode 100644 index 000000000..ff7979629 Binary files /dev/null and b/src/images/products/product-cakes-desktop-small.png differ diff --git a/src/images/products/product-cakes-mobile-1.png b/src/images/products/product-cakes-mobile-1.png new file mode 100644 index 000000000..f7631e2fb Binary files /dev/null and b/src/images/products/product-cakes-mobile-1.png differ diff --git a/src/images/products/product-cakes-mobile-2.png b/src/images/products/product-cakes-mobile-2.png new file mode 100644 index 000000000..adc9f714e Binary files /dev/null and b/src/images/products/product-cakes-mobile-2.png differ diff --git a/src/images/products/product-cakes-mobile.png b/src/images/products/product-cakes-mobile.png new file mode 100644 index 000000000..afee48e9b Binary files /dev/null and b/src/images/products/product-cakes-mobile.png differ diff --git a/src/images/products/product-cakes-tablet-1.png b/src/images/products/product-cakes-tablet-1.png new file mode 100644 index 000000000..072b5877f Binary files /dev/null and b/src/images/products/product-cakes-tablet-1.png differ diff --git a/src/images/products/product-cakes-tablet-2.png b/src/images/products/product-cakes-tablet-2.png new file mode 100644 index 000000000..9b4d6e77c Binary files /dev/null and b/src/images/products/product-cakes-tablet-2.png differ diff --git a/src/images/products/product-cakes-tablet.png b/src/images/products/product-cakes-tablet.png new file mode 100644 index 000000000..d59e2341c Binary files /dev/null and b/src/images/products/product-cakes-tablet.png differ diff --git a/src/images/products/product-cakes.png b/src/images/products/product-cakes.png new file mode 100644 index 000000000..afee48e9b Binary files /dev/null and b/src/images/products/product-cakes.png differ diff --git a/src/images/products/product-cookies-desktop-big.png b/src/images/products/product-cookies-desktop-big.png new file mode 100644 index 000000000..a8826db8f Binary files /dev/null and b/src/images/products/product-cookies-desktop-big.png differ diff --git a/src/images/products/product-cookies-desktop-small.png b/src/images/products/product-cookies-desktop-small.png new file mode 100644 index 000000000..253d4d417 Binary files /dev/null and b/src/images/products/product-cookies-desktop-small.png differ diff --git a/src/images/products/product-cookies-mobile.png b/src/images/products/product-cookies-mobile.png new file mode 100644 index 000000000..0f2570a9f Binary files /dev/null and b/src/images/products/product-cookies-mobile.png differ diff --git a/src/images/products/product-cookies-tablet.png b/src/images/products/product-cookies-tablet.png new file mode 100644 index 000000000..78f9147fc Binary files /dev/null and b/src/images/products/product-cookies-tablet.png differ diff --git a/src/images/products/product-cookies.png b/src/images/products/product-cookies.png new file mode 100644 index 000000000..0f2570a9f Binary files /dev/null and b/src/images/products/product-cookies.png differ diff --git a/src/images/products/product-donuts-1.png b/src/images/products/product-donuts-1.png new file mode 100644 index 000000000..6c8cf57a4 Binary files /dev/null and b/src/images/products/product-donuts-1.png differ diff --git a/src/images/products/product-donuts-desktop-big-1.png b/src/images/products/product-donuts-desktop-big-1.png new file mode 100644 index 000000000..08a78a417 Binary files /dev/null and b/src/images/products/product-donuts-desktop-big-1.png differ diff --git a/src/images/products/product-donuts-desktop-big.png b/src/images/products/product-donuts-desktop-big.png new file mode 100644 index 000000000..185c9d324 Binary files /dev/null and b/src/images/products/product-donuts-desktop-big.png differ diff --git a/src/images/products/product-donuts-desktop-small-1.png b/src/images/products/product-donuts-desktop-small-1.png new file mode 100644 index 000000000..bd676054e Binary files /dev/null and b/src/images/products/product-donuts-desktop-small-1.png differ diff --git a/src/images/products/product-donuts-desktop-small.png b/src/images/products/product-donuts-desktop-small.png new file mode 100644 index 000000000..e30a8dbe9 Binary files /dev/null and b/src/images/products/product-donuts-desktop-small.png differ diff --git a/src/images/products/product-donuts-mobile-1.png b/src/images/products/product-donuts-mobile-1.png new file mode 100644 index 000000000..6c8cf57a4 Binary files /dev/null and b/src/images/products/product-donuts-mobile-1.png differ diff --git a/src/images/products/product-donuts-mobile.png b/src/images/products/product-donuts-mobile.png new file mode 100644 index 000000000..b506b2c11 Binary files /dev/null and b/src/images/products/product-donuts-mobile.png differ diff --git a/src/images/products/product-donuts-tablet-1.png b/src/images/products/product-donuts-tablet-1.png new file mode 100644 index 000000000..268bc92c9 Binary files /dev/null and b/src/images/products/product-donuts-tablet-1.png differ diff --git a/src/images/products/product-donuts-tablet.png b/src/images/products/product-donuts-tablet.png new file mode 100644 index 000000000..06961ce20 Binary files /dev/null and b/src/images/products/product-donuts-tablet.png differ diff --git a/src/images/products/product-donuts.png b/src/images/products/product-donuts.png new file mode 100644 index 000000000..b506b2c11 Binary files /dev/null and b/src/images/products/product-donuts.png differ 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..b9fa97581 --- /dev/null +++ b/src/styles/blocks/about-us.scss @@ -0,0 +1,91 @@ +.about-us { + @include page-grid; + + position: relative; + + &__bg { + position: absolute; + top: 544px; + left: -16px; + width: 100%; + z-index: -1; + + @include on-tablet { + top: 51px; + left: 77px; + } + + @include on-desktop-small { + top: 0; + left: 281px; + } + + @include on-desktop-big { + top: 0; + left: 237px; + } + } + + &__title { + margin-bottom: $spacing-4; + grid-column: 1 / -1; + + @include on-tablet { + grid-column: span 4; + } + } + + &__text { + margin-bottom: $spacing-8; + grid-column: 1 / -1; + + @include on-tablet { + grid-column: span 4; + margin-bottom: $spacing-9; + } + + @include on-desktop-small { + margin-bottom: 144px; + } + + @include on-desktop-big { + margin-bottom: 146px; + } + } + + &__stats { + @include page-grid; + + grid-column: 1 / -1; + margin-bottom: $spacing-9; + + &-number { + font-size: 96px; + display: block; + line-height: 1; + } + + @include on-desktop-small { + margin-bottom: $spacing-7; + } + + &-item { + grid-column: span 2; + margin-bottom: $spacing-6; + + &:last-child { + margin-bottom: 0; + } + + @include on-tablet { + grid-column: span 4; + margin-bottom: $spacing-10; + } + + @include on-desktop-small { + grid-column: span 2; + margin-bottom: 293px; + } + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..89e1637e4 --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,149 @@ +.footer { + background-color: $dark-color; + color: $white-color; + &__content { + @include page-grid; + } + + &__list { + @include on-tablet { + margin-bottom: $spacing-5; + } + + @include on-desktop-small { + margin-bottom: $spacing-6; + } + } + + &__item { + margin-bottom: $spacing-2; + + &:last-child { + margin-bottom: 0; + } + + &--highlight { + font-weight: 500; + line-height: 100%; + color: $muted-color; + text-transform: uppercase; + } + } + + &__text { + color: $muted-color; + } + + &__logo { + display: block; + + padding-top: $spacing-7; + + margin-bottom: $spacing-5; + + @include on-tablet { + margin-top: $spacing-11; + + margin-bottom: 96px; + + padding-top: 0; + } + + @include on-desktop-small { + margin-bottom: 61px; + } + } + + &__menu { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: span 4; + } + } + + &-menu__list { + margin-bottom: $spacing-8; + + @include on-tablet { + margin-bottom: 104px; + } + + @include on-desktop-small { + margin-bottom: $spacing-6; + } + } + + &__icons { + @include on-tablet { + display: none; + } + } + + &-icon__list { + display: flex; + gap: $spacing-4; + } + + &-icon__list--tablet { + display: none; + + @include on-tablet { + display: flex; + gap: $spacing-4; + margin-bottom: $spacing-10; + } + + @include on-desktop-small { + margin-bottom: $spacing-11; + } + } + + &__contact { + grid-column: 1 / -1; + display: grid; + row-gap: $spacing-5; + margin-bottom: $spacing-7; + + @include on-tablet { + grid-column: span 4; + display: inline-block; + } + + @include on-desktop-small { + grid-column: span 4; + display: grid; + grid-template-columns: subgrid; + row-gap: $spacing-5; + margin-bottom: $spacing-11; + + .contact-us__title { + grid-column: 1 / -1; + } + + .footer__list { + grid-column: span 2; + } + + .footer__text { + grid-column: span 2; + } + } + } +} + +.contact-us__title { + margin-bottom: 0; + font-size: 50px; + + @include on-tablet { + margin-top: $spacing-11; + font-size: 57px; + margin-bottom: $spacing-5; + } + + @include on-desktop-small { + margin-bottom: 0; + font-size: $spacing-9; + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..da29b90a6 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,143 @@ +.header { + &__content { + @include page-grid; + + @include on-desktop-small { + margin-bottom: 152px; + } + + @include on-desktop-big { + margin-bottom: 178px; + } + } + + &__text { + margin: 0; + margin: $spacing-4 0; + text-align: center; + grid-column: 1 / -1; + + @include on-tablet { + margin-top: $spacing-10; + margin-bottom: $spacing-2; + text-align: left; + height: $spacing-8; + grid-column: span 4; + } + + @include on-desktop-small { + grid-column: span 2; + margin-top: 135px; + } + + @include on-desktop-big { + margin-top: 144px; + font-size: 14px; + } + } + + &__block { + @include page-grid; + grid-column: 1 / -1; + position: relative; + + @include on-desktop-small { + margin-top: -199px; + } + + &-image { + grid-column: 1 / -1; + height: 290px; + background-image: url('../images/Cookie-320.png'); + background-repeat: no-repeat; + background-size: cover; + + @include on-tablet { + grid-column: 3 / 7; + height: 328px; + background-image: url('../images/Cookie-on-tablet.png'); + } + + @include on-desktop-small { + height: 546px; + background-image: url('../images/Cookie-on-desktop-small.png'); + } + + @include on-desktop-big { + height: 586px; + background-image: url('../images/Cookie-on-desktop-big.png'); + } + } + + &-title { + font-size: $spacing-8; + line-height: 85%; + letter-spacing: -2px; + text-transform: uppercase; + text-align: center; + grid-column: 1 / -1; + + @include on-tablet { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: $spacing-10; + z-index: 1; + width: 100%; + } + + @include on-desktop-small { + font-size: 133px; + } + + @include on-desktop-big { + font-size: 137px; + } + } + } + + &__btn { + display: inline-flex; + align-items: center; + gap: 4px; + font-weight: 500; + line-height: 100%; + position: relative; + padding: 20px 77px 20px 91px; + border: 2px solid $primary-color; + border-radius: $spacing-4; + background-color: transparent; + color: $primary-color; + grid-column: 1 / -1; + margin-bottom: $spacing-5; + text-transform: uppercase; + white-space: nowrap; + z-index: 2; + + &:hover { + background-color: $bg-hover-color; + transform: all $effectDuration; + } + + @include on-tablet { + grid-column: 3 / 7; + margin-top: $spacing-10; + margin-bottom: 228px; + padding: 20px 96px 20px 110px; + } + + @include on-desktop-small { + grid-column: 1 / 3; + margin-top: -151px; + margin-bottom: 161px; + padding: 20px 63px 20px 77px; + } + + @include on-desktop-big { + padding: 20px 68px 20px 87px; + margin-top: -167px; + margin-bottom: 112px; + } + } +} diff --git a/src/styles/blocks/icons.scss b/src/styles/blocks/icons.scss new file mode 100644 index 000000000..7a663e12b --- /dev/null +++ b/src/styles/blocks/icons.scss @@ -0,0 +1,21 @@ +.icon { + display: block; + width: $spacing-3; + height: $spacing-3; + + &--menu { + background-image: url(../images/icons/Icon-menu.svg); + + @include on-desktop-small { + display: none; + } + } + + &--phone { + background-image: url(../images/icons/Icon-phone.png); + } + + &--close { + background-image: url(../images/icons/Icon-close.svg); + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..7f04a8b0c --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,29 @@ +.menu { + z-index: 2; + display: flex; + flex-direction: column; + height: 100vh; + background-color: $bg-color; + + &__content { + display: flex; + flex-direction: column; + } + + &__list { + display: flex; + flex-direction: column; + gap: $spacing-3; + align-items: center; + padding-inline: $spacing-2; + margin-top: 132px; + } + + &__link-block { + display: flex; + } + + &__link-mod { + @include contact-link-style; + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 000000000..2904d7041 --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,28 @@ +.nav { + &__list { + display: none; + + @include on-desktop-small { + display: flex; + } + } + + &__link { + display: flex; + align-items: center; + padding-left: $spacing-8; + cursor: pointer; + + &:hover { + color: $primary-color; + } + + &--block { + display: flex; + } + + &--mod { + @include contact-link-style; + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..fbaca159d --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,35 @@ +.page { + font-family: Inter, sans-serif; + font-size: $spacing-2; + line-height: 150%; + font-weight: 400; + color: $dark-color; + background-color: $bg-color; + + scroll-behavior: smooth; + + &__body { + margin: 0; + } + + &__menu { + position: fixed; + top: 0; + left: 0; + right: 0; + + opacity: 0; + pointer-events: none; + + &:target { + opacity: 1; + pointer-events: all; + } + } +} + +.container { + @include content-padding-inline; + + overflow-x: hidden; +} diff --git a/src/styles/blocks/products.scss b/src/styles/blocks/products.scss new file mode 100644 index 000000000..1736f978b --- /dev/null +++ b/src/styles/blocks/products.scss @@ -0,0 +1,99 @@ +.products { + &__title { + width: 100%; + margin-top: $spacing-8; + + @include on-tablet { + margin-top: 0; + font-size: $spacing-7; + } + + @include on-desktop-small { + font-size: $spacing-9; + } + } + + &__text { + margin-bottom: $spacing-7; + + @include on-tablet { + margin-bottom: $spacing-10; + } + } + + &__wrapper { + @include page-grid; + row-gap: $spacing-7; + margin-bottom: $spacing-9; + + @include on-tablet { + row-gap: $spacing-10; + margin-bottom: 152px; + } + + @include on-desktop-small { + margin-bottom: 178px; + } + } +} + +.product { + grid-column: 1 / -1; + @include hover(transform, scale(1.05), bottom); + + @include on-tablet { + grid-column: span 4; + } + + @include on-desktop-small { + grid-column: span 3; + } + + &__photo { + margin-bottom: $spacing-2; + } + + &__name { + font-weight: 500; + line-height: 100%; + margin-bottom: $spacing-1; + color: $muted-color; + text-transform: uppercase; + } + + &__text { + margin-bottom: $spacing-2; + } + + &__btn { + display: inline-flex; + align-items: center; + gap: 4px; + padding-inline: 4px; + border: 1px solid $primary-color; + border-radius: 8px; + background-color: transparent; + color: $primary-color; + text-transform: uppercase; + } +} + +.product-shift { + @include on-desktop-small { + grid-column: 3 / span 3; + } +} + +.product__text--desktop { + display: none; + + @include on-desktop-small { + display: block; + } +} + +.product__text--tablet { + @include on-desktop-small { + display: none; + } +} diff --git a/src/styles/blocks/section-title.scss b/src/styles/blocks/section-title.scss new file mode 100644 index 000000000..709094c63 --- /dev/null +++ b/src/styles/blocks/section-title.scss @@ -0,0 +1,20 @@ +.title { + margin: 0; + margin-bottom: $spacing-3; + width: 100%; + + font-weight: 400; + font-size: $spacing-6; + line-height: 85%; + text-align: left; + letter-spacing: -2px; + text-transform: uppercase; + + @include on-tablet { + font-size: $spacing-7; + } + + @include on-desktop-small { + font-size: $spacing-9; + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 000000000..8465c6e75 --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,6 @@ +.top-bar { + padding: $spacing-2; + display: flex; + justify-content: space-between; + align-items: center; +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..c3203dc37 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,13 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} +@import './utils/variables'; +@import './utils/mixins'; +@import './utils/reset'; +@import 'blocks/icons'; +@import 'blocks/section-title'; +@import 'blocks/top-bar'; +@import 'blocks/page'; +@import 'blocks/header'; +@import 'blocks/nav'; +@import 'blocks/menu'; +@import 'blocks/products'; +@import 'blocks/about-us'; +@import 'blocks/footer'; diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss deleted file mode 100644 index d7201e7b3..000000000 --- a/src/styles/utils/_extends.scss +++ /dev/null @@ -1,4 +0,0 @@ -%h1 { - font-family: Roboto, sans-serif; - font-weight: 400; -} diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss deleted file mode 100644 index 80c79780d..000000000 --- a/src/styles/utils/_mixins.scss +++ /dev/null @@ -1,6 +0,0 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; - &:hover { - #{$_property}: $_toValue; - } -} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss deleted file mode 100644 index aeb006ffb..000000000 --- a/src/styles/utils/_vars.scss +++ /dev/null @@ -1 +0,0 @@ -$c-gray: #eee; diff --git a/src/styles/utils/mixins.scss b/src/styles/utils/mixins.scss new file mode 100644 index 000000000..68ce15876 --- /dev/null +++ b/src/styles/utils/mixins.scss @@ -0,0 +1,65 @@ +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-desktop-small { + @media (min-width: $desktop-small-min-width) { + @content; + } +} + +@mixin on-desktop-big { + @media (min-width: $desktop-big-min-width) { + @content; + } +} + +@mixin content-padding-inline { + padding-inline: $spacing-2; + + @include on-tablet { + padding-inline: 44px; + } + + @include on-desktop-big { + max-width: 1200px; + margin-inline: auto; + padding-inline: 124px; + } +} + +@mixin page-grid { + --columns: 2; + + display: grid; + column-gap: $spacing-2; + grid-template-columns: repeat(var(--columns), 1fr); + + @include on-tablet { + --columns: 8; + + column-gap: $spacing-3; + } +} + +@mixin contact-link-style { + font-weight: 500; + line-height: 100%; + letter-spacing: 0.02em; + text-transform: uppercase; + color: $primary-color; + text-decoration: none; + padding-left: 4px; +} + +@mixin hover($property, $value, $origin: center) { + transition: #{$property} $effectDuration; + + &:hover { + #{$property}: #{$value}; + transform-origin: $origin; + cursor: pointer; + } +} diff --git a/src/styles/utils/reset.scss b/src/styles/utils/reset.scss new file mode 100644 index 000000000..665edbe4b --- /dev/null +++ b/src/styles/utils/reset.scss @@ -0,0 +1,27 @@ +ul { + margin: 0; + padding: 0; + list-style: none; + line-height: 1; +} + +p { + display: inline-block; + margin: 0; +} + +a { + color: inherit; + text-decoration: none; + cursor: pointer; +} + +h1 { + margin: 0; +} + +button { + cursor: pointer; + padding-block: 0; + padding-inline: 0; +} diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss new file mode 100644 index 000000000..1b2f1f038 --- /dev/null +++ b/src/styles/utils/variables.scss @@ -0,0 +1,22 @@ +$tablet-min-width: 576px; +$desktop-small-min-width: 1020px; +$desktop-big-min-width: 1220px; +$effectDuration: 0.3s ease; +$muted-color: #7f8096; +$primary-color: #f9512e; +$dark-color: #1c1a26; +$bg-color: #eef7ff; +$bg-hover-color: #9fd0f5; +$white-color: #fff; +$spacing-base: 8px; +$spacing-1: $spacing-base * 1; // 8px +$spacing-2: $spacing-base * 2; // 16px +$spacing-3: $spacing-base * 3; // 24px +$spacing-4: $spacing-base * 4; // 32px +$spacing-5: $spacing-base * 5; // 40px +$spacing-6: $spacing-base * 6; // 48px +$spacing-7: $spacing-base * 7; // 56px +$spacing-8: $spacing-base * 8; // 64px +$spacing-9: $spacing-base * 9; // 72px +$spacing-10: $spacing-base * 10; // 80px +$spacing-11: $spacing-base * 11; // 88px