<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://fonts.googleapis.com/css?family=Sacramento" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<header>
<div class="top id="top"></div>
<div class="cirkel"></div>
<div class="titel">
<h1>Meesterlijke Klassiekers</h1>
<h6>Met Peter Goossens</h6>
</div>
<nav class="navtop">
<a href="#">Recepten</a>
<a href="#">Over Peter Goossens</a>
<a href="#">Nieuwsbrief</a>
<a href="#">Contact</a>
</nav>
</header>
<main>
<div class="recept">
<h2>- Ambachtelijke Garnaalkroketten -</h2>
</div>
<h3 class="ingredienten">INGREDIËNTEN</h3>
<h3 class="personen">VOOR 4 PERSONEN</h3>
<div class="ingredient1">
<h4>Garnalenmelk</h4>
<ul>
<li>1,2Kg ongepelde garnalen</li>
<li>5dL volle melk</li>
<li>4 selderblaadjes</li>
<li>10 peperbolletjes</li>
<li>2 blaadjes laurier</li>
<li>2 takjes tijm</li>
</ul>
</div>
<div class="ingredient2">
<h4>Kroketvulling</h4>
<ul>
<li>10g geweekte gelatine</li>
<li>100g boter</li>
<li>110g bloem</li>
<li>4,5dL garnalenmelk</li>
<li>1/2 citroen</li>
<li>1 mesp nootmuskaat</li>
</ul>
</div>
<div class="ingredient3">
<h4 class="vervolg">Vervolg Kroketvulling</h4>
<ul>
<li>peper & zout</li>
<li>2 eierdooiers</li>
<li>80ml volle room</li>
<li>1 scheutje olie</li>
</ul>
</div>
<div class="ingredient4">
<h4>Paneren en Bakken</h4>
<ul>
<li>150g bloem</li>
<li>5 eieren</li>
<li>1 scheutje olie</li>
<li>peper & zout</li>
<li>150g panko</li>
<li>3,5L arachideolie</li>
</ul>
</div>
<div class="ingredient5">
<h4>Afwerking</h4>
<ul>
<li>5el peterselie</li>
<li>1 citroen</li>
</ul>
</div>
<div class="tip">
<h4>TIP!</h4><p>Maak de vulling +- 12 uur op voorhand. <br> Zo kan ze voldoende lang opstijven in de koelkast.</p>
</div>
<div class="categorie prijsklasse">
<h4>€10-20</h4><i class="material-icons">shopping_basket</i>
</div>
<div class="categorie tijdsduur">
<h4>+1 uur</h4><i class="material-icons">hourglass_empty</i>
</div>
<div class="categorie voorgerecht">
<h4>Voorgerecht</h4><i class="material-icons">restaurant</i>
</div>
<div class="garnalenmelk"><h5>BEREIDING</h5><h4>Garnalenmelk</h4><p>Pel de garnalen voor de vulling en houd 200g gepelde garnalen aan de kant. Zet een pan op het vuur, <br> meng alle ingrediënten en laat 20 minuten sudderen. <br> Passeer de melk en zet apart.</p></div>
<div class="vulling">
<h4>Kroketvulling</h4>
<p>Week de gelatinebladen in een kom ijswater. <br> Smelt de boter in een pan en voeg al roerend de bloem toe. Laat deze blonde, warme roux even doorkoken om een bloemsmaak te vermijden.</p>
<p>Blus de roux met de garnalenmelk. Zet de pan van het vuur, knijp de geweekte gelatinebladen uit en voeg ze toe. Roer de 200g gepelde garnalen die je aan de kant hield, de citroen en de gelatine goed onder de massa. Kruid met peper, zout en een mespunt geraspte nootmuskaat. Roer het mengsel van eidooiers en room rustig onder het geheel.</p>
<p>Stort het mengsel uit op een dikte van ongeveer 2cm in een geoliede schaal. Dek tot tegen het mengsel af met plasticfolie. Laat minstens 12 uur rusten in de koelkast.</p>
</div>
<div class="paneren">
<h4>Paneren en Bakken</h4>
<p>Leg bakpapier op een snijplank en ontvorm de opgesteven vulling op het bakpapier. Bestrooi de vulling lichtjes met gezeefde bloem. Snijd in porties van ongeveer 4cm op 5cm.</p>
<p>Vul een schaal met de bloem, één met de losgeklopte eieren, olie, peper en zout en één schaal met de panko. Wentel elke portie eerst in de bloem. Haal ze daarna door de eieren. <br> Wentel ze ten slotte in de panko.</p>
<p>Laat de kroketten ongeveer 1 uur opstijven in de koelkast.<br> Frituur ze goudgeel op 180°C in arachideolie.</p>
</div>
<div class="serveren">
<h4>Afwerking</h4><p>Frituur de peterselie krokant op 180°C. Snijd een citroen in 4 partjes en ontdoe ze van schil, pitjes en nerven. Serveer met de garnaalkrokketten.</p></div>
<h2 class="smakelijk">Smakelijk!</h2>
<div class="images">
<div class="closeup"></div>
<div class="overview"></div>
<div class="garnalen"></div>
<div class="peterselie"></div>
</div>
</main>
<footer>
<div class="biografie">
<div class="bioimg"></div>
<div class="biotext">
<h3>OVER PEETER GOOSSENS</h3>
<p>Peter Goossens is dé Godfather van de Belgische gastronomie. Reeds op jonge leeftijd had hij zijn eigen restaurant. In 1992 opende hij het legendarische 'Hof van Cleve' in Kruishoutem.</p>
<p>Sindsdien won hij zowat alle prijzen die er te winnen zijn. Het ‘Hof van Cleve’ heeft drie Michelin sterren. Gault Millau erkende Peter al in 1991 met 15/20 en twee koksmutsen. In 1994 werd dit 17/20 en drie koksmutsen. De vierde koksmuts en 19/20 volgden in 2000. In 2004 werd hij Chef van het jaar en sindsdien heeft hij een beoordeling van 19,5/20.</p>
<p>Peter Goossens is lid van The Mastercooks of Belgium.</p>
</div>
</div>
<div class="nieuwsbrief">
<h3>NIEUWSBRIEF</h3>
<p>Schrijf je in voor de nieuwsbrief en ontvang maandelijks Meesterlijke Klassiekers in je mailbox! </p>
<form action="#">
<label for="naam">Naam:</label>
<input type="text" name="naam" id="naam" required>
<label for="email">E-mail:</label>
<input type="email" name="email" id="email" required>
<input type="submit" name="doorsturen" value="Verzenden">
</form>
</div>
<nav class="navbot">
<p>© 2016 - Website door Ilian D'Haese</p>
</nav>
<div class="backtotop">
<a href="#top"><i class="material-icons">publish</i></a>
</div>
</footer>
body {
background-color: rgba(200, 200, 200, 0.4);
}
header {
width: 1200px;
height: 200px;
margin: 30px auto 30px auto;
background: white;
border: 2px solid rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
.cirkel {
width: 150px;
height: 150px;
border: 10px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
background: url(http://www.menuvandedag.be/menuvandedaggoeswordpress/wp-content/uploads/2014/10/7ec6c894-55d8-11e2-b8a2-78b3336c92d9_original.jpg);
background-size: 200px;
position: relative;
top: -20px;
left: 50px;
float: left;
}
.cirkel:hover {
border: 10px solid rgba(247, 131, 0, 0.5);
}
.titel {
float: left;
margin: 20px 0px 0px 80px;
}
h1 {
font-family: 'Josefin Sans', sans-serif;
font-size: 60px;
}
h6 {
color: #f78300;
font-family: 'Montserrat', sans-serif;
margin: 5px;
font-size: 20px;
}
.navtop {
font-family: 'Montserrat', sans-serif;
font-size: 14px;
width: 800px;
position: relative;
top: 55px;
right: -480px;
}
.navtop a {
border: 2px solid rgba(0, 0, 0, 0.1);
border-radius: 5px;
padding: 3px 5px 3px 5px;
margin: 10px;
text-decoration: none;
color: rgba(0, 0, 0, 0.5);
}
.navtop a:hover {
border: 2px solid rgba(247, 131, 0, 0.5);
background: #f78300;
color: white;
}
.top {
position: absolute;
top: 0;
left: 50%;
}
main {
width: 1200px;
height: 1500px;
margin: 0px auto 30px auto;
background-color: white;
background-image: url(http://www.njam.tv/thumbnail/full/13094/garnaalkroketten.png);
background-repeat: no-repeat;
background-size: 1200px 1550px;
border: 2px solid rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
.recept {
text-align: center;
margin: 20px auto 30px auto;
font-family: 'Sacramento', cursive;
font-size: 50px;
}
.ingredient1 {
width: 200px;
margin: 0px 50px 0px 50px;
float: left;
clear: both;
}
.ingredient2 {
width: 200px;
margin: 0px 50px 0px 0px;
float: left;
}
.ingredient3 {
width: 200px;
margin: 0px 50px 0px 0px;
float: left;
}
.ingredient4 {
width: 200px;
margin: 0px 50px 0px 0px;
float: left;
}
.ingredient5 {
width: 100px;
margin: 0px 50px 0px 0px;
float: left;
}
h3 {
color: #f78300;
font-family: 'Montserrat', sans-serif;
margin: 0px 50px 10px 50px;
}
.ingredienten {
float: left;
}
.personen {
float: right;
}
h4 {
font-family: 'Josefin Sans', sans-serif;
font-weight: bold;
margin: 5px 0px 5px 0px;
}
.vervolg {
color: rgba(255,255,255,0);
}
.vervolg:hover {
color: black;
}
ul {
font-family: 'Josefin Sans', sans-serif;
}
p {
font-family: 'Josefin Sans', sans-serif;
margin-bottom: 10px;
}
h5 {
color: #f78300;
font-family: 'Montserrat', sans-serif;
margin: 0px 0px 10px 0px;
}
.garnalenmelk {
clear: both;
width: 400px;
float: left;
position: relative;
top: 370px;
left: 50px;
display: block;
}
.vulling {
clear: both;
width: 400px;
float: left;
position: relative;
top: 380px;
left: 50px;
display: block;
z-index: 2;
}
.paneren {
clear: both;
width: 400px;
float: left;
position: relative;
top: 390px;
left: 50px;
display: block;
z-index: 2;
}
.serveren {
clear: both;
width: 400px;
float: right;
position: relative;
top: 190px;
right: 50px;
display: block;
z-index: 2;
}
.smakelijk {
margin: 20px auto 30px auto;
font-family: 'Sacramento', cursive;
font-size: 50px;
position: relative;
top: 1150px;
left: 350px;
width: 200px;
text-align: center;
z-index: 2;
}
.tip {
float: right;
clear: both;
width: 400px;
height: 60px;
margin: 50px 50px 0px 0px;
border: 2px solid rgba(0, 0, 0, 0.1);
border-radius: 10px;
padding: 10px;
}
.tip:hover {
border: 2px solid #f78300;
}
.categorie {
float: right;
width: 100px;
height: 60px;
border: 2px solid rgba(0, 0, 0, 0.1);
color: rgba(0, 0, 0, 0.5);
border-radius: 10px;
padding: 10px 0px 0px 0px;
text-align: center;
}
.categorie:hover {
border: 2px solid #f78300;
color: #f78300;
}
.prijsklasse {
clear: both;
margin: 20px 50px 20px 56px;
}
.tijdsduur {
margin: 20px 0px 20px 56px;
}
.voorgerecht{
margin: 20px 0px 20px 56px;
}
.images {
width: 650px;
height: 600px;
position: relative;
top: 550px;
left: 490px;
z-index: 1;
}
.closeup {
width: 150px;
height: 150px;
background-image: url(http://cdn.mytaste.org/i?u=http%3A%2F%2Fwww.sixpacks.be%2Fwp-content%2Fuploads%2F2015%2F01%2Fkaaskroket3-300x142.jpg&w=330&h=270&c=1);
background-size: 150px 150px;
border-radius: 10px;
position: relative;
top: 30px;
}
.overview {
width: 250px;
height: 250px;
background-image: url("http://cdn.mytaste.org/i?u=http%3A%2F%2Frecipes.sanoma.be%2Fimages%2Flibelle-lekker%2Fq100%2Fw600%2Fh450%2F2244%2Fgarnaalkroketten.jpg&w=330&h=270&c=1");
background-size: 280px 250px;
border-radius: 10px;
position: relative;
left: 180px;
top: -50px;
}
.garnalen {
width: 120px;
height: 100px;
background-image: url("http://www.nederlands-dis.nl/wp-content/uploads/2014/05/grijze-garnalen-gepeld.jpg");
background-size: 160px 130px;
border-radius: 10px;
position: relative;
left: 460px;
top: -220px;
}
.peterselie {
width: 100px;
height: 80px;
background-image: url(http://www.simkookt.nl/wp-content/uploads/blogger/-mz2kvWPv2NM/UP15zlmFNUI/AAAAAAAANpI/ahcgsc-Wqts/s640/DSC_2071.jpg);
background-size: 160px 130px;
border-radius: 10px;
position: relative;
left: 100px;
top: -120px;
}
.closeup:hover, .overview:hover, .garnalen:hover, .peterselie:hover {
-webkit-filter: brightness(110%);
}
footer {
width: 1200px;
height: 410px;
margin: 30px auto 30px auto;
}
.biografie {
width: 580px;
height: 350px;
background: white;
border: 2px solid rgba(0, 0, 0, 0.1);
border-radius: 10px;
float: left;
clear: both;
}
.bioimg {
height: 300px;
width: 200px;
background: url(http://www.njam.tv/thumbnail/full/13008/peter-goossens-1.png);
background-size: 260px 400px;
background-position: 0px -50px;
border-radius: 10px;
float: left;
position: relative;
top: 25px;
left: 50px;
}
.bioimg:hover {
-webkit-filter: brightness(105%);
}
.biotext {
width: 260px;
padding: 0px 0px 0px 80px;
float: left;
}
.biografie h3 {
margin: 23px 0px 10px 0px;
}
.nieuwsbrief {
width: 580px;
height: 350px;
background: white;
border: 2px solid rgba(0, 0, 0, 0.1);
border-radius: 10px;
float: right;
margin-bottom: 30px;
}
.nieuwsbrief h3 {
text-align: center;
margin-top: 23px;
}
.nieuwsbrief p {
text-align: center;
width: 400px;
margin: 10px auto 25px auto;
}
form {
width: 300px;
margin: 50px auto 25px auto;
font-family: 'Josefin Sans', cursive;
}
label {
margin: 10px 0px 5px 0px;
display: block;
}
input {
display: block;
font-family: 'Josefin Sans', cursive;
border: 2px solid rgba(0, 0, 0, 0.1);
border-radius: 5px;
outline: none;
padding: 2px;
width: 100%;
}
input[type=submit] {
background: #f78300;
color: white;
border: 2px solid #f78300;
width: 30%;
float: right;
margin: 10px -6px 5px 0px;
}
input[type=submit]:hover {
border: 2px solid rgba(247, 131, 0, 0.1);
background-color: rgba(247, 131, 0, 0.8);
}
input[type=text]:focus {
border: 2px solid rgba(247, 131, 0, 0.5);
}
input[type=text]:hover {
border: 2px solid rgba(247, 131, 0, 0.5);
}
input[type=email]:focus {
border: 2px solid rgba(247, 131, 0, 0.5);
}
input[type=email]:hover {
border: 2px solid rgba(247, 131, 0, 0.5);
}
.verplicht {
color: red;
padding-left: 10px;
float: left;
}
.navbot {
clear: both;
width: 500px;
margin: 0px auto 30px auto;
text-align: center;
}
.backtotop {
width: 30px;
height: 25px;
margin: 0px auto 0px auto;
background: white;
border: 2px solid rgba(0, 0, 0, 0.1);
border-radius: 10px;
position: relative;
bottom: 60px;
left: 575px;
text-align: center;
padding: 10px;
}
.backtotop a {
color: rgba(0, 0, 0, 0.5);
}
.backtotop a:hover {
color: #f78300;
}
