award: Silver Medal

components/Awards.vue

+<template>
+  <div class="awards-wrap" :class="{ active: showAwards }">
+    <div class="title">Hi! Our team got</div>
+    <div class="prize-wrap">
+      <div class="medal">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="486.9"
+          height="491"
+          viewBox="0 0 486.9 491"
+          class="ui-h-8 ui-w-8 -ui-ml-1 -ui-mt-1"
+        >
+          <path
+            d="M309.2,428.6l-60.4-45.4a6.3,6.3,0,0,0-7.6,0l-60.4,45.4a6.33,6.33,0,0,1-8.8-1.2,6.46,6.46,0,0,1-1.3-3.8V285.9a6.27,6.27,0,0,1,6.3-6.3H313a6.27,6.27,0,0,1,6.3,6.3h0V423.5a6.27,6.27,0,0,1-6.3,6.3A6.36,6.36,0,0,1,309.2,428.6Z"
+            fill="#96cb9d"
+          ></path>
+          <polygon
+            points="278.8 401.2 319.3 429 317.5 280 278.8 280 278.8 401.2"
+            fill="#007738"
+          ></polygon>
+          <path
+            d="M317.4,427,245,380.3c-.4-.5.4-.5,0,0L172.6,427a1.09,1.09,0,0,1-1.5,0,1.22,1.22,0,0,1-.3-.9V273.7a1.2,1.2,0,0,1,1.1-1.2H318.2a1.2,1.2,0,0,1,1.1,1.2V426.2a1.11,1.11,0,0,1-1,1.2A1.09,1.09,0,0,1,317.4,427Z"
+            fill="none"
+            stroke="#f9fafb"
+            stroke-miterlimit="10"
+            stroke-width="18"
+          ></path>
+          <circle cx="242.5" cy="186.8" r="127.9" fill="#e5e4e4"></circle>
+          <path
+            d="M278.9,66.8A127.44,127.44,0,0,1,334,141.6c17.9,66.6-20.9,136.1-87.1,155.8a127.81,127.81,0,0,1-72,.3,127.91,127.91,0,1,0,104-230.9Z"
+            fill="#bababa"
+          ></path>
+          <path
+            d="M378.3,187.4c0,13.8-13.9,25.2-17.9,37.7-4.2,12.9.2,30.3-7.6,41s-25.8,12-36.7,19.9c-10.7,7.8-17.4,24.6-30.3,28.7-12.5,4-27.6-5.5-41.4-5.5s-28.9,9.5-41.4,5.5c-12.9-4.2-19.5-20.9-30.3-28.7s-28.8-9.1-36.7-19.9-3.4-28.1-7.6-41c-4-12.5-17.9-23.9-17.9-37.7s13.9-25.2,17.9-37.7c4.2-12.9-.2-30.3,7.6-41s25.8-12,36.7-19.9C183.4,81,190.1,64.2,203,60.1c12.5-4,27.6,5.5,41.4,5.5s28.9-9.5,41.4-5.5c12.9,4.2,19.5,20.9,30.3,28.7s28.8,9.1,36.7,19.9,3.4,28.1,7.6,41C364.4,162.2,378.3,173.6,378.3,187.4Z"
+            fill="none"
+            stroke="#f9fafb"
+            stroke-miterlimit="10"
+            stroke-width="18"
+          ></path>
+          <path
+            d="M264.2,264.9c-4.8,0-9.4-3.2-13.5-6.1-2.8-2-6.3-4.5-8.2-4.5s-5.4,2.5-8.2,4.5c-5,3.5-10.7,7.5-16.7,5.6s-8.4-8.7-10.4-14.7c-1-3-2.4-7.1-3.7-8.1s-5.8-1.1-9-1.1c-6.2-.1-13.3-.2-17.1-5.3s-1.7-11.8.2-17.8c1-3.1,2.3-7.3,1.7-9-.5-1.5-3.9-4-6.4-5.9-5.1-3.8-10.8-8.1-10.8-14.6s5.8-10.8,10.8-14.6c2.5-1.9,5.9-4.4,6.4-5.9.5-1.7-.8-5.9-1.7-9-1.8-5.9-3.9-12.6-.2-17.8s10.8-5.3,17.1-5.3c3.2,0,7.6-.1,9-1.1s2.7-5.1,3.7-8.1c2-5.9,4.3-12.7,10.4-14.7,5.9-1.9,11.6,2.1,16.7,5.6,2.8,2,6.4,4.5,8.2,4.5s5.4-2.5,8.2-4.5c5-3.5,10.7-7.5,16.7-5.6s8.4,8.7,10.4,14.7c1,3,2.4,7.1,3.7,8.1s5.8,1.1,9,1.1c6.2.1,13.3.2,17.1,5.3s1.7,11.8-.2,17.8c-1,3.1-2.3,7.3-1.7,9,.5,1.5,3.9,4,6.4,5.9,5.1,3.8,10.8,8.1,10.8,14.6s-5.8,10.8-10.8,14.6c-2.5,1.9-5.9,4.4-6.4,5.9-.5,1.7.8,5.9,1.7,9,1.8,5.9,3.9,12.6.2,17.8s-10.8,5.3-17.1,5.3c-3.2,0-7.6.1-9,1.1s-2.7,5.1-3.7,8.1c-2,5.9-4.3,12.7-10.4,14.7A11.85,11.85,0,0,1,264.2,264.9Zm-21.7-20.6c5,0,9.6,3.2,14,6.3,2,1.4,6.6,4.6,7.8,4.3,1.4-.4,3.2-5.8,4.1-8.4,1.7-5,3.4-10.1,7.3-13s9.4-3,14.7-3c2.7,0,8.3-.1,9.1-1.2s-.9-6.4-1.6-8.9c-1.6-5.1-3.2-10.3-1.7-15,1.5-4.5,5.8-7.7,9.9-10.8,2.4-1.8,6.8-5.1,6.8-6.6s-4.4-4.8-6.8-6.6c-4.2-3.1-8.5-6.3-9.9-10.8-1.5-4.7.1-9.9,1.7-15,.8-2.6,2.4-7.9,1.6-8.9s-6.4-1.2-9.1-1.2c-5.3-.1-10.8-.2-14.7-3s-5.6-8-7.3-13c-.9-2.6-2.7-7.9-4.1-8.4-1.2-.4-5.8,2.9-7.8,4.3-4.4,3.1-8.9,6.3-14,6.3s-9.6-3.2-14-6.3c-2-1.4-6.6-4.6-7.8-4.3-1.4.4-3.2,5.8-4.1,8.4-1.7,5-3.4,10.1-7.3,13s-9.4,3-14.7,3c-2.7,0-8.3.1-9.1,1.2s.9,6.4,1.6,8.9c1.6,5.1,3.2,10.3,1.7,15-1.5,4.5-5.8,7.7-9.9,10.8-2.4,1.8-6.8,5.1-6.8,6.6s4.4,4.8,6.8,6.6c4.2,3.1,8.5,6.3,9.9,10.8,1.5,4.7-.1,9.9-1.7,15-.8,2.6-2.4,7.9-1.6,8.9s6.4,1.2,9.1,1.2c5.3.1,10.8.2,14.7,3s5.6,8,7.3,13c.9,2.6,2.7,7.9,4.1,8.4,1.2.4,5.8-2.9,7.8-4.3,4.4-3.1,9-6.3,14-6.3Z"
+            fill="#bfbebe"
+          ></path>
+        </svg>
+      </div>
+      <div class="text">Silver Medal</div>
+    </div>
+    <div class="title">in iGEM Grand Jamboree 2023!</div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    const showAwards = true;
+
+    return {
+      showAwards,
+    };
+  },
+  mounted() {
+    const timer = setTimeout(() => {
+      this.showAwards = false;
+    }, 1000);
+  },
+};
+</script>
+
+<style lang='scss' scoped>
+.awards-wrap {
+  position: fixed;
+  right: 0;
+  top: $height-menu;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(255, 255, 255, 1);
+  height: 48px;
+  padding: 5px 10px;
+  border-radius: 0 0 0 10px;
+  z-index: 9998;
+  box-shadow: rgba(0, 0, 0, 0.2) -2px 6px 7px;
+  font-size: 100%;
+  transition: all 1s;
+
+  .prize-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    transition: all 1s;
+
+    .medal {
+      height: 100%;
+      transition: all 1s;
+
+      svg {
+        height: 100%;
+        width: auto;
+        transition: all 1s;
+      }
+
+      .text {
+        transition: all 0.5s;
+      }
+    }
+  }
+
+  .title {
+    height: 0;
+    overflow: hidden;
+    font-size: 0%;
+    text-align: center;
+    transition: all 1s;
+  }
+
+  &.active {
+    top: 40%;
+    left: 30vw;
+    right: 30vw;
+    height: 200px;
+    font-size: 200%;
+    border-radius: 20px;
+    background-color: rgba(255, 255, 255, 0.8);
+
+    .prize-wrap {
+        height: 50%;
+    }
+
+    .title {
+        font-size: 100%;
+        height: 100%;
+    }
+  }
+}
+
+@media (max-width: 991px) {
+    .awards-wrap {
+        &.active {
+            left: 5vw;
+            right: 5vw;
+            font-size: 150%;
+            height: 250px;
+
+            .prize-wrap {
+                height: 40%;
+                
+                .text {
+                    font-size: 150%;
+                }
+            }
+
+           .title {
+                font-size: 100%;
+                height: fit-content;
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file

pages/index.vue

 <template>
   <div class="home loading" @click="start">
     <Header title="Home" :decorate="false"></Header>
+    <Awards></Awards>
     <HomeBanner></HomeBanner>
     <Transition name="fade">
       <div class="device-tips-wrap" v-if="deviceTipsActive">