* { box-sizing: border-box; } body { margin: 0; } a { text-decoration: none; } li { list-style: none; } .header { max-width: 1920px; } .header-container { width: 100%; max-height: 124px; } .header-top { width: 100%; height: 44px; display: flex; justify-content: space-around; background-color: #000000; } .header-top a { font-family: PT Sans; font-size: 12px; font-style: normal; font-weight: 400; line-height: 16px; color: rgba(150, 150, 150, 1); } .header-top__contacts { display: flex; justify-content: center; align-items: center; } .header-top__contacts svg { margin-right: 16px; } .header-top__contacts__list { display: flex; justify-content: space-between; margin: 0; padding: 0; align-items: center; } .header-top__contacts__list li { margin-right: 12.5px; padding-left: 12.5px; border-left: 1px solid rgba(150, 150, 150, 1); } .header-top__contacts__list li:first-child { border-left: none; padding-left: 0; } .header-top__contacts__list li:last-child { margin-right: 0px; } .header-top__login { display: flex; justify-content: center; align-items: center; } .header-top__login a { margin-left: 15px; } .header-top__login span { display: block; width: 1px; height: 16px; background-color: rgba(150, 150, 150, 1); margin-left: 15px; transform: rotate(30deg); } .header-bottom { padding: 0% 10%; width: 100%; height: 80px; background: #0F0F0F; display: flex; justify-content: space-between; } .header-bottom__logo { display: flex; justify-content: center; align-items: center; /* width: 50%; */ padding-right: 150px; } .header-bottom__nav { /* width: 50%; */ display: flex; justify-content: flex-start; align-items: center; padding-left: 11px; } .header-bottom__nav svg { margin-left: 61px; } .header-bottom__nav svg:last-child { margin-left: 44px; } .header-bottom__nav__list { display: flex; justify-content: flex-start; align-items: center; margin: 0; padding: 0; } .header-bottom__nav__list li{ padding: 30px 20px; margin: 0; } .header-bottom__nav__list a { color: rgba(150, 150, 150, 1); } .header-bottom__nav__list li:hover { background-color: #1F1F1F; cursor: pointer; } .header-bottom__nav__list li:hover a { color: #fff; } .header_menu { display: none; } @media screen and (max-width: 1050px) { .header-bottom__nav__list { font-size: 12px; display: flex; flex-direction: column; } .header-bottom__nav__list li { padding: 2px; } } @media screen and (max-width: 700px) { .header-top__contacts__list li:last-of-type { display: none; } } @media screen and (max-width: 650px) { .header-bottom__logo { padding: 0%; } .header-top__contacts__list li:nth-last-child(2) { display: none; } .header-bottom__nav__list { display: none; } } .main { max-width: 1920px; } .main-title { width: 100%; height: 810px; display: flex; flex-direction: column; align-items: center; justify-content: center; background-image: url(../img/Rectangle\ 3.png); } .main-title__name { width: 320px; height: 320px; border: 4px solid #FFFFFF; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 80px; } .main-title__name p { font-family: PT Sans; font-size: 26px; font-style: normal; font-weight: 400; line-height: 28px; color: rgba(255, 255, 255, 1); margin: 0; } .main-title__name svg { margin-bottom: 15px; } .main-title__text { display: flex; max-width: 730px; height: 96px; justify-content: center; align-items: center; color: rgba(255, 255, 255, 1); font-family: PT Sans; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; } .main-collections { width: 100%; height: 1330px; } .main-collections-top { height: 730px; width: 100%; display: flex; justify-content: space-between; } .main-collections-top__products { height: 100%; width: 55%; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #000000; } .main-collections-top__img { height: 100%; width: 45%; display: flex; flex-direction: column; justify-content: center; align-items: center; background-image: url(../img/Rectangle\ 8.png); } .main-collections-top__products__inner { height: 540px; width: 100%; display: flex; justify-content: space-around; align-items: center; padding: 0 60px; } .inner-block { height: 405px; width: 260px; } .background__img { width: 260px; height: 325px; display: flex; justify-content: center; align-items: center; background-color: #191B1C; } .background__img__text { width: 260px; height: 80px; background-color: #000000; } .main-collections-top__products__name { font-family: Playfair Display; font-size: 36px; font-style: normal; font-weight: 700; line-height: 48px; color: rgba(255, 255, 255, 1); margin-bottom: 50px; } .name { font-family: Playfair Display; font-size: 18px; font-style: normal; font-weight: 400; line-height: 24px; color: rgba(255, 255, 255, 1); } .cost { font-family: Playfair Display; font-size: 16px; font-style: normal; font-weight: 700; line-height: 21px; color: white; } .main-collections-bottom { height: 600px; width: 100%; display: flex; justify-content: space-between; } .main-collections-bottom__img { height: 100%; width: 45%; background-image: url(../img/Rectangle\ 9.png); } .main-collections-bottom__collection { height: 100%; width: 55%; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #000000; } .main-collections-bottom__collection svg{ margin-bottom: 40px; } .bottom-text { display: flex; font-family: PT Sans; font-size: 14px; font-style: normal; font-weight: 400; line-height: 21px; color: rgba(255, 255, 255, 1); max-width: 471px; height: 173px; margin-bottom: 60px; } .main-collections-bottom__collection__name { font-family: Playfair Display; font-size: 36px; font-style: normal; font-weight: 400; line-height: 48px; color: #fff; margin-bottom: 40px; } .collection-btn { width: 311px; height: 47px; border: 1px solid #FFFFFF;; background: rgba(0, 0, 0, 1); color: #fff; font-family: PT Sans; font-size: 18px; font-style: normal; font-weight: 400; line-height: 23px; letter-spacing: 0,1em; cursor: pointer; } .collection-btn:hover { cursor: pointer; background-color: #1F1F1F; } .main-new-arrivals { width: 100%; height: 1289px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #000000; } .main-new-arrivals__name { font-family: Playfair Display; font-size: 36px; font-style: normal; font-weight: 700; line-height: 48px; letter-spacing: 0em; color: rgba(255, 255, 255, 1); margin-bottom: 40px; } .main-new-arrivals svg { margin-bottom: 81px; } .main-new-arrivals__produscts { width: 60%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; } .main-new-arrivals__produscts>div:nth-child(-n+4) { margin-bottom: 40px; } .main-our-brands { width: 1005; height: 302px; background: #0F0F0F; display: flex; flex-direction: column; justify-content: center; align-items: center; } .main-our-brands>svg { margin-bottom: 40px; } .main-our-brands__name { font-family: Playfair Display; font-size: 36px; font-style: normal; font-weight: 700; line-height: 48px; letter-spacing: 0em; color: rgba(255, 255, 255, 1); margin-bottom: 40px; } .brands-icon { width: 60%; display: flex; justify-content: space-between; } .footer-container { width: 100%; height: 450px; background-image: url(../img/Rectangle\ 15.png); display: flex; justify-content: center; flex-direction: column; align-items: center; } .footer-about { width: 60%; height: 400px; display: flex; justify-content: space-between; } .footer-about__about { width: 33.33333%; height: 100%; justify-content: center; display: flex; flex-direction: column; } .footer-about__about__name { font-family: Playfair Display; font-size: 24px; font-style: normal; font-weight: 400; line-height: 32px; letter-spacing: 0em; color: #fff; margin-bottom: 40px; } .footer-about__about p { font-family: PT Sans; font-size: 14px; font-style: normal; font-weight: 400; line-height: 21px; letter-spacing: 0em; color: #fff; margin: 0; } .footer-about__category { width: 33.33333%; height: 100%; justify-content: center; display: flex; flex-direction: column; } .footer-about__category__name { font-family: Playfair Display; font-size: 24px; font-style: normal; font-weight: 400; line-height: 32px; letter-spacing: 0em; color: #fff; margin-bottom: 40px; } .footer-about__category__buttons { display: flex; flex-wrap: wrap; } .footer-about__mailing { width: 33.33333%; height: 100%; justify-content: center; display: flex; flex-direction: column; } .btn { padding: 10px 20px; margin-bottom: 20px; margin-right: 20px; background: #0F0F0F; color: rgba(208, 208, 208, 1); border: none; cursor: pointer; } .btn:hover { cursor: pointer; background: #1F1F1F; color: #fff; } .footer-about__mailing__name { font-family: Playfair Display; font-size: 24px; font-style: normal; font-weight: 400; line-height: 32px; letter-spacing: 0em; color: #fff; margin-bottom: 40px; } .footer-about__mailing p { font-family: PT Sans; font-size: 14px; font-style: normal; font-weight: 400; line-height: 21px; letter-spacing: 0em; color: #fff; margin: 0 0 37px 0; } .sign-up { width: 100%; height: 42px; display: flex; } .inner-btn { width: 60%; height: 100%; background: rgba(255, 255, 255, 0.4); color: rgba(150, 150, 150, 1); display: flex; justify-content: flex-start; align-items: center; padding-left: 15px; cursor: text; } .sign-btn { width: 40%; height: 100%; background: #0F0F0F; color: rgba(255, 255, 255, 1); border: none; cursor: pointer; } .sign-btn:hover { background-color: #1F1F1F; } .footer-about__copyright { height: 60px; width: 100%; background: rgba(15, 15, 15, 1); display: flex; justify-content: space-between; } .copyright { width: 50%; height: 100%; display: flex; justify-content: center; align-items: center; color: #fff; } .made-by { width: 50%; height: 100%; display: flex; justify-content: center; align-items: center; color: #fff; }