Intro and carousel

src/assets/images/arrow-scroll.svg

@@ -0,0 +1,3 @@
+<svg width="61" height="33" viewBox="0 0 61 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M60.1788 0.744359C59.1863 -0.24812 57.582 -0.24812 56.5895 0.744359L30.4615 26.8722L4.33363 0.744359C3.34116 -0.24812 1.73684 -0.24812 0.74436 0.744359C-0.24812 1.73684 -0.24812 3.34116 0.74436 4.33363L28.6669 32.2562C29.1619 32.7512 29.8117 33 30.4616 33C31.1115 33 31.7613 32.7512 32.2563 32.2562L60.1789 4.33363C61.1713 3.34116 61.1713 1.73684 60.1788 0.744359Z" fill="white"/>
+</svg>

src/components/Carousel.vue

@@ -0,0 +1,73 @@
+<template lang="pug">
+.carousel
+    .container
+        h2.carousel__title Our tesla car model
+        ul.carousel-list
+            li.carousel-list__el(:class="{active: curSlideIdx === 0}" :style="{transform: `translateX(-${curSlideIdx*100}%)`}")
+                img(src="../assets/images/tesla_m3.png")
+                div Model 3
+            li.carousel-list__el(:class="{active: curSlideIdx === 1}" :style="{transform: `translateX(-${curSlideIdx*100}%)`}")
+                img(src="../assets/images/tesla-4.png")
+                div Model S
+            li.carousel-list__el(:class="{active: curSlideIdx === 2}" :style="{transform: `translateX(-${curSlideIdx*100}%)`}")
+                img(src="../assets/images/tesla-x.png")
+                div Model X
+</template>
+<style lang="scss">
+.carousel{
+    overflow: hidden;
+    &__title{
+        text-transform: uppercase;
+        font-weight: 500;
+        font-size: 38px;
+        line-height: 46px;
+        letter-spacing: 0.025em;
+    }
+    .carousel-list{
+        display: flex;
+        padding: 0;
+
+        &__el{
+            font-weight: 500;
+            font-size: 25px;
+            line-height: 30px;
+            letter-spacing: 0.025em;
+            text-transform: uppercase;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            list-style: none;
+            transition: opacity ease-in-out 0.3s, transform ease-in-out 0.3s;
+            &:not(.active){
+                opacity: 0.5;
+            }
+            img{
+                max-height: 345px;
+            }
+        }
+    }
+ }
+</style>
+<script>
+ export default {
+     name: "Carousel",
+     data (){
+         return{
+             curSlideIdx: 0,
+         }
+     },
+     methods:{
+         slide(){
+             if (this.curSlideIdx < 3-1){
+                 this.curSlideIdx++;
+             }
+             else{
+                 this.curSlideIdx = 0;
+             }
+         }
+     },
+     mounted(){
+         setInterval(this.slide, 2000);
+     }
+ }
+</script>

src/components/Header.vue

@@ -6,6 +6,10 @@ header.header.container
         a.header-nav__item(href="#") Test Drive
         a.header-nav__item(href="#") Contacts
         a.header-nav__item(href="#") Shop
+    Button.header-menu(@click="")
+        div.header-menu__strip
+        div.header-menu__strip
+        div.header-menu__strip
 </template>
 <style scoped lang="scss">
  .header{
@@ -18,11 +22,12 @@ header.header.container
          }
      }
      .header-nav{
+        @media screen and (max-width: 1024px){
+             display: none;
+        }
         &__item {
             margin: 0 8px;
             text-transform: uppercase;
-            font-family: 'Montserrat';
-            font-style: normal;
             font-weight: 500;
             font-size: 22px;
             line-height: 27px;
@@ -36,5 +41,23 @@ header.header.container
             }
         }
      }
+     &-menu{
+         background: transparent;
+         display:flex;
+         flex-direction: column;
+         width: 30px;
+         @media screen and (min-width: 1024px){
+             display: none;
+         }
+         &__strip{
+             height: 2px;
+             background: black;
+             width: 100%;
+
+             &:not(:last-child){
+                 margin-bottom: 7px;
+             }
+         }
+     }
  }
 </style>

src/pages/TeslaMode.vue

@@ -2,17 +2,22 @@
 .tesla-mode
     Header.tesla-mode__header/
     .intro
+        img.intro__bg(src="../assets/images/tesla-bg.png" alt="")
+        .intro__scroll-arrow
+            include ../assets/images/arrow-scroll.svg
+    Carousel/
     Footer/
 h1 modelS
 </template>
 <script>
 import Header from "../components/Header.vue"
 import Footer from "../components/Footer.vue"
-
+import Carousel from "../components/Carousel.vue"
 export default {
     name: "TeslaMode",
     components: {
         Header,
+        Carousel,
         Footer,
     }
 }
@@ -25,10 +30,38 @@ export default {
          left: 0;
          right: 0;
          width: 100%;
+         z-index: 100;
      }
      .intro{
          background: wheat;
-         min-height: 100vh;
+         position: relative;
+         overflow: hidden;
+         max-height: 1000px;
+         height: 100vh;
+         &__scroll-arrow{
+             height: 33px;
+             width: 61px;
+             position: absolute;
+             bottom: 23px;
+             left: 0;
+             right: 0;
+             margin: 0 auto;
+             animation: scrollArrow 2s ease-in-out infinite;
+         }
+         &__bg{
+             height: 100%;
+             object-fit: cover;
+             object-position: center;
+             width: 100%;
+         }
+     }
+ }
+ @keyframes scrollArrow {
+     from, to{
+         transform: none;
+     }
+     50%{
+         transform: translateY(-70%) scale(1.1);
      }
  }
 </style>

src/scss/_common.scss

@@ -1 +1,3 @@
 @import './vars';
+@import './reset';
+@import './fonts';

src/scss/_fonts.scss

@@ -0,0 +1,179 @@
+@font-face {
+    font-family: 'Montserrat';
+    src: url('../assets/fonts/Montserrat-BlackItalic.woff2') format('woff2'),
+        url('../assets/fonts/Montserrat-BlackItalic.woff') format('woff'),
+        url('../assets/fonts/Montserrat-BlackItalic.ttf') format('truetype');
+    font-weight: 900;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Montserrat';
+    src: url('../assets/fonts/Montserrat-ExtraBoldItalic.woff2') format('woff2'),
+        url('../assets/fonts/Montserrat-ExtraBoldItalic.woff') format('woff'),
+        url('../assets/fonts/Montserrat-ExtraBoldItalic.ttf') format('truetype');
+    font-weight: bold;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Montserrat';
+    src: url('../assets/fonts/Montserrat-BoldItalic.woff2') format('woff2'),
+        url('../assets/fonts/Montserrat-BoldItalic.woff') format('woff'),
+        url('../assets/fonts/Montserrat-BoldItalic.ttf') format('truetype');
+    font-weight: bold;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Montserrat';
+    src: url('../assets/fonts/Montserrat-LightItalic.woff2') format('woff2'),
+        url('../assets/fonts/Montserrat-LightItalic.woff') format('woff'),
+        url('../assets/fonts/Montserrat-LightItalic.ttf') format('truetype');
+    font-weight: 300;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Montserrat';
+    src: url('../assets/fonts/Montserrat-Bold.woff2') format('woff2'),
+        url('../assets/fonts/Montserrat-Bold.woff') format('woff'),
+        url('../assets/fonts/Montserrat-Bold.ttf') format('truetype');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Montserrat';
+    src: url('../assets/fonts/Montserrat-ExtraLightItalic.woff2') format('woff2'),
+        url('../assets/fonts/Montserrat-ExtraLightItalic.woff') format('woff'),
+        url('../assets/fonts/Montserrat-ExtraLightItalic.ttf') format('truetype');
+    font-weight: 200;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Montserrat';
+    src: url('../assets/fonts/Montserrat-Medium.woff2') format('woff2'),
+        url('../assets/fonts/Montserrat-Medium.woff') format('woff'),
+        url('../assets/fonts/Montserrat-Medium.ttf') format('truetype');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Montserrat';
+    src: url('../assets/fonts/Montserrat-Italic.woff2') format('woff2'),
+        url('../assets/fonts/Montserrat-Italic.woff') format('woff'),
+        url('../assets/fonts/Montserrat-Italic.ttf') format('truetype');
+    font-weight: normal;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Montserrat';
+    src: url('../assets/fonts/Montserrat-SemiBold.woff2') format('woff2'),
+        url('../assets/fonts/Montserrat-SemiBold.woff') format('woff'),
+        url('../assets/fonts/Montserrat-SemiBold.ttf') format('truetype');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Montserrat';
+    src: url('../assets/fonts/Montserrat-Black.woff2') format('woff2'),
+        url('../assets/fonts/Montserrat-Black.woff') format('woff'),
+        url('../assets/fonts/Montserrat-Black.ttf') format('truetype');
+    font-weight: 900;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Montserrat';
+    src: url('../assets/fonts/Montserrat-Regular.woff2') format('woff2'),
+        url('../assets/fonts/Montserrat-Regular.woff') format('woff'),
+        url('../assets/fonts/Montserrat-Regular.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Montserrat';
+    src: url('../assets/fonts/Montserrat-ThinItalic.woff2') format('woff2'),
+        url('../assets/fonts/Montserrat-ThinItalic.woff') format('woff'),
+        url('../assets/fonts/Montserrat-ThinItalic.ttf') format('truetype');
+    font-weight: 100;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Montserrat';
+    src: url('../assets/fonts/Montserrat-MediumItalic.woff2') format('woff2'),
+        url('../assets/fonts/Montserrat-MediumItalic.woff') format('woff'),
+        url('../assets/fonts/Montserrat-MediumItalic.ttf') format('truetype');
+    font-weight: 500;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Montserrat';
+    src: url('../assets/fonts/Montserrat-ExtraBold.woff2') format('woff2'),
+        url('../assets/fonts/Montserrat-ExtraBold.woff') format('woff'),
+        url('../assets/fonts/Montserrat-ExtraBold.ttf') format('truetype');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Montserrat';
+    src: url('../assets/fonts/Montserrat-SemiBoldItalic.woff2') format('woff2'),
+        url('../assets/fonts/Montserrat-SemiBoldItalic.woff') format('woff'),
+        url('../assets/fonts/Montserrat-SemiBoldItalic.ttf') format('truetype');
+    font-weight: 600;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Montserrat';
+    src: url('../assets/fonts/Montserrat-Light.woff2') format('woff2'),
+        url('../assets/fonts/Montserrat-Light.woff') format('woff'),
+        url('../assets/fonts/Montserrat-Light.ttf') format('truetype');
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Montserrat';
+    src: url('../assets/fonts/Montserrat-ExtraLight.woff2') format('woff2'),
+        url('../assets/fonts/Montserrat-ExtraLight.woff') format('woff'),
+        url('../assets/fonts/Montserrat-ExtraLight.ttf') format('truetype');
+    font-weight: 200;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Montserrat';
+    src: url('../assets/fonts/Montserrat-Thin.woff2') format('woff2'),
+        url('../assets/fonts/Montserrat-Thin.woff') format('woff'),
+        url('../assets/fonts/Montserrat-Thin.ttf') format('truetype');
+    font-weight: 100;
+    font-style: normal;
+    font-display: swap;
+}

src/scss/_reset.scss

@@ -0,0 +1,5 @@
+button{
+    border: none;
+    outline: none;
+    padding: 0;
+}

src/scss/_vars.scss

@@ -1,4 +1,4 @@
-$main-font: Avenir, Helvetica, Arial, sans-serif, -apple-system;
+$main-font: Montserrat, sans-serif, -apple-system;
 
 // colors
 $bg-color: white;

src/scss/main.scss

@@ -1,3 +1,10 @@
+*,*::before,*::after{
+    box-sizing: border-box;
+}
+html,body{
+    margin: 0;
+    padding: 0;
+}
 body {
     font-family: $main-font;
     background-color: $bg-color;