Monaxys
/
Test_Me
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

probably last changes

master
max 2 years ago
parent
343c0179c0
commit
f91e7762ac
1 changed files with 116 additions and 46 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 162
      src/pages/CyberTrack.vue

162
src/pages/CyberTrack.vue
Unescape View File

@ -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%;
@ -112,50 +115,81 @@ @@ -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 @@ @@ -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;
}
}
}

Write Preview
Loading…
Cancel
Save