end of project

src/views/404.vue

@@ -0,0 +1,70 @@
+<script setup>
+import { onMounted } from 'vue';
+import { useBurgerStore } from '@/stores/burger'
+const burger = useBurgerStore();
+onMounted(() => {
+  burger.check()
+})
+
+</script>
+
+<template>
+  <div class="content">
+    <p class="p-404">
+    404...
+    </p>
+    <p class="emoji">🤔<span class="small">(Hmmm...)</span></p>
+    <p>The page you are looking for does not seem to exist!</p>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import '../style/colors.scss';
+
+
+.content{
+
+  & > p{
+    text-indent:0;
+    color : $main-normal;
+    opacity: 1;
+    font-size : 2em;
+    padding:1rem 1.25rem;
+    text-align: center;
+    animation: text 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95);
+    &.p-404{
+      padding:1rem 1.25rem;
+      font-size : 7rem;
+      
+    }
+    &.emoji{
+      margin-top : 5rem;
+      padding:1rem 1.25rem;
+      font-size : 15rem;
+      line-height: 5rem;
+    }
+  }
+}
+.small{
+  font-size : 3rem;
+  
+}
+
+@keyframes text{
+  0%{
+    opacity : 0;
+  }
+  33%{
+    opacity : 0;
+  }
+  100%{
+    opacity:1;
+  }
+}
+
+@media (width < 600px){
+  .content{
+    width: 95%;
+  }
+}
+</style>