-
Notifications
You must be signed in to change notification settings - Fork 0
/
bibliotheek.html
82 lines (78 loc) · 4.48 KB
/
bibliotheek.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
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name=”robots” content="nog fixen">
<meta name="description" content="Dit zie je op google">
<meta name="keywords" content="heel veel trefwoorden hier">
<meta name="author" content="Davey Zaal">
<title>Davey Zaal | Webdeveloper & Designer</title>
<link rel="shortcut icon" href="_img/favicon/favicon.png" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="_css/style.css">
<link rel="stylesheet" type="text/css" href="_css/project.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
</head>
<body>
<header>
<img src="_img/favicon/favicon.png" alt="">
<h3> DAVEY ZAAL.</h3>
</header>
<main class="projectContainer">
<section class="wrapper">
<article class="fastInfo">
<a href="index.html#myWork"><i class="fas fa-chevron-left"></i> Terug naar overzicht</a>
<div class="wrapAround">
<img src="_img/project_icons/bieb_icon.png" alt="">
<h4><span class="color">Opdrachtgever:</span></h4>
<p><span class="grey">Hogeschool van Amsterdam</span></p>
<h4><span class="color">Verband:</span></h4>
<p><span class="grey">Individueel</span></p>
<h4><span class="color">Type:</span></h4>
<p><span class="grey">UI & UX Design</span></p>
<h4><span class="color">Ontwerp:</span></h4>
<p><span class="grey">Eigen ontwerp</span></p>
</div>
</article>
<article class="mainContent">
<h1 class="headline"><span class="color">Project:</span> De Bibliotheek</h1>
<h3>Opdracht:</h3>
<p>
Maak in opdracht van De Bibliotheek een tool om jongeren (12-16 jaar) te helpen een boek te vinden op basis van de ingevulde informatie.
Zorg dat in je prototype animaties zitten om acties te verduidelijken.
</p>
<h3>Hoe heb ik dit gerealiseerd?</h3>
<p>
Ik heb in Adobe XD een prototype volledig uitgewerkt tot in detail. Verder heb ik in XD ook de animaties gemaakt.
Bekijk het werkende prototype door op de knop hieronder te drukken.
</p>
<a href="https://xd.adobe.com/view/61170c9f-c542-4327-5e00-b2c05961f36e-1726/?fullscreen" target="_blank"><button class="livePreviewBtn">Bekijk prototype</button></a>
<h3>Video: prototype</h3>
<p>Bekijk de video die door de gehele interactie met het prototype loopt:</p>
<iframe width="100%" height="315" src="https://www.youtube.com/embed/oPGIPIkz2MM" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="mobile">
<h4><span class="color">Opdrachtgever:</span></h4>
<p><span class="grey">Hogeschool van Amsterdam</span></p>
<h4><span class="color">Verband:</span></h4>
<p><span class="grey">Individueel</span></p>
<h4><span class="color">Type:</span></h4>
<p><span class="grey">UI & UX Design</span></p>
<h4><span class="color">Ontwerp:</span></h4>
<p><span class="grey">Eigen ontwerp</span></p>
</div>
</article>
</section>
</main>
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<script src="_js/script.js"></script>
<script src="_js/animations.js"></script>
</body>
</html>