From f91e7762ac5bbc04784e48756cfd65e346a96e2b Mon Sep 17 00:00:00 2001 From: max Date: Fri, 27 Jan 2023 22:38:03 +0300 Subject: [PATCH] probably last changes --- src/pages/CyberTrack.vue | 162 ++++++++++++++++++++++++++++----------- 1 file changed, 116 insertions(+), 46 deletions(-) diff --git a/src/pages/CyberTrack.vue b/src/pages/CyberTrack.vue index ad49738..000dabb 100644 --- a/src/pages/CyberTrack.vue +++ b/src/pages/CyberTrack.vue @@ -18,23 +18,25 @@ .exoskeleton-holder img.exoskeleton-holder__img1(src="../assets/images/exoskelet.png" alt="exoskeleton") img.exoskeleton-holder__img2(src="../assets/images/back-exoskeleton.png" alt="back-exoskeleton") - h2 Exoskeleton - p Cybertruck is built with an exterior shell made for ultimate durability and passenger protection. Starting with a nearly impenetrable exoskeleton, every component is designed for superior strength and endurance, from Ultra-Hard 30X Cold-Rolled stainless-steel structural skin to Tesla armor glass. + .exoskeleton-description + h2.exoskeleton-description__header Exoskeleton + p.exoskeleton-description__text Cybertruck is built with an exterior shell made for ultimate durability and passenger protection. Starting with a nearly impenetrable exoskeleton, every component is designed for superior strength and endurance, from Ultra-Hard 30X Cold-Rolled stainless-steel structural skin to Tesla armor glass. .container.skeleton img.skeleton__img(src="../assets/images/skelet.png" alt="skeleton") .description p ULTRA-HARD 30X COLD-ROLLED STAINLESS STEEL .container.advantages - img.advantages__img1(src="../assets/images/cyber-from-back.png" alt="") - img.advantages__img2(src="../assets/images/cyber-open-back.png" alt="") - img.advantages__img3(src="../assets/images/cyber-inside.png" alt="") - .description - h2 PERFORMANCE AND EFFICIENCY - p Now entering a new class of strength, speed and versatility—only possible with an all-electric design. The powerful drivetrain and low center of gravity provides extraordinary traction control and torque—enabling acceleration from 0-60 mph in as little as 2.9 seconds and up to 500 miles of range. - h2 ADAPTIVE AIR SUSPENSION - p Raise and lower suspension four inches in either direction for easy access to Cybertruck or the vault, while self-leveling capabilities adapt to any occasion and assist with every job. - h2 FLEXIBLE INTERIOR - p Seat six comfortably with additional storage under the second-row seats. Complete with an advanced 17″ touchscreen with an all-new customized user interface. + .advantages-description + h2.advantages-description__header PERFORMANCE AND EFFICIENCY + p.advantages-description__text Now entering a new class of strength, speed and versatility—only possible with an all-electric design. The powerful drivetrain and low center of gravity provides extraordinary traction control and torque—enabling acceleration from 0-60 mph in as little as 2.9 seconds and up to 500 miles of range. + h2.advantages-description__header ADAPTIVE AIR SUSPENSION + p.advantages-description__text Raise and lower suspension four inches in either direction for easy access to Cybertruck or the vault, while self-leveling capabilities adapt to any occasion and assist with every job. + h2.advantages-description__header FLEXIBLE INTERIOR + p.advantages-description__text Seat six comfortably with additional storage under the second-row seats. Complete with an advanced 17″ touchscreen with an all-new customized user interface. + .advantages-img + img.advantages-img__img1(src="../assets/images/cyber-from-back.png" alt="") + img.advantages-img__img2(src="../assets/images/cyber-open-back.png" alt="") + img.advantages-img__img3(src="../assets/images/cyber-inside.png" alt="") .vid-descr video.vid-descr__vid(src="http://infoviolence.org/ru/vblog/v720view/infoviolence_041.mp4" autoplay controls) h2.vid-descr__descr CYBERTRACK @@ -78,6 +80,7 @@ overflow: hidden; max-height: 1000px; height: 100vh; + margin-bottom: 245px; &__bg { height: 100%; @@ -112,50 +115,81 @@ justify-content: space-between; .characteristics{ - text-align: center; + text-align: center; &__big { - margin-bottom: 0px; - font-style: normal; - font-weight: 600; - font-size: 30px; - line-height: 37px; - letter-spacing: 0.025em; - text-transform: uppercase; - color: #FFFFFF; - } - - &__small { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 600; - font-size: 14px; - line-height: 17px; - letter-spacing: 0.025em; - text-transform: uppercase; - color: #FFFFFF; - } - } + margin-bottom: 0px; + font-style: normal; + font-weight: 600; + font-size: 30px; + line-height: 37px; + letter-spacing: 0.025em; + text-transform: uppercase; + color: #FFFFFF; + } + + &__small { + font-family: 'Montserrat'; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 17px; + letter-spacing: 0.025em; + text-transform: uppercase; + color: #FFFFFF; + } + } } } .exoskeleton { + display: flex; + position: relative; + max-width: 1337px; + max-height: 635px; + margin-bottom: 245px; + padding-bottom: 193px; &-holder { - &__img1 { max-height: 442px; max-width: 745px; + margin: 0 75px; } &__img2 { + position: absolute; + bottom: 0; + left: -25px; max-height: 234px; max-width: 401px; } } + + &-description { + &__header { + font-weight: 600; + font-size: 30px; + line-height: 37px; + letter-spacing: 0.025em; + text-transform: uppercase; + margin-top: 0; + margin-bottom: 45px; + } + + &__text { + max-width: 290px; + font-weight: 300; + font-size: 20px; + line-height: 24px; + letter-spacing: 0.025em; + text-transform: uppercase; + } + } } .skeleton { + margin-bottom: 246px; &__img { max-height: 296px; max-width: 996px; @@ -164,28 +198,64 @@ font-weight: 600; font-size: 20px; line-height: 24px; - text-align: right; + text-align: left; letter-spacing: 0.025em; text-transform: uppercase; } } .advantages { + display: flex; + position: relative; margin-bottom: 246px; + max-width: 1240px; - &__img1 { - max-height: 305px; - max-width: 545px; - } + &-description { + max-width: 585px; + &__header { + font-weight: 600; + font-size: 20px; + line-height: 24px; + letter-spacing: 0.025em; + text-transform: uppercase; + } - &__img2 { - max-height: 251px; - max-width: 502px; + &__text { + font-weight: 300; + font-size: 20px; + line-height: 24px; + letter-spacing: 0.025em; + text-transform: uppercase; + margin-bottom: 91px; + &:last-child { + margin-bottom: 0; + } + } } - &__img3 { - max-height: 188px; - max-width: 376px; + &-img { + &__img1 { + max-height: 305px; + max-width: 545px; + margin-left: 63px; + margin-right: 45px; + } + + &__img2 { + position: absolute; + top: 275px; + right: 0; + max-height: 251px; + max-width: 502px; + } + + &__img3 { + position: absolute; + bottom: 0; + right: 220px; + max-height: 188px; + max-width: 376px; + } } }