From f6cf4e56950e9aca1fbd82d5d6f3c89c626e3f61 Mon Sep 17 00:00:00 2001
From: Yarne Coppens <git.w8x3v@simplelogin.com>
Date: Sat, 24 Aug 2024 12:49:53 +0200
Subject: [PATCH] Added price container styling

---
 static/style/main.css |  9 +++++++++
 templates/index.jinja | 28 ++++++++++++++--------------
 2 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/static/style/main.css b/static/style/main.css
index 8f7a289..29b9a00 100644
--- a/static/style/main.css
+++ b/static/style/main.css
@@ -1,3 +1,12 @@
 div.card{
     background-color: #afda8e;
+}
+
+#price_container {
+    background-color: white;
+    margin-top: auto;
+    margin-bottom: auto;
+    margin-left: auto;
+    margin-right: auto;
+    border-style: solid;
 }
\ No newline at end of file
diff --git a/templates/index.jinja b/templates/index.jinja
index 70f87d7..1ddba30 100644
--- a/templates/index.jinja
+++ b/templates/index.jinja
@@ -19,10 +19,10 @@
 
     <img class="product_image">
 
-    <div class="container text-center product_placeholder"> 
-        <div class="row row-cols-5" style="margin-bottom: 10rem;">
+    <div class="text-center product_placeholder"> 
+        <div class="row" style="margin-bottom: 5rem;">
           <div class="col product_col">
-            <div class="card" style="width: 10rem; height: 15rem;">
+            <div class="card h-100">
                 <img src="" class="card-img-top product_image" alt="">
                 <div class="card-body">
                   <h5 class="card-title product_price"></h5>
@@ -30,7 +30,7 @@
             </div>
           </div>
           <div class="col product_col">
-            <div class="card" style="width: 10rem; height: 15rem;">
+            <div class="card h-100">
                 <img src="" class="card-img-top product_image" alt="">
                 <div class="card-body">
                   <h5 class="card-title product_price"></h5>
@@ -38,7 +38,7 @@
             </div>
           </div>
           <div class="col product_col">
-            <div class="card" style="width: 10rem; height: 15rem;">
+            <div class="card h-100">
                 <img src="" class="card-img-top product_image" alt="">
                 <div class="card-body">
                   <h5 class="card-title product_price"></h5>
@@ -46,7 +46,7 @@
             </div>
           </div>
           <div class="col product_col">
-            <div class="card" style="width: 10rem; height: 15rem;">
+            <div class="card h-100">
                 <img src="" class="card-img-top product_image" alt="">
                 <div class="card-body">
                   <h5 class="card-title product_price"></h5>
@@ -54,7 +54,7 @@
             </div>
           </div>
           <div class="col product_col">
-            <div class="card" style="width: 10rem; height: 15rem;">
+            <div class="card h-100">
                 <img src="" class="card-img-top product_image" alt="">
                 <div class="card-body">
                   <h5 class="card-title product_price"></h5>
@@ -62,27 +62,27 @@
             </div>
           </div>
         </div>
-        <div class="row row-cols-1 row-cols-md-3 g-4">
-            <div class="col" style="width: 44.5rem; margin-right: 5rem;">
+        <div class="row">
+            <div class="col-8">
                 <div class="card">
                     <div class="container text-center product_placeholder">
-                        <div class="row">
+                        <div class="row" style="width: 70%;margin-left: auto;margin-right: auto;">
                             <div class="col"> 
                                 <img src="http://127.0.0.1:8000/icons/cart" height="100rem" width="100rem" class="card-img-top" alt="">
                             </div>
-                            <div class="col">
-                                <h5 class="card-title" id="totalprice">&euro; 0</h5>
+                            <div class="col" id="price_container">
+                                <h2 class="card-title" id="totalprice">&euro; 0</h2>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
-            <div class="col" style="width: 11.5rem; margin-right: 5rem;">
+            <div class="col-2">
                 <div class="card">
                     <img src="http://127.0.0.1:8000/icons/cash" height="100rem" width="100rem" class="card-img-top" alt="">
                 </div>
             </div>
-            <div class="col" style="width: 11.5rem; margin-right: 5rem;">
+            <div class="col-2">
                 <div class="card">
                     <img src="http://127.0.0.1:8000/icons/creditcard" height="100rem" width="100rem" class="card-img-top" alt="">
                 </div>