Browse Source

probably last changes

master
max 2 years ago
parent
commit
f91e7762ac
  1. 98
      src/pages/CyberTrack.vue

98
src/pages/CyberTrack.vue

@ -18,23 +18,25 @@ @@ -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 @@ @@ -78,6 +80,7 @@
overflow: hidden;
max-height: 1000px;
height: 100vh;
margin-bottom: 245px;
&__bg {
height: 100%;
@ -140,22 +143,53 @@ @@ -140,22 +143,53 @@
}
.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,30 +198,66 @@ @@ -164,30 +198,66 @@
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;
&-description {
max-width: 585px;
&__header {
font-weight: 600;
font-size: 20px;
line-height: 24px;
letter-spacing: 0.025em;
text-transform: uppercase;
}
&__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;
}
}
}
&-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;
}
}
}
.vid-descr {
display: flex;

Loading…
Cancel
Save