Recept

Lievelingsrecept

Kies een eigen recept als inhoud. Bekijk hier voorbeelden van vorige jaren.

Stap 1: Logo

Start met het ontwerpen van een nieuwe logo (Illustrator) Tip: deel van je voornaam + recept in verwerken.

Stap 2: HTML-tags

We gaan per hoofdstuk werken aan een website, vul telkens de juiste HTML-tags aan.

Stap 3: CSS: HTML-selectors opmaken

Bepaal nu aan de hand van je logo je kleuren (tekst- en achtergrondkleuren). Denk na over volgende items:

Kleuren
Typografie/lettertype
Compositie

Stap 4: Semantische structuurelementen

Maak een printscreen van je afgewerkte site en plaats hier rond je basisblokken met de juiste HTML namen.


<body>
	<nav>
		<ul>
			<li> <a href="index.html"> Home </a> </li>
			<li>  <a href="links.html"> Links </a> </li>
			<li>  <a href="contact.html"> Contact </a> </li>
		</ul>
	</nav>
	
	<header>
		<img src="img/logo.svg" width="20%">
	</header>
	
	<main>
		<div id="kolomLinks">
			<h1>Pannekoeken</h1>
			<p>Gemaakt door Van Haver T.</p>

			<table>
				<tr>
					<th>Aantal</th>
					<th width="120"> Niveau</th>
					<th>Tijd</th>
				</tr>
				<tr>
					<td> <i class="fas fa-user-friends"> </i> </td>
					<td>
						<i class="fas fa-star"> </i>
						<i class="fas fa-star"> </i>
						<i class="fas fa-star"> </i>
						<i class="far fa-star"> </i>
					</td>
					<td> <i class="fas fa-clock"> </i> 10 min.</td>
				</tr>
			</table>
	</div>
	<div id="kolomRechts">
		<h2>Ingrediënten</h2>
		<ul>
			<li>boter</li>
			<li>melk</li>
			<li> <img src="img/egg.png">eieren</li>
		</ul>
		<h2> Bereidingswijze</h2>
		<ol>
			<li>Uitleg 1</li>
			<li>Uitleg 1</li>
		</ol>
	</div>	
	</main>
	
	<footer>
		Copyright © Van Haver T. - 2021-22
	</footer>

</body>


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

		body {
			font-family: 'Open Sans', sans-serif;
			background-color:black;
			color:white;
		}
		h1, h2 {
			font-family: 'Pacifico', cursive;
			color:lightblue;
		}
		nav a {
			color:#fff;
			text-decoration:none;
			margin-right:20px;
			font-size:22px;
			color:black;
			font-weight:bold;
		}
		a:hover {
			color:#8b102b;
		}
		nav ul {
			height:80px;
			list-style:none;
			display:flex;
			justify-content:center;
			align-items: center;
			background-color:lightblue;
		}
		header {
			background-image:url(img/banner.jpg);
			background-repeat: no-repeat;
			background-color:#95e1f9;
			background-position:top left;
			width:100%;
			height:350px;
			display:flex;
			justify-content:center;
			align-items: center;
		}
		main {
			display:flex;
			justify-content:center;
			margin-top:40px;
		}
		#kolomLinks {
			width:220px;
			border:1px solid #95e1f9;
			margin-right:60px;
			padding:20px;
		}
		#kolomRechts {
			width:600px;
			border:1px solid #95e1f9;
		}
		footer {
			text-align:center;
			margin-top:80px;
		}