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
Unified 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 @@
.exoskeleton-holder .exoskeleton-holder
img.exoskeleton-holder__img1(src="../assets/images/exoskelet.png" alt="exoskeleton") img.exoskeleton-holder__img1(src="../assets/images/exoskelet.png" alt="exoskeleton")
img.exoskeleton-holder__img2(src="../assets/images/back-exoskeleton.png" alt="back-exoskeleton") img.exoskeleton-holder__img2(src="../assets/images/back-exoskeleton.png" alt="back-exoskeleton")
h2 Exoskeleton .exoskeleton-description
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. 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 .container.skeleton
img.skeleton__img(src="../assets/images/skelet.png" alt="skeleton") img.skeleton__img(src="../assets/images/skelet.png" alt="skeleton")
.description .description
p ULTRA-HARD 30X COLD-ROLLED STAINLESS STEEL p ULTRA-HARD 30X COLD-ROLLED STAINLESS STEEL
.container.advantages .container.advantages
img.advantages__img1(src="../assets/images/cyber-from-back.png" alt="") .advantages-description
img.advantages__img2(src="../assets/images/cyber-open-back.png" alt="") h2.advantages-description__header PERFORMANCE AND EFFICIENCY
img.advantages__img3(src="../assets/images/cyber-inside.png" alt="") 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.
.description h2.advantages-description__header ADAPTIVE AIR SUSPENSION
h2 PERFORMANCE AND EFFICIENCY 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.
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.advantages-description__header FLEXIBLE INTERIOR
h2 ADAPTIVE AIR SUSPENSION 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.
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. .advantages-img
h2 FLEXIBLE INTERIOR img.advantages-img__img1(src="../assets/images/cyber-from-back.png" alt="")
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. 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 .vid-descr
video.vid-descr__vid(src="http://infoviolence.org/ru/vblog/v720view/infoviolence_041.mp4" autoplay controls) video.vid-descr__vid(src="http://infoviolence.org/ru/vblog/v720view/infoviolence_041.mp4" autoplay controls)
h2.vid-descr__descr CYBERTRACK h2.vid-descr__descr CYBERTRACK
@ -78,6 +80,7 @@
overflow: hidden; overflow: hidden;
max-height: 1000px; max-height: 1000px;
height: 100vh; height: 100vh;
margin-bottom: 245px;
&__bg { &__bg {
height: 100%; height: 100%;
@ -112,50 +115,81 @@
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;
font-weight: 600; font-weight: 600;
font-size: 30px; font-size: 30px;
line-height: 37px; line-height: 37px;
letter-spacing: 0.025em; letter-spacing: 0.025em;
text-transform: uppercase; text-transform: uppercase;
color: #FFFFFF; color: #FFFFFF;
} }
&__small { &__small {
font-family: 'Montserrat'; font-family: 'Montserrat';
font-style: normal; font-style: normal;
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: 14px;
line-height: 17px; line-height: 17px;
letter-spacing: 0.025em; letter-spacing: 0.025em;
text-transform: uppercase; text-transform: uppercase;
color: #FFFFFF; color: #FFFFFF;
} }
} }
} }
} }
.exoskeleton { .exoskeleton {
display: flex;
position: relative;
max-width: 1337px;
max-height: 635px;
margin-bottom: 245px;
padding-bottom: 193px;
&-holder { &-holder {
&__img1 { &__img1 {
max-height: 442px; max-height: 442px;
max-width: 745px; max-width: 745px;
margin: 0 75px;
} }
&__img2 { &__img2 {
position: absolute;
bottom: 0;
left: -25px;
max-height: 234px; max-height: 234px;
max-width: 401px; 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 { .skeleton {
margin-bottom: 246px;
&__img { &__img {
max-height: 296px; max-height: 296px;
max-width: 996px; max-width: 996px;
@ -164,28 +198,64 @@
font-weight: 600; font-weight: 600;
font-size: 20px; font-size: 20px;
line-height: 24px; line-height: 24px;
text-align: right; text-align: left;
letter-spacing: 0.025em; letter-spacing: 0.025em;
text-transform: uppercase; text-transform: uppercase;
} }
} }
.advantages { .advantages {
display: flex;
position: relative;
margin-bottom: 246px; margin-bottom: 246px;
max-width: 1240px;
&__img1 { &-description {
max-height: 305px; max-width: 585px;
max-width: 545px; &__header {
} font-weight: 600;
font-size: 20px;
line-height: 24px;
letter-spacing: 0.025em;
text-transform: uppercase;
}
&__img2 { &__text {
max-height: 251px; font-weight: 300;
max-width: 502px; font-size: 20px;
line-height: 24px;
letter-spacing: 0.025em;
text-transform: uppercase;
margin-bottom: 91px;
&:last-child {
margin-bottom: 0;
}
}
} }
&__img3 { &-img {
max-height: 188px; &__img1 {
max-width: 376px; 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