3 files changed, 31 insertions, 25 deletions
diff --git a/public/cart.css b/public/cart.css
new file mode 100644
index 0000000..2b5df65
--- /dev/null
+++ b/public/cart.css
@@ -0,0 +1,15 @@
+.product {
+	padding: 8px;
+	background-color: #0001;
+	margin-bottom: 8px;
+	border-radius: 8px;
+	display: flex;
+}
+
+.product img {
+	height: 70px;
+}
+
+.product input[type=number]::-webkit-inner-spin-button {
+	opacity: 1;
+}
diff --git a/public/cart.php b/public/cart.php
index b888cd8..d02428d 100644
--- a/public/cart.php
+++ b/public/cart.php
@@ -3,32 +3,21 @@
 <head>
 	<?php include 'head.php' ?>
 	<title>dit is product</title>
+	<link rel="stylesheet" href="cart.css">
 </head>
 <body>
 	<?php include 'navbar.php' ?>
 	<div class="main limwidth">
 		<h2>dingen in je mand</h2>
 		<div class="products">
-			<a href="/product.php?id=123" class="product">
-				<img src="img/placeholder.png" alt="">
-				<span class="price">3,45</span>
-				<span class="name">courgette</span>
-			</a>
-			<a href="/product.php?id=123" class="product">
-				<img src="img/placeholder.png" alt="">
-				<span class="price">3,45</span>
+			<div class="product">
+				<img src="img/placeholder.png" alt="productafbeelding">
 				<span class="name">courgette</span>
-			</a>
-			<a href="/product.php?id=123" class="product">
-				<img src="img/placeholder.png" alt="">
+				<label for="123-count">hoeveelheid:</label>
+				<input type="number" value="1" min="1" max="20" id="123-count">
+				<button id="123-delete">weghalen</button>
 				<span class="price">3,45</span>
-				<span class="name">courgette</span>
-			</a>
-			<a href="/product.php?id=123" class="product">
-				<img src="img/placeholder.png" alt="">
-				<span class="price">3,45</span>
-				<span class="name">courgette</span>
-			</a>
+			</div>
 		</div>
 	</div>
 	<?php include 'footer.php' ?>
diff --git a/public/products.css b/public/products.css
index dae3805..7a4f3ab 100644
--- a/public/products.css
+++ b/public/products.css
@@ -20,11 +20,13 @@
 	object-fit: cover;
 }
 
-.product span {
-	display: block;
-	color: CanvasText;
-	text-decoration: none;
-}
+.product span { display: block; }
 
-.product .price::before { content: "\20ac "; }
-.product .price { font-size: 1.5rem; }
+.product .price::before {
+	content: "\20ac";
+	margin-right: 0.3ex;
+	font-size: 80%;
+}
+.product .price {
+	font-size: 1.5rem;
+}