monaxys
2 years ago
3 changed files with 128 additions and 17 deletions
After Width: | Height: | Size: 2.0 MiB |
@ -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 <6.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…
Reference in new issue