aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/HelloWorld.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/HelloWorld.vue')
-rw-r--r--src/components/HelloWorld.vue41
1 files changed, 41 insertions, 0 deletions
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
new file mode 100644
index 0000000..a2eabd1
--- /dev/null
+++ b/src/components/HelloWorld.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+defineProps<{
+ msg: string
+}>()
+</script>
+
+<template>
+ <div class="greetings">
+ <h1 class="green">{{ msg }}</h1>
+ <h3>
+ You’ve successfully created a project with
+ <a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
+ <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
+ </h3>
+ </div>
+</template>
+
+<style scoped>
+h1 {
+ font-weight: 500;
+ font-size: 2.6rem;
+ position: relative;
+ top: -10px;
+}
+
+h3 {
+ font-size: 1.2rem;
+}
+
+.greetings h1,
+.greetings h3 {
+ text-align: center;
+}
+
+@media (min-width: 1024px) {
+ .greetings h1,
+ .greetings h3 {
+ text-align: left;
+ }
+}
+</style>