diff --git a/README.md b/README.md index 3a2fb5928..c4da55d52 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://RomanHasiuk.github.io/layout_creativeBakery/). 14. Copy `DEMO LINK` to the PR description. > To update you PR repeat steps 7-11. diff --git a/src/images/BG-crumbs.png b/src/images/BG-crumbs.png new file mode 100644 index 000000000..824b1283a Binary files /dev/null and b/src/images/BG-crumbs.png differ diff --git a/src/images/Bakerlab-logo-white.svg b/src/images/Bakerlab-logo-white.svg new file mode 100644 index 000000000..733596f1f --- /dev/null +++ b/src/images/Bakerlab-logo-white.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/Bakerlab-logo.png b/src/images/Bakerlab-logo.png new file mode 100644 index 000000000..dfa144387 Binary files /dev/null and b/src/images/Bakerlab-logo.png differ diff --git a/src/images/Bakerlab-logo.svg b/src/images/Bakerlab-logo.svg new file mode 100644 index 000000000..0f225d77c --- /dev/null +++ b/src/images/Bakerlab-logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/Cookie.png b/src/images/Cookie.png new file mode 100644 index 000000000..f3a3ea4c6 Binary files /dev/null and b/src/images/Cookie.png differ diff --git a/src/images/icons/Icon-arrow.svg b/src/images/icons/Icon-arrow.svg new file mode 100644 index 000000000..a1bd54079 --- /dev/null +++ b/src/images/icons/Icon-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/Icon-cookie-white.svg b/src/images/icons/Icon-cookie-white.svg new file mode 100644 index 000000000..711569667 --- /dev/null +++ b/src/images/icons/Icon-cookie-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/Icon-cookie.svg b/src/images/icons/Icon-cookie.svg new file mode 100644 index 000000000..992115b32 --- /dev/null +++ b/src/images/icons/Icon-cookie.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/Icon-facebook-white.svg b/src/images/icons/Icon-facebook-white.svg new file mode 100644 index 000000000..360089e5d --- /dev/null +++ b/src/images/icons/Icon-facebook-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/Icon-facebook.svg b/src/images/icons/Icon-facebook.svg new file mode 100644 index 000000000..93b3835e8 --- /dev/null +++ b/src/images/icons/Icon-facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/Icon-instagram-white.svg b/src/images/icons/Icon-instagram-white.svg new file mode 100644 index 000000000..177df4e4b --- /dev/null +++ b/src/images/icons/Icon-instagram-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/Icon-instagram.svg b/src/images/icons/Icon-instagram.svg new file mode 100644 index 000000000..a94faeecf --- /dev/null +++ b/src/images/icons/Icon-instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/Icon-phone-accent.svg b/src/images/icons/Icon-phone-accent.svg new file mode 100644 index 000000000..b3c49f859 --- /dev/null +++ b/src/images/icons/Icon-phone-accent.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/Icon-phone.svg b/src/images/icons/Icon-phone.svg new file mode 100644 index 000000000..373f2ff63 --- /dev/null +++ b/src/images/icons/Icon-phone.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/Icon-twitter-white.svg b/src/images/icons/Icon-twitter-white.svg new file mode 100644 index 000000000..022cb7bec --- /dev/null +++ b/src/images/icons/Icon-twitter-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/Icon-twitter.svg b/src/images/icons/Icon-twitter.svg new file mode 100644 index 000000000..c838c4e09 --- /dev/null +++ b/src/images/icons/Icon-twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-close.svg b/src/images/icons/icon-close.svg new file mode 100644 index 000000000..866686fd3 --- /dev/null +++ b/src/images/icons/icon-close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-menu.svg b/src/images/icons/icon-menu.svg new file mode 100644 index 000000000..2b82cbfa5 --- /dev/null +++ b/src/images/icons/icon-menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/products/cake-01.png b/src/images/products/cake-01.png new file mode 100644 index 000000000..acad20d4c Binary files /dev/null and b/src/images/products/cake-01.png differ diff --git a/src/images/products/cake-02.png b/src/images/products/cake-02.png new file mode 100644 index 000000000..f39a0d7a5 Binary files /dev/null and b/src/images/products/cake-02.png differ diff --git a/src/images/products/cake-03.png b/src/images/products/cake-03.png new file mode 100644 index 000000000..0929057cd Binary files /dev/null and b/src/images/products/cake-03.png differ diff --git a/src/images/products/coockies.png b/src/images/products/coockies.png new file mode 100644 index 000000000..a3ecc507f Binary files /dev/null and b/src/images/products/coockies.png differ diff --git a/src/images/products/donate-01.png b/src/images/products/donate-01.png new file mode 100644 index 000000000..c92eb4355 Binary files /dev/null and b/src/images/products/donate-01.png differ diff --git a/src/images/products/donate-02.png b/src/images/products/donate-02.png new file mode 100644 index 000000000..f4e1f492b Binary files /dev/null and b/src/images/products/donate-02.png differ diff --git a/src/index.html b/src/index.html index 8019b83ec..719bf0afd 100644 --- a/src/index.html +++ b/src/index.html @@ -1,19 +1,491 @@ - + - Title + Bakery + + + + - -

Hello Mate Academy

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

Creative bakery

+ Cookie + + + +
+
+
+
+ + + +
+
+
+
+

What we bake

+

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

+
+
+ cake 1 +

Cakes

+

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

+ +
+ Order + +
+ +
+ cake 2 +

Cakes

+

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

+ +
+ Order + +
+
+
+
+ donate 1 +

Donuts

+

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

+ +
+ Order + +
+ +
+ donate 2 +

Donuts

+

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

+ +
+ Order + +
+ +
+ cake 3 +

Cakes

+

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

+ +
+ Order + +
+ +
+ coockies +

Cookies

+

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

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

Few words About us

+

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

+
+
+
2015
+

Foundation year

+
+
+
23
+

Stores

+
+
+
155
+

Companies

+
+
+
10K+
+

Clients

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

MENU

+ +
+

CONTACT US

+
+

CALL US

+ + (629) 555-0129 + + + (603) 555-0123 + + + (804) 555-0127 + +
+ +
+ + + + + Icon instagram + + + + +
+
© Bakerlab 2025
+
+
+
+
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..34ef64906 --- /dev/null +++ b/src/styles/blocks/about-us.scss @@ -0,0 +1,66 @@ +.about-us { + &__content { + @include page-grid; + + row-gap: 32px; + + @include on-tablet { + background-image: url(/src/images/BG-crumbs.png); + background-position: center; + background-size: contain; + background-repeat: no-repeat; + row-gap: 72px; + } + + @include on-desktop { + row-gap: 144px; + } + } + + &__title { + margin: 0; + grid-column: span 2; + + @include on-tablet { + grid-column: span 4; + } + } + + &__blog { + margin: 0; + padding: 0; + grid-column: 1 / span 2; + + @include on-tablet { + grid-column: 5 / -1; + } + + @include on-desktop { + // grid-column: 8 / 13; + } + } + + &__statistic { + padding-top: 34px; + background-image: url(/src/images/BG-crumbs.png); + background-position: center; + background-size: contain; + background-repeat: no-repeat; + + @include page-grid; + + row-gap: 48px; + grid-column: span 2; + + @include on-tablet { + background: none; + grid-column: span 8; + row-gap: 80px; + padding-top: 0; + } + + @include on-desktop { + padding-bottom: 230px; + } + } +} diff --git a/src/styles/blocks/between-sections.scss b/src/styles/blocks/between-sections.scss new file mode 100644 index 000000000..f42f1eabd --- /dev/null +++ b/src/styles/blocks/between-sections.scss @@ -0,0 +1,17 @@ +.between-sections { + background-image: url(/src/images/BG-crumbs.png); + background-size: cover; + background-position: center; + height: 200px; + width: 100%; + padding: 0; + margin: 0; + + @include on-tablet { + height: 400px; + } + + @include on-desktop { + height: 460px; + } +} diff --git a/src/styles/blocks/card.scss b/src/styles/blocks/card.scss new file mode 100644 index 000000000..bb30f5838 --- /dev/null +++ b/src/styles/blocks/card.scss @@ -0,0 +1,52 @@ +.card { + &__photo { + width: 100%; + object-fit: contain; + border-radius: 8px; + + @include hover(transform, scale(1.05)); + } + + &__title { + margin: 0; + font-size: 16px; + font-weight: 500; + line-height: 16px; + letter-spacing: 0.02em; + text-transform: uppercase; + color: #7f8096; + } + + &__description { + padding: 0; + margin: 0; + margin-top: -8px; + font-size: 16px; + line-height: 24px; + } + + &__link { + display: inline-flex; + align-items: center; + text-decoration: none; + font-size: 16px; + font-weight: 500; + line-height: 16px; + letter-spacing: 0.02em; + text-transform: uppercase; + color: $accent-text-color; + + @include hover(transform, scale(1.1)); + } + + &__arrow { + display: inline-flex; + align-items: center; + background-image: url(/src/images/icons/Icon-arrow.svg); + margin-right: 4px; + background-size: cover; + background-position: center; + height: 24px; + width: 24px; + } +} diff --git a/src/styles/blocks/contact-us.scss b/src/styles/blocks/contact-us.scss new file mode 100644 index 000000000..b8627ba24 --- /dev/null +++ b/src/styles/blocks/contact-us.scss @@ -0,0 +1,169 @@ +.contact-us { + &__bg { + // margin: 0 auto; + // max-width: 1440px; + background-color: #1c1a26; + padding-block: 56px; + + @include on-tablet { + padding-block: 88px; + } + } + + &__content { + margin: 0; + + @include page-grid; + + row-gap: 40px; + } + + &__logo { + grid-column: span 2; + + @include on-tablet { + grid-column: 1 / span 4; + } + } + + &__logo-img { + height: 40px; + width: 168; + } + + &__block { + grid-column: span 2; + + display: flex; + flex-direction: column; + row-gap: 16px; + + &--menu { + @include on-tablet { + grid-row: 2; + } + } + &--call { + @include on-tablet { + grid-column: 5 / span 2; + grid-row: 2; + } + } + &--email { + @include on-tablet { + grid-column: 5 / span 2; + grid-row: 3; + margin-top: -64px; + } + + @include on-desktop { + grid-column: 7 / span 2; + grid-row: 2; + margin-top: 0; + } + } + } + + &__title-block { + font-weight: 500; + line-height: 16px; + letter-spacing: 0.02em; + text-transform: uppercase; + color: #7f8096; + margin: 0; + padding: 0; + } + + &__list { + display: flex; + flex-direction: column; + row-gap: 16px; + list-style: none; + padding: 0; + margin: 0; + padding-bottom: 24px; + } + + &__link { + margin: 0; + padding: 0; + text-decoration: none; + color: #fff; + transition: all 0.3s ease; + + &:hover { + text-transform: uppercase; + font-weight: 500; + color: $accent-text-color; + } + } + + &__title { + grid-column: span 2; + + font-size: 48px; + font-weight: 400; + line-height: 40.8px; + text-transform: uppercase; + color: #fff; + margin: 0; + + @include on-tablet { + grid-column: 5 / span 4; + font-size: 56px; + line-height: 47.6px; + } + + @include on-desktop { + grid-column: span 4; + font-size: 72px; + line-height: 61.2px; + } + } + + &__icons { + grid-column: span 2; + + height: 24px; + + display: flex; + column-gap: 32px; + align-items: center; + + @include on-tablet { + grid-row: 4; + margin-top: 3px; + } + + @include on-desktop { + grid-row: 3; + margin-top: -15px; + } + } + + &__icon { + padding: 0; + margin: 0; + height: 24px; + width: 24px; + transition: all 3s ease; + + &--facebook { + &:hover { + content: url(/src/images/icons/Icon-facebook-white.svg); + } + } + + &--instagram { + &:hover { + content: url(/src/images/icons/Icon-instagram-white.svg); + } + } + + &--twitter { + &:hover { + content: url(/src/images/icons/Icon-twitter-white.svg); + } + } + } +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 000000000..8e268a77c --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,15 @@ +.footer { + grid-column: span 2; + + color: #7f8096; + + @include on-tablet { + grid-column: 5 / span 4; + grid-row: 4; + } + + @include on-desktop { + grid-row: 3; + margin-top: -16px; + } +} diff --git a/src/styles/blocks/form.scss b/src/styles/blocks/form.scss new file mode 100644 index 000000000..01f6f445a --- /dev/null +++ b/src/styles/blocks/form.scss @@ -0,0 +1,77 @@ +.form { + grid-column: span 2; + + @include on-tablet { + grid-column: span 6; + } + + &__input { + font-family: Manrope, Arial, Helvetica, sans-serif; + width: 100%; + height: 48px; + margin-bottom: 16px; + padding: 16px 14px; + background-color: #f9f9f9; + box-sizing: border-box; + border-radius: 8px; + font-size: 16px; + line-height: 27px; + border: none; + outline: none; + + &:-webkit-autofill, + &:-webkit-autofill:hover, + &:-webkit-autofill:focus { + -webkit-box-shadow: 0 0 0 1000px #f9f9f9 inset; + } + + &::placeholder { + font-family: Manrope, Arial, Helvetica, sans-serif; + color: #7e7e83; + font-size: 14px; + font-weight: 400; + line-height: 19.6px; + letter-spacing: 0.15px; + } + + &--message { + resize: none; + max-height: 148cm; + height: auto; + overflow-y: auto; + } + + &:hover { + outline: 1px solid #dbdbdb; + } + + &:focus { + outline: 2px solid #f98921; + } + } + + &__button { + background-color: #f98921; + color: #fff; + height: 56px; + width: 100%; + margin-top: 16px; + box-sizing: border-box; + border-radius: 8px; + border: none; + text-align: center; + text-decoration: none; + font-size: 16px; + font-weight: 700; + line-height: 27px; + cursor: pointer; + + &:hover { + background-color: $main-text-color; + } + + &:active { + background-color: #010810; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..c186c9f93 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,149 @@ +.header { + &__content { + flex-direction: column; + justify-content: space-between; + } + + &__bottom { + @include on-tablet { + padding-top: 80px; + row-gap: 16px; + + @include page-grid; + } + + @include on-desktop { + padding-top: 0; + row-gap: 16px; + } + } + + &__img { + display: block; + width: 100%; + height: auto; + margin: 0 auto; + object-fit: cover; + + @include on-tablet { + z-index: -1; + grid-column: 3 / span 4; + grid-row: 2 / span 2; + } + + @include on-desktop { + grid-column: 3 / 7; + grid-row: 1 / 3; + height: 546px; + } + } + + &__paragraph { + padding-block: 32px; + text-align: center; + + @include on-tablet { + padding-block: 0; + max-width: 290px; + text-align: left; + grid-column: span 4; + grid-row: 1; + } + + @include on-desktop { + padding-block: 40px; + margin: auto 0; + grid-column: span 2; + } + } + + &__title { + margin: 0; + font-size: 64px; + font-weight: 400; + line-height: 54.4px; + letter-spacing: -5%; + text-align: center; + grid-column: 1 / 1; + text-transform: uppercase; + color: $accent-text-color; + + @include on-tablet { + font-size: 80px; + line-height: 68px; + grid-column: 1 / span 8; + grid-row: 2 / span 2; + align-content: center; + letter-spacing: -0.02em; + } + + @include on-desktop { + margin-top: -360px; + grid-area: 2 / 1 / 3 / -1; + font-size: 136px; + line-height: 115px; + letter-spacing: -0.03em; + } + } + + &__link { + text-decoration: none; + transition: all 0.3s; + + @include on-tablet { + grid-column: 3 / span 4; + margin-top: 64px; + } + + @include on-desktop { + grid-column: span 2; + grid-row: 3; + margin: 0; + margin-top: -168px; + } + } + + &__icon { + background-image: url(/src/images/icons/Icon-cookie.svg); + width: 24px; + height: 24px; + margin-right: 4px; + background-size: cover; + background-position: center; + } + + &__button { + display: inline-flex; + align-items: center; + justify-content: center; + + width: 100%; + height: 56px; + font-family: inherit; + padding: 10px 20px; + font-size: 16px; + font-weight: 500; + text-transform: uppercase; + color: $accent-text-color; + background: none; + border: 2px solid $accent-text-color; + border-radius: 32px; + cursor: pointer; + transition: all 0.3s ease; + grid-column: span 2; + letter-spacing: 0.02em; + + &:hover { + background-color: $accent-text-color; + color: #fff; + + .header__icon { + background-image: url(/src/images/icons/Icon-cookie-white.svg); + } + + &:active { + background-color: #b2341a; + } + } + } +} diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss new file mode 100644 index 000000000..b1daafd38 --- /dev/null +++ b/src/styles/blocks/icon.scss @@ -0,0 +1,21 @@ +.icon { + display: block; + height: 24px; + width: 24px; + background-size: cover; + background-position: center; + + @include hover(transform, scale(1.2)); + + &--menu { + background-image: url(/src/images/icons/icon-menu.svg); + } + + &--close { + background-image: url(/src/images/icons/icon-close.svg); + } + + @include on-desktop { + display: none; + } +} diff --git a/src/styles/blocks/main.scss b/src/styles/blocks/main.scss new file mode 100644 index 000000000..68cb1e47b --- /dev/null +++ b/src/styles/blocks/main.scss @@ -0,0 +1,19 @@ +.main { + // background-color: #fff; + + &__content { + display: grid; + row-gap: 64px; + padding-block: 96px; + + @include on-tablet { + padding-top: 120px; + row-gap: 152px; + } + + @include on-desktop { + row-gap: 178px; + padding-bottom: 64px; + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..01b5131fb --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,49 @@ +.menu { + height: 100vh; + box-sizing: border-box; + background-color: #ffeefc; + + @include on-desktop { + display: none; + } + + &__top { + position: sticky; + top: 0; + background-color: #ffeefc; + opacity: 0.9; + + @include on-tablet { + margin-bottom: 0; + } + } + + &__nav { + margin-top: 132px; + text-align: center; + } + + &__phone-number { + display: block; + font-size: 16px; + line-height: 22.4px; + letter-spacing: 2px; + color: inherit; + text-decoration: none; + margin-bottom: 16px; + } + + &__call-to-order { + display: block; + width: fit-content; + padding-bottom: 4px; + border-bottom: 1px solid $main-text-color; + + font-size: 16px; + line-height: 22.4px; + letter-spacing: 2px; + text-transform: uppercase; + color: inherit; + text-decoration: none; + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 000000000..dbed9be53 --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,42 @@ +.nav { + &__list { + margin: 0; + padding: 0; + list-style: none; + + display: flex; + flex-direction: column; + gap: 24px; + } + + &__phone { + background-image: url(/src/images/icons/Icon-phone.svg); + margin-right: 4px; + background-size: cover; + background-position: center; + height: 20px; + width: 20px; + } + + &__link { + position: relative; + color: inherit; + text-decoration: none; + transition: all 0.3s ease; + + &:hover { + text-transform: uppercase; + font-weight: 500; + color: $accent-text-color; + + .nav__phone { + background-image: url(/src/images/icons/Icon-phone-accent.svg); + } + } + } + + &__contact-us { + display: inline-flex; + align-items: center; + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..311fb71b8 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,49 @@ +.page { + font-family: Inter, Arial, Helvetica, sans-serif; + font-size: 16px; + line-height: 150%; + color: $main-text-color; + background-color: #ffeefc; + + scroll-behavior: smooth; + + &__body { + margin: 0; + min-width: 320px; + align-items: center; + + &:has(.page__menu:target) { + overflow: hidden; + + @media (orientation: landscape) { + .menu { + overflow: auto; + } + } + } + + @include on-desktop { + &:has(.page__menu:target) { + overflow: auto; + } + } + } + + &__menu { + position: fixed; + top: 0; + left: 0; + right: 0; + + opacity: 0; + transform: translateX(100%); + transition: all 0.3s; + pointer-events: none; + + &:target { + opacity: 1; + transform: translateX(0); + pointer-events: all; + } + } +} diff --git a/src/styles/blocks/products.scss b/src/styles/blocks/products.scss new file mode 100644 index 000000000..46b24d9cd --- /dev/null +++ b/src/styles/blocks/products.scss @@ -0,0 +1,48 @@ +.products { + &__text { + font-size: 16px; + font-weight: 400; + line-height: 24px; + letter-spacing: -0.01em; + margin-bottom: 56px; + + @include on-tablet { + margin-bottom: 80px; + } + } + + &__cards { + @include page-grid; + + row-gap: 56px; + + @include on-tablet { + row-gap: 80px; + } + } + + &__card { + display: flex; + flex-direction: column; + gap: 16px; + grid-column: span 2; + + @include on-tablet { + grid-column: span 4; + } + + @include on-desktop { + grid-column: span 3; + } + } + + &__free-space { + display: none; + + @include on-desktop { + display: block; + width: 100%; + grid-column: span 2; + } + } +} diff --git a/src/styles/blocks/section-title.scss b/src/styles/blocks/section-title.scss new file mode 100644 index 000000000..25941c875 --- /dev/null +++ b/src/styles/blocks/section-title.scss @@ -0,0 +1,23 @@ +.section-title { + margin: 0; + margin-top: 10px; + margin-bottom: 24px; + font-size: 48px; + font-weight: 400; + line-height: 40.8px; + letter-spacing: -0.05em; + color: $accent-text-color; + text-transform: uppercase; + + @include on-tablet { + margin-top: 100px; + font-size: 56px; + line-height: 47.6px; + } + + @include on-desktop { + margin-top: 80px; + font-size: 72px; + line-height: 61.2px; + } +} diff --git a/src/styles/blocks/statistic.scss b/src/styles/blocks/statistic.scss new file mode 100644 index 000000000..f647f4c17 --- /dev/null +++ b/src/styles/blocks/statistic.scss @@ -0,0 +1,29 @@ +.statistic { + &__content { + display: flex; + flex-direction: column; + row-gap: 8px; + grid-column: span 2; + + @include on-tablet { + grid-column: span 4; + } + + @include on-desktop { + grid-column: span 2; + } + } + + &__title { + font-size: 96px; + font-weight: 400; + line-height: 81.6px; + letter-spacing: 0; + color: $accent-text-color; + } + + &__text { + margin: 0; + padding: 0; + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 000000000..97f26f2e6 --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,52 @@ +.top-bar { + &__container { + max-width: 1440px; + margin-inline: auto; + box-sizing: border-box; + padding: 16px; + display: flex; + justify-content: space-between; + align-items: center; + + @include on-desktop { + padding: 28px 32px; + } + } + + &__icons { + display: flex; + gap: 24px; + } + + &__menu { + display: flex; + } + + &__nav { + display: none; + + @include on-desktop { + display: flex; + } + } + + &__nav--list { + margin: 0; + padding: 0; + list-style: none; + + display: flex; + gap: 64px; + } + + &__logo-link { + display: flex; + } + + &__logo { + height: 32px; + width: 100%; + + @include hover(transform, scale(1.2)); + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..607ba2553 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,18 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; - -body { - background: $c-gray; -} +@import 'utils/vars'; +@import 'utils/mixins'; +@import 'blocks/page'; +@import 'blocks/header'; +@import 'blocks/icon'; +@import 'blocks/top-bar'; +@import 'blocks/nav'; +@import 'blocks/menu'; +@import 'blocks/main'; +@import 'blocks/section-title'; +@import 'blocks/products'; +@import 'blocks/card'; +@import 'blocks/between-sections'; +@import 'blocks/about-us'; +@import 'blocks/statistic'; +@import 'blocks/contact-us'; +@import 'blocks/form'; +@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..7ad013002 --- /dev/null +++ b/src/styles/utils/mixins.scss @@ -0,0 +1,51 @@ +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin content-padding-inline() { + padding-inline: 16px; + + @include on-tablet { + padding-inline: 44px; + } + + @include on-desktop { + max-width: 1270px; + margin-inline: auto; + } +} + +.container { + @include content-padding-inline; + + box-sizing: border-box; +} + +@mixin hover($property, $toValue) { + transition: #{$property} $effectDuration; + &:hover { + #{$property}: $toValue; + } +} + +@mixin page-grid { + --columns: 2; + + display: grid; + column-gap: 16px; + grid-template-columns: repeat(var(--columns), 1fr); + + @include on-tablet { + --columns: 8; + + column-gap: 24px; + } +} diff --git a/src/styles/utils/vars.scss b/src/styles/utils/vars.scss new file mode 100644 index 000000000..c8cf06ca2 --- /dev/null +++ b/src/styles/utils/vars.scss @@ -0,0 +1,6 @@ +$tablet-min-width: 640px; +$desktop-min-width: 1024px; +$effectDuration: 0.3s; +$main-text-color: #1c1a26; +$accent-text-color: #f9512e; +$second-text-color: #7f8096;