opemail

open_mail/src/components/about_us.vue

@@ -1,4 +1,6 @@
 <template>
+<div>
+<h2 class="why-h">Why OpenMail?</h2>
 <div class="about-us">
     <div class="about-us-container">
         <h2 class="why">Anonymous</h2>
@@ -61,6 +63,7 @@
         like Aldus PageMaker including versions of Lorem Ipsum.</p>
     </div>
 </div>
+</div>
 </template>
 
 <script>
@@ -90,4 +93,11 @@ export default {
     font-family: 'Poppins';
     color: white;
 }
+.why-h {
+    margin: 5px;
+    margin-left: 25px;
+    font-family: 'Poppins';
+    font-size: 30px;
+    color: #2F2F2F;
+}
 </style>

open_mail/src/components/footers.vue

@@ -0,0 +1,25 @@
+<template>
+<div class="footers">
+        <p class="footer">OpenMail 2022. With 1secmail.</p>
+</div>
+</template>
+
+<script>
+export default {
+    name: 'footers'
+}
+</script>
+
+<style scoped>
+.footers { /* 21-73-A6 */
+    background: #248EFF;
+    padding: 25px;
+    border-radius: 12px 12px 1px 1px;
+}
+.footer {
+    text-align: center;
+    margin: 0;
+    color: white;
+    font-family: 'Poppins';
+}
+</style>

open_mail/src/views/Account.vue

@@ -173,17 +173,16 @@ export default defineComponent({
     box-shadow: 0px 10px 20px #C2C2C2;
 }
 .letter {
-    background: white;
+    background: #FFFFFF;
     padding: 50px;
     font-family: 'Poppins';
     border-radius: 8px;
     animation: activate .18s;
     text-align: justify;
     box-shadow: 0px 5px 15px #C2C2C2;
     float: right;
-
+    transition: .15s;
 }
-
 .null-mail {
     text-align: center;
     font-family: 'arial';

open_mail/src/views/Home.vue

@@ -29,6 +29,7 @@
     </div>
     <!-- About us -->
     <about_us/>
+    <footers/>
 
   </div>
 </template>
@@ -37,10 +38,11 @@
 import { defineComponent } from 'vue';
 import { mapGetters, mapActions, mapMutations } from 'vuex'
 import about_us from '../components/about_us.vue'
+import footers from '../components/footers.vue'
 
 export default defineComponent({
   name: 'Home',
-  components: { about_us },
+  components: { about_us, footers },
   computed: mapGetters(['getEmails']),
   methods: {
     ...mapActions(['register_mail']),
@@ -80,11 +82,11 @@ export default defineComponent({
 }
 .mail {
   margin-top: 1.1%; margin-bottom: 1.1%;
-  margin-left: 15%; margin-right: 15%;
+  margin-left: 10%; margin-right: 10%;
   padding: 50px;
   border: 1px solid rgb(231, 231, 231);
   border-radius: 15px;
-  background: url('https://64.media.tumblr.com/4c5a34bd6b1da7ac7f48766ab3297e2e/tumblr_pqaqoc66A11ta0hnbo1_1280.jpg');
+  background: url('../assets/welcm.jpg');
   background-repeat: no-repeat;
   background-size: cover;
   box-shadow: 0px 3px 5px rgb(179, 179, 179);
@@ -168,6 +170,7 @@ span:hover{
   font-family: 'Poppins';
   color: rgb(28, 15, 216);
   text-decoration: underline;
+  cursor: pointer;
 }
 
 .register {