Cyber intro ready

src/components/Header.vue

@@ -3,6 +3,7 @@ header.header.container
     h1
         img.logo__image(src="../assets/images/logo.png" alt="Tesla")
     nav.header-nav
+        a.header-nav__item(href="#") Models
         a.header-nav__item(href="#") Test Drive
         a.header-nav__item(href="#") Contacts
         a.header-nav__item(href="#") Shop

src/pages/CyberTrack.vue

@@ -1,3 +1,113 @@
 <template lang="pug">
-h1 cyber
+.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
 </template>
+<script>
+ import Header from "../components/Header.vue"
+ import Footer from "../components/Footer.vue"
+ export default {
+     name: "CyberTrack",
+     components: {
+         Header,
+         Footer,
+     }
+ }
+</script>
+<style lang="scss">
+ .cyber-track{
+
+     &__header{
+         position: absolute;
+         top: 0;
+         left: 0;
+         right: 0;
+         width: 100%;
+         z-index: 100;
+
+         .header-nav__item{
+             color: white !important;
+             &:hover{
+                 border-color: white !important;
+             }
+         }
+     }
+
+     .intro{
+         background: wheat;
+         position: relative;
+         overflow: hidden;
+         max-height: 1000px;
+         height: 100vh;
+
+         &__bg{
+             height: 100%;
+             object-fit: cover;
+             object-position: center;
+             width: 100%;
+         }
+
+         &__text{
+             position: absolute;
+             left: 0;
+             right: 0;
+             margin: 0 auto;
+             bottom: 70%;
+             text-align: center;
+             font-style: normal;
+             font-weight: 400;
+             font-size: 60px;
+             line-height: 73px;
+             letter-spacing: 0.025em;
+             text-transform: uppercase;
+             color: white;
+         }
+         .intro-mech{
+             position: absolute;
+             left: 0;
+             right: 0;
+             bottom: 10%;
+             margin: 0 auto;
+             display: flex;
+             justify-content: space-between;
+            .characteristics{
+                text-align: center;
+                &__big{
+                    margin-bottom: 0px;
+                    font-style: normal;
+                    font-weight: 600;
+                    font-size: 30px;
+                    line-height: 37px;
+                    letter-spacing: 0.025em;
+                    text-transform: uppercase;
+                    color: #FFFFFF;
+                }
+
+                &__small{
+                    font-family: 'Montserrat';
+                    font-style: normal;
+                    font-weight: 600;
+                    font-size: 14px;
+                    line-height: 17px;
+                    letter-spacing: 0.025em;
+                    text-transform: uppercase;
+                    color: #FFFFFF;
+                }
+            }
+         }
+     }
+ }
+
+</style>