Skip to content
Snippets Groups Projects
Commit 7023bbbd authored by Malin Haugland Høli's avatar Malin Haugland Høli
Browse files

refactor: :lipstick: Made changes to the startview displaying the background image properly

parent 5fa0a291
No related branches found
No related tags found
3 merge requests!66Final merge,!11Feat/startpage/design start page,!4Pipeline fix
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref } from 'vue' import { computed } from 'vue'
import { RouterLink, RouterView, useRoute} from 'vue-router' import { RouterLink, RouterView, useRoute} from 'vue-router'
const route = useRoute() const route = useRoute()
const showRouterView = const showRouterView = computed(() =>
computed(() => route.path !== '/') route.path !== '/'
)
</script> </script>
<template> <template>
...@@ -23,7 +25,7 @@ const showRouterView = ...@@ -23,7 +25,7 @@ const showRouterView =
</main> </main>
</template> </template>
<style scoped> <style>
nav { nav {
display: flex; display: flex;
justify-content: center; justify-content: center;
......
<script setup lang="ts">
import startPageFirst from '@/assets/background/startpage_first.png';
import startPageSecond from '@/assets/background/startpage_second.png';
import startPageThird from '@/assets/background/startpage_third.png';
</script>
<template> <template>
<div class="h-screen w-full bg-cover bg-center m-0 p-0" :style="{ backgroundImage: `url(${startPageFirst})` }"></div> <div class="background-container">
<div class="h-screen w-full bg-cover bg-center m-0 p-0" :style="{ backgroundImage: `url(${startPageSecond})` }"></div>
<div class="h-screen w-full bg-cover bg-center m-0 p-0" :style="{ backgroundImage: `url(${startPageThird})` }"></div>
</template>
<style scoped> <div>
html, body { <img src="@/assets/start_page/sti.png" alt="Background" class="w-full">
@apply m-0;
}
.h-screen {
@apply p-0;
}
</style>
<div class="absolute bottom-0 left-0 ml-2 w-60 pl-10">
<h2>Kom igang med målene dine! 🚀</h2>
<p>Sett deg et sparemål og utfordre deg selv til å spare mer.</p>
</div>
<div class="absolute bottom-0 0 right-0 mr-4 pr-10">
<h2>Sparetips 💡 Visste du at...</h2>
<p>...du kan spare penger på å lage matpakke til jobb?</p>
<p>...du kan spare penger på å bruke kollektivtransport?</p>
<p>...du kan spare penger på å kjøpe brukt?</p>
</div>
</div>
</div>
</template>
<script setup lang="ts">
</script>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment