diff --git a/source/img/banner_arrow-left.svg b/source/img/banner_arrow-left.svg new file mode 100644 index 00000000..0ffca110 --- /dev/null +++ b/source/img/banner_arrow-left.svg @@ -0,0 +1,3 @@ + + + diff --git a/source/img/banner_arrow-right.svg b/source/img/banner_arrow-right.svg new file mode 100644 index 00000000..75470bb5 --- /dev/null +++ b/source/img/banner_arrow-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/source/img/banner_foot-tablet.png b/source/img/banner_foot-tablet.png new file mode 100644 index 00000000..63c7a607 Binary files /dev/null and b/source/img/banner_foot-tablet.png differ diff --git a/source/img/banner_foot.png b/source/img/banner_foot.png new file mode 100644 index 00000000..7786e869 Binary files /dev/null and b/source/img/banner_foot.png differ diff --git a/source/img/logo-white.svg b/source/img/logo-white.svg new file mode 100644 index 00000000..7a1b28d7 --- /dev/null +++ b/source/img/logo-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/source/img/ozon.svg b/source/img/ozon.svg new file mode 100644 index 00000000..5b39410d --- /dev/null +++ b/source/img/ozon.svg @@ -0,0 +1,3 @@ + + + diff --git a/source/img/popular_arrow-left.svg b/source/img/popular_arrow-left.svg new file mode 100644 index 00000000..81f92986 --- /dev/null +++ b/source/img/popular_arrow-left.svg @@ -0,0 +1,3 @@ + + + diff --git a/source/img/popular_arrow-right.svg b/source/img/popular_arrow-right.svg new file mode 100644 index 00000000..344078cd --- /dev/null +++ b/source/img/popular_arrow-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/source/img/popular_sneaker-first.png b/source/img/popular_sneaker-first.png new file mode 100644 index 00000000..87042ea3 Binary files /dev/null and b/source/img/popular_sneaker-first.png differ diff --git a/source/img/popular_sneaker-second.png b/source/img/popular_sneaker-second.png new file mode 100644 index 00000000..3e946d72 Binary files /dev/null and b/source/img/popular_sneaker-second.png differ diff --git a/source/img/popular_sneaker-third.png b/source/img/popular_sneaker-third.png new file mode 100644 index 00000000..23be38ab Binary files /dev/null and b/source/img/popular_sneaker-third.png differ diff --git a/source/img/reviews_ava-joshi.png b/source/img/reviews_ava-joshi.png new file mode 100644 index 00000000..0fd8f7a0 Binary files /dev/null and b/source/img/reviews_ava-joshi.png differ diff --git a/source/img/reviews_otis-bisnoy.png b/source/img/reviews_otis-bisnoy.png new file mode 100644 index 00000000..3d68956f Binary files /dev/null and b/source/img/reviews_otis-bisnoy.png differ diff --git a/source/img/sbermarket.svg b/source/img/sbermarket.svg new file mode 100644 index 00000000..243519ab --- /dev/null +++ b/source/img/sbermarket.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/source/img/slick_banner-mobile.svg b/source/img/slick_banner-mobile.svg new file mode 100644 index 00000000..aa89314e --- /dev/null +++ b/source/img/slick_banner-mobile.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/source/img/slick_banner.svg b/source/img/slick_banner.svg new file mode 100644 index 00000000..01602db8 --- /dev/null +++ b/source/img/slick_banner.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/source/img/sneaker_banner-first.png b/source/img/sneaker_banner-first.png new file mode 100644 index 00000000..a50da24d Binary files /dev/null and b/source/img/sneaker_banner-first.png differ diff --git a/source/img/sneaker_banner-second.png b/source/img/sneaker_banner-second.png new file mode 100644 index 00000000..cc973cb4 Binary files /dev/null and b/source/img/sneaker_banner-second.png differ diff --git a/source/img/sneaker_banner-third.png b/source/img/sneaker_banner-third.png new file mode 100644 index 00000000..4f6e74e1 Binary files /dev/null and b/source/img/sneaker_banner-third.png differ diff --git a/source/img/tg_icon-white.svg b/source/img/tg_icon-white.svg new file mode 100644 index 00000000..935ca4ac --- /dev/null +++ b/source/img/tg_icon-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/source/img/vk_icon-white.svg b/source/img/vk_icon-white.svg new file mode 100644 index 00000000..79d37a09 --- /dev/null +++ b/source/img/vk_icon-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/source/img/wildberries.svg b/source/img/wildberries.svg new file mode 100644 index 00000000..f83491bb --- /dev/null +++ b/source/img/wildberries.svg @@ -0,0 +1,3 @@ + + + diff --git a/source/img/yandex-market.svg b/source/img/yandex-market.svg new file mode 100644 index 00000000..216eb93f --- /dev/null +++ b/source/img/yandex-market.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/source/sass/blocks/banner.scss b/source/sass/blocks/banner.scss new file mode 100644 index 00000000..cf7c8b3d --- /dev/null +++ b/source/sass/blocks/banner.scss @@ -0,0 +1,80 @@ +.banner { + &__title { + color: white; + text-align: center; + font-size: 24px; + font-weight: 500; + line-height: 29px; + + @media (min-width: 768px) { + font-size: 58px; + line-height: 70px; + } + + @media (min-width: 1728px) { + text-align: start; + } + } + + &__button { + display: block; + width: 300px; + height: 48px; + text-align: center; + background-color: white; + color: #DC4B54; + font-weight: 700; + font-size: 20px; + line-height: 24px; + padding: 12px 114px; + margin: 0 auto; + + @media (min-width: 768px) { + width: 219px; + height: 66px; + font-size: 28px; + line-height: 34px; + padding: 16px 59px; + margin-top: 81px; + } + + @media (min-width: 1728px) { + margin-left: 0; + margin-top: 33px; + } + } + + &__sneakershoe-wrapper { + display: flex; + gap: 42px; + margin-top: 50px; + margin-bottom: 25px; + justify-content: center; + + @media (min-width: 1728px) { + justify-content: start; + } + } + + &__sneakershoe { + position: relative; + background-color: white; + width: 71px; + height: 71px; + border-radius: 8px; + } + + &__sneakershoe-img { + position: absolute; + right: -19px; + bottom: -11px; + width: 105px; + height: 105px; + filter: drop-shadow(0px 2.77px 2.21px #00000005) + drop-shadow(6.65px 5.32px 0px #00000007) + drop-shadow(0px 12.52px 10.02px #00000009) + drop-shadow(0px 22.34px 17.87px #0000000B) + drop-shadow(0px 41.78px 33.42px #0000000D) + drop-shadow(0px 100px 80px #00000012); + } +} diff --git a/source/sass/blocks/banners.scss b/source/sass/blocks/banners.scss new file mode 100644 index 00000000..aead39db --- /dev/null +++ b/source/sass/blocks/banners.scss @@ -0,0 +1,108 @@ +.banners { + + &__container { + background-color: #DC4B54; + margin-top: 49px; + margin-bottom: 40px; + padding: 40px 11px 20px; + position: relative; + background-image: url("../img/slick_banner.svg"); + background-repeat: no-repeat; + background-size: 100%; + background-position: left bottom; + + @media (min-width: 768px) { + padding-bottom: 140px; + margin-top: 100px; + margin-bottom: 91px; + background-size: 95%; + + &::before { + position: absolute; + background-image: url("../img/banner_foot-tablet.png"); + background-repeat: no-repeat; + width: 499px; + height: 499px; + left: 2%; + bottom: 0; + content: ''; + z-index: 1; + filter: drop-shadow(0px -20px 94.5px #00000033); + } + } + + @media (min-width: 1728px) { + margin-top: 155px; + margin-bottom: 124px; + background-size: 58%; + padding-bottom: 100px; + + &::before { + position: absolute; + background-image: url("../img/banner_foot.png"); + background-repeat: no-repeat; + width: 803px; + height: 803px; + left: -100px; + bottom: 0px; + content: ''; + filter: drop-shadow(0px -20px 94.5px #00000033); + } + } + + &--blue { + background-color: #4169E1; + } + + &--green { + background-color: #2E8B57; + } + } + + + &__list { + @include clear-list; + + position: relative; + z-index: 2; + } + + &__slider { + @media (min-width: 1728px) { + margin-left: 48%; + margin-top: 48px; + } + } + + &__slider-wrapper { + @media (min-width: 768px) { + position: absolute; + bottom: 22px; + right: 22px; + } + } + + &__slider-box-arrow-icon-left { + background-image: url(../img/banner_arrow-left.svg); + background-repeat: no-repeat; + position: absolute; + width: 20px; + height: 20px; + left: 25px; + bottom: 46%; + + @media (min-width: 1728px) { + bottom: 47%; + } + } + + &__slider-box-arrow-icon-right { + background-image: url(../img/banner_arrow-right.svg); + background-repeat: no-repeat; + position: absolute; + width: 20px; + height: 20px; + right: 25px; + bottom: 46%; + } +} diff --git a/source/sass/blocks/footer.scss b/source/sass/blocks/footer.scss new file mode 100644 index 00000000..a708a6a9 --- /dev/null +++ b/source/sass/blocks/footer.scss @@ -0,0 +1,195 @@ +.footer { + &__container { + background-color: black; + color: white; + padding: 15px 10px 20px; + + @media (min-width: 768px) { + padding: 30px 20px 51px; + } + + @media (min-width: 1728px) { + padding: 85px 84px 30px 84px; + } + } + + &__slogan { + text-transform: capitalize; + font-size: 14px; + line-height: 21px; + margin-top: 10px; + margin-bottom: 15px; + + @media (min-width: 768px) { + font-size: 18px; + line-height: 28px; + margin-top: 20px; + margin-bottom: 35px; + min-width: 409px; + } + + @media (min-width: 1728px) { + margin-bottom: 55px; + margin-top: 47px; + } + } + + &__social { + gap: 30px; + } + + &__rights { + font-size: 18px; + line-height: 22px; + text-align: center; + display: block; + margin-bottom: 0; + margin-top: 115px; + position: relative; + font-weight: 400; + + &::before { + display: block; + width: 66px; + height: 1px; + background-color: white; + margin: 9px; + margin: 0 auto; + transform: translateY(-38px); + content: ''; + } + + @media (min-width: 768px) { + margin-top: 100px; + } + + @media (min-width: 1728px) { + margin-top: 122px; + } + } + + &__subscribe { + background-color: white; + border-radius: 10px; + width: 300px; + height: 47px; + padding: 15px; + display: flex; + margin: 0 auto; + + &::before { + display: inline-block; + content: ''; + width: 1px; + height: 18px; + background-color: black; + order: 1; + } + + @media (min-width: 768px) { + width: 477px; + height: 61px; + padding: 20px 20px 20px 37px; + + &::before { + transform: translateY(2px); + } + } + } + + &__email { + @include clear-input; + + width: 152px; + font-size: 14px; + line-height: 17px; + font-weight: 500; + margin-right: 11px; + + @media (min-width: 768px) { + width: 302px; + } + } + + &__button-subscribe { + @include clear-button; + + order: 2; + font-size: 14px; + line-height: 17px; + font-weight: 500; + margin-left: 15px; + + @media (min-width: 768px) { + font-size: 18px; + line-height: 22px; + margin-left: 21px; + } + } + + &__subscribe-description { + font-size: 20px; + line-height: 24px; + margin-bottom: 15px; + margin-top: 35px; + text-align: center; + + @media (min-width: 768px) { + font-size: 24px; + line-height: 29px; + margin-top: 59px; + } + + @media (min-width: 1728px) { + margin-top: 0; + } + } + + &__menu { + @include clear-list; + + display: flex; + flex-direction: column; + gap: 17px; + font-size: 18px; + line-height: 22px; + font-weight: 400; + } + + &__menu-name { + font-size: 20px; + line-height: 24px; + font-weight: 500; + margin-bottom: 23px; + margin-top: 0; + } + + &__links { + @media (max-width: 767px) { + display: none; + } + + @media (min-width: 1728px) { + order: 2; + } + } + + &__content { + @media (min-width: 768px) { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + } + } + + &__subscribe-wrapper { + @media (min-width: 768px) and (max-width: 1727px) { + width: 100%;; + } + + @media (min-width: 1728px) { + order: 1; + transform: translateX(-20%); + } + } +} diff --git a/source/sass/blocks/marketplace.scss b/source/sass/blocks/marketplace.scss new file mode 100644 index 00000000..28c6903f --- /dev/null +++ b/source/sass/blocks/marketplace.scss @@ -0,0 +1,88 @@ +.marketplace { + + &__row-container { + display: flex; + background-color: black; + width: 100%; + overflow: hidden; + + @media (min-width: 1728px) { + display: block; + } + } + + &__list { + @include clear-list; + + display: flex; + flex-wrap: nowrap; + justify-content: space-between; + margin: 21px 0px; + animation-name: scrolling-marketplace; + animation-duration: 10s; + animation-iteration-count: infinite; + animation-timing-function: linear; + + @media (min-width: 768px) { + margin: 44px 0px 44px -15px; + animation-duration: 15s; + } + + @media (min-width: 1728px) { + margin: 56px 0px 66px -15px; + animation: none; + } + } + + &__list-anim { + @include clear-list; + + display: flex; + flex-wrap: nowrap; + justify-content: space-between; + margin: 21px 0px; + animation-name: scrolling-marketplace; + animation-duration: 10s; + animation-iteration-count: infinite; + animation-timing-function: linear; + + @media (min-width: 768px) { + margin: 44px 0px 44px -15px; + animation-duration: 15s; + } + + @media (min-width: 1728px) { + display: none; + } + } + + &__item img { + height: 16px; + + @media (min-width: 768px) { + height: 40px; + } + } + + &__item a { + padding: 22px 20px; + + @media (min-width: 768px) { + padding: 70px 100px 44px 100px; + } + + @media (min-width: 1728px) { + padding: 81px 100px 63px 100px; + } + } + + @keyframes scrolling-marketplace { + from { + transform: translateX(0); + } + + to { + transform: translateX(-100%); + } + } +} diff --git a/source/sass/blocks/popular.scss b/source/sass/blocks/popular.scss new file mode 100644 index 00000000..94e61908 --- /dev/null +++ b/source/sass/blocks/popular.scss @@ -0,0 +1,153 @@ +.popular { + + &__container { + margin-top: 57px; + + @media (min-width: 768px) { + display: flex; + justify-content: center; + gap: 87px; + margin-top: 93px; + } + + @media (min-width: 1728px) { + gap: 144px; + margin-top: 159px; + } + } + + &__title { + font-size: 24px; + line-height: 29px; + font-weight: 500; + margin-bottom: 12px; + text-transform: capitalize; + + &::before { + display: inline-block; + width: 47px; + height: 3px; + background-color: black; + margin-right: 22px; + transform: translateY(-6px); + content: ''; + } + } + + &__product-list { + @include clear-list; + + margin-bottom: 18px; + + @media (min-width: 768px) { + margin-bottom: 30px; + } + + @media (min-width: 1728px) { + display: flex; + gap: 67px; + } + } + + &__text { + font-size: 45px; + font-weight: 500; + line-height: 54px; + } + + &__description { + font-size: 18px; + font-weight: 500; + line-height: 22px; + color: rgba(0, 0, 0, 0.75); + margin-top: 24px; + text-transform: capitalize; + } + + &__wrapper-title { + margin-bottom: 34px; + + @media (min-width: 768px) { + max-width: 290px; + } + } + + &__show-all { + box-shadow: 0px 2.77px 2.21px 0px #00000005, + 0px 6.65px 5.32px 0px #00000007, + 0px 12.52px 10.02px 0px #00000009, + 0px 22.34px 17.87px 0px #0000000B, + 0px 41.78px 33.42px 0px #0000000D, + 0px 100px 80px 0px #00000012; + margin: 0 auto; + + @media (max-width: 767px) { + font-size: 20px; + line-height: 31px; + width: 300px; + height: 55px; + padding: 12px 43px; + } + + @media (min-width: 768px) { + margin: 0; + margin-top: 27px; + } + + &--mobile { + @media (min-width: 768px) { + display: none; + } + } + + &--tablet { + @media (max-width: 767px) { + display: none; + } + } + } + + &__slider { + margin-bottom: 30px; + } + + &__slider-box { + position: relative; + } + + &__slider-box-arrow-icon-left { + + @media (min-width: 768px) { + position: absolute; + background-image: url("../img/popular_arrow-left.svg"); + background-repeat: no-repeat; + width: 15px; + height: 27px; + left: -35px; + top: 184px; + content: ''; + } + + @media (min-width: 1728px) { + left: -50px; + } + } + + &__slider-box-arrow-icon-right { + + @media (min-width: 768px) { + position: absolute; + background-image: url("../img/popular_arrow-right.svg"); + background-repeat: no-repeat; + width: 15px; + height: 27px; + right: -35px; + top: 184px; + content: ''; + } + + @media (min-width: 1728px) { + right: -50px; + } + } +} diff --git a/source/sass/blocks/reviews.scss b/source/sass/blocks/reviews.scss new file mode 100644 index 00000000..0ec077ba --- /dev/null +++ b/source/sass/blocks/reviews.scss @@ -0,0 +1,115 @@ +.reviews { + &__list { + @include clear-list; + + display: flex; + flex-direction: column; + gap: 20px; + margin-bottom: 50px; + + @media (min-width: 1728px) { + flex-direction: row; + gap: 68px; + } + } + + &__title { + font-size: 32px; + line-height: 44px; + font-weight: 500; + text-align: center; + margin-bottom: 38px; + margin-top: 70px; + + &::before, + &::after { + display: inline-block; + width: 41px; + height: 3px; + background-color: black; + margin: 9px; + transform: translateY(-2px); + content: ''; + } + + @media (min-width: 768px) { + margin-bottom: 21px; + } + + @media (min-width: 1728px) { + margin-bottom: 51px; + } + + span { + @media (max-width: 767px) { + display: none; + } + } + } + + &__avatar { + width: 54px; + height: 75px; + box-shadow: 0px 2.77px 2.21px 0px #00000005, + 0px 6.65px 5.32px 0px #00000007, + 0px 12.52px 10.02px 0px #00000009, + 0px 22.34px 17.87px 0px #0000000B, + 0px 41.78px 33.42px 0px #0000000D, + 0px 100px 80px 0px #00000012; + float: left; + margin-right: 20px; + margin-bottom: 20px; + + @media (min-width: 768px) { + width: 130px; + height: 180px; + margin-right: 52px; + } + } + + &__item { + padding: 25px; + background-color: #F3F3F3; + border-radius: 25px; + border: 2px solid #DEDEDE; + + @media (min-width: 768px) { + padding: 78px 67px; + } + } + + &__text { + font-size: 18px; + line-height: 25px; + color: rgba(0, 0, 0, 0.75); + margin-bottom: 0px; + } + + &__name { + font-size: 28px; + font-weight: 500; + line-height: 39px; + margin: 0; + } + + &__rating { + margin-bottom: 46px; + display: flex; + gap: 10px; + + @media (min-width: 768px) { + margin-bottom: 8px; + } + } + + &__rating-star { + background-color: #FFB800; + width: 19px; + height: 19px; + clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); + + &--half { + clip-path: polygon(50% 0, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); + } + } +} diff --git a/source/sass/blocks/show-all.scss b/source/sass/blocks/show-all.scss new file mode 100644 index 00000000..326582af --- /dev/null +++ b/source/sass/blocks/show-all.scss @@ -0,0 +1,12 @@ +.show-all { + font-size: 28px; + font-weight: 600; + line-height: 43px; + background-color: black; + color: white; + padding: 17px 50px; + display: block; + width: 290px; + height: 77px; + text-align: center; +} diff --git a/source/sass/blocks/slider-pagination.scss b/source/sass/blocks/slider-pagination.scss new file mode 100644 index 00000000..1b87ab8c --- /dev/null +++ b/source/sass/blocks/slider-pagination.scss @@ -0,0 +1,23 @@ +.slider-pagination { + display: flex; + gap: 20px; + justify-content: center; + + &__button { + @include clear-button; + + background-color: black; + width: 11px; + height: 11px; + border-radius: 50%; + + &--big { + width: 30px; + border-radius: 20px; + } + } + + &--white button { + background-color: white; + } +} diff --git a/source/sass/blocks/social.scss b/source/sass/blocks/social.scss new file mode 100644 index 00000000..c5ccb34a --- /dev/null +++ b/source/sass/blocks/social.scss @@ -0,0 +1,6 @@ +.social { + @include clear-list; + + display: flex; + gap: 20px; +} diff --git a/source/sass/common/clear-input.scss b/source/sass/common/clear-input.scss new file mode 100644 index 00000000..acc5cf02 --- /dev/null +++ b/source/sass/common/clear-input.scss @@ -0,0 +1,13 @@ +@mixin clear-input { + font-family: inherit; + font-size: inherit; + background-color: transparent; + background-image: none; + box-shadow: none; + border: none; + border-radius: 0; + margin: 0; + padding: 0; + appearance: none; + outline: none; +} diff --git a/source/sass/style.scss b/source/sass/style.scss index 387357a4..1326b94d 100644 --- a/source/sass/style.scss +++ b/source/sass/style.scss @@ -1,5 +1,20 @@ @import 'common/fonts.scss'; @import 'common/clear-button.scss'; @import 'common/clear-list.scss'; - @import 'root.scss'; +@import 'common/clear-input.scss'; +@import 'root.scss'; +@import 'blocks/container.scss'; +@import 'blocks/header.scss'; +@import 'blocks/show-all.scss'; +@import 'blocks/banner.scss'; +@import 'blocks/slider-pagination.scss'; +@import 'blocks/social.scss'; +@import 'blocks/hero.scss'; +@import 'blocks/banners.scss'; +@import 'blocks/popular.scss'; +@import 'blocks/reviews.scss/'; +@import 'blocks/product.scss'; +@import 'blocks/best-selling.scss'; +@import 'blocks/marketplace.scss'; +@import 'blocks/footer.scss';