Add background image

goldberr · Apr 2, 2021 · 94019f002736d8427dadfa6cce07d2bd0d9dce38 · 94019f0
1 parent ce4acdb
commit 94019f002736d8427dadfa6cce07d2bd0d9dce38
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 138 deletions.
diff --git a/public/index.html b/public/index.html
@@ -4,12 +4,12 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <link rel="" href="<%= BASE_URL %>favicon.ico">
+    <title>Magebit Test</title>
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong>We're sorry but magebit-test doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->

diff --git a/src/App.vue b/src/App.vue
@@ -1,28 +1,15 @@
 <template>
-  <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
+  <v-app>
+    <Header />
+  </v-app>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
-
+import Header from "./components/Header";
 export default {
-  name: 'App',
+  name: "App",
   components: {
-    HelloWorld
-  }
-}
+    Header,
+  },
+};
 </script>
-
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/assets/summer.png b/src/assets/summer.png
diff --git a/src/components/Header.vue b/src/components/Header.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <div class="img">
+      <img :src="image" width="900" height="677" />
+    </div>
+  </div>
+</template>
+
+<script>
+import image from "@/assets/summer.png";
+
+export default {
+  data: function() {
+    return {
+      image: image,
+    };
+  },
+};
+</script>
+
+<style>
+.img {
+  position: absolute;
+  right: 0px;
+  top: 0px;
+  bottom: 0px;
+}
+</style>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue