diff --git a/Logo.c94b569d.png b/Logo.c94b569d.png new file mode 100644 index 0000000000..f7670823d1 Binary files /dev/null and b/Logo.c94b569d.png differ diff --git a/Logo.cc3eb18d.png b/Logo.cc3eb18d.png new file mode 100644 index 0000000000..f7670823d1 Binary files /dev/null and b/Logo.cc3eb18d.png differ diff --git a/beoplay-hx.04737133.png b/beoplay-hx.04737133.png new file mode 100644 index 0000000000..69d571327f Binary files /dev/null and b/beoplay-hx.04737133.png differ diff --git a/beoplay-hx.e819499e.png b/beoplay-hx.e819499e.png new file mode 100644 index 0000000000..7d0cdfcdfc Binary files /dev/null and b/beoplay-hx.e819499e.png differ diff --git a/beosound-a5.47830234.png b/beosound-a5.47830234.png new file mode 100644 index 0000000000..2f9682d428 Binary files /dev/null and b/beosound-a5.47830234.png differ diff --git a/beosound-a5.f2f7af4e.png b/beosound-a5.f2f7af4e.png new file mode 100644 index 0000000000..2fc633b7b0 Binary files /dev/null and b/beosound-a5.f2f7af4e.png differ diff --git a/beosound-theatre.bcf6d67c.png b/beosound-theatre.bcf6d67c.png new file mode 100644 index 0000000000..d92250f182 Binary files /dev/null and b/beosound-theatre.bcf6d67c.png differ diff --git a/beosound-theatre.e8151cf9.png b/beosound-theatre.e8151cf9.png new file mode 100644 index 0000000000..114c8591de Binary files /dev/null and b/beosound-theatre.e8151cf9.png differ diff --git a/earphones-1.4d6a2fbd.png b/earphones-1.4d6a2fbd.png new file mode 100644 index 0000000000..6200ca9e76 Binary files /dev/null and b/earphones-1.4d6a2fbd.png differ diff --git a/earphones-1.f8111c21.png b/earphones-1.f8111c21.png new file mode 100644 index 0000000000..75ed614af9 Binary files /dev/null and b/earphones-1.f8111c21.png differ diff --git a/earphones-2.830c4e24.png b/earphones-2.830c4e24.png new file mode 100644 index 0000000000..a723009ea0 Binary files /dev/null and b/earphones-2.830c4e24.png differ diff --git a/earphones-2.d59d9d69.png b/earphones-2.d59d9d69.png new file mode 100644 index 0000000000..f3cc723fe4 Binary files /dev/null and b/earphones-2.d59d9d69.png differ diff --git a/header-bg-mobile.2d58f869.png b/header-bg-mobile.2d58f869.png new file mode 100644 index 0000000000..0d52cff66c Binary files /dev/null and b/header-bg-mobile.2d58f869.png differ diff --git a/header-bg-mobile.bd1414c0.png b/header-bg-mobile.bd1414c0.png new file mode 100644 index 0000000000..f5259b2306 Binary files /dev/null and b/header-bg-mobile.bd1414c0.png differ diff --git a/icon-burger-menu-hover.655e2119.png b/icon-burger-menu-hover.655e2119.png new file mode 100644 index 0000000000..804fdbf39f Binary files /dev/null and b/icon-burger-menu-hover.655e2119.png differ diff --git a/icon-burger-menu-hover.85d55bb4.png b/icon-burger-menu-hover.85d55bb4.png new file mode 100644 index 0000000000..e428692354 Binary files /dev/null and b/icon-burger-menu-hover.85d55bb4.png differ diff --git a/icon-burger-menu.95976320.png b/icon-burger-menu.95976320.png new file mode 100644 index 0000000000..81cad0413f Binary files /dev/null and b/icon-burger-menu.95976320.png differ diff --git a/icon-burger-menu.fda17e88.png b/icon-burger-menu.fda17e88.png new file mode 100644 index 0000000000..289fd29153 Binary files /dev/null and b/icon-burger-menu.fda17e88.png differ diff --git a/icon-close.35a94dac.png b/icon-close.35a94dac.png new file mode 100644 index 0000000000..520c629db5 Binary files /dev/null and b/icon-close.35a94dac.png differ diff --git a/icon-close.6f3ede5c.png b/icon-close.6f3ede5c.png new file mode 100644 index 0000000000..465fd170e0 Binary files /dev/null and b/icon-close.6f3ede5c.png differ diff --git a/index.c9d896db.css b/index.c9d896db.css new file mode 100644 index 0000000000..707f3ef468 --- /dev/null +++ b/index.c9d896db.css @@ -0,0 +1,2 @@ +.container{padding-left:20px;padding-right:20px}@media (min-width:576px){.container{padding-left:72px;padding-right:72px}}@media (min-width:1024px){.container{max-width:1020px;margin-left:auto;margin-right:auto;padding-left:120px;padding-right:120px}}.page{color:#1b2129;scroll-behavior:smooth;font-family:Manrope,sans-serif;font-size:16px;font-style:normal}.page__body{min-width:320px;margin:0}.page__menu{opacity:0;pointer-events:none;transition:all .3s;position:fixed;top:0;left:0;right:0;transform:translate(-100%)}.page__menu:target{opacity:1;pointer-events:all;transform:translate(0)}.page:has(.page__menu:target){overflow:hidden}.header{background-image:url(header-bg-mobile.bd1414c0.png);background-position:50%;background-size:cover}.header__content{-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;height:100vh;display:-ms-flexbox;display:flex}.header__bottom{padding-bottom:40px}@media (min-width:576px){.header__bottom{padding-bottom:64px}}.header__title{font-weight:700px;color:#fff;margin:0;font-size:36px;line-height:36px}@media (min-width:576px){.header__title{font-size:40px}}.top-bar{-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;padding-top:24px;padding-bottom:24px;display:-ms-flexbox;display:flex}@media (min-width:576px){.top-bar{padding-top:32px;padding-bottom:32px}}.top-bar__icons{gap:24px;display:-ms-flexbox;display:flex}.top-bar__logo-link{display:-ms-flexbox;display:flex}.top-bar__logo{height:16px;transition:transform .3s}.top-bar__logo:hover{transform:scale(1.2)}@media (min-width:576px){.top-bar__logo{height:24px}}.nav__list{-ms-flex-direction:column;flex-direction:column;gap:32px;margin:0;padding:0;list-style:none;display:-ms-flexbox;display:flex}.nav__link{color:inherit;font-size:22px;line-height:22px;text-decoration:none;position:relative}.nav__link:after{content:"";transform-origin:0;background-color:#1b2129;width:100%;height:1px;transition:transform .3s;display:block;position:absolute;bottom:-4px;transform:scale(0)}.nav__link:hover:after{transform:scale(1)}.icon{background-image:url(icon-burger-menu.fda17e88.png);background-size:cover;width:24px;height:24px;transition:transform .3s;display:block}.icon:hover{transform:scale(1.2)}@media (min-width:576px){.icon{width:32px;height:32px}}.icon--phone{background-image:url(phone-number.f2eee59c.png)}@media (min-width:1024px){.icon--phone:before{content:"+1 234 555-55-55";white-space:nowrap;color:#1b2129;opacity:0;letter-spacing:2px;font-family:Inter,sans-serif;font-size:12px;font-weight:700;line-height:32px;text-decoration:none;transition:opacity .5s;position:absolute;left:-139px}.icon--phone:hover:before{opacity:1}}.icon--menu{background-image:url(icon-burger-menu.fda17e88.png)}.icon--menu:hover{background-image:url(icon-burger-menu-hover.655e2119.png)}.icon--close{background-image:url(icon-close.35a94dac.png)}.menu{box-sizing:border-box;background-color:#f9f9f9;height:100vh;font-size:22px;font-weight:700;line-height:22px}.menu__top{margin-bottom:32px}@media (min-width:576px){.menu__top{margin-bottom:0}}.menu__nav{margin-bottom:48px}.menu__phone-number{color:inherit;letter-spacing:2px;margin-bottom:16px;font-size:16px;text-decoration:none;display:block}.menu__call-to-order{letter-spacing:2px;text-transform:uppercase;color:inherit;border-bottom:1px solid #1b2129;width:-moz-fit-content;width:fit-content;padding-bottom:4px;font-size:16px;text-decoration:none;display:block}.section-title{margin:0 0 48px;font-size:32px;font-weight:700;line-height:100%}@media (min-width:576px){.section-title{margin-bottom:56px;font-size:40px}}@media (min-width:1024px){.section-title{font-size:48px}}.main{background-color:#fff}.main__content{row-gap:96px;padding:96px 20px;display:grid}@media (min-width:576px){.main__content{padding-left:72px;padding-right:72px}}@media (min-width:1024px){.main__content{max-width:1020px;margin-left:auto;margin-right:auto;padding-left:120px;padding-right:120px}}@media (min-width:576px){.main__content{row-gap:120px;padding-top:120px;padding-bottom:120px}}.main--bg-fon{background-color:#fcfaef;width:100%;height:100%}@media (min-width:576px){.main--bg-fon{height:416px}}@media (min-width:1024px){.main--bg-fon{height:350px}}.product__photo{width:100%}.recommended__products{--columns:2;grid-template-columns:repeat(var(--columns),1fr);gap:40px 20px;display:grid}@media (min-width:576px){.recommended__products{--columns:6;column-gap:24px}}@media (min-width:1024px){.recommended__products{--columns:12}}.recommended__product{grid-column:1/-1;transition:transform .3s}.recommended__product:hover{transform:scale(1.1)}@media (min-width:576px){.recommended__product{grid-column:2/-2}}@media (min-width:1024px){.recommended__product{grid-column:span 4}}.categories__wrapper{row-gap:40px;display:grid}@media (min-width:576px){.categories__wrapper{row-gap:56px}}.category__photos{--columns:2;grid-template-columns:repeat(var(--columns),1fr);column-gap:20px;margin-bottom:16px;display:grid}@media (min-width:576px){.category__photos{--columns:6;column-gap:24px}}@media (min-width:1024px){.category__photos{--columns:12}}@media (min-width:576px){.category__link--square{grid-column:span 3}}@media (min-width:1024px){.category__link--square{grid-column:span 6}}.category__photo{object-fit:cover;width:100%;height:100%;transition:transform .3s}.category__photo:hover{transform:scale(1.1)}.category__title{margin:0;font-size:18px;font-weight:700;line-height:25.2px}.button{color:#fff;background-color:#f98921;border:none;border-radius:8px;outline:none;width:100%;height:56px;font-size:16px;font-weight:700;line-height:27px;transition:all .3s}.button:hover{color:#fff;cursor:pointer;background-color:#1b2129;border:1px solid #1b2129;-ms-flex-align:center;align-items:center;line-height:27px}@media (min-width:1024px){.button{width:324px}}.bg__element{display:-ms-flexbox;display:flex}.bg__element__photo{text-align:center;object-fit:cover;object-position:center -100px;width:100%;height:200px}@media (min-width:576px){.bg__element__photo{height:400px}}@media (min-width:1024px){.bg__element__photo{height:460px}}.about{--columns:2;grid-template-columns:repeat(var(--columns),1fr);column-gap:20px;display:grid}@media (min-width:576px){.about{--columns:6;column-gap:24px}}@media (min-width:1024px){.about{--columns:12}}.about__title{grid-column:1/-1}@media (min-width:576px){.about__title{grid-column:1/4}}@media (min-width:1024px){.about__title{grid-column:span 6}}.about__description{grid-column:1/-1}@media (min-width:576px){.about__description{grid-column:4/7}}@media (min-width:1024px){.about__description{grid-column:8/13}}.contacts{margin-bottom:64px;font-family:Manrope,sans-serif}@media (min-width:576px){.contacts{margin-bottom:120px}}.contacts__wrapper{box-sizing:border-box;gap:48px;display:grid}@media (min-width:576px){.contacts__wrapper{gap:80px}}@media (min-width:1024px){.contacts__wrapper{--columns:2;grid-template-columns:repeat(var(--columns),1fr);column-gap:111px;display:grid}}@media (min-width:1024px) and (min-width:576px){.contacts__wrapper{--columns:6;column-gap:24px}}@media (min-width:1024px) and (min-width:1024px){.contacts__wrapper{--columns:12}}.contacts__form{box-sizing:border-box;grid-column:1/-1;display:grid}@media (min-width:576px){.contacts__form{grid-column:1/-1}}@media (min-width:1024px){.contacts__form{grid-column:1/6}}.contacts__form__message{resize:none;height:148px}.contacts__form--style{box-sizing:border-box;cursor:pointer;background-color:#f9f9f9;border:2px solid #f9f9f9;border-radius:8px;outline:none;width:100%;margin-bottom:16px;padding:14px 16px}.contacts__form--style::placeholder{color:#7e7e83}.contacts__form--style::placeholder{color:#7e7e83}.contacts__form--style:hover::placeholder{color:#1b2129}.contacts__form--style:hover::placeholder{color:#1b2129}.contacts__form--style:hover{border:2px solid #f0f1f4}.contacts__form--style:focus{border:2px solid #f98921}.contacts__info{grid-column:1/-1}@media (min-width:576px){.contacts__info{grid-column:1/-1}}@media (min-width:1024px){.contacts__info{grid-column:7/12}}.contacts__info__block{margin-bottom:24px}.contacts__info__title{color:#9393a3;margin:0 0 8px;font-size:14px;font-weight:400;line-height:19.6px}.contacts__info__link{font-family:#1b2129;color:#191919;font-size:16px;font-weight:400;line-height:22.4px;text-decoration:none}.contacts__button{color:#fff;box-sizing:border-box;background-color:#f98921;border:none;border-radius:8px;width:100%;height:56px;font-size:16px;font-weight:700;line-height:27px;transition:all .3s}.contacts__button:hover{color:#fff;cursor:pointer;background-color:#1b2129;border:2px solid #1b2129}.contacts__button:active{color:#fff;background-color:#111;border:none} +/*# sourceMappingURL=index.c9d896db.css.map */ diff --git a/index.c9d896db.css.map b/index.c9d896db.css.map new file mode 100644 index 0000000000..9df5f5e3b5 --- /dev/null +++ b/index.c9d896db.css.map @@ -0,0 +1 @@ +{"mappings":"AC0BA,gDAzBE,yBAyBF,iDAnBE,0BAmBF,uGC1BA,2GAOE,qCAKA,4HAWE,uEAOF,8CC9BF,2HAKE,mKAQA,oCFZA,yBEYA,qCAQA,qFFpBA,yBEoBA,+BCrBF,4KHCE,yBGDF,+CAWE,0DAKA,qDAIA,oDHYA,0CA/BA,yBGmBA,4BCnBA,wIAUA,gGAOE,sLAcA,0CChCJ,+JLgCE,iCA/BA,yBKDF,8BAcE,8ELPA,0BKWI,oQAiBA,qCAMJ,iFAGE,6FAKF,4ECjDF,kHAQE,8BNPA,yBMOA,4BAQA,8BAIA,0HASA,6NC7BF,+EPCE,yBODF,kDPOE,0BOPF,+BCAA,4BAGE,2DRFA,yBQEA,qDRIA,0BQJA,2GRFA,yBQEA,qEAaA,8DRfA,yBQeA,4BRTA,0BQSA,4BCfA,2BCAA,+GVAA,yBUAA,oDVMA,0BUNA,qCAMA,gEVyBA,iDA/BA,yBUMA,wCVAA,0BUAA,0CCNA,+CXAA,yBWAA,mCAWA,+HXXA,yBWWA,+CXLA,0BWKA,gCXXA,yBWkBE,4CXZF,0BWYE,4CAWF,kFXEA,4CWMA,4EAQF,iLAaE,oJXpDA,0BWuCF,qBC9CA,8CAGE,6GZFA,yBYEA,kCZIA,0BYJA,kCCHF,iGbCE,yBaDF,oCbOE,0BaPF,qBAGE,+BbFA,yBaEA,+BbIA,0BaJA,kCAYA,qCbdA,yBacA,qCbRA,0BaQA,sCCfF,4DdCE,yBcDF,+BAQE,+DdPA,yBcOA,6BdDA,0BcCA,+GdPA,gDcOA,gDdDA,iDcCA,iCAgBA,oEdvBA,yBcuBA,kCdjBA,0BciBA,iCAaE,kDAKA,6LAaE,kDAAA,kDAIA,wDAAA,wDAIA,sDAIA,sDAMJ,iCdxEA,yBcwEA,kCdlEA,0BckEA,kCAWE,0CAIA,sGASA,+HAUF,oMAcE,oGAOA","sources":["index.c9d896db.css","src/styles/utils/mixins.scss","src/styles/blocks/page.scss","src/styles/blocks/header.scss","src/styles/blocks/top-bar.scss","src/styles/blocks/nav.scss","src/styles/blocks/icon.scss","src/styles/blocks/menu.scss","src/styles/blocks/section-title.scss","src/styles/blocks/main.scss","src/styles/blocks/product.scss","src/styles/blocks/recommended.scss","src/styles/blocks/categories.scss","src/styles/blocks/bg__element.scss","src/styles/blocks/about.scss","src/styles/blocks/contacts.scss"],"sourcesContent":[".container {\n padding-left: 20px;\n padding-right: 20px;\n}\n\n@media (width >= 576px) {\n .container {\n padding-left: 72px;\n padding-right: 72px;\n }\n}\n\n@media (width >= 1024px) {\n .container {\n max-width: 1020px;\n margin-left: auto;\n margin-right: auto;\n padding-left: 120px;\n padding-right: 120px;\n }\n}\n\n.page {\n color: #1b2129;\n scroll-behavior: smooth;\n font-family: Manrope, sans-serif;\n font-size: 16px;\n font-style: normal;\n}\n\n.page__body {\n min-width: 320px;\n margin: 0;\n}\n\n.page__menu {\n opacity: 0;\n pointer-events: none;\n transition: all .3s;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n transform: translateX(-100%);\n}\n\n.page__menu:target {\n opacity: 1;\n pointer-events: all;\n transform: translateX(0);\n}\n\n.page:has(.page__menu:target) {\n overflow: hidden;\n}\n\n.header {\n background-image: url(\"header-bg-mobile.bd1414c0.png\");\n background-position: center;\n background-size: cover;\n}\n\n.header__content {\n -ms-flex-direction: column;\n flex-direction: column;\n justify-content: space-between;\n height: 100vh;\n display: -ms-flexbox;\n display: flex;\n}\n\n.header__bottom {\n padding-bottom: 40px;\n}\n\n@media (width >= 576px) {\n .header__bottom {\n padding-bottom: 64px;\n }\n}\n\n.header__title {\n font-weight: 700px;\n color: #fff;\n margin: 0;\n font-size: 36px;\n line-height: 36px;\n}\n\n@media (width >= 576px) {\n .header__title {\n font-size: 40px;\n }\n}\n\n.top-bar {\n justify-content: space-between;\n align-items: center;\n padding-top: 24px;\n padding-bottom: 24px;\n display: -ms-flexbox;\n display: flex;\n}\n\n@media (width >= 576px) {\n .top-bar {\n padding-top: 32px;\n padding-bottom: 32px;\n }\n}\n\n.top-bar__icons {\n gap: 24px;\n display: -ms-flexbox;\n display: flex;\n}\n\n.top-bar__logo-link {\n display: -ms-flexbox;\n display: flex;\n}\n\n.top-bar__logo {\n height: 16px;\n transition: transform .3s;\n}\n\n.top-bar__logo:hover {\n transform: scale(1.2);\n}\n\n@media (width >= 576px) {\n .top-bar__logo {\n height: 24px;\n }\n}\n\n.nav__list {\n -ms-flex-direction: column;\n flex-direction: column;\n gap: 32px;\n margin: 0;\n padding: 0;\n list-style: none;\n display: -ms-flexbox;\n display: flex;\n}\n\n.nav__link {\n color: inherit;\n font-size: 22px;\n line-height: 22px;\n text-decoration: none;\n position: relative;\n}\n\n.nav__link:after {\n content: \"\";\n transform-origin: 0;\n background-color: #1b2129;\n width: 100%;\n height: 1px;\n transition: transform .3s;\n display: block;\n position: absolute;\n bottom: -4px;\n transform: scale(0);\n}\n\n.nav__link:hover:after {\n transform: scale(1);\n}\n\n.icon {\n background-image: url(\"icon-burger-menu.fda17e88.png\");\n background-size: cover;\n width: 24px;\n height: 24px;\n transition: transform .3s;\n display: block;\n}\n\n.icon:hover {\n transform: scale(1.2);\n}\n\n@media (width >= 576px) {\n .icon {\n width: 32px;\n height: 32px;\n }\n}\n\n.icon--phone {\n background-image: url(\"phone-number.f2eee59c.png\");\n}\n\n@media (width >= 1024px) {\n .icon--phone:before {\n content: \"+1 234 555-55-55\";\n white-space: nowrap;\n color: #1b2129;\n opacity: 0;\n letter-spacing: 2px;\n font-family: Inter, sans-serif;\n font-size: 12px;\n font-weight: 700;\n line-height: 32px;\n text-decoration: none;\n transition: opacity .5s;\n position: absolute;\n left: -139px;\n }\n\n .icon--phone:hover:before {\n opacity: 1;\n }\n}\n\n.icon--menu {\n background-image: url(\"icon-burger-menu.fda17e88.png\");\n}\n\n.icon--menu:hover {\n background-image: url(\"icon-burger-menu-hover.655e2119.png\");\n}\n\n.icon--close {\n background-image: url(\"icon-close.35a94dac.png\");\n}\n\n.menu {\n box-sizing: border-box;\n background-color: #f9f9f9;\n height: 100vh;\n font-size: 22px;\n font-weight: 700;\n line-height: 22px;\n}\n\n.menu__top {\n margin-bottom: 32px;\n}\n\n@media (width >= 576px) {\n .menu__top {\n margin-bottom: 0;\n }\n}\n\n.menu__nav {\n margin-bottom: 48px;\n}\n\n.menu__phone-number {\n color: inherit;\n letter-spacing: 2px;\n margin-bottom: 16px;\n font-size: 16px;\n text-decoration: none;\n display: block;\n}\n\n.menu__call-to-order {\n letter-spacing: 2px;\n text-transform: uppercase;\n color: inherit;\n border-bottom: 1px solid #1b2129;\n width: fit-content;\n padding-bottom: 4px;\n font-size: 16px;\n text-decoration: none;\n display: block;\n}\n\n.section-title {\n margin: 0 0 48px;\n font-size: 32px;\n font-weight: 700;\n line-height: 100%;\n}\n\n@media (width >= 576px) {\n .section-title {\n margin-bottom: 56px;\n font-size: 40px;\n }\n}\n\n@media (width >= 1024px) {\n .section-title {\n font-size: 48px;\n }\n}\n\n.main {\n background-color: #fff;\n}\n\n.main__content {\n row-gap: 96px;\n padding: 96px 20px;\n display: grid;\n}\n\n@media (width >= 576px) {\n .main__content {\n padding-left: 72px;\n padding-right: 72px;\n }\n}\n\n@media (width >= 1024px) {\n .main__content {\n max-width: 1020px;\n margin-left: auto;\n margin-right: auto;\n padding-left: 120px;\n padding-right: 120px;\n }\n}\n\n@media (width >= 576px) {\n .main__content {\n row-gap: 120px;\n padding-top: 120px;\n padding-bottom: 120px;\n }\n}\n\n.main--bg-fon {\n background-color: #fcfaef;\n width: 100%;\n height: 100%;\n}\n\n@media (width >= 576px) {\n .main--bg-fon {\n height: 416px;\n }\n}\n\n@media (width >= 1024px) {\n .main--bg-fon {\n height: 350px;\n }\n}\n\n.product__photo {\n width: 100%;\n}\n\n.recommended__products {\n --columns: 2;\n grid-template-columns: repeat(var(--columns), 1fr);\n gap: 40px 20px;\n display: grid;\n}\n\n@media (width >= 576px) {\n .recommended__products {\n --columns: 6;\n column-gap: 24px;\n }\n}\n\n@media (width >= 1024px) {\n .recommended__products {\n --columns: 12;\n }\n}\n\n.recommended__product {\n grid-column: 1 / -1;\n transition: transform .3s;\n}\n\n.recommended__product:hover {\n transform: scale(1.1);\n}\n\n@media (width >= 576px) {\n .recommended__product {\n grid-column: 2 / -2;\n }\n}\n\n@media (width >= 1024px) {\n .recommended__product {\n grid-column: span 4;\n }\n}\n\n.categories__wrapper {\n row-gap: 40px;\n display: grid;\n}\n\n@media (width >= 576px) {\n .categories__wrapper {\n row-gap: 56px;\n }\n}\n\n.category__photos {\n --columns: 2;\n grid-template-columns: repeat(var(--columns), 1fr);\n column-gap: 20px;\n margin-bottom: 16px;\n display: grid;\n}\n\n@media (width >= 576px) {\n .category__photos {\n --columns: 6;\n column-gap: 24px;\n }\n}\n\n@media (width >= 1024px) {\n .category__photos {\n --columns: 12;\n }\n}\n\n@media (width >= 576px) {\n .category__link--square {\n grid-column: span 3;\n }\n}\n\n@media (width >= 1024px) {\n .category__link--square {\n grid-column: span 6;\n }\n}\n\n.category__photo {\n object-fit: cover;\n width: 100%;\n height: 100%;\n transition: transform .3s;\n}\n\n.category__photo:hover {\n transform: scale(1.1);\n}\n\n.category__title {\n margin: 0;\n font-size: 18px;\n font-weight: 700;\n line-height: 25.2px;\n}\n\n.button {\n color: #fff;\n background-color: #f98921;\n border: none;\n border-radius: 8px;\n outline: none;\n width: 100%;\n height: 56px;\n font-size: 16px;\n font-weight: 700;\n line-height: 27px;\n transition: all .3s;\n}\n\n.button:hover {\n color: #fff;\n cursor: pointer;\n background-color: #1b2129;\n border: 1px solid #1b2129;\n align-items: center;\n line-height: 27px;\n}\n\n@media (width >= 1024px) {\n .button {\n width: 324px;\n }\n}\n\n.bg__element {\n display: -ms-flexbox;\n display: flex;\n}\n\n.bg__element__photo {\n text-align: center;\n object-fit: cover;\n object-position: center -100px;\n width: 100%;\n height: 200px;\n}\n\n@media (width >= 576px) {\n .bg__element__photo {\n height: 400px;\n }\n}\n\n@media (width >= 1024px) {\n .bg__element__photo {\n height: 460px;\n }\n}\n\n.about {\n --columns: 2;\n grid-template-columns: repeat(var(--columns), 1fr);\n column-gap: 20px;\n display: grid;\n}\n\n@media (width >= 576px) {\n .about {\n --columns: 6;\n column-gap: 24px;\n }\n}\n\n@media (width >= 1024px) {\n .about {\n --columns: 12;\n }\n}\n\n.about__title {\n grid-column: 1 / -1;\n}\n\n@media (width >= 576px) {\n .about__title {\n grid-column: 1 / 4;\n }\n}\n\n@media (width >= 1024px) {\n .about__title {\n grid-column: span 6;\n }\n}\n\n.about__description {\n grid-column: 1 / -1;\n}\n\n@media (width >= 576px) {\n .about__description {\n grid-column: 4 / 7;\n }\n}\n\n@media (width >= 1024px) {\n .about__description {\n grid-column: 8 / 13;\n }\n}\n\n.contacts {\n margin-bottom: 64px;\n font-family: Manrope, sans-serif;\n}\n\n@media (width >= 576px) {\n .contacts {\n margin-bottom: 120px;\n }\n}\n\n.contacts__wrapper {\n box-sizing: border-box;\n gap: 48px;\n display: grid;\n}\n\n@media (width >= 576px) {\n .contacts__wrapper {\n gap: 80px;\n }\n}\n\n@media (width >= 1024px) {\n .contacts__wrapper {\n --columns: 2;\n grid-template-columns: repeat(var(--columns), 1fr);\n column-gap: 111px;\n display: grid;\n }\n}\n\n@media (width >= 1024px) and (width >= 576px) {\n .contacts__wrapper {\n --columns: 6;\n column-gap: 24px;\n }\n}\n\n@media (width >= 1024px) and (width >= 1024px) {\n .contacts__wrapper {\n --columns: 12;\n }\n}\n\n.contacts__form {\n box-sizing: border-box;\n grid-column: 1 / -1;\n display: grid;\n}\n\n@media (width >= 576px) {\n .contacts__form {\n grid-column: 1 / -1;\n }\n}\n\n@media (width >= 1024px) {\n .contacts__form {\n grid-column: 1 / 6;\n }\n}\n\n.contacts__form__message {\n resize: none;\n height: 148px;\n}\n\n.contacts__form--style {\n box-sizing: border-box;\n cursor: pointer;\n background-color: #f9f9f9;\n border: 2px solid #f9f9f9;\n border-radius: 8px;\n outline: none;\n width: 100%;\n margin-bottom: 16px;\n padding: 14px 16px;\n}\n\n.contacts__form--style::-moz-placeholder {\n color: #7e7e83;\n}\n\n.contacts__form--style::placeholder {\n color: #7e7e83;\n}\n\n.contacts__form--style:hover::-moz-placeholder {\n color: #1b2129;\n}\n\n.contacts__form--style:hover::placeholder {\n color: #1b2129;\n}\n\n.contacts__form--style:hover {\n border: 2px solid #f0f1f4;\n}\n\n.contacts__form--style:focus {\n border: 2px solid #f98921;\n}\n\n.contacts__info {\n grid-column: 1 / -1;\n}\n\n@media (width >= 576px) {\n .contacts__info {\n grid-column: 1 / -1;\n }\n}\n\n@media (width >= 1024px) {\n .contacts__info {\n grid-column: 7 / 12;\n }\n}\n\n.contacts__info__block {\n margin-bottom: 24px;\n}\n\n.contacts__info__title {\n color: #9393a3;\n margin: 0 0 8px;\n font-size: 14px;\n font-weight: 400;\n line-height: 19.6px;\n}\n\n.contacts__info__link {\n font-family: #1b2129;\n color: #191919;\n font-size: 16px;\n font-weight: 400;\n line-height: 22.4px;\n text-decoration: none;\n}\n\n.contacts__button {\n color: #fff;\n box-sizing: border-box;\n background-color: #f98921;\n border: none;\n border-radius: 8px;\n width: 100%;\n height: 56px;\n font-size: 16px;\n font-weight: 700;\n line-height: 27px;\n transition: all .3s;\n}\n\n.contacts__button:hover {\n color: #fff;\n cursor: pointer;\n background-color: #1b2129;\n border: 2px solid #1b2129;\n}\n\n.contacts__button:active {\n color: #fff;\n background-color: #111;\n border: none;\n}\n/*# sourceMappingURL=index.c9d896db.css.map */\n","@mixin on-tablet {\n @media (min-width: 576px) {\n @content;\n }\n}\n\n@mixin on-desktop {\n @media (min-width: $desktop-min-width) {\n @content;\n }\n}\n\n@mixin content-padding-in-line() {\n padding-inline: 20px;\n\n @include on-tablet {\n padding-inline: 72px;\n }\n\n @include on-desktop {\n max-width: 1020px;\n margin-inline: auto;\n padding-inline: 120px;\n }\n}\n\n.container {\n @include content-padding-in-line;\n}\n\n@mixin hover($property, $toValue) {\n transition: #{$property} 0.3s;\n &:hover {\n #{$property}: $toValue;\n }\n}\n\n@mixin page-grid {\n --columns: 2;\n\n display: grid;\n column-gap: 20px;\n grid-template-columns: repeat(var(--columns), 1fr);\n\n @include on-tablet {\n --columns: 6;\n\n column-gap: 24px;\n }\n\n @include on-desktop {\n --columns: 12;\n }\n}\n",".page {\n font-family: Manrope, sans-serif;\n font-size: 16px;\n font-style: normal;\n color: $main-text-color;\n scroll-behavior: smooth;\n\n &__body {\n margin: 0;\n min-width: 320px;\n }\n\n &__menu {\n position: fixed;\n top: 0;\n right: 0;\n left: 0;\n\n transition: all 0.3s;\n opacity: 0;\n transform: translateX(-100%);\n pointer-events: none;\n\n &:target {\n opacity: 1;\n transform: translateX(0);\n pointer-events: all;\n }\n }\n\n &:has(.page__menu:target) {\n overflow: hidden;\n }\n}\n",".header {\n background-image: url(../images/header-bg-mobile.png);\n background-size: cover;\n background-position: center;\n\n &__content {\n height: 100vh;\n\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n }\n\n &__bottom {\n padding-bottom: 40px;\n\n @include on-tablet {\n padding-bottom: 64px;\n }\n }\n\n &__title {\n margin: 0;\n font-weight: 700px;\n font-size: 36px;\n line-height: 36px;\n color: #fff;\n\n @include on-tablet {\n font-size: 40px;\n }\n }\n}\n",".top-bar {\n padding-block: 24px;\n\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n @include on-tablet {\n padding-block: 32px;\n }\n\n &__icons {\n display: flex;\n gap: 24px;\n }\n\n &__logo-link {\n display: flex;\n }\n\n &__logo {\n height: 16px;\n\n @include hover(transform, scale(1.2));\n\n @include on-tablet {\n height: 24px;\n }\n }\n}\n",".nav {\n &__list {\n margin: 0;\n padding: 0;\n list-style: none;\n\n display: flex;\n flex-direction: column;\n gap: 32px;\n }\n\n &__link {\n position: relative;\n color: inherit;\n text-decoration: none;\n font-size: 22px;\n line-height: 22px;\n\n &::after {\n content: '';\n position: absolute;\n bottom: -4px;\n display: block;\n height: 1px;\n width: 100%;\n background-color: $main-text-color;\n\n transition: transform 0.3s;\n transform: scale(0);\n transform-origin: left;\n }\n\n &:hover::after {\n transform: scale(1);\n }\n }\n}\n",".icon {\n display: block;\n height: 24px;\n width: 24px;\n background-image: url(../images/icons/icon-burger-menu.png);\n background-size: cover;\n\n @include hover(transform, scale(1.2));\n\n @include on-tablet {\n height: 32px;\n width: 32px;\n }\n\n &--phone {\n background-image: url(../images/icons/phone-number.png);\n\n @include on-desktop {\n &::before {\n position: absolute;\n content: '+1 234 555-55-55';\n font-family: Inter, sans-serif;\n white-space: nowrap;\n color: $main-text-color;\n text-decoration: none;\n opacity: 0;\n left: -139px;\n transition: opacity 0.5s;\n\n font-size: 12px;\n font-weight: 700;\n line-height: 32px;\n letter-spacing: 2px;\n }\n\n &:hover::before {\n opacity: 1;\n }\n }\n }\n\n &--menu {\n background-image: url(../images/icons/icon-burger-menu.png);\n\n &:hover {\n background-image: url(../images/icons/icon-burger-menu-hover.png);\n }\n }\n\n &--close {\n background-image: url(../images/icons/icon-close.png);\n }\n}\n",".menu {\n box-sizing: border-box;\n height: 100vh;\n background-color: #f9f9f9;\n font-weight: 700;\n font-size: 22px;\n line-height: 22px;\n\n &__top {\n margin-bottom: 32px;\n\n @include on-tablet {\n margin-bottom: 0;\n }\n }\n\n &__nav {\n margin-bottom: 48px;\n }\n\n &__phone-number {\n color: inherit;\n text-decoration: none;\n margin-bottom: 16px;\n display: block;\n font-size: 16px;\n letter-spacing: 2px;\n }\n\n &__call-to-order {\n display: block;\n text-decoration: none;\n font-size: 16px;\n letter-spacing: 2px;\n text-transform: uppercase;\n\n padding-bottom: 4px;\n border-bottom: 1px solid $main-text-color;\n width: fit-content;\n color: inherit;\n }\n}\n",".section-title {\n margin: 0;\n margin-bottom: 48px;\n\n font-weight: 700;\n font-size: 32px;\n line-height: 100%;\n\n @include on-tablet {\n margin-bottom: 56px;\n font-size: 40px;\n }\n\n @include on-desktop {\n font-size: 48px;\n }\n}\n",".main {\n background-color: #fff;\n\n &__content {\n display: grid;\n row-gap: 96px;\n padding-block: 96px;\n\n @include content-padding-in-line;\n\n @include on-tablet {\n padding-block: 120px;\n row-gap: 120px;\n }\n }\n\n &--bg-fon {\n background-color: #fcfaef;\n height: 100%;\n width: 100%;\n\n @include on-tablet {\n height: 416px;\n }\n\n @include on-desktop {\n height: 350px;\n }\n }\n}\n",".product {\n &__photo {\n width: 100%;\n }\n}\n",".recommended {\n &__products {\n @include page-grid;\n\n row-gap: 40px;\n }\n\n &__product {\n @include hover(transform, scale(1.1));\n\n grid-column: 1 / -1;\n\n @include on-tablet {\n grid-column: 2 / -2;\n }\n\n @include on-desktop {\n grid-column: span 4;\n }\n }\n}\n",".categories {\n &__wrapper {\n display: grid;\n row-gap: 40px;\n\n @include on-tablet {\n row-gap: 56px;\n }\n }\n}\n\n.category {\n &__photos {\n @include page-grid;\n\n margin-bottom: 16px;\n }\n\n &__link {\n &--square {\n @include on-tablet {\n grid-column: span 3;\n }\n\n @include on-desktop {\n grid-column: span 6;\n }\n }\n }\n\n &__photo {\n @include hover(transform, scale(1.1));\n\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n &__title {\n margin: 0;\n font-weight: 700;\n font-size: 18px;\n line-height: 25.2px;\n }\n}\n\n.button {\n border: none;\n border-radius: 8px;\n background-color: #f98921;\n color: #fff;\n width: 100%;\n height: 56px;\n font-size: 16px;\n font-weight: 700;\n line-height: 27px;\n outline: none;\n transition: all 0.3s;\n\n &:hover {\n background-color: $main-text-color;\n color: #fff;\n border: 1px solid $main-text-color;\n line-height: 27px;\n align-items: center;\n cursor: pointer;\n }\n\n @include on-desktop {\n width: 324px;\n }\n}\n",".bg__element {\n display: flex;\n\n &__photo {\n width: 100%;\n height: 200px;\n text-align: center;\n object-fit: cover;\n object-position: center -100px;\n\n @include on-tablet {\n height: 400px;\n }\n\n @include on-desktop {\n height: 460px;\n }\n }\n}\n",".about {\n @include page-grid;\n\n &__title {\n grid-column: 1 / -1;\n\n @include on-tablet {\n grid-column: 1 / 4;\n }\n\n @include on-desktop {\n grid-column: span 6;\n }\n }\n\n &__description {\n grid-column: 1 / -1;\n\n @include on-tablet {\n grid-column: 4 / 7;\n }\n\n @include on-desktop {\n grid-column: 8 / 13;\n }\n }\n}\n",".contacts {\n margin-bottom: 64px;\n font-family: Manrope, sans-serif;\n\n @include on-tablet {\n margin-bottom: 120px;\n }\n\n &__wrapper {\n display: grid;\n box-sizing: border-box;\n gap: 48px;\n\n @include on-tablet {\n gap: 80px;\n }\n\n @include on-desktop {\n @include page-grid;\n\n column-gap: 111px;\n }\n }\n\n &__form {\n display: grid;\n grid-column: 1 / -1;\n box-sizing: border-box;\n\n @include on-tablet {\n grid-column: 1 / -1;\n }\n\n @include on-desktop {\n grid-column: 1 / 6;\n }\n\n &__message {\n height: 148px;\n resize: none;\n }\n\n &--style {\n box-sizing: border-box;\n cursor: pointer;\n\n width: 100%;\n padding: 14px 16px;\n border-radius: 8px;\n margin-bottom: 16px;\n outline: none;\n\n background-color: #f9f9f9;\n border: 2px solid #f9f9f9;\n\n &::placeholder {\n color: #7e7e83;\n }\n\n &:hover::placeholder {\n color: $main-text-color;\n }\n\n &:hover {\n border: 2px solid #f0f1f4;\n }\n\n &:focus {\n border: 2px solid #f98921;\n }\n }\n }\n\n &__info {\n grid-column: 1 / -1;\n\n @include on-tablet {\n grid-column: 1 / -1;\n }\n\n @include on-desktop {\n grid-column: 7 / 12;\n }\n\n &__block {\n margin-bottom: 24px;\n }\n\n &__title {\n font-weight: 400;\n margin: 0;\n margin-bottom: 8px;\n font-size: 14px;\n line-height: 19.6px;\n color: #9393a3;\n }\n\n &__link {\n font-family: $main-text-color;\n font-size: 16px;\n font-weight: 400;\n line-height: 22.4px;\n text-decoration: none;\n color: #191919;\n }\n }\n\n &__button {\n font-size: 16px;\n font-weight: 700;\n line-height: 27px;\n height: 56px;\n width: 100%;\n\n border: none;\n color: #fff;\n background-color: #f98921;\n border-radius: 8px;\n box-sizing: border-box;\n transition: all 0.3s;\n\n &:hover {\n color: #fff;\n background-color: #1b2129;\n border: 2px solid #1b2129;\n cursor: pointer;\n }\n\n &:active {\n color: #fff;\n background-color: #111;\n border: none;\n }\n }\n}\n"],"names":[],"version":3,"file":"index.c9d896db.css.map"} \ No newline at end of file diff --git a/index.cabb280d.js b/index.cabb280d.js new file mode 100644 index 0000000000..e43077fff5 --- /dev/null +++ b/index.cabb280d.js @@ -0,0 +1,2 @@ + +//# sourceMappingURL=index.cabb280d.js.map diff --git a/index.cabb280d.js.map b/index.cabb280d.js.map new file mode 100644 index 0000000000..9d54ef7950 --- /dev/null +++ b/index.cabb280d.js.map @@ -0,0 +1 @@ +{"mappings":"","sources":["src/scripts/main.js"],"sourcesContent":["'use strict';\n"],"names":[],"version":3,"file":"index.cabb280d.js.map"} \ No newline at end of file diff --git a/index.e378193d.css b/index.e378193d.css new file mode 100644 index 0000000000..598a5ca34f --- /dev/null +++ b/index.e378193d.css @@ -0,0 +1,704 @@ +.container { + padding-inline: 20px; +} + +@media (width >= 576px) { + .container { + padding-inline: 72px; + } +} + +@media (width >= 1024px) { + .container { + max-width: 1020px; + margin-inline: auto; + padding-inline: 120px; + } +} + +.page { + color: #1b2129; + scroll-behavior: smooth; + font-family: Manrope, sans-serif; + font-size: 16px; + font-style: normal; +} + +.page__body { + min-width: 320px; + margin: 0; +} + +.page__menu { + opacity: 0; + pointer-events: none; + transition: all .3s; + position: fixed; + top: 0; + left: 0; + right: 0; + transform: translateX(-100%); +} + +.page__menu:target { + opacity: 1; + pointer-events: all; + transform: translateX(0); +} + +.page:has(.page__menu:target) { + overflow: hidden; +} + +.header { + background-image: url("header-bg-mobile.2d58f869.png"); + background-position: center; + background-size: cover; +} + +.header__content { + flex-direction: column; + justify-content: space-between; + height: 100vh; + display: flex; +} + +.header__bottom { + padding-bottom: 40px; +} + +@media (width >= 576px) { + .header__bottom { + padding-bottom: 64px; + } +} + +.header__title { + font-weight: 700px; + color: #fff; + margin: 0; + font-size: 36px; + line-height: 36px; +} + +@media (width >= 576px) { + .header__title { + font-size: 40px; + } +} + +.top-bar { + justify-content: space-between; + align-items: center; + padding-block: 24px; + display: flex; +} + +@media (width >= 576px) { + .top-bar { + padding-block: 32px; + } +} + +.top-bar__icons { + gap: 24px; + display: flex; +} + +.top-bar__logo-link { + display: flex; +} + +.top-bar__logo { + height: 16px; + transition: transform .3s; +} + +.top-bar__logo:hover { + transform: scale(1.2); +} + +@media (width >= 576px) { + .top-bar__logo { + height: 24px; + } +} + +.nav__list { + flex-direction: column; + gap: 32px; + margin: 0; + padding: 0; + list-style: none; + display: flex; +} + +.nav__link { + color: inherit; + font-size: 22px; + line-height: 22px; + text-decoration: none; + position: relative; +} + +.nav__link:after { + content: ""; + transform-origin: 0; + background-color: #1b2129; + width: 100%; + height: 1px; + transition: transform .3s; + display: block; + position: absolute; + bottom: -4px; + transform: scale(0); +} + +.nav__link:hover:after { + transform: scale(1); +} + +.icon { + background-image: url("icon-burger-menu.95976320.png"); + background-size: cover; + width: 24px; + height: 24px; + transition: transform .3s; + display: block; +} + +.icon:hover { + transform: scale(1.2); +} + +@media (width >= 576px) { + .icon { + width: 32px; + height: 32px; + } +} + +.icon--phone { + background-image: url("phone-number.d644ed66.png"); +} + +@media (width >= 1024px) { + .icon--phone:before { + content: "+1 234 555-55-55"; + white-space: nowrap; + color: #1b2129; + opacity: 0; + letter-spacing: 2px; + font-family: Inter, sans-serif; + font-size: 12px; + font-weight: 700; + line-height: 32px; + text-decoration: none; + transition: opacity .5s; + position: absolute; + left: -139px; + } + + .icon--phone:hover:before { + opacity: 1; + } +} + +.icon--menu { + background-image: url("icon-burger-menu.95976320.png"); +} + +.icon--menu:hover { + background-image: url("icon-burger-menu-hover.85d55bb4.png"); +} + +.icon--close { + background-image: url("icon-close.6f3ede5c.png"); +} + +.menu { + box-sizing: border-box; + background-color: #f9f9f9; + height: 100vh; + font-size: 22px; + font-weight: 700; + line-height: 22px; +} + +.menu__top { + margin-bottom: 32px; +} + +@media (width >= 576px) { + .menu__top { + margin-bottom: 0; + } +} + +.menu__nav { + margin-bottom: 48px; +} + +.menu__phone-number { + color: inherit; + letter-spacing: 2px; + margin-bottom: 16px; + font-size: 16px; + text-decoration: none; + display: block; +} + +.menu__call-to-order { + letter-spacing: 2px; + text-transform: uppercase; + color: inherit; + border-bottom: 1px solid #1b2129; + width: fit-content; + padding-bottom: 4px; + font-size: 16px; + text-decoration: none; + display: block; +} + +.section-title { + margin: 0 0 48px; + font-size: 32px; + font-weight: 700; + line-height: 100%; +} + +@media (width >= 576px) { + .section-title { + margin-bottom: 56px; + font-size: 40px; + } +} + +@media (width >= 1024px) { + .section-title { + font-size: 48px; + } +} + +.main { + background-color: #fff; +} + +.main__content { + row-gap: 96px; + padding-block: 96px; + padding-inline: 20px; + display: grid; +} + +@media (width >= 576px) { + .main__content { + padding-inline: 72px; + } +} + +@media (width >= 1024px) { + .main__content { + max-width: 1020px; + margin-inline: auto; + padding-inline: 120px; + } +} + +@media (width >= 576px) { + .main__content { + row-gap: 120px; + padding-block: 120px; + } +} + +.main--bg-fon { + background-color: #fcfaef; + width: 100%; + height: 100%; +} + +@media (width >= 576px) { + .main--bg-fon { + height: 416px; + } +} + +@media (width >= 1024px) { + .main--bg-fon { + height: 350px; + } +} + +.product__photo { + width: 100%; +} + +.recommended__products { + --columns: 2; + grid-template-columns: repeat(var(--columns), 1fr); + gap: 40px 20px; + display: grid; +} + +@media (width >= 576px) { + .recommended__products { + --columns: 6; + column-gap: 24px; + } +} + +@media (width >= 1024px) { + .recommended__products { + --columns: 12; + } +} + +.recommended__product { + grid-column: 1 / -1; + transition: transform .3s; +} + +.recommended__product:hover { + transform: scale(1.1); +} + +@media (width >= 576px) { + .recommended__product { + grid-column: 2 / -2; + } +} + +@media (width >= 1024px) { + .recommended__product { + grid-column: span 4; + } +} + +.categories__wrapper { + row-gap: 40px; + display: grid; +} + +@media (width >= 576px) { + .categories__wrapper { + row-gap: 56px; + } +} + +.category__photos { + --columns: 2; + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 20px; + margin-bottom: 16px; + display: grid; +} + +@media (width >= 576px) { + .category__photos { + --columns: 6; + column-gap: 24px; + } +} + +@media (width >= 1024px) { + .category__photos { + --columns: 12; + } +} + +@media (width >= 576px) { + .category__link--square { + grid-column: span 3; + } +} + +@media (width >= 1024px) { + .category__link--square { + grid-column: span 6; + } +} + +.category__photo { + object-fit: cover; + width: 100%; + height: 100%; + transition: transform .3s; +} + +.category__photo:hover { + transform: scale(1.1); +} + +.category__title { + margin: 0; + font-size: 18px; + font-weight: 700; + line-height: 25.2px; +} + +.button { + color: #fff; + background-color: #f98921; + border: none; + border-radius: 8px; + outline: none; + width: 100%; + height: 56px; + font-size: 16px; + font-weight: 700; + line-height: 27px; + transition: all .3s; +} + +.button:hover { + color: #fff; + cursor: pointer; + background-color: #1b2129; + border: 1px solid #1b2129; + align-items: center; + line-height: 27px; +} + +@media (width >= 1024px) { + .button { + width: 324px; + } +} + +.bg__element { + display: flex; +} + +.bg__element__photo { + text-align: center; + object-fit: cover; + object-position: center -100px; + width: 100%; + height: 200px; +} + +@media (width >= 576px) { + .bg__element__photo { + height: 400px; + } +} + +@media (width >= 1024px) { + .bg__element__photo { + height: 460px; + } +} + +.about { + --columns: 2; + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 20px; + display: grid; +} + +@media (width >= 576px) { + .about { + --columns: 6; + column-gap: 24px; + } +} + +@media (width >= 1024px) { + .about { + --columns: 12; + } +} + +.about__title { + grid-column: 1 / -1; +} + +@media (width >= 576px) { + .about__title { + grid-column: 1 / 4; + } +} + +@media (width >= 1024px) { + .about__title { + grid-column: span 6; + } +} + +.about__description { + grid-column: 1 / -1; +} + +@media (width >= 576px) { + .about__description { + grid-column: 4 / 7; + } +} + +@media (width >= 1024px) { + .about__description { + grid-column: 8 / 13; + } +} + +.contacts { + margin-bottom: 64px; + font-family: Manrope, sans-serif; +} + +@media (width >= 576px) { + .contacts { + margin-bottom: 120px; + } +} + +.contacts__wrapper { + box-sizing: border-box; + gap: 48px; + display: grid; +} + +@media (width >= 576px) { + .contacts__wrapper { + gap: 80px; + } +} + +@media (width >= 1024px) { + .contacts__wrapper { + --columns: 2; + grid-template-columns: repeat(var(--columns), 1fr); + column-gap: 111px; + display: grid; + } +} + +@media (width >= 1024px) and (width >= 576px) { + .contacts__wrapper { + --columns: 6; + column-gap: 24px; + } +} + +@media (width >= 1024px) and (width >= 1024px) { + .contacts__wrapper { + --columns: 12; + } +} + +.contacts__form { + box-sizing: border-box; + grid-column: 1 / -1; + display: grid; +} + +@media (width >= 576px) { + .contacts__form { + grid-column: 1 / -1; + } +} + +@media (width >= 1024px) { + .contacts__form { + grid-column: 1 / 6; + } +} + +.contacts__form__message { + resize: none; + height: 148px; +} + +.contacts__form--style { + box-sizing: border-box; + cursor: pointer; + background-color: #f9f9f9; + border: 2px solid #f9f9f9; + border-radius: 8px; + outline: none; + width: 100%; + margin-bottom: 16px; + padding: 14px 16px; +} + +.contacts__form--style::placeholder { + color: #7e7e83; +} + +.contacts__form--style:hover::placeholder { + color: #1b2129; +} + +.contacts__form--style:hover { + border: 2px solid #f0f1f4; +} + +.contacts__form--style:focus { + border: 2px solid #f98921; +} + +.contacts__info { + grid-column: 1 / -1; +} + +@media (width >= 576px) { + .contacts__info { + grid-column: 1 / -1; + } +} + +@media (width >= 1024px) { + .contacts__info { + grid-column: 7 / 12; + } +} + +.contacts__info__block { + margin-bottom: 24px; +} + +.contacts__info__title { + color: #9393a3; + margin: 0 0 8px; + font-size: 14px; + font-weight: 400; + line-height: 19.6px; +} + +.contacts__info__link { + font-family: #1b2129; + color: #191919; + font-size: 16px; + font-weight: 400; + line-height: 22.4px; + text-decoration: none; +} + +.contacts__button { + color: #fff; + box-sizing: border-box; + background-color: #f98921; + border: none; + border-radius: 8px; + width: 100%; + height: 56px; + font-size: 16px; + font-weight: 700; + line-height: 27px; + transition: all .3s; +} + +.contacts__button:hover { + color: #fff; + cursor: pointer; + background-color: #1b2129; + border: 2px solid #1b2129; +} + +.contacts__button:active { + color: #fff; + background-color: #111; + border: none; +} +/*# sourceMappingURL=index.e378193d.css.map */ diff --git a/index.e378193d.css.map b/index.e378193d.css.map new file mode 100644 index 0000000000..65eedcbb13 --- /dev/null +++ b/index.e378193d.css.map @@ -0,0 +1 @@ +{"mappings":"AA0BA;;;;AAzBE;EAyBF;;;;;AAnBE;EAmBF;;;;;;;AC1BA;;;;;;;;AAOE;;;;;AAKA;;;;;;;;;;;AAWE;;;;;;AAOF;;;;AC9BF;;;;;;AAKE;;;;;;;AAQA;;;;AFZA;EEYA;;;;;AAQA;;;;;;;;AFpBA;EEoBA;;;;;ACrBF;;;;;;;AHCE;EGDF;;;;;AAWE;;;;;AAKA;;;;AAIA;;;;;AHYA;;;;AA/BA;EGmBA;;;;;ACnBA;;;;;;;;;AAUA;;;;;;;;AAOE;;;;;;;;;;;;;AAcA;;;;AChCJ;;;;;;;;;ALgCE;;;;AA/BA;EKDF;;;;;;AAcE;;;;ALPA;EKWI;;;;;;;;;;;;;;;;EAiBA;;;;;AAMJ;;;;AAGE;;;;AAKF;;;;ACjDF;;;;;;;;;AAQE;;;;ANPA;EMOA;;;;;AAQA;;;;AAIA;;;;;;;;;AASA;;;;;;;;;;;;AC7BF;;;;;;;APCE;EODF;;;;;;APOE;EOPF;;;;;ACAA;;;;AAGE;;;;;;;ARFA;EQEA;;;;;ARIA;EQJA;;;;;;;ARFA;EQEA;;;;;;AAaA;;;;;;ARfA;EQeA;;;;;ARTA;EQSA;;;;;ACfA;;;;ACAA;;;;;;;AVAA;EUAA;;;;;;AVMA;EUNA;;;;;AAMA;;;;;AVyBA;;;;AA/BA;EUMA;;;;;AVAA;EUAA;;;;;ACNA;;;;;AXAA;EWAA;;;;;AAWA;;;;;;;;AXXA;EWWA;;;;;;AXLA;EWKA;;;;;AXXA;EWkBE;;;;;AXZF;EWYE;;;;;AAWF;;;;;;;AXEA;;;;AWMA;;;;;;;AAQF;;;;;;;;;;;;;;AAaE;;;;;;;;;AXpDA;EWuCF;;;;;AC9CA;;;;AAGE;;;;;;;;AZFA;EYEA;;;;;AZIA;EYJA;;;;;ACHF;;;;;;;AbCE;EaDF;;;;;;AbOE;EaPF;;;;;AAGE;;;;AbFA;EaEA;;;;;AbIA;EaJA;;;;;AAYA;;;;AbdA;EacA;;;;;AbRA;EaQA;;;;;ACfF;;;;;AdCE;EcDF;;;;;AAQE;;;;;;AdPA;EcOA;;;;;AdDA;EcCA;;;;;;;;AdPA;EcOA;;;;;;AdDA;EcCA;;;;;AAgBA;;;;;;AdvBA;EcuBA;;;;;AdjBA;EciBA;;;;;AAaE;;;;;AAKA;;;;;;;;;;;;AAaE;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAMJ;;;;AdxEA;EcwEA;;;;;AdlEA;EckEA;;;;;AAWE;;;;AAIA;;;;;;;;AASA;;;;;;;;;AAUF;;;;;;;;;;;;;;AAcE;;;;;;;AAOA","sources":["src/styles/utils/mixins.scss","src/styles/blocks/page.scss","src/styles/blocks/header.scss","src/styles/blocks/top-bar.scss","src/styles/blocks/nav.scss","src/styles/blocks/icon.scss","src/styles/blocks/menu.scss","src/styles/blocks/section-title.scss","src/styles/blocks/main.scss","src/styles/blocks/product.scss","src/styles/blocks/recommended.scss","src/styles/blocks/categories.scss","src/styles/blocks/bg__element.scss","src/styles/blocks/about.scss","src/styles/blocks/contacts.scss"],"sourcesContent":[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],"names":[],"version":3,"file":"index.e378193d.css.map","sourceRoot":"/__parcel_source_root/"} \ No newline at end of file diff --git a/index.f75de5e1.js b/index.f75de5e1.js new file mode 100644 index 0000000000..5c947bd3b8 --- /dev/null +++ b/index.f75de5e1.js @@ -0,0 +1,3 @@ +"use strict"; + +//# sourceMappingURL=index.f75de5e1.js.map diff --git a/index.f75de5e1.js.map b/index.f75de5e1.js.map new file mode 100644 index 0000000000..1c33459526 --- /dev/null +++ b/index.f75de5e1.js.map @@ -0,0 +1 @@ +{"mappings":"AAAA","sources":["src/scripts/main.js"],"sourcesContent":["'use strict';\n"],"names":[],"version":3,"file":"index.f75de5e1.js.map","sourceRoot":"/__parcel_source_root/"} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000000..4ef9b13a78 --- /dev/null +++ b/index.html @@ -0,0 +1 @@ +B&O

Your senses.
Set free.

Sound. Vision.
It’s your pick.

Img portable-speakers Img portable-speakers

Portable speakers

Img earphones Img earphones

Earphones

Img Smart Home Img Smart Home

Smart Home

Img fon

Timeless, for 50 years and counting

Bang & Olufsen is expanding its Recreated Classics Program with the launch of Beosystems – a limited edition music system that transcends time by bridging the gap between one of our iconic designs from 1972 and today’s cutting-edge digital technology.

Contact Us

\ No newline at end of file diff --git a/layout_landing-page.59712999.js b/layout_landing-page.59712999.js new file mode 100644 index 0000000000..14f32f6f7f --- /dev/null +++ b/layout_landing-page.59712999.js @@ -0,0 +1,590 @@ +// modules are defined as an array +// [ module function, map of requires ] +// +// map of requires is short require name -> numeric require +// +// anything defined in a previous bundle is accessed via the +// orig method which is the require for previous bundles + +(function (modules, entry, mainEntry, parcelRequireName, globalName) { + /* eslint-disable no-undef */ + var globalObject = + typeof globalThis !== 'undefined' + ? globalThis + : typeof self !== 'undefined' + ? self + : typeof window !== 'undefined' + ? window + : typeof global !== 'undefined' + ? global + : {}; + /* eslint-enable no-undef */ + + // Save the require from previous bundle to this closure if any + var previousRequire = + typeof globalObject[parcelRequireName] === 'function' && + globalObject[parcelRequireName]; + + var cache = previousRequire.cache || {}; + // Do not use `require` to prevent Webpack from trying to bundle this call + var nodeRequire = + typeof module !== 'undefined' && + typeof module.require === 'function' && + module.require.bind(module); + + function newRequire(name, jumped) { + if (!cache[name]) { + if (!modules[name]) { + // if we cannot find the module within our internal map or + // cache jump to the current global require ie. the last bundle + // that was added to the page. + var currentRequire = + typeof globalObject[parcelRequireName] === 'function' && + globalObject[parcelRequireName]; + if (!jumped && currentRequire) { + return currentRequire(name, true); + } + + // If there are other bundles on this page the require from the + // previous one is saved to 'previousRequire'. Repeat this as + // many times as there are bundles until the module is found or + // we exhaust the require chain. + if (previousRequire) { + return previousRequire(name, true); + } + + // Try the node require function if it exists. + if (nodeRequire && typeof name === 'string') { + return nodeRequire(name); + } + + var err = new Error("Cannot find module '" + name + "'"); + err.code = 'MODULE_NOT_FOUND'; + throw err; + } + + localRequire.resolve = resolve; + localRequire.cache = {}; + + var module = (cache[name] = new newRequire.Module(name)); + + modules[name][0].call( + module.exports, + localRequire, + module, + module.exports, + this + ); + } + + return cache[name].exports; + + function localRequire(x) { + var res = localRequire.resolve(x); + return res === false ? {} : newRequire(res); + } + + function resolve(x) { + var id = modules[name][1][x]; + return id != null ? id : x; + } + } + + function Module(moduleName) { + this.id = moduleName; + this.bundle = newRequire; + this.exports = {}; + } + + newRequire.isParcelRequire = true; + newRequire.Module = Module; + newRequire.modules = modules; + newRequire.cache = cache; + newRequire.parent = previousRequire; + newRequire.register = function (id, exports) { + modules[id] = [ + function (require, module) { + module.exports = exports; + }, + {}, + ]; + }; + + Object.defineProperty(newRequire, 'root', { + get: function () { + return globalObject[parcelRequireName]; + }, + }); + + globalObject[parcelRequireName] = newRequire; + + for (var i = 0; i < entry.length; i++) { + newRequire(entry[i]); + } + + if (mainEntry) { + // Expose entry point to Node, AMD or browser globals + // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js + var mainExports = newRequire(mainEntry); + + // CommonJS + if (typeof exports === 'object' && typeof module !== 'undefined') { + module.exports = mainExports; + + // RequireJS + } else if (typeof define === 'function' && define.amd) { + define(function () { + return mainExports; + }); + + //