|
|
|
@ -1,19 +1,45 @@
@@ -1,19 +1,45 @@
|
|
|
|
|
<template lang="pug"> |
|
|
|
|
.cyber-track |
|
|
|
|
Header.cyber-track__header/ |
|
|
|
|
.intro |
|
|
|
|
img.intro__bg(src="../assets/images/cyber-bgrd.png") |
|
|
|
|
p.intro__text CyberTrack |
|
|
|
|
.container.intro-mech |
|
|
|
|
.characteristics |
|
|
|
|
p.characteristics__big 250+MI |
|
|
|
|
p.characteristics__small Range (EPA EST) |
|
|
|
|
.characteristics |
|
|
|
|
p.characteristics__big 7500+LBS |
|
|
|
|
p.characteristics__small Towing capacity |
|
|
|
|
.characteristics |
|
|
|
|
p.characteristics__big <6.5 |
|
|
|
|
p.characteristics__small 0-60 MPH |
|
|
|
|
Header.cyber-track__header/ |
|
|
|
|
.intro |
|
|
|
|
img.intro__bg(src="../assets/images/cyber-bgrd.png") |
|
|
|
|
p.intro__text CyberTrack |
|
|
|
|
.container.intro-mech |
|
|
|
|
.characteristics |
|
|
|
|
p.characteristics__big 250+MI |
|
|
|
|
p.characteristics__small Range (EPA EST) |
|
|
|
|
.characteristics |
|
|
|
|
p.characteristics__big 7500+LBS |
|
|
|
|
p.characteristics__small Towing capacity |
|
|
|
|
.characteristics |
|
|
|
|
p.characteristics__big <6.5 |
|
|
|
|
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> |
|
|
|
|
<script> |
|
|
|
|
import Header from "../components/Header.vue" |
|
|
|
@ -27,9 +53,10 @@
@@ -27,9 +53,10 @@
|
|
|
|
|
} |
|
|
|
|
</script> |
|
|
|
|
<style lang="scss"> |
|
|
|
|
.cyber-track{ |
|
|
|
|
.cyber-track { |
|
|
|
|
overflow:hidden; |
|
|
|
|
|
|
|
|
|
&__header{ |
|
|
|
|
&__header { |
|
|
|
|
position: absolute; |
|
|
|
|
top: 0; |
|
|
|
|
left: 0; |
|
|
|
@ -37,29 +64,29 @@
@@ -37,29 +64,29 @@
|
|
|
|
|
width: 100%; |
|
|
|
|
z-index: 100; |
|
|
|
|
|
|
|
|
|
.header-nav__item{ |
|
|
|
|
.header-nav__item { |
|
|
|
|
color: white !important; |
|
|
|
|
&:hover{ |
|
|
|
|
&:hover { |
|
|
|
|
border-color: white !important; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.intro{ |
|
|
|
|
.intro { |
|
|
|
|
background: wheat; |
|
|
|
|
position: relative; |
|
|
|
|
overflow: hidden; |
|
|
|
|
max-height: 1000px; |
|
|
|
|
height: 100vh; |
|
|
|
|
|
|
|
|
|
&__bg{ |
|
|
|
|
&__bg { |
|
|
|
|
height: 100%; |
|
|
|
|
object-fit: cover; |
|
|
|
|
object-position: center; |
|
|
|
|
width: 100%; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&__text{ |
|
|
|
|
&__text { |
|
|
|
|
position: absolute; |
|
|
|
|
left: 0; |
|
|
|
|
right: 0; |
|
|
|
@ -74,7 +101,8 @@
@@ -74,7 +101,8 @@
|
|
|
|
|
text-transform: uppercase; |
|
|
|
|
color: white; |
|
|
|
|
} |
|
|
|
|
.intro-mech{ |
|
|
|
|
|
|
|
|
|
.intro-mech { |
|
|
|
|
position: absolute; |
|
|
|
|
left: 0; |
|
|
|
|
right: 0; |
|
|
|
@ -82,9 +110,11 @@
@@ -82,9 +110,11 @@
|
|
|
|
|
margin: 0 auto; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
.characteristics{ |
|
|
|
|
|
|
|
|
|
.characteristics{ |
|
|
|
|
text-align: center; |
|
|
|
|
&__big{ |
|
|
|
|
|
|
|
|
|
&__big { |
|
|
|
|
margin-bottom: 0px; |
|
|
|
|
font-style: normal; |
|
|
|
|
font-weight: 600; |
|
|
|
@ -95,7 +125,7 @@
@@ -95,7 +125,7 @@
|
|
|
|
|
color: #FFFFFF; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&__small{ |
|
|
|
|
&__small { |
|
|
|
|
font-family: 'Montserrat'; |
|
|
|
|
font-style: normal; |
|
|
|
|
font-weight: 600; |
|
|
|
@ -108,6 +138,25 @@
@@ -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> |
|
|
|
|