diff --git a/src/fonts/Inter-Regular.woff b/src/fonts/Inter-Regular.woff new file mode 100644 index 000000000..a85ed5d3e Binary files /dev/null and b/src/fonts/Inter-Regular.woff differ diff --git a/src/fonts/Roboto-Regular-webfont.woff b/src/fonts/Roboto-Regular-webfont.woff deleted file mode 100755 index 8aa07d731..000000000 Binary files a/src/fonts/Roboto-Regular-webfont.woff and /dev/null differ diff --git a/src/images/header-component-cookie.png b/src/images/header-component-cookie.png new file mode 100644 index 000000000..909fe6a71 Binary files /dev/null and b/src/images/header-component-cookie.png differ diff --git a/src/images/header-component-crumbs.png b/src/images/header-component-crumbs.png new file mode 100644 index 000000000..05bda7174 Binary files /dev/null and b/src/images/header-component-crumbs.png differ diff --git a/src/images/icons/icon-arrow.svg b/src/images/icons/icon-arrow.svg new file mode 100644 index 000000000..139e70319 --- /dev/null +++ b/src/images/icons/icon-arrow.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..65ae950c8 --- /dev/null +++ b/src/images/icons/icon-close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-cookie-disabled.svg b/src/images/icons/icon-cookie-disabled.svg new file mode 100644 index 000000000..5cf6b28c3 --- /dev/null +++ b/src/images/icons/icon-cookie-disabled.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-cookie-hovered.svg b/src/images/icons/icon-cookie-hovered.svg new file mode 100644 index 000000000..55b89a713 --- /dev/null +++ b/src/images/icons/icon-cookie-hovered.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..5bf16c613 --- /dev/null +++ b/src/images/icons/icon-cookie.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-facebook-light.svg b/src/images/icons/icon-facebook-light.svg new file mode 100644 index 000000000..9229ea56d --- /dev/null +++ b/src/images/icons/icon-facebook-light.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/images/icons/icon-facebook.svg b/src/images/icons/icon-facebook.svg new file mode 100644 index 000000000..d629cfa5d --- /dev/null +++ b/src/images/icons/icon-facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-instagram-light.svg b/src/images/icons/icon-instagram-light.svg new file mode 100644 index 000000000..e4d6d6caa --- /dev/null +++ b/src/images/icons/icon-instagram-light.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/images/icons/icon-instagram.svg b/src/images/icons/icon-instagram.svg new file mode 100644 index 000000000..87e645f62 --- /dev/null +++ b/src/images/icons/icon-instagram.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..4f2194a84 --- /dev/null +++ b/src/images/icons/icon-menu.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..b3c49f859 --- /dev/null +++ b/src/images/icons/icon-phone.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/icon-twitter-light.svg b/src/images/icons/icon-twitter-light.svg new file mode 100644 index 000000000..c1e37d6c5 --- /dev/null +++ b/src/images/icons/icon-twitter-light.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..0ca15e705 --- /dev/null +++ b/src/images/icons/icon-twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/icons/logo-bakerlab-light.svg b/src/images/icons/logo-bakerlab-light.svg new file mode 100644 index 000000000..a0595e7ae --- /dev/null +++ b/src/images/icons/logo-bakerlab-light.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/icons/logo-bakerlab.svg b/src/images/icons/logo-bakerlab.svg new file mode 100644 index 000000000..8668baf21 --- /dev/null +++ b/src/images/icons/logo-bakerlab.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/images/products/photo-product-01.png b/src/images/products/photo-product-01.png new file mode 100644 index 000000000..2c6f7011d 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..cce9eab83 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..7dbb85888 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..a306c588b 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..32621c329 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..18774b8ea Binary files /dev/null and b/src/images/products/photo-product-06.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..bf6f43d05 --- /dev/null +++ b/src/styles/blocks/about-us.scss @@ -0,0 +1,94 @@ +.about-us { + position: relative; + overflow: hidden; + + @include on-desktop { + padding-bottom: 350px; + } + + &__content { + @include page-grid; + + row-gap: 32px; + + &--achievement { + row-gap: 48px; + margin-top: 64px; + + @include on-tablet { + row-gap: 80px; + margin-top: 72px; + } + + @include on-desktop { + margin-top: 144px; + } + } + } + + &__title { + z-index: 5; + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 5; + } + } + + &__description { + z-index: 5; + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 5 / 9; + } + } + + &__achievement { + z-index: 5; + grid-column: span 2; + + @include on-tablet { + grid-column: span 4; + } + + @include on-desktop { + grid-column: span 2; + } + } + + &__achievement-title { + margin: 0; + font-size: 96px; + } + + &__achievement-description { + color: $txt-color-title; + } + + &__bg-photo { + position: absolute; + z-index: 0; + top: 65%; + left: 50%; + transform: translate(-50%, -50%); + + width: 400px; + height: auto; + + @include hover( + transform, + translate(-50%, -50%) scale($transform-photo-scale) + ); + + @include on-tablet { + top: 45%; + width: 550px; + } + + @include on-desktop { + top: 50%; + width: 750px; + } + } +} diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 000000000..ab135ec6d --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,44 @@ +.button { + box-sizing: border-box; + padding: 18px 0; + border: $button-border solid $color-accent; + border-radius: $button-radius; + + color: $color-accent; + text-decoration: none; + + transition: all $transition-time; + + @include txt-style-title; + + @include hover(transform, scale($transform-button-scale)); + + &:hover { + color: $txt-color-light; + background-color: $color-accent; + + .icon--cookie { + background-image: url(../images/icons/icon-cookie-hovered.svg); + } + } + + &:focus { + border-color: $color-focused; + color: $txt-color-light; + background-color: $color-focused; + + .icon--cookie { + background-image: url(../images/icons/icon-cookie-hovered.svg); + } + } + + &:disabled { + border-color: $color-disabled; + color: $color-disabled; + background-color: $bg-color; + + .icon--cookie { + background-image: url(../images/icons/icon-cookie-disabled.svg); + } + } +} diff --git a/src/styles/blocks/card.scss b/src/styles/blocks/card.scss new file mode 100644 index 000000000..cb44edc36 --- /dev/null +++ b/src/styles/blocks/card.scss @@ -0,0 +1,52 @@ +.card { + grid-column: span 2; + + @include on-tablet { + grid-column: span 4; + } + + @include on-desktop { + grid-column: span 3; + } + + &__photo { + width: 100%; + margin: 0; + border-radius: 8px; + object-fit: cover; + + @include hover(transform, scale($transform-card-scale)); + } + + &__description { + display: grid; + gap: 8px; + margin-top: 16px; + } + + &__title { + margin: 0; + color: $txt-color-title; + + @include txt-style-title; + } + + &__quote { + margin: 0; + } + + &__link { + display: flex; + flex-direction: row; + gap: 4px; + align-content: center; + + padding-top: 8px; + + color: $color-accent; + + @include txt-style-title; + @include hover-title; + @include hover(transform, scale($transform-button-scale)); + } +} diff --git a/src/styles/blocks/contacts.scss b/src/styles/blocks/contacts.scss new file mode 100644 index 000000000..9e28f0487 --- /dev/null +++ b/src/styles/blocks/contacts.scss @@ -0,0 +1,121 @@ +.contacts { + padding: 56px 0; + + @include on-tablet { + padding: 88px 0; + } + + &__content { + @include page-grid; + + row-gap: 40px; + + @include on-tablet { + grid-template-rows: auto auto auto; + row-gap: 64px; + } + } + + &__bar-section, + &__info-section, + &__info-lists { + display: contents; + } + + &__bar-section { + display: contents; + + & > a { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 5; + grid-row: 1; + } + } + } + + &__logo { + grid-column: 1 / 5; + + @include hover(transform, scale($transform-logo-scale)); + } + + &__title-main { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 5 / 9; + grid-row: 1; + margin: 0; + } + } + + &__list { + display: flex; + grid-column: 1 / -1; + flex-direction: column; + gap: 16px; + + @include on-tablet { + grid-row: 2; + .contacts__bar-section & { + grid-column: 1 / 5; + } + + .contacts__info-lists &:nth-child(1) { + grid-column: 5 / 7; + } + + .contacts__info-lists &:nth-child(2) { + grid-column: 7 / 9; + } + } + } + + &__title { + margin: 0; + color: $txt-color-title; + + @include txt-style-title; + } + + &__link { + margin: 0; + + color: $txt-color-light; + text-decoration: none; + word-break: break-all; + overflow-wrap: break-word; + + @include hover(transform, scale($transform-button-scale)); + + &:hover { + color: $color-accent; + } + } + + &__social-media-section { + display: flex; + grid-column: 1 / -1; + gap: 24px; + justify-content: flex-start; + + @include on-tablet { + grid-column: 1 / 5; + grid-row: 3; + } + } + + &__terms-section { + display: flex; + grid-column: 1 / -1; + justify-content: flex-start; + color: $txt-color-title; + + @include on-tablet { + grid-column: 5 / 9; + grid-row: 3; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 000000000..67c06e4e8 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,182 @@ +.header { + position: relative; + + &__content { + overflow: hidden; + display: flex; + flex-direction: column; + height: 100vh; + } + + &__main-content { + position: relative; + + display: flex; + flex-direction: column; + flex-grow: 1; + align-items: center; + + padding-top: 32px; + + @include on-tablet { + padding-top: 80px; + } + + @include on-desktop { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + display: block; + + width: max-content; + padding-top: 0; + } + } + + &__hero-wrapper { + position: relative; + + display: flex; + flex-direction: column; + align-items: center; + + width: 100%; + + @include on-tablet { + justify-content: center; + height: 100%; + } + + @include on-desktop { + position: static; + transform: none; + width: 100%; + margin: 0; + } + } + + &__quote { + width: 100%; + margin: 0 0 32px; + text-align: center; + + @include on-tablet { + align-self: flex-start; + max-width: 280px; + margin: 0 0 16px; + text-align: left; + } + + @include on-desktop { + position: absolute; + z-index: 15; + bottom: calc(100% + 8px); + left: 0; + + width: 260px; + margin: 0; + } + + @include on-design { + bottom: calc(100% + 40px); + width: 280px; + } + } + + &__title { + pointer-events: none; + + z-index: 5; + + margin: 0; + + font-size: 64px; + text-align: center; + white-space: normal; + + &--break { + display: block; + + @include on-tablet { + display: inline; + } + } + + @include txt-style-big-title; + + @include on-tablet { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + width: max-content; + + font-size: clamp(60px, 10vw, 80px); + white-space: nowrap; + } + + @include on-desktop { + position: relative; + top: 0; + left: 0; + transform: none; + + display: block; + + font-size: clamp(80px, 12vw, 136px); + white-space: nowrap; + } + } + + &__img { + display: block; + width: 100%; + height: auto; + + @include hover(transform, scale($transform-photo-scale)); + + @include on-tablet { + width: 50%; + } + + @include on-desktop { + position: absolute; + z-index: 1; + left: 50%; + transform: translateX(-50%); + + width: 50%; + max-width: 600px; + + &:hover { + transform: translateX(-50%) scale($transform-photo-scale); + } + } + } + + &__button { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + + @include on-tablet { + z-index: 20; + width: 50%; + margin-top: 80px; + padding: 16px 0; + } + + @include on-desktop { + position: absolute; + top: calc(100% + 64px); + left: 0; + + width: 260px; + margin: 0; + } + } +} diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss new file mode 100644 index 000000000..196f36ed6 --- /dev/null +++ b/src/styles/blocks/icon.scss @@ -0,0 +1,62 @@ +.icon { + display: block; + + width: 24px; + height: 24px; + + background-repeat: no-repeat; + background-size: auto; + + &--menu { + background-image: url(../images/icons/icon-menu.svg); + + @include on-desktop { + display: none; + } + + @include hover(transform, scale($transform-icon-scale)); + } + + &--close { + background-image: url(../images/icons/icon-close.svg); + + @include hover(transform, scale($transform-icon-scale)); + } + + &--phone { + background-image: url(../images/icons/icon-phone.svg); + } + + &--arrow { + background-image: url(../images/icons/icon-arrow.svg); + } + + &--cookie { + background-image: url(../images/icons/icon-cookie.svg); + } + + &--facebook { + background-image: url(../images/icons/icon-facebook.svg); + transition: $transition-time; + + &:hover { + background-image: url(../images/icons/icon-facebook-light.svg); + } + } + + &--instagram { + background-image: url(../images/icons/icon-instagram.svg); + transition: $transition-time; + &:hover { + background-image: url(../images/icons/icon-instagram-light.svg); + } + } + + &--twitter { + background-image: url(../images/icons/icon-twitter.svg); + transition: $transition-time; + &:hover { + background-image: url(../images/icons/icon-twitter-light.svg); + } + } +} diff --git a/src/styles/blocks/main.scss b/src/styles/blocks/main.scss new file mode 100644 index 000000000..50a8d8a1d --- /dev/null +++ b/src/styles/blocks/main.scss @@ -0,0 +1,29 @@ +.main { + position: relative; + z-index: 1; + + &__content { + display: grid; + row-gap: 72px; + padding: 64px 0 72px; + + @include on-tablet { + row-gap: 152px; + padding: 0 0 152px; + } + + @include on-desktop { + row-gap: 178px; + padding: 152px 0 56px; + } + + @include on-design { + row-gap: 178px; + padding: 178px 0 56px; + } + } +} + +.footer { + background-color: $txt-color-dark; +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 000000000..46341a9ec --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,20 @@ +.menu { + z-index: 100; + + overflow: auto; + display: flex; + flex-direction: column; + + height: 100vh; + + background-color: $bg-color; + + &__nav { + display: flex; + flex-grow: 1; + align-items: center; + justify-content: center; + + text-align: center; + } +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 000000000..43873fb7f --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,51 @@ +.nav { + &--header { + display: none; + + @include on-desktop { + display: block; + } + } + + &__list { + display: flex; + gap: 64px; + align-items: center; + + margin: 0; + padding: 0; + + list-style: none; + + &--menu { + display: flex; + flex-direction: column; + gap: 24px; + align-items: center; + } + } + + &__item { + @include hover(transform, scale($transform-icon-scale)); + } + + &__link { + position: relative; + color: inherit; + text-decoration: none; + caret-color: transparent; + + &--contact { + display: flex; + flex-direction: row; + gap: 4px; + justify-content: center; + + color: $color-accent; + + @include txt-style-title; + } + + @include hover-title; + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 000000000..c47550d4d --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,38 @@ +.page { + user-select: none; + + font-family: Inter, sans-serif; + font-size: $txt-regular-font-size; + font-weight: $txt-regular-font-weight; + font-style: normal; + line-height: $txt-regular-line-height; + color: $txt-color-dark; + letter-spacing: $txt-regular-letter-spacing; + + background-color: $bg-color; + + &__body { + min-width: 320px; + margin: 0; + } + + &__menu { + pointer-events: none; + + position: fixed; + inset: 0; + transform: translateX(-100%); + + transition: all $transition-time; + + &:target { + pointer-events: all; + transform: translateX(0); + opacity: 1; + } + } + + &:has(.page__menu:target) { + overflow: hidden; + } +} diff --git a/src/styles/blocks/products.scss b/src/styles/blocks/products.scss new file mode 100644 index 000000000..679573702 --- /dev/null +++ b/src/styles/blocks/products.scss @@ -0,0 +1,34 @@ +.products { + &__wrapper { + display: grid; + row-gap: 56px; + width: 100%; + margin-top: 56px; + + @include page-grid; + + @include on-tablet { + row-gap: 80px; + margin-top: 80px; + } + } + + &__location { + display: grid; + grid-column: 1 / -1; + grid-template-columns: subgrid; + row-gap: inherit; + + &--left { + @include on-desktop { + grid-column: 1 / 7; + } + } + + &--right { + @include on-desktop { + grid-column: 3 / 9; + } + } + } +} diff --git a/src/styles/blocks/section.scss b/src/styles/blocks/section.scss new file mode 100644 index 000000000..50c8f9e44 --- /dev/null +++ b/src/styles/blocks/section.scss @@ -0,0 +1,12 @@ +.section { + &__title { + margin: 0; + font-size: 56px; + + @include txt-style-title; + + &--contacts { + color: $txt-color-light; + } + } +} diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss new file mode 100644 index 000000000..9d9ffe4ba --- /dev/null +++ b/src/styles/blocks/top-bar.scss @@ -0,0 +1,22 @@ +.top-bar { + display: flex; + align-items: center; + justify-content: space-between; + + height: 32px; + padding: 16px; + + @include on-desktop { + padding: 28px 32px; + } + + &__logo-link { + display: flex; + } + + &__logo { + cursor: default; + height: 32px; + border: none; + } +} diff --git a/src/styles/main.css b/src/styles/main.css new file mode 100644 index 000000000..2b78720a4 --- /dev/null +++ b/src/styles/main.css @@ -0,0 +1,1041 @@ +.container { + padding-inline: 16px; +} + +@media (min-width: 640px) { + .container { + padding-inline: 44px; + } +} + +.page { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + + font-family: Inter, sans-serif; + font-size: 16px; + font-weight: 400; + font-style: normal; + line-height: 150%; + color: rgb(28, 26, 38); + letter-spacing: -0.01em; + + background-color: rgb(238, 247, 255); +} + +.page__body { + min-width: 320px; + margin: 0; +} + +.page__menu { + pointer-events: none; + + position: fixed; + inset: 0; + transform: translateX(-100%); + + transition: all 0.3s; +} + +.page__menu:target { + pointer-events: all; + transform: translateX(0); + opacity: 1; +} + +.page:has(.page__menu:target) { + overflow: hidden; +} + +.header { + position: relative; +} + +.header__content { + overflow: hidden; + display: flex; + flex-direction: column; + height: 100vh; +} + +.header__main-content { + position: relative; + + display: flex; + flex-direction: column; + flex-grow: 1; + align-items: center; + + padding-top: 32px; +} + +@media (min-width: 640px) { + .header__main-content { + padding-top: 80px; + } +} + +@media (min-width: 1024px) { + .header__main-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + display: block; + + width: max-content; + padding-top: 0; + } +} + +.header__hero-wrapper { + position: relative; + + display: flex; + flex-direction: column; + align-items: center; + + width: 100%; +} + +@media (min-width: 640px) { + .header__hero-wrapper { + justify-content: center; + height: 100%; + } +} + +@media (min-width: 1024px) { + .header__hero-wrapper { + position: static; + transform: none; + width: 100%; + margin: 0; + } +} + +.header__quote { + width: 100%; + margin: 0 0 32px; + text-align: center; +} + +@media (min-width: 640px) { + .header__quote { + align-self: flex-start; + max-width: 280px; + margin: 0 0 16px; + text-align: left; + } +} + +@media (min-width: 1024px) { + .header__quote { + position: absolute; + z-index: 15; + bottom: calc(100% + 8px); + left: 0; + + width: 260px; + margin: 0; + } +} + +@media (min-width: 1200px) { + .header__quote { + bottom: calc(100% + 40px); + width: 280px; + } +} + +.header__title { + pointer-events: none; + + z-index: 5; + + margin: 0; + + font-size: 64px; + font-weight: 400; + line-height: 85%; + text-align: center; + text-decoration: none; + text-transform: uppercase; + letter-spacing: -0.05em; + white-space: normal; +} + +.header__title--break { + display: block; +} + +@media (min-width: 640px) { + .header__title--break { + display: inline; + } +} + +@media (min-width: 640px) { + .header__title { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + width: max-content; + + font-size: clamp(60px, 10vw, 80px); + white-space: nowrap; + } +} + +@media (min-width: 1024px) { + .header__title { + position: relative; + top: 0; + left: 0; + transform: none; + + display: block; + + font-size: clamp(80px, 12vw, 136px); + white-space: nowrap; + } +} + +.header__img { + display: block; + width: 100%; + height: auto; + transition: transform 0.3s; +} + +.header__img:hover { + transform: scale(1.08); +} + +@media (min-width: 640px) { + .header__img { + width: 50%; + } +} + +@media (min-width: 1024px) { + .header__img { + position: absolute; + z-index: 1; + left: 50%; + transform: translateX(-50%); + + width: 50%; + max-width: 600px; + } + .header__img:hover { + transform: translateX(-50%) scale(1.08); + } +} + +.header__button { + display: flex; + align-items: center; + justify-content: center; + width: 100%; +} + +@media (min-width: 640px) { + .header__button { + z-index: 20; + width: 50%; + margin-top: 80px; + padding: 16px 0; + } +} + +@media (min-width: 1024px) { + .header__button { + position: absolute; + top: calc(100% + 64px); + left: 0; + + width: 260px; + margin: 0; + } +} + +.top-bar { + display: flex; + align-items: center; + justify-content: space-between; + + height: 32px; + padding: 16px; +} + +@media (min-width: 1024px) { + .top-bar { + padding: 28px 32px; + } +} + +.top-bar__logo-link { + display: flex; +} + +.top-bar__logo { + cursor: default; + height: 32px; + border: none; +} + +.icon { + display: block; + + width: 24px; + height: 24px; + + background-repeat: no-repeat; + background-size: auto; +} + +.icon--menu { + background-image: url(../images/icons/icon-menu.svg); + transition: transform 0.3s; +} + +@media (min-width: 1024px) { + .icon--menu { + display: none; + } +} + +.icon--menu:hover { + transform: scale(1.2); +} + +.icon--close { + background-image: url(../images/icons/icon-close.svg); + transition: transform 0.3s; +} + +.icon--close:hover { + transform: scale(1.2); +} + +.icon--phone { + background-image: url(../images/icons/icon-phone.svg); +} + +.icon--arrow { + background-image: url(../images/icons/icon-arrow.svg); +} + +.icon--cookie { + background-image: url(../images/icons/icon-cookie.svg); +} + +.icon--facebook { + background-image: url(../images/icons/icon-facebook.svg); + transition: 0.3s; +} + +.icon--facebook:hover { + background-image: url(../images/icons/icon-facebook-light.svg); +} + +.icon--instagram { + background-image: url(../images/icons/icon-instagram.svg); + transition: 0.3s; +} + +.icon--instagram:hover { + background-image: url(../images/icons/icon-instagram-light.svg); +} + +.icon--twitter { + background-image: url(../images/icons/icon-twitter.svg); + transition: 0.3s; +} + +.icon--twitter:hover { + background-image: url(../images/icons/icon-twitter-light.svg); +} + +.nav--header { + display: none; +} + +@media (min-width: 1024px) { + .nav--header { + display: block; + } +} + +.nav__list { + display: flex; + gap: 64px; + align-items: center; + + margin: 0; + padding: 0; + + list-style: none; +} + +.nav__list--menu { + display: flex; + flex-direction: column; + gap: 24px; + align-items: center; +} + +.nav__item { + transition: transform 0.3s; +} + +.nav__item:hover { + transform: scale(1.2); +} + +.nav__link { + position: relative; + color: inherit; + text-decoration: none; + caret-color: transparent; +} + +.nav__link--contact { + display: flex; + flex-direction: row; + gap: 4px; + justify-content: center; + + font-weight: 500; + line-height: 100%; + color: rgb(249, 81, 46); + text-decoration: none; + text-transform: uppercase; + letter-spacing: 0.02em; +} + +.nav__link::after { + content: ''; + + position: absolute; + bottom: -8px; + transform-origin: left; + transform: scale(0); + + display: block; + + width: 100%; + height: 1px; + + background-color: rgb(249, 81, 46); + + transition: transform 0.3s; +} + +.nav__link:hover { + color: rgb(249, 81, 46); +} + +.nav__link:hover::after { + transform: scale(1); +} + +.nav__link:focus { + color: rgb(178, 52, 26); +} + +.nav__link:focus::after { + transform: scale(1); + background-color: rgb(178, 52, 26); +} + +.nav__link:disabled { + color: rgb(251, 162, 143); +} + +.menu { + z-index: 100; + + overflow: auto; + display: flex; + flex-direction: column; + + height: 100vh; + + background-color: rgb(238, 247, 255); +} + +.menu__nav { + display: flex; + flex-grow: 1; + align-items: center; + justify-content: center; + + text-align: center; +} + +.button { + box-sizing: border-box; + padding: 18px 0; + border: 2px solid rgb(249, 81, 46); + border-radius: 32px; + + font-weight: 500; + line-height: 100%; + color: rgb(249, 81, 46); + text-decoration: none; + text-transform: uppercase; + letter-spacing: 0.02em; + + transition: all 0.3s; + transition: transform 0.3s; +} + +.button:hover { + transform: scale(1.04); + color: rgb(255, 255, 255); + background-color: rgb(249, 81, 46); +} + +.button:hover .icon--cookie { + background-image: url(../images/icons/icon-cookie-hovered.svg); +} + +.button:focus { + border-color: rgb(178, 52, 26); + color: rgb(255, 255, 255); + background-color: rgb(178, 52, 26); +} + +.button:focus .icon--cookie { + background-image: url(../images/icons/icon-cookie-hovered.svg); +} + +.button:disabled { + border-color: rgb(251, 162, 143); + color: rgb(251, 162, 143); + background-color: rgb(238, 247, 255); +} + +.button:disabled .icon--cookie { + background-image: url(../images/icons/icon-cookie-disabled.svg); +} + +.main { + position: relative; + z-index: 1; +} + +.main__content { + display: grid; + row-gap: 72px; + padding: 64px 0 72px; +} + +@media (min-width: 640px) { + .main__content { + row-gap: 152px; + padding: 0 0 152px; + } +} + +@media (min-width: 1024px) { + .main__content { + row-gap: 178px; + padding: 152px 0 56px; + } +} + +@media (min-width: 1200px) { + .main__content { + row-gap: 178px; + padding: 178px 0 56px; + } +} + +.footer { + background-color: rgb(28, 26, 38); +} + +.section__title { + margin: 0; + + font-size: 56px; + font-weight: 500; + line-height: 100%; + text-decoration: none; + text-transform: uppercase; + letter-spacing: 0.02em; +} + +.section__title--contacts { + color: rgb(255, 255, 255); +} + +.products__wrapper { + --columns: 2; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + gap: 56px 16px; + -moz-column-gap: 16px; + + width: 100%; + margin-top: 56px; +} + +@media (min-width: 640px) { + .products__wrapper { + --columns: 8; + + -moz-column-gap: 24px; + column-gap: 24px; + } +} + +@media (min-width: 1200px) { + .products__wrapper { + -moz-column-width: 128px; + column-width: 128px; + } +} + +@media (min-width: 640px) { + .products__wrapper { + row-gap: 80px; + margin-top: 80px; + } +} + +.products__location { + display: grid; + grid-column: 1/-1; + grid-template-columns: subgrid; + row-gap: inherit; +} + +@media (min-width: 1024px) { + .products__location--left { + grid-column: 1/7; + } +} + +@media (min-width: 1024px) { + .products__location--right { + grid-column: 3/9; + } +} + +.card { + grid-column: span 2; +} + +@media (min-width: 640px) { + .card { + grid-column: span 4; + } +} + +@media (min-width: 1024px) { + .card { + grid-column: span 3; + } +} + +.card__photo { + width: 100%; + margin: 0; + border-radius: 8px; + + -o-object-fit: cover; + object-fit: cover; + + transition: transform 0.3s; +} + +.card__photo:hover { + transform: scale(1.01); +} + +.card__description { + display: grid; + gap: 8px; + margin-top: 16px; +} + +.card__title { + margin: 0; + + font-weight: 500; + line-height: 100%; + color: rgb(127, 128, 150); + text-decoration: none; + text-transform: uppercase; + letter-spacing: 0.02em; +} + +.card__quote { + margin: 0; +} + +.card__link { + display: flex; + flex-direction: row; + gap: 4px; + align-content: center; + + padding-top: 8px; + + font-weight: 500; + line-height: 100%; + color: rgb(249, 81, 46); + text-decoration: none; + text-transform: uppercase; + letter-spacing: 0.02em; + + transition: transform 0.3s; +} + +.card__link::after { + content: ''; + + position: absolute; + bottom: -8px; + transform-origin: left; + transform: scale(0); + + display: block; + + width: 100%; + height: 1px; + + background-color: rgb(249, 81, 46); + + transition: transform 0.3s; +} + +.card__link:hover { + transform: scale(1.04); + color: rgb(249, 81, 46); +} + +.card__link:hover::after { + transform: scale(1); +} + +.card__link:focus { + color: rgb(178, 52, 26); +} + +.card__link:focus::after { + transform: scale(1); + background-color: rgb(178, 52, 26); +} + +.card__link:disabled { + color: rgb(251, 162, 143); +} + +.about-us { + position: relative; + overflow: hidden; +} + +@media (min-width: 1024px) { + .about-us { + padding-bottom: 350px; + } +} + +.about-us__content { + --columns: 2; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + -moz-column-gap: 16px; + column-gap: 16px 32px; +} + +@media (min-width: 640px) { + .about-us__content { + --columns: 8; + + -moz-column-gap: 24px; + column-gap: 24px; + } +} + +@media (min-width: 1200px) { + .about-us__content { + -moz-column-width: 128px; + column-width: 128px; + } +} + +.about-us__content--achievement { + row-gap: 48px; + margin-top: 64px; +} + +@media (min-width: 640px) { + .about-us__content--achievement { + row-gap: 80px; + margin-top: 72px; + } +} + +@media (min-width: 1024px) { + .about-us__content--achievement { + margin-top: 144px; + } +} + +.about-us__title { + z-index: 5; + grid-column: 1/-1; +} + +@media (min-width: 640px) { + .about-us__title { + grid-column: 1/5; + } +} + +.about-us__description { + z-index: 5; + grid-column: 1/-1; +} + +@media (min-width: 640px) { + .about-us__description { + grid-column: 5/9; + } +} + +.about-us__achievement { + z-index: 5; + grid-column: span 2; +} + +@media (min-width: 640px) { + .about-us__achievement { + grid-column: span 4; + } +} + +@media (min-width: 1024px) { + .about-us__achievement { + grid-column: span 2; + } +} + +.about-us__achievement-title { + margin: 0; + font-size: 96px; +} + +.about-us__achievement-description { + color: rgb(127, 128, 150); +} + +.about-us__bg-photo { + position: absolute; + z-index: 0; + top: 65%; + left: 50%; + transform: translate(-50%, -50%); + + width: 400px; + height: auto; + + transition: transform 0.3s; +} + +.about-us__bg-photo:hover { + transform: translate(-50%, -50%) scale(1.08); +} + +@media (min-width: 640px) { + .about-us__bg-photo { + top: 45%; + width: 550px; + } +} + +@media (min-width: 1024px) { + .about-us__bg-photo { + top: 50%; + width: 750px; + } +} + +.contacts { + padding: 56px 0; +} + +@media (min-width: 640px) { + .contacts { + padding: 88px 0; + } +} + +.contacts__content { + --columns: 2; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + -moz-column-gap: 16px; + column-gap: 16px 40px; +} + +@media (min-width: 640px) { + .contacts__content { + --columns: 8; + + -moz-column-gap: 24px; + column-gap: 24px; + } +} + +@media (min-width: 1200px) { + .contacts__content { + -moz-column-width: 128px; + column-width: 128px; + } +} + +@media (min-width: 640px) { + .contacts__content { + grid-template-rows: auto auto auto; + row-gap: 64px; + } +} + +.contacts__bar-section, +.contacts__info-section, +.contacts__info-lists { + display: contents; +} + +.contacts__bar-section { + display: contents; +} + +.contacts__bar-section > a { + grid-column: 1/-1; +} + +@media (min-width: 640px) { + .contacts__bar-section > a { + grid-column: 1/5; + grid-row: 1; + } +} + +.contacts__logo { + grid-column: 1/5; + transition: transform 0.3s; +} + +.contacts__logo:hover { + transform: scale(1.1); +} + +.contacts__title-main { + grid-column: 1/-1; +} + +@media (min-width: 640px) { + .contacts__title-main { + grid-column: 5/9; + grid-row: 1; + margin: 0; + } +} + +.contacts__list { + display: flex; + grid-column: 1/-1; + flex-direction: column; + gap: 16px; +} + +@media (min-width: 640px) { + .contacts__list { + grid-row: 2; + } + .contacts__bar-section .contacts__list { + grid-column: 1/5; + } + .contacts__info-lists .contacts__list:nth-child(1) { + grid-column: 5/7; + } + .contacts__info-lists .contacts__list:nth-child(2) { + grid-column: 7/9; + } +} + +.contacts__title { + margin: 0; + + font-weight: 500; + line-height: 100%; + color: rgb(127, 128, 150); + text-decoration: none; + text-transform: uppercase; + letter-spacing: 0.02em; +} + +.contacts__link { + margin: 0; + + color: rgb(255, 255, 255); + text-decoration: none; + word-break: break-all; + overflow-wrap: break-word; + + transition: transform 0.3s; +} + +.contacts__link:hover { + transform: scale(1.04); + color: rgb(249, 81, 46); +} + +.contacts__social-media-section { + display: flex; + grid-column: 1/-1; + gap: 24px; + justify-content: flex-start; +} + +@media (min-width: 640px) { + .contacts__social-media-section { + grid-column: 1/5; + grid-row: 3; + } +} + +.contacts__terms-section { + display: flex; + grid-column: 1/-1; + justify-content: flex-start; + color: rgb(127, 128, 150); +} + +@media (min-width: 640px) { + .contacts__terms-section { + grid-column: 5/9; + grid-row: 3; + } +} + +html { + scroll-behavior: smooth; +} diff --git a/src/styles/main.css.map b/src/styles/main.css.map new file mode 100644 index 000000000..98356d66f --- /dev/null +++ b/src/styles/main.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["utils/_mixins.scss","main.css","blocks/page.scss","utils/_vars.scss","blocks/header.scss","blocks/top-bar.scss","blocks/icon.scss","blocks/nav.scss","blocks/menu.scss","blocks/button.scss","blocks/main.scss","blocks/section.scss","blocks/products.scss","blocks/card.scss","blocks/about-us.scss","blocks/contacts.scss","main.scss"],"names":[],"mappings":"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","file":"main.css"} \ No newline at end of file diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d12..c47a75bfb 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,20 @@ -@import 'utils'; -@import 'fonts'; -@import 'typography'; +@import 'utils/vars'; +@import 'utils/mixins'; -body { - background: $c-gray; +@import 'blocks/page'; +@import 'blocks/header'; +@import 'blocks/top-bar'; +@import 'blocks/icon'; +@import 'blocks/nav'; +@import 'blocks/menu'; +@import 'blocks/button'; +@import 'blocks/main'; +@import 'blocks/section'; +@import 'blocks/products'; +@import 'blocks/card'; +@import 'blocks/about-us'; +@import 'blocks/contacts'; + +html { + scroll-behavior: smooth; } 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 index 80c79780d..6f579abd1 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,111 @@ +@mixin on-tablet { + @media (min-width: $tablet-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-width) { + @content; + } +} + +@mixin on-design { + @media (min-width: $design-width) { + @content; + } +} + +@mixin content-padding-inline() { + padding-inline: 16px; + + @include on-tablet { + padding-inline: 44px; + } +} + +.container { + @include content-padding-inline; +} + +@mixin page-grid { + --columns: 2; + + display: grid; + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 16px; + + @include on-tablet { + --columns: 8; + + column-gap: 24px; + } + + @include on-design { + column-width: 128px; + } +} + +@mixin txt-style-title { + font-weight: $txt-title-font-weight; + line-height: $txt-title-line-height; + text-decoration: none; + text-transform: $txt-transform; + letter-spacing: $txt-title-letter-spacing; +} + +@mixin txt-style-big-title { + font-weight: $txt-regular-font-weight; + line-height: $txt-big-line-height; + text-decoration: none; + text-transform: $txt-transform; + letter-spacing: $txt-big-letter-spacing; +} + @mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; + transition: #{$_property} $transition-time; &:hover { #{$_property}: $_toValue; } } + +@mixin hover-title { + &::after { + content: ''; + + position: absolute; + bottom: -8px; + transform-origin: left; + transform: scale(0); + + display: block; + + width: 100%; + height: 1px; + + background-color: $color-accent; + + transition: transform $transition-time; + } + + &:hover { + color: $color-accent; + } + + &:hover::after { + transform: scale(1); + } + + &:focus { + color: $color-focused; + } + + &:focus::after { + transform: scale(1); + background-color: $color-focused; + } + + &:disabled { + color: $color-disabled; + } +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ffb..64f0ed9c3 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,28 @@ -$c-gray: #eee; +$tablet-width: 640px; +$desktop-width: 1024px; +$design-width: 1200px; +$txt-regular-line-height: 150%; +$txt-regular-letter-spacing: -0.01em; +$txt-regular-font-weight: 400; +$txt-regular-font-size: 16px; +$txt-title-font-weight: 500; +$txt-title-line-height: 100%; +$txt-title-letter-spacing: 0.02em; +$txt-big-line-height: 85%; +$txt-big-letter-spacing: -0.05em; +$txt-transform: uppercase; +$txt-color-dark: rgba(28, 26, 38, 1); +$txt-color-light: rgba(255, 255, 255, 1); +$txt-color-title: rgba(127, 128, 150, 1); +$color-accent: rgba(249, 81, 46, 1); +$color-focused: rgba(178, 52, 26, 1); +$color-disabled: rgba(251, 162, 143, 1); +$bg-color: rgba(238, 247, 255, 1); +$button-radius: 32px; +$button-border: 2px; +$transition-time: 0.3s; +$transform-card-scale: 1.01; +$transform-button-scale: 1.04; +$transform-photo-scale: 1.08; +$transform-icon-scale: 1.2; +$transform-logo-scale: 1.1;