diff --git a/catalog.html b/catalog.html new file mode 100644 index 0000000..8897b59 --- /dev/null +++ b/catalog.html @@ -0,0 +1,436 @@ + + + + + + + + Catalog + + + + + +
+
+
+ + search +
+
+ + + profile + +
+ + shop + 5 + +
+
+
+
+
+
+
+
+

NEW ARRIVALS

+
+ + +
    +
  • + HOME +
    • +
  • + MEN +
    • +
  • + NEW ARRIVALS +
    • +
+
+ +
+ +
+
+
+
+ FILTER + filter + +
+ +
+ CATEGORY +
    +
  • Accessories
    • +
  • Bags
    • +
  • Denim
    • +
  • Hoodies & Sweatshirts
    • +
  • Jackets & Coats
    • +
  • Polos
    • +
  • Shirts
    • +
  • Shoes
    • +
  • Sweaters & Knits
    • +
  • T-Shirts
    • +
  • Tanks
    • +
+
+ +
+ BRAND +
+ +
+ DESIGNER +
+ +
+
+
+ +
+
+ TRENDING NOW filter +
+ + +
+ SIZE filter +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ +
+ +
+ PRICE filter + +
+
+
+
+ +
+ +
+
+ cards +
+ +
+
+ +

ELLERY X M'O CAPSULE

+ +

+ Known for her sculptural takes on traditional tailoring, Australian arbiter of cool Kym + Ellery teams up with Moda Operandi. +

+ + $52.00 + +
+
+ +
+ cards +
+ +
+
+ +

ELLERY X M'O CAPSULE

+ +

+ Known for her sculptural takes on traditional tailoring, Australian arbiter of cool Kym + Ellery teams up with Moda Operandi. +

+ + $52.00 + +
+
+ +
+ cards +
+ +
+
+ +

ELLERY X M'O CAPSULE

+ +

+ Known for her sculptural takes on traditional tailoring, Australian arbiter of cool Kym + Ellery teams up with Moda Operandi. +

+ + $52.00 + +
+
+ +
+ cards +
+ +
+
+ +

ELLERY X M'O CAPSULE

+ +

+ Known for her sculptural takes on traditional tailoring, Australian arbiter of cool Kym + Ellery teams up with Moda Operandi. +

+ + $52.00 + +
+
+ +
+ cards +
+ +
+
+ +

ELLERY X M'O CAPSULE

+ +

+ Known for her sculptural takes on traditional tailoring, Australian arbiter of cool Kym + Ellery teams up with Moda Operandi. +

+ + $52.00 + +
+
+ +
+ cards +
+ +
+
+ +

ELLERY X M'O CAPSULE

+ +

+ Known for her sculptural takes on traditional tailoring, Australian arbiter of cool Kym + Ellery teams up with Moda Operandi. +

+ + $52.00 + +
+
+ +
+ cards +
+ +
+
+ +

ELLERY X M'O CAPSULE

+ +

+ Known for her sculptural takes on traditional tailoring, Australian arbiter of cool Kym + Ellery teams up with Moda Operandi. +

+ + $52.00 + +
+
+ +
+ cards +
+ +
+
+ +

ELLERY X M'O CAPSULE

+ +

+ Known for her sculptural takes on traditional tailoring, Australian arbiter of cool Kym + Ellery teams up with Moda Operandi. +

+ + $52.00 + +
+
+ +
+ cards +
+ +
+
+ +

ELLERY X M'O CAPSULE

+ +

+ Known for her sculptural takes on traditional tailoring, Australian arbiter of cool Kym + Ellery teams up with Moda Operandi. +

+ + $52.00 + +
+ + + + + +
+ + + +
+ + +
+ +
+
+
+
+ icon +

Free Delivery

+

Worldwide delivery on all. Authorit tively morph next-generation + innov + tion + with extensive models.

+
+ +
+ icon +

Sales & discounts

+

Worldwide delivery on all. Authorit tively morph next-generation + innov + tion + with extensive models.

+
+ +
+ icon +

Quality assurance

+

Worldwide delivery on all. Authorit tively morph next-generation + innov + tion + with extensive models.

+
+
+
+
+ +
+ + + + + + \ No newline at end of file diff --git a/img/Rectangle 26.png b/img/Rectangle 26.png new file mode 100644 index 0000000..41d6ec7 Binary files /dev/null and b/img/Rectangle 26.png differ diff --git a/img/Vector -right.svg b/img/Vector -right.svg new file mode 100644 index 0000000..12ef11b --- /dev/null +++ b/img/Vector -right.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/Vector-left.svg b/img/Vector-left.svg new file mode 100644 index 0000000..17eff57 --- /dev/null +++ b/img/Vector-left.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/Vector-left1.svg b/img/Vector-left1.svg new file mode 100644 index 0000000..554bea2 --- /dev/null +++ b/img/Vector-left1.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/Vector-right.svg b/img/Vector-right.svg new file mode 100644 index 0000000..73181c2 --- /dev/null +++ b/img/Vector-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/Vector.png b/img/Vector.png new file mode 100644 index 0000000..35f1350 Binary files /dev/null and b/img/Vector.png differ diff --git a/img/acs_offer.jpg b/img/acs_offer.jpg new file mode 100644 index 0000000..2070cc6 Binary files /dev/null and b/img/acs_offer.jpg differ diff --git a/img/acs_offer.png b/img/acs_offer.png new file mode 100644 index 0000000..1f067b3 Binary files /dev/null and b/img/acs_offer.png differ diff --git a/img/bcg.png b/img/bcg.png new file mode 100644 index 0000000..90cc7ee Binary files /dev/null and b/img/bcg.png differ diff --git a/img/bcg_acs.png b/img/bcg_acs.png new file mode 100644 index 0000000..3590226 Binary files /dev/null and b/img/bcg_acs.png differ diff --git a/img/cards_1.jpg b/img/cards_1.jpg new file mode 100644 index 0000000..e1c4bd5 Binary files /dev/null and b/img/cards_1.jpg differ diff --git a/img/cards_2.jpg b/img/cards_2.jpg new file mode 100644 index 0000000..c617020 Binary files /dev/null and b/img/cards_2.jpg differ diff --git a/img/cards_3.jpg b/img/cards_3.jpg new file mode 100644 index 0000000..4824a8e Binary files /dev/null and b/img/cards_3.jpg differ diff --git a/img/cards_4.jpg b/img/cards_4.jpg new file mode 100644 index 0000000..6aa1a02 Binary files /dev/null and b/img/cards_4.jpg differ diff --git a/img/cards_5.jpg b/img/cards_5.jpg new file mode 100644 index 0000000..a745aee Binary files /dev/null and b/img/cards_5.jpg differ diff --git a/img/cards_6.jpg b/img/cards_6.jpg new file mode 100644 index 0000000..ab07295 Binary files /dev/null and b/img/cards_6.jpg differ diff --git a/img/filter.png b/img/filter.png new file mode 100644 index 0000000..2021c34 Binary files /dev/null and b/img/filter.png differ diff --git a/img/footer__bcg.png b/img/footer__bcg.png new file mode 100644 index 0000000..41d6ec7 Binary files /dev/null and b/img/footer__bcg.png differ diff --git a/img/footer__img.png b/img/footer__img.png new file mode 100644 index 0000000..c1d6a58 Binary files /dev/null and b/img/footer__img.png differ diff --git a/img/icon__deliv.png b/img/icon__deliv.png new file mode 100644 index 0000000..fc432e2 Binary files /dev/null and b/img/icon__deliv.png differ diff --git a/img/icon__deliv.svg b/img/icon__deliv.svg new file mode 100644 index 0000000..e49539a --- /dev/null +++ b/img/icon__deliv.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/icon__qual.png b/img/icon__qual.png new file mode 100644 index 0000000..cc6bebe Binary files /dev/null and b/img/icon__qual.png differ diff --git a/img/icon__qual.svg b/img/icon__qual.svg new file mode 100644 index 0000000..d917da8 --- /dev/null +++ b/img/icon__qual.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/icon__sale.png b/img/icon__sale.png new file mode 100644 index 0000000..218431b Binary files /dev/null and b/img/icon__sale.png differ diff --git a/img/icon__sale.svg b/img/icon__sale.svg new file mode 100644 index 0000000..eabc2d6 --- /dev/null +++ b/img/icon__sale.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/kids_offer.jpg b/img/kids_offer.jpg new file mode 100644 index 0000000..c622399 Binary files /dev/null and b/img/kids_offer.jpg differ diff --git a/img/lady__footer.png b/img/lady__footer.png new file mode 100644 index 0000000..5dc4b81 Binary files /dev/null and b/img/lady__footer.png differ diff --git a/img/logo.svg b/img/logo.svg new file mode 100644 index 0000000..be0b043 --- /dev/null +++ b/img/logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/img/man.png b/img/man.png new file mode 100644 index 0000000..3857b2f Binary files /dev/null and b/img/man.png differ diff --git a/img/man_catalog_1.jpg b/img/man_catalog_1.jpg new file mode 100644 index 0000000..e1c4bd5 Binary files /dev/null and b/img/man_catalog_1.jpg differ diff --git a/img/man_catalog_2.jpg b/img/man_catalog_2.jpg new file mode 100644 index 0000000..eefe2cd Binary files /dev/null and b/img/man_catalog_2.jpg differ diff --git a/img/man_catalog_3.jpg b/img/man_catalog_3.jpg new file mode 100644 index 0000000..4824a8e Binary files /dev/null and b/img/man_catalog_3.jpg differ diff --git a/img/man_catalog_4.jpg b/img/man_catalog_4.jpg new file mode 100644 index 0000000..6aa1a02 Binary files /dev/null and b/img/man_catalog_4.jpg differ diff --git a/img/man_catalog_5.jpg b/img/man_catalog_5.jpg new file mode 100644 index 0000000..aea1053 Binary files /dev/null and b/img/man_catalog_5.jpg differ diff --git a/img/man_catalog_6.jpg b/img/man_catalog_6.jpg new file mode 100644 index 0000000..deb6e9b Binary files /dev/null and b/img/man_catalog_6.jpg differ diff --git a/img/man_catalog_7.jpg b/img/man_catalog_7.jpg new file mode 100644 index 0000000..fade40b Binary files /dev/null and b/img/man_catalog_7.jpg differ diff --git a/img/man_catalog_8.jpg b/img/man_catalog_8.jpg new file mode 100644 index 0000000..4dd3fd9 Binary files /dev/null and b/img/man_catalog_8.jpg differ diff --git a/img/man_catalog_9.jpg b/img/man_catalog_9.jpg new file mode 100644 index 0000000..8c14f06 Binary files /dev/null and b/img/man_catalog_9.jpg differ diff --git a/img/man_offer.jpg b/img/man_offer.jpg new file mode 100644 index 0000000..7a72929 Binary files /dev/null and b/img/man_offer.jpg differ diff --git a/img/menu.svg b/img/menu.svg new file mode 100644 index 0000000..6d9546f --- /dev/null +++ b/img/menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/poster.jpg b/img/poster.jpg new file mode 100644 index 0000000..b4d4274 Binary files /dev/null and b/img/poster.jpg differ diff --git a/img/product.png b/img/product.png new file mode 100644 index 0000000..0a5e32b Binary files /dev/null and b/img/product.png differ diff --git a/img/profile.svg b/img/profile.svg new file mode 100644 index 0000000..0abd122 --- /dev/null +++ b/img/profile.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/search.svg b/img/search.svg new file mode 100644 index 0000000..cf53b9d --- /dev/null +++ b/img/search.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/shop-pink.svg b/img/shop-pink.svg new file mode 100644 index 0000000..d0322b0 --- /dev/null +++ b/img/shop-pink.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/shop.svg b/img/shop.svg new file mode 100644 index 0000000..6a29cde --- /dev/null +++ b/img/shop.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/video.mp4 b/img/video.mp4 new file mode 100644 index 0000000..fd1af81 Binary files /dev/null and b/img/video.mp4 differ diff --git a/img/woman_offer.jpg b/img/woman_offer.jpg new file mode 100644 index 0000000..339fca5 Binary files /dev/null and b/img/woman_offer.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..bae9182 --- /dev/null +++ b/index.html @@ -0,0 +1,311 @@ + + + + + + + + SHOP + + + + + + +
+
+ + +
+
+ +
+
+
+
+

THE BRAND +

+

OF LUXERIOUS FASHION

+ +
+
+
+ +
+
+
+
+ 30% OFF +

FOR WOMAN

+
+
+ +
+
+ HOT DEAL +

FOR MEN

+
+
+ +
+
+ NEW ARRIVALS +

FOR KIDS

+
+
+ +
+
+ LUXIROUS & TRENDY +

ACCESORIES

+
+
+
+ +
+ + + +
+
+

Fetured Items

+ Shop for items based on what we featured in this week +
+ +
+ +
+ cards +
+ +
+
+ +

ELLERY X M'O CAPSULE

+ +

+ Known for her sculptural takes on traditional tailoring, Australian arbiter of cool Kym + Ellery teams up with Moda Operandi. +

+ + $52.00 + +
+
+ +
+ cards +
+ +
+
+ +

ELLERY X M'O CAPSULE

+ +

+ Known for her sculptural takes on traditional tailoring, Australian arbiter of cool Kym + Ellery teams up with Moda Operandi. +

+ + $52.00 + +
+
+ +
+ cards +
+ +
+
+ +

ELLERY X M'O CAPSULE

+ +

+ Known for her sculptural takes on traditional tailoring, Australian arbiter of cool Kym + Ellery teams up with Moda Operandi. +

+ + $52.00 + +
+
+ +
+ cards +
+ +
+
+ +

ELLERY X M'O CAPSULE

+ +

+ Known for her sculptural takes on traditional tailoring, Australian arbiter of cool Kym + Ellery teams up with Moda Operandi. +

+ + $52.00 + +
+
+ +
+ cards +
+ +
+
+ +

ELLERY X M'O CAPSULE

+ +

+ Known for her sculptural takes on traditional tailoring, Australian arbiter of cool Kym + Ellery teams up with Moda Operandi. +

+ + $52.00 + +
+
+ +
+ cards +
+ +
+
+ +

ELLERY X M'O CAPSULE

+ +

+ Known for her sculptural takes on traditional tailoring, Australian arbiter of cool Kym + Ellery teams up with Moda Operandi. +

+ + $52.00 + +
+
+
+ +
+ Browse All Product + +
+
+ +
+
+
+
+ icon +

Free Delivery

+

Worldwide delivery on all. Authorit tively morph next-generation + innov + tion + with extensive models.

+
+ +
+ icon +

Sales & discounts

+

Worldwide delivery on all. Authorit tively morph next-generation + innov + tion + with extensive models.

+
+ +
+ icon +

Quality assurance

+

Worldwide delivery on all. Authorit tively morph next-generation + innov + tion + with extensive models.

+
+
+
+
+ +
+ + + + + + + + + \ No newline at end of file diff --git a/product.html b/product.html new file mode 100644 index 0000000..a66a539 --- /dev/null +++ b/product.html @@ -0,0 +1,250 @@ + + + + + + + + Product + + + + + + +
+
+
+ + search +
+
+ + + profile + +
+ + shop + 5 + +
+
+
+
+
+
+
+
+

NEW ARRIVALS

+
+ + +
    +
  • + HOME +
    • +
  • + MEN +
    • +
  • + NEW ARRIVALS +
    • +
+
+ +
+ +
+ slide + + +
+
+
+
+

WOMEN COLLECTION

+
+

MOSCHINO CHEAP AND CHIC

+ +

Compellingly actualize fully researched processes before proactive outsourcing. + Progressively + syndicate collaborative architectures before cutting-edge services. Completely visualize + parallel + core competencies rather than exceptional portals.

+ +

$561

+
+ + +
+
+
+
+ CHOOSE COLOR filter + +
+ + +
+ CHOOSE SIZEfilter + +
+ +
+ QUANTITYfilter + +
+
+
+
+ + + + + +
+
+ + + + +
+
+ cards +
+ +
+
+ +

ELLERY X M'O CAPSULE

+ +

+ Known for her sculptural takes on traditional tailoring, Australian arbiter of cool Kym + Ellery teams up with Moda Operandi. +

+ + $52.00 + +
+
+ +
+ + +
+ +

ELLERY X M'O CAPSULE

+ +

+ Known for her sculptural takes on traditional tailoring, Australian arbiter of cool Kym + Ellery teams up with Moda Operandi. +

+ + $52.00 + +
+
+ +
+ cards +
+ +
+
+ +

ELLERY X M'O CAPSULE

+ +

+ Known for her sculptural takes on traditional tailoring, Australian arbiter of cool Kym + Ellery teams up with Moda Operandi. +

+ + $52.00 + +
+
+
+ + +
+ + + + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..6139428 --- /dev/null +++ b/style.css @@ -0,0 +1,857 @@ +* { + margin: 0; + padding: 0; +} + +body { + font-family: Lato; +} +.container { + max-width: 1140px; + padding: 0 10px; + width: 100%; + margin: 0 auto; +} + + + + + + + + +.header { + padding: 18px 0; + background-color: #222222; + text-decoration: none; +} + +.header__wrap { + display: flex; + justify-content: space-between; +} + +.header__right { + display: flex; + align-items: center; +} +.header__logo { + margin-right: 41px; +} + +.header__item { + margin-left: 25px; +} + +.shop { + margin-left: 42px; + position: relative; + width: 32px; + height: 29px; +} +.count { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + right: -10px; + top: -10px; + width: 19px; + height: 19px; + background: #F16D7F; + border-radius: 50%; + font-size: 12px; + line-height: 14px; + color: #FFFFFF; +} + +.intro { + height: 764px; + background-color: #F1E4E6; + margin: 0 0 65px 0; +} + +.intro__wrap { + height: 100%; + display: flex; + align-items: center; + justify-content: flex-end; + background-image: url('./img/man.png'); + background-repeat: no-repeat; + background-position: -208px bottom; +} + +.intro__text { + max-width: 377px; + padding-left: 16px; + border-left: 12px solid #F16D7F; + color: #222222; + font-style: normal; + font-weight: 900; +} + +.intro__h1 { + font-size: 48px; + line-height: 58px; +} + +.intro__h2 { + font-size: 30px; +} + +.decor { + color: #F16D7F; +} + +.category { + +} + +.category__wrap { + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.category__item { + display: flex; + align-items: center; + justify-content: center; + text-align: center; + width: 100%; + height: 180px; + +} + +.category__item:not(:last-child) { + width: 360px; + margin: 0 0 30px 0; + height: 260px; +} + +.category__text { + font-style: normal; + font-weight: normal; + font-size: 16px; + line-height: 19px; + color: #FFFFFF; +} + +.decor { + padding: 5px 0 0 0; +} +.woman__item { + background: url('./img/bcg.png'), + url('./img/woman_offer.jpg'); +} + +.men__item { + background: url('./img/bcg.png'), + url('./img/man_offer.jpg'); +} + +.kids__item { + background: url('./img/bcg.png'), + url('./img/kids_offer.jpg'); +} + +.acs__item { + background: url('./img/bcg_acs.png') no-repeat, + url('./img/acs_offer.jpg') no-repeat; +} + +.cards__header { + margin: 96px 0 18px 0; + align-items: center; + justify-content: center; + text-align: center; +} + +.cards__header__top { + font-size: 30px; + line-height: 36px; + color: #222222; +} + +.cards__header__text { + font-size: 14px; + line-height: 17px; + color: #9F9F9F; +} + +.cards__wrap { + display: flex; + flex-flow: row wrap; + justify-content: space-between; +} + + +.cards__box { + display: flex; + flex-wrap: wrap; + width: 360px; + height: 581px; + margin: 30px 0 0 0; + background: #F8F8F8; + position: relative; + overflow: hidden; + +} + + +.cards__box:hover { + box-shadow: 0px 5px 8px 0px rgba(0, 0, 0, 0.15); + } + +.cards__box__shadow { + position: absolute; + top: 0; + left: 0; + right: 0; + height: 420px; + background-color: rgba(58, 56, 56, 0.83); + display: flex; + justify-content: center; + align-items: center; + opacity: 0; + +} + +.cards__box:hover .cards__box__shadow { + opacity: 1; +} + +.cards__box__shadow__btn { + display: flex; + background:none; + padding: 13px 16px 13px 13px; + font-size: 14px; + line-height: 17px; + color: #FFFFFF; + border: 1px solid #FFFFFF; + align-items: center; + cursor: pointer; +} + +.btn__icon { + padding-right: 11px; +} + +.cards__img { + height: 420px; +} + +.cards__text { + height: 100%; + padding: 24px 28px 20px 16px; +} + +.cards__name { + font-size: 13px; + line-height: 16px; + text-decoration: none; + color: #000000; +} + +.cards__content { + padding: 12px 0 18px 0; + font-weight: 300; + font-size: 14px; + line-height: 17px; + color: #5D5D5D; +} + +.cards__price { + font-size: 16px; + line-height: 19px; + color: #F16D7F; +} + +.cards__button { + display: flex; + justify-content: center; + margin: 48px 0 95px 0; +} + +.button__text:hover { + color: #E1E1E1; + background: #F16D7F; +} + +.button__text { + font-size: 16px; + line-height: 19px; + color: #F26376; + padding: 14px 38px; + border: 1px solid #FF6A6A; + text-decoration: none; +} + +.footer { + background: #222224; +} + +.footer__wrap{ + display: flex; + flex-direction:column; +} + +.privelege { + background: #222224; +} + +.privelege__wrap{ + display: flex; + flex-direction:column; +} + + +.privelege__main { + display: flex; + justify-content: space-between; + padding: 103px 0 104px 0; +} + +.privelege__box { + color: #FBFBFB; + justify-content: space-between; + text-align: center; + +} + +.privelege__box:not(:last-child) { + margin: 0 30px 0 0; +} + + +.privelege__box__head { + font-size: 19.96px; + line-height: 24px; + padding: 28px 0 16px 0; +} + +.privelege__box__text { + font-weight: 300; + font-size: 13.972px; + line-height: 17px; + display: inline-block; +} + +.footer__subscribe { + background: url('./img/footer__bcg.png') no-repeat, + url('./img/footer__img.png') no-repeat; + /*padding: 86px 327px 156px 208px;*/ + display: flex; + justify-content: center; + background-size: 100% auto; + height: 448px; + + +} + +.footer__subsribe__container { + max-width: 1140px; + display: flex; + justify-content: space-between; +} + +.footer__subsribe__left { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin: 0 327px 0 0; + max-width: 360px; +} + +.footer__subsribe__right { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + max-width: 360px; +} + +.footer__subscribe__avatar { + display: flex; + + width: 96px; + height: 96px; + +} + +.footer__subscribe__text { + font-size: 20px; + line-height: 24px; + color: #222224; + text-align: center; + padding: 30px 0 0 0; + +} + +.footer__subsribe__span { + padding: 10px 0 0 0; +} + + +.subscribe { + display: flex; + margin: 32px 0 0 0; +} + + + +.subscribe-field { + border: none; + background: #E1E1E1; + padding: 20px; + border-top-left-radius: 40px; + border-bottom-left-radius: 40px; +} + + + +.subscribe-field::placeholder { + font-size: 14px; + line-height: 17px; + color: #222224; +} + +.subscribe-btn { + border: none; + background-color: #F16D7F; + color: #fff; + padding: 20px; + border-top-right-radius: 40px; + border-bottom-right-radius: 40px; + cursor: pointer; +} + + +.footer__contacts { + display: flex; + justify-content: space-between; + background-color: #222224; + align-items: center; +} + +.footer__contacts__left__text { + font-size: 16px; + line-height: 19px; + color: #FBFBFB; +} + + + + +@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css); +.social a { + text-align: center; + width: 32px; + height: 32px; + float: left; + background: #FFFFFF; + margin: 24px 7px 24px 0; + padding: 6px; + color: #000; + font-size: 16px; +} + +.facebook a:hover { + background: #F16D7F; + color: #FFFFFF; +} + +.instagram a:hover { + background: #F16D7F; + color: #FFFFFF; +} + +.pinterest a:hover { + background: #F16D7F; + color: #FFFFFF; +} + +.twitter a:hover { + background: #F16D7F; + color: #FFFFFF; +} + + +/*catalog*/ + +.header__menu { + display: flex; + justify-content: space-between; + padding: 60px 230px; + background-color: #F8F3F4; +} + +.breadcrumbs { + margin: 0; + padding: 0; + list-style: none; +} + +.breadcrumbs-item { + display: inline-block; + vertical-align: top; + margin-right: 5px; +} + +.breadcrumbs-item:not(:last-child):after { + content: "/"; + margin-left: 5px; + font-weight: 300; + font-size: 14px; + line-height: 17px; + color: #636363; +} + +.breadcrumbs-link { + font-weight: 300; + font-size: 14px; + line-height: 17px; + color: #636363; + text-decoration: none; + +} + +.breadcrumbs-link:not(span):hover { + text-decoration: underline; +} + +.breadcrumbs-link.current { + color: #F16D7F; + font-weight: bold; +} + +.filtres { + display: flex; + padding: 51px 0 64px 0; + +} + +.filtres__wrap { + display: flex; + +} + +.filter__left { + display: flex; + padding: 0 304px 0 00; + display: inline-block; +} + +.filter__img { + padding: 0 0 0 11px; +} + +.filers__category__box { + box-shadow: 0 0 50px hsl(0, 0%, 70%); + position: absolute; + background: #FFFFFF; + width: 360px; +} + + + +details summary { + display: block; + width: 10em; + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; + outline-style: none; + cursor: pointer; + } + +.filters__category__details { + padding: 16px 0 18px 17px; +} + +.filters__category__details[open] { + color: #EF5B70; +} + +details summary::-webkit-details-marker { + display: none; +} + +.filters__category { + display: block; + border-left: 5px solid #EF5B70; + border-bottom: 1px solid #EBEBEB; + padding: 10px; + outline: none; +} + + + +.filters__category__ul { + margin: 24px 0 6px 17px; + list-style: none; +} + +.filters__category__li { + font-size: 14px; + line-height: 17px; + color: #6F6E6E; +} + +.filters__category__li:not(:last-child) { + padding: 0 0 11px 0; +} + + +.filter__center { + display: flex; + +} + +.filter__center__category:not(:first-child) { + margin: 0 0 0 30px; +} + +.filter__size { + display: flex; + flex-direction: column; + box-shadow: 0 0 50px hsl(0, 0%, 70%); + position: absolute; + background: #FFFFFF; + + padding: 7px 30px 11px 9px; +} + +.filter__size__input:not(:last-child) { + padding: 0 0 6px 0 ; +} + +.filter__size__input__checkbox { + margin: 0 9px 0 0; +} + +ul.pagination { + display: inline-block; + padding: 0; + margin: 0; +} + +ul.pagination li {display: inline;} + +ul.pagination li a { + color: black; + float: left; + padding: 8px 16px; + text-decoration: none; +} + +.pagination__center { + text-align: center; + margin: 48px 0 96px 0; + font-weight: 300; + font-size: 16px; + line-height: 19px; + cursor: pointer; + +} + +.pagination { + text-align: center; + border: 1px solid #EBEBEB; + cursor: pointer; +} + +ul.pagination li a.active { + color: #EF5B70; +} + +.pagination__li:hover { + background-color: #EF5B70; + color: #E1E1E1; +} + +/*product*/ + + + +.wrap { + width: 600px; + margin: 0 auto; + border: 1px solid #EAEAEA; + display: flex; + +} + +.slider { + background: #F7F7F7; + display: flex; + justify-content: center; + align-items: center; + position: relative; + padding-bottom: 50px; +} + +.slider__img { + +} + +.slider-btn { + background: rgba(42, 42, 42, 0.15); + color: #000000; + padding: 13px 17px; + border: none; + position: absolute; + width: 47px; + height: 47px; + cursor: pointer; +} + + +.slider-btn:hover { + background: #F7F7F7; + border: 1px solid #EF5B70; +} + +.slider-btn:active { + background: #000; +} + +.slider-btn-left { + left: 5px; +} + +.slider-btn-right { + right: 5px; +} + +.slider-btn .vector { + fill: #000000; +} + +.slider-btn .vector:hover { + fill: #F16D7F; +} + +.slider-btn .vector:active { + fill: #F16D7F; +} + +.about__product { + margin: 0 0 130px 0; + +} + + + +.about-wrap { + background: #FFFFFF; + margin-top: -50px; + position: relative; + padding: 65px 0; + display: flex; + flex-direction: column; + text-align: center; + justify-content: center; + align-items: center; + width: 1141px; + +} + +.about-wrap h3 { + font-weight: 300; + font-size: 14px; + line-height: 17px; + color: #F16D7F; +} + +.about-wrap .product .line{ + max-width: 63px; + height: 3px; + background: #EF5B70; + display: flex; + align-items: center; + justify-content: center; + margin: 12px 0; +} + +.about-wrap h2 { + font-weight: 300; + font-size: 18px; + line-height: 22px; + color: #4D4D4D; + padding: 0 0 48px 0; +} + +.about-wrap p { + font-weight: 300; + font-size: 14px; + line-height: 17px; + text-align: center; + color: #5E5E5E; + padding: 0 0 32px 0; + + max-width: 555px; +} + +.about-wrap .price { + font-weight: 300; + font-size: 24px; + line-height: 29px; + color: #EF5B70; + padding: 0 0 65px 0; +} + +.about-wrap .product { + border-bottom: 1px solid #EAEAEA; + padding: 0 50px; + display: flex; + flex-direction: column; + justify-content: center; + +} + + + +.about-wrap .btn { + display: flex; + background:none; + padding: 13px 56px 13px 23px; + font-size: 14px; + line-height: 17px; + color: #FF6A6A; + border: 1px solid #FF6A6A; + align-items: center; + justify-content: center; + cursor: pointer; +} + +.about-wrap .btn__icon__shop { + padding-right: 23px; + fill: #FF6A6A; +} + + +.about-wrap .btn:hover{ + color: #FFFFFF; + background: #FF6A6A; + fill: #FFFFFF +} + +.btn .btn__icon__shop:hover { + fill: #FFFFFF +} + +.about-wrap .filter { + font-size: 14px; + line-height: 17px; + color: #6F6E6E; + display: flex; + justify-content: center; + padding: 65px 0 49px 0; +} + +.product__main { + margin-bottom: 128px; +} \ No newline at end of file