forked from paystrup/EAAA-Webdokumentar
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
77 lines (69 loc) · 7.41 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
74
75
76
77
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Nikolaj Pejstrup, Karoline Aaby & Christoffer Ingemann">
<meta name="keywords" content="EAAA, Erhvervsakademiet Aarhus, Erhvervsakademi, Erhversakademisk uddannelse, uddannelse Aarhus, Århus, multimediedesign, multimediedesigner">
<meta name="description" content="Erhvervsakademiet Aarhus, EAAA, tilbyder en række praktisknære uddannelser. Læs mere om Oliver der har udannet sig som multimediedesigner og i dag lever efter sine drømme.">
<title>EAAA Webdokumentar</title>
<link rel="shortcut icon" href="media/eaaa.ico" type="image/x-icon">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://use.typekit.net/frq8mhn.css">
<script src="https://kit.fontawesome.com/63f60264a7.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
<div class="navlogo" id="navLogo">
<svg id="Layer_4" data-name="Layer 4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64.08 59.89"><defs><style>.cls-1{fill:#fff8e5;}</style></defs><path class="cls-1" d="M60,55.15a4.19,4.19,0,1,0,4.19,4.19A4.19,4.19,0,0,0,60,55.15Z" transform="translate(-55.83 -3.64)"/><path class="cls-1" d="M77.59,34.15a9.4,9.4,0,1,0,9.4,9.4A9.4,9.4,0,0,0,77.59,34.15Z" transform="translate(-55.83 -3.64)"/><path class="cls-1" d="M104.5,3.64a15.42,15.42,0,1,0,15.42,15.42A15.42,15.42,0,0,0,104.5,3.64Z" transform="translate(-55.83 -3.64)"/></svg>
</div>
<div class="navicons" id="navIkoner">
<svg id="unmuteknap" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M301.2 34.85c-11.5-5.188-25.02-3.122-34.44 5.253L131.8 160H48c-26.51 0-48 21.49-48 47.1v95.1c0 26.51 21.49 47.1 48 47.1h83.84l134.9 119.9c5.984 5.312 13.58 8.094 21.26 8.094c4.438 0 8.972-.9375 13.17-2.844c11.5-5.156 18.82-16.56 18.82-29.16V64C319.1 51.41 312.7 40 301.2 34.85zM513.9 255.1l47.03-47.03c9.375-9.375 9.375-24.56 0-33.94s-24.56-9.375-33.94 0L480 222.1L432.1 175c-9.375-9.375-24.56-9.375-33.94 0s-9.375 24.56 0 33.94l47.03 47.03l-47.03 47.03c-9.375 9.375-9.375 24.56 0 33.94c9.373 9.373 24.56 9.381 33.94 0L480 289.9l47.03 47.03c9.373 9.373 24.56 9.381 33.94 0c9.375-9.375 9.375-24.56 0-33.94L513.9 255.1z"/></svg>
<svg id="muteknap" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M412.6 182c-10.28-8.334-25.41-6.867-33.75 3.402c-8.406 10.24-6.906 25.35 3.375 33.74C393.5 228.4 400 241.8 400 255.1c0 14.17-6.5 27.59-17.81 36.83c-10.28 8.396-11.78 23.5-3.375 33.74c4.719 5.806 11.62 8.802 18.56 8.802c5.344 0 10.75-1.779 15.19-5.399C435.1 311.5 448 284.6 448 255.1S435.1 200.4 412.6 182zM473.1 108.2c-10.22-8.334-25.34-6.898-33.78 3.34c-8.406 10.24-6.906 25.35 3.344 33.74C476.6 172.1 496 213.3 496 255.1s-19.44 82.1-53.31 110.7c-10.25 8.396-11.75 23.5-3.344 33.74c4.75 5.775 11.62 8.771 18.56 8.771c5.375 0 10.75-1.779 15.22-5.431C518.2 366.9 544 313 544 255.1S518.2 145 473.1 108.2zM534.4 33.4c-10.22-8.334-25.34-6.867-33.78 3.34c-8.406 10.24-6.906 25.35 3.344 33.74C559.9 116.3 592 183.9 592 255.1s-32.09 139.7-88.06 185.5c-10.25 8.396-11.75 23.5-3.344 33.74C505.3 481 512.2 484 519.2 484c5.375 0 10.75-1.779 15.22-5.431C601.5 423.6 640 342.5 640 255.1S601.5 88.34 534.4 33.4zM301.2 34.98c-11.5-5.181-25.01-3.076-34.43 5.29L131.8 160.1H48c-26.51 0-48 21.48-48 47.96v95.92c0 26.48 21.49 47.96 48 47.96h83.84l134.9 119.8C272.7 477 280.3 479.8 288 479.8c4.438 0 8.959-.9314 13.16-2.835C312.7 471.8 320 460.4 320 447.9V64.12C320 51.55 312.7 40.13 301.2 34.98z"/></svg>
<svg id="hamburgermenu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96zM0 256C0 238.3 14.33 224 32 224H416C433.7 224 448 238.3 448 256C448 273.7 433.7 288 416 288H32C14.33 288 0 273.7 0 256zM416 448H32C14.33 448 0 433.7 0 416C0 398.3 14.33 384 32 384H416C433.7 384 448 398.3 448 416C448 433.7 433.7 448 416 448z"/></svg>
</div>
</nav>
<div id="openMenu">
<div class="openMenuClose">
<svg class="closemenuikon" id="closeMenuIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg>
</div>
<ul id="menuUL" class="menupunkter">
<li class="menulink">
<a href="https://www.eaaa.dk/">Læs om vores uddannelser</a>
</li>
<li class="menulink">
<a href="https://www.eaaa.dk/">Historier fra vores studerende</a>
</li>
<li class="menulink">
<a href="https://www.eaaa.dk/">Erhvervsakademi Aarhus</a>
</li>
</ul>
</div>
<div class="ball" id="ball">
<div id="klikmig">
<p>Tap</p>
</div>
</div>
<main>
<section class="landingpage" id="landingPage">
<div id="landingText">
<h1 class="landingh1">Mød Oliver</h1>
<h3 class="landingh3">25-årig multimediedesigner</h3>
<a href="story.html" class="secondaryBtn" id="secondaryBtn">Læs mere</a>
</div>
<div id="landingPictures" class="elem">
<img id="landingimage" class="landingImg" src="media/landing2.png" alt="Oliver">
</div>
</section>
</main>
<!-- CDN links til GSAP-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js" integrity="sha512-H6cPm97FAsgIKmlBA4s774vqoN24V5gSQL4yBTDOY2su2DeXZVhQPxFK4P6GPdnZqM9fg1G3cMv5wD7e6cFLZQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/CSSRulePlugin.min.js" integrity="sha512-Aa3UvVB5yhH/dNXMt8nGZDD15Xmntq1ODcavfgT8omSLaomrJKYybWczzc6UJYDUAdqR1hmDJ47V4Ux50PPIuw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.2/MotionPathPlugin.min.js" integrity="sha512-9uKCD22ihFUl7ZsXaKNgjc/zYB3gSrC+aybxgckzCzF4OpDQrcNHueLpvF9C8GYJ9xWo6S82Kwnux7SPfZHLSQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- main js-->
<script src="js/menupunkter.js"></script>
<script src="js/startside.js"></script>
</body>
</html>