diff --git a/Icon-Burger-menu-hover.9c7f5ffb.png b/Icon-Burger-menu-hover.9c7f5ffb.png new file mode 100644 index 0000000..2cdc838 Binary files /dev/null and b/Icon-Burger-menu-hover.9c7f5ffb.png differ diff --git a/Icon-Burger-menu.7d7b9831.png b/Icon-Burger-menu.7d7b9831.png new file mode 100644 index 0000000..ffedff6 Binary files /dev/null and b/Icon-Burger-menu.7d7b9831.png differ diff --git a/Icon-Close.3a2b6717.png b/Icon-Close.3a2b6717.png new file mode 100644 index 0000000..6c9c7b2 Binary files /dev/null and b/Icon-Close.3a2b6717.png differ diff --git a/Icon-Phone-call.82284fdf.png b/Icon-Phone-call.82284fdf.png new file mode 100644 index 0000000..57d7fdd Binary files /dev/null and b/Icon-Phone-call.82284fdf.png differ diff --git a/compare1.85e2f78b.svg b/compare1.85e2f78b.svg new file mode 100644 index 0000000..36176b0 --- /dev/null +++ b/compare1.85e2f78b.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/compare2.7165c7b6.svg b/compare2.7165c7b6.svg new file mode 100644 index 0000000..8ade039 --- /dev/null +++ b/compare2.7165c7b6.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/compare3.20ccabdb.svg b/compare3.20ccabdb.svg new file mode 100644 index 0000000..a76f0a5 --- /dev/null +++ b/compare3.20ccabdb.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/details1.a1b65708.svg b/details1.a1b65708.svg new file mode 100644 index 0000000..4f9cdf2 --- /dev/null +++ b/details1.a1b65708.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/details2.4a46b521.svg b/details2.4a46b521.svg new file mode 100644 index 0000000..057ffba --- /dev/null +++ b/details2.4a46b521.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/details3.eb415bf0.svg b/details3.eb415bf0.svg new file mode 100644 index 0000000..8de78ab --- /dev/null +++ b/details3.eb415bf0.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/details4.393f901b.svg b/details4.393f901b.svg new file mode 100644 index 0000000..165e6c8 --- /dev/null +++ b/details4.393f901b.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/details5.8b5bd987.svg b/details5.8b5bd987.svg new file mode 100644 index 0000000..67969f8 --- /dev/null +++ b/details5.8b5bd987.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/details6.666a728a.svg b/details6.666a728a.svg new file mode 100644 index 0000000..aa4907a --- /dev/null +++ b/details6.666a728a.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/favicon.977c2269.png b/favicon.977c2269.png new file mode 100644 index 0000000..d3ee04f Binary files /dev/null and b/favicon.977c2269.png differ diff --git a/footer.36d7f803.svg b/footer.36d7f803.svg new file mode 100644 index 0000000..66953d7 --- /dev/null +++ b/footer.36d7f803.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/header.bced6dda.png b/header.bced6dda.png new file mode 100644 index 0000000..70793ec Binary files /dev/null and b/header.bced6dda.png differ diff --git a/index.17cd25b6.css b/index.17cd25b6.css new file mode 100644 index 0000000..5edb096 --- /dev/null +++ b/index.17cd25b6.css @@ -0,0 +1,2 @@ +.icon{background-size:cover;width:24px;height:24px;transition:transform .3s;display:block}.icon:hover{transform:scale(1.1)}@media (min-width:576px) and (max-width:1024px){.icon{width:32px;height:32px}}@media (min-width:1024px){.icon{width:32px;height:32px}}.icon--phone{background-image:url(Icon-Phone-call.82284fdf.png)}@media (min-width:1024px){.icon--phone:hover:before{content:"+1 234 555-55-55";color:#fff;letter-spacing:2px;padding-right:50px;font-size:12px;font-weight:700;line-height:16px;transition:all .3s;position:absolute;top:8px;left:-158px}}.icon--menu{background-image:url(Icon-Burger-menu.7d7b9831.png)}.icon--menu:hover{background-image:url(Icon-Burger-menu-hover.9c7f5ffb.png);transition:all .3s}.icon--close{background-image:url(Icon-Close.3a2b6717.png);position:fixed;top:24px;right:20px}@media (min-width:576px) and (max-width:1024px){.icon--close{top:36px;right:72px}}@media (min-width:1024px){.icon--close{top:36px;right:120px}}.header{box-sizing:border-box;background-image:url(header.bced6dda.png);background-position:85%;background-repeat:no-repeat;background-size:cover;margin:0;padding:0}@media (min-width:576px) and (max-width:1024px){.header{background-position:50%}}@media (min-width:1024px){.header{background-position:50%}}.header__content{box-sizing:border-box;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;height:100vh;margin:0;padding:0 20px;display:-ms-flexbox;display:flex}@media (min-width:576px) and (max-width:1024px){.header__content{padding:0 72px}}@media (min-width:1024px){.header__content{padding:0 120px}}.header__title{text-align:center;text-wrap:nowrap;color:#fff;letter-spacing:-1.5px;margin:0 0 88px;padding:0;font-size:36px;font-weight:700;line-height:3px}@media (min-width:576px) and (max-width:1024px){.header__title{margin-bottom:130px;font-size:64px;line-height:64px}}@media (min-width:1024px){.header__title{margin-bottom:203px;font-size:80px;line-height:80px}}.header__top{-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;width:100%;margin:0;padding:24px 0;display:-ms-flexbox;display:flex}@media (min-width:576px) and (max-width:1024px){.header__top{padding-top:36px;padding-bottom:36px}}@media (min-width:1024px){.header__top{padding-top:36px;padding-bottom:36px}}.header__top-menu{gap:24px;margin:0;display:-ms-flexbox;display:flex}@media (min-width:576px) and (max-width:1024px){.header__top-menu{gap:32px}}@media (min-width:1024px){.header__top-menu{gap:32px}}.nav__list{-ms-flex-direction:column;flex-direction:column;gap:32px;margin:0;padding:24px 0 40px;list-style-type:none;display:-ms-flexbox;display:flex}.nav__item{text-wrap:nowrap;text-align:left;text-transform:uppercase;display:block}.nav__link{letter-spacing:2px;color:#1d1d1d;font-size:22px;font-weight:600;line-height:22px;text-decoration:none;position:relative}.nav__link:after{content:"";transform-origin:0;background-color:#1d1d1d;width:100%;height:1px;transition:transform .3s;display:block;position:absolute;bottom:-8px;transform:scale(0)}.nav__link:hover:after{transform:scale(1)}@media (min-width:1024px){.nav__link{font-weight:700}}.footer{z-index:-1;position:sticky}.footer__image{width:100%}.compare{--columns:2;grid-template-columns:repeat(var(--columns),1fr);box-sizing:border-box;column-gap:20px;padding:92px 0;display:grid}@media (min-width:576px) and (max-width:1024px){.compare{--columns:6;column-gap:24px}}@media (min-width:1024px){.compare{--columns:12;column-gap:24px}}@media (min-width:576px) and (max-width:1024px){.compare{padding:132px 0 120px}}@media (min-width:1024px){.compare{padding:164px 0 144px}}.compare__bike{grid-column:1/-1}@media (min-width:576px) and (max-width:1024px){.compare__bike{grid-column:1/-1}}@media (min-width:1024px){.compare__bike{grid-column:span 4}}.compare__bike-image{z-index:-1;width:100%;transition:transform .3s}.compare__bike-image:hover{transform:scale(1.1)}.compare__bike-title{text-wrap:wrap;text-align:left;font-size:24px;font-weight:700;line-height:33.6px}.compare__bike-description{text-wrap:wrap;text-align:left;font-size:16px;font-weight:400;line-height:22.4px}.compare__bike-price{text-align:left;font-size:24px;font-weight:700;line-height:33.6px}.contacts{--columns:2;grid-template-columns:repeat(var(--columns),1fr);box-sizing:border-box;column-gap:24px;padding-top:80px;display:grid}@media (min-width:576px) and (max-width:1024px){.contacts{--columns:6;column-gap:24px}}@media (min-width:1024px){.contacts{--columns:12;column-gap:24px}}@media (min-width:576px) and (max-width:1024px){.contacts{padding-top:120px}}@media (min-width:1024px){.contacts{padding-top:180px}}.contacts__form{grid-column:1/-1}@media (min-width:576px) and (max-width:1024px){.contacts__form{grid-column:span 3}}@media (min-width:1024px){.contacts__form{grid-column:1/6}}.contacts__block{grid-column:1/-1;margin:48px 0 0;padding:0}@media (min-width:576px) and (max-width:1024px){.contacts__block{grid-column:span 3}}@media (min-width:1024px){.contacts__block{grid-column:8/-1}}.contacts__block__title{text-align:left;padding:0;font-size:14px;font-weight:400;line-height:19.6px}.contacts__block__title:first-child{margin-top:0}.contacts__block__description{text-align:left;color:#fff;font-size:16px;font-weight:500;line-height:22.4px;text-decoration:none}.contacts__block__description:hover{color:#7e7e83;transition:all .3s}.details{--columns:2;grid-template-columns:repeat(var(--columns),1fr);box-sizing:border-box;column-gap:20px;margin:0;padding:0;display:grid}@media (min-width:576px) and (max-width:1024px){.details{--columns:6;column-gap:24px}}@media (min-width:1024px){.details{--columns:12;column-gap:24px}}.details__button{grid-column:1/-1;width:278px;margin-top:40px}@media (min-width:576px) and (max-width:1024px){.details__button{grid-column:2/-2;width:392px;margin-top:48px}}@media (min-width:1024px){.details__button{grid-column:6/-6;width:324px;margin-top:48px}}.details__item{grid-column:1/-1;margin-top:40px}.details__item-photos{--columns:2;grid-template-columns:repeat(var(--columns),1fr);column-gap:20px;display:grid}@media (min-width:576px) and (max-width:1024px){.details__item-photos{--columns:6;column-gap:24px}}@media (min-width:1024px){.details__item-photos{--columns:12;column-gap:24px}}.details__item-title{text-align:left;grid-column:1/-1;margin:16px 0 8px;padding:0;font-size:24px;font-weight:700;line-height:33.6px;display:block}.details__item-description{grid-column:1/-1;margin:0;padding:0;font-size:16px;font-weight:400;line-height:22.4px;display:block}.first-item{margin-top:48px}@media (min-width:576px) and (max-width:1024px){.first-item{margin-top:64px}}.first-detail{grid-column:span 1}@media (min-width:576px) and (max-width:1024px){.first-detail{grid-column:span 4}}@media (min-width:1024px){.first-detail{grid-column:span 8}}.second-detail{grid-column:span 1}@media (min-width:576px) and (max-width:1024px){.second-detail{grid-column:span 2}}@media (min-width:1024px){.second-detail{grid-column:span 4}}.photo{background-position:50%;background-repeat:no-repeat;background-size:cover;width:100%;height:25vw;min-height:130px;transition:transform .3s;display:block;overflow:hidden}.photo:hover{transform:scale(1.05)}@media (min-width:1440px){.photo{transition:transform .3s}.photo:hover{transform:scale(1.02)}}@media (min-width:2000px){.photo{transition:transform .3s}.photo:hover{transform:scale(1.01)}}.first-photo{background-image:url(details1.a1b65708.svg)}.second-photo{background-image:url(details2.4a46b521.svg)}.third-photo{background-image:url(details3.eb415bf0.svg)}.fourth-photo{background-image:url(details4.393f901b.svg)}.fifth-photo{background-image:url(details5.8b5bd987.svg)}.sixth-photo{background-image:url(details6.666a728a.svg)}.about{--columns:2;grid-template-columns:repeat(var(--columns),1fr);gap:32px 20px;display:grid}@media (min-width:576px) and (max-width:1024px){.about{--columns:6;column-gap:24px}}@media (min-width:1024px){.about{--columns:12;column-gap:24px}}.about__title{letter-spacing:-1.5px;text-align:left;grid-column:1/-1;margin:0;padding:0;font-size:32px;font-weight:500;line-height:32px}@media (min-width:576px) and (max-width:1024px){.about__title{grid-column:span 3;font-size:48px;line-height:48px}}@media (min-width:1024px){.about__title{grid-column:span 5;font-size:64px;line-height:64px}}.about__description{grid-column:1/-1;margin:0;padding:0;font-size:23px;font-weight:500;line-height:32.2px}@media (min-width:576px) and (max-width:1024px){.about__description{grid-column:span 3}}@media (min-width:1024px){.about__description{grid-column:span 6}}.form{box-sizing:border-box;-ms-flex-direction:column;flex-direction:column;gap:24px;margin-top:48px;display:-ms-flexbox;display:flex}.form__field{background-color:#f8f8fa;font-family:Poppins,sans-serif;position:relative}.form__input{box-sizing:border-box;border:none;border-radius:40px;outline:none;gap:0;width:100%;height:48px;padding:14px 16px;display:block}.form__input::placeholder{text-align:left;color:#7e7e83;gap:0;font-size:14px;font-weight:400;line-height:20px;position:absolute;top:14px;left:16px}.form__input::placeholder{text-align:left;color:#7e7e83;gap:0;font-size:14px;font-weight:400;line-height:20px;position:absolute;top:14px;left:16px}.form__textarea{box-sizing:border-box;resize:none;border:none;border-radius:16px;outline:none;gap:10px;width:100%;height:148px;padding:14px 16px}.form__textarea::placeholder{text-align:left;color:#7e7e83;gap:0;font-size:14px;font-weight:400;line-height:20px;position:absolute;top:14px;left:16px}.form__textarea::placeholder{text-align:left;color:#7e7e83;gap:0;font-size:14px;font-weight:400;line-height:20px;position:absolute;top:14px;left:16px}.form__button{width:100%;margin-top:16px}input:-webkit-autofill{background-color:#f8f8fa!important}input:-webkit-autofill:hover{background-color:#f8f8fa!important}input:-webkit-autofill:focus{background-color:#f8f8fa!important}textarea:-webkit-autofill{background-color:#f8f8fa!important}textarea:-webkit-autofill:hover{background-color:#f8f8fa!important}textarea:-webkit-autofill:focus{background-color:#f8f8fa!important}select:-webkit-autofill{background-color:#f8f8fa!important}select:-webkit-autofill:hover{background-color:#f8f8fa!important}select:-webkit-autofill:focus{background-color:#f8f8fa!important}.menu{box-sizing:border-box;background-color:#c2c2c2;width:100vw;height:100vh}.menu__top{-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) and (max-width:1024px){.menu__top{padding-top:36px;padding-bottom:36px}}@media (min-width:1024px){.menu__top{padding-top:36px;padding-bottom:36px}}.menu__bottom{box-sizing:border-box;-ms-flex-direction:column;flex-direction:column;gap:16px;width:auto;margin:0;padding:0;display:-ms-flexbox;display:flex}.menu__phone{color:#1d1d1d;text-align:left;margin:0;padding:0;font-size:16px;font-weight:600;line-height:27px;text-decoration:none;display:block}@media (min-width:1024px){.menu__phone{font-weight:700}}.menu__phone-call{color:#1d1d1d;letter-spacing:2px;text-align:left;text-wrap:nowrap;border-bottom:1px solid #1d1d1d;width:fit-content;margin:0;padding:0 0 8px;font-size:12px;font-weight:600;line-height:16px;text-decoration:none;display:block}@media (min-width:1024px){.menu__phone-call{font-weight:700}}.logo{background-repeat:no-repeat;background-size:contain;width:130px;height:38px;transition:transform .3s;display:block}.logo:hover{transform:scale(1.1)}@media (min-width:576px) and (max-width:1024px){.logo{width:187px;height:56px}}@media (min-width:1024px){.logo{width:187px;height:56px}}.header__top-logo{background-image:url(logo.0aa4717d.png)}.menu__logo{background-image:url(menu_logo.05b950b2.png)}.page{color:#fff;scroll-behavior:smooth;font-family:Poppins,sans-serif}.page__body{margin:0;padding:0}.page__menu{opacity:0;pointer-events:none;position:fixed;top:0;left:0;right:0;overflow:auto}.page__menu:target{opacity:1;pointer-events:all;transition:all .3s}.page:has(.page__menu:target){overflow:hidden}.container{padding-left:20px;padding-right:20px}@media (min-width:576px) and (max-width:1024px){.container{margin-left:auto;margin-right:auto;padding-left:72px;padding-right:72px}}@media (min-width:1024px){.container{margin-left:auto;margin-right:auto;padding-left:120px;padding-right:120px}}.main{box-sizing:border-box;background-color:#1d1d1d;padding:60px 0 120px}@media (min-width:576px) and (max-width:1024px){.main{padding:120px 0 102px}}@media (min-width:1024px){.main{padding:120px 0 164px}}.section__title{letter-spacing:-1.5px;text-align:center;z-index:1;grid-column:1/-1;margin:0;padding:0;font-size:32px;font-weight:500;line-height:32px}@media (min-width:576px) and (max-width:1024px){.section__title{font-size:48px;line-height:48px}}@media (min-width:1024px){.section__title{font-size:64px;line-height:64px}}.button{cursor:pointer;box-sizing:border-box;text-align:center;color:#1d1d1d;background-color:#fff;border:none;border-radius:40px;gap:0;height:56px;padding:0 48px;font-family:Poppins,sans-serif;font-size:16px;font-weight:700;line-height:27px;transition:all .3s;display:block}.button:hover{box-shadow:1px 4px 16px rgba(232,232,240,.4)}.button:active{box-shadow:1px 4px 16px rgba(232,232,240,.64)} +/*# sourceMappingURL=index.17cd25b6.css.map */ diff --git a/index.17cd25b6.css.map b/index.17cd25b6.css.map new file mode 100644 index 0000000..3a01720 --- /dev/null +++ b/index.17cd25b6.css.map @@ -0,0 +1 @@ +{"mappings":"ACEA,0FCiDE,iCA1CA,gDDPF,8BCCE,0BDDF,8BAmBA,iFClBE,0BDsBE,gNAgBJ,iFAGE,gHAMF,+GCzCE,gDDyCF,kCC/CE,0BD+CF,mCElDA,sLDSE,gDCTF,iCDGE,0BCHF,iCAiBE,iNDRA,gDCQA,iCDdA,0BCcA,kCAkBA,4JD1BA,gDC0BA,oEDhCA,0BCgCA,oEAyBA,8KDnDA,gDCmDA,mDDzDA,0BCyDA,mDAiBE,qEDpEF,gDCoEE,4BD1EF,0BC0EE,4BC5EF,uJAUA,mFAOA,mIASE,sLAaA,0CFrCF,0BEeA,4BClBF,mCAIE,0BCJF,wIJSE,gDITF,sCJGE,0BIHF,uCJSE,gDITF,gCJGE,0BIHF,gCAcE,gCJLA,gDIKA,iCJXA,0BIWA,mCAWE,oEJ0BF,gDInBE,sGAQA,4GAQA,uFChDJ,2ILSE,gDKTF,uCLGE,0BKHF,wCLSE,gDKTF,6BLGE,0BKHF,6BAeE,iCLNA,gDKMA,oCLZA,0BKYA,iCAYA,4DLlBA,gDKkBA,qCLxBA,0BKwBA,mCAcE,oGAOE,iDAKF,gIAQE,qEC7DN,4INSE,gDMTF,sCNGE,0BMHF,uCAOE,8DNEA,gDMFA,+DNJA,0BMIA,+DAkBA,gDAIE,gHNpBF,gDMoBE,mDN1BF,0BM0BE,oDAIA,kJAWA,+HAYJ,4BN/CE,gDM+CF,6BAQA,iCNvDE,gDMuDF,kCN7DE,0BM6DF,kCAYA,kCNnEE,gDMmEF,mCNzEE,0BMyEF,mCAYA,gLNrCE,mCMiDA,0BAZF,gCNrCE,oCMqDA,0BAhBF,gCNrCE,oCM0DF,0EAIA,2EAIA,0EAIA,2EAIA,0EAIA,0ECjIA,+FPSE,gDOTF,oCPGE,0BOHF,qCAKE,wIPIA,gDOJA,kEPFA,0BOEA,kEAuBA,0GPnBA,gDOmBA,wCPzBA,0BOyBA,wCCzBF,sIAOE,uFAMA,4IAWE,mJAAA,mJAaF,iJAWE,sJAAA,sJAaF,yCAMF,0DAAA,gEAAA,gEAAA,6DAAA,mEAAA,mEAAA,2DAAA,iEAAA,iECtEA,8EAME,8KTGA,gDSHA,iDTHA,0BSGA,iDAeA,4JAUA,iJT5BA,0BS4BA,8BAeE,kPT3CF,0BS2CE,mCC9CJ,yHVmDE,iCA1CA,gDUTF,+BVGE,0BUHF,+BAoBA,2EAIA,0ECVA,uEAMA,+BAKA,4FASE,mEAOF,8CAIA,gDXpCE,gDWoCF,oFX1CE,0BW0CF,sFAIA,0EXxCE,gDWwCF,6BX9CE,0BW8CF,6BAcA,sJXtDE,gDWsDF,iDX5DE,0BW4DF,iDAsBA,mRAkBE,2DAIA","sources":["index.17cd25b6.css","src/styles/icons.scss","src/styles/mixines.scss","src/styles/header.scss","src/styles/navigation.scss","src/styles/footer.scss","src/styles/compare.scss","src/styles/contacts.scss","src/styles/details.scss","src/styles/about.scss","src/styles/form.scss","src/styles/menu.scss","src/styles/logo.scss","src/styles/main.scss"],"sourcesContent":[".icon {\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.1);\n}\n\n@media (width >= 576px) and (width <= 1024px) {\n .icon {\n width: 32px;\n height: 32px;\n }\n}\n\n@media (width >= 1024px) {\n .icon {\n width: 32px;\n height: 32px;\n }\n}\n\n.icon--phone {\n background-image: url(\"Icon-Phone-call.82284fdf.png\");\n}\n\n@media (width >= 1024px) {\n .icon--phone:hover:before {\n content: \"+1 234 555-55-55\";\n color: #fff;\n letter-spacing: 2px;\n padding-right: 50px;\n font-size: 12px;\n font-weight: 700;\n line-height: 16px;\n transition: all .3s;\n position: absolute;\n top: 8px;\n left: -158px;\n }\n}\n\n.icon--menu {\n background-image: url(\"Icon-Burger-menu.7d7b9831.png\");\n}\n\n.icon--menu:hover {\n background-image: url(\"Icon-Burger-menu-hover.9c7f5ffb.png\");\n transition: all .3s;\n}\n\n.icon--close {\n background-image: url(\"Icon-Close.3a2b6717.png\");\n position: fixed;\n top: 24px;\n right: 20px;\n}\n\n@media (width >= 576px) and (width <= 1024px) {\n .icon--close {\n top: 36px;\n right: 72px;\n }\n}\n\n@media (width >= 1024px) {\n .icon--close {\n top: 36px;\n right: 120px;\n }\n}\n\n.header {\n box-sizing: border-box;\n background-image: url(\"header.bced6dda.png\");\n background-position: 85%;\n background-repeat: no-repeat;\n background-size: cover;\n margin: 0;\n padding: 0;\n}\n\n@media (width >= 576px) and (width <= 1024px) {\n .header {\n background-position: center;\n }\n}\n\n@media (width >= 1024px) {\n .header {\n background-position: center;\n }\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 margin: 0;\n padding: 0 20px;\n display: -ms-flexbox;\n display: flex;\n}\n\n@media (width >= 576px) and (width <= 1024px) {\n .header__content {\n padding: 0 72px;\n }\n}\n\n@media (width >= 1024px) {\n .header__content {\n padding: 0 120px;\n }\n}\n\n.header__title {\n text-align: center;\n text-wrap: nowrap;\n color: #fff;\n letter-spacing: -1.5px;\n margin: 0 0 88px;\n padding: 0;\n font-size: 36px;\n font-weight: 700;\n line-height: 3px;\n}\n\n@media (width >= 576px) and (width <= 1024px) {\n .header__title {\n margin-bottom: 130px;\n font-size: 64px;\n line-height: 64px;\n }\n}\n\n@media (width >= 1024px) {\n .header__title {\n margin-bottom: 203px;\n font-size: 80px;\n line-height: 80px;\n }\n}\n\n.header__top {\n justify-content: space-between;\n align-items: center;\n width: 100%;\n margin: 0;\n padding: 24px 0;\n display: -ms-flexbox;\n display: flex;\n}\n\n@media (width >= 576px) and (width <= 1024px) {\n .header__top {\n padding-top: 36px;\n padding-bottom: 36px;\n }\n}\n\n@media (width >= 1024px) {\n .header__top {\n padding-top: 36px;\n padding-bottom: 36px;\n }\n}\n\n.header__top-menu {\n gap: 24px;\n margin: 0;\n display: -ms-flexbox;\n display: flex;\n}\n\n@media (width >= 576px) and (width <= 1024px) {\n .header__top-menu {\n gap: 32px;\n }\n}\n\n@media (width >= 1024px) {\n .header__top-menu {\n gap: 32px;\n }\n}\n\n.nav__list {\n -ms-flex-direction: column;\n flex-direction: column;\n gap: 32px;\n margin: 0;\n padding: 24px 0 40px;\n list-style-type: none;\n display: -ms-flexbox;\n display: flex;\n}\n\n.nav__item {\n text-wrap: nowrap;\n text-align: left;\n text-transform: uppercase;\n display: block;\n}\n\n.nav__link {\n letter-spacing: 2px;\n color: #1d1d1d;\n font-size: 22px;\n font-weight: 600;\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: #1d1d1d;\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@media (width >= 1024px) {\n .nav__link {\n font-weight: 700;\n }\n}\n\n.footer {\n z-index: -1;\n position: sticky;\n}\n\n.footer__image {\n width: 100%;\n}\n\n.compare {\n --columns: 2;\n grid-template-columns: repeat(var(--columns), 1fr);\n box-sizing: border-box;\n column-gap: 20px;\n padding: 92px 0;\n display: grid;\n}\n\n@media (width >= 576px) and (width <= 1024px) {\n .compare {\n --columns: 6;\n column-gap: 24px;\n }\n}\n\n@media (width >= 1024px) {\n .compare {\n --columns: 12;\n column-gap: 24px;\n }\n}\n\n@media (width >= 576px) and (width <= 1024px) {\n .compare {\n padding: 132px 0 120px;\n }\n}\n\n@media (width >= 1024px) {\n .compare {\n padding: 164px 0 144px;\n }\n}\n\n.compare__bike {\n grid-column: 1 / -1;\n}\n\n@media (width >= 576px) and (width <= 1024px) {\n .compare__bike {\n grid-column: 1 / -1;\n }\n}\n\n@media (width >= 1024px) {\n .compare__bike {\n grid-column: span 4;\n }\n}\n\n.compare__bike-image {\n z-index: -1;\n width: 100%;\n transition: transform .3s;\n}\n\n.compare__bike-image:hover {\n transform: scale(1.1);\n}\n\n.compare__bike-title {\n text-wrap: wrap;\n text-align: left;\n font-size: 24px;\n font-weight: 700;\n line-height: 33.6px;\n}\n\n.compare__bike-description {\n text-wrap: wrap;\n text-align: left;\n font-size: 16px;\n font-weight: 400;\n line-height: 22.4px;\n}\n\n.compare__bike-price {\n text-align: left;\n font-size: 24px;\n font-weight: 700;\n line-height: 33.6px;\n}\n\n.contacts {\n --columns: 2;\n grid-template-columns: repeat(var(--columns), 1fr);\n box-sizing: border-box;\n column-gap: 24px;\n padding-top: 80px;\n display: grid;\n}\n\n@media (width >= 576px) and (width <= 1024px) {\n .contacts {\n --columns: 6;\n column-gap: 24px;\n }\n}\n\n@media (width >= 1024px) {\n .contacts {\n --columns: 12;\n column-gap: 24px;\n }\n}\n\n@media (width >= 576px) and (width <= 1024px) {\n .contacts {\n padding-top: 120px;\n }\n}\n\n@media (width >= 1024px) {\n .contacts {\n padding-top: 180px;\n }\n}\n\n.contacts__form {\n grid-column: 1 / -1;\n}\n\n@media (width >= 576px) and (width <= 1024px) {\n .contacts__form {\n grid-column: span 3;\n }\n}\n\n@media (width >= 1024px) {\n .contacts__form {\n grid-column: 1 / 6;\n }\n}\n\n.contacts__block {\n grid-column: 1 / -1;\n margin: 48px 0 0;\n padding: 0;\n}\n\n@media (width >= 576px) and (width <= 1024px) {\n .contacts__block {\n grid-column: span 3;\n }\n}\n\n@media (width >= 1024px) {\n .contacts__block {\n grid-column: 8 / -1;\n }\n}\n\n.contacts__block__title {\n text-align: left;\n padding: 0;\n font-size: 14px;\n font-weight: 400;\n line-height: 19.6px;\n}\n\n.contacts__block__title:first-child {\n margin-top: 0;\n}\n\n.contacts__block__description {\n text-align: left;\n color: #fff;\n font-size: 16px;\n font-weight: 500;\n line-height: 22.4px;\n text-decoration: none;\n}\n\n.contacts__block__description:hover {\n color: #7e7e83;\n transition: all .3s;\n}\n\n.details {\n --columns: 2;\n grid-template-columns: repeat(var(--columns), 1fr);\n box-sizing: border-box;\n column-gap: 20px;\n margin: 0;\n padding: 0;\n display: grid;\n}\n\n@media (width >= 576px) and (width <= 1024px) {\n .details {\n --columns: 6;\n column-gap: 24px;\n }\n}\n\n@media (width >= 1024px) {\n .details {\n --columns: 12;\n column-gap: 24px;\n }\n}\n\n.details__button {\n grid-column: 1 / -1;\n width: 278px;\n margin-top: 40px;\n}\n\n@media (width >= 576px) and (width <= 1024px) {\n .details__button {\n grid-column: 2 / -2;\n width: 392px;\n margin-top: 48px;\n }\n}\n\n@media (width >= 1024px) {\n .details__button {\n grid-column: 6 / -6;\n width: 324px;\n margin-top: 48px;\n }\n}\n\n.details__item {\n grid-column: 1 / -1;\n margin-top: 40px;\n}\n\n.details__item-photos {\n --columns: 2;\n grid-template-columns: repeat(var(--columns), 1fr);\n column-gap: 20px;\n display: grid;\n}\n\n@media (width >= 576px) and (width <= 1024px) {\n .details__item-photos {\n --columns: 6;\n column-gap: 24px;\n }\n}\n\n@media (width >= 1024px) {\n .details__item-photos {\n --columns: 12;\n column-gap: 24px;\n }\n}\n\n.details__item-title {\n text-align: left;\n grid-column: 1 / -1;\n margin: 16px 0 8px;\n padding: 0;\n font-size: 24px;\n font-weight: 700;\n line-height: 33.6px;\n display: block;\n}\n\n.details__item-description {\n grid-column: 1 / -1;\n margin: 0;\n padding: 0;\n font-size: 16px;\n font-weight: 400;\n line-height: 22.4px;\n display: block;\n}\n\n.first-item {\n margin-top: 48px;\n}\n\n@media (width >= 576px) and (width <= 1024px) {\n .first-item {\n margin-top: 64px;\n }\n}\n\n.first-detail {\n grid-column: span 1;\n}\n\n@media (width >= 576px) and (width <= 1024px) {\n .first-detail {\n grid-column: span 4;\n }\n}\n\n@media (width >= 1024px) {\n .first-detail {\n grid-column: span 8;\n }\n}\n\n.second-detail {\n grid-column: span 1;\n}\n\n@media (width >= 576px) and (width <= 1024px) {\n .second-detail {\n grid-column: span 2;\n }\n}\n\n@media (width >= 1024px) {\n .second-detail {\n grid-column: span 4;\n }\n}\n\n.photo {\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n width: 100%;\n height: 25vw;\n min-height: 130px;\n transition: transform .3s;\n display: block;\n overflow: hidden;\n}\n\n.photo:hover {\n transform: scale(1.05);\n}\n\n@media (width >= 1440px) {\n .photo {\n transition: transform .3s;\n }\n\n .photo:hover {\n transform: scale(1.02);\n }\n}\n\n@media (width >= 2000px) {\n .photo {\n transition: transform .3s;\n }\n\n .photo:hover {\n transform: scale(1.01);\n }\n}\n\n.first-photo {\n background-image: url(\"details1.a1b65708.svg\");\n}\n\n.second-photo {\n background-image: url(\"details2.4a46b521.svg\");\n}\n\n.third-photo {\n background-image: url(\"details3.eb415bf0.svg\");\n}\n\n.fourth-photo {\n background-image: url(\"details4.393f901b.svg\");\n}\n\n.fifth-photo {\n background-image: url(\"details5.8b5bd987.svg\");\n}\n\n.sixth-photo {\n background-image: url(\"details6.666a728a.svg\");\n}\n\n.about {\n --columns: 2;\n grid-template-columns: repeat(var(--columns), 1fr);\n gap: 32px 20px;\n display: grid;\n}\n\n@media (width >= 576px) and (width <= 1024px) {\n .about {\n --columns: 6;\n column-gap: 24px;\n }\n}\n\n@media (width >= 1024px) {\n .about {\n --columns: 12;\n column-gap: 24px;\n }\n}\n\n.about__title {\n letter-spacing: -1.5px;\n text-align: left;\n grid-column: 1 / -1;\n margin: 0;\n padding: 0;\n font-size: 32px;\n font-weight: 500;\n line-height: 32px;\n}\n\n@media (width >= 576px) and (width <= 1024px) {\n .about__title {\n grid-column: span 3;\n font-size: 48px;\n line-height: 48px;\n }\n}\n\n@media (width >= 1024px) {\n .about__title {\n grid-column: span 5;\n font-size: 64px;\n line-height: 64px;\n }\n}\n\n.about__description {\n grid-column: 1 / -1;\n margin: 0;\n padding: 0;\n font-size: 23px;\n font-weight: 500;\n line-height: 32.2px;\n}\n\n@media (width >= 576px) and (width <= 1024px) {\n .about__description {\n grid-column: span 3;\n }\n}\n\n@media (width >= 1024px) {\n .about__description {\n grid-column: span 6;\n }\n}\n\n.form {\n box-sizing: border-box;\n -ms-flex-direction: column;\n flex-direction: column;\n gap: 24px;\n margin-top: 48px;\n display: -ms-flexbox;\n display: flex;\n}\n\n.form__field {\n background-color: #f8f8fa;\n font-family: Poppins, sans-serif;\n position: relative;\n}\n\n.form__input {\n box-sizing: border-box;\n border: none;\n border-radius: 40px;\n outline: none;\n gap: 0;\n width: 100%;\n height: 48px;\n padding: 14px 16px;\n display: block;\n}\n\n.form__input::-moz-placeholder {\n text-align: left;\n color: #7e7e83;\n gap: 0;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n position: absolute;\n top: 14px;\n left: 16px;\n}\n\n.form__input::placeholder {\n text-align: left;\n color: #7e7e83;\n gap: 0;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n position: absolute;\n top: 14px;\n left: 16px;\n}\n\n.form__textarea {\n box-sizing: border-box;\n resize: none;\n border: none;\n border-radius: 16px;\n outline: none;\n gap: 10px;\n width: 100%;\n height: 148px;\n padding: 14px 16px;\n}\n\n.form__textarea::-moz-placeholder {\n text-align: left;\n color: #7e7e83;\n gap: 0;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n position: absolute;\n top: 14px;\n left: 16px;\n}\n\n.form__textarea::placeholder {\n text-align: left;\n color: #7e7e83;\n gap: 0;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n position: absolute;\n top: 14px;\n left: 16px;\n}\n\n.form__button {\n width: 100%;\n margin-top: 16px;\n}\n\ninput:-webkit-autofill {\n background-color: #f8f8fa !important;\n}\n\ninput:-webkit-autofill:hover {\n background-color: #f8f8fa !important;\n}\n\ninput:-webkit-autofill:focus {\n background-color: #f8f8fa !important;\n}\n\ntextarea:-webkit-autofill {\n background-color: #f8f8fa !important;\n}\n\ntextarea:-webkit-autofill:hover {\n background-color: #f8f8fa !important;\n}\n\ntextarea:-webkit-autofill:focus {\n background-color: #f8f8fa !important;\n}\n\nselect:-webkit-autofill {\n background-color: #f8f8fa !important;\n}\n\nselect:-webkit-autofill:hover {\n background-color: #f8f8fa !important;\n}\n\nselect:-webkit-autofill:focus {\n background-color: #f8f8fa !important;\n}\n\n.menu {\n box-sizing: border-box;\n background-color: #c2c2c2;\n width: 100vw;\n height: 100vh;\n}\n\n.menu__top {\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) and (width <= 1024px) {\n .menu__top {\n padding-top: 36px;\n padding-bottom: 36px;\n }\n}\n\n@media (width >= 1024px) {\n .menu__top {\n padding-top: 36px;\n padding-bottom: 36px;\n }\n}\n\n.menu__bottom {\n box-sizing: border-box;\n -ms-flex-direction: column;\n flex-direction: column;\n gap: 16px;\n width: auto;\n margin: 0;\n padding: 0;\n display: -ms-flexbox;\n display: flex;\n}\n\n.menu__phone {\n color: #1d1d1d;\n text-align: left;\n margin: 0;\n padding: 0;\n font-size: 16px;\n font-weight: 600;\n line-height: 27px;\n text-decoration: none;\n display: block;\n}\n\n@media (width >= 1024px) {\n .menu__phone {\n font-weight: 700;\n }\n}\n\n.menu__phone-call {\n color: #1d1d1d;\n letter-spacing: 2px;\n text-align: left;\n text-wrap: nowrap;\n border-bottom: 1px solid #1d1d1d;\n width: fit-content;\n margin: 0;\n padding: 0 0 8px;\n font-size: 12px;\n font-weight: 600;\n line-height: 16px;\n text-decoration: none;\n display: block;\n}\n\n@media (width >= 1024px) {\n .menu__phone-call {\n font-weight: 700;\n }\n}\n\n.logo {\n background-repeat: no-repeat;\n background-size: contain;\n width: 130px;\n height: 38px;\n transition: transform .3s;\n display: block;\n}\n\n.logo:hover {\n transform: scale(1.1);\n}\n\n@media (width >= 576px) and (width <= 1024px) {\n .logo {\n width: 187px;\n height: 56px;\n }\n}\n\n@media (width >= 1024px) {\n .logo {\n width: 187px;\n height: 56px;\n }\n}\n\n.header__top-logo {\n background-image: url(\"logo.0aa4717d.png\");\n}\n\n.menu__logo {\n background-image: url(\"menu_logo.05b950b2.png\");\n}\n\n.page {\n color: #fff;\n scroll-behavior: smooth;\n font-family: Poppins, sans-serif;\n}\n\n.page__body {\n margin: 0;\n padding: 0;\n}\n\n.page__menu {\n opacity: 0;\n pointer-events: none;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n overflow: auto;\n}\n\n.page__menu:target {\n opacity: 1;\n pointer-events: all;\n transition: all .3s;\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) and (width <= 1024px) {\n .container {\n margin-left: auto;\n margin-right: auto;\n padding-left: 72px;\n padding-right: 72px;\n }\n}\n\n@media (width >= 1024px) {\n .container {\n margin-left: auto;\n margin-right: auto;\n padding-left: 120px;\n padding-right: 120px;\n }\n}\n\n.main {\n box-sizing: border-box;\n background-color: #1d1d1d;\n padding: 60px 0 120px;\n}\n\n@media (width >= 576px) and (width <= 1024px) {\n .main {\n padding: 120px 0 102px;\n }\n}\n\n@media (width >= 1024px) {\n .main {\n padding: 120px 0 164px;\n }\n}\n\n.section__title {\n letter-spacing: -1.5px;\n text-align: center;\n z-index: 1;\n grid-column: 1 / -1;\n margin: 0;\n padding: 0;\n font-size: 32px;\n font-weight: 500;\n line-height: 32px;\n}\n\n@media (width >= 576px) and (width <= 1024px) {\n .section__title {\n font-size: 48px;\n line-height: 48px;\n }\n}\n\n@media (width >= 1024px) {\n .section__title {\n font-size: 64px;\n line-height: 64px;\n }\n}\n\n.button {\n cursor: pointer;\n box-sizing: border-box;\n text-align: center;\n color: #1d1d1d;\n background-color: #fff;\n border: none;\n border-radius: 40px;\n gap: 0;\n height: 56px;\n padding: 0 48px;\n font-family: Poppins, sans-serif;\n font-size: 16px;\n font-weight: 700;\n line-height: 27px;\n transition: all .3s;\n display: block;\n}\n\n.button:hover {\n box-shadow: 1px 4px 16px #e8e8f066;\n}\n\n.button:active {\n box-shadow: 1px 4px 16px #e8e8f0a3;\n}\n/*# sourceMappingURL=index.17cd25b6.css.map */\n","@import './mixines';\n\n.icon {\n display: block;\n width: 24px;\n height: 24px;\n background-size: cover;\n\n @include hover(transform, scale(1.1));\n\n @include ontablet {\n width: 32px;\n height: 32px;\n }\n\n @include ondesktop {\n width: 32px;\n height: 32px;\n }\n}\n\n.icon--phone {\n background-image: url(../icons/Icon-Phone-call.png);\n\n @include ondesktop {\n &:hover::before {\n content: '+1 234 555-55-55';\n padding-right: 50px;\n transition: 0.3s;\n position: absolute;\n left: -158px;\n top: 8px;\n color: $main-text-color;\n font-weight: 700;\n letter-spacing: 2px;\n font-size: 12px;\n line-height: 16px;\n }\n }\n}\n\n.icon--menu {\n background-image: url(../icons/Icon-Burger-menu.png);\n\n &:hover {\n transition: 0.3s;\n background-image: url(../icons/Icon-Burger-menu-hover.png);\n }\n}\n\n.icon--close {\n position: fixed;\n top: 24px;\n right: 20px;\n background-image: url(../icons/Icon-Close.png);\n\n @include ontablet {\n top: 36px;\n right: 72px;\n }\n\n @include ondesktop {\n top: 36px;\n right: 120px;\n }\n}\n","@import './variables';\n\n@mixin ondesktop {\n @media (min-width: $desktop-min-width) {\n @content;\n }\n}\n\n@mixin ontablet {\n @media (min-width: $tablet-min-width) and (max-width: $desktop-min-width) {\n @content;\n }\n}\n\n@mixin contentpaddinginline {\n padding-inline: 20px;\n\n @include ontablet {\n margin-inline: auto;\n padding-inline: 72px;\n }\n\n @include ondesktop {\n margin-inline: auto;\n padding-inline: 120px;\n }\n}\n\n@mixin pagegrid {\n --columns: 2;\n\n display: grid;\n column-gap: 20px;\n\n grid-template-columns: repeat(var(--columns), 1fr);\n\n @include ontablet {\n --columns: 6;\n\n column-gap: 24px;\n }\n\n @include ondesktop {\n --columns: 12;\n\n column-gap: 24px;\n }\n}\n\n@mixin hover($property, $toValue) {\n transition: #{$property} 0.3s;\n &:hover {\n #{$property}: $toValue;\n }\n}\n",".header {\n background-image: url(../images/header.png);\n background-size: cover;\n background-repeat: no-repeat;\n box-sizing: border-box;\n background-position: 85%;\n margin: 0;\n padding: 0;\n\n @include ontablet {\n background-position: center;\n }\n\n @include ondesktop {\n background-position: center;\n }\n\n &__content {\n display: flex;\n justify-content: space-between;\n box-sizing: border-box;\n flex-direction: column;\n height: 100vh;\n margin: 0;\n padding: 0 20px;\n\n @include ontablet {\n padding: 0 72px;\n }\n\n @include ondesktop {\n padding: 0 120px;\n }\n }\n\n &__title {\n text-align: center;\n text-wrap: nowrap;\n color: $main-text-color;\n font-size: 36px;\n line-height: 3px;\n font-weight: 700;\n letter-spacing: -1.5px;\n margin: 0;\n margin-bottom: 88px;\n padding: 0;\n\n @include ontablet {\n font-size: 64px;\n line-height: 64px;\n margin-bottom: 130px;\n }\n\n @include ondesktop {\n font-size: 80px;\n line-height: 80px;\n margin-bottom: 203px;\n }\n }\n\n &__top {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n margin: 0;\n padding: 0;\n padding-block: 24px;\n\n @include ontablet {\n padding-block: 36px;\n }\n\n @include ondesktop {\n padding-block: 36px;\n }\n\n &-menu {\n display: flex;\n gap: 24px;\n margin: 0;\n\n @include ontablet {\n gap: 32px;\n }\n\n @include ondesktop {\n gap: 32px;\n }\n }\n }\n}\n",".nav {\n &__list {\n display: flex;\n flex-direction: column;\n margin: 0;\n padding: 0;\n padding-block: 24px 40px;\n list-style-type: none;\n gap: 32px;\n }\n\n &__item {\n display: block;\n text-wrap: nowrap;\n text-align: left;\n text-transform: uppercase;\n }\n\n &__link {\n position: relative;\n font-size: 22px;\n font-weight: 600;\n line-height: 22px;\n letter-spacing: 2px;\n color: $menu-text-color;\n text-decoration: none;\n\n &::after {\n content: '';\n display: block;\n position: absolute;\n width: 100%;\n height: 1px;\n background-color: $main-bg-color;\n bottom: -8px;\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 @include ondesktop {\n font-weight: 700;\n }\n }\n}\n",".footer {\n position: sticky;\n z-index: -1;\n\n &__image {\n width: 100%;\n }\n}\n",".compare {\n @include pagegrid;\n\n padding: 92px 0;\n box-sizing: border-box;\n\n @include ontablet {\n padding: 132px 0 120px;\n }\n\n @include ondesktop {\n padding: 164px 0 144px;\n }\n\n &__bike {\n grid-column: 1 / -1;\n\n @include ontablet {\n grid-column: 1 / -1;\n }\n\n @include ondesktop {\n grid-column: span 4;\n }\n\n &-image {\n width: 100%;\n z-index: -1;\n\n @include hover(transform, scale(1.1));\n }\n\n &-title {\n text-wrap: wrap;\n font-size: 24px;\n font-weight: 700;\n line-height: 33.6px;\n text-align: left;\n }\n\n &-description {\n text-wrap: wrap;\n font-size: 16px;\n font-weight: 400;\n line-height: 22.4px;\n text-align: left;\n }\n\n &-price {\n font-size: 24px;\n font-weight: 700;\n line-height: 33.6px;\n text-align: left;\n }\n }\n}\n",".contacts {\n @include pagegrid;\n\n box-sizing: border-box;\n padding-top: 80px;\n column-gap: 24px;\n\n @include ontablet {\n padding-top: 120px;\n }\n\n @include ondesktop {\n padding-top: 180px;\n }\n\n &__form {\n grid-column: 1 / -1;\n\n @include ontablet {\n grid-column: span 3;\n }\n\n @include ondesktop {\n grid-column: 1 / 6;\n }\n }\n\n &__block {\n margin: 0;\n padding: 0;\n grid-column: 1 / -1;\n margin-top: 48px;\n\n @include ontablet {\n grid-column: span 3;\n }\n\n @include ondesktop {\n grid-column: 8 / -1;\n }\n\n &__title {\n padding: 0;\n font-size: 14px;\n font-weight: 400;\n line-height: 19.6px;\n text-align: left;\n\n &:nth-child(1) {\n margin-top: 0;\n }\n }\n\n &__description {\n font-size: 16px;\n font-weight: 500;\n line-height: 22.4px;\n text-align: left;\n text-decoration: none;\n color: $main-text-color;\n\n &:hover {\n color: $form-text-color;\n transition: 0.3s;\n }\n }\n }\n}\n",".details {\n @include pagegrid;\n\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n\n &__button {\n grid-column: 1 / -1;\n width: 278px;\n margin-top: 40px;\n\n @include ontablet {\n grid-column: 2 / -2;\n margin-top: 48px;\n width: 392px;\n }\n\n @include ondesktop {\n grid-column: 6 / -6;\n margin-top: 48px;\n width: 324px;\n }\n }\n\n &__item {\n grid-column: 1 / -1;\n margin-top: 40px;\n\n &-photos {\n @include pagegrid;\n }\n\n &-title {\n padding: 0;\n margin: 16px 0 8px;\n display: block;\n grid-column: 1 / -1;\n font-size: 24px;\n font-weight: 700;\n line-height: 33.6px;\n text-align: left;\n }\n\n &-description {\n padding: 0;\n margin: 0;\n display: block;\n grid-column: 1 / -1;\n font-size: 16px;\n font-weight: 400;\n line-height: 22.4px;\n }\n }\n}\n\n.first-item {\n margin-top: 48px;\n\n @include ontablet {\n margin-top: 64px;\n }\n}\n\n.first-detail {\n grid-column: span 1;\n\n @include ontablet {\n grid-column: span 4;\n }\n\n @include ondesktop {\n grid-column: span 8;\n }\n}\n\n.second-detail {\n grid-column: span 1;\n\n @include ontablet {\n grid-column: span 2;\n }\n\n @include ondesktop {\n grid-column: span 4;\n }\n}\n\n.photo {\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n width: 100%;\n height: 25vw;\n display: block;\n min-height: 130px;\n overflow: hidden;\n\n @include hover(transform, scale(1.05));\n\n @media (min-width: 1440px) {\n @include hover(transform, scale(1.02));\n }\n\n @media (min-width: 2000px) {\n @include hover(transform, scale(1.01));\n }\n}\n\n.first-photo {\n background-image: url(../images/details1.svg);\n}\n\n.second-photo {\n background-image: url(../images/details2.svg);\n}\n\n.third-photo {\n background-image: url(../images/details3.svg);\n}\n\n.fourth-photo {\n background-image: url(../images/details4.svg);\n}\n\n.fifth-photo {\n background-image: url(../images/details5.svg);\n}\n\n.sixth-photo {\n background-image: url(../images/details6.svg);\n}\n",".about {\n @include pagegrid;\n\n row-gap: 32px;\n\n &__title {\n padding: 0;\n margin: 0;\n font-weight: 500;\n letter-spacing: -1.5px;\n text-align: left;\n line-height: 32px;\n font-size: 32px;\n grid-column: 1 / -1;\n\n @include ontablet {\n line-height: 48px;\n font-size: 48px;\n grid-column: span 3;\n }\n\n @include ondesktop {\n line-height: 64px;\n font-size: 64px;\n grid-column: span 5;\n }\n }\n\n &__description {\n padding: 0;\n margin: 0;\n grid-column: 1 / -1;\n font-size: 23px;\n font-weight: 500;\n line-height: 32.2px;\n\n @include ontablet {\n grid-column: span 3;\n }\n\n @include ondesktop {\n grid-column: span 6;\n }\n }\n}\n","@import './mixines';\n@import './variables';\n\n.form {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n gap: 24px;\n margin-top: 48px;\n\n &__field {\n position: relative;\n background-color: #F8F8FA;\n font-family: Poppins, sans-serif;\n }\n\n &__input {\n width: 100%;\n box-sizing: border-box;\n display: block;\n height: 48px;\n gap: 0;\n padding: 14px 16px;\n border-radius: 40px;\n border: none;\n outline: none;\n\n &::placeholder {\n position: absolute;\n top: 14px;\n left: 16px;\n gap: 0;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n text-align: left;\n color: $form-text-color;\n }\n }\n\n &__textarea {\n box-sizing: border-box;\n width: 100%;\n height: 148px;\n padding: 14px 16px;\n gap: 10px;\n border-radius: 16px;\n resize: none;\n outline: none;\n border: none;\n\n &::placeholder {\n position: absolute;\n top: 14px;\n left: 16px;\n gap: 0;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n text-align: left;\n color: $form-text-color;\n }\n }\n\n &__button {\n width: 100%;\n margin-top: 16px;\n }\n}\n\ninput:-webkit-autofill,\ninput:-webkit-autofill:hover,\ninput:-webkit-autofill:focus,\ntextarea:-webkit-autofill,\ntextarea:-webkit-autofill:hover,\ntextarea:-webkit-autofill:focus,\nselect:-webkit-autofill,\nselect:-webkit-autofill:hover,\nselect:-webkit-autofill:focus {\n background-color: #F8F8FA !important;\n}\n",".menu {\n background-color: #c2c2c2;\n box-sizing: border-box;\n width: 100vw;\n height: 100vh;\n\n &__top {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-block: 24px;\n\n @include ontablet {\n padding-block: 36px;\n }\n\n @include ondesktop {\n padding-block: 36px;\n }\n }\n\n &__bottom {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n width: auto;\n gap: 16px;\n margin: 0;\n padding: 0;\n }\n\n &__phone {\n display: block;\n color: $menu-text-color;\n font-size: 16px;\n font-weight: 600;\n line-height: 27px;\n text-align: left;\n text-decoration: none;\n margin: 0;\n padding: 0;\n\n @include ondesktop {\n font-weight: 700;\n }\n\n &-call {\n width: fit-content;\n margin: 0;\n padding: 0;\n padding-bottom: 8px;\n display: block;\n color: $menu-text-color;\n text-decoration: none;\n font-size: 12px;\n font-weight: 600;\n line-height: 16px;\n letter-spacing: 2px;\n text-align: left;\n text-wrap: nowrap;\n border-bottom: 1px solid #1d1d1d;\n\n @include ondesktop {\n font-weight: 700;\n }\n }\n }\n}\n",".logo {\n display: block;\n width: 130px;\n height: 38px;\n background-size: contain;\n background-repeat: no-repeat;\n\n @include hover(transform, scale(1.1));\n\n @include ontablet {\n width: 187px;\n height: 56px;\n }\n\n @include ondesktop {\n width: 187px;\n height: 56px;\n }\n}\n\n.header__top-logo {\n background-image: url(../icons/logo.png);\n}\n\n.menu__logo {\n background-image: url(../icons/menu_logo.png);\n}\n","@import './icons';\n@import './header';\n@import './navigation';\n@import './footer';\n@import './variables';\n@import './mixines';\n@import './compare';\n@import './contacts';\n@import './details';\n@import './about';\n@import './form';\n@import './menu';\n@import './logo';\n\n.page {\n font-family: Poppins, sans-serif;\n color: $main-text-color;\n scroll-behavior: smooth;\n}\n\n.page__body {\n margin: 0;\n padding: 0;\n}\n\n.page__menu {\n overflow: auto;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n opacity: 0;\n pointer-events: none;\n\n &:target {\n transition: 0.3s;\n opacity: 1;\n pointer-events: all;\n }\n}\n\n.page:has(.page__menu:target) {\n overflow: hidden;\n}\n\n.container {\n @include contentpaddinginline;\n}\n\n.main {\n background-color: $main-bg-color;\n box-sizing: border-box;\n padding: 60px 0 120px;\n\n @include ontablet {\n padding: 120px 0 102px;\n }\n\n @include ondesktop {\n padding: 120px 0 164px;\n }\n}\n\n.section__title {\n padding: 0;\n margin: 0;\n font-weight: 500;\n letter-spacing: -1.5px;\n text-align: center;\n line-height: 32px;\n font-size: 32px;\n z-index: 1;\n grid-column: 1 / -1;\n\n @include ontablet {\n line-height: 48px;\n font-size: 48px;\n }\n\n @include ondesktop {\n line-height: 64px;\n font-size: 64px;\n }\n}\n\n.button {\n cursor: pointer;\n font-family: Poppins, sans-serif;\n padding: 0 48px;\n gap: 0;\n border-radius: 40px;\n display: block;\n box-sizing: border-box;\n text-align: center;\n font-size: 16px;\n font-weight: 700;\n line-height: 27px;\n height: 56px;\n color: $menu-text-color;\n background-color: #fff;\n border: none;\n transition: 0.3s;\n\n &:hover {\n box-shadow: 1px 4px 16px 0 rgba(232, 232, 240, 0.4);\n }\n\n &:active {\n box-shadow: 1px 4px 16px 0 rgba(232, 232, 240, 0.64);\n }\n}\n"],"names":[],"version":3,"file":"index.17cd25b6.css.map"} \ No newline at end of file diff --git a/index.cabb280d.js b/index.cabb280d.js new file mode 100644 index 0000000..e43077f --- /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 0000000..9d54ef7 --- /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 0000000..fcfa377 --- /dev/null +++ b/index.html @@ -0,0 +1,5 @@ +Bike New Version

Take the Streets

Move Free

Shift your ride, not gears. Find the fastest way to move in the city as the bike adapts intuitively to power the speed you need.

Compare Bikes

image

Sporty 4

The iconic frame brought to a new performance height as a sporty, active ride.

$ 2 590

image

Ride in town ST

An open frame for an upright riding position as the most comfortable ride in town.

$ 2 590

image

Agile ride 3

The lightweight frame that has earned its street tread as a sleek, agile ride.

$ 2 090

The Details

Auto Unlock

The app senses when you're nearby to unlock automatically. GPS tracking so you know where your bike is and can track it anytime.

Range & Integrated lights

The removable battery has up to 70km battery autonomy and weighs only 2.4 kg. Lights integrated into the frame give you always-on visibility day and night.

Hydraulic disc brakes & Lightweight

Brakes with total stopping power the second you make contact. The removable battery has up to 70km battery autonomy and weighs only 2.4 kg. Lights integrated into the frame give you always-on visibility day and night.

Contact us

Phone

+1 234 5555-55-55 hello@miami.com

Adress

400 first ave.
suite 700
Minneapolis, MN 55401
\ No newline at end of file diff --git a/logo.0aa4717d.png b/logo.0aa4717d.png new file mode 100644 index 0000000..194e40e Binary files /dev/null and b/logo.0aa4717d.png differ diff --git a/menu_logo.05b950b2.png b/menu_logo.05b950b2.png new file mode 100644 index 0000000..96718f4 Binary files /dev/null and b/menu_logo.05b950b2.png differ