Voorbeelden webshops:

Logo

Start eerst met het ontwerpen van een leuk logo en benamming voor je winkel. Hou het simplistisch, zoek naar een leuke typo met of zonder beeld.

Kijk bij concurrenten, hieronder een link van een gallerij met moderen logo's.

HTML van je index.php 

<body>

<div id="top">
		<img src="logo.png"  class="logo">
	
		<nav>
				<a href="index.html">Home</a>
				<a href="nike.php">Nike</a>
				<a href="prijs.php">Prijs</a>
				<a href="kleur.php">Kleur</a>
				<a href="admin.php">Admin</a>
			</nav>
	</div>
	
	<header></header>
	
	<div class="container">
	  <ul class="submenu">
			<li>
				<a href="filter.php">grijs</a>
			</li>
			<li>
				<a href="filter.php">blauw</a>
			</li>
			<li>
				<a href="filter.php">wit</a>
			</li>
	  </ul>
		<section>
			<div class="kolom">
				/* hier komen onze producten in */
			</div>
		
		</section>
		<footer>Copyright © Van Haver Tania - schoolproject Richtpunt Ninove 2020-2021</footer>
	</div> <!-- einde container -->
	
</body>

Vormgeven: opmaak.css 

@charset "utf-8";
/* CSS Document Van Haver*/

* {
  box-sizing:border-box;
}
body {
	font-size: 14px;
	margin:0px;
	color:black
}
h2 {
	color: red;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
}
/* opmaak menu */
nav a {
	margin-right: 20px;
	text-decoration: none;
	color: black;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
	font-size:1.2rem;
}
a {
	color:red;
	text-decoration:none;
}
a:hover {
	color:blue;
}
nav {
	height:50px;
	display: flex;
	justify-content: center;
	align-items: center;
		flex: 90%;
}
#top{ 
display: flex;
background-color: darkgray;
	padding: 0px;
}
.logo{
	flex: 10%;
}
header {
	height:450PX;
	background-image:url("img/banner.jpg");
	background-size: contain;
	background-repeat: no-repeat;
	
}
.container{
	width:1000px;
	margin:0 auto;
}

section{
	display: flex;
	flex-wrap: wrap;
    padding: 5px;
}
.kolom3 {
	width:25%;
    margin: 5px;
    overflow:auto;
}
ul.submenu  {
    display: flex!important;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    padding-left: 0;
    background-color:#ccc;
}
ul.submenu  li {
    list-style-type: none!important;
    display: inline-block!important;
    width: calc(100% / 3);
    height:40px;
    line-height:40px;
    text-align: center;
}

Maak een tabel 'producten' en plaats hier het volgende aantal kolommen in:

Plaats hierin 5 artikels (rijen) naar keuze.

Maak nu een index.php pagina. Hierin geef je de titel en prijs mee met het product. Zorg voor een Lees meer knop, deze link je naar een 2de pagina details.php. Let goed op de link! Je stuurt de id mee!

<?php
while($row = $result->fetch_assoc()) {
<?php echo $row["id"];?>
<?php echo $row["titel"];?>
<?php echo $row["prijs"];?>
<button><a href="detail.php?id=<?php echo $row['id']? title="">">Lees meer </a></button>
<?php } ?>

In de detail.php pagina zorg je dat de link via de $_GET methode wordt opgehaald:

$id=$_GET["id"]

SELECT * FROM winkel WHERE id = $id";

Toon hierin alle info van het product.