monaxys
2 years ago
3 changed files with 128 additions and 17 deletions
After Width: | Height: | Size: 2.0 MiB |
@ -1,3 +1,113 @@ |
|||||||
<template lang="pug"> |
<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 <6.5 |
||||||
|
p.characteristics__small 0-60 MPH |
||||||
</template> |
</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…
Reference in new issue