diff --git a/Agile.610a8da4.png b/Agile.610a8da4.png new file mode 100644 index 0000000000..ec7dd9e80d Binary files /dev/null and b/Agile.610a8da4.png differ diff --git a/Cover_photo.bced6dda.png b/Cover_photo.bced6dda.png new file mode 100644 index 0000000000..70793ecbc1 Binary files /dev/null and b/Cover_photo.bced6dda.png differ diff --git a/Icon-Burger-menu-hover.876b3e4b.png b/Icon-Burger-menu-hover.876b3e4b.png new file mode 100644 index 0000000000..295213d32a Binary files /dev/null and b/Icon-Burger-menu-hover.876b3e4b.png differ diff --git a/Icon-Burger-menu2-x.edc984a1.png b/Icon-Burger-menu2-x.edc984a1.png new file mode 100644 index 0000000000..b132f7c1d2 Binary files /dev/null and b/Icon-Burger-menu2-x.edc984a1.png differ diff --git a/Icon-Close2-x.e5be17d0.png b/Icon-Close2-x.e5be17d0.png new file mode 100644 index 0000000000..c6445ea0a9 Binary files /dev/null and b/Icon-Close2-x.e5be17d0.png differ diff --git a/Icon-Phone-call2-x.46b71101.png b/Icon-Phone-call2-x.46b71101.png new file mode 100644 index 0000000000..ee0ec82027 Binary files /dev/null and b/Icon-Phone-call2-x.46b71101.png differ diff --git a/ST.25c026c6.png b/ST.25c026c6.png new file mode 100644 index 0000000000..357adc7776 Binary files /dev/null and b/ST.25c026c6.png differ diff --git a/bike-mob2-x.f03e1f46.png b/bike-mob2-x.f03e1f46.png new file mode 100644 index 0000000000..ab4065ba10 Binary files /dev/null and b/bike-mob2-x.f03e1f46.png differ diff --git a/brakes-square.ac4ce94a.png b/brakes-square.ac4ce94a.png new file mode 100644 index 0000000000..b21f692904 Binary files /dev/null and b/brakes-square.ac4ce94a.png differ diff --git a/brakes-wide.06ead1f3.png b/brakes-wide.06ead1f3.png new file mode 100644 index 0000000000..2a77edbfc5 Binary files /dev/null and b/brakes-wide.06ead1f3.png differ diff --git a/favicon.024e86c7.png b/favicon.024e86c7.png new file mode 100644 index 0000000000..bf58d9088f Binary files /dev/null and b/favicon.024e86c7.png differ diff --git a/footer-bike.341e6a76.png b/footer-bike.341e6a76.png new file mode 100644 index 0000000000..12c80ddeab Binary files /dev/null and b/footer-bike.341e6a76.png differ diff --git a/footer-mob1.3566de79.png b/footer-mob1.3566de79.png new file mode 100644 index 0000000000..4e04f50e7d Binary files /dev/null and b/footer-mob1.3566de79.png differ diff --git a/footer-tablet.106e0293.png b/footer-tablet.106e0293.png new file mode 100644 index 0000000000..7f0877e5f4 Binary files /dev/null and b/footer-tablet.106e0293.png differ diff --git a/header-logo2-x.60590888.png b/header-logo2-x.60590888.png new file mode 100644 index 0000000000..c58e5e6fa6 Binary files /dev/null and b/header-logo2-x.60590888.png differ diff --git a/index.9da477d4.css b/index.9da477d4.css new file mode 100644 index 0000000000..0b7edb4ade --- /dev/null +++ b/index.9da477d4.css @@ -0,0 +1,2 @@ +html{-webkit-text-size-adjust:100%;line-height:1.15}a{background-color:transparent;text-decoration:none}body{margin:0}main{display:block}p{margin:0;padding:0}h1{margin:.67em 0;font-size:2em}h2{margin:0}h3,h4{margin:0;padding:0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace;font-size:1em}abbr[title]{border-bottom:none;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:100%;line-height:1.15}button,input{overflow:visible}button,select{text-transform:none}button::-moz-focus-inner{border-style:none;padding:0}[type=button]::-moz-focus-inner{border-style:none;padding:0}[type=reset]::-moz-focus-inner{border-style:none;padding:0}[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring{outline:1px dotted}[type=button]:-moz-focusring{outline:1px dotted}[type=reset]:-moz-focusring{outline:1px dotted}[type=submit]:-moz-focusring{outline:1px dotted}fieldset{padding:.35em .75em .63em}legend{box-sizing:border-box;color:inherit;white-space:normal;max-width:100%;padding:0;display:table}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox]{box-sizing:border-box;padding:0}[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button{height:auto}[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template,[hidden]{display:none} +/*# sourceMappingURL=index.9da477d4.css.map */ diff --git a/index.9da477d4.css.map b/index.9da477d4.css.map new file mode 100644 index 0000000000..4e2f4fe866 --- /dev/null +++ b/index.9da477d4.css.map @@ -0,0 +1 @@ +{"mappings":"ACCA,oDAKA,oDAKA,cAIA,mBAIA,qBAKA,gCAKA,YAIA,yBAUA,oDAMA,wCAKA,yGAMA,4BAKA,kDAOA,oBAIA,8EAQA,kBAIA,cAIA,sBAIA,mGAWA,8BAKA,kCAKA,qDAAA,4DAAA,2DAAA,4DAQA,yCAAA,gDAAA,+CAAA,gDAOA,mCAIA,qGASA,iCAIA,uBAIA,gDAAA,6CAMA,qDAAA,qDAKA,kCAIA,iEAIA,oEAKA,sBAIA,0BAIA","sources":["index.9da477d4.css","src/styles/normalize.scss"],"sourcesContent":["html {\n -webkit-text-size-adjust: 100%;\n line-height: 1.15;\n}\n\na {\n background-color: rgba(0, 0, 0, 0);\n text-decoration: none;\n}\n\nbody {\n margin: 0;\n}\n\nmain {\n display: block;\n}\n\np {\n margin: 0;\n padding: 0;\n}\n\nh1 {\n margin: .67em 0;\n font-size: 2em;\n}\n\nh2 {\n margin: 0;\n}\n\nh3, h4 {\n margin: 0;\n padding: 0;\n}\n\nhr {\n box-sizing: content-box;\n height: 0;\n overflow: visible;\n}\n\npre {\n font-family: monospace;\n font-size: 1em;\n}\n\nabbr[title] {\n border-bottom: none;\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n}\n\nb, strong {\n font-weight: bolder;\n}\n\ncode, kbd, samp {\n font-family: monospace;\n font-size: 1em;\n}\n\nsmall {\n font-size: 80%;\n}\n\nsub, sup {\n vertical-align: baseline;\n font-size: 75%;\n line-height: 0;\n position: relative;\n}\n\nsub {\n bottom: -.25em;\n}\n\nsup {\n top: -.5em;\n}\n\nimg {\n border-style: none;\n}\n\nbutton, input, optgroup, select, textarea {\n margin: 0;\n font-family: inherit;\n font-size: 100%;\n line-height: 1.15;\n}\n\nbutton, input {\n overflow: visible;\n}\n\nbutton, select {\n text-transform: none;\n}\n\nbutton::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n\n[type=\"button\"]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n\n[type=\"reset\"]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n\n[type=\"submit\"]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n\nbutton:-moz-focusring {\n outline: 1px dotted;\n}\n\n[type=\"button\"]:-moz-focusring {\n outline: 1px dotted;\n}\n\n[type=\"reset\"]:-moz-focusring {\n outline: 1px dotted;\n}\n\n[type=\"submit\"]:-moz-focusring {\n outline: 1px dotted;\n}\n\nfieldset {\n padding: .35em .75em .63em;\n}\n\nlegend {\n box-sizing: border-box;\n color: inherit;\n white-space: normal;\n max-width: 100%;\n padding: 0;\n display: table;\n}\n\nprogress {\n vertical-align: baseline;\n}\n\ntextarea {\n overflow: auto;\n}\n\n[type=\"checkbox\"] {\n box-sizing: border-box;\n padding: 0;\n}\n\n[type=\"radio\"] {\n box-sizing: border-box;\n padding: 0;\n}\n\n[type=\"number\"]::-webkit-inner-spin-button {\n height: auto;\n}\n\n[type=\"number\"]::-webkit-outer-spin-button {\n height: auto;\n}\n\n[type=\"search\"] {\n outline-offset: -2px;\n}\n\n[type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n::-webkit-file-upload-button {\n -webkit-appearance: button;\n font: inherit;\n}\n\ndetails {\n display: block;\n}\n\nsummary {\n display: list-item;\n}\n\ntemplate, [hidden] {\n display: none;\n}\n\n/*# sourceMappingURL=index.9da477d4.css.map */\n","\nhtml {\n line-height: 1.15;\n -webkit-text-size-adjust: 100%;\n}\n\na {\n text-decoration: none;\n background-color: transparent;\n}\n\nbody {\n margin: 0;\n}\n\nmain {\n display: block;\n}\n\np {\n margin: 0;\n padding: 0;\n}\n\nh1 {\n font-size: 2em;\n margin: 0.67em 0;\n}\n\nh2 {\n margin: 0;\n}\n\nh3 {\n padding: 0;\n margin: 0;\n}\n\nh4 {\n padding: 0;\n margin: 0;\n}\n\nhr {\n box-sizing: content-box;\n height: 0;\n overflow: visible;\n}\n\npre {\n font-family: monospace;\n font-size: 1em;\n}\n\nabbr[title] {\n border-bottom: none;\n text-decoration: underline;\n text-decoration: underline dotted;\n}\n\nb,\nstrong {\n font-weight: bolder;\n}\n\ncode,\nkbd,\nsamp {\n font-family: monospace;\n font-size: 1em;\n}\n\nsmall {\n font-size: 80%;\n}\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\nimg {\n border-style: none;\n}\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit;\n font-size: 100%;\n line-height: 1.15;\n margin: 0;\n}\n\nbutton,\ninput {\n overflow: visible;\n}\n\nbutton,\nselect {\n text-transform: none;\n}\n\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n\nbutton:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring {\n outline: 1px dotted;\n}\n\nfieldset {\n padding: 0.35em 0.75em 0.63em;\n}\n\nlegend {\n box-sizing: border-box;\n color: inherit;\n display: table;\n max-width: 100%;\n padding: 0;\n white-space: normal;\n}\n\nprogress {\n vertical-align: baseline;\n}\n\ntextarea {\n overflow: auto;\n}\n\n[type=\"checkbox\"],\n[type=\"radio\"] {\n box-sizing: border-box;\n padding: 0;\n}\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n height: auto;\n}\n\n[type=\"search\"] {\n outline-offset: -2px;\n}\n\n[type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n::-webkit-file-upload-button {\n -webkit-appearance: button;\n font: inherit;\n}\n\ndetails {\n display: block;\n}\n\nsummary {\n display: list-item;\n}\n\ntemplate {\n display: none;\n}\n\n[hidden] {\n display: none;\n}\n"],"names":[],"version":3,"file":"index.9da477d4.css.map"} \ No newline at end of file diff --git a/index.b3b5041b.js b/index.b3b5041b.js new file mode 100644 index 0000000000..2f4ca57791 --- /dev/null +++ b/index.b3b5041b.js @@ -0,0 +1,3 @@ +//# sourceMappingURL=index.b3b5041b.js.map + +//# sourceMappingURL=index.b3b5041b.js.map diff --git a/index.b3b5041b.js.map b/index.b3b5041b.js.map new file mode 100644 index 0000000000..d2251275b4 --- /dev/null +++ b/index.b3b5041b.js.map @@ -0,0 +1 @@ +{"mappings":"A,2D","sources":["","src/scripts/main.js"],"sourcesContent":["\"use strict\";\n\n//# sourceMappingURL=index.b3b5041b.js.map\n","'use strict';\n"],"names":[],"version":3,"file":"index.b3b5041b.js.map"} \ No newline at end of file diff --git a/index.bf475f71.css b/index.bf475f71.css new file mode 100644 index 0000000000..fd7ace3912 --- /dev/null +++ b/index.bf475f71.css @@ -0,0 +1,2 @@ +.container{padding-left:20px;padding-right:20px}@media (min-width:576px){.container{padding-left:72px;padding-right:72px}}@media (min-width:1024px){.container{max-width:1020px;margin-left:auto;margin-right:auto;padding-left:120px;padding-right:120px}}.page{color:#fff;scroll-behavior:smooth;font-family:Poppins,sans-serif;font-size:16px;font-style:normal;line-height:140%}.page:has(.page__menu:target){overflow:hidden}.page__menu{opacity:0;pointer-events:none;transition:all .3s;position:fixed;top:0;left:0;right:0;transform:translate(-100%)}.page__menu:target{opacity:1;pointer-events:all;transform:translate(0)}.header{background-image:url(bike-mob2-x.f03e1f46.png);background-position:100%;background-repeat:no-repeat;background-size:cover}@media (min-width:1024px){.header{background-image:url(Cover_photo.bced6dda.png);background-position:50%}}.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__top{-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}.header__bottom{-ms-flex-item-align:center;align-self:center;margin-bottom:88px}@media (min-width:576px){.header__bottom{margin-bottom:130px}}@media (min-width:1024px){.header__bottom{margin-bottom:203px}}.header__title{letter-spacing:-1.5px;margin:0;font-size:36px;font-weight:700;line-height:100%}@media (min-width:576px){.header__title{font-size:64px}}@media (min-width:1024px){.header__title{font-size:80px}}.header__phone-number{display:none}@media (min-width:1024px){.icon--phone:hover~.header__phone-number{display:inline}}.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:36px;padding-bottom:36px}}.top-bar__logo-link{font-size:0;display:-ms-flexbox;display:flex}.top-bar__icons{-ms-flex-direction:row-reverse;flex-direction:row-reverse;gap:24px;display:-ms-flexbox;display:flex}@media (min-width:576px){.top-bar__icons{gap:32px}}.top-bar__logo{height:38px;transition:transform .3s}.top-bar__logo:hover{transform:scale(1.2)}@media (min-width:576px){.top-bar__logo--white{height:56px}}@media (min-width:1024px){.top-bar__logo--black{height:56px}}.menu{box-sizing:border-box;background-color:#c2c2c2;height:100vh;overflow:auto}.menu__logo-link{font-size:0;text-decoration:none}.menu__nav{margin-bottom:40px}.menu__phone-number{color:#1d1d1d;text-transform:uppercase;margin-bottom:16px;font-size:16px;font-weight:600;line-height:27px;text-decoration:none;display:block}.menu__test-ride{color:#1d1d1d;letter-spacing:2px;text-transform:uppercase;width:-moz-fit-content;border-bottom:1px solid #000;width:fit-content;padding-bottom:7px;font-size:12px;font-weight:600;line-height:16px;text-decoration:none;display:block}.menu__top{z-index:1;margin-bottom:24px;position:sticky;top:0}.icon{background-repeat:no-repeat;background-size:cover;width:24px;height:24px;transition:transform .3s;display:block}.icon:hover{transform:scale(1.2)}@media (min-width:576px){.icon{width:32px;height:32px}}.icon--phone{background-image:url(Icon-Phone-call2-x.46b71101.png);position:relative}.icon--phone:before{opacity:0;content:"+1 234 5555-55-55";color:#fff;letter-spacing:2px;width:150px;font-size:12px;font-weight:700;line-height:12px;transition:all .3s;display:none;position:absolute;top:12px;right:52px}@media (min-width:1024px){.icon--phone:before{display:inline}}.icon--phone:hover:before{opacity:1}.icon--menu{background-image:url(Icon-Burger-menu2-x.edc984a1.png)}.icon--menu:hover{background-image:url(Icon-Burger-menu-hover.876b3e4b.png)}.icon--close{background-image:url(Icon-Close2-x.e5be17d0.png)}.main{background-color:#1d1d1d}.footer{z-index:-1;background-image:url(footer-mob1.3566de79.png);background-position:50%;background-repeat:no-repeat;background-size:cover;height:100vh;position:sticky;bottom:0}@media (min-width:576px){.footer{background-image:url(footer-tablet.106e0293.png)}}@media (min-width:1024px){.footer{background-image:url(footer-bike.341e6a76.png)}}.nav__list{-ms-flex-direction:column;flex-direction:column;gap:32px;margin:0;padding:0;list-style:none;display:-ms-flexbox;display:flex}.nav__link{color:#1d1d1d;letter-spacing:2px;text-transform:uppercase;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)}.section-title{text-align:center;letter-spacing:-1.5px;margin-bottom:48px;font-size:32px;font-weight:500;line-height:32px}@media (min-width:576px){.section-title{font-size:48px;line-height:48px}}@media (min-width:1024px){.section-title{font-size:64px;line-height:64px}}.section-title--align--left{text-align:left}.section-title--mob--margin-bottom{margin-bottom:32px}@media (min-width:576px){.section-title--mob--margin-bottom{margin-bottom:0}}.about-us{--column-count:2;grid-template-columns:repeat(var(--column-count),1fr);column-gap:20px;display:grid}.about-us--padding-top{padding-top:60px}@media (min-width:576px){.about-us--padding-top{padding-top:120px}.about-us{--column-count:6;column-gap:24px}}@media (min-width:1024px){.about-us{--column-count:12}}.about-us__title{grid-column:span 2}.about-us__text{grid-column:span 2;margin:0;padding:0;font-size:23px;line-height:32.2px}@media (min-width:576px){.about-us__title{grid-column:1/span 3}.about-us__text{grid-column:4/span 3}}@media (min-width:1024px){.about-us__title{grid-column:1/span 5}.about-us__text{grid-column:6/span 6}}.product__img{width:100%;transition:transform .3s}.product__img:hover{transform:scale(1.05)}.product__title{margin-bottom:8px;font-size:24px;font-weight:700;line-height:33.6px}.product__description{font-size:16px;font-weight:400;line-height:22.4px}.product__price{font-size:24px;font-weight:700;line-height:33.6px}.compare-bikes--margin-top{margin-top:92px}.compare-bikes__description{margin-bottom:16px}.compare-bikes__products{--column-count:2;grid-template-columns:repeat(var(--column-count),1fr);column-gap:20px;display:grid}@media (min-width:576px){.compare-bikes__products{--column-count:6;column-gap:24px}}@media (min-width:1024px){.compare-bikes__products{--column-count:12}}.compare-bikes__product{grid-column:1/-1}@media (min-width:576px){.compare-bikes__product{grid-column:2/-2}}@media (min-width:1024px){.compare-bikes__product{grid-column:span 4}}.details__wrapper{row-gap:40px;display:grid}@media (min-width:576px){.details__wrapper{row-gap:48px}}.details--margin--top{margin-top:92px}@media (min-width:576px){.details--margin--top{margin-top:144px}}.details__title{margin-bottom:48px}.details__button{grid-column:1/-1;text-decoration:none}@media (min-width:576px){.details__button{grid-column:2/6}}@media (min-width:1024px){.details__button{grid-column:5/9}}.detail__photos{--column-count:2;grid-template-columns:repeat(var(--column-count),1fr);column-gap:20px;margin-bottom:16px;display:grid}@media (min-width:576px){.detail__photos{--column-count:6;column-gap:24px}}@media (min-width:1024px){.detail__photos{--column-count:12}}.detail__title{margin-bottom:8px}.detail__link{grid-column:span 1;position:relative}.detail__link--square{height:0;padding-bottom:100%}@media (min-width:576px){.detail__link--wide{grid-column:span 4}.detail__link--square{grid-column:span 2}}@media (min-width:1024px){.detail__link--wide{grid-column:span 8}.detail__link--square{grid-column:span 4}}.detail__photo{object-fit:cover;width:100%;height:100%;transition:transform .3s;position:absolute}.detail__photo:hover{transform:scale(1.05)}.detail__photo--wide{grid-column:1}.button-wrapper{--column-count:2;grid-template-columns:repeat(var(--column-count),1fr);column-gap:20px;display:grid}@media (min-width:576px){.button-wrapper{--column-count:6;column-gap:24px}}@media (min-width:1024px){.button-wrapper{--column-count:12}}.button{text-align:center;color:#1d1d1d;background-color:#fff;border-radius:40px;padding:14.5px 0;font-size:16px;font-weight:700;line-height:27px}.button:hover{box-shadow:1px 4px 16px rgba(232,232,240,.333)}.button:active{box-shadow:1px 4px 16px rgba(232,232,240,.467)}.inputs-wrapper{--column-count:2;grid-template-columns:repeat(var(--column-count),1fr);gap:16px 20px;display:grid}@media (min-width:576px){.inputs-wrapper{--column-count:6;column-gap:24px}}@media (min-width:1024px){.inputs-wrapper{--column-count:12}}.form{grid-column:1/-1;margin-top:48px}@media (min-width:576px){.form{grid-column:span 3}}@media (min-width:1024px){.form{grid-column:span 5}}.form__input{border:0 solid #000;border-radius:30px;grid-column:1/-1;height:48px;padding-left:16px}.form__input--message{resize:none;border-radius:16px;height:128px;padding:14px 16px}.form__input--email{font-size:14px}.form__input:focus{color:#292929;border:1px #000;outline:none;font-size:14px;font-weight:400;line-height:20px}.form__input:valid{font-size:14px;line-height:20px}.form__input::placeholder{color:#7e7e83;font-size:14px;font-weight:400;line-height:20px}.form__input::placeholder{color:#7e7e83;font-size:14px;font-weight:400;line-height:20px}.form__button{border:0 solid #000;grid-column:1/-1;margin-top:32px}.form__button:hover{cursor:pointer}input:-webkit-autofill{-webkit-box-shadow:inset 0 0 0 30px #fff!important}input:-webkit-autofill:hover{-webkit-box-shadow:inset 0 0 0 30px #fff!important}input:-webkit-autofill:focus{-webkit-box-shadow:inset 0 0 0 30px #fff!important}input:-webkit-autofill:active{-webkit-box-shadow:inset 0 0 0 30px #fff!important}.contacts{margin-top:80px;padding-bottom:120px}.contacts-content{--column-count:2;grid-template-columns:repeat(var(--column-count),1fr);column-gap:20px;display:grid}@media (min-width:576px){.contacts-content{--column-count:6;column-gap:24px}}@media (min-width:1024px){.contacts-content{--column-count:12}}.contact-ways{grid-column:span 2;row-gap:24px;margin-top:50px;display:grid}@media (min-width:576px){.contact-ways{grid-column:span 3;-ms-flex-item-align:start;align-self:start}}@media (min-width:1024px){.contact-ways{grid-column:8/11}}.contact-ways__title{margin-bottom:9px;font-size:14px;font-weight:400;line-height:19.6px}.contact-ways__text{color:#fff;font-size:16px;font-weight:500;line-height:22.4px}.contact-ways__text:hover{color:#aaa} +/*# sourceMappingURL=index.bf475f71.css.map */ diff --git a/index.bf475f71.css.map b/index.bf475f71.css.map new file mode 100644 index 0000000000..832a690049 --- /dev/null +++ b/index.bf475f71.css.map @@ -0,0 +1 @@ +{"mappings":"AE0BA,gDAzBE,yBAyBF,iDAnBE,0BAmBF,uGC1BA,yHAQE,8CAIA,4HAUE,uECtBJ,mJFOE,0BEPF,iGAYE,mKAOA,2IAMA,gFFxBA,yBEwBA,qCFlBA,0BEkBA,qCAaA,8FFrCA,yBEqCA,+BF/BA,0BE+BA,+BAgBA,mCF/CA,0BEuDA,yDC9DF,4KHCE,yBGDF,+CAUE,iEAKA,oHHdA,yBGcA,0BAUA,oDHOA,0CA/BA,yBG6BE,mCHvBF,0BG6BE,mCCpCJ,gFAME,kDAKA,8BAIA,iKAWA,uPAeA,8DCzCF,sHLgCE,iCA/BA,yBKDF,8BAcE,sGAKE,0NLZF,0BKYE,oCAuBA,oCAKF,oFAGE,6FAKF,+EEvDF,+BCCA,mMRAE,yBQAF,2ERME,0BQNF,yECAE,wIASA,4JAUE,sLAaA,0CCjCJ,0HVCE,yBUDF,gDVOE,0BUPF,gDAkBE,4CAIA,sDVrBA,yBUqBA,oDCtBF,8GACE,wCXAA,yBWAA,yCADF,4CXOE,0BWPF,6BAWE,oCAIA,wFXdA,yBWuBE,sCAIA,sCXrBF,0BW4BE,sCAIA,sCCtCJ,kDZ+BE,0CYzBF,oFAOA,wEAMA,kECnBE,2CAIA,+CAIA,6HbRA,yBaQA,2DbFA,0BaEA,4CAIA,yCbZA,yBaYA,0CbNA,0BaMA,4CCZA,4CdAA,yBcAA,gCAQA,sCdRA,yBcQA,wCAYA,mCAIA,uDdxBA,yBcwBA,kCdlBA,0BckBA,kCAeA,uIdvCA,yBcuCA,kDdjCA,0BciCA,mCAMA,iCAIA,mDAIE,mDdrDF,yBc2DI,uCAIA,0CdzDJ,0Bc+DI,uCAIA,0CAMJ,kGdhDA,2CcwDE,mCCxFJ,oHfCE,yBeDF,kDfOE,0BePF,mCAIA,kJAUI,6DAIA,8DClBJ,kHhBCE,yBgBDF,kDhBOE,0BgBPF,mCAMA,uChBLE,yBgBKF,0BhBCE,0BgBDF,0BAYE,mGAOE,oFAOA,mCAIA,8GASA,mDAKA,wFAAA,wFAQF,mEAKE,mCAMJ,0EAAA,gFAAA,gFAAA,iFCrEA,+CAKA,sHjBJE,yBiBIF,oDjBEE,0BiBFF,qCAIA,2EjBRE,yBiBQF,6EjBFE,0BiBEF,gCAgBE,yFAOA,iFAME","sources":["index.bf475f71.css","src/styles/main.scss","src/styles/utiles/mixin.scss","src/styles/blocks/page.scss","src/styles/blocks/header.scss","src/styles/blocks/top-bar.scss","src/styles/blocks/menu.scss","src/styles/blocks/icon.scss","src/styles/utiles/variables.scss","src/styles/blocks/main-block.scss","src/styles/blocks/footer.scss","src/styles/blocks/nav.scss","src/styles/blocks/section-title.scss","src/styles/blocks/about-us.scss","src/styles/blocks/product.scss","src/styles/blocks/compare-bikes.scss","src/styles/blocks/details.scss","src/styles/blocks/button.scss","src/styles/blocks/form.scss","src/styles/blocks/contacts.scss"],"sourcesContent":[".container {\n padding-left: 20px;\n padding-right: 20px;\n}\n\n@media (min-width: 576px) {\n .container {\n padding-left: 72px;\n padding-right: 72px;\n }\n}\n\n@media (min-width: 1024px) {\n .container {\n max-width: 1020px;\n margin-left: auto;\n margin-right: auto;\n padding-left: 120px;\n padding-right: 120px;\n }\n}\n\n.page {\n color: #fff;\n scroll-behavior: smooth;\n font-family: Poppins, sans-serif;\n font-size: 16px;\n font-style: normal;\n line-height: 140%;\n}\n\n.page:has(.page__menu:target) {\n overflow: hidden;\n}\n\n.page__menu {\n opacity: 0;\n pointer-events: none;\n transition: all .3s;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n transform: translateX(-100%);\n}\n\n.page__menu:target {\n opacity: 1;\n pointer-events: all;\n transform: translateX(0);\n}\n\n.header {\n background-image: url(\"bike-mob2-x.f03e1f46.png\");\n background-position: 100%;\n background-repeat: no-repeat;\n background-size: cover;\n}\n\n@media (min-width: 1024px) {\n .header {\n background-image: url(\"Cover_photo.bced6dda.png\");\n background-position: center;\n }\n}\n\n.header__content {\n -ms-flex-direction: column;\n flex-direction: column;\n -ms-flex-pack: justify;\n justify-content: space-between;\n height: 100vh;\n display: -ms-flexbox;\n display: flex;\n}\n\n.header__top {\n -ms-flex-pack: justify;\n justify-content: space-between;\n -ms-flex-align: center;\n align-items: center;\n display: -ms-flexbox;\n display: flex;\n}\n\n.header__bottom {\n -ms-flex-item-align: center;\n align-self: center;\n margin-bottom: 88px;\n}\n\n@media (min-width: 576px) {\n .header__bottom {\n margin-bottom: 130px;\n }\n}\n\n@media (min-width: 1024px) {\n .header__bottom {\n margin-bottom: 203px;\n }\n}\n\n.header__title {\n letter-spacing: -1.5px;\n margin: 0;\n font-size: 36px;\n font-weight: 700;\n line-height: 100%;\n}\n\n@media (min-width: 576px) {\n .header__title {\n font-size: 64px;\n }\n}\n\n@media (min-width: 1024px) {\n .header__title {\n font-size: 80px;\n }\n}\n\n.header__phone-number {\n display: none;\n}\n\n@media (min-width: 1024px) {\n .icon--phone:hover ~ .header__phone-number {\n display: inline;\n }\n}\n\n.top-bar {\n -ms-flex-pack: justify;\n justify-content: space-between;\n -ms-flex-align: center;\n align-items: center;\n padding-top: 24px;\n padding-bottom: 24px;\n display: -ms-flexbox;\n display: flex;\n}\n\n@media (min-width: 576px) {\n .top-bar {\n padding-top: 36px;\n padding-bottom: 36px;\n }\n}\n\n.top-bar__logo-link {\n font-size: 0;\n display: -ms-flexbox;\n display: flex;\n}\n\n.top-bar__icons {\n -ms-flex-direction: row-reverse;\n flex-direction: row-reverse;\n gap: 24px;\n display: -ms-flexbox;\n display: flex;\n}\n\n@media (min-width: 576px) {\n .top-bar__icons {\n gap: 32px;\n }\n}\n\n.top-bar__logo {\n height: 38px;\n transition: transform .3s;\n}\n\n.top-bar__logo:hover {\n transform: scale(1.2);\n}\n\n@media (min-width: 576px) {\n .top-bar__logo--white {\n height: 56px;\n }\n}\n\n@media (min-width: 1024px) {\n .top-bar__logo--black {\n height: 56px;\n }\n}\n\n.menu {\n box-sizing: border-box;\n background-color: #c2c2c2;\n height: 100vh;\n overflow: auto;\n}\n\n.menu__logo-link {\n font-size: 0;\n text-decoration: none;\n}\n\n.menu__nav {\n margin-bottom: 40px;\n}\n\n.menu__phone-number {\n color: #1d1d1d;\n text-transform: uppercase;\n margin-bottom: 16px;\n font-size: 16px;\n font-weight: 600;\n line-height: 27px;\n text-decoration: none;\n display: block;\n}\n\n.menu__test-ride {\n color: #1d1d1d;\n letter-spacing: 2px;\n text-transform: uppercase;\n border-bottom: 1px solid #000;\n width: -moz-fit-content;\n width: fit-content;\n padding-bottom: 7px;\n font-size: 12px;\n font-weight: 600;\n line-height: 16px;\n text-decoration: none;\n display: block;\n}\n\n.menu__top {\n z-index: 1;\n margin-bottom: 24px;\n position: sticky;\n top: 0;\n}\n\n.icon {\n background-repeat: no-repeat;\n background-size: cover;\n width: 24px;\n height: 24px;\n transition: transform .3s;\n display: block;\n}\n\n.icon:hover {\n transform: scale(1.2);\n}\n\n@media (min-width: 576px) {\n .icon {\n width: 32px;\n height: 32px;\n }\n}\n\n.icon--phone {\n background-image: url(\"Icon-Phone-call2-x.46b71101.png\");\n position: relative;\n}\n\n.icon--phone:before {\n opacity: 0;\n content: \"+1 234 5555-55-55\";\n color: #fff;\n letter-spacing: 2px;\n width: 150px;\n font-size: 12px;\n font-weight: 700;\n line-height: 12px;\n transition: all .3s;\n display: none;\n position: absolute;\n top: 12px;\n right: 52px;\n}\n\n@media (min-width: 1024px) {\n .icon--phone:before {\n display: inline;\n }\n}\n\n.icon--phone:hover:before {\n opacity: 1;\n}\n\n.icon--menu {\n background-image: url(\"Icon-Burger-menu2-x.edc984a1.png\");\n}\n\n.icon--menu:hover {\n background-image: url(\"Icon-Burger-menu-hover.876b3e4b.png\");\n}\n\n.icon--close {\n background-image: url(\"Icon-Close2-x.e5be17d0.png\");\n}\n\n.main {\n background-color: #1d1d1d;\n}\n\n.footer {\n z-index: -1;\n background-image: url(\"footer-mob1.3566de79.png\");\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n height: 100vh;\n position: sticky;\n bottom: 0;\n}\n\n@media (min-width: 576px) {\n .footer {\n background-image: url(\"footer-tablet.106e0293.png\");\n }\n}\n\n@media (min-width: 1024px) {\n .footer {\n background-image: url(\"footer-bike.341e6a76.png\");\n }\n}\n\n.nav__list {\n -ms-flex-direction: column;\n flex-direction: column;\n gap: 32px;\n margin: 0;\n padding: 0;\n list-style: none;\n display: -ms-flexbox;\n display: flex;\n}\n\n.nav__link {\n color: #1d1d1d;\n letter-spacing: 2px;\n text-transform: uppercase;\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.section-title {\n text-align: center;\n letter-spacing: -1.5px;\n margin-bottom: 48px;\n font-size: 32px;\n font-weight: 500;\n line-height: 32px;\n}\n\n@media (min-width: 576px) {\n .section-title {\n font-size: 48px;\n line-height: 48px;\n }\n}\n\n@media (min-width: 1024px) {\n .section-title {\n font-size: 64px;\n line-height: 64px;\n }\n}\n\n.section-title--align--left {\n text-align: left;\n}\n\n.section-title--mob--margin-bottom {\n margin-bottom: 32px;\n}\n\n@media (min-width: 576px) {\n .section-title--mob--margin-bottom {\n margin-bottom: 0;\n }\n}\n\n.about-us {\n --column-count: 2;\n grid-template-columns: repeat(var(--column-count), 1fr);\n column-gap: 20px;\n display: grid;\n}\n\n.about-us--padding-top {\n padding-top: 60px;\n}\n\n@media (min-width: 576px) {\n .about-us--padding-top {\n padding-top: 120px;\n }\n\n .about-us {\n --column-count: 6;\n column-gap: 24px;\n }\n}\n\n@media (min-width: 1024px) {\n .about-us {\n --column-count: 12;\n }\n}\n\n.about-us__title {\n grid-column: span 2;\n}\n\n.about-us__text {\n grid-column: span 2;\n margin: 0;\n padding: 0;\n font-size: 23px;\n line-height: 32.2px;\n}\n\n@media (min-width: 576px) {\n .about-us__title {\n grid-column: 1 / span 3;\n }\n\n .about-us__text {\n grid-column: 4 / span 3;\n }\n}\n\n@media (min-width: 1024px) {\n .about-us__title {\n grid-column: 1 / span 5;\n }\n\n .about-us__text {\n grid-column: 6 / span 6;\n }\n}\n\n.product__img {\n width: 100%;\n transition: transform .3s;\n}\n\n.product__img:hover {\n transform: scale(1.05);\n}\n\n.product__title {\n margin-bottom: 8px;\n font-size: 24px;\n font-weight: 700;\n line-height: 33.6px;\n}\n\n.product__description {\n font-size: 16px;\n font-weight: 400;\n line-height: 22.4px;\n}\n\n.product__price {\n font-size: 24px;\n font-weight: 700;\n line-height: 33.6px;\n}\n\n.compare-bikes--margin-top {\n margin-top: 92px;\n}\n\n.compare-bikes__description {\n margin-bottom: 16px;\n}\n\n.compare-bikes__products {\n --column-count: 2;\n grid-template-columns: repeat(var(--column-count), 1fr);\n column-gap: 20px;\n display: grid;\n}\n\n@media (min-width: 576px) {\n .compare-bikes__products {\n --column-count: 6;\n column-gap: 24px;\n }\n}\n\n@media (min-width: 1024px) {\n .compare-bikes__products {\n --column-count: 12;\n }\n}\n\n.compare-bikes__product {\n grid-column: 1 / -1;\n}\n\n@media (min-width: 576px) {\n .compare-bikes__product {\n grid-column: 2 / -2;\n }\n}\n\n@media (min-width: 1024px) {\n .compare-bikes__product {\n grid-column: span 4;\n }\n}\n\n.details__wrapper {\n row-gap: 40px;\n display: grid;\n}\n\n@media (min-width: 576px) {\n .details__wrapper {\n row-gap: 48px;\n }\n}\n\n.details--margin--top {\n margin-top: 92px;\n}\n\n@media (min-width: 576px) {\n .details--margin--top {\n margin-top: 144px;\n }\n}\n\n.details__title {\n margin-bottom: 48px;\n}\n\n.details__button {\n grid-column: 1 / -1;\n text-decoration: none;\n}\n\n@media (min-width: 576px) {\n .details__button {\n grid-column: 2 / 6;\n }\n}\n\n@media (min-width: 1024px) {\n .details__button {\n grid-column: 5 / 9;\n }\n}\n\n.detail__photos {\n --column-count: 2;\n grid-template-columns: repeat(var(--column-count), 1fr);\n column-gap: 20px;\n margin-bottom: 16px;\n display: grid;\n}\n\n@media (min-width: 576px) {\n .detail__photos {\n --column-count: 6;\n column-gap: 24px;\n }\n}\n\n@media (min-width: 1024px) {\n .detail__photos {\n --column-count: 12;\n }\n}\n\n.detail__title {\n margin-bottom: 8px;\n}\n\n.detail__link {\n grid-column: span 1;\n position: relative;\n}\n\n.detail__link--square {\n height: 0;\n padding-bottom: 100%;\n}\n\n@media (min-width: 576px) {\n .detail__link--wide {\n grid-column: span 4;\n }\n\n .detail__link--square {\n grid-column: span 2;\n }\n}\n\n@media (min-width: 1024px) {\n .detail__link--wide {\n grid-column: span 8;\n }\n\n .detail__link--square {\n grid-column: span 4;\n }\n}\n\n.detail__photo {\n object-fit: cover;\n width: 100%;\n height: 100%;\n transition: transform .3s;\n position: absolute;\n}\n\n.detail__photo:hover {\n transform: scale(1.05);\n}\n\n.detail__photo--wide {\n grid-column: 1;\n}\n\n.button-wrapper {\n --column-count: 2;\n grid-template-columns: repeat(var(--column-count), 1fr);\n column-gap: 20px;\n display: grid;\n}\n\n@media (min-width: 576px) {\n .button-wrapper {\n --column-count: 6;\n column-gap: 24px;\n }\n}\n\n@media (min-width: 1024px) {\n .button-wrapper {\n --column-count: 12;\n }\n}\n\n.button {\n text-align: center;\n color: #1d1d1d;\n background-color: #fff;\n border-radius: 40px;\n padding: 14.5px 0;\n font-size: 16px;\n font-weight: 700;\n line-height: 27px;\n}\n\n.button:hover {\n box-shadow: 1px 4px 16px rgba(232, 232, 240, .333);\n}\n\n.button:active {\n box-shadow: 1px 4px 16px rgba(232, 232, 240, .467);\n}\n\n.inputs-wrapper {\n --column-count: 2;\n grid-template-columns: repeat(var(--column-count), 1fr);\n gap: 16px 20px;\n display: grid;\n}\n\n@media (min-width: 576px) {\n .inputs-wrapper {\n --column-count: 6;\n column-gap: 24px;\n }\n}\n\n@media (min-width: 1024px) {\n .inputs-wrapper {\n --column-count: 12;\n }\n}\n\n.form {\n grid-column: 1 / -1;\n margin-top: 48px;\n}\n\n@media (min-width: 576px) {\n .form {\n grid-column: span 3;\n }\n}\n\n@media (min-width: 1024px) {\n .form {\n grid-column: span 5;\n }\n}\n\n.form__input {\n border: 0 solid #000;\n border-radius: 30px;\n grid-column: 1 / -1;\n height: 48px;\n padding-left: 16px;\n}\n\n.form__input--message {\n resize: none;\n border-radius: 16px;\n height: 128px;\n padding: 14px 16px;\n}\n\n.form__input--email {\n font-size: 14px;\n}\n\n.form__input:focus {\n color: #292929;\n border: 1px #000;\n outline: none;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n}\n\n.form__input:valid {\n font-size: 14px;\n line-height: 20px;\n}\n\n.form__input::-ms-input-placeholder {\n color: #7e7e83;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n}\n\n.form__input::placeholder {\n color: #7e7e83;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n}\n\n.form__button {\n border: 0 solid #000;\n grid-column: 1 / -1;\n margin-top: 32px;\n}\n\n.form__button:hover {\n cursor: pointer;\n}\n\ninput:-webkit-autofill {\n -webkit-box-shadow: inset 0 0 0 30px #fff !important;\n}\n\ninput:-webkit-autofill:hover {\n -webkit-box-shadow: inset 0 0 0 30px #fff !important;\n}\n\ninput:-webkit-autofill:focus {\n -webkit-box-shadow: inset 0 0 0 30px #fff !important;\n}\n\ninput:-webkit-autofill:active {\n -webkit-box-shadow: inset 0 0 0 30px #fff !important;\n}\n\n.contacts {\n margin-top: 80px;\n padding-bottom: 120px;\n}\n\n.contacts-content {\n --column-count: 2;\n grid-template-columns: repeat(var(--column-count), 1fr);\n column-gap: 20px;\n display: grid;\n}\n\n@media (min-width: 576px) {\n .contacts-content {\n --column-count: 6;\n column-gap: 24px;\n }\n}\n\n@media (min-width: 1024px) {\n .contacts-content {\n --column-count: 12;\n }\n}\n\n.contact-ways {\n grid-column: span 2;\n row-gap: 24px;\n margin-top: 50px;\n display: grid;\n}\n\n@media (min-width: 576px) {\n .contact-ways {\n grid-column: span 3;\n -ms-flex-item-align: start;\n align-self: start;\n }\n}\n\n@media (min-width: 1024px) {\n .contact-ways {\n grid-column: 8 / 11;\n }\n}\n\n.contact-ways__title {\n margin-bottom: 9px;\n font-size: 14px;\n font-weight: 400;\n line-height: 19.6px;\n}\n\n.contact-ways__text {\n color: #fff;\n font-size: 16px;\n font-weight: 500;\n line-height: 22.4px;\n}\n\n.contact-ways__text:hover {\n color: #aaa;\n}\n\n/*# sourceMappingURL=index.bf475f71.css.map */\n","@import '/src/styles/utiles/variables';\n@import '/src/styles/utiles/mixin';\n@import '/src/styles/blocks/page';\n@import '/src/styles/blocks/header';\n@import '/src/styles/blocks/top-bar';\n@import '/src/styles/blocks/menu';\n@import '/src/styles/blocks/icon';\n@import '/src/styles/blocks/main-block';\n@import '/src/styles/blocks/footer';\n@import '/src/styles/blocks/nav';\n@import '/src/styles/blocks/section-title';\n@import '/src/styles/blocks/about-us';\n@import '/src/styles/blocks/product';\n@import '/src/styles/blocks/compare-bikes';\n@import '/src/styles/blocks/details';\n@import '/src/styles/blocks/button';\n@import '/src/styles/blocks/form';\n@import '/src/styles/blocks/contacts';\n\n\n\n\n\n\n\n\n","@mixin on-tablet {\n @media (min-width: $tablet-min-width) {\n @content;\n }\n}\n\n@mixin on-desktop {\n @media (min-width: $desktop-min-width) {\n @content;\n }\n}\n\n@mixin 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.container {\n @include content-padding-inline;\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 display: grid;\n\n --column-count: 2;\n\n grid-template-columns: repeat(var(--column-count), 1fr);\n column-gap: 20px;\n\n @include on-tablet {\n --column-count: 6;\n\n column-gap: 24px;\n }\n\n @include on-desktop {\n --column-count: 12;\n }\n}\n\n",".page {\n font-family: Poppins, sans-serif;\n color: $main-text-color;\n font-size: 16px;\n line-height: 140%;\n font-style: normal;\n scroll-behavior: smooth;\n\n &:has(.page__menu:target) {\n overflow: hidden; \n }\n\n &__menu {\n top: 0;\n left: 0;\n right: 0;\n position: fixed;\n opacity: 0;\n transform: translateX(-100%);\n pointer-events: none;\n transition: all 0.3s;\n\n &:target {\n opacity: 1;\n pointer-events: all;\n transform: translateX(0);\n }\n }\n}\n\n",".header {\n // display: none !important;\n background-image: url(\"/src/images/bike-mob2-x.png\");\n background-size: cover;\n background-position: right;\n background-repeat: no-repeat;\n\n @include on-desktop {\n background-image: url(\"/src/images/Cover_photo.png\");\n background-position: center;\n }\n\n &__content {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n height: 100vh;\n }\n\n &__top {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n &__bottom {\n align-self: center;\n margin-bottom: 88px;\n\n @include on-tablet {\n margin-bottom: 130px;\n }\n\n @include on-desktop {\n margin-bottom: 203px;\n }\n }\n\n &__title {\n margin: 0;\n font-size: 36px;\n font-weight: 700;\n line-height: 100%;\n letter-spacing: -1.5px;\n\n @include on-tablet {\n font-size: 64px;\n }\n\n @include on-desktop {\n font-size: 80px;\n }\n }\n\n &__phone-number {\n display: none;\n\n \n }\n}\n\n@include on-desktop {\n .icon--phone:hover ~ .header__phone-number {\n display: inline;\n }\n}\n",".top-bar {\n padding-block: 24px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n @include on-tablet {\n padding-block: 36px;\n }\n\n &__logo-link {\n display: flex;\n font-size: 0;\n }\n\n &__icons {\n display: flex;\n flex-direction: row-reverse;\n gap: 24px;\n\n @include on-tablet {\n gap: 32px;\n }\n }\n\n &__logo {\n height: 38px;\n\n @include hover(transform, scale(1.2));\n\n &--white {\n @include on-tablet {\n height: 56px;\n }\n }\n\n &--black {\n @include on-desktop {\n height: 56px;\n }\n }\n }\n}\n\n\n",".menu {\n box-sizing: border-box;\n height: 100vh;\n background-color: #C2C2C2;\n overflow: auto;\n\n &__logo-link {\n text-decoration: none;\n font-size: 0;\n }\n\n &__nav{\n margin-bottom: 40px;\n }\n\n &__phone-number {\n text-decoration: none;\n color: #1D1D1D;\n font-size: 16px;\n font-weight: 600;\n line-height: 27px;\n text-transform: uppercase;\n display: block;\n margin-bottom: 16px;\n }\n\n &__test-ride {\n text-decoration: none;\n color: #1D1D1D;\n font-size: 12px;\n font-weight: 600;\n line-height: 16px;\n letter-spacing: 2px;\n text-transform: uppercase;\n display: block;\n\n width: fit-content;\n padding-bottom: 7px;\n border-bottom: 1px solid black;\n }\n\n &__top {\n margin-bottom: 24px;\n\n position: sticky;\n top: 0;\n z-index: 1;\n }\n}\n\n\n",".icon {\n width: $icon-size;\n height: $icon-size;\n display: block;\n background-repeat: no-repeat;\n background-size: cover;\n\n @include hover(transform, scale(1.2));\n\n @include on-tablet {\n width: $icon-size-tablet;\n height: $icon-size-tablet;\n }\n\n &--phone {\n // padding-left: 100px;\n position: relative;\n background-image: url(\"/src/icons/Icon-Phone-call2-x.png\");\n\n &::before {\n display: none;\n\n @include on-desktop {\n display: inline;\n }\n\n transition: 0.3s;\n opacity: 0;\n content: \"+1 234 5555-55-55\";\n\n position: absolute;\n right: calc(#{$icon-size-tablet + 20px});\n top: 12px;\n width: 150px;\n\n color: white;\n font-size: 12px;\n line-height: 12px;\n font-weight: 700;\n letter-spacing: 2px;\n }\n\n &:hover::before {\n opacity: 1;\n }\n }\n\n &--menu {\n background-image: url(\"/src/icons/Icon-Burger-menu2-x.png\");\n\n &:hover {\n background-image: url(\"/src/icons/Icon-Burger-menu-hover.png\");\n }\n }\n\n &--close {\n background-image: url(\"/src/icons/Icon-Close2-x.png\");\n }\n}\n","$tablet-min-width: 576px;\n$desktop-min-width: 1024px;\n$main-text-color: #FFF;\n$icon-size: 24px;\n$icon-size-tablet: 32px;\n",".main {\n background-color: #1D1D1D;\n}\n","\n.footer {\n position: sticky;\n z-index: -1;\n bottom: 0;\n background-image: url(\"/src/images/footer-mob1.png\");\n\n @include on-tablet {\n background-image: url(\"/src/images/footer-tablet.png\");\n }\n\n @include on-desktop {\n background-image: url(\"/src/images/footer-bike.png\");\n }\n\n height: 100vh;\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n}\n",".nav {\n &__list {\n list-style: none;\n padding: 0;\n margin: 0;\n display: flex;\n flex-direction: column;\n gap: 32px;\n }\n\n &__link {\n position: relative;\n text-decoration: none;\n color: #1D1D1D;\n font-size: 22px;\n font-weight: 600;\n line-height: 22px;\n letter-spacing: 2px;\n text-transform: uppercase;\n\n &::after {\n content: '';\n position: absolute;\n display: block;\n height: 1px;\n width: 100%;\n background-color: #1D1D1D;\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}\n\n\n\n",".section-title {\n margin-bottom: 48px;\n font-weight: 500;\n font-size: 32px;\n line-height: 32px;\n text-align: center;\n letter-spacing: -1.5px;\n\n @include on-tablet {\n font-size: 48px;\n line-height: 48px;\n }\n\n @include on-desktop {\n font-size: 64px;\n line-height: 64px;\n }\n\n &--align--left {\n text-align: left;\n }\n\n &--mob--margin-bottom {\n margin-bottom: 32px;\n\n @include on-tablet {\n margin-bottom: 0;\n }\n }\n}\n\n\n",".about-us {\n &--padding-top {\n padding-top: 60px;\n\n @include on-tablet {\n padding-top: 120px;\n }\n }\n\n @include page-grid;\n\n &__title {\n grid-column: span 2;\n }\n\n &__text {\n grid-column: span 2;\n font-size: 23px;\n line-height: 32.2px;\n margin: 0;\n padding: 0;\n }\n\n @include on-tablet {\n &__title {\n grid-column: 1 / span 3;\n }\n\n &__text {\n grid-column: 4 / span 3;\n }\n }\n\n @include on-desktop {\n\n &__title {\n grid-column: 1 / span 5;\n }\n\n &__text {\n grid-column: 6 / span 6;\n }\n }\n }\n","\n.product__img {\n width: 100%;\n \n @include hover(transform, scale(1.05));\n}\n\n.product__title {\n margin-bottom: 8px;\n font-weight: 700;\n font-size: 24px;\n line-height: 33.6px;\n}\n\n.product__description {\n font-weight: 400;\n font-size: 16px;\n line-height: 22.4px;\n}\n\n.product__price {\n font-weight: 700;\n font-size: 24px;\n line-height: 33.6px;\n}\n",".compare-bikes {\n &--margin-top {\n margin-top: 92px;\n }\n\n &__description {\n margin-bottom: 16px;\n }\n\n &__products {\n @include page-grid;\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\n\n\n",".details {\n &__wrapper {\n display: grid;\n row-gap: 40px;\n\n @include on-tablet {\n row-gap: 48px;\n }\n }\n &--margin--top {\n margin-top: 92px;\n\n @include on-tablet {\n margin-top: 120px;\n }\n\n @include on-tablet {\n margin-top: 144px;\n }\n }\n\n &__title {\n margin-bottom: 48px;\n }\n\n &__button {\n text-decoration: none;\n grid-column: 1 / -1;\n\n @include on-tablet {\n grid-column: 2 / 6;\n }\n\n @include on-desktop {\n grid-column: 5 / 9;\n }\n }\n}\n\n.detail {\n &__photos {\n margin-bottom: 16px;\n\n @include page-grid;\n }\n\n &__title {\n margin-bottom: 8px;\n }\n\n &__link {\n position: relative;\n grid-column: span 1;\n\n &--square {\n height: 0;\n padding-bottom: 100%;\n }\n\n @include on-tablet {\n &--wide {\n grid-column: span 4;\n }\n\n &--square {\n grid-column: span 2;\n }\n }\n\n @include on-desktop {\n &--wide {\n grid-column: span 8;\n }\n\n &--square {\n grid-column: span 4;\n }\n }\n }\n\n &__photo {\n @include hover(transform, scale(1.05));\n\n position: absolute;\n width: 100%;\n height: 100%;\n object-fit: cover;\n\n &--wide {\n grid-column: 1;\n }\n }\n}\n",".button-wrapper {\n @include page-grid;\n}\n\n.button {\n border-radius: 40px;\n padding: 14.5 0;\n text-align: center;\n background-color: #FFF;\n font-weight: 700;\n font-size: 16px;\n line-height: 27px;\n color: #1D1D1D;\n\n &:hover {\n box-shadow: 1 4px 16px #E8E8F055;\n }\n\n &:active {\n box-shadow: 1 4px 16px #E8E8F077;\n }\n}\n\n\n",".inputs-wrapper {\n @include page-grid;\n\n row-gap: 16px;\n}\n\n.form {\n margin-top: 48px;\n grid-column: 1 / -1;\n\n @include on-tablet {\n grid-column: span 3;\n }\n\n @include on-desktop {\n grid-column: span 5;\n }\n\n &__input {\n border: 0 solid #000;\n border-radius: 30px;\n grid-column: 1 / -1;\n height: 48px;\n padding-left: 16px;\n\n &--message {\n padding: 14px 16px;\n border-radius: 16px;\n height: 128px;\n resize: none;\n }\n\n &--email {\n font-size: 14px;\n }\n\n &:focus {\n border: 1px none #000;\n outline: none;\n font-weight: 400;\n font-size: 14px;\n line-height: 20px;\n color: #292929;\n }\n\n &:valid {\n font-size: 14px;\n line-height: 20px;\n }\n\n &::placeholder {\n font-weight: 400;\n font-size: 14px;\n line-height: 20px;\n color: #7e7e83;\n }\n }\n\n &__button {\n grid-column: 1 / -1;\n margin-top: 32px;\n border: 0 solid #000;\n\n &:hover {\n cursor: pointer;\n }\n }\n}\n\ninput:-webkit-autofill,\ninput:-webkit-autofill:hover,\ninput:-webkit-autofill:focus,\ninput:-webkit-autofill:active {\n -webkit-box-shadow: 0 0 0 30px white inset !important;\n}\n",".contacts {\n margin-top: 80px;\n padding-bottom: 120px;\n}\n\n.contacts-content {\n @include page-grid;\n}\n\n.contact-ways {\n grid-column: span 2;\n\n @include on-tablet {\n align-self: start;\n grid-column: span 3;\n }\n\n @include on-desktop {\n grid-column: 8 / 11;\n }\n\n display: grid;\n row-gap: 24px;\n margin-top: 50px;\n\n &__title {\n font-weight: 400;\n font-size: 14px;\n line-height: 19.6px;\n margin-bottom: 9px;\n }\n\n &__text {\n font-weight: 500;\n font-size: 16px;\n line-height: 22.4px;\n color: #fff;\n\n &:hover {\n color: #aaa;\n }\n }\n}\n\n\n\n\n"],"names":[],"version":3,"file":"index.bf475f71.css.map"} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000000..88f981b7d9 --- /dev/null +++ b/index.html @@ -0,0 +1 @@ +Bikes!

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

sporty-4

Sporty 4

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

$ 2 590

sporty-4

Ride in town ST

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

$ 2 590

sporty-4

Agile ride 3

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

$ 2 090

Details

app-photo app-photo

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.

light-photo light-photo

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.

brakes-photo light-weight-photo

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.

Explore

Contacts

Phone

+1 234 5555-55-55

Email

hello@miami.com

Adress

400 first ave.
suite 700
Minneapolis, MN 55401
\ No newline at end of file diff --git a/menu-logo2-x.cd3781da.png b/menu-logo2-x.cd3781da.png new file mode 100644 index 0000000000..fbf07efee0 Binary files /dev/null and b/menu-logo2-x.cd3781da.png differ diff --git a/range-square.0df72d94.png b/range-square.0df72d94.png new file mode 100644 index 0000000000..2de96626f3 Binary files /dev/null and b/range-square.0df72d94.png differ diff --git a/range-wide.366b9aa8.png b/range-wide.366b9aa8.png new file mode 100644 index 0000000000..5d123974db Binary files /dev/null and b/range-wide.366b9aa8.png differ diff --git a/sporty-4.a135689a.png b/sporty-4.a135689a.png new file mode 100644 index 0000000000..e88965fe10 Binary files /dev/null and b/sporty-4.a135689a.png differ diff --git a/unlock-square.2c210cf6.png b/unlock-square.2c210cf6.png new file mode 100644 index 0000000000..d144f8c9ac Binary files /dev/null and b/unlock-square.2c210cf6.png differ diff --git a/unlock-wide.6ccdfb8e.png b/unlock-wide.6ccdfb8e.png new file mode 100644 index 0000000000..7064172b4c Binary files /dev/null and b/unlock-wide.6ccdfb8e.png differ