style improved

MemeGenerator/static/css/style.css

@@ -4,4 +4,17 @@ body {
 
 input-box {
     margin: 10px 0px;
+}
+
+index-card {
+    margin: 20rem;
+}
+
+card-body {
+    margin: auto;
+}
+
+.form-center {
+    display: block;
+    text-align: center;
 }
\ No newline at end of file

MemeGenerator/templates/index.html

 {% extends "base.html" %}
 
 {% block body %}
-<form action="/search" method="GET">
-    <input type="text" value="{{ query }}" name="q" />
-    <input type="submit" value="Search"/>
-</form>  
+<div class="card index-card" style="margin: 20rem;">
+    <div class="card-header">Your next Viral Meme starts here...</div>
+    <div class="card-body">
+        <div class="form-center">
+            <form action="/search" method="GET">
+                <input type="text" value="{{ query }}" name="q" />
+                <input type="submit" value="Search"/>
+            </form>  
+        </div>
+    </div>
+</div>
+
 {% endblock %}

MemeGenerator/templates/search_res.html

@@ -7,10 +7,12 @@
         <div class="card border-dark mb-3" style="width: 18rem;">
             <img src="{{item.url}}" class="card-img-top" alt="meme">
             <div class="card-body">
-                <form action="/setup" method="GET">
-                    <input type="hidden" value="{{ item.url }}" name="url" />
-                    <input type="submit" value="This One!"/>
-                </form>  
+                <div class='form-center'>
+                    <form action="/setup" method="GET">
+                        <input type="hidden" value="{{ item.url }}" name="url" />
+                        <input type="submit" value="This One!"/>
+                    </form>  
+                </div>
             </div>
         </div>
     </div>

MemeGenerator/templates/setup.html

@@ -2,8 +2,8 @@
 
 {% block body %}
 <div class="row">
-    <div class="'col-12">
-        <div class="card" style="margin:1rem;">
+    <div class="col-12">
+        <div class="card" style="margin:1rem; max-width:30rem;">
             <div class="card-header">
               Let's Customize!
             </div>
@@ -11,7 +11,7 @@
                 <div class="image-card">
                     <img src="{{ url }}" class="card-img-top" alt="selected_img">
                 </div>
-                <div class="meme-form">
+                <div class="meme-form form-center">
                     <form action="/generate" method="GET">
                         <div class="row">
                             <div class="col-6">