diff --git a/bg-image.16e3640a.png b/bg-image.16e3640a.png new file mode 100644 index 0000000000..996c422a2a Binary files /dev/null and b/bg-image.16e3640a.png differ diff --git a/category_accesories1.aa1a4c71.png b/category_accesories1.aa1a4c71.png new file mode 100644 index 0000000000..5f0d4dc84a Binary files /dev/null and b/category_accesories1.aa1a4c71.png differ diff --git a/category_accesories2.9a3df495.png b/category_accesories2.9a3df495.png new file mode 100644 index 0000000000..35cfbf763e Binary files /dev/null and b/category_accesories2.9a3df495.png differ diff --git a/category_all1.7d0fc2aa.png b/category_all1.7d0fc2aa.png new file mode 100644 index 0000000000..68c2689801 Binary files /dev/null and b/category_all1.7d0fc2aa.png differ diff --git a/category_all2.deeba9aa.png b/category_all2.deeba9aa.png new file mode 100644 index 0000000000..376ce7b975 Binary files /dev/null and b/category_all2.deeba9aa.png differ diff --git a/category_audio1.330428c5.png b/category_audio1.330428c5.png new file mode 100644 index 0000000000..dfe991330b Binary files /dev/null and b/category_audio1.330428c5.png differ diff --git a/category_audio2.e3bd05ec.png b/category_audio2.e3bd05ec.png new file mode 100644 index 0000000000..5c934c4a92 Binary files /dev/null and b/category_audio2.e3bd05ec.png differ diff --git a/ear_2.87ec769c.png b/ear_2.87ec769c.png new file mode 100644 index 0000000000..3d79d9b1e1 Binary files /dev/null and b/ear_2.87ec769c.png differ diff --git a/ear_stick.4de7f20c.png b/ear_stick.4de7f20c.png new file mode 100644 index 0000000000..1afb8003f7 Binary files /dev/null and b/ear_stick.4de7f20c.png differ diff --git a/full-width-section-bg.adbb675d.png b/full-width-section-bg.adbb675d.png new file mode 100644 index 0000000000..e3d42f004e Binary files /dev/null and b/full-width-section-bg.adbb675d.png differ diff --git a/icon-burger-menu-hover.9d6e516e.svg b/icon-burger-menu-hover.9d6e516e.svg new file mode 100644 index 0000000000..99f849c7f2 --- /dev/null +++ b/icon-burger-menu-hover.9d6e516e.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/icon-burger-menu.bd10eb8f.svg b/icon-burger-menu.bd10eb8f.svg new file mode 100644 index 0000000000..fabd44484d --- /dev/null +++ b/icon-burger-menu.bd10eb8f.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/icon-close.31bb77d6.svg b/icon-close.31bb77d6.svg new file mode 100644 index 0000000000..c4cb2c074b --- /dev/null +++ b/icon-close.31bb77d6.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/icon-phone.657af3f4.svg b/icon-phone.657af3f4.svg new file mode 100644 index 0000000000..e1428ac124 --- /dev/null +++ b/icon-phone.657af3f4.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index.b54d57b3.css b/index.b54d57b3.css new file mode 100644 index 0000000000..d1a5ec0b78 --- /dev/null +++ b/index.b54d57b3.css @@ -0,0 +1,2 @@ +*{box-sizing:border-box}.page{color:#292929;scroll-behavior:smooth;font-family:Space Grotesk,sans-serif;font-size:16px;line-height:140%}.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}.container{padding-left:20px;padding-right:20px}@media (min-width:576px){.container{padding-left:72px;padding-right:72px}}@media (min-width:1024px){.container{padding-left:120px;padding-right:120px}}.text-mono{font-family:Space Mono,monospace}.button{color:#fff;box-sizing:border-box;background-color:#292929;border:2px solid #292929;border-radius:8px;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;width:100%;height:56px;font-family:inherit;font-size:16px;font-weight:700;line-height:168.75%;text-decoration:none;display:-ms-flexbox;display:flex}.button:hover{color:#292929;background-color:#f8f8fa;border:2px solid #f0f1f4}.button:active{color:#fff;background-color:#111;border:2px solid #111}.main__content{row-gap:96px;padding-top:96px;padding-bottom:96px;display:grid}@media (min-width:576px){.main__content{row-gap:120px;padding-top:120px;padding-bottom:120px}}.header{background:url(bg-image.16e3640a.png) 50%/cover}.header__content{box-sizing:border-box;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;height:100vh;display:-ms-flexbox;display:flex}.header__title{margin:0;font-size:36px;font-weight:700;line-height:100%}@media (min-width:576px){.header__title{font-size:48px}}.header__bottom{padding-bottom:40px}@media (min-width:576px){.header__bottom{padding-bottom:65px}}.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 .5s}.top-bar__logo:hover{transform:scale(1.2)}@media (min-width:576px){.top-bar__logo{height:24px}}.icon{background-position:50%;background-size:cover;width:24px;height:24px;transition:transform .5s;display:block}.icon:hover{transform:scale(1.2)}@media (min-width:576px){.icon{width:32px;height:32px}}.icon--phone{background-image:url(icon-phone.657af3f4.svg)}.icon--menu{background-image:url(icon-burger-menu.bd10eb8f.svg)}.icon--menu:hover{background-image:url(icon-burger-menu-hover.9d6e516e.svg)}.icon--close{background-image:url(icon-close.31bb77d6.svg)}.menu{letter-spacing:2px;background-color:#e5e6e8;height:100vh;font-weight:700}.menu__top{margin-bottom:32px}@media (min-width:576px){.menu__top{margin-bottom:0}}.menu__nav{margin-bottom:48px}.menu__phone-number{color:inherit;margin-bottom:16px;text-decoration:none;display:block}.menu__call-to-order{color:inherit;text-transform:uppercase;border-bottom:1px solid #292929;width:-moz-fit-content;width:fit-content;padding-bottom:3px;text-decoration:none;display:block}.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:100%;text-decoration:none;position:relative}.nav__link:after{content:"";transform-origin:0;background-color:#292929;width:100%;height:1px;transition:transform .3s;display:block;position:absolute;bottom:-8px;transform:scale(0)}.nav__link:hover:after{transform:scale(1)}.section-title{margin-bottom: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}}.recommended{background-color:#fff}.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}@media (min-width:1024px){.recommended__product{grid-column:span 4}}.product{transition:transform .5s}.product__image{width:100%;margin-bottom:24px}.product__title{margin-bottom:8px;font-size:18px;font-weight:700}.product__text{margin-bottom:12px}@media (min-width:1024px){.product__text{max-width:280px}}.product__price{font-weight:700}.product:hover{transform:scale(1.1)}.categories{background-color:#fff}@media (min-width:1024px){.categories__title{max-width:585px}}.categories__wrapper{row-gap:40px;margin-bottom:40px;display:grid}@media (min-width:576px){.categories__wrapper{row-gap:56px;margin-bottom:56px}}@media (min-width:1024px){.categories__button{max-width:324px}}.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}}.category__link{display:block;position:relative}@media (min-width:576px){.category__link--wide{grid-column:span 4}}@media (min-width:1024px){.category__link--wide{grid-column:span 8}}.category__link--square{height:0;padding-bottom:100%}@media (min-width:576px){.category__link--square{grid-column:span 2}}@media (min-width:1024px){.category__link--square{grid-column:span 4}}.category__image{object-fit:cover;width:100%;height:100%;transition:transform .5s;position:absolute}.category__image:hover{transform:scale(1.1)}.category__title{font-size:18px;font-weight:700}@media (min-width:576px){.category__title{font-size:24px}}.full-width{z-index:-1;background:url(full-width-section-bg.adbb675d.png) 50%/cover;height:100px;position:sticky;top:0;bottom:0;overflow:hidden}@media (min-width:576px){.full-width{height:400px}}@media (min-width:1024px){.full-width{height:460px}}.about-us{--columns:2;grid-template-columns:repeat(var(--columns),1fr);background-color:#fff;column-gap:20px;display:grid}@media (min-width:576px){.about-us{--columns:6;column-gap:24px}}@media (min-width:1024px){.about-us{--columns:12}}.about-us__title{grid-column:1/-1}@media (min-width:576px){.about-us__title{grid-column:1/4}}@media (min-width:1024px){.about-us__title{grid-column:span 6}}.about-us__content{-ms-flex-direction:column;flex-direction:column;grid-column:1/-1;gap:30px;display:-ms-flexbox;display:flex}@media (min-width:576px){.about-us__content{grid-column:4/7}}@media (min-width:1024px){.about-us__content{grid-column:span 6}}.contacts{background-color:#fff}.contacts__wrapper{--columns:2;grid-template-columns:repeat(var(--columns),1fr);column-gap:20px;display:grid}@media (min-width:576px){.contacts__wrapper{--columns:6;column-gap:24px}}@media (min-width:1024px){.contacts__wrapper{--columns:12}}.contacts__form{-ms-flex-direction:column;flex-direction:column;grid-column:1/-1;gap:16px;margin-bottom:48px;display:-ms-flexbox;display:flex}@media (min-width:1024px){.contacts__form{grid-column:1/6}}@media (min-width:576px){.contacts__form{margin-bottom:80px}}.contacts__form-field{box-sizing:border-box;color:#7e7e83;background-color:#f8f8fa;border:2px solid transparent;border-radius:8px;width:100%;height:48px;padding:16px 14px;font-size:14px}.contacts__form-field--textarea{height:148px;margin-bottom:16px}.contacts__form-field:hover{color:#292929;border:2px solid #d5d7de}.contacts__form-field:active{color:#292929;border:2px solid #292929}.contacts__content{-ms-flex-direction:column;flex-direction:column;grid-column:1/-1;gap:24px;display:-ms-flexbox;display:flex}@media (min-width:1024px){.contacts__content{grid-column:7/-1}}.info{-ms-flex-direction:column;flex-direction:column;gap:8px;display:-ms-flexbox;display:flex}.info__label{color:#9393a3}.info__url{color:#292929;text-decoration:none;transition:color .5s}.info__url:hover{color:#9393a3} +/*# sourceMappingURL=index.b54d57b3.css.map */ diff --git a/index.b54d57b3.css.map b/index.b54d57b3.css.map new file mode 100644 index 0000000000..39e86040f9 --- /dev/null +++ b/index.b54d57b3.css.map @@ -0,0 +1 @@ +{"mappings":"ACAA,wBAIA,gHASI,qCAMA,2HAYE,uEASN,8CAAA,gDCjCE,yBDiCF,iDAcA,0BACE,mDAKA,4CAKA,sVAoBE,8EElFA,sEAKA,8E,yBCFF,qE,yEAYE,yLAQF,wE,yB,+BCrBA,oCAGE,yB,qC,4K,yBHQF,+CGUI,0DCzBJ,qDAIA,oD,0CAME,yB,4BAOF,kH,iCCfA,yBACA,8BAEA,4EASA,iFAKE,6F,4EAUA,+EC7BF,8BAKE,yBACA,4BAMA,8B,wFAYE,2LCzBN,wIAQI,gG,sLPoBA,0CArBF,kF,yBAAA,kDQPF,0BRcE,+B,mCQJE,+G,yBAWF,oDCrBF,0BACE,qC,uCAUE,0BAEA,0CAIE,kCAIJ,8CAQA,iE,kCTAE,0B,gC,gCSQA,oCAII,kCAHJ,0BAMI,oCAMF,kE,yBT3CJ,sDSuDE,0BACA,qCT/CF,+HS0DI,yB,+CClEJ,0BACA,gCATF,gDAAA,yBAiBI,0CChBF,0BXqBA,0CArBA,qD,yBAMA,4CAAA,0BWPF,4CAUI,oGADF,4CAWA,gD,yBXnBA,iCAMA,iKAeA,yBACA,0BYpBA,0BZyBE,0BYzBF,0H,yBZIA,uCYaI,0B,wBAaA,kCAIE,yB,kCAQF,0BACE,qCAcJ,8H,yB,oCCzDF,0B,uCAOE,gCbMF,6G,yB,gD,0B,iC,8I,0B,iC,yB,oC,0L,gE,mE,oE,8H,0B,qC,+F,2B,mE","sources":["index.b54d57b3.css","src/styles/blocks/page.scss","src/styles/utils/mixins.scss","src/styles/blocks/main.scss","src/styles/blocks/header.scss","src/styles/blocks/top-bar.scss","src/styles/blocks/icon.scss","src/styles/blocks/menu.scss","src/styles/blocks/nav.scss","src/styles/blocks/section-title.scss","src/styles/blocks/product.scss","src/styles/blocks/categories.scss","src/styles/blocks/full-width.scss","src/styles/blocks/about-us.scss","src/styles/blocks/contacts.scss","src/styles/blocks/info.scss"],"sourcesContent":["* {\n box-sizing: border-box;\n}\n\n.page {\n color: #292929;\n scroll-behavior: smooth;\n font-family: Space Grotesk, sans-serif;\n font-size: 16px;\n line-height: 140%;\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.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 padding-left: 120px;\n padding-right: 120px;\n }\n}\n\n.text-mono {\n font-family: Space Mono, monospace;\n}\n\n.button {\n color: #fff;\n box-sizing: border-box;\n background-color: #292929;\n border: 2px solid #292929;\n border-radius: 8px;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 56px;\n font-family: inherit;\n font-size: 16px;\n font-weight: 700;\n line-height: 168.75%;\n text-decoration: none;\n display: -ms-flexbox;\n display: flex;\n}\n\n.button:hover {\n color: #292929;\n background-color: #f8f8fa;\n border: 2px solid #f0f1f4;\n}\n\n.button:active {\n color: #fff;\n background-color: #111;\n border: 2px solid #111;\n}\n\n.main__content {\n row-gap: 96px;\n padding-top: 96px;\n padding-bottom: 96px;\n display: grid;\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.header {\n background: url(\"bg-image.16e3640a.png\") center / cover;\n}\n\n.header__content {\n box-sizing: border-box;\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__title {\n margin: 0;\n font-size: 36px;\n font-weight: 700;\n line-height: 100%;\n}\n\n@media (width >= 576px) {\n .header__title {\n font-size: 48px;\n }\n}\n\n.header__bottom {\n padding-bottom: 40px;\n}\n\n@media (width >= 576px) {\n .header__bottom {\n padding-bottom: 65px;\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 .5s;\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.icon {\n background-position: center;\n background-size: cover;\n width: 24px;\n height: 24px;\n transition: transform .5s;\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(\"icon-phone.657af3f4.svg\");\n}\n\n.icon--menu {\n background-image: url(\"icon-burger-menu.bd10eb8f.svg\");\n}\n\n.icon--menu:hover {\n background-image: url(\"icon-burger-menu-hover.9d6e516e.svg\");\n}\n\n.icon--close {\n background-image: url(\"icon-close.31bb77d6.svg\");\n}\n\n.menu {\n letter-spacing: 2px;\n background-color: #e5e6e8;\n height: 100vh;\n font-weight: 700;\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 margin-bottom: 16px;\n text-decoration: none;\n display: block;\n}\n\n.menu__call-to-order {\n color: inherit;\n text-transform: uppercase;\n border-bottom: 1px solid #292929;\n width: fit-content;\n padding-bottom: 3px;\n text-decoration: none;\n display: block;\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: 100%;\n text-decoration: none;\n position: relative;\n}\n\n.nav__link:after {\n content: \"\";\n transform-origin: 0;\n background-color: #292929;\n width: 100%;\n height: 1px;\n transition: transform .3s;\n display: block;\n position: absolute;\n bottom: -8px;\n transform: scale(0);\n}\n\n.nav__link:hover:after {\n transform: scale(1);\n}\n\n.section-title {\n margin-bottom: 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.recommended {\n background-color: #fff;\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}\n\n@media (width >= 1024px) {\n .recommended__product {\n grid-column: span 4;\n }\n}\n\n.product {\n transition: transform .5s;\n}\n\n.product__image {\n width: 100%;\n margin-bottom: 24px;\n}\n\n.product__title {\n margin-bottom: 8px;\n font-size: 18px;\n font-weight: 700;\n}\n\n.product__text {\n margin-bottom: 12px;\n}\n\n@media (width >= 1024px) {\n .product__text {\n max-width: 280px;\n }\n}\n\n.product__price {\n font-weight: 700;\n}\n\n.product:hover {\n transform: scale(1.1);\n}\n\n.categories {\n background-color: #fff;\n}\n\n@media (width >= 1024px) {\n .categories__title {\n max-width: 585px;\n }\n}\n\n.categories__wrapper {\n row-gap: 40px;\n margin-bottom: 40px;\n display: grid;\n}\n\n@media (width >= 576px) {\n .categories__wrapper {\n row-gap: 56px;\n margin-bottom: 56px;\n }\n}\n\n@media (width >= 1024px) {\n .categories__button {\n max-width: 324px;\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.category__link {\n display: block;\n position: relative;\n}\n\n@media (width >= 576px) {\n .category__link--wide {\n grid-column: span 4;\n }\n}\n\n@media (width >= 1024px) {\n .category__link--wide {\n grid-column: span 8;\n }\n}\n\n.category__link--square {\n height: 0;\n padding-bottom: 100%;\n}\n\n@media (width >= 576px) {\n .category__link--square {\n grid-column: span 2;\n }\n}\n\n@media (width >= 1024px) {\n .category__link--square {\n grid-column: span 4;\n }\n}\n\n.category__image {\n object-fit: cover;\n width: 100%;\n height: 100%;\n transition: transform .5s;\n position: absolute;\n}\n\n.category__image:hover {\n transform: scale(1.1);\n}\n\n.category__title {\n font-size: 18px;\n font-weight: 700;\n}\n\n@media (width >= 576px) {\n .category__title {\n font-size: 24px;\n }\n}\n\n.full-width {\n z-index: -1;\n background: url(\"full-width-section-bg.adbb675d.png\") center / cover;\n height: 100px;\n position: sticky;\n top: 0;\n bottom: 0;\n overflow: hidden;\n}\n\n@media (width >= 576px) {\n .full-width {\n height: 400px;\n }\n}\n\n@media (width >= 1024px) {\n .full-width {\n height: 460px;\n }\n}\n\n.about-us {\n --columns: 2;\n grid-template-columns: repeat(var(--columns), 1fr);\n background-color: #fff;\n column-gap: 20px;\n display: grid;\n}\n\n@media (width >= 576px) {\n .about-us {\n --columns: 6;\n column-gap: 24px;\n }\n}\n\n@media (width >= 1024px) {\n .about-us {\n --columns: 12;\n }\n}\n\n.about-us__title {\n grid-column: 1 / -1;\n}\n\n@media (width >= 576px) {\n .about-us__title {\n grid-column: 1 / 4;\n }\n}\n\n@media (width >= 1024px) {\n .about-us__title {\n grid-column: span 6;\n }\n}\n\n.about-us__content {\n -ms-flex-direction: column;\n flex-direction: column;\n grid-column: 1 / -1;\n gap: 30px;\n display: -ms-flexbox;\n display: flex;\n}\n\n@media (width >= 576px) {\n .about-us__content {\n grid-column: 4 / 7;\n }\n}\n\n@media (width >= 1024px) {\n .about-us__content {\n grid-column: span 6;\n }\n}\n\n.contacts {\n background-color: #fff;\n}\n\n.contacts__wrapper {\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 .contacts__wrapper {\n --columns: 6;\n column-gap: 24px;\n }\n}\n\n@media (width >= 1024px) {\n .contacts__wrapper {\n --columns: 12;\n }\n}\n\n.contacts__form {\n -ms-flex-direction: column;\n flex-direction: column;\n grid-column: 1 / -1;\n gap: 16px;\n margin-bottom: 48px;\n display: -ms-flexbox;\n display: flex;\n}\n\n@media (width >= 1024px) {\n .contacts__form {\n grid-column: 1 / 6;\n }\n}\n\n@media (width >= 576px) {\n .contacts__form {\n margin-bottom: 80px;\n }\n}\n\n.contacts__form-field {\n box-sizing: border-box;\n color: #7e7e83;\n background-color: #f8f8fa;\n border: 2px solid #0000;\n border-radius: 8px;\n width: 100%;\n height: 48px;\n padding: 16px 14px;\n font-size: 14px;\n}\n\n.contacts__form-field--textarea {\n height: 148px;\n margin-bottom: 16px;\n}\n\n.contacts__form-field:hover {\n color: #292929;\n border: 2px solid #d5d7de;\n}\n\n.contacts__form-field:active {\n color: #292929;\n border: 2px solid #292929;\n}\n\n.contacts__content {\n -ms-flex-direction: column;\n flex-direction: column;\n grid-column: 1 / -1;\n gap: 24px;\n display: -ms-flexbox;\n display: flex;\n}\n\n@media (width >= 1024px) {\n .contacts__content {\n grid-column: 7 / -1;\n }\n}\n\n.info {\n -ms-flex-direction: column;\n flex-direction: column;\n gap: 8px;\n display: -ms-flexbox;\n display: flex;\n}\n\n.info__label {\n color: #9393a3;\n}\n\n.info__url {\n color: #292929;\n text-decoration: none;\n transition: color .5s;\n}\n\n.info__url:hover {\n color: #9393a3;\n}\n/*# sourceMappingURL=index.b54d57b3.css.map */\n","* {\n box-sizing: border-box;\n}\n\n.page {\n font-family: 'Space Grotesk', sans-serif;\n color: $main-text-color;\n font-size: 16px;\n line-height: 140%;\n\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; /* not to scroll the page */\n }\n}\n\n.container {\n padding-inline: 20px;\n\n @include on-tablet {\n padding-inline: 72px;\n }\n\n @include on-desktop {\n padding-inline: 120px;\n }\n}\n\n// for on-desktop in container\n// max-width: 1260px;\n// margin: 0 auto;\n\n.text-mono {\n font-family: 'Space Mono', monospace;\n}\n\n.button {\n display: flex;\n justify-content: center;\n align-items: center;\n\n font-family: inherit;\n font-size: 16px;\n font-weight: 700;\n line-height: 168.75%; /* 27/16 */\n text-decoration: none;\n color: #fff;\n background-color: $main-text-color;\n\n box-sizing: border-box;\n height: 56px;\n width: 100%;\n border: 2px solid $main-text-color;\n border-radius: 8px;\n\n &:hover {\n color: $main-text-color;\n background-color: #f8f8fa;\n border: 2px solid #f0f1f4;\n }\n\n &:active {\n color: #fff;\n background-color: #111;\n border: 2px solid #111;\n }\n}\n","@mixin on-tablet {\n @media (min-width: $tablet-min-width) {\n @content;\n }\n}\n\n@mixin on-desktop {\n @media (min-width: $desktop-min-width) {\n @content;\n }\n}\n\n@mixin hover($property, $toValue) {\n transition: #{$property} 0.5s;\n\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 column-gap: 24px;\n\n --columns: 6;\n }\n\n @include on-desktop {\n --columns: 12;\n }\n}\n",".main {\n &__content {\n display: grid;\n row-gap: 96px;\n padding-block: 96px;\n\n @include on-tablet {\n row-gap: 120px;\n padding-block: 120px;\n }\n }\n}\n",".header {\n background: center / cover url(../images/bg-image.png);\n\n // background-image: url(../images/bg-image.png);\n // background-size: cover;\n // background-position: center;\n\n &__content {\n box-sizing: border-box;\n height: 100vh;\n\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n }\n\n &__title {\n margin: 0;\n font-size: 36px;\n font-weight: 700;\n line-height: 100%;\n\n @include on-tablet {\n font-size: 48px;\n }\n }\n\n &__bottom {\n padding-bottom: 40px;\n\n @include on-tablet {\n padding-bottom: 65px;\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",".icon {\n display: block;\n height: 24px;\n width: 24px;\n background-size: cover;\n background-position: center;\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/icon-phone.svg);\n }\n\n &--menu {\n background-image: url(../images/icons/icon-burger-menu.svg);\n\n &:hover {\n background-image: url(../images/icons/icon-burger-menu-hover.svg);\n }\n }\n\n &--close {\n background-image: url(../images/icons/icon-close.svg);\n }\n}\n",".menu {\n height: 100vh;\n background-color: #e5e6e8;\n font-weight: 700;\n letter-spacing: 2px;\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 display: block;\n\n margin-bottom: 16px;\n }\n\n &__call-to-order {\n color: inherit;\n text-decoration: none;\n display: block;\n width: fit-content;\n text-transform: uppercase;\n\n padding-bottom: 3px;\n border-bottom: 1px solid $main-text-color;\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\n font-size: 22px;\n line-height: 100%;\n\n &::after {\n content: '';\n display: block;\n position: absolute;\n bottom: -8px;\n width: 100%;\n height: 1px;\n background-color: $main-text-color;\n\n // @include hover(transform, scale(0));\n\n transition: transform 0.3s;\n transform: scale(0);\n transform-origin: left;\n }\n &:hover::after {\n transform: scale(1);\n }\n }\n}\n",".section-title {\n margin-bottom: 48px;\n font-size: 32px;\n font-weight: 700;\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",".product {\n &__image {\n width: 100%;\n margin-bottom: 24px;\n }\n\n &__title {\n font-weight: 700;\n font-size: 18px;\n margin-bottom: 8px;\n }\n\n &__text {\n margin-bottom: 12px;\n\n @include on-desktop {\n max-width: 280px;\n }\n }\n\n &__price {\n font-weight: 700;\n }\n\n @include hover(transform, scale(1.1));\n}\n",".categories {\n background-color: #fff;\n\n &__title {\n @include on-desktop {\n max-width: 585px;\n }\n }\n\n &__wrapper {\n display: grid;\n row-gap: 40px;\n\n margin-bottom: 40px;\n\n @include on-tablet {\n row-gap: 56px;\n margin-bottom: 56px;\n }\n }\n\n &__button {\n @include on-desktop {\n max-width: 324px;\n }\n }\n}\n\n.category {\n &__photos {\n @include page-grid;\n\n margin-bottom: 16px;\n }\n\n &__link {\n display: block;\n\n position: relative;\n &--wide {\n @include on-tablet {\n grid-column: span 4;\n }\n\n @include on-desktop {\n grid-column: span 8;\n }\n }\n\n &--square {\n height: 0;\n padding-bottom: 100%;\n\n @include on-tablet {\n grid-column: span 2;\n }\n\n @include on-desktop {\n grid-column: span 4;\n }\n }\n }\n\n &__image {\n position: absolute;\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n @include hover(transform, scale(1.1));\n }\n\n &__title {\n font-weight: 700;\n font-size: 18px;\n\n @include on-tablet {\n font-size: 24px;\n }\n }\n}\n",".full-width {\n background: center / cover url(../images/full-width-section-bg.png);\n\n // background-image: url(../images/full-width-section-bg.png);\n // background-size: cover;\n // background-position: center;\n height: 100px;\n\n position: sticky;\n z-index: -1;\n overflow: hidden;\n top: 0;\n bottom: 0;\n\n @include on-tablet {\n height: 400px;\n }\n\n @include on-desktop {\n height: 460px;\n }\n}\n",".about-us {\n background-color: #fff;\n\n @include page-grid;\n\n @include on-desktop {\n --columns: 12;\n }\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 &__content {\n grid-column: 1 / -1;\n\n @include on-tablet {\n grid-column: 4 / 7;\n }\n\n @include on-desktop {\n grid-column: span 6;\n }\n\n display: flex;\n flex-direction: column;\n gap: 30px;\n }\n}\n",".contacts {\n background-color: #fff;\n\n &__wrapper {\n @include page-grid;\n }\n &__form {\n grid-column: 1 / -1;\n\n @include on-desktop {\n grid-column: 1 / 6;\n }\n\n display: flex;\n gap: 16px;\n flex-direction: column;\n\n margin-bottom: 48px;\n\n @include on-tablet {\n margin-bottom: 80px;\n }\n\n &-field {\n box-sizing: border-box;\n width: 100%;\n height: 48px;\n padding: 16px 14px;\n border-radius: 8px;\n border: 2px solid transparent;\n\n background-color: #f8f8fa;\n color: #7e7e83;\n font-size: 14px;\n\n &--textarea {\n height: 148px;\n margin-bottom: 16px;\n }\n\n &:hover {\n border: 2px solid #d5d7de;\n color: $main-text-color;\n }\n\n &:active {\n border: 2px solid $main-text-color;\n color: $main-text-color;\n }\n }\n }\n\n &__content {\n grid-column: 1 / -1;\n\n @include on-desktop {\n grid-column: 7 / -1;\n }\n\n display: flex;\n flex-direction: column;\n gap: 24px;\n }\n}\n",".info {\n display: flex;\n flex-direction: column;\n gap: 8px;\n\n &__label {\n color: $secondary-color;\n }\n\n &__url {\n text-decoration: none;\n color: $main-text-color;\n\n @include hover(color, $secondary-color);\n }\n}\n"],"names":[],"version":3,"file":"index.b54d57b3.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..3aaf3d16fe --- /dev/null +++ b/index.cabb280d.js.map @@ -0,0 +1 @@ +{"mappings":"","sources":["src/scripts/main.js"],"sourcesContent":["'use strict';\r\n"],"names":[],"version":3,"file":"index.cabb280d.js.map"} \ No newline at end of file diff --git a/index.d006b0f1.css b/index.d006b0f1.css new file mode 100644 index 0000000000..59e8ac561b --- /dev/null +++ b/index.d006b0f1.css @@ -0,0 +1,2 @@ +html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{vertical-align:baseline;border:0;margin:0;padding:0;font-family:inherit;font-size:100%}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0} +/*# sourceMappingURL=index.d006b0f1.css.map */ diff --git a/index.d006b0f1.css.map b/index.d006b0f1.css.map new file mode 100644 index 0000000000..1641389185 --- /dev/null +++ b/index.d006b0f1.css.map @@ -0,0 +1 @@ +{"mappings":"ACKA,kfA0FA,4FAcA,mBAIA,sBAKA,yBAKA,4EAQA","sources":["index.d006b0f1.css","src/styles/reset.css"],"sourcesContent":["html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {\n vertical-align: baseline;\n border: 0;\n margin: 0;\n padding: 0;\n font-family: inherit;\n font-size: 100%;\n}\n\narticle, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {\n display: block;\n}\n\nbody {\n line-height: 1;\n}\n\nol, ul {\n list-style: none;\n}\n\nblockquote, q {\n quotes: none;\n}\n\nblockquote:before, blockquote:after, q:before, q:after {\n content: \"\";\n content: none;\n}\n\ntable {\n border-collapse: collapse;\n border-spacing: 0;\n}\n/*# sourceMappingURL=index.d006b0f1.css.map */\n","/* http://meyerweb.com/eric/tools/css/reset/\n v2.0 | 20110126\n License: none (public domain)\n*/\n\nhtml,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo {\n margin: 0;\n padding: 0;\n border: 0;\n font-size: 100%;\n font-family: inherit;\n vertical-align: baseline;\n}\n\n/* HTML5 display-role reset for older browsers */\narticle,\naside,\ndetails,\nfigcaption,\nfigure,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\nsection {\n display: block;\n}\n\nbody {\n line-height: 1;\n}\n\nol,\nul {\n list-style: none;\n}\n\nblockquote,\nq {\n quotes: none;\n}\n\nblockquote::before,\nblockquote::after,\nq::before,\nq::after {\n content: '';\n content: none;\n}\n\ntable {\n border-collapse: collapse;\n border-spacing: 0;\n}\n"],"names":[],"version":3,"file":"index.d006b0f1.css.map"} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000000..eada24c56b --- /dev/null +++ b/index.html @@ -0,0 +1 @@ +Nothing

Bring joy back
to the everyday

Browse Nothing products by category

All products image of phone All products image of headphones

All products

Accessories image of phonecase Accessories image of charger

Accessories

View all

About us

We’re a London-based tech company on a mission to remove barriers between people and technology.

To do this, we’re crafting intuitive, flawlessly connected products that improve our lives without getting in the way. No confusing tech-speak. No silly product names. Just artistry, passion and trust. And products we’re proud to share with our friends and family. Simple.

Because beautiful tech shouldn’t be complicated.

Contact us

Phone +1 234 5555-55-55
Email hello@nothing.com
Address 400 first ave.
suite 700
Minneapolis, MN 55401
\ No newline at end of file diff --git a/logo-2x.a2b8ffe1.png b/logo-2x.a2b8ffe1.png new file mode 100644 index 0000000000..4eac0d94f9 Binary files /dev/null and b/logo-2x.a2b8ffe1.png differ diff --git a/logo.1afb61d4.png b/logo.1afb61d4.png new file mode 100644 index 0000000000..940e68a886 Binary files /dev/null and b/logo.1afb61d4.png differ diff --git a/phone_1.f570c906.png b/phone_1.f570c906.png new file mode 100644 index 0000000000..a5e286b22f Binary files /dev/null and b/phone_1.f570c906.png differ