gedurende de eerste periode op school moest ik(binnen een uur) een advertentie website na-maken voor een html toets, hiervoor moesten we de opgedane HTML en CSS kennis toepassen.

html_VB.png

(hierboven de voorbeeld en instructies die er werden gegeven)

HTML_per_1

(Hier mijn gemaakte product, hieronder de code voor de website)

/index.html

<!doctype html>
<html lang="nl">
	<head>
		<meta charset="utf-8">
		<meta name="description" content="case 2 - html/css toets">
		<meta name="author" content="Valiant Hekert">
		<link rel="stylesheet" href="css/css.css">
		<title>
			Duinenbrood
		</title>
	</head>
	<body>
		<img src="img/logo.png" alt="logo" id="logo">
		<section id="navbar">
			<div>
				<a href="https://www.facebook.com/
                                  BakkervanMaanenRijnsburg/" target="_">
					<img src="img/facebook_icon.png" 
                                                     alt="facebook icon">
				</a>
			</div>
			<div id="twt">
				<a href="https://twitter.com/
                                             bakkervanmaanen" target="_">
				     	<img src="img/twitter_icon.png" 
                                       alt="twitter icon">
				</a>
			</div>
			<div id="yt">
				<a href="https://www.youtube.com/channel/
                                       UCD0WfGc8bSaePLYbWMRHciw" target="_">
					<img src="img/youtube_icon.png" 
                                          alt="youtube icon">
				</a>
			</div>
		</section>
		<div id="haan">
			<img src="img/duinenuurtje3.png" alt="haan" 
                        id="haanimg">
		</div>
		<div id="kip-text">
			Profiteer van <br><b>Het Duinenuurtje</b><br> Bij 
Bakker van Maanen<br> Tot 09.00 uur betaalt u voor een <br>Duinen Orginal 
slechts<br><b>1.95</b>
		</div>
		<section>
			<div class="textblock" id="opschietertje">
				<p>
                                <h1>De eerste de lekkerste</h1>
				De bakker stroopt zijn mouwen op, hij kijkt, 
hij voelt, hij ruikt. De kleur is mooi, de korst voelt goed. Het brood is 
net uit de oven, knispert nog zacht na en wacht nu geduldig af. Duinen 
Original ligt elke dag, in elke Van Maanen winkel, als eerste op het schap. 
Vroege vogels genieten niet alleen van het meest verse Duinenbrood, maar 
pakken ook nog eens een mooi voordeeltje mee. Tot 9 uur is een Duinen 
Original maar €1,95. Wees er dus ’s ochtends als de kippen bij, dan heb 
je niet alleen de eerste maar ook de lekkerste!
                              </p>
			</div>
			<div class="textblock" id="uitschieter">
				<p><h1>Sinds 1985</h1>
				Sinds 1985 maken de bakkers van Van Maanen 
hun Duinenbrood. Het begon ooit tijdens een lange wandeling in de duinen, 
waar de wind en de zilte lucht speelden met het gras, en het zand liet 
stuiven van plezier. Dit gaf de bakkers van Van Maanen de inspiratie die 
nodig was om te komen tot het originele Duinenbrood. Duinen Original was 
de eerste en is nog steeds de lekkerste.</p>
			</div>
			<div class="textblock">
				<p><h1>Kenmerken Duinenbrood</h1>
				Niet alleen de ingrediënten maken het 
brood zo lekker, maar juist ook de samenstelling van de ingrediënten en het 
bakproces. Doordat het brood lekker mals is, blijft het ook langer vers. En 
is het heel goed te bewaren in de vriezer, waardoor je iedere dag van vers 
brood kunt genieten. De knapperige korst belegd met zonnepitten geven het 
brood nog een extra bite. We krijgen veel van onze klanten terug dat het 
brood ook zo geschikt is voor kinderen, terwijl het een meergranenbrood 
is.</p>
			</div>
		</section>
		<div id="broodselctie">
			<img src="img/duinen-soorten.png" alt="broot soorten" 
                                                          id="duinensoorten">
		</div>
	</body>

</html>

/css/css.css

/* top right bottom left */
html, body{
	background-image:	url(../img/background2.png);
	height:				100%;
	width:				99%;
	color:				white;
	font-size:			1.15em;
	font-family:		Fira-sans, Verdana, Geneva, sans-serif;
}
b{
	font-size:			1.5em;
}
#haan{
	position:			fixed;
	right:				0;
	height:				100%;
	z-index:			1;
	bottom:				0;
}
	#haanimg{
		height:				132%
	}
#navbar{
	height:				10%;
	width:				10%;
	position:			absolute;
	right:				0;
	top:				0;
	margin:				2% 440px 0 0;
}
	#twt{
		margin-top:			-74px;
		margin-left:		92px;
	}
	#yt{
		margin-top:			-78px;
		margin-left:		180px;
	}
#logo{
	height:				30%;
}
#kip-text{
	z-index:			2;
	width:				280px;
	text-align:			center;
	position:			fixed;
	right:				0;
	margin:				180px 10px 0 0;
	font-size:			0.7em;
}
.textblock{
	width: 				40%;
	padding-left:		10%;
	margin:				5% 0;
}
	#uitschieter{
		padding-left:		30%;
	}
	#opschietertje{
		margin-top:			-1%;
	}
#broodselctie{
	padding:			0.5%;
	border:				2px solid #ffffff;
	width:				40%;
	margin-left:		10%;
	margin-top:			-2.5%;
}
#duinensoorten{
	width:				100%;
}
Advertisements