diff --git a/HomeWork_3/.vscode/settings.json b/HomeWork_3/.vscode/settings.json new file mode 100644 index 0000000..0d9c117 --- /dev/null +++ b/HomeWork_3/.vscode/settings.json @@ -0,0 +1,10 @@ +{ + "liveSassCompile.settings.formats": [ + + { + "format": "expanded", + "extensionName": ".css", + "savePath": "./css" + } + ] +} \ No newline at end of file diff --git a/HomeWork_3/css/style.css b/HomeWork_3/css/style.css new file mode 100644 index 0000000..797d802 --- /dev/null +++ b/HomeWork_3/css/style.css @@ -0,0 +1,1990 @@ +@charset "UTF-8"; +/* Обнуление */ +* { + padding: 0; + margin: 0; + border: 0; +} + +*, *:before, *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +:focus, :active { + outline: none; +} + +a:focus, a:active { + outline: none; +} + +nav, footer, header, aside { + display: block; +} + +html, body { + height: 100%; + width: 100%; + font-size: 100%; + line-height: 1; + font-size: 14px; + -ms-text-size-adjust: 100%; + -moz-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} + +input, button, textarea { + font-family: inherit; +} + +input::-ms-clear { + display: none; +} + +button { + cursor: pointer; +} + +button::-moz-focus-inner { + padding: 0; + border: 0; +} + +a, a:visited { + text-decoration: none; +} + +a:hover { + text-decoration: none; +} + +ul li { + list-style: none; +} + +img { + vertical-align: top; +} + +h1, h2, h3, h4, h5, h6 { + font-size: inherit; + font-weight: inherit; +} + +.wrapper { + margin: 0 auto; +} + +.container { + margin: 0 auto; +} + +.container__topline { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 100px; + max-width: 1141px; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + margin: 0 auto; +} + +.topline__wrapper { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} + +.header__topline { + border-bottom: 1px solid #ececec; +} + +.topline__logo { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + font-size: 27px; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.topline__logo p { + padding-left: 13px; + color: #222222; + text-transform: uppercase; + font-family: "Lato", sans-serif; + font-weight: 300; + letter-spacing: 0.68px; + cursor: pointer; +} + +.topline__logo span { + color: #f16d7f; + font-family: "Lato", sans-serif; + font-weight: bold; + letter-spacing: 0.68px; + line-height: normal; +} + +.topline__navigation { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding-left: 37px; +} + +.navigation__browse { + padding-left: -50px; +} + +.navigation__browse button { + color: #222222; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: 300; + line-height: 32px; + width: 87px; + height: 40px; + border-radius: 3px 0 0 3px; + border: 1px solid #e6e6e6; + background-color: #cdcdcc; + background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f5f5f5)); + background-image: linear-gradient(to bottom, #f9f9f9 0%, #f5f5f5 100%); +} + +.navigation__browse button::after { + content: url(../img/Icons/dropdown_arrow.png); + padding-left: 8px; +} + +.navigation__serch { + border-radius: 0 3px 3px 0; + border: 1px solid #e6e6e6; + background-color: #ffffff; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + padding-left: 16px; +} + +.navigation__serch input { + width: 317px; + height: 38px; +} + +.navigation__serch input[placeholder] { + color: #a4a4a4; + font-family: "Lato", sans-serif; + font-size: 16px; + font-weight: 300; +} + +.navigation__serch button { + border-left: 1px solid #e6e6e6; + background-color: #ffffff; + height: 38px; + width: 36px; +} + +.topline__personals { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.personals__cart { + width: 32px; + height: 29px; +} + +.personals__account { + padding-left: 26px; +} + +.personals__account button { + width: 130px; + height: 38px; + background-color: #f16d7f; + color: #ffffff; + font-family: "Lato", sans-serif; + font-size: 15px; + font-weight: 400; + line-height: 32px; +} + +.personals__account button:hover { + background-color: #ec5264; + -webkit-transition: 0.5s; + transition: 0.5s; +} + +.personals__account button:active { + background-color: #b12e3d; +} + +.personals__account button::after { + content: url(../img/Icons/dropdown_arrow_white.png); + padding-left: 8px; +} + +.header__bottomline :last-child { + padding-right: 0; +} + +.header__bottomline { + text-align: center; + padding-top: 19px; + padding-bottom: 22px; +} + +.header__bottomline a { + padding-right: 46px; + color: #222222; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: 700; + line-height: 26px; + text-transform: uppercase; +} + +.content { + background-image: url(../img/Images/main_bg.jpg); + background-size: contain; + background-repeat: no-repeat; + background-position: center; + background-color: #e8e8e8; +} + +.content__offer { + padding-top: 276px; + padding-bottom: 285px; + max-width: 1140px; + margin: 0 auto; +} + +.offer__text { + position: relative; +} + +.offer__text h1 { + color: #222222; + font-family: "Lato", sans-serif; + font-weight: 900; + text-transform: uppercase; + font-size: 60px; + letter-spacing: 1.5px; +} + +.offer__text p { + font-family: "Lato", sans-serif; + font-style: normal; + letter-spacing: 1px; + font-size: 40px; + font-weight: 700; +} + +.offer__text span { + color: #f16d7f; +} + +.offer__text::before { + content: ""; + position: absolute; + left: -24px; + top: 9px; + width: 12px; + height: 100%; + background-color: #f16d7f; +} + +.block__sections { + max-width: 1141px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin: 0 auto; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + margin-top: 98px; +} + +.sections__item { + max-width: 560px; + padding-bottom: 20px; + position: relative; +} + +.item__lable { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + position: absolute; + top: 26px; + height: 82px; + background-color: #ffffff; + min-width: 165px; + padding: 0 20px; +} + +.item__lable :last-child { + color: #f16d7f; + font-size: 30px; + letter-spacing: 0.75px; + padding-bottom: 0; +} + +.item__lable p { + color: #222222; + font-family: "Lato", sans-serif; + font-size: 18px; + font-weight: 900; + text-transform: uppercase; + padding-bottom: 10px; + text-align: left; +} + +/* fetured items BLOCK */ +.fetured__items { + max-width: 1140px; + margin: 0 auto; +} + +.items__header { + margin-top: 100px; +} + +.items__header h3 { + color: #222222; + font-family: "Lato", sans-serif; + font-size: 30px; + font-weight: 700; + letter-spacing: 0.75px; + text-align: center; +} + +.items__header p { + color: #9f9f9f; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: 400; + text-align: center; + padding-top: 16px; +} + +.items__list { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + margin-top: 60px; +} + +.list__item { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + max-width: 263px; + max-height: 364px; + margin-bottom: 40px; + cursor: pointer; +} + +.item__hover { + position: relative; +} + +.list__item:hover { + -webkit-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.16); + box-shadow: 0 5px 8px rgba(0, 0, 0, 0.16); +} + +.list__item:hover .hover__btn { + visibility: visible; +} + +.hover__btn { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 279px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background-color: #3a383871; + visibility: hidden; + cursor: pointer; +} + +.hover__btn span { + position: relative; + border: 1px solid white; + padding: 15px 13px 14px 43px; + color: #ffffff; + font-family: "Lato", sans-serif; + font-size: 13px; + font-weight: 700; + cursor: pointer; +} + +.hover__btn span::before { + content: url(../img/Icons/icon_cart_white.svg); + position: absolute; + left: 8px; + top: 10px; +} + +.item__title { + color: #222222; + font-family: "Lato", sans-serif; + font-size: 13px; + font-weight: bold; + text-align: left; + text-transform: uppercase; + padding-top: 20px; + padding-left: 14px; +} + +.item__price { + padding-bottom: 20px; + padding-top: 17px; + color: #f16d7f; + font-family: "Lato", sans-serif; + font-size: 16px; + font-weight: 700; + text-transform: uppercase; + padding-left: 14px; +} + +.items__button { + text-align: center; + margin-top: 19px; +} + +.items__button button { + position: relative; + width: 212px; + height: 48px; + background-color: #f16d7f; + color: #ffffff; + font-family: "Lato", sans-serif; + font-size: 16px; + font-weight: 700; + padding-right: 18px; +} + +.items__button button:hover { + background-color: #ec5264; + -webkit-transition: 0.5s; + transition: 0.5s; +} + +.items__button button:active { + background-color: #b12e3d; +} + +.items__button button::after { + content: url(../img/Icons/right_white_arrow.png); + position: absolute; + right: 20px; + top: 12px; +} + +.block__serwices { + max-width: 1140px; + margin: 0 auto; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + margin-top: 113px; +} + +.serwices__offer { + width: 767px; + height: 529px; + background-image: url(../img/Images/Image.jpg); + background-repeat: no-repeat; + padding-left: 39px; + padding-top: 146px; +} + +.serwices__offer p { + color: #ffffff; + font-family: "Lato", sans-serif; + font-size: 54px; + font-weight: 700; + text-transform: uppercase; +} + +.serwices__offer p span { + color: #f16d7f; + letter-spacing: 1.5px; +} + +.serwices__offer > span { + font-size: 32px; + letter-spacing: 0.9px; + color: #ffffff; + font-family: "Lato", sans-serif; +} + +.serwices__items { + max-width: 373px; + background-color: #222224; + height: 529px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -ms-flex-pack: distribute; + justify-content: space-around; + padding-left: 36px; + padding-right: 43px; +} + +.items__serwice { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + margin-bottom: 18px; +} + +.serwice__info { + padding-left: 30px; +} + +.info__title { + color: #fbfbfb; + font-family: "Lato", sans-serif; + font-size: 20px; + font-weight: 700; + text-align: left; +} + +.info__description { + color: #fbfbfb; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: 300; + text-align: left; + padding-top: 17px; + width: 219px; + line-height: 24px; +} + +.block__subscribe { + max-width: 1600px; + margin: 0 auto; + background-image: url(../img/Images/quote_image.jpg); +} + +.wrapper__subscribe { + max-width: 1140px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + margin: 0 auto; + margin-top: 100px; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.vertical__line { + width: 1px; + height: 438px; + background-color: #ffffff; + text-align: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.subscribe__quote { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + max-width: 497px; + padding: 111px 0 156px 0; +} + +.subscribe__form { + max-width: 386px; + padding-top: 148px; + text-align: center; + margin-right: 92px; +} + +.quote__text { + padding-left: 28px; +} + +.quote__controls { + width: 38px; + height: 4px; + background-color: #f16d7f; + margin-left: 52px; + margin-top: 41px; + position: relative; +} + +.quote__controls span::before { + content: ""; + width: 38px; + height: 4px; + background-color: #d6d6d6; + position: absolute; + right: 50px; +} + +.quote__controls span::after { + content: ""; + width: 38px; + height: 4px; + background-color: #d6d6d6; + position: absolute; + left: 50px; +} + +.text__main { + color: #222224; + font-family: "Lato", sans-serif; + font-size: 16px; + font-style: italic; + text-align: left; + padding-bottom: 19px; +} + +.text__author { + color: #f16d7f; + font-family: "Lato", sans-serif; + font-size: 16px; + font-weight: 700; + text-align: left; + letter-spacing: 0.4px; +} + +.text__place { + font-family: "Lato", sans-serif; + font-size: 12px; + font-weight: 300; + letter-spacing: 0.3px; +} + +.form__title { + color: #222224; + font-family: "Lato", sans-serif; + font-weight: 400; + text-align: center; + font-size: 24px; + letter-spacing: 0.6px; + text-transform: uppercase; +} + +.form__subtitle { + color: #222224; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: 400; + text-align: center; + padding-top: 12px; + padding-bottom: 35px; +} + +.form__input { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + position: relative; +} + +.form__input input { + width: 334px; + height: 46px; + border-radius: 23px; + background-color: #e1e1e1; + padding-left: 28px; +} + +.form__input input:focus { + -webkit-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.16); + box-shadow: 0 5px 8px rgba(0, 0, 0, 0.16); +} + +.form__input input::-webkit-input-placeholder { + color: #22222475; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: bold; +} + +.form__input input:-ms-input-placeholder { + color: #22222475; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: bold; +} + +.form__input input::-ms-input-placeholder { + color: #22222475; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: bold; +} + +.form__input input::placeholder { + color: #22222475; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: bold; +} + +.form__input button { + width: 104px; + height: 46px; + border-radius: 0 23px 23px 0; + background-color: #f16d7f; + position: absolute; + right: 0; + color: #ffffff; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: 400; +} + +.form__input button:hover { + background-color: #ec5264; + -webkit-transition: 0.5s; + transition: 0.5s; +} + +.form__input button:active { + background-color: #b12e3d; +} + +.footer__main { + max-width: 1140px; + margin: 0 auto; +} + +.main__columns { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + margin-top: 123px; + margin-bottom: 97px; +} + +.main__columns :last-child { + padding-right: 0; +} + +.columns__row { + padding-right: 80px; +} + +.columns__navigation { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} + +.row__title { + color: #f16d7f; + font-family: "Lato", sans-serif; + font-size: 18px; + font-weight: 700; + text-transform: uppercase; + padding-bottom: 50px; +} + +.list__items li { + padding-bottom: 30px; + color: #898989; + font-family: "Lato", sans-serif; + font-size: 16px; + font-weight: 400; +} + +.list__items li a { + color: #898989; +} + +.list__items li:last-child { + padding-bottom: 0; +} + +.about__logo { + padding-bottom: 17px; +} + +.about__text { + max-width: 428px; + color: #898989; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: 300; + text-align: left; + line-height: 24px; +} + +.about__text p { + padding-bottom: 35px; +} + +.about__text :last-child { + padding: 0; +} + +.footer__bottom { + background-color: #e6e6e6; +} + +.wrapper__bottom { + max-width: 1140px; + margin: 0 auto; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-height: 79px; +} + +.bottom__rights { + color: #7a7a7a; + font-family: "Lato", sans-serif; + font-size: 16px; + font-weight: 400; +} + +.bottom__socials { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} + +.bottom__socials a { + color: #b2b2b2; +} + +.socials__item a { + width: 32px; + height: 32px; + background-color: #ffffff; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin-right: 8px; +} + +.socials__item :hover { + background-color: #f16d7f; + -webkit-transition: 0.5s; + transition: 0.5s; +} + +.socials__item :active { + background-color: #ededed; +} + +.slider__breadcramps { + background-color: #f8f3f4; + margin: 0 auto; +} + +.breadcramps { + margin: 0 auto; + max-width: 1140px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 148px; +} + +.breadcramps__title { + color: #f16d7f; + font-family: "Lato", sans-serif; + font-size: 24px; + font-weight: bold; + line-height: 20px; + text-transform: uppercase; +} + +.breadcramps__nav a { + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: 700; + text-transform: uppercase; + color: #636363; + font-family: "Lato Light"; + font-weight: 300; +} + +.breadcramps__nav :last-child { + color: #f16d7f; + font-family: "Lato", sans-serif; + font-weight: 700; +} + +.slider__box { + max-width: 1600px; + margin: 0 auto; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background-color: #f7f7f7; + border: 1px solid #eaeaea; +} + +.box__controls span { + padding: 16px 18px 17px 21px; + background-color: #d8d8d8; + color: #ffffff; + cursor: pointer; +} + +.product { + max-width: 1140px; + text-align: center; + margin: 0 auto; + border: 1px solid #eaeaea; + margin-top: -50px; + background-color: #ffffff; + position: relative; + z-index: 5; +} + +.product__info { + max-width: 642px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + margin: 0 auto; + border-bottom: 1px solid #eaeaea; +} + +.info__collection { + color: #f16d7f; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: 700; + text-align: center; + text-transform: uppercase; + padding-top: 73px; +} + +.info__collection ::after { + content: ""; + width: 63px; + height: 3px; + background-color: #ef5b70; + position: absolute; + bottom: -2px; + right: 43px; +} + +.info__collection h4 { + border-bottom: 1px solid #eaeaea; + padding-bottom: 15px; + position: relative; +} + +.info__name { + color: #4d4d4d; + font-family: "Lato", sans-serif; + font-size: 18px; + font-weight: bold; + padding-top: 18px; + text-transform: uppercase; +} + +.info__about p { + color: #5e5e5e; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: 300; + line-height: 24px; + padding-top: 67px; + padding-bottom: 28px; +} + +.info__ditails { + color: #b9b9b9; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: 700; + text-transform: uppercase; + padding-bottom: 37px; +} + +.info__ditails :last-child { + padding-right: 0; +} + +.info__ditails span { + padding-right: 44px; +} + +.info__ditails span > span { + color: #2f2f2f; +} + +.info__price { + color: #ef5b70; + font-family: "Lato", sans-serif; + font-size: 24px; + font-weight: 700; + padding-bottom: 43px; +} + +.cart-form__label { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + max-width: 145px; + margin-top: 63px; + font-family: sans-serif; + font-size: 14px; + text-transform: uppercase; + font-weight: 700; +} + +.cart-form__field { + margin-top: 10px; + padding: 10px; + border: 1px solid #eaeaea; + background-color: transparent; +} + +.cart-form__field:focus { + outline: none; + border-color: #ef5b6f; +} + +.cart-form { + width: 535px; + margin: 0 auto; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.cart-form__submit { + width: 100%; + margin-top: 30px; + border: 1px solid #ef5b6f; + color: #ef5b6f; + padding: 15px 0; + background-color: transparent; + margin-bottom: 122px; + font-family: "Lato", sans-serif; + font-size: 16px; + font-weight: 700; + cursor: pointer; + position: relative; +} + +.cart-form__submit:hover { + background-color: #ef5b6f; + color: #fff; +} + +.cart-form__submit::before { + content: url(../img/Icons/form_cart.svg); + position: absolute; + top: 11px; + left: 186px; +} + +.items__title h3 { + color: #4d4d4d; + font-family: "Lato", sans-serif; + font-size: 24px; + font-weight: bold; + text-align: center; + text-transform: uppercase; + padding-top: 119px; +} + +.block__bradcramps { + margin: 0 auto; + background-color: #f8f3f4; +} + +.block__services { + max-width: 1600px; + margin: 0 auto; + background-color: #222224; + margin-bottom: -100px; +} + +.wrapper__services { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: end; + -ms-flex-align: end; + align-items: flex-end; + max-width: 1088px; + margin: 0 auto; +} + +.services__item { + max-width: 308px; + text-align: center; + padding-top: 89px; + padding-bottom: 114px; +} + +.item__icon { + padding-bottom: 32px; +} + +.item__name { + color: #fbfbfb; + font-family: "Lato", sans-serif; + font-size: 20px; + font-weight: 700; + padding-bottom: 17px; +} + +.item__text { + color: #fbfbfb; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: 300; + line-height: 23.95px; +} + +.block__catalog { + max-width: 1140px; + margin: 0 auto; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + margin-top: 60px; +} + +.catalog__sidebar { + max-width: 243px; +} + +.catalog__content { + margin-left: 51px; +} + +.navigation__group { + margin-bottom: 18px; +} + +.group__title { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + width: 243px; + color: #ef5b70; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: 700; + text-transform: uppercase; + position: relative; + border-left: 5px solid #ef5b70; + padding: 12px 0 15px 11px; + border-bottom: 1px solid #ebebeb; + cursor: pointer; +} + +.elements__list { + padding-left: 22px; +} + +.list__element a { + color: #6f6e6e; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 33px; + text-align: left; +} + +.sorting__options { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + width: 848px; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.options__trending { + max-width: 177px; +} + +.options__size { + max-width: 236px; +} + +.options__price { + max-width: 236px; +} + +.trending__title { + color: #6f6e6e; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: 700; + text-align: left; + text-transform: uppercase; + padding-bottom: 25px; +} + +.trending__elements button { + color: #6f6e6e; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 26px; + text-align: left; + background-color: #fff; +} + +.trending__elements :nth-of-type(1) { + border-right: 1px solid #dfdfdf; + padding-right: 10px; + margin-right: 10px; +} + +.trending__elements :nth-of-type(2) { + border-right: 1px solid #dfdfdf; + padding-right: 10px; + margin-right: 10px; +} + +.trending__elements :nth-of-type(4) { + border-right: 1px solid #dfdfdf; + padding-right: 10px; + margin-right: 10px; +} + +.trending__elements :nth-of-type(5) { + border-right: 1px solid #dfdfdf; + padding-right: 10px; + margin-right: 10px; +} + +.size__title { + color: #6f6e6e; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: 700; + text-align: left; + text-transform: uppercase; + padding-bottom: 25px; +} + +.size__elements { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} + +.elements__wrapper { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + width: 60px; +} + +.elements__wrapper :first-child { + padding-bottom: 10px; +} + +.elements__wrapper label { + color: #6f6e6e; + font-family: "Lato", sans-serif; + font-size: 13px; + font-weight: 400; + text-transform: uppercase; +} + +.price__title { + color: #6f6e6e; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: 700; + line-height: 20px; + text-align: left; + text-transform: uppercase; + padding-bottom: 25px; +} + +.price__range input { + color: #f27384; +} + +.sorting__controls { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + padding-top: 10px; + padding-bottom: 10px; + padding-left: 10px; + background-color: #f3f3f3; + margin-top: 40px; +} + +.sorting__controls :first-child { + width: 143px; + height: 30px; + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background-color: #ffffff; + border: 1px solid #ebebeb; + color: #6f6e6e; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: 400; +} + +.sorting__controls :last-child { + width: 109px; + height: 30px; + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background-color: #ffffff; + border: 1px solid #ebebeb; + color: #6f6e6e; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: 400; + margin-left: 10px; +} + +.sorting__controls :last-child::before { + content: "Show"; + border-right: 1px solid #ebebeb; + margin-right: 10px; + padding-right: 10px; + line-height: 28px; + background-color: #ffffff; +} + +.sorting__controls ::after { + content: url(../img/Icons/dropdown_arrow.png); + position: absolute; + top: 5px; + right: 6px; +} + +.sorting__controls :first-child::before { + content: "Sort By"; + border-right: 1px solid #ebebeb; + margin-right: 10px; + padding-right: 10px; + line-height: 28px; + background-color: #ffffff; +} + +.content__cards { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-top: 48px; +} + +.cards__item { + position: relative; + margin-bottom: 38px; +} + +.hover2__btn { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 279px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background-color: #3a383871; + visibility: hidden; + cursor: pointer; +} + +.hover2__btn :first-child { + position: absolute; + top: 98px; + border: 1px solid white; + border-radius: 3px; + padding: 15px 13px 14px 43px; + color: #ffffff; + font-family: "Lato", sans-serif; + font-size: 13px; + font-weight: 700; + cursor: pointer; +} + +.hover2__btn :last-child::before { + content: url(../img/Icons/round_arrow.svg); + border: 1px solid white; + border-radius: 3px; + padding: 13px 17px 13px 18px; + position: absolute; + top: 147px; + left: 70px; +} + +.hover2__btn :last-child::after { + content: url(../img/Icons/heart_icon.svg); + border: 1px solid white; + border-radius: 3px; + padding: 12px 20px 9px 21px; + position: absolute; + top: 147px; + left: 133px; +} + +.hover2__btn span::before { + content: url(../img/Icons/icon_cart_white.svg); + position: absolute; + left: 8px; + top: 10px; +} + +.cards__item:hover { + -webkit-box-shadow: 0 5px 8px rgba(0, 0, 0, 0.16); + box-shadow: 0 5px 8px rgba(0, 0, 0, 0.16); +} + +.cards__item:hover .hover2__btn { + visibility: visible; +} + +.content__pages { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + margin-bottom: 110px; +} + +.pages__button button { + width: 150px; + height: 44px; + border-radius: 3px; + border: 1px solid #ef5b70; + background-color: #ffffff; + color: #ef5b70; + font-family: "Lato", sans-serif; + font-size: 16px; + font-weight: bold; +} + +.quantity__control { + width: 261px; + height: 44px; + border-radius: 3px; + border: 1px solid #ebebeb; + background-color: #ffffff; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + color: #c4c4c4; + font-family: "Lato", sans-serif; + font-size: 16px; + font-weight: bold; + line-height: 26px; +} + +.shopping-cart { + max-width: 1140px; + margin: 0 auto; +} + +.shopping-cart__titles { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + color: #222222; + font-family: "Lato", sans-serif; + font-size: 13px; + font-weight: 700; + text-align: left; + text-transform: uppercase; + margin-top: 90px; + border-bottom: 1px solid #eaeaea; + padding-bottom: 20px; +} + +.titles__details { + -webkit-box-flex: 0; + -ms-flex: 0 1 513px; + flex: 0 1 513px; +} + +.elements__product { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + max-width: 1140px; + margin: 0 auto; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin-top: 22px; + border-bottom: 1px solid #eaeaea; + padding-bottom: 20px; +} + +.product__details { + -webkit-box-flex: 0; + -ms-flex: 0 1 522px; + flex: 0 1 522px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} + +.product__unuteprice { + padding-right: 30px; + color: #656565; + font-family: "Lato", sans-serif; + font-size: 13px; + font-weight: bold; +} + +.product__quantity { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + width: 54px; + height: 30px; + border: 1px solid #eaeaea; + background-color: #ffffff; + margin-right: 10px; + color: #656565; + font-family: "Lato", sans-serif; + font-size: 13px; + font-weight: bold; +} + +.product__shipping { + padding-right: 20px; + color: #656565; + font-family: "Lato", sans-serif; + font-size: 13px; + font-weight: bold; +} + +.product__subtotal { + padding-right: 20px; + color: #656565; + font-family: "Lato", sans-serif; + font-size: 13px; + font-weight: bold; +} + +.product__action { + padding-right: 20px; +} + +.details__details { + padding-left: 21px; +} + +.details__title { + padding-top: 13px; + color: #222222; + font-family: "Lato", sans-serif; + font-size: 13px; + font-weight: bold; + text-transform: uppercase; +} + +.details__color { + padding-top: 38px; + color: #6f6e6e; + font-family: "Lato", sans-serif; + font-size: 13px; + font-weight: bold; +} + +.details__color span { + font-family: "Lato", sans-serif; + font-weight: 300; +} + +.details__size { + padding-top: 10px; + color: #6f6e6e; + font-family: "Lato", sans-serif; + font-size: 13px; + font-weight: bold; +} + +.details__size span { + font-family: "Lato", sans-serif; + font-weight: 300; +} + +.shopping-cart__details { + margin-top: 44px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; +} + +.shopping-cart__navigation { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + margin-top: 44px; +} + +.navigation__button button { + width: 235px; + height: 50px; + border: 1px solid #eaeaea; + background-color: #ffffff; + color: #4a4a4a; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: 700; + text-transform: uppercase; +} + +.navigation__button :hover { + background-color: #f16d7f; + -webkit-transition: 0.5s; + transition: 0.5s; +} + +.shopping-cart__details { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} + +.details__adress { + max-width: 355px; +} + +.details__discount { + max-width: 355px; +} + +.details__total { + max-width: 355px; +} + +.adress__form button { + width: 100px; + height: 35px; + border: 1px solid #eaeaea; + background-color: #ffffff; + color: #4a4a4a; + font-family: "Lato", sans-serif; + font-size: 11px; + font-weight: bold; + text-transform: uppercase; +} + +.adress__form button:hover { + background-color: #f16d7f; + -webkit-transition: 0.5s; + transition: 0.5s; +} + +.form__label { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + color: #222222; + font-family: "Lato", sans-serif; + font-size: 16px; + font-weight: 700; + text-transform: uppercase; +} + +.form__label select { + width: 355px; + height: 45px; + border: 1px solid #eaeaea; + background-color: #ffffff; + padding-left: 18px; + margin-bottom: 20px; + margin-top: 22px; + color: #b1b1b1; + font-family: "Lato", sans-serif; + font-size: 13px; + font-weight: bold; +} + +.form__label input { + width: 355px; + height: 45px; + border: 1px solid #eaeaea; + background-color: #ffffff; + padding-left: 18px; + margin-bottom: 20px; + color: #b1b1b1; + font-family: "Lato", sans-serif; + font-size: 13px; + font-weight: bold; +} + +.discount__title { + padding-bottom: 28px; + color: #222222; + font-family: "Lato", sans-serif; + font-size: 16px; + font-weight: 700; + text-transform: uppercase; +} + +.discount__subtitle { + padding-bottom: 24px; + color: #000000; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: bold; +} + +.discount__form button { + width: 118px; + height: 35px; + border: 1px solid #eaeaea; + background-color: #ffffff; + color: #4a4a4a; + font-family: "Lato", sans-serif; + font-size: 11px; + font-weight: 700; + text-transform: uppercase; +} + +.discount__form button:hover { + background-color: #f16d7f; + -webkit-transition: 0.5s; + transition: 0.5s; +} + +.discount__form input { + width: 355px; + height: 45px; + border: 1px solid #eaeaea; + background-color: #ffffff; + padding-left: 18px; + margin-bottom: 25px; + color: #b1b1b1; + font-family: "Lato", sans-serif; + font-size: 13px; + font-weight: bold; +} + +.details__total { + width: 360px; + height: 214px; + background-color: #f5f3f3; + text-align: right; + padding: 40px; +} + +.total__sub { + padding-bottom: 14px; + color: #4a4a4a; + font-family: "Lato", sans-serif; + font-size: 11px; + font-weight: 400; + text-transform: uppercase; +} + +.total__grand { + padding-bottom: 14px; + border-bottom: 1px solid #e2e2e2; + color: #222222; + font-family: "Lato", sans-serif; + font-size: 16px; + font-weight: 700; + text-transform: uppercase; +} + +.total__grand span { + color: #f16d7f; +} + +.total__button button { + width: 273px; + height: 50px; + background-color: #f16d7f; + color: #ffffff; + font-family: "Lato", sans-serif; + font-size: 16px; + font-weight: 700; + text-transform: uppercase; + margin-top: 17px; +} diff --git a/HomeWork_3/img/Icons/action__icon.png b/HomeWork_3/img/Icons/action__icon.png new file mode 100644 index 0000000..8cb4a7b Binary files /dev/null and b/HomeWork_3/img/Icons/action__icon.png differ diff --git a/HomeWork_3/img/Icons/cart_icon.png b/HomeWork_3/img/Icons/cart_icon.png new file mode 100644 index 0000000..3751e07 Binary files /dev/null and b/HomeWork_3/img/Icons/cart_icon.png differ diff --git a/HomeWork_3/img/Icons/dropdown_arrow.png b/HomeWork_3/img/Icons/dropdown_arrow.png new file mode 100644 index 0000000..056999e Binary files /dev/null and b/HomeWork_3/img/Icons/dropdown_arrow.png differ diff --git a/HomeWork_3/img/Icons/dropdown_arrow.svg b/HomeWork_3/img/Icons/dropdown_arrow.svg new file mode 100644 index 0000000..6c56359 --- /dev/null +++ b/HomeWork_3/img/Icons/dropdown_arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/HomeWork_3/img/Icons/dropdown_arrow_white.png b/HomeWork_3/img/Icons/dropdown_arrow_white.png new file mode 100644 index 0000000..1265517 Binary files /dev/null and b/HomeWork_3/img/Icons/dropdown_arrow_white.png differ diff --git a/HomeWork_3/img/Icons/form_cart.svg b/HomeWork_3/img/Icons/form_cart.svg new file mode 100644 index 0000000..291c34e --- /dev/null +++ b/HomeWork_3/img/Icons/form_cart.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/HomeWork_3/img/Icons/heart_icon.svg b/HomeWork_3/img/Icons/heart_icon.svg new file mode 100644 index 0000000..ddaceb9 --- /dev/null +++ b/HomeWork_3/img/Icons/heart_icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/HomeWork_3/img/Icons/icon_cart_white.png b/HomeWork_3/img/Icons/icon_cart_white.png new file mode 100644 index 0000000..32c4fe2 Binary files /dev/null and b/HomeWork_3/img/Icons/icon_cart_white.png differ diff --git a/HomeWork_3/img/Icons/icon_cart_white.svg b/HomeWork_3/img/Icons/icon_cart_white.svg new file mode 100644 index 0000000..417c789 --- /dev/null +++ b/HomeWork_3/img/Icons/icon_cart_white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/HomeWork_3/img/Icons/logo_icon.png b/HomeWork_3/img/Icons/logo_icon.png new file mode 100644 index 0000000..189ccb5 Binary files /dev/null and b/HomeWork_3/img/Icons/logo_icon.png differ diff --git a/HomeWork_3/img/Icons/right_white_arrow.png b/HomeWork_3/img/Icons/right_white_arrow.png new file mode 100644 index 0000000..4e92e5e Binary files /dev/null and b/HomeWork_3/img/Icons/right_white_arrow.png differ diff --git a/HomeWork_3/img/Icons/right_white_arrow.svg b/HomeWork_3/img/Icons/right_white_arrow.svg new file mode 100644 index 0000000..0220c5d --- /dev/null +++ b/HomeWork_3/img/Icons/right_white_arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/HomeWork_3/img/Icons/round_arrow.svg b/HomeWork_3/img/Icons/round_arrow.svg new file mode 100644 index 0000000..a0aea45 --- /dev/null +++ b/HomeWork_3/img/Icons/round_arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/HomeWork_3/img/Icons/serch_icon.png b/HomeWork_3/img/Icons/serch_icon.png new file mode 100644 index 0000000..fe84bc1 Binary files /dev/null and b/HomeWork_3/img/Icons/serch_icon.png differ diff --git a/HomeWork_3/img/Icons/service_icon_1.svg b/HomeWork_3/img/Icons/service_icon_1.svg new file mode 100644 index 0000000..3323795 --- /dev/null +++ b/HomeWork_3/img/Icons/service_icon_1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/HomeWork_3/img/Icons/service_icon_2.svg b/HomeWork_3/img/Icons/service_icon_2.svg new file mode 100644 index 0000000..89ec76a --- /dev/null +++ b/HomeWork_3/img/Icons/service_icon_2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/HomeWork_3/img/Icons/service_icon_3.svg b/HomeWork_3/img/Icons/service_icon_3.svg new file mode 100644 index 0000000..0198d6e --- /dev/null +++ b/HomeWork_3/img/Icons/service_icon_3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/HomeWork_3/img/Images/Image.jpg b/HomeWork_3/img/Images/Image.jpg new file mode 100644 index 0000000..703fc6a Binary files /dev/null and b/HomeWork_3/img/Images/Image.jpg differ diff --git a/HomeWork_3/img/Images/Shopping_cart_img_1.jpg b/HomeWork_3/img/Images/Shopping_cart_img_1.jpg new file mode 100644 index 0000000..ac62cd4 Binary files /dev/null and b/HomeWork_3/img/Images/Shopping_cart_img_1.jpg differ diff --git a/HomeWork_3/img/Images/also-like-img-1.jpg b/HomeWork_3/img/Images/also-like-img-1.jpg new file mode 100644 index 0000000..a16cf65 Binary files /dev/null and b/HomeWork_3/img/Images/also-like-img-1.jpg differ diff --git a/HomeWork_3/img/Images/also-like-img-2.jpg b/HomeWork_3/img/Images/also-like-img-2.jpg new file mode 100644 index 0000000..b295e84 Binary files /dev/null and b/HomeWork_3/img/Images/also-like-img-2.jpg differ diff --git a/HomeWork_3/img/Images/also-like-img-3.jpg b/HomeWork_3/img/Images/also-like-img-3.jpg new file mode 100644 index 0000000..e79b881 Binary files /dev/null and b/HomeWork_3/img/Images/also-like-img-3.jpg differ diff --git a/HomeWork_3/img/Images/also-like-img-4.jpg b/HomeWork_3/img/Images/also-like-img-4.jpg new file mode 100644 index 0000000..a55cc84 Binary files /dev/null and b/HomeWork_3/img/Images/also-like-img-4.jpg differ diff --git a/HomeWork_3/img/Images/catalog_img_1.jpg b/HomeWork_3/img/Images/catalog_img_1.jpg new file mode 100644 index 0000000..d90d82d Binary files /dev/null and b/HomeWork_3/img/Images/catalog_img_1.jpg differ diff --git a/HomeWork_3/img/Images/catalog_img_2.jpg b/HomeWork_3/img/Images/catalog_img_2.jpg new file mode 100644 index 0000000..ccd91c2 Binary files /dev/null and b/HomeWork_3/img/Images/catalog_img_2.jpg differ diff --git a/HomeWork_3/img/Images/catalog_img_3.jpg b/HomeWork_3/img/Images/catalog_img_3.jpg new file mode 100644 index 0000000..f156992 Binary files /dev/null and b/HomeWork_3/img/Images/catalog_img_3.jpg differ diff --git a/HomeWork_3/img/Images/catalog_img_4.jpg b/HomeWork_3/img/Images/catalog_img_4.jpg new file mode 100644 index 0000000..cb8fa39 Binary files /dev/null and b/HomeWork_3/img/Images/catalog_img_4.jpg differ diff --git a/HomeWork_3/img/Images/catalog_img_5.jpg b/HomeWork_3/img/Images/catalog_img_5.jpg new file mode 100644 index 0000000..5e50f48 Binary files /dev/null and b/HomeWork_3/img/Images/catalog_img_5.jpg differ diff --git a/HomeWork_3/img/Images/catalog_img_6.jpg b/HomeWork_3/img/Images/catalog_img_6.jpg new file mode 100644 index 0000000..e38b152 Binary files /dev/null and b/HomeWork_3/img/Images/catalog_img_6.jpg differ diff --git a/HomeWork_3/img/Images/catalog_img_7.jpg b/HomeWork_3/img/Images/catalog_img_7.jpg new file mode 100644 index 0000000..a45a175 Binary files /dev/null and b/HomeWork_3/img/Images/catalog_img_7.jpg differ diff --git a/HomeWork_3/img/Images/catalog_img_8.jpg b/HomeWork_3/img/Images/catalog_img_8.jpg new file mode 100644 index 0000000..9c8da71 Binary files /dev/null and b/HomeWork_3/img/Images/catalog_img_8.jpg differ diff --git a/HomeWork_3/img/Images/catalog_img_9.jpg b/HomeWork_3/img/Images/catalog_img_9.jpg new file mode 100644 index 0000000..9b2eb47 Binary files /dev/null and b/HomeWork_3/img/Images/catalog_img_9.jpg differ diff --git a/HomeWork_3/img/Images/main_bg.jpg b/HomeWork_3/img/Images/main_bg.jpg new file mode 100644 index 0000000..0372d0e Binary files /dev/null and b/HomeWork_3/img/Images/main_bg.jpg differ diff --git a/HomeWork_3/img/Images/main_bg.webp b/HomeWork_3/img/Images/main_bg.webp new file mode 100644 index 0000000..b1e4e6b Binary files /dev/null and b/HomeWork_3/img/Images/main_bg.webp differ diff --git a/HomeWork_3/img/Images/quote_image.jpg b/HomeWork_3/img/Images/quote_image.jpg new file mode 100644 index 0000000..d06911b Binary files /dev/null and b/HomeWork_3/img/Images/quote_image.jpg differ diff --git a/HomeWork_3/img/Images/quote_image.png b/HomeWork_3/img/Images/quote_image.png new file mode 100644 index 0000000..9849ec8 Binary files /dev/null and b/HomeWork_3/img/Images/quote_image.png differ diff --git a/HomeWork_3/img/Images/section_image_accesories.jpg b/HomeWork_3/img/Images/section_image_accesories.jpg new file mode 100644 index 0000000..46ff4f2 Binary files /dev/null and b/HomeWork_3/img/Images/section_image_accesories.jpg differ diff --git a/HomeWork_3/img/Images/section_image_kids.jpg b/HomeWork_3/img/Images/section_image_kids.jpg new file mode 100644 index 0000000..ba470ed Binary files /dev/null and b/HomeWork_3/img/Images/section_image_kids.jpg differ diff --git a/HomeWork_3/img/Images/section_image_men.jpg b/HomeWork_3/img/Images/section_image_men.jpg new file mode 100644 index 0000000..0af4735 Binary files /dev/null and b/HomeWork_3/img/Images/section_image_men.jpg differ diff --git a/HomeWork_3/img/Images/section_image_woman.jpg b/HomeWork_3/img/Images/section_image_woman.jpg new file mode 100644 index 0000000..8d0f8a8 Binary files /dev/null and b/HomeWork_3/img/Images/section_image_woman.jpg differ diff --git a/HomeWork_3/img/Images/shopping_cart_img_2.jpg b/HomeWork_3/img/Images/shopping_cart_img_2.jpg new file mode 100644 index 0000000..d36955b Binary files /dev/null and b/HomeWork_3/img/Images/shopping_cart_img_2.jpg differ diff --git a/HomeWork_3/img/Images/shopping_cart_img_3.jpg b/HomeWork_3/img/Images/shopping_cart_img_3.jpg new file mode 100644 index 0000000..3d0476b Binary files /dev/null and b/HomeWork_3/img/Images/shopping_cart_img_3.jpg differ diff --git a/HomeWork_3/img/Images/single_page_img.jpg b/HomeWork_3/img/Images/single_page_img.jpg new file mode 100644 index 0000000..74fff0a Binary files /dev/null and b/HomeWork_3/img/Images/single_page_img.jpg differ diff --git a/HomeWork_3/img/Images/sort_dropdown.svg b/HomeWork_3/img/Images/sort_dropdown.svg new file mode 100644 index 0000000..beac0cb --- /dev/null +++ b/HomeWork_3/img/Images/sort_dropdown.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/HomeWork_3/img/featured_items/featured_items_1.jpg b/HomeWork_3/img/featured_items/featured_items_1.jpg new file mode 100644 index 0000000..aaff14e Binary files /dev/null and b/HomeWork_3/img/featured_items/featured_items_1.jpg differ diff --git a/HomeWork_3/img/featured_items/featured_items_2.jpg b/HomeWork_3/img/featured_items/featured_items_2.jpg new file mode 100644 index 0000000..6013086 Binary files /dev/null and b/HomeWork_3/img/featured_items/featured_items_2.jpg differ diff --git a/HomeWork_3/img/featured_items/featured_items_3.jpg b/HomeWork_3/img/featured_items/featured_items_3.jpg new file mode 100644 index 0000000..f156992 Binary files /dev/null and b/HomeWork_3/img/featured_items/featured_items_3.jpg differ diff --git a/HomeWork_3/img/featured_items/featured_items_4.jpg b/HomeWork_3/img/featured_items/featured_items_4.jpg new file mode 100644 index 0000000..e7f2fb9 Binary files /dev/null and b/HomeWork_3/img/featured_items/featured_items_4.jpg differ diff --git a/HomeWork_3/img/featured_items/featured_items_5.jpg b/HomeWork_3/img/featured_items/featured_items_5.jpg new file mode 100644 index 0000000..cdbd841 Binary files /dev/null and b/HomeWork_3/img/featured_items/featured_items_5.jpg differ diff --git a/HomeWork_3/img/featured_items/featured_items_6.jpg b/HomeWork_3/img/featured_items/featured_items_6.jpg new file mode 100644 index 0000000..8bb8da4 Binary files /dev/null and b/HomeWork_3/img/featured_items/featured_items_6.jpg differ diff --git a/HomeWork_3/img/featured_items/featured_items_7.jpg b/HomeWork_3/img/featured_items/featured_items_7.jpg new file mode 100644 index 0000000..08e391d Binary files /dev/null and b/HomeWork_3/img/featured_items/featured_items_7.jpg differ diff --git a/HomeWork_3/img/featured_items/featured_items_8.jpg b/HomeWork_3/img/featured_items/featured_items_8.jpg new file mode 100644 index 0000000..6d908e6 Binary files /dev/null and b/HomeWork_3/img/featured_items/featured_items_8.jpg differ diff --git a/HomeWork_3/index.html b/HomeWork_3/index.html new file mode 100644 index 0000000..88945f5 --- /dev/null +++ b/HomeWork_3/index.html @@ -0,0 +1,361 @@ + + + + + + + + + Main Page + + + + + + + + + + + +
+
+
+
+
+
+ +
+
+ +
+
+ + +
+
+
+
+
+ cart +
+ +
+
+
+
+ Home + Man + Women + Kids + Accoseriese + Featured + Hot Deals +
+
+
+
+
+

THE BRAND

+

OF LUXERIOUS FASHION

+
+
+
+
+
+
+
+

hot deal

+

for man

+
+ for man + +
+
+
+

LUXIROUS & trendy

+ +

ACCESORIES

+
+ accesories +
+
+
+
+
+

30% offer

+

women

+
+ for women +
+
+
+

new arrivals

+

FOR kids

+
+ for kids +
+
+
+
+
+

Fetured Items

+

Shop for items based on what we featured in this week

+
+
+
+
+
+ Add to cart +
+
+ white T-shirt +
Mango People T-shirt
+
$52.00
+
+
+
+
+ Add to cart +
+
+ white T-shirt +
Mango People T-shirt
+
$52.00
+
+
+
+
+ Add to cart +
+
+ white T-shirt +
Mango People T-shirt
+
$52.00
+
+
+
+
+ Add to cart +
+
+ white T-shirt +
Mango People T-shirt
+
$52.00
+
+
+
+
+ Add to cart +
+
+ white T-shirt +
Mango People T-shirt
+
$52.00
+
+
+
+
+ Add to cart +
+
+ white T-shirt +
Mango People T-shirt
+
$52.00
+
+
+
+
+ Add to cart +
+
+ white T-shirt +
Mango People T-shirt
+
$52.00
+
+
+
+
+ Add to cart +
+
+ white T-shirt +
Mango People T-shirt
+
$52.00
+
+
+
+ +
+
+
+
+

30% OFFER

+ FOR WOMEN +
+
+
+
+ delivery icon +
+
+
Free Delivery
+
Worldwide delivery on all. Authorit tively morph next-generation + innov tion with extensive models.
+
+
+
+
+ delivery icon +
+
+
Sales & discounts
+
Worldwide delivery on all. Authorit tively morph next-generation + innov tion with extensive models.
+
+
+
+
+ delivery icon +
+
+
Quality assurance
+
Worldwide delivery on all. Authorit tively morph next-generation + innov tion with extensive models.
+
+
+ +
+
+ +
+
+
+
+ +
+

Objectively transition extensive data rather than cross functional solutions. Monotonectally + syndicate multidisciplinary materials before go forward benefits. Intrinsicly syndicate an + expanded array of processes and cross-unit partnerships.

+

Efficiently plagiarize 24/365 action items and focused infomediaries. + Distinctively seize superior initiatives for wireless technologies. Dynamically optimize.

+
+
+
+
+
COMPANY
+
+ +
+ +
+
+
information
+
+ +
+
+
+
shop category
+
+ +
+ +
+ +
+
+
+
+
+
+ © 2017 Brand All Rights Reserved. +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+ + + + + + + + \ No newline at end of file diff --git a/HomeWork_3/productsPage.html b/HomeWork_3/productsPage.html new file mode 100644 index 0000000..05aa4b4 --- /dev/null +++ b/HomeWork_3/productsPage.html @@ -0,0 +1,460 @@ + + + + + + + + + Products Page + + + + + + + + + + + +
+
+
+
+
+
+ +
+
+ +
+
+ + +
+
+
+
+
+ cart +
+ +
+
+
+
+ Home + Man + Women + Kids + Accoseriese + Featured + Hot Deals +
+
+
+
+
New Arrivals
+
+ Home / + Men / + New Arrivals +
+
+
+
+
+
+
+
+

Category

+ + +
+
+ +
+
+
+
+

brand

+ +
+
+
+
+

designer

+ +
+
+
+
+
+
+
+
+
+

Trending now

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

size

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

price

+
+
+ + +
+
+
+
+ + +
+
+
+
+
+
+ Add to cart + +
+
+ white T-shirt +
Mango People T-shirt
+
$52.00
+
+
+
+
+ Add to cart + +
+
+ white T-shirt +
Mango People T-shirt
+
$52.00
+
+
+
+
+ Add to cart + +
+
+ white T-shirt +
Mango People T-shirt
+
$52.00
+
+
+
+
+ Add to cart + +
+
+ white T-shirt +
Mango People T-shirt
+
$52.00
+
+
+
+
+ Add to cart + +
+
+ white T-shirt +
Mango People T-shirt
+
$52.00
+
+
+
+
+ Add to cart + +
+
+ white T-shirt +
Mango People T-shirt
+
$52.00
+
+
+
+
+ Add to cart + +
+
+ white T-shirt +
Mango People T-shirt
+
$52.00
+
+
+
+
+ Add to cart + +
+
+ white T-shirt +
Mango People T-shirt
+
$52.00
+
+
+
+
+ Add to cart + +
+
+ white T-shirt +
Mango People T-shirt
+
$52.00
+
+ +
+
+
+
+ 1 2 3 4 5 6 ...20 +
+
+
+ +
+
+ +
+
+
+
+
+
+ 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.
+
+
+
+ +
+
+
+
+ +
+

Objectively transition extensive data rather than cross functional solutions. Monotonectally + syndicate multidisciplinary materials before go forward benefits. Intrinsicly syndicate an + expanded array of processes and cross-unit partnerships.

+

Efficiently plagiarize 24/365 action items and focused infomediaries. + Distinctively seize superior initiatives for wireless technologies. Dynamically optimize.

+
+
+
+
+
COMPANY
+
+ +
+ +
+
+
information
+
+ +
+
+
+
shop category
+
+ +
+ +
+ +
+
+
+
+
+
+ © 2017 Brand All Rights Reserved. +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+ + + + + + + + + \ No newline at end of file diff --git a/HomeWork_3/scss/_resetStyle.scss b/HomeWork_3/scss/_resetStyle.scss new file mode 100644 index 0000000..0243706 --- /dev/null +++ b/HomeWork_3/scss/_resetStyle.scss @@ -0,0 +1,17 @@ +/* Обнуление */ +*{padding: 0;margin: 0;border: 0;} +*,*:before,*:after{-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;} +:focus,:active{outline: none;} +a:focus,a:active{outline: none;} +nav, footer, header, aside{display: block;} +html,body{height: 100%;width: 100%;font-size: 100%;line-height: 1;font-size: 14px;-ms-text-size-adjust: 100%;-moz-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;} +input,button,textarea{font-family: inherit;} +input::-ms-clear{display:none;} +button{cursor: pointer;} +button::-moz-focus-inner{padding:0;border:0;} +a,a:visited{text-decoration: none;} +a:hover{text-decoration: none;} +ul li{list-style: none;} +img{vertical-align: top;} +h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight: inherit;} + diff --git a/HomeWork_3/scss/style.scss b/HomeWork_3/scss/style.scss new file mode 100644 index 0000000..7ad95b0 --- /dev/null +++ b/HomeWork_3/scss/style.scss @@ -0,0 +1,1745 @@ +@import "_resetStyle"; + +.wrapper { + margin: 0 auto; +} + +.container { + margin: 0 auto; +} + +// Верхняя часть Header +.container__topline { + display: flex; + align-items: center; + height: 100px; + max-width: 1141px; + justify-content: space-between; + margin: 0 auto; +} +.topline__wrapper { + display: flex; +} +.header { + &__topline { + border-bottom: 1px solid #ececec; + } +} +.topline { + &__logo { + display: flex; + font-size: 27px; + align-items: center; + p { + padding-left: 13px; + color: #222222; + text-transform: uppercase; + font-family: "Lato", sans-serif; + font-weight: 300; + letter-spacing: 0.68px; + cursor: pointer; + } + span { + color: #f16d7f; + font-family: "Lato", sans-serif; + font-weight: bold; + letter-spacing: 0.68px; + line-height: normal; + } + } +} +.topline__navigation { + display: flex; + align-items: center; + padding-left: 37px; +} +.navigation { + &__browse { + padding-left: -50px; + button { + color: #222222; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: 300; + line-height: 32px; + width: 87px; + height: 40px; + border-radius: 3px 0 0 3px; + border: 1px solid #e6e6e6; + background-color: #cdcdcc; + background-image: linear-gradient(to bottom, #f9f9f9 0%, #f5f5f5 100%); + } + button::after { + content: url(../img/Icons/dropdown_arrow.png); + padding-left: 8px; + } + } + + &__serch { + border-radius: 0 3px 3px 0; + border: 1px solid #e6e6e6; + background-color: #ffffff; + display: flex; + padding-left: 16px; + input { + width: 317px; + height: 38px; + } + input[placeholder] { + color: #a4a4a4; + font-family: "Lato", sans-serif; + font-size: 16px; + font-weight: 300; + } + button { + border-left: 1px solid #e6e6e6; + background-color: #ffffff; + height: 38px; + width: 36px; + } + } +} + +.topline { + &__personals { + display: flex; + align-items: center; + } +} +.personals { + &__cart { + width: 32px; + height: 29px; + } + + &__account { + padding-left: 26px; + button { + width: 130px; + height: 38px; + background-color: #f16d7f; + color: #ffffff; + font-family: "Lato", sans-serif; + font-size: 15px; + font-weight: 400; + line-height: 32px; + } + button:hover { + background-color: #ec5264; + transition: 0.5s; + } + button:active { + background-color: #b12e3d; + } + + button::after { + content: url(../img/Icons/dropdown_arrow_white.png); + padding-left: 8px; + } + } +} + +// Нижняя часть Header(Menu) + +.header { + &__bottomline :last-child { + padding-right: 0; + } + &__bottomline { + text-align: center; + padding-top: 19px; + padding-bottom: 22px; + a { + padding-right: 46px; + color: #222222; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: 700; + line-height: 26px; + text-transform: uppercase; + } + } +} +// Основной контент первой страницы + +.content { + background-image: url(../img/Images/main_bg.jpg); + background-size: contain; + background-repeat: no-repeat; + background-position: center; + background-color: #e8e8e8; + + &__offer { + padding-top: 276px; + padding-bottom: 285px; + max-width: 1140px; + margin: 0 auto; + } +} +.offer__text { + position: relative; + h1 { + color: #222222; + font-family: "Lato", sans-serif; + font-weight: 900; + text-transform: uppercase; + font-size: 60px; + letter-spacing: 1.5px; + } + p { + font-family: "Lato", sans-serif; + font-style: normal; + letter-spacing: 1px; + font-size: 40px; + font-weight: 700; + } + span { + color: #f16d7f; + } +} +.offer__text::before { + content: ""; + position: absolute; + left: -24px; + top: 9px; + width: 12px; + height: 100%; + background-color: #f16d7f; +} + +// Второй БЛОК + +.block { + &__sections { + max-width: 1141px; + display: flex; + flex-wrap: wrap; + margin: 0 auto; + justify-content: space-between; + margin-top: 98px; + } +} +.sections { + &__item { + max-width: 560px; + padding-bottom: 20px; + position: relative; + } +} +.item { + &__lable { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + position: absolute; + top: 26px; + height: 82px; + background-color: #ffffff; + min-width: 165px; + padding: 0 20px; + + :last-child { + color: #f16d7f; + font-size: 30px; + letter-spacing: 0.75px; + padding-bottom: 0; + } + + p { + color: #222222; + font-family: "Lato", sans-serif; + font-size: 18px; + font-weight: 900; + text-transform: uppercase; + padding-bottom: 10px; + text-align: left; + } + } +} + +/* fetured items BLOCK */ + +.fetured { + &__items { + max-width: 1140px; + margin: 0 auto; + } +} +.items { + &__header { + margin-top: 100px; + h3 { + color: #222222; + font-family: "Lato", sans-serif; + font-size: 30px; + font-weight: 700; + letter-spacing: 0.75px; + text-align: center; + } + p { + color: #9f9f9f; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: 400; + text-align: center; + padding-top: 16px; + } + } + + &__list { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + margin-top: 60px; + } +} +.list { + &__item { + display: flex; + flex-direction: column; + justify-content: space-between; + max-width: 263px; + max-height: 364px; + margin-bottom: 40px; + cursor: pointer; + } +} +.item__hover { + position: relative; +} +.list__item:hover { + box-shadow: 0 5px 8px rgba(0, 0, 0, 0.16); +} + +.list__item:hover .hover__btn { + visibility: visible; +} + +.hover { + &__btn { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 279px; + display: flex; + justify-content: center; + align-items: center; + background-color: #3a383871; + visibility: hidden; + cursor: pointer; + + span { + position: relative; + border: 1px solid white; + padding: 15px 13px 14px 43px; + color: #ffffff; + font-family: "Lato", sans-serif; + font-size: 13px; + font-weight: 700; + cursor: pointer; + } + } +} +.hover__btn span::before { + content: url(../img/Icons/icon_cart_white.svg); + position: absolute; + left: 8px; + top: 10px; +} + +.item { + &__title { + color: #222222; + font-family: "Lato", sans-serif; + font-size: 13px; + font-weight: bold; + text-align: left; + text-transform: uppercase; + padding-top: 20px; + padding-left: 14px; + } + + &__price { + padding-bottom: 20px; + padding-top: 17px; + color: #f16d7f; + font-family: "Lato", sans-serif; + font-size: 16px; + font-weight: 700; + text-transform: uppercase; + padding-left: 14px; + } +} + +.items__button { + text-align: center; + margin-top: 19px; + button { + position: relative; + width: 212px; + height: 48px; + background-color: #f16d7f; + color: #ffffff; + font-family: "Lato", sans-serif; + font-size: 16px; + font-weight: 700; + padding-right: 18px; + } + button:hover { + background-color: #ec5264; + transition: 0.5s; + } + button:active { + background-color: #b12e3d; + } +} +.items__button button::after { + content: url(../img/Icons/right_white_arrow.png); + position: absolute; + right: 20px; + top: 12px; +} + +// Блок сервисы + +.block { + &__serwices { + max-width: 1140px; + margin: 0 auto; + display: flex; + margin-top: 113px; + } +} +.serwices { + &__offer { + width: 767px; + height: 529px; + background-image: url(../img/Images/Image.jpg); + background-repeat: no-repeat; + padding-left: 39px; + padding-top: 146px; + p { + color: #ffffff; + font-family: "Lato", sans-serif; + font-size: 54px; + font-weight: 700; + text-transform: uppercase; + span { + color: #f16d7f; + letter-spacing: 1.5px; + } + } + > span { + font-size: 32px; + letter-spacing: 0.9px; + color: #ffffff; + font-family: "Lato", sans-serif; + } + } + + &__items { + max-width: 373px; + background-color: #222224; + height: 529px; + display: flex; + flex-direction: column; + justify-content: space-around; + padding-left: 36px; + padding-right: 43px; + } +} + +.items { + &__serwice { + display: flex; + margin-bottom: 18px; + } +} +.serwice { + &__info { + padding-left: 30px; + } +} +.info { + &__title { + color: #fbfbfb; + font-family: "Lato", sans-serif; + font-size: 20px; + font-weight: 700; + text-align: left; + } + + &__description { + color: #fbfbfb; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: 300; + text-align: left; + padding-top: 17px; + width: 219px; + line-height: 24px; + } +} + +// Блок SUBSCRIBE + +.block { + &__subscribe { + max-width: 1600px; + margin: 0 auto; + background-image: url(../img/Images/quote_image.jpg); + } +} +.wrapper { + &__subscribe { + max-width: 1140px; + display: flex; + margin: 0 auto; + margin-top: 100px; + justify-content: space-between; + } +} +.vertical__line { + width: 1px; + height: 438px; + background-color: #ffffff; + text-align: center; + align-items: center; +} +.subscribe { + &__quote { + display: flex; + max-width: 497px; + padding: 111px 0 156px 0; + } + + &__form { + max-width: 386px; + padding-top: 148px; + text-align: center; + margin-right: 92px; + } +} +.quote { + &__text { + padding-left: 28px; + } + &__controls { + width: 38px; + height: 4px; + background-color: #f16d7f; + margin-left: 52px; + margin-top: 41px; + position: relative; + } +} +.quote__controls span::before { + content: ""; + width: 38px; + height: 4px; + background-color: #d6d6d6; + position: absolute; + right: 50px; +} +.quote__controls span::after { + content: ""; + width: 38px; + height: 4px; + background-color: #d6d6d6; + position: absolute; + left: 50px; +} +.text { + &__main { + color: #222224; + font-family: "Lato", sans-serif; + font-size: 16px; + font-style: italic; + text-align: left; + padding-bottom: 19px; + } + + &__author { + color: #f16d7f; + font-family: "Lato", sans-serif; + font-size: 16px; + font-weight: 700; + text-align: left; + letter-spacing: 0.4px; + } + + &__place { + font-family: "Lato", sans-serif; + font-size: 12px; + font-weight: 300; + letter-spacing: 0.3px; + } +} +.form { + &__title { + color: #222224; + font-family: "Lato", sans-serif; + font-weight: 400; + text-align: center; + font-size: 24px; + letter-spacing: 0.6px; + text-transform: uppercase; + } + + &__subtitle { + color: #222224; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: 400; + text-align: center; + padding-top: 12px; + padding-bottom: 35px; + } + + &__input { + display: flex; + position: relative; + input { + width: 334px; + height: 46px; + border-radius: 23px; + background-color: #e1e1e1; + padding-left: 28px; + } + input:focus { + box-shadow: 0 5px 8px rgba(0, 0, 0, 0.16); + } + input::placeholder { + color: #22222475; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: bold; + } + button { + width: 104px; + height: 46px; + border-radius: 0 23px 23px 0; + background-color: #f16d7f; + position: absolute; + right: 0; + color: #ffffff; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: 400; + } + button:hover { + background-color: #ec5264; + transition: 0.5s; + } + button:active { + background-color: #b12e3d; + } + } +} + +// FOOTER Блок + +.footer { + &__main { + max-width: 1140px; + margin: 0 auto; + } +} + +.main { + &__columns { + display: flex; + justify-content: space-between; + margin-top: 123px; + margin-bottom: 97px; + :last-child { + padding-right: 0; + } + } +} +.columns { + &__row { + padding-right: 80px; + } + + &__navigation { + display: flex; + } +} +.row { + &__title { + color: #f16d7f; + font-family: "Lato", sans-serif; + font-size: 18px; + font-weight: 700; + text-transform: uppercase; + padding-bottom: 50px; + } +} +.list__items li { + padding-bottom: 30px; + color: #898989; + font-family: "Lato", sans-serif; + font-size: 16px; + font-weight: 400; + a { + color: #898989; + } +} +.list__items li:last-child { + padding-bottom: 0; +} +.about { + &__logo { + padding-bottom: 17px; + } +} +.about { + &__text { + max-width: 428px; + color: #898989; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: 300; + text-align: left; + line-height: 24px; + p { + padding-bottom: 35px; + } + :last-child { + padding: 0; + } + } +} + +// BottomFooter + +.footer { + &__bottom { + background-color: #e6e6e6; + } +} +.wrapper { + &__bottom { + max-width: 1140px; + margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: center; + min-height: 79px; + } +} +.bottom { + &__rights { + color: #7a7a7a; + font-family: "Lato", sans-serif; + font-size: 16px; + font-weight: 400; + } + + &__socials { + display: flex; + a { + color: #b2b2b2; + } + } +} +.socials { + &__item { + a { + width: 32px; + height: 32px; + background-color: #ffffff; + display: flex; + justify-content: center; + align-items: center; + margin-right: 8px; + } + :hover { + background-color: #f16d7f; + transition: 0.5s; + } + :active { + background-color: #ededed; + } + } +} + +// slider BLOCK + +.slider { + &__breadcramps { + background-color: #f8f3f4; + margin: 0 auto; + } +} +.breadcramps { + margin: 0 auto; + max-width: 1140px; + display: flex; + justify-content: space-between; + align-items: center; + height: 148px; + + &__title { + color: #f16d7f; + font-family: "Lato", sans-serif; + font-size: 24px; + font-weight: bold; + line-height: 20px; + text-transform: uppercase; + } + + &__nav { + a { + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: 700; + text-transform: uppercase; + color: #636363; + font-family: "Lato Light"; + font-weight: 300; + } + :last-child { + color: #f16d7f; + font-family: "Lato", sans-serif; + font-weight: 700; + } + } +} + +.slider { + &__box { + max-width: 1600px; + margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: center; + background-color: #f7f7f7; + border: 1px solid #eaeaea; + } +} +.box { + &__controls { + span { + padding: 16px 18px 17px 21px; + background-color: #d8d8d8; + color: #ffffff; + cursor: pointer; + } + } +} + +//product BLOCK + +.product { + max-width: 1140px; + text-align: center; + margin: 0 auto; + border: 1px solid #eaeaea; + margin-top: -50px; + background-color: #ffffff; + position: relative; + z-index: 5; + + &__info { + max-width: 642px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin: 0 auto; + border-bottom: 1px solid #eaeaea; + } +} +.info { + &__collection { + color: #f16d7f; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: 700; + text-align: center; + text-transform: uppercase; + padding-top: 73px; + ::after { + content: ""; + width: 63px; + height: 3px; + background-color: #ef5b70; + position: absolute; + bottom: -2px; + right: 43px; + } + + h4 { + border-bottom: 1px solid #eaeaea; + padding-bottom: 15px; + position: relative; + } + } + + &__name { + color: #4d4d4d; + font-family: "Lato", sans-serif; + font-size: 18px; + font-weight: bold; + padding-top: 18px; + text-transform: uppercase; + } + + &__about { + p { + color: #5e5e5e; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: 300; + + line-height: 24px; + padding-top: 67px; + padding-bottom: 28px; + } + } + + &__ditails { + color: #b9b9b9; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: 700; + text-transform: uppercase; + padding-bottom: 37px; + :last-child { + padding-right: 0; + } + span { + padding-right: 44px; + } + span > span { + color: #2f2f2f; + } + } + + &__price { + color: #ef5b70; + font-family: "Lato", sans-serif; + font-size: 24px; + font-weight: 700; + padding-bottom: 43px; + } +} + +//Form BLOCK + +.cart-form__label { + display: flex; + flex-direction: column; + max-width: 145px; + margin-top: 63px; + + font-family: sans-serif; + font-size: 14px; + text-transform: uppercase; + font-weight: 700; +} + +.cart-form__field { + margin-top: 10px; + padding: 10px; + + border: 1px solid #eaeaea; + background-color: transparent; +} + +.cart-form__field:focus { + outline: none; + border-color: #ef5b6f; +} + +.cart-form { + width: 535px; + margin: 0 auto; + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.cart-form__submit { + width: 100%; + margin-top: 30px; + border: 1px solid #ef5b6f; + color: #ef5b6f; + padding: 15px 0; + background-color: transparent; + margin-bottom: 122px; + font-family: "Lato", sans-serif; + font-size: 16px; + font-weight: 700; + cursor: pointer; + position: relative; + &:hover { + background-color: #ef5b6f; + color: #fff; + } + &::before { + content: url(../img/Icons/form_cart.svg); + position: absolute; + top: 11px; + left: 186px; + } +} + +//You may also like BLCK + +.items__title { + h3 { + color: #4d4d4d; + font-family: "Lato", sans-serif; + font-size: 24px; + font-weight: bold; + text-align: center; + text-transform: uppercase; + padding-top: 119px; + } +} + +// Products Page + +.block { + &__bradcramps { + margin: 0 auto; + background-color: #f8f3f4; + } +} + +// Horizontal Services + +.block { + &__services { + max-width: 1600px; + margin: 0 auto; + background-color: #222224; + margin-bottom: -100px; + } +} +.wrapper__services { + display: flex; + justify-content: space-between; + align-items: flex-end; + max-width: 1088px; + margin: 0 auto; +} +.services { + &__item { + max-width: 308px; + text-align: center; + padding-top: 89px; + padding-bottom: 114px; + } +} +.item { + &__icon { + padding-bottom: 32px; + } + + &__name { + color: #fbfbfb; + font-family: "Lato", sans-serif; + font-size: 20px; + font-weight: 700; + padding-bottom: 17px; + } + + &__text { + color: #fbfbfb; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: 300; + line-height: 23.95px; + } +} + +//block CATALOG + +.block__catalog { + max-width: 1140px; + margin: 0 auto; + display: flex; + + margin-top: 60px; +} + +.catalog { + &__sidebar { + max-width: 243px; + } + &__content { + margin-left: 51px; + } +} + +.navigation { + &__group { + margin-bottom: 18px; + } +} +.group { + &__title { + display: flex; + justify-content: space-between; + align-items: center; + width: 243px; + color: #ef5b70; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: 700; + text-transform: uppercase; + position: relative; + border-left: 5px solid #ef5b70; + padding: 12px 0 15px 11px; + border-bottom: 1px solid #ebebeb; + cursor: pointer; + } +} +.elements { + &__list { + padding-left: 22px; + } +} +.list { + &__element { + a { + color: #6f6e6e; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 33px; + text-align: left; + } + } +} + +.sorting { + &__options { + display: flex; + width: 848px; + justify-content: space-between; + } +} +.options { + &__trending { + max-width: 177px; + } + + &__size { + max-width: 236px; + } + + &__price { + max-width: 236px; + } +} +.trending { + &__title { + color: #6f6e6e; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: 700; + text-align: left; + text-transform: uppercase; + padding-bottom: 25px; + } + + &__elements { + button { + color: #6f6e6e; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 26px; + text-align: left; + background-color: #fff; + } + + :nth-of-type(1) { + border-right: 1px solid #dfdfdf; + padding-right: 10px; + margin-right: 10px; + } + :nth-of-type(2) { + border-right: 1px solid #dfdfdf; + padding-right: 10px; + margin-right: 10px; + } + :nth-of-type(4) { + border-right: 1px solid #dfdfdf; + padding-right: 10px; + margin-right: 10px; + } + :nth-of-type(5) { + border-right: 1px solid #dfdfdf; + padding-right: 10px; + margin-right: 10px; + } + } +} + +.size { + &__title { + color: #6f6e6e; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: 700; + text-align: left; + text-transform: uppercase; + padding-bottom: 25px; + } +} +.size { + &__elements { + display: flex; + } +} +.elements { + &__wrapper { + display: flex; + flex-direction: column; + + width: 60px; + :first-child { + padding-bottom: 10px; + } + label { + color: #6f6e6e; + font-family: "Lato", sans-serif; + font-size: 13px; + font-weight: 400; + text-transform: uppercase; + } + } +} + +.price { + &__title { + color: #6f6e6e; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: 700; + line-height: 20px; + text-align: left; + text-transform: uppercase; + padding-bottom: 25px; + } + + &__range { + input { + color: #f27384; + } + } +} + +.sorting { + &__controls { + display: flex; + padding-top: 10px; + padding-bottom: 10px; + padding-left: 10px; + background-color: #f3f3f3; + margin-top: 40px; + :first-child { + width: 143px; + height: 30px; + position: relative; + display: flex; + justify-content: center; + align-items: center; + background-color: #ffffff; + border: 1px solid #ebebeb; + color: #6f6e6e; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: 400; + } + :last-child { + width: 109px; + height: 30px; + position: relative; + display: flex; + justify-content: center; + align-items: center; + background-color: #ffffff; + border: 1px solid #ebebeb; + color: #6f6e6e; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: 400; + margin-left: 10px; + } + :last-child::before { + content: "Show"; + border-right: 1px solid #ebebeb; + margin-right: 10px; + padding-right: 10px; + line-height: 28px; + background-color: #ffffff; + } + ::after { + content: url(../img/Icons/dropdown_arrow.png); + position: absolute; + top: 5px; + right: 6px; + } + :first-child::before { + content: "Sort By"; + border-right: 1px solid #ebebeb; + margin-right: 10px; + padding-right: 10px; + line-height: 28px; + background-color: #ffffff; + } + } +} + +.content { + &__cards { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + margin-top: 48px; + } +} + +.cards { + &__item { + position: relative; + margin-bottom: 38px; + } +} + +.hover2 { + &__btn { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 279px; + display: flex; + justify-content: center; + align-items: center; + background-color: #3a383871; + visibility: hidden; + cursor: pointer; + :first-child { + position: absolute; + top: 98px; + border: 1px solid white; + border-radius: 3px; + padding: 15px 13px 14px 43px; + color: #ffffff; + font-family: "Lato", sans-serif; + font-size: 13px; + font-weight: 700; + cursor: pointer; + } + :last-child::before { + content: url(../img/Icons/round_arrow.svg); + border: 1px solid white; + border-radius: 3px; + padding: 13px 17px 13px 18px; + position: absolute; + top: 147px; + left: 70px; + } + :last-child::after { + content: url(../img/Icons/heart_icon.svg); + border: 1px solid white; + border-radius: 3px; + padding: 12px 20px 9px 21px; + position: absolute; + top: 147px; + left: 133px; + } + span::before { + content: url(../img/Icons/icon_cart_white.svg); + position: absolute; + left: 8px; + top: 10px; + } + } +} + +.cards__item:hover { + box-shadow: 0 5px 8px rgba(0, 0, 0, 0.16); +} + +.cards__item:hover .hover2__btn { + visibility: visible; +} + +//Pages Control + +.content { + &__pages { + display: flex; + justify-content: space-between; + margin-bottom: 110px; + } +} +.pages { + &__button { + button { + width: 150px; + height: 44px; + border-radius: 3px; + border: 1px solid #ef5b70; + background-color: #ffffff; + color: #ef5b70; + font-family: "Lato", sans-serif; + font-size: 16px; + font-weight: bold; + } + } +} +.quantity { + &__control { + width: 261px; + height: 44px; + border-radius: 3px; + border: 1px solid #ebebeb; + background-color: #ffffff; + display: flex; + justify-content: center; + align-items: center; + color: #c4c4c4; + font-family: "Lato", sans-serif; + font-size: 16px; + font-weight: bold; + line-height: 26px; + } +} + +// Shopping Cart BLOCK + +.shopping-cart { + max-width: 1140px; + margin: 0 auto; + &__titles { + display: flex; + justify-content: space-between; + color: #222222; + font-family: "Lato", sans-serif; + font-size: 13px; + font-weight: 700; + text-align: left; + text-transform: uppercase; + margin-top: 90px; + border-bottom: 1px solid #eaeaea; + padding-bottom: 20px; + } +} +.titles { + &__details { + flex: 0 1 513px; + } +} + +.elements { + &__product { + display: flex; + justify-content: space-between; + max-width: 1140px; + margin: 0 auto; + align-items: center; + margin-top: 22px; + border-bottom: 1px solid #eaeaea; + padding-bottom: 20px; + } +} +.product { + &__details { + flex: 0 1 522px; + display: flex; + } + + &__unuteprice { + padding-right: 30px; + color: #656565; + font-family: "Lato", sans-serif; + font-size: 13px; + font-weight: bold; + } + + &__quantity { + display: flex; + justify-content: center; + align-items: center; + width: 54px; + height: 30px; + border: 1px solid #eaeaea; + background-color: #ffffff; + margin-right: 10px; + color: #656565; + font-family: "Lato", sans-serif; + font-size: 13px; + font-weight: bold; + } + + &__shipping { + padding-right: 20px; + color: #656565; + font-family: "Lato", sans-serif; + font-size: 13px; + font-weight: bold; + } + + &__subtotal { + padding-right: 20px; + color: #656565; + font-family: "Lato", sans-serif; + font-size: 13px; + font-weight: bold; + } + + &__action { + padding-right: 20px; + } +} +.details { + &__details { + padding-left: 21px; + } + + &__title { + padding-top: 13px; + color: #222222; + font-family: "Lato", sans-serif; + font-size: 13px; + font-weight: bold; + text-transform: uppercase; + } + + &__color { + padding-top: 38px; + color: #6f6e6e; + font-family: "Lato", sans-serif; + font-size: 13px; + font-weight: bold; + span { + font-family: "Lato", sans-serif; + font-weight: 300; + } + } + + &__size { + padding-top: 10px; + color: #6f6e6e; + font-family: "Lato", sans-serif; + font-size: 13px; + font-weight: bold; + span { + font-family: "Lato", sans-serif; + font-weight: 300; + } + } +} +.shopping-cart__details { + margin-top: 44px; + display: flex; + justify-content: space-between; + align-items: flex-start; +} +.shopping-cart { + &__navigation { + display: flex; + justify-content: space-between; + margin-top: 44px; + } +} +.navigation { + &__button { + button { + width: 235px; + height: 50px; + border: 1px solid #eaeaea; + background-color: #ffffff; + color: #4a4a4a; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: 700; + text-transform: uppercase; + } + :hover { + background-color: #f16d7f; + transition: 0.5s; + } + } +} + +.shopping-cart { + &__details { + display: flex; + } +} +.details { + &__adress { + max-width: 355px; + } + + &__discount { + max-width: 355px; + } + + &__total { + max-width: 355px; + } +} +.adress { + &__form { + button { + width: 100px; + height: 35px; + border: 1px solid #eaeaea; + background-color: #ffffff; + color: #4a4a4a; + font-family: "Lato", sans-serif; + font-size: 11px; + font-weight: bold; + text-transform: uppercase; + } + button:hover { + background-color: #f16d7f; + transition: 0.5s; + } + } +} +.form { + &__label { + display: flex; + flex-direction: column; + color: #222222; + font-family: "Lato", sans-serif; + font-size: 16px; + font-weight: 700; + text-transform: uppercase; + select { + width: 355px; + height: 45px; + border: 1px solid #eaeaea; + background-color: #ffffff; + padding-left: 18px; + margin-bottom: 20px; + margin-top: 22px; + color: #b1b1b1; + font-family: "Lato", sans-serif; + font-size: 13px; + font-weight: bold; + } + input { + width: 355px; + height: 45px; + border: 1px solid #eaeaea; + background-color: #ffffff; + padding-left: 18px; + margin-bottom: 20px; + color: #b1b1b1; + font-family: "Lato", sans-serif; + font-size: 13px; + font-weight: bold; + } + } +} +.discount { + &__title { + padding-bottom: 28px; + color: #222222; + font-family: "Lato", sans-serif; + font-size: 16px; + font-weight: 700; + text-transform: uppercase; + } + + &__subtitle { + padding-bottom: 24px; + color: #000000; + font-family: "Lato", sans-serif; + font-size: 14px; + font-weight: bold; + } + + &__form { + button { + width: 118px; + height: 35px; + border: 1px solid #eaeaea; + background-color: #ffffff; + color: #4a4a4a; + font-family: "Lato", sans-serif; + font-size: 11px; + font-weight: 700; + text-transform: uppercase; + } + button:hover { + background-color: #f16d7f; + transition: 0.5s; + } + input { + width: 355px; + height: 45px; + border: 1px solid #eaeaea; + background-color: #ffffff; + padding-left: 18px; + margin-bottom: 25px; + color: #b1b1b1; + font-family: "Lato", sans-serif; + font-size: 13px; + font-weight: bold; + } + } +} + +.details { + &__total { + width: 360px; + height: 214px; + background-color: #f5f3f3; + text-align: right; + padding: 40px; + } +} +.total { + &__sub { + padding-bottom: 14px; + color: #4a4a4a; + font-family: "Lato", sans-serif; + font-size: 11px; + font-weight: 400; + text-transform: uppercase; + } + + &__grand { + padding-bottom: 14px; + border-bottom: 1px solid #e2e2e2; + color: #222222; + font-family: "Lato", sans-serif; + font-size: 16px; + font-weight: 700; + text-transform: uppercase; + span { + color: #f16d7f; + } + } + + &__button { + button { + width: 273px; + height: 50px; + background-color: #f16d7f; + color: #ffffff; + font-family: "Lato", sans-serif; + font-size: 16px; + font-weight: 700; + text-transform: uppercase; + margin-top: 17px; + } + } +} diff --git a/HomeWork_3/singlePage.html b/HomeWork_3/singlePage.html new file mode 100644 index 0000000..74a65a9 --- /dev/null +++ b/HomeWork_3/singlePage.html @@ -0,0 +1,302 @@ + + + + + + + + + Single Page + + + + + + + + + + + +
+
+
+
+
+
+ +
+
+ +
+
+ + +
+
+
+
+
+ cart +
+ +
+
+
+
+ Home + Man + Women + Kids + Accoseriese + Featured + Hot Deals +
+
+
+
+
+
New Arrivals
+
+ Home / + Men / + New Arrivals +
+
+
+
+
+ +
+
+ photo +
+
+ +
+
+
+
+
+
+

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.

+
+
+ material:cotton + designer:binburhan +
+
$561
+
+
+ + + + +
+
+
+
+

you may like also

+
+
+
+
+
+ Add to cart +
+
+ white T-shirt +
Mango People T-shirt
+
$52.00
+
+
+
+
+ Add to cart +
+
+ white T-shirt +
Mango People T-shirt
+
$52.00
+
+
+
+
+ Add to cart +
+
+ white T-shirt +
Mango People T-shirt
+
$52.00
+
+
+
+
+ Add to cart +
+
+ white T-shirt +
Mango People T-shirt
+
$52.00
+
+
+
+ +
+
+
+
+ +
+

Objectively transition extensive data rather than cross functional solutions. Monotonectally + syndicate multidisciplinary materials before go forward benefits. Intrinsicly syndicate an + expanded array of processes and cross-unit partnerships.

+

Efficiently plagiarize 24/365 action items and focused infomediaries. + Distinctively seize superior initiatives for wireless technologies. Dynamically optimize.

+
+
+
+
+
COMPANY
+
+ +
+ +
+
+
information
+
+ +
+
+
+
shop category
+
+ +
+ +
+ +
+
+
+
+
+
+ © 2017 Brand All Rights Reserved. +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+ + + + + + + + + \ No newline at end of file