16 files changed, 246 insertions, 0 deletions
diff --git a/license b/license
new file mode 100644
index 0000000..a86647f
--- /dev/null
+++ b/license
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 lonkaars
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/public/cart.php b/public/cart.php
new file mode 100644
index 0000000..b888cd8
--- /dev/null
+++ b/public/cart.php
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<?php include 'head.php' ?>
+	<title>dit is product</title>
+</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>
+				<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>
+			<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>
+	<?php include 'footer.php' ?>
+</body>
+</html>
diff --git a/public/footer.css b/public/footer.css
new file mode 100644
index 0000000..0483da2
--- /dev/null
+++ b/public/footer.css
@@ -0,0 +1,12 @@
+footer {
+	margin-top: 48px;
+}
+
+footer .flex {
+	display: flex;
+	justify-content: space-between;
+}
+
+footer .flex * {
+	margin: 20px 0;
+}
diff --git a/public/footer.php b/public/footer.php
new file mode 100644
index 0000000..57831be
--- /dev/null
+++ b/public/footer.php
@@ -0,0 +1,8 @@
+<footer>
+	<div class="inner limwidth">
+		<div class="flex">
+			<span class="left">de winkel website</span>
+			<span class="right">dit is een footer hoor</span>
+		</div>
+	</div>
+</footer>
diff --git a/public/global.css b/public/global.css
new file mode 100644
index 0000000..9120a5f
--- /dev/null
+++ b/public/global.css
@@ -0,0 +1,18 @@
+@import url("nav.css");
+@import url("footer.css");
+
+:root {
+	--width: 750px;
+}
+
+body, html {
+	margin: 0;
+	font-family: "Inter", "Neue Haas Grotesk", "Helvetica", "Helvetica Neue", -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+.limwidth {
+	margin: 0 auto;
+	max-width: var(--width);
+	padding: 0 12px;
+}
+
diff --git a/public/head.php b/public/head.php
new file mode 100644
index 0000000..eddf94b
--- /dev/null
+++ b/public/head.php
@@ -0,0 +1,5 @@
+<meta charset='utf-8'>
+<meta http-equiv='X-UA-Compatible' content='IE=edge'>
+<meta name='viewport' content='width=device-width, initial-scale=1'>
+<link rel='stylesheet' type='text/css' media='screen' href='global.css'>
+<link rel='stylesheet' type='text/css' media='screen' href='mdi.css'>
diff --git a/public/home.css b/public/home.css
new file mode 100644
index 0000000..1c7c67e
--- /dev/null
+++ b/public/home.css
@@ -0,0 +1,10 @@
+.s1 h1 {
+	text-align: center;
+	font-size: 3rem;
+	line-height: 1.5ex;
+	font-weight: 800;
+}
+
+.s1 {
+	margin-top: 8rem;
+}
diff --git a/public/img/cart-outline.svg b/public/img/cart-outline.svg
new file mode 100644
index 0000000..b94d36a
--- /dev/null
+++ b/public/img/cart-outline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>cart-outline</title><path d="M17,18A2,2 0 0,1 19,20A2,2 0 0,1 17,22C15.89,22 15,21.1 15,20C15,18.89 15.89,18 17,18M1,2H4.27L5.21,4H20A1,1 0 0,1 21,5C21,5.17 20.95,5.34 20.88,5.5L17.3,11.97C16.96,12.58 16.3,13 15.55,13H8.1L7.2,14.63L7.17,14.75A0.25,0.25 0 0,0 7.42,15H19V17H7C5.89,17 5,16.1 5,15C5,14.65 5.09,14.32 5.24,14.04L6.6,11.59L3,4H1V2M7,18A2,2 0 0,1 9,20A2,2 0 0,1 7,22C5.89,22 5,21.1 5,20C5,18.89 5.89,18 7,18M16,11L18.78,6H6.14L8.5,11H16Z" fill="currentColor" /></svg>
diff --git a/public/img/placeholder.png b/public/img/placeholder.png
new file mode 100644
index 0000000..3db3f5a
--- /dev/null
+++ b/public/img/placeholder.png
diff --git a/public/index.php b/public/index.php
new file mode 100644
index 0000000..0f268cb
--- /dev/null
+++ b/public/index.php
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<?php include 'head.php' ?>
+	<title>webshop</title>
+	<link rel='stylesheet' type='text/css' media='screen' href='home.css'>
+</head>
+<body>
+	<?php include 'navbar.php' ?>
+	<div class="main limwidth">
+		<div class="s1">
+			<h1>hier zijn de aanbiedingen</h1>
+			<ul>
+				<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga iure id repudiandae sapiente voluptatibus soluta ducimus? Molestiae pariatur optio saepe nihil fugit, commodi atque! Consequatur at omnis recusandae nostrum tenetur!</li>
+				<li>Ut, repudiandae? Iusto pariatur cupiditate, ipsam magni accusamus asperiores possimus nulla, magnam quas consectetur fugit vero quibusdam officiis quod, vitae soluta nostrum placeat itaque sit beatae quos laudantium? Temporibus, magni.</li>
+				<li>Ipsum fugiat corporis impedit iusto possimus neque alias at sunt commodi deserunt! Numquam perferendis rem ea provident velit dicta quae. Eveniet officia iure porro aliquid minus alias at commodi nam?</li>
+			</ul>
+		</div>
+	</div>
+	<?php include 'footer.php' ?>
+</body>
+</html>
diff --git a/public/mdi.css b/public/mdi.css
new file mode 100644
index 0000000..04060b7
--- /dev/null
+++ b/public/mdi.css
@@ -0,0 +1,8 @@
+.mdi {
+	display: inline-block;
+	width: 24px;
+	height: 24px;
+}
+
+.mdi.cart-outline { background-image: url("img/cart-outline.svg"); }
+
diff --git a/public/nav.css b/public/nav.css
new file mode 100644
index 0000000..f5f540c
--- /dev/null
+++ b/public/nav.css
@@ -0,0 +1,19 @@
+nav {
+	position: static;
+	border-bottom: 2px dashed currentColor;
+}
+
+nav span { vertical-align: middle; }
+nav a {
+	text-decoration: none;
+	color: currentColor;
+	margin-right: 16px;
+}
+
+nav .site-icon {
+	height: 48px;
+	display: inline-block;
+}
+
+nav .site-icon .icon { margin: 12px 2px; }
+nav .site-icon .label { font-weight: 500; }
diff --git a/public/navbar.php b/public/navbar.php
new file mode 100644
index 0000000..34d88bb
--- /dev/null
+++ b/public/navbar.php
@@ -0,0 +1,11 @@
+<nav>
+	<div class="limwidth">
+		<a href="/" class="site-icon">
+			<span class="icon mdi cart-outline"></span>
+			<span class="label">winkel</span>
+		</a>
+		<a href="/products.php"><span>producten</span></a>
+		<a href="/login.php"><span>login</span></a>
+		<a href="/cart.php"><span>mand (</span><span id="cartn">0</span><span>)</span></a>
+	</div>
+</nav>
diff --git a/public/product.php b/public/product.php
new file mode 100644
index 0000000..8733562
--- /dev/null
+++ b/public/product.php
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<?php include 'head.php' ?>
+	<title>dit is product</title>
+</head>
+<body>
+	<?php include 'navbar.php' ?>
+	<div class="main limwidth">
+		<h2>yeah product</h2>
+		<img src="img/placeholder.png" alt="">
+		<span class="price">3,45</span>
+		<span class="name">courgette</span>
+		<span class="info">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla dignissimos laboriosam voluptatem facilis tempore quos, asperiores eos molestiae voluptates commodi animi enim quae deleniti? Ratione optio eligendi rem eveniet reiciendis.</span>
+	</div>
+	<?php include 'footer.php' ?>
+</body>
+</html>
diff --git a/public/products.css b/public/products.css
new file mode 100644
index 0000000..a698a15
--- /dev/null
+++ b/public/products.css
@@ -0,0 +1,20 @@
+.products {
+	--grid-columns: 3;
+	display: grid;
+	grid-template-columns: repeat(var(--grid-columns), 1fr);
+	gap: 8px;
+}
+@media (max-width: 600px) { .products { --grid-columns: 2; } }
+@media (max-width: 400px) { .products { --grid-columns: 1; } }
+
+.products .product {
+	background-color: #0001;
+	padding: 8px;
+	border-radius: 8px;
+}
+
+.product img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
diff --git a/public/products.php b/public/products.php
new file mode 100644
index 0000000..b42e4db
--- /dev/null
+++ b/public/products.php
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<?php include 'head.php' ?>
+	<title>producten</title>
+	<link rel='stylesheet' type='text/css' media='screen' href='products.css'>
+</head>
+<body>
+	<?php include 'navbar.php' ?>
+	<div class="main limwidth">
+		<h2>lijst met producten:</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>
+				<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>
+			<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>
+	<?php include 'footer.php' ?>
+</body>
+</html>