Voor de tweede periode van HTML les moesten we een responsieve website maken naar specificatie van de opdracht gegeven binnen 60 minuten.

de plaatjes die het weergeven heb ik geconverteerd tot .gif bestanden
om ruimte te besparen.

(de voorbeeld in .gif formaat)

(De Website die ik daaruit heb gebouwd, hieronder de code)

index.html

<!doctype html>
<html lang="nl">
	<head>
		<meta charset="utf-8">
		<meta name="description" content="eindcase html periode 2">
		<meta name="author" content="Valiant Hekert">
		<meta name="viewport" content="width=device-width, 
                                                             initial-scale=1.0">

		<link rel="stylesheet" media="(max-width: 800px)" 
                                                        href="css/320at480.css">
		<link rel="stylesheet" media="(min-width: 801px)" 
                                                       href="css/768at1024.css">
		
		<title>eindcase</title>
	</head>
	<body>
		<div>
			<img id="mobilelogo" src="img/toyota.png">
			<h1 id="mobiletexthead">Toyota Aygo Sport Edition</h1>
			<img id="ayago" src="img/aygo.png">
			<ul id="list">
				<li>X-touch 7" Multimediascherm</li>
				<li>Lederen stuurwiel met audio en 
                                                          telefoonbediening</li>
				<li>Bluetooth</li>
				<li>Mistlampen voor</li>
				<li>15" lichtmetalen velgen</li>
				<li>Achterspoiler pianozwart</li>
				<li>Diffuser zilvergrijs</li>
			</ul>
			<h1 id="mobilesum">€ 14.999,00</h1>
		</div>	
		<div id="desktopstuff">
			<img src="img/logo_groot.png">
			<img id="ayoimg" src="img/aygo_groot.png">
			<img id="floatcenter" src="img/aanbieding.png">
		</div>
	</body>
</html>

/css/320at480.css

body{
	font-size:1.1em;
}
#list{
	
}
#mobilelogo{
	height:20vh;
}
#desktopstuff{
	display:none;
}

#mobilesum, #mobiletexthead{
	text-align:center;
} 
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
li { 
    padding-left: 8px; 
}
li:before {
    content: url("../img/vinkje.png");
    padding-right: 8px;
}

/css/768at1024.css

#list, #mobilelogo, #ayago, #mobilesum, #mobiletexthead{
	display:none;
}
*{
	padding:0;
	margin:0;
}
#desktopstuff{
	height:	99.999vh;
	width:	99.999vh;
}
img{
	max-height:50vh;
	max-width:100vw;
}
#ayoimg{
	width:90vw;
}
#floatcenter{
	position:absolute;
	margin:auto 0;
	width:80vw;
	margin:0 10vw;
	bottom:	50px;
}
Advertisements