cybertrack page markup

src/pages/CyberTrack.vue

@@ -14,6 +14,32 @@
         .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 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(src="../assets/images/skelet.png" alt="skeleton")
+    .description
+      p ULTRA-HARD 30X 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 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.
+  .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{
                 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>