feat: add animation on homepage loading

- Adjust bg image size and position
- Add css animation to h1 and bg image

Resolves: #119

web-app/django/VIM/apps/main/static/main/css/index.css

@@ -1,19 +1,40 @@
+@keyframes settleDown {
+  0% {
+    opacity: 0;
+    transform: translateY(-15px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0px);
+  }
+}
+
+@keyframes fadeInUp {
+  0% {
+    opacity: 0.2;
+    transform: translateY(100%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0px);
+  }
+}
+
 .content-container {
   height: 80vh;
   position: relative;
 }
 
-.bg-decor {
+#bg-decor {
   position: absolute;
   bottom: 0;
-  left: 0;
-  width: 100%;
-  opacity: 60%;
+  animation: fadeInUp 0.7s ease-in-out 0s forwards;
 }
 
 .content-container h1 {
   margin-bottom: 1rem;
   font-size: 3rem;
+  animation: settleDown 0.7s ease-in-out 0s forwards;
   color: #435334;
 }
 
@@ -40,9 +61,3 @@
 .start-btn:hover {
   color: #435334;
 }
-
-/* .line {
-  width: 1px;
-  height: 60%;
-  background-color: #9eb384;
-} */

web-app/django/VIM/apps/main/templates/main/index.html

@@ -11,14 +11,12 @@
 {% endblock css_files %}
 
 {% block content %}
-  <div class="container content-container d-flex align-items-center">
+  <div class="container content-container d-flex align-items-center justify-content-center">
     <div class="z-2">
       <div class="row">
         <div class="col-6">
           <h1>
-            <span style="color: #876445;">Universal</span> Musical Instrument
-            <br />
-            Lexicon
+            <span style="color: #876445;">Universal</span> Musical Instrument Lexicon
           </h1>
         </div>
         <div class="col-6 notranslate">
@@ -54,7 +52,7 @@ <h1>
         </div>
       </div>
     </div>
-    <img src="{% static "main/images/bg-decor.svg" %}" alt="background decoration" class="z-1 bg-decor" />
+    <img id="bg-decor" src="{% static "main/images/bg-decor.svg" %}" alt="background decoration" class="z-1" />
   </div>
 {% endblock content %}