Fix UI - added text to landing page

static/css/style.css

@@ -16,9 +16,10 @@ body {
 
 .card {
   border-radius: 10px;
-  margin-top: 100px !important;
-  height: 400px !important;
-  width: 300px;
+  margin-top: 50px !important;
+  height: 350px !important;
+  width: 250px;
+  margin: auto;
 }
 
 .card.has-text-centered .card-header,
@@ -166,3 +167,7 @@ body {
     transform: scale(1);
   }
 }
+
+.hero {
+  margin-top: 70px !important;
+}

templates/index.html

@@ -38,9 +38,14 @@
       </div>
     </nav>
     <main role="main">
+          <div class="hero">
+            <p class="is-size-3 has-text-black has-text-weight-bold has-text-centered">Upload any Document to get an instant Quiz</p>
+            <p class="is-size-4 has-text-weight-bold has-text-centered">You Know 📖, You Grow 🚀</p>
+            <p class="is-size-5 has-text-black has-text-weight-medium has-text-centered"> Practice More • Learn More </p>
+          </div>
       <div class="card has-text-centered">
         <img src="https://cdn4.iconfinder.com/data/icons/files-and-folders-thinline-icons-set/144/File_PDF-512.png"
-          alt="upload" />
+          alt="upload"/>
         <form action="http://localhost:5000/quiz" method="POST" enctype="multipart/form-data">
           <div id="file-js-example" class="file has-name is-fullwidth">
             <label class="file-label">