feat: update some functionalities of the design

index.html

@@ -154,10 +154,10 @@ <h3 class="about-head">Who am I?</h3>
         through my work as a developer, with a mission to make a positive impact with every line of code I write.
       </p>
 
-      <h3 class="about-head" style="margin-bottom: 22px;">Skills</h3>
+      <h3 class="about-head" style="margin-bottom: 25px;">Skills</h3>
 
-      <h4 class="about-head" style="margin-bottom: 15px;">Front-End development tools</h4>
-      <div class="frontend row" style="margin-bottom: 17px;">
+      <h4 class="about-head" style="margin-bottom: 24px;">Front-End development tools</h4>
+      <div class="frontend row" style="margin-bottom: 29px;">
         <div class="col-md-1 col-xs-3 p-skil-marg"><img src="property/html.png" alt="">
           <p class="p-skill text-center">HTML</p>
         </div>
@@ -175,8 +175,8 @@ <h4 class="about-head" style="margin-bottom: 15px;">Front-End development tools<
         </div>
       </div>
 
-      <h4 class="about-head" style="margin-bottom: 14px;">Backend development tools</h4>
-      <div class="frontend row" style="margin-bottom: 14px;">
+      <h4 class="about-head" style="margin-bottom: 24px;">Backend development tools</h4>
+      <div class="frontend row" style="margin-bottom: 29px;">
         <div class="col-md-1 col-xs-3 p-skil-marg"><img src="property/django.png" alt="">
           <p class="p-skill text-center">Django</p>
         </div>
@@ -188,8 +188,8 @@ <h4 class="about-head" style="margin-bottom: 14px;">Backend development tools</h
         </div>
       </div>
 
-      <h4 class="about-head" style="margin-bottom: 14px;">Database</h4>
-      <div class="frontend row" style="margin-bottom: 17px;">
+      <h4 class="about-head" style="margin-bottom: 24px;">Database</h4>
+      <div class="frontend row" style="margin-bottom: 29px;">
         <div class="col-md-1 col-xs-3 p-skil-marg"><img src="property/mysql.png" alt="">
           <p class="p-skill text-center">MySQL</p>
         </div>
@@ -202,11 +202,12 @@ <h4 class="about-head" style="margin-bottom: 14px;">Database</h4>
         </div>
       </div>
 
-      <h4 class="about-head" style="margin-bottom: 14px;">Others</h4>
-      <div class="frontend row" style="margin-bottom: 17px;">
+      <h4 class="about-head" style="margin-bottom: 24px;">Others</h4>
+      <div class="frontend row" style="margin-bottom: 29px;">
         <div class="col-md-1 col-xs-2 p-skil-marg"><img src="./property/c.png" alt="">
           <p class="p-skill text-center">C programming</p>
         </div>
+        <div class="col-xs-1 visible-xs"></div>
         <div class="col-md-1 col-xs-2  p-skil-marg"><img src="property/linux.png" alt="">
           <p class="p-skill text-center">Linux</p>
         </div>
@@ -287,15 +288,20 @@ <h3 class="p-head">Clovar CMS</h3>
       <a href="https://musoye.hashnode.dev" target="_blank" class="img"><img src="./property/hashnode.png" alt=""></a>
     </div>
 
+    <hr class="visible-md visible-lg visible-sm"/>
+
     <div class="f-last  row">
       <p class="col-md-10 c">&copy; Copyright 2021-2022, All Rights Reserved</p>
-      <p class="col-md-2 " style="padding-right: 3px;"><a href="https://www.behance.net/enobongedidion" target="_blank" style="text-decoration: null;color: white;"><img src="./property/Vector.png" alt=""> Designed by <span style="text-decoration: underline;">Eno</span></a>   
+      <p class="col-md-2 " style="padding-right: 3px;color: #fefefe"><a href="https://www.behance.net/enobongedidion" target="_blank" style="text-decoration: null;color: #fefefe;"><span style="display: inline-block;color: #303 !important;background-color: white;border-radius: 50%;padding: 5px;font-weight: 900;">Bě</span> Designed by <span style="text-decoration: underline;">Eno</span></a>   
       </p>
     </div>
   </footer>
 
+
+  <!-- Contact form implementation -->
+
   <div class="bg-cover contact-form" id="contact-form">
-    <button id="cancel_contact" style='margin-left: 86%;padding-top: 2px;'><img src="./property/x.svg" alt=""></button>
+    <button id="cancel_contact" style='margin-left: 91%;margin-top:5px;padding-top: 2px;border: 0px hidden white;background-color: transparent;'><img src="./property/x.svg" alt=""></button>
 
     <div class="form">
       <h3 class="text-center">Get in touch</h3>

style.css

@@ -59,7 +59,7 @@ button.hambuger {
 /* Toggle display */
 .toggle-display {
   width: 190px;
-  height: 260px;
+  height: 300px;
   background-color: #f5f5f5;
   border-radius: 4px;
   position: absolute;
@@ -147,7 +147,7 @@ button.hambuger {
   color: #fff;
   font-family: "Nunito", sans-serif;
   margin-top: 10px;
-  font-size: 24px;
+  font-size: 26px;
   margin-left: 47.8%;
 }
 .job-below {
@@ -382,7 +382,7 @@ button.hambuger {
     width: 98%;
     margin-left: auto;
     margin-right: auto;
-    margin-bottom: 10px;
+    margin-bottom: 80px;
   }
   .p-head {
     width: 150px;