cybertrack page markup

src/pages/CyberTrack.vue

@@ -1,19 +1,45 @@
 <template lang="pug">
 .cyber-track
-    Header.cyber-track__header/
+  Header.cyber-track__header/
-    .intro
+  .intro
-        img.intro__bg(src="../assets/images/cyber-bgrd.png")
+    img.intro__bg(src="../assets/images/cyber-bgrd.png")
-        p.intro__text CyberTrack
+    p.intro__text CyberTrack
-        .container.intro-mech
+      .container.intro-mech
-            .characteristics
+        .characteristics
-                p.characteristics__big 250+MI
+          p.characteristics__big 250+MI
-                p.characteristics__small Range (EPA EST)
+          p.characteristics__small Range (EPA EST)
-            .characteristics
+        .characteristics
-                p.characteristics__big 7500+LBS
+          p.characteristics__big 7500+LBS
-                p.characteristics__small Towing capacity
+          p.characteristics__small Towing capacity
-            .characteristics
+        .characteristics
-                p.characteristics__big &lt6.5
+          p.characteristics__big &lt6.5
-                p.characteristics__small 0-60 MPH
+          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 @@
  }
 </script>
 <style lang="scss">
- .cyber-track{
+ .cyber-track {
+     overflow:hidden;
 
-     &__header{
+     &__header {
          position: absolute;
          top: 0;
          left: 0;
@@ -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 @@
              text-transform: uppercase;
              color: white;
          }
-         .intro-mech{
+
+         .intro-mech {
              position: absolute;
              left: 0;
              right: 0;
@@ -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 @@
                     color: #FFFFFF;
                 }
 
-                &__small{
+                &__small {
                     font-family: 'Montserrat';
                     font-style: normal;
                     font-weight: 600;
@@ -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>