diff --git a/big-picture.426717f3.png b/big-picture.426717f3.png
new file mode 100644
index 0000000000..c74e424700
Binary files /dev/null and b/big-picture.426717f3.png differ
diff --git a/header-bg.86bb71df.png b/header-bg.86bb71df.png
new file mode 100644
index 0000000000..a5bb439385
Binary files /dev/null and b/header-bg.86bb71df.png differ
diff --git a/icon-burger-menu-hover.d74a0cde.png b/icon-burger-menu-hover.d74a0cde.png
new file mode 100644
index 0000000000..91310b68d1
Binary files /dev/null and b/icon-burger-menu-hover.d74a0cde.png differ
diff --git a/icon-burger-menu.92944106.png b/icon-burger-menu.92944106.png
new file mode 100644
index 0000000000..3a1911641a
Binary files /dev/null and b/icon-burger-menu.92944106.png differ
diff --git a/icon-close.4ae1e25c.png b/icon-close.4ae1e25c.png
new file mode 100644
index 0000000000..17f36fb9dd
Binary files /dev/null and b/icon-close.4ae1e25c.png differ
diff --git a/icon-phone.cd1b9b7a.png b/icon-phone.cd1b9b7a.png
new file mode 100644
index 0000000000..2c282546eb
Binary files /dev/null and b/icon-phone.cd1b9b7a.png differ
diff --git a/image-article1-square.6d668a26.png b/image-article1-square.6d668a26.png
new file mode 100644
index 0000000000..fd49fbbda0
Binary files /dev/null and b/image-article1-square.6d668a26.png differ
diff --git a/image-article1-wide.0d2a2ed9.png b/image-article1-wide.0d2a2ed9.png
new file mode 100644
index 0000000000..0060899e16
Binary files /dev/null and b/image-article1-wide.0d2a2ed9.png differ
diff --git a/image-article2-square.6abdcc22.png b/image-article2-square.6abdcc22.png
new file mode 100644
index 0000000000..02cceb0193
Binary files /dev/null and b/image-article2-square.6abdcc22.png differ
diff --git a/image-article2-wide.b3b9095c.png b/image-article2-wide.b3b9095c.png
new file mode 100644
index 0000000000..e96cfc8cd1
Binary files /dev/null and b/image-article2-wide.b3b9095c.png differ
diff --git a/image-article3-square.83d7aa13.png b/image-article3-square.83d7aa13.png
new file mode 100644
index 0000000000..301b04563e
Binary files /dev/null and b/image-article3-square.83d7aa13.png differ
diff --git a/image-article3-wide.ad2179ac.png b/image-article3-wide.ad2179ac.png
new file mode 100644
index 0000000000..237e66f63e
Binary files /dev/null and b/image-article3-wide.ad2179ac.png differ
diff --git a/index.08f57406.css b/index.08f57406.css
new file mode 100644
index 0000000000..056e33c290
--- /dev/null
+++ b/index.08f57406.css
@@ -0,0 +1,2 @@
+.page{color:#292929;scroll-behavior:smooth;margin:0;font-family:Space Grotesk}.page__body{min-width:320px;margin:0}@media (min-width:1024px){.page__body{z-index:-2;position:relative}}.page__body:has(.page__menu:target){overflow:hidden}.page__menu{transition:all transform .3s;opacity:0;pointer-events:none;position:fixed;top:0;left:0;right:0;transform:translate(-100%)}.page__menu:target{opacity:1;pointer-events:all;transform:translate(0)}.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}}.header{background-image:url(header-bg.86bb71df.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-top:65px;padding-bottom:65px}}@media (min-width:1024px){.header__bottom{padding-top:92px;padding-bottom:92px}}.header__title{margin:0;font-size:36px;font-weight:700;line-height:36px}@media (min-width:576px){.header__title{font-size:48px;line-height:48px}}@media (min-width:1024px){.header__title{font-size:56px;line-height:56px}}.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__logo-link{display:-ms-flexbox;display:flex}.top-bar__logo{height:16px;transition:transform .3s}@media (min-width:576px){.top-bar__logo{height:24px}}.top-bar__logo:hover{transform:scale(1.2)}.top-bar__icons{gap:24px;display:-ms-flexbox;display:flex}@media (min-width:576px){.top-bar__icons{gap:32px}}.icon{background-size:contain;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(icon-phone.cd1b9b7a.png);position:relative}@media (min-width:1024px){.icon--phone:before{content:"+1 234 5555-55-55";color:#292929;text-align:center;letter-spacing:2px;white-space:nowrap;height:16px;font-size:12px;font-weight:700;line-height:16px;display:none;position:absolute;top:25%;left:-147px}.icon--phone:hover:before{display:block}}.icon--menu{background-image:url(icon-burger-menu.92944106.png)}.icon--menu:hover{background-image:url(icon-burger-menu-hover.d74a0cde.png)}.icon--close{background-image:url(icon-close.4ae1e25c.png)}.menu{box-sizing:border-box;text-transform:uppercase;background-color:#e5e6e8;height:100vh;overflow:hidden}.menu__top{margin-bottom:32px}@media (min-width:576px){.menu__top{margin-bottom:56px}}.menu__nav{margin-bottom:48px}.menu__phone-number{color:inherit;letter-spacing:2px;margin-bottom:16px;font-size:16px;line-height:22px;text-decoration:none;display:block}.menu__call-to-order{width:fit-content;color:inherit;letter-spacing:2px;border-bottom:1px solid #292929;padding-bottom:7px;font-size:16px;line-height:22px;text-decoration:none;display:block}.nav__link{color:inherit;letter-spacing:2px;font-size:22px;line-height:22px;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__linkhover:after{transform:scale(1)}.nav__list{-ms-flex-direction:column;flex-direction:column;gap:32px;margin:0;padding:0;list-style:none;display:-ms-flexbox;display:flex}.section-title{text-align:left;margin:0 0 48px;font-family:Space Grotesk;font-size:32px;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__content{background-color:#fff;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}}.view-all__button{color:#fff;text-align:center;background-color:#292929;border:2px solid #292929;border-radius:8px;width:100%;height:56px;font-size:16px;line-height:56px;text-decoration:none;display:block}@media (min-width:1024px){.view-all__button{width:324px}}.view-all__button:hover{color:#292929;background-color:#f8f8fa;border-color:#f0f1f4}.view-all__button:active{color:#fff;background-color:#292929;border-color:#292929}.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:576px){.recommended__product{grid-column:2/-2}}@media (min-width:1024px){.recommended__product{grid-column:span 4}}.product__photo{transition:transform .3s}.product__photo:hover{transform:scale(1.12)}.product__description{font-family:Space Mono;font-size:16px}.product__photo{width:100%}@media (min-width:1024px){.product{position:relative}.product__price{position:absolute;bottom:-28px}}.about-us{--columns:2;grid-template-columns:repeat(var(--columns),1fr);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{grid-column:1/-1;margin:0;font-family:Space Mono;font-size:16px;line-height:22px}@media (min-width:576px){.about-us__content{grid-column:4/7}}@media (min-width:1024px){.about-us__content{grid-column:span 6}}.about-us__description{margin:0}.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}}.category__link{position:relative}.category__link--wide{transition:transform .3s}.category__link--wide:hover{transform:scale(1.12)}@media (min-width:576px){.category__link--wide{grid-column:span 4;transition:transform .3s}.category__link--wide:hover{transform:scale(1.06)}}@media (min-width:1024px){.category__link--wide{grid-column:span 8}}.category__link--square{height:0;padding-bottom:100%;transition:transform .3s}.category__link--square:hover{transform:scale(1.12)}@media (min-width:576px){.category__link--square{grid-column:span 2}}@media (min-width:1024px){.category__link--square{grid-column:span 4}}.category__photo{object-fit:cover;border-radius:6px;width:100%;height:100%;position:absolute}.category__title{margin:0;font-size:24px;line-height:34px}.footer{padding-bottom:64px}@media (min-width:1024px){.footer{z-index:-1;position:sticky;bottom:0}}@media (min-width:576px){.footer{padding-bottom:120px}}.footer__content{--columns:2;grid-template-columns:repeat(var(--columns),1fr);column-gap:20px;display:grid}@media (min-width:576px){.footer__content{--columns:6;column-gap:24px}}@media (min-width:1024px){.footer__content{--columns:12}}.footer__personal-info{grid-column:1/-1}@media (min-width:576px){.footer__personal-info{grid-column:span 6}}@media (min-width:1024px){.footer__personal-info{grid-column:span 5}}.footer__company-info{grid-column:1/-1}@media (min-width:576px){.footer__company-info{grid-column:span 6}}@media (min-width:1024px){.footer__company-info{grid-column:7/12}}.big-photo{object-fit:cover;object-position:center;width:100%;height:200px;margin-bottom:48px}@media (min-width:576px){.big-photo{height:400px;margin-bottom:56px}}@media (min-width:1024px){.big-photo{height:460px}}.company-info__value{text-align:left;color:#292929;margin-bottom:24px;font-family:Space Mono;font-size:16px;line-height:23px;text-decoration:none;display:block;position:relative}.company-info__value:after{content:"";transform-origin:0;background-color:#292929;width:200px;height:1px;transition:transform .3s;display:block;position:absolute;bottom:0;transform:scale(0)}.company-info__value:hover:after{transform:scale(1)}.company-info__value:hover{color:#323277}.company-info__value:active{color:#292929}.company-info__type{text-align:left;color:#9393a3;margin-bottom:8px;font-family:Space Mono;font-size:14px;line-height:20px}.company-info__list{list-style:none}.company-info__list:last-child{margin-bottom:0}.input{box-sizing:border-box;text-align:left;background-color:#f8f8fa;border:1px solid #f8f8fa;border-radius:8px;width:100%;padding:0 0 0 16px;font-family:Space Mono;font-size:14px;line-height:20px}.input__personal-info{height:48px;margin-bottom:16px}.input__message{resize:none;height:148px;margin-bottom:32px}.input:hover{border-color:#d5d7de}.input:active{border-color:#292929}.input__personal-info:-webkit-autofill{-webkit-text-fill-color:#292929;border:1px solid #d5d7de;transition:background-color 5000s ease-in-out;-webkit-box-shadow:inset 0 0 0 1000px #f8f8fa}.input__personal-info:-webkit-autofill:hover{-webkit-text-fill-color:#292929;border:1px solid #d5d7de;transition:background-color 5000s ease-in-out;-webkit-box-shadow:inset 0 0 0 1000px #f8f8fa}.input__personal-info:-webkit-autofill:focus{-webkit-text-fill-color:#292929;border:1px solid #d5d7de;transition:background-color 5000s ease-in-out;-webkit-box-shadow:inset 0 0 0 1000px #f8f8fa}.input__send{color:#fff;text-align:center;cursor:pointer;background-color:#292929;border:2px solid #292929;height:56px;margin-bottom:48px;font-family:Space Grotesk;font-size:16px;line-height:56px}.input__send:hover{color:#292929;background-color:#f8f8fa;border-color:#f0f1f4}.input__send:active{color:#fff;background-color:#292929;border-color:#292929}@media (min-width:576px){.input__send{margin-bottom:80px}}@media (min-width:1024px){.input__send{margin-bottom:0}}
+/*# sourceMappingURL=index.08f57406.css.map */
diff --git a/index.08f57406.css.map b/index.08f57406.css.map
new file mode 100644
index 0000000000..f28ee3f1c8
--- /dev/null
+++ b/index.08f57406.css.map
@@ -0,0 +1 @@
+{"mappings":"ACAA,8EAME,qCCCA,0BDDA,0CASE,oDAKF,sIAUE,uEAQJ,gDCrCE,yBDqCF,iDC/BE,0BD+BF,uGEtCA,oHAKE,mKAOA,oCDXA,yBCWA,sDDLA,0BCKA,sDAYA,wEDvBA,yBCuBA,gDDjBA,0BCiBA,gDCxBF,4KFCE,yBEDF,+CAUE,qDAIA,oDFbA,yBEaA,4BFcA,0CEJA,0DFvBA,yBEuBA,0BCxBF,4FH4BE,iCA3BA,yBGDF,8BAaE,8FHNA,0BGWI,qOAgBA,yCAMJ,iFAGE,6FAKF,4EChDF,2GAOE,8BJNA,yBIMA,+BAQA,8BAIA,2IAUA,8LC5BA,mHAQE,sLAaA,yCAKF,wIC3BF,yGNCE,yBMDF,kDNOE,0BMPF,+BCCE,oGPAA,yBOAA,qEAaF,6MPPE,0BOOF,+BAiBE,oFAMA,kFCpCA,+GRAA,yBQAA,oDRMA,0BQNA,qCAMA,uCRNA,yBQMA,wCRAA,0BQAA,0CAaF,yCRQE,4CS5BF,4DAKA,2BTEE,0BSGA,2BAGE,gDCbJ,oGVCE,yBUDF,uCVOE,0BUPF,wBAGE,kCVFA,yBUEA,kCVIA,0BUJA,qCAYA,oGVdA,yBUcA,oCVRA,0BUQA,uCAgBA,gCC9BA,+CXAA,yBWAA,mCAWA,+HXXA,yBWWA,+CXLA,0BWKA,gCAMA,kCAEE,+CXQF,kDA3BA,yBWmBE,kEXQF,mDArBA,0BWaE,0CAcA,8EXNF,oDA3BA,yBWiCE,4CX3BF,0BW2BE,4CAgBF,6FAQA,0DC1DF,4BZOE,0BYPF,6CZCE,yBYDF,8BAaE,2GZZA,yBYYA,8CZNA,0BYMA,+BAIA,wCZhBA,yBYgBA,2CZVA,0BYUA,2CAYA,uCZ5BA,yBY4BA,0CZtBA,0BYsBA,wCC7BF,8FbCE,yBaDF,4CbOE,0BaPF,yBCCE,kLAWE,8LAaA,oDAIA,yCAIA,0CAKF,2HASA,oCAGE,+CClDJ,sMAaE,qDAKA,4DAMA,kCAIA,mCAIA,4LAAA,kMAAA,kMASA,oMAYE,+EAMA,6Ef1DF,yBewCA,iCflCA,0BekCA","sources":["index.08f57406.css","src/styles/blocks/page.scss","src/styles/utils/mixins.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/main-content.scss","src/styles/blocks/recommended.scss","src/styles/blocks/product.scss","src/styles/blocks/about-us.scss","src/styles/blocks/categories.scss","src/styles/blocks/footer.scss","src/styles/blocks/big-photo.scss","src/styles/blocks/company-info.scss","src/styles/blocks/personal-info.scss"],"sourcesContent":[".page {\n  color: #292929;\n  scroll-behavior: smooth;\n  margin: 0;\n  font-family: Space Grotesk;\n}\n\n.page__body {\n  min-width: 320px;\n  margin: 0;\n}\n\n@media (width >= 1024px) {\n  .page__body {\n    z-index: -2;\n    position: relative;\n  }\n}\n\n.page__body:has(.page__menu:target) {\n  overflow: hidden;\n}\n\n.page__menu {\n  transition: all transform .3s;\n  opacity: 0;\n  pointer-events: none;\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.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.header {\n  background-image: url(\"header-bg.86bb71df.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-top: 65px;\n    padding-bottom: 65px;\n  }\n}\n\n@media (width >= 1024px) {\n  .header__bottom {\n    padding-top: 92px;\n    padding-bottom: 92px;\n  }\n}\n\n.header__title {\n  margin: 0;\n  font-size: 36px;\n  font-weight: 700;\n  line-height: 36px;\n}\n\n@media (width >= 576px) {\n  .header__title {\n    font-size: 48px;\n    line-height: 48px;\n  }\n}\n\n@media (width >= 1024px) {\n  .header__title {\n    font-size: 56px;\n    line-height: 56px;\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__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@media (width >= 576px) {\n  .top-bar__logo {\n    height: 24px;\n  }\n}\n\n.top-bar__logo:hover {\n  transform: scale(1.2);\n}\n\n.top-bar__icons {\n  gap: 24px;\n  display: -ms-flexbox;\n  display: flex;\n}\n\n@media (width >= 576px) {\n  .top-bar__icons {\n    gap: 32px;\n  }\n}\n\n.icon {\n  background-size: contain;\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(\"icon-phone.cd1b9b7a.png\");\n  position: relative;\n}\n\n@media (width >= 1024px) {\n  .icon--phone:before {\n    content: \"+1 234 5555-55-55\";\n    color: #292929;\n    text-align: center;\n    letter-spacing: 2px;\n    white-space: nowrap;\n    height: 16px;\n    font-size: 12px;\n    font-weight: 700;\n    line-height: 16px;\n    display: none;\n    position: absolute;\n    top: 25%;\n    left: -147px;\n  }\n\n  .icon--phone:hover:before {\n    display: block;\n  }\n}\n\n.icon--menu {\n  background-image: url(\"icon-burger-menu.92944106.png\");\n}\n\n.icon--menu:hover {\n  background-image: url(\"icon-burger-menu-hover.d74a0cde.png\");\n}\n\n.icon--close {\n  background-image: url(\"icon-close.4ae1e25c.png\");\n}\n\n.menu {\n  box-sizing: border-box;\n  text-transform: uppercase;\n  background-color: #e5e6e8;\n  height: 100vh;\n  overflow: hidden;\n}\n\n.menu__top {\n  margin-bottom: 32px;\n}\n\n@media (width >= 576px) {\n  .menu__top {\n    margin-bottom: 56px;\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  line-height: 22px;\n  text-decoration: none;\n  display: block;\n}\n\n.menu__call-to-order {\n  width: fit-content;\n  color: inherit;\n  letter-spacing: 2px;\n  border-bottom: 1px solid #292929;\n  padding-bottom: 7px;\n  font-size: 16px;\n  line-height: 22px;\n  text-decoration: none;\n  display: block;\n}\n\n.nav__link {\n  color: inherit;\n  letter-spacing: 2px;\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: #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__linkhover:after {\n  transform: scale(1);\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.section-title {\n  text-align: left;\n  margin: 0 0 48px;\n  font-family: Space Grotesk;\n  font-size: 32px;\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__content {\n  background-color: #fff;\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.view-all__button {\n  color: #fff;\n  text-align: center;\n  background-color: #292929;\n  border: 2px solid #292929;\n  border-radius: 8px;\n  width: 100%;\n  height: 56px;\n  font-size: 16px;\n  line-height: 56px;\n  text-decoration: none;\n  display: block;\n}\n\n@media (width >= 1024px) {\n  .view-all__button {\n    width: 324px;\n  }\n}\n\n.view-all__button:hover {\n  color: #292929;\n  background-color: #f8f8fa;\n  border-color: #f0f1f4;\n}\n\n.view-all__button:active {\n  color: #fff;\n  background-color: #292929;\n  border-color: #292929;\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 >= 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.product__photo {\n  transition: transform .3s;\n}\n\n.product__photo:hover {\n  transform: scale(1.12);\n}\n\n.product__description {\n  font-family: Space Mono;\n  font-size: 16px;\n}\n\n.product__photo {\n  width: 100%;\n}\n\n@media (width >= 1024px) {\n  .product {\n    position: relative;\n  }\n\n  .product__price {\n    position: absolute;\n    bottom: -28px;\n  }\n}\n\n.about-us {\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-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  grid-column: 1 / -1;\n  margin: 0;\n  font-family: Space Mono;\n  font-size: 16px;\n  line-height: 22px;\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.about-us__description {\n  margin: 0;\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.category__link {\n  position: relative;\n}\n\n.category__link--wide {\n  transition: transform .3s;\n}\n\n.category__link--wide:hover {\n  transform: scale(1.12);\n}\n\n@media (width >= 576px) {\n  .category__link--wide {\n    grid-column: span 4;\n    transition: transform .3s;\n  }\n\n  .category__link--wide:hover {\n    transform: scale(1.06);\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  transition: transform .3s;\n}\n\n.category__link--square:hover {\n  transform: scale(1.12);\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__photo {\n  object-fit: cover;\n  border-radius: 6px;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n}\n\n.category__title {\n  margin: 0;\n  font-size: 24px;\n  line-height: 34px;\n}\n\n.footer {\n  padding-bottom: 64px;\n}\n\n@media (width >= 1024px) {\n  .footer {\n    z-index: -1;\n    position: sticky;\n    bottom: 0;\n  }\n}\n\n@media (width >= 576px) {\n  .footer {\n    padding-bottom: 120px;\n  }\n}\n\n.footer__content {\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  .footer__content {\n    --columns: 6;\n    column-gap: 24px;\n  }\n}\n\n@media (width >= 1024px) {\n  .footer__content {\n    --columns: 12;\n  }\n}\n\n.footer__personal-info {\n  grid-column: 1 / -1;\n}\n\n@media (width >= 576px) {\n  .footer__personal-info {\n    grid-column: span 6;\n  }\n}\n\n@media (width >= 1024px) {\n  .footer__personal-info {\n    grid-column: span 5;\n  }\n}\n\n.footer__company-info {\n  grid-column: 1 / -1;\n}\n\n@media (width >= 576px) {\n  .footer__company-info {\n    grid-column: span 6;\n  }\n}\n\n@media (width >= 1024px) {\n  .footer__company-info {\n    grid-column: 7 / 12;\n  }\n}\n\n.big-photo {\n  object-fit: cover;\n  object-position: center;\n  width: 100%;\n  height: 200px;\n  margin-bottom: 48px;\n}\n\n@media (width >= 576px) {\n  .big-photo {\n    height: 400px;\n    margin-bottom: 56px;\n  }\n}\n\n@media (width >= 1024px) {\n  .big-photo {\n    height: 460px;\n  }\n}\n\n.company-info__value {\n  text-align: left;\n  color: #292929;\n  margin-bottom: 24px;\n  font-family: Space Mono;\n  font-size: 16px;\n  line-height: 23px;\n  text-decoration: none;\n  display: block;\n  position: relative;\n}\n\n.company-info__value:after {\n  content: \"\";\n  transform-origin: 0;\n  background-color: #292929;\n  width: 200px;\n  height: 1px;\n  transition: transform .3s;\n  display: block;\n  position: absolute;\n  bottom: 0;\n  transform: scale(0);\n}\n\n.company-info__value:hover:after {\n  transform: scale(1);\n}\n\n.company-info__value:hover {\n  color: #323277;\n}\n\n.company-info__value:active {\n  color: #292929;\n}\n\n.company-info__type {\n  text-align: left;\n  color: #9393a3;\n  margin-bottom: 8px;\n  font-family: Space Mono;\n  font-size: 14px;\n  line-height: 20px;\n}\n\n.company-info__list {\n  list-style: none;\n}\n\n.company-info__list:last-child {\n  margin-bottom: 0;\n}\n\n.input {\n  box-sizing: border-box;\n  text-align: left;\n  background-color: #f8f8fa;\n  border: 1px solid #f8f8fa;\n  border-radius: 8px;\n  width: 100%;\n  padding: 0 0 0 16px;\n  font-family: Space Mono;\n  font-size: 14px;\n  line-height: 20px;\n}\n\n.input__personal-info {\n  height: 48px;\n  margin-bottom: 16px;\n}\n\n.input__message {\n  resize: none;\n  height: 148px;\n  margin-bottom: 32px;\n}\n\n.input:hover {\n  border-color: #d5d7de;\n}\n\n.input:active {\n  border-color: #292929;\n}\n\n.input__personal-info:-webkit-autofill {\n  -webkit-text-fill-color: #292929;\n  border: 1px solid #d5d7de;\n  transition: background-color 5000s ease-in-out;\n  -webkit-box-shadow: inset 0 0 0 1000px #f8f8fa;\n}\n\n.input__personal-info:-webkit-autofill:hover {\n  -webkit-text-fill-color: #292929;\n  border: 1px solid #d5d7de;\n  transition: background-color 5000s ease-in-out;\n  -webkit-box-shadow: inset 0 0 0 1000px #f8f8fa;\n}\n\n.input__personal-info:-webkit-autofill:focus {\n  -webkit-text-fill-color: #292929;\n  border: 1px solid #d5d7de;\n  transition: background-color 5000s ease-in-out;\n  -webkit-box-shadow: inset 0 0 0 1000px #f8f8fa;\n}\n\n.input__send {\n  color: #fff;\n  text-align: center;\n  cursor: pointer;\n  background-color: #292929;\n  border: 2px solid #292929;\n  height: 56px;\n  margin-bottom: 48px;\n  font-family: Space Grotesk;\n  font-size: 16px;\n  line-height: 56px;\n}\n\n.input__send:hover {\n  color: #292929;\n  background-color: #f8f8fa;\n  border-color: #f0f1f4;\n}\n\n.input__send:active {\n  color: #fff;\n  background-color: #292929;\n  border-color: #292929;\n}\n\n@media (width >= 576px) {\n  .input__send {\n    margin-bottom: 80px;\n  }\n}\n\n@media (width >= 1024px) {\n  .input__send {\n    margin-bottom: 0;\n  }\n}\n/*# sourceMappingURL=index.08f57406.css.map */\n",".page {\n  margin: 0;\n  font-family: $main-font-family;\n  color: $main-text-color;\n  scroll-behavior: smooth;\n\n  &__body {\n    margin: 0;\n    min-width: 320px;\n\n    @include on-desktop {\n      position: relative;\n      z-index: -2;\n    }\n\n    &:has(.page__menu:target) {\n      overflow: hidden;\n    }\n  }\n\n  &__menu {\n    position: fixed;\n    top: 0;\n    right: 0;\n    left: 0;\n    transition: all $time-transform;\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\n.container {\n  @include content-padding-inline;\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 content-padding-inline() {\n  padding-inline: 20px;\n\n  @include on-tablet {\n    padding-inline: 72px;\n  }\n\n  @include on-desktop {\n    padding-inline: 120px;\n    max-width: 1020px;\n    margin-inline: auto;\n  }\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",".header {\n  background-image: url(../images/header-bg.png);\n  background-size: cover;\n  background-position: center;\n\n  &__content {\n    height: 100vh;\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-block: 65px;\n    }\n\n    @include on-desktop {\n      padding-block: 92px;\n    }\n  }\n\n  &__title {\n    line-height: 36px;\n    font-size: 36px;\n    margin: 0;\n    font-weight: 700;\n\n    @include on-tablet {\n      line-height: 48px;\n      font-size: 48px;\n    }\n\n    @include on-desktop {\n      line-height: 56px;\n      font-size: 56px;\n    }\n  }\n}\n",".top-bar {\n  padding-block: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  @include on-tablet {\n    padding-block: 32px;\n  }\n\n  &__logo-link {\n    display: flex;\n  }\n\n  &__logo {\n    height: 16px;\n\n    @include on-tablet {\n      height: 24px;\n    }\n\n    @include hover(transform, scale(1.2));\n  }\n\n  &__icons {\n    gap: 24px;\n    display: flex;\n\n    @include on-tablet {\n      gap: 32px;\n    }\n  }\n}\n",".icon {\n  display: block;\n  height: 24px;\n  width: 24px;\n  background-size: contain;\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.png);\n    position: relative;\n\n    @include on-desktop {\n      &::before {\n        content: '+1 234 5555-55-55';\n        display: none;\n        position: absolute;\n        left: -147px;\n        top: 25%;\n        color: $main-text-color;\n        font-weight: 700;\n        height: 16px;\n        line-height: 16px;\n        font-size: 12px;\n        text-align: center;\n        letter-spacing: 2px;\n        white-space: nowrap;\n      }\n\n      &:hover::before {\n        display: block;\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  overflow: hidden;\n  box-sizing: border-box;\n  height: 100vh;\n  background-color: rgba(229, 230, 232, 1);\n  text-transform: uppercase;\n\n  &__top {\n    margin-bottom: 32px;\n\n    @include on-tablet {\n      margin-bottom: 56px;\n    }\n  }\n\n  &__nav {\n    margin-bottom: 48px;\n  }\n\n  &__phone-number {\n    color: inherit;\n    text-decoration: none;\n    font-size: $main-font-size;\n    line-height: 22px;\n    letter-spacing: 2px;\n    display: block;\n    margin-bottom: 16px;\n  }\n\n  &__call-to-order {\n    display: block;\n    width: fit-content;\n    padding-bottom: 7px;\n    border-bottom: 1px solid $main-text-color;\n    color: inherit;\n    text-decoration: none;\n    font-size: $main-font-size;\n    line-height: 22px;\n    letter-spacing: 2px;\n  }\n}\n",".nav {\n  &__link {\n    color: inherit;\n    position: relative;\n    text-decoration: none;\n    font-size: 22px;\n    line-height: 22px;\n    letter-spacing: 2px;\n\n    &::after {\n      content: '';\n      display: block;\n      position: absolute;\n      bottom: -8px;\n      height: 1px;\n      background-color: $main-text-color;\n      width: 100%;\n      transition: $time-transform;\n      transform: scale(0);\n      transform-origin: left;\n    }\n\n    &hover::after {\n      transform: scale(1);\n    }\n  }\n\n  &__list {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    display: flex;\n    flex-direction: column;\n    gap: 32px;\n  }\n}\n",".section-title {\n  margin: 0;\n  margin-bottom: 48px;\n  font-family: $main-font-family;\n  font-size: 32px;\n  line-height: 100%;\n  text-align: left;\n\n  @include on-tablet {\n    font-size: 40px;\n    margin-bottom: 56px;\n  }\n\n  @include on-desktop {\n    font-size: 48px;\n  }\n}\n",".main {\n  &__content {\n    display: grid;\n    row-gap: 96px;\n    padding-block: 96px;\n    background-color: $main-backgraund-color;\n\n    @include on-tablet {\n      row-gap: 120px;\n      padding-block: 120px;\n    }\n  }\n}\n\n.view-all__button {\n  display: block;\n  text-decoration: none;\n  width: 100%;\n  height: 56px;\n  background-color: $button-negative-color;\n  color: $main-backgraund-color;\n  border: 2px solid $button-negative-color;\n  border-radius: 8px;\n  font-size: $main-font-size;\n  line-height: 56px;\n  text-align: center;\n\n  @include on-desktop {\n    width: 324px;\n  }\n\n  &:hover {\n    color: $button-negative-color;\n    background-color: $input-main-color;\n    border-color: rgba(240, 241, 244, 1);\n  }\n\n  &:active {\n    background-color: $button-negative-color;\n    color: $main-backgraund-color;\n    border-color: $button-negative-color;\n  }\n}\n",".recommended {\n  &__products {\n    @include page-grid;\n\n    row-gap: 40px;\n  }\n\n  &__product {\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\n.product__photo {\n  @include hover(transform, scale(1.12));\n}\n",".product__description {\n  font-family: $minor-font-family;\n  font-size: $main-font-size;\n}\n\n.product__photo {\n  width: 100%;\n}\n\n@include on-desktop {\n  .product {\n    position: relative;\n\n    &__price {\n      position: absolute;\n      bottom: -28px;\n    }\n  }\n}\n",".about-us {\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  &__content {\n    margin: 0;\n    font-family: $minor-font-family;\n    font-size: $main-font-size;\n    line-height: 22px;\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\n  &__description {\n    margin: 0;\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    position: relative;\n    &--wide {\n      @include hover(transform, scale(1.12));\n\n      @include on-tablet {\n        @include hover(transform, scale(1.06));\n\n        grid-column: span 4;\n      }\n\n      @include on-desktop {\n        grid-column: span 8;\n      }\n    }\n\n    &--square {\n      @include hover(transform, scale(1.12));\n\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  &__photo {\n    border-radius: 6px;\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  &__title {\n    margin: 0;\n    font-size: 24px;\n    line-height: 34px;\n  }\n}\n",".footer {\n  padding-bottom: 64px;\n\n  @include on-desktop {\n    position: sticky;\n    bottom: 0;\n    z-index: -1;\n  }\n\n  @include on-tablet {\n    padding-bottom: 120px;\n  }\n\n  &__content {\n    @include page-grid;\n  }\n\n  &__personal-info {\n    grid-column: 1 / -1;\n\n    @include on-tablet {\n      grid-column: span 6;\n    }\n\n    @include on-desktop {\n      grid-column: span 5;\n    }\n  }\n\n  &__company-info {\n    grid-column: 1 / -1;\n\n    @include on-tablet {\n      grid-column: span 6;\n    }\n\n    @include on-desktop {\n      grid-column: 7 / 12;\n    }\n  }\n}\n",".big-photo {\n  width: 100%;\n  height: 200px;\n  object-fit: cover;\n  object-position: center;\n  margin-bottom: 48px;\n\n  @include on-tablet {\n    height: 400px;\n    margin-bottom: 56px;\n  }\n\n  @include on-desktop {\n    height: 460px;\n  }\n}\n",".company-info {\n  &__value {\n    text-align: left;\n    display: block;\n    text-decoration: none;\n    font-family: $minor-font-family;\n    color: $main-text-color;\n    font-size: $main-font-size;\n    line-height: 23px;\n    margin-bottom: 24px;\n    position: relative;\n\n    &::after {\n      content: '';\n      display: block;\n      position: absolute;\n      bottom: 0;\n      height: 1px;\n      background-color: $main-text-color;\n      width: 200px;\n      transition: $time-transform;\n      transform: scale(0);\n      transform-origin: left;\n    }\n\n    &:hover::after {\n      transform: scale(1);\n    }\n\n    &:hover {\n      color: rgb(50, 50, 119, 1);\n    }\n\n    &:active {\n      color: $main-text-color;\n    }\n  }\n\n  &__type {\n    text-align: left;\n    color: rgba(147, 147, 163, 1);\n    font-family: $minor-font-family;\n    font-size: 14px;\n    line-height: 20px;\n    margin-bottom: 8px;\n  }\n\n  &__list {\n    list-style: none;\n\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n}\n",".input {\n  box-sizing: border-box;\n  padding: 0;\n  font-family: $minor-font-family;\n  font-size: 14px;\n  line-height: 20px;\n  width: 100%;\n  border-radius: 8px;\n  background-color: $input-main-color;\n  border: 1px solid $input-main-color;\n  text-align: left;\n  padding-left: 16px;\n\n  &__personal-info {\n    height: 48px;\n    margin-bottom: 16px;\n  }\n\n  &__message {\n    height: 148px;\n    margin-bottom: 32px;\n    resize: none;\n  }\n\n  &:hover {\n    border-color: $border-color;\n  }\n\n  &:active {\n    border-color: $button-negative-color;\n  }\n\n  &__personal-info:-webkit-autofill,\n  &__personal-info:-webkit-autofill:hover,\n  &__personal-info:-webkit-autofill:focus {\n    border: 1px solid $border-color;\n    -webkit-text-fill-color: rgba(41, 41, 41, 1);\n    -webkit-box-shadow: 0 0 0 1000px rgba(248, 248, 250, 1) inset;\n    transition: background-color 5000s ease-in-out 0s;\n  }\n\n  &__send {\n    background-color: $button-negative-color;\n    color: $main-backgraund-color;\n    border: 2px solid $button-negative-color;\n    height: 56px;\n    line-height: 56px;\n    margin-bottom: 48px;\n    text-align: center;\n    font-family: $main-font-family;\n    font-size: $main-font-size;\n    cursor: pointer;\n\n    &:hover {\n      color: $button-negative-color;\n      background-color: $input-main-color;\n      border-color: rgba(240, 241, 244, 1);\n    }\n\n    &:active {\n      background-color: $button-negative-color;\n      color: $main-backgraund-color;\n      border-color: $button-negative-color;\n    }\n\n    @include on-tablet {\n      margin-bottom: 80px;\n    }\n\n    @include on-desktop {\n      margin-bottom: 0;\n    }\n  }\n}\n"],"names":[],"version":3,"file":"index.08f57406.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.html b/index.html
new file mode 100644
index 0000000000..b64fe5e08d
--- /dev/null
+++ b/index.html
@@ -0,0 +1 @@
+<!doctype html><html lang="en" class="page"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Nothing</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&family=Space+Mono&display=swap" rel="stylesheet"><link rel="icon" href="logo-nothing.89e3e5e8.png"><link rel="stylesheet" href="index.08f57406.css"><script src="index.cabb280d.js" defer></script></head><body class="page__body"> <header class="header"> <div class="container"> <div class="header__content"> <div class="top-bar"> <a href="#" class="top-bar__logo-link"> <img src="logo.a1444157.png" alt="Nothing logo" class="top-bar__logo"> </a> <div class="top-bar__icons"> <a href="tel:+1 234 5555-55-55" class="icon icon--phone"></a> <a href="#menu" class="icon icon--menu"></a> </div> </div> <div class="header__bottom"> <h1 class="header__title"> Bring joy back <br> to the everyday </h1> </div> </div> </div> </header> <aside class="menu page__menu" id="menu"> <div class="container"> <div class="menu__top top-bar"> <a href="#" class="top-bar__logo-link"> <img src="logo.a1444157.png" alt="Nothing logo" class="top-bar__logo"> </a> <a href="#" class="icon icon--close"></a> </div> <div class="menu__bottom"> <nav class="menu__nav nav"> <ul class="nav__list"> <li class="nav__item"> <a class="nav__link" href="#"> Home </a> </li> <li class="nav__item"> <a class="nav__link" href="#recommended"> Recommended </a> </li> <li class="nav__item"> <a class="nav__link" href="#categories"> Categories </a> </li> <li class="nav__item"> <a class="nav__link" href="#about-us"> About us </a> </li> <li class="nav__item"> <a class="nav__link" href="#contact-us"> Contact us </a> </li> </ul> </nav> <a href="tel:+1 234 5555-55-55" class="menu__phone-number"> +1 234 5555-55-55 </a> <a href="tel:+1 234 5555-55-55" class="menu__call-to-order"> call to order </a> </div> </div> </aside> <main class="main"> <div class="container"> <div class="main__content"> <section class="recommended" id="recommended"> <h2 class="section-title">Recommended</h2> <div class="recommended__products"> <article class="product recommended__product"> <a href="#"> <img src="recommended-1.4cbb77e4.png" alt="phone" class="product__photo"> </a> <h3 class="product__title">Phone (1)</h3> <p class="product__description"> Designed with instinct, to bring joy back to the everyday. Through the Glyph Interface, a perfected OS and exceptional dual camera. All startlingly fast. </p> <p class="product__price">$ 499.00</p> </article> <article class="product recommended__product"> <a href="#"> <img src="recommended-2.ed625ca3.png" alt="phone" class="product__photo"> </a> <h3 class="product__title">Ear (2)</h3> <p class="product__description"> Perfecting the path from artist to ear. So that music sounds just as it was intended. </p> <p class="product__price">$ 149.00</p> </article> <article class="product recommended__product"> <a href="#"> <img src="recommended-3.7167a14a.png" alt="phone" class="product__photo"> </a> <h3 class="product__title">Ear (stick)</h3> <p class="product__description"> Tech you can’t feel. Leaving just space for sound to come to life. Powered by custom sound technology. </p> <p class="product__price">$ 119.00</p> </article> </div> </section> <section class="categories" id="categories"> <h2 class="section-title">Browse Nothing products by category</h2> <div class="categories__wrapper"> <article class="category"> <div class="category__photos"> <a href="#" class="category__link category__link--wide"> <img class="category__photo" src="image-article1-wide.0d2a2ed9.png" alt="All products"> </a> <a href="#" class="category__link category__link--square"> <img class="category__photo" src="image-article1-square.6d668a26.png" alt="All products"> </a> </div> <h3 class="category__title">All products</h3> </article> <article class="category"> <div class="category__photos"> <a href="#" class="category__link category__link--square"> <img class="category__photo" src="image-article2-square.6abdcc22.png" alt="Audio"> </a> <a href="#" class="category__link category__link--wide"> <img class="category__photo" src="image-article2-wide.b3b9095c.png" alt="Audio"> </a> </div> <h3 class="category__title">Audio</h3> </article> <article class="category"> <div class="category__photos"> <a href="#" class="category__link category__link--wide"> <img class="category__photo" src="image-article3-wide.ad2179ac.png" alt="Accessories"> </a> <a href="#" class="category__link category__link--square"> <img class="category__photo" src="image-article3-square.83d7aa13.png" alt="Accessories"> </a> </div> <h3 class="category__title">Accessories</h3> </article> </div> </section> <section class="about-us" id="about-us"> <h2 class="about-us__title section-title">About us</h2> <div class="about-us__content"> <p class="about-us__description"> We’re a London-based tech company on a mission to remove barriers between people and technology. <br> <br> 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. <br> <br> Because beautiful tech shouldn’t be complicated. </p> </div> </section> <div class="view-all"> <a href="#" class="view-all__button"> View all </a> </div> </div> </div> </main> <div class="before-footer__photo"> <img class="big-photo" src="big-picture.426717f3.png" alt="before-footer"> </div> <footer class="footer"> <div class="container"> <h2 class="section-title">Contact us</h2> <div class="footer__content" id="contact-us"> <section class="footer__personal-info personal-info"> <form onsubmit="this.reset(); return false;" class="input-fields" action="index.html" method="post"> <input class="input input__personal-info" type="text" name="name" placeholder="Name" required> <input class="input input__personal-info" type="email" name="email" placeholder="Email" required> <textarea class="input input__message" name="message" placeholder="Message" id="message"></textarea> <button class="input input__send" type="submit" name="send"> Send </button> </form> </section> <section class="company-info footer__company-info"> <ul class="company-info__list"> <li class="company-info__type">Phone</li> <a class="company-info__value" href="tel:+1 234 5555-55-55"> +1 234 5555-55-55 </a> <li class="company-info__type">Email</li> <a class="company-info__value" href="#"> hello@nothing.com </a> <li class="company-info__type">Address</li> <a class="company-info__value" target="_blank" href="https://maps.app.goo.gl/4MxZwkbuDkY3sjLu6"> 400 first ave. <br> suite 700 <br> Minneapolis, MN 55401 </a> </ul> </section> </div> </div> </footer> </body></html>
\ No newline at end of file
diff --git a/logo-nothing.89e3e5e8.png b/logo-nothing.89e3e5e8.png
new file mode 100644
index 0000000000..2932a53e28
Binary files /dev/null and b/logo-nothing.89e3e5e8.png differ
diff --git a/logo.a1444157.png b/logo.a1444157.png
new file mode 100644
index 0000000000..9e8a857f02
Binary files /dev/null and b/logo.a1444157.png differ
diff --git a/recommended-1.4cbb77e4.png b/recommended-1.4cbb77e4.png
new file mode 100644
index 0000000000..ad21fe7cae
Binary files /dev/null and b/recommended-1.4cbb77e4.png differ
diff --git a/recommended-2.ed625ca3.png b/recommended-2.ed625ca3.png
new file mode 100644
index 0000000000..433e1e9769
Binary files /dev/null and b/recommended-2.ed625ca3.png differ
diff --git a/recommended-3.7167a14a.png b/recommended-3.7167a14a.png
new file mode 100644
index 0000000000..22a2bfd8a5
Binary files /dev/null and b/recommended-3.7167a14a.png differ