-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
73 lines (68 loc) · 4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eindopdracht Programmeren</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div id="popup">
<div id="popupcontent">
<h1>Welkom!</h1>
<p>Op deze website kun je een poppetje aankleden, koffie geven en naar kantoor laten gaan.</p>
<h2>Uitleg:</h2>
<ul>
<li><strong>In de kleedkamer</strong> kun je het poppetje aankleden. De kleding die in de kast hangt aan kledinghangers kun je slepen naar het poppetje. Bij de kleding die gestapelt in de kast ligt moet je goed kijken waar je de muis ziet veranderen op deze elementen kun je klikken.</li>
<li><strong>Op het kantoor</strong> kun je op het scherm van de computer klikken om deze aan te zetten en zo verschillende schermen te zien.</li>
</ul>
<button id="button">Laten we beginnen!</button>
<p id="kleinetekst">Deze website is niet gemaakt voor kleine schermen.</p>
</div>
</div>
</header>
<main>
<div id="bg">
<div id="kleedkamer">
<button id="koffie_btn">Koffie</button>
<button id="werken_btn">Werken</button>
<img src="img/kledingkast/gele_jurk.png" alt="Gele jurk" id="gele_jurk">
<img src="img/kledingkast/pyjama_top.png" alt="Pyjama top" id="pyjama_top">
<img src="img/kledingkast/pyjama_broek.png" alt="Pyjama broek" id="pyjama_broek">
<img src="img/kledingkast/witte_top.png" alt="Witte top" id="witte_top">
<img src="img/kledingkast/donkerblauwe_broek.png" alt="Donker blauwe broek" id="donkerblauwe_broek">
<img src="img/kledingkast/zwarte_top.png" alt="Zwarte top" id="zwarte_top">
<img src="img/kledingkast/lichtblauwe_broek.png" alt="Lichtblauwe broek" id="lichtblauwe_broek">
<img src="img/kledingkast/paarse_jurk.png" alt="Paarse jurk" id="paarse_jurk">
<img src="img/kledingkast/hemdje.png" alt="Hemdje" id="hemdje">
<img src="img/kledingkast/schoenen.png" alt="Schoenen" id="schoenen">
</div>
<div id="kantoor">
<img src="img/werkplek/buiten.png" alt="Buiten" id="buiten">
<img src="img/werkplek/raam.png" alt="Raam" id="raam">
<img src="img/werkplek/mobiel.png" alt="Phone" id="phone">
<img src="img/werkplek/computer_scherm.png" alt="Computer scherm" id="computer">
<img src="img/werkplek/scherm_uit.png" alt="Scherm" id="scherm">
</div>
<div id="persoon">
<img src="img/persoon/gezicht_normaal.png" alt="Gezicht persoon" id="gezicht">
<img src="img/persoon/lichaam_een_arm.png" alt="Lichaam persoon" id="lichaam">
<img src="img/persoon/top_pyjama.png" alt="Kleding aan" id="top_aan">
<img src="img/persoon/broek_pyjama.png" alt="Kleding aan" id="broek_aan">
<img src="img/persoon/schoenen.png" alt="Schoenen uit" id="schoenen_uit">
<img src="img/persoon/arm.png" alt="Arm persoon" id="arm">
</div>
</div>
</main>
<script src="js/script.js"></script>
<!--
Bronnen en inspiratie:
https://www.freepik.com/free-vector/female-character-poses-illustration-collection_6969086.htm#query=pikisuperstar&position=1
https://media.istockphoto.com/vectors/large-wardrobe-with-different-clothes-vector-illustration-in-flat-vector-id958988464?s=612x612
https://www.freepik.com/free-vector/flat-monstera-leaves-flowerpots-background_4097219.htm#page=4&query=potted+plants&position=0
https://www.soundfishing.eu/sound/female-laugh
https://www.prokerala.com/downloads/ringtones/download.php?id=42676
-->
</body>
</html>