-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
139 lines (132 loc) · 6.38 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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<script src="https://kit.fontawesome.com/297942256a.js" crossorigin="anonymous"></script>
<title>Buddy2u</title>
</head>
<body>
<button class="hamburger" id="hamburger">☰</button>
<div class="site-container">
<main>
<div class="splash" id="home">
<div class="bluecover"></div>
<div class="splash-info">
<div class="splash-logo"></div>
<p>Bij Buddy2U word je als jongere (15–30 jaar) gekoppeld aan een maatje dat meer sociaal contact zoekt. Jullie trekken zes maanden samen op, ondernemen leuke dingen en leren van elkaar. Je krijgt zelfs een certificaat dat je kunt gebruiken op je cv!</p>
<a href="https://tally.so/r/3l4ygp" class="meedoen">Doe je mee?</a>
</div>
<div class="splash-image"></div>
</div>
<div class="over" id="over">
<div class="over-info">
<div class="text-over">
<h1>🧑🤝🧑 Over ons</h1>
<p><strong>Buddy2U</strong> is een samenwerking tussen Assen Bloeit en Begr!p Assen. Het project is onderdeel van de Maatschappelijke Diensttijd (MDT), een landelijk initiatief om jongeren actief te betrekken bij de samenleving.</p>
<p>We geloven dat iedereen iets te bieden heeft. Daarom koppelen we jongeren aan een ‘maatje’ waarmee ze op gelijkwaardige basis optrekken. Zo bestrijden we eenzaamheid én versterken we persoonlijke groei.</p>
<i class="fa-solid fa-heart"></i>
</div>
</div>
<div class="imagecover"></div>
</div>
<div class="traject" id="traject">
<h1>🔄 Hoe werkt het buddytraject?</h1>
<div class="traject-container">
<div class="traject-box">
<h2>📌 Stap 1: Aanmelden</h2>
<p>Meld je aan via het formulier op deze website. Je kiest zelf met welke doelgroep je graag gekoppeld wilt worden.</p>
</div>
<div class="traject-box">
<h2>📌 Stap 2: Kennismaken & Matchen</h2>
<p>Na een kennismakingsgesprek zoeken we een passende buddy voor jou. Klikt het? Dan start jullie buddyreis!</p>
</div>
<div class="traject-box">
<h2>📌 Stap 3: Samen op pad</h2>
<p>Zes maanden lang ondernemen jullie regelmatig iets samen: individueel én in groepsactiviteiten. Denk aan samen koken, wandelen, een verrassing organiseren of meedoen aan een creatieve workshop.</p>
</div>
<div class="traject-box">
<h2>📌 Stap 4: Afsluiting & Certificaat</h2>
<p>Na afloop is er een feestelijke afsluiting met een portretpresentatie, dankwoord én de uitreiking van je MDT-certificaat!</p>
</div>
</div>
</div>
<div class="mdt" id="mdt">
<h1>💪 MDT</h1>
<div class="mdt-info">
<p>Maatschappelijke Diensttijd (MDT) biedt jongeren tussen de 12 en 30 jaar de kans
om gedurende een aantal weken tot maanden hun talenten te ontwikkelen, mensen
te ontmoeten buiten hun leefwereld en iets te doen voor een ander en/of de
samenleving. Zo organiseren jongeren bijvoorbeeld sportactiviteiten in de buurt,
geven taalles aan nieuwkomers of begeleiden eenzame ouderen als buddy. MDT
helpt jongeren hun draai te vinden in de samenleving en vergroot hun
maatschappelijke betrokkenheid</p>
<a href="https://www.doemeemetmdt.nl/"><div class="mdt-logo"></div></a>
</div>
</div>
<div class="footer" id="footer">
<div class="contact">
<h1>📞 contact</h1>
<p>Contact opnemen kan via <a href="mailto:[email protected]"><strong>[email protected]</strong></a></p>
</div>
<div class="meedoen-container">
<h1>Doe je mee?</h1>
<a href="https://tally.so/r/3l4ygp" class="meedoen">Meedoen!</a>
</div>
</main>
<header id="sidebar">
<div class="logo-nav"></div>
<nav>
<div class="progress">
<div class="dot" id="scroll-dot"></div>
</div>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#over">Over ons</a></li>
<li><a href="#traject">Traject</a></li>
<li><a href="#mdt">MDT</a></li>
<li><a href="#footer">Contact</a></li>
<li class="meedoen"><a href="https://tally.so/r/3l4ygp">Doe je mee?</a></li>
<div class="partners">
<div class="Begrip partner"><a href="https://www.begripassen.nl/"></a></div>
<div class="Bloeit partner"><a href="https://assenbloeit.nl/"></a></div>
<div class="MDT partner"><a href="https://mdtyeswijdoenmee.nl//"></a></div>
</div>
</ul>
</nav>
</header>
</div>
<script>
const hamburger = document.getElementById('hamburger');
const sidebar = document.getElementById('sidebar');
hamburger.addEventListener('click', () => {
sidebar.classList.toggle('show');
hamburger.classList.toggle('show');
});
// Close sidebar when any nav link is clicked (on mobile)
const navLinks = sidebar.querySelectorAll('a');
navLinks.forEach(link => {
link.addEventListener('click', () => {
// Only close sidebar if screen width is less than 768px (mobile)
if (window.innerWidth <= 768) {
sidebar.classList.remove('show');
hamburger.classList.remove('show');
}
});
});
// Select the dot element
const dot = document.getElementById('scroll-dot');
// Function to update the dot's position based on scroll
window.addEventListener('scroll', () => {
const scrollPosition = window.scrollY; // Get current scroll position
const progressHeight = document.querySelector('.progress').clientHeight; // Get the height of the progress bar
const scrollMax = document.body.scrollHeight - window.innerHeight; // Max scrollable area
// Calculate the dot's position based on scroll
const dotPosition = (scrollPosition / scrollMax) * progressHeight;
// Update dot's top position
dot.style.top = `${dotPosition}px`;
});
</script>
</body>
</html>