monaxys
2 years ago
11 changed files with 160 additions and 58 deletions
After Width: | Height: | Size: 2.0 KiB |
Before Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,4 @@
@@ -0,0 +1,4 @@
|
||||
<template lang="pug"> |
||||
button.button |
||||
slot |
||||
</template> |
@ -1,4 +1,42 @@
@@ -1,4 +1,42 @@
|
||||
<template lang="pug"> |
||||
footer.footer |
||||
span copyright2022 |
||||
.container |
||||
.footer__copyright Tesla © {{ year }} |
||||
|
||||
nav.footer-nav |
||||
a(href="#") Privacy & Legal |
||||
a(href="#") Contact |
||||
a(href="#") Careers |
||||
a(href="#") Get Newsletter |
||||
a(href="#") Locations |
||||
</template> |
||||
|
||||
<style lang="scss"> |
||||
.footer{ |
||||
background: #f0f0f0; |
||||
height: 115px; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.container{ |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
} |
||||
|
||||
&-nav{ |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
} |
||||
} |
||||
</style> |
||||
|
||||
<script> |
||||
export default { |
||||
name: 'Footer', |
||||
setup() { |
||||
return { year: new Date().getFullYear() }; |
||||
}, |
||||
}; |
||||
</script> |
||||
|
@ -1,17 +1,40 @@
@@ -1,17 +1,40 @@
|
||||
<template lang="pug"> |
||||
header.header |
||||
span.header__logo logo |
||||
nav.header__nav |
||||
a(href="#") link |
||||
header.header.container |
||||
h1 |
||||
img.logo__image(src="../assets/images/logo.png" alt="Tesla") |
||||
nav.header-nav |
||||
a.header-nav__item(href="#") Test Drive |
||||
a.header-nav__item(href="#") Contacts |
||||
a.header-nav__item(href="#") Shop |
||||
</template> |
||||
|
||||
<style lang="scss"> |
||||
<style scoped lang="scss"> |
||||
.header{ |
||||
background-color: $primary-color; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
.logo{ |
||||
&__image{ |
||||
height: 20px; |
||||
} |
||||
} |
||||
.header-nav{ |
||||
&__item { |
||||
margin: 0 8px; |
||||
text-transform: uppercase; |
||||
font-family: 'Montserrat'; |
||||
font-style: normal; |
||||
font-weight: 500; |
||||
font-size: 22px; |
||||
line-height: 27px; |
||||
text-decoration: none; |
||||
letter-spacing: 0.025em; |
||||
border-bottom: 2px solid transparent; |
||||
color: #000000; |
||||
|
||||
&__nav { |
||||
display: inline-block; |
||||
float: right; |
||||
&:hover{ |
||||
border-color: black; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
|
@ -1,35 +0,0 @@
@@ -1,35 +0,0 @@
|
||||
<script setup> |
||||
import { ref } from 'vue' |
||||
|
||||
defineProps({ |
||||
msg: String |
||||
}) |
||||
|
||||
const count = ref(0) |
||||
</script> |
||||
|
||||
<template lang="pug"> |
||||
h1 {{ msg }} |
||||
|
||||
p |
||||
| Recommended IDE setup: |
||||
a(href="https://code.visualstudio.com/" target="_blank") VS Code |
||||
| + |
||||
a(href="https://github.com/johnsoncodehk/volar" target="_blank") Volar |
||||
|
||||
p |
||||
a(href="https://vitejs.dev/guide/features.html" target="_blank") |
||||
| Vite Documentation |
||||
| | |
||||
| |
||||
a(href="https://v3.vuejs.org/" target="_blank") Vue 3 Documentation |
||||
|
||||
button(type="button" @click="count++") count is: {{ count }} |
||||
p Edit #[code components/HelloWorld.vue] to test hot module replacement. |
||||
</template> |
||||
|
||||
<style lang="scss" scoped> |
||||
a { |
||||
color: #42b983; |
||||
} |
||||
</style> |
@ -0,0 +1,3 @@
@@ -0,0 +1,3 @@
|
||||
<template lang="pug"> |
||||
h1 cyber |
||||
</template> |
@ -0,0 +1,34 @@
@@ -0,0 +1,34 @@
|
||||
<template lang="pug"> |
||||
.tesla-mode |
||||
Header.tesla-mode__header/ |
||||
.intro |
||||
Footer/ |
||||
h1 modelS |
||||
</template> |
||||
<script> |
||||
import Header from "../components/Header.vue" |
||||
import Footer from "../components/Footer.vue" |
||||
|
||||
export default { |
||||
name: "TeslaMode", |
||||
components: { |
||||
Header, |
||||
Footer, |
||||
} |
||||
} |
||||
</script> |
||||
<style lang="scss"> |
||||
.tesla-mode{ |
||||
&__header{ |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
right: 0; |
||||
width: 100%; |
||||
} |
||||
.intro{ |
||||
background: wheat; |
||||
min-height: 100vh; |
||||
} |
||||
} |
||||
</style> |
@ -0,0 +1,23 @@
@@ -0,0 +1,23 @@
|
||||
<template lang="pug"> |
||||
.hub |
||||
Button.hub__button(@click="openPage(2)") models |
||||
Button.hub__button(@click="openPage(3)") cyber |
||||
</template> |
||||
|
||||
<style> |
||||
|
||||
</style> |
||||
<script setup> |
||||
import Button from "../components/Button.vue" |
||||
</script> |
||||
<script> |
||||
export default { |
||||
name: "hub", |
||||
emits: ["switch"], |
||||
methods: { |
||||
openPage(num) { |
||||
this.$emit("switch", num) |
||||
} |
||||
} |
||||
} |
||||
</script> |
Loading…
Reference in new issue