Browse Source

cybertrack page markup

master
max 2 years ago
parent
commit
437c311d41
  1. 49
      src/pages/CyberTrack.vue

49
src/pages/CyberTrack.vue

@ -14,6 +14,32 @@
.characteristics .characteristics
p.characteristics__big &lt6.5 p.characteristics__big &lt6.5
p.characteristics__small 0-60 MPH p.characteristics__small 0-60 MPH
.container.exoskeleton
.img-holder
img(src="../assets/images/exoskelet.png" alt="exoskeleton")
img(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.
.container.skeleton
img(src="../assets/images/skelet.png" alt="skeleton")
.description
p ULTRA-HARD 30X COLD-ROLLED STAINLESS STEEL
.container.advantages
img(src="../assets/images/cyber-from-back.png" alt="")
img(src="../assets/images/cyber-open-back.png" alt="")
img(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.
.vid-descr
video.vid-descr__vid(src="http://infoviolence.org/ru/vblog/v720view/infoviolence_041.mp4" autoplay controls)
h2.vid-descr__descr CYBERTRACK
a.vid-descr__link(href="#") Order now
Footer/
</template> </template>
<script> <script>
import Header from "../components/Header.vue" import Header from "../components/Header.vue"
@ -28,6 +54,7 @@
</script> </script>
<style lang="scss"> <style lang="scss">
.cyber-track { .cyber-track {
overflow:hidden;
&__header { &__header {
position: absolute; position: absolute;
@ -74,6 +101,7 @@
text-transform: uppercase; text-transform: uppercase;
color: white; color: white;
} }
.intro-mech { .intro-mech {
position: absolute; position: absolute;
left: 0; left: 0;
@ -82,8 +110,10 @@
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.characteristics{ .characteristics{
text-align: center; text-align: center;
&__big { &__big {
margin-bottom: 0px; margin-bottom: 0px;
font-style: normal; font-style: normal;
@ -108,6 +138,25 @@
} }
} }
} }
.exoskeleton {
.img-holder {
}
}
.skeleton {
.description {
font-weight: 600;
font-size: 20px;
line-height: 24px;
text-align: right;
letter-spacing: 0.025em;
text-transform: uppercase;
}
}
.advantages {
}
} }
</style> </style>

Loading…
Cancel
Save