Browse Source

Cyber intro ready

master
monaxys 2 years ago
parent
commit
171dbc4f70
  1. BIN
      src/assets/images/cyber-bgrd.png
  2. 33
      src/components/Header.vue
  3. 112
      src/pages/CyberTrack.vue

BIN
src/assets/images/cyber-bgrd.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 MiB

33
src/components/Header.vue

@ -3,6 +3,7 @@ header.header.container @@ -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
@ -22,24 +23,24 @@ header.header.container @@ -22,24 +23,24 @@ header.header.container
}
}
.header-nav{
@media screen and (max-width: 1024px){
@media screen and (max-width: 1024px){
display: none;
}
&__item {
margin: 0 8px;
text-transform: uppercase;
font-weight: 500;
font-size: 22px;
line-height: 27px;
text-decoration: none;
letter-spacing: 0.025em;
border-bottom: 2px solid transparent;
color: #000000;
}
&__item {
margin: 0 8px;
text-transform: uppercase;
font-weight: 500;
font-size: 22px;
line-height: 27px;
text-decoration: none;
letter-spacing: 0.025em;
border-bottom: 2px solid transparent;
color: #000000;
&:hover{
border-color: black;
}
}
&:hover{
border-color: black;
}
}
}
&-menu{
background: transparent;

112
src/pages/CyberTrack.vue

@ -1,3 +1,113 @@ @@ -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>

Loading…
Cancel
Save