diff --git a/src/App.vue b/src/App.vue
index 633a5dfe4e547c48bfa93740a290ba5ba370930a..cb4c15f891899fee1d411f57b84caefeaaf5a777 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,44 +4,46 @@ import TheWelcome from './components/TheWelcome.vue'
 </script>
 
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-
     <div class="wrapper">
-      <HelloWorld msg="You did it!" />
+      <a  @mousemove="num=4" @mouseout="num=2">
+        <div style="z-index:11" >
+          <h1 class="font-bold text-2xl font-Rubik">
+            JavaScript
+          </h1>
+          <p class="text-right text-neutral-500">
+            7 articles{{ num }}
+          </p>
+        </div>
+        <div v-for="item in 10" :key="item"  :style="{top:(item*num)+'px',left:(item*num)+'px',zIndex:10-item}" />
+        
+      </a>
+      
     </div>
-  </header>
-
-  <main>
-    <TheWelcome />
-  </main>
 </template>
-
-<style scoped>
-header {
-  line-height: 1.5;
+<script>
+export default {
+  data() {
+    return {
+      num:2
+    }
+  }
 }
+</script>
 
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
+<style scoped>
+a{
+position: relative;
+cursor: pointer;
 }
-
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
-
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
+a>div{
+  position: absolute;
+  background: #fff;
+  width: 170px;
+  height: 210px;
+    border-radius: 6px;
+    border: rgba(0,0,0,.16) solid 1px;
+    box-shadow: 0 2px 8px rgba(0,0,0,.16), 0 -4px 8px hsla(0,0%,100%,.8);
+    transition: all .4s ease;
+    padding: 12px;
 }
 </style>