Tesla-model ready

src/pages/TeslaMode.vue

@@ -7,27 +7,58 @@
             include ../assets/images/arrow-scroll.svg
     Carousel/
     .vid-descr
-        video.vid-descr__vid(src="http://infoviolence.org/ru/vblog/v720view/infoviolence_041.mp4" autoplay)
+        video.vid-descr__vid(src="http://infoviolence.org/ru/vblog/v720view/infoviolence_041.mp4" autoplay controls)
         .vid-descr__descr All Model Xs come standard with two electric motors—one at the front axle and one at the rear—which enables them with all-wheel-drive capability. The standard Long Range model is quick and Tesla claims a zero-to-60-mph time of 4.4 seconds.
             a.vid-descr__link(href="#") Read more ->
+    .container.shop-selector
+        .shop-selector__txt
+            h2 Select your market
+            ul.shop-list
+                li.shop-list__item
+                    a(href="#") North America
+                li.shop-list__item
+                    a(href="#") Europe
+                li.shop-list__item
+                    a(href="#") Middle-east
+                li.shop-list__item
+                    a(href="#") Asia/Pacific
+        img.shop-selector__image(src="../assets/images/tesla-store.png" alt="")
+    .fabric
+        img(src="../assets/images/fabric.png" alt="")
+    .container.test-drive
+        .test-drive__image
+            img.test-drive__image1(src="../assets/images/car-back.png")
+            img.test-drive__image2(src="../assets/images/tesla-wheel.png")
+        .test-drive__txt
+            h2 Test drive
+            .description
+                p #[a(href="") Learm more]  online to prepare for your self-guided appointment.
+                p  Drivers must have a valid U.S. driver's license.
+    .container.user-log
+        h2 Book a Test drive
+        .user-input
+            input.user-input__input(placeholder="Your First and Last name")
+            input.user-input__input(placeholder="Your Phone number")
+            input.user-input__input(placeholder="Model")
+            button ->
     Footer/
-h1 modelS
 </template>
 <script>
-import Header from "../components/Header.vue"
+ import Header from "../components/Header.vue"
-import Footer from "../components/Footer.vue"
+ import Footer from "../components/Footer.vue"
-import Carousel from "../components/Carousel.vue"
+ import Carousel from "../components/Carousel.vue"
-export default {
+ export default {
-    name: "TeslaMode",
+     name: "TeslaMode",
-    components: {
+     components: {
-        Header,
+         Header,
-        Carousel,
+         Carousel,
-        Footer,
+         Footer,
-    }
+     }
-}
+ }
 </script>
 <style lang="scss">
  .tesla-mode{
+
      &__header{
          position: absolute;
          top: 0;
@@ -42,6 +73,7 @@ export default {
          overflow: hidden;
          max-height: 1000px;
          height: 100vh;
+
          &__scroll-arrow{
              height: 33px;
              width: 61px;
@@ -52,6 +84,7 @@ export default {
              margin: 0 auto;
              animation: scrollArrow 2s ease-in-out infinite;
          }
+
          &__bg{
              height: 100%;
              object-fit: cover;
@@ -88,7 +121,143 @@ export default {
              color: black;
          }
      }
+     .shop-selector{
+         display:flex;
+         margin-top: 250px;
+         margin-bottom: 250px;
+
+         &__txt{
+             margin-right: 106px;
+             h2{
+                 font-weight: 600;
+                 font-size: 38px;
+                 line-height: 46px;
+                 letter-spacing: 0.025em;
+                 text-transform: uppercase;
+                 color: #000000;
+             }
+         }
+         .shop-list{
+             padding-left: 0;
+
+             &__item{
+                 list-style: none;
+                 font-weight: 400;
+                 font-size: 28px;
+                 line-height: 34px;
+                 letter-spacing: 0.025em;
+                 text-transform: capitalize;
+                 color: #000000;
+                 a{
+                     color: inherit;
+                     text-decoration: none;
+                 }
+             }
+         }
+
+         &__image{
+             width: 100%;
+         }
+     }
+     .fabric{
+         display: flex;
+         justify-content: flex-end;
+         margin: 250px 0;
+         img{
+             height: 380px;
+         }
+     }
+     .test-drive{
+         display: flex;
+         margin-bottom: 250px;
+         max-width: 1139px;
+         position: relative;
+         padding-bottom: 155px;
+
+         &__image1{
+             height: 646px;
+             margin-right: 416px;
+         }
+
+         &__image2{
+             height: 436px;
+             position: absolute;
+             left: 277px;
+             bottom: 0;
+         }
+
+         &__txt{
+             h2{
+                 font-weight: 600;
+                 font-size: 38px;
+                 line-height: 46px;
+                 letter-spacing: 0.025em;
+                 text-transform: uppercase;
+                 color: #000000;
+                 margin-top: 0;
+                 margin-bottom: 90px;
+             }
+             .description{
+                 height: 299px;
+                 p{
+                     font-weight: 300;
+                     font-size: 28px;
+                     line-height: 34px;
+                     letter-spacing: 0.025em;
+                     text-transform: uppercase;
+                     a{
+                         color: inherit;
+                     }
+                 }
+             }
+         }
+     }
+     .user-log{
+         max-width: 1155px;
+         margin-bottom: 250px;
+         h2{
+             font-weight: 600;
+             font-size: 38px;
+             line-height: 46px;
+             letter-spacing: 0.025em;
+             text-transform: uppercase;
+             margin-top: 0;
+             margin-bottom: 99;
+             color: #000000;
+         }
+         .user-input{
+             display: flex;
+             justify-content: space-between;
+             button{
+                 background: transparent;
+             }
+
+             &__input{
+                 border-top: none;
+                 border-right: none;
+                 border-left: none;
+                 border-bottom: 3px solid black;
+                 padding-bottom: 5px;
+                 outline: none;
+                 &:not(:last-of-type){
+                     width: 100%;
+                     max-width: 360px;
+                 }
+                 &:last-of-type{
+                     width: 100%;
+                     max-width: 300px;
+                 }
+                 &::placeholder{
+                     font-weight: 600;
+                     font-size: 24px;
+                     line-height: 29px;
+                     letter-spacing: 0.025em;
+                     color: #5E5E5E;
+                 }
+             }
+         }
 
+     }
  }
  @keyframes scrollArrow {
      from, to{