Browse Source

cybertrack page markup

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

99
src/pages/CyberTrack.vue

@ -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 &lt6.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 &lt6.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&nbsp;built with an&nbsp;exterior shell made for ultimate durability and passenger protection. Starting with a&nbsp;nearly impenetrable exoskeleton, every component is&nbsp;designed for superior strength and endurance, from Ultra-Hard 30X Cold-Rolled stainless-steel structural skin to&nbsp;Tesla armor glass.
.container.skeleton
img(src="../assets/images/skelet.png" alt="skeleton")
.description
p ULTRA-HARD 30X&nbsp;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&nbsp;new class of&nbsp;strength, speed and versatility&mdash;only possible with an&nbsp;all-electric design. The powerful drivetrain and low center of&nbsp;gravity provides extraordinary traction control and torque&mdash;enabling acceleration from 0-60 mph in&nbsp;as&nbsp;little as&nbsp;2.9 seconds and up&nbsp;to&nbsp;500 miles of&nbsp;range.
h2 ADAPTIVE AIR SUSPENSION
p Raise and lower suspension four inches in&nbsp;either direction for easy access to&nbsp;Cybertruck or&nbsp;the vault, while self-leveling capabilities adapt to&nbsp;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&nbsp;advanced&nbsp;17&Prime; touchscreen with an&nbsp;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>

Loading…
Cancel
Save