finishing and fine-tuning TODO NEXT : project page

src/views/Contact.vue

@@ -30,7 +30,6 @@ const toggleModal = () => {
   modalActive.value = ! modalActive.value
 }
 const onSubmit = () => {
-  //document.getElementById("demo-form").submit();
   // initializing forms erors :
   errors.value = {
   name : false,
@@ -93,34 +92,34 @@ const onSubmit = () => {
       <h3><span>contact</span></h3> 
     </div>
     <div class="form">
-      <p>Please full up the form to keep in touch&nbsp;!</p>
+      <p class="subtitle">Please full up the form to keep in touch&nbsp;!</p>
       <form @submit.prevent="onSubmit()">
         <div class="form-item">
           <label class="first" for="name">Your name</label>
           <input v-model="name" id="name" type="text" placeholder="Name">
           <div class="error" v-if="errors.name">
-            Please enter your name
+            Please enter your name !
           </div>
         </div>
         <div class="form-item">
           <label for="coordinates">Your coordinates</label>
           <input v-model="coordinates" id="coordinates" type="text" placeholder="A phone or a mail (or both)">
           <div class="error"  v-if="errors.coordinates">
-            Please enter some coordinates
+            Please enter some coordinates !
           </div>
         </div>
         <div class="form-item">
           <label for="company">Your company</label>
           <input v-model="company" id="company" type="text" placeholder="Company ">
           <div class="error"  v-if="errors.company">
-            Please enter your company
+            Please enter your company !
           </div>
         </div>
         <div class="form-item">
           <label for="message-content">Your message</label>
           <textarea v-model="content" id="message-content" rows="5" cols="22" placeholder="Message"></textarea>
           <div class="error"  v-if="errors.content">
-            Please write something
+            Please write something !
           </div>
         </div>
         <p class="small">
@@ -173,6 +172,7 @@ const onSubmit = () => {
     margin: 1em;
   }
 }
+
 .content{
   & > .title {
     & .logo{
@@ -259,6 +259,9 @@ const onSubmit = () => {
     }
   }
 }
+p.subtitle{
+  margin: auto 0.5em;
+}
 .error{
   color: $red-light;
   text-align: center;