Yarninator/toddler_shop_frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added price container styling

Browse source
This commit is contained in:
Yarne Coppens 2024-08-24 12:49:53 +02:00
parent 1b71fdb0ce
commit f6cf4e5695
2 changed files with 23 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
static/style/main.css
View file

@ -1,3 +1,12 @@
div.card{ div.card{
background-color: #afda8e; background-color: #afda8e;
}
#price_container {
background-color: white;
margin-top: auto;
margin-bottom: auto;
margin-left: auto;
margin-right: auto;
border-style: solid;
} }

28
templates/index.jinja
View file

@ -19,10 +19,10 @@
<img class="product_image"> <img class="product_image">
<div class="container text-center product_placeholder"> <div class="text-center product_placeholder">
<div class="row row-cols-5" style="margin-bottom: 10rem;"> <div class="row" style="margin-bottom: 5rem;">
<div class="col product_col"> <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=""> <img src="" class="card-img-top product_image" alt="">
<div class="card-body"> <div class="card-body">
<h5 class="card-title product_price"></h5> <h5 class="card-title product_price"></h5>
@ -30,7 +30,7 @@
</div> </div>
</div> </div>
<div class="col product_col"> <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=""> <img src="" class="card-img-top product_image" alt="">
<div class="card-body"> <div class="card-body">
<h5 class="card-title product_price"></h5> <h5 class="card-title product_price"></h5>
@ -38,7 +38,7 @@
</div> </div>
</div> </div>
<div class="col product_col"> <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=""> <img src="" class="card-img-top product_image" alt="">
<div class="card-body"> <div class="card-body">
<h5 class="card-title product_price"></h5> <h5 class="card-title product_price"></h5>
@ -46,7 +46,7 @@
</div> </div>
</div> </div>
<div class="col product_col"> <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=""> <img src="" class="card-img-top product_image" alt="">
<div class="card-body"> <div class="card-body">
<h5 class="card-title product_price"></h5> <h5 class="card-title product_price"></h5>
@ -54,7 +54,7 @@
</div> </div>
</div> </div>
<div class="col product_col"> <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=""> <img src="" class="card-img-top product_image" alt="">
<div class="card-body"> <div class="card-body">
<h5 class="card-title product_price"></h5> <h5 class="card-title product_price"></h5>
@ -62,27 +62,27 @@
</div> </div>
</div> </div>
</div> </div>
<div class="row row-cols-1 row-cols-md-3 g-4"> <div class="row">
<div class="col" style="width: 44.5rem; margin-right: 5rem;"> <div class="col-8">
<div class="card"> <div class="card">
<div class="container text-center product_placeholder"> <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"> <div class="col">
<img src="http://127.0.0.1:8000/icons/cart" height="100rem" width="100rem" class="card-img-top" alt=""> <img src="http://127.0.0.1:8000/icons/cart" height="100rem" width="100rem" class="card-img-top" alt="">
</div> </div>
<div class="col"> <div class="col" id="price_container">
<h5 class="card-title" id="totalprice">&euro; 0</h5> <h2 class="card-title" id="totalprice">&euro; 0</h2>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="col" style="width: 11.5rem; margin-right: 5rem;"> <div class="col-2">
<div class="card"> <div class="card">
<img src="http://127.0.0.1:8000/icons/cash" height="100rem" width="100rem" class="card-img-top" alt=""> <img src="http://127.0.0.1:8000/icons/cash" height="100rem" width="100rem" class="card-img-top" alt="">
</div> </div>
</div> </div>
<div class="col" style="width: 11.5rem; margin-right: 5rem;"> <div class="col-2">
<div class="card"> <div class="card">
<img src="http://127.0.0.1:8000/icons/creditcard" height="100rem" width="100rem" class="card-img-top" alt=""> <img src="http://127.0.0.1:8000/icons/creditcard" height="100rem" width="100rem" class="card-img-top" alt="">
</div> </div>