Add component stubs and videos, update instructions

fdnd-task · Mar 26, 2024 · 65504d8 · 65504d8
1 parent 3ac7d20
commit 65504d8
Show file tree

Hide file tree

Showing 20 changed files with 537 additions and 11 deletions.
diff --git a/assets/carrousel.mp4 b/assets/carrousel.mp4
diff --git a/assets/faq.mp4 b/assets/faq.mp4
diff --git a/assets/file.mp4 b/assets/file.mp4
diff --git a/assets/menu.mp4 b/assets/menu.mp4
diff --git a/assets/pickers.mp4 b/assets/pickers.mp4
diff --git a/assets/rating.mp4 b/assets/rating.mp4
diff --git a/assets/studenten.jpg b/assets/studenten.jpg
diff --git a/assets/styles.css b/assets/styles.css
@@ -0,0 +1,58 @@
+
+
+/*
+
+Deze CSS hoef je niet aan te passen; dit zijn algemene stijlen voor elke pagina.
+Gebruik het <style> element in het bestand van het component, waar ook wat hints staan.
+
+*/
+
+
+
+body {
+	/* Je kunt de volgende FDND kleuren gebruiken in je code */
+	--purple: #A675F5;
+	--blue: #050542;
+	--blue-50: rgba(5, 5, 66, 0.5);
+	--green: #66E5BF;
+	--yellow: #FFFC86;
+
+	font-family: 'Open Sans', sans-serif;
+	line-height: 1.6;
+}
+
+h1 {
+	margin: 0;
+	letter-spacing: -0.05em;
+}
+
+.fdnd-nav a {
+	color: var(--blue);
+}
+.fdnd-nav a:hover, .fdnd-nav a:focus-visible {
+	text-decoration: none;
+}
+
+/* En als je een simpele button wilt, kun je deze class gebruiken */
+.fdnd-button {
+	padding: .3em .6em;
+	border: 1px solid transparent;
+	border-radius: .5rem;
+	font-family: inherit;
+	font-size: inherit;
+	text-decoration: none;
+	color: var(--green);
+	background: var(--blue);
+	cursor: pointer;
+}
+
+video {
+	max-width: 100%;
+	height: auto;
+}
+
+/* Alle focus states zijn al voor je gedaan, dus maak je daar niet druk om */
+:focus-visible {
+	outline: 3px solid var(--blue);
+	outline-offset: 3px;
+}
diff --git a/assets/switch.mp4 b/assets/switch.mp4
diff --git a/assets/tabs.mp4 b/assets/tabs.mp4
diff --git a/carrousel.html b/carrousel.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="nl">
+	<head>
+		<meta charset="utf-8">
+		<title>Carrousel / Progressive Enhancement / FDND</title>
+		<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
+		<link href="assets/styles.css" rel="stylesheet">
+		<style>
+			/* Schrijf hier gewoon je CSS voor dit component */
+
+			/* Hint: welk layout model is handig om content naast elkaar te zetten? */
+		</style>
+		<script type="module">
+			/* Schrijf hier eventueel je client-side JavaScript */
+		</script>
+	</head>
+	<body>
+		<h1>Carrousel</h1>
+
+		<!-- Content
+
+		“Websites leren bouwen, én praktijkervaring opdoen?”
+
+		“FDND is de enige HBO-opleiding voor Frontend Development in Nederland, in twee jaar stomen wij jou klaar voor het werkveld”
+
+		“Je werkt bij ons aan échte projecten voor échte opdrachtgevers”
+
+		“In het studiomodel werken studenten onder begeleiding van coaches en experts uit het vakgebied aan praktijkgerichte opdrachten”
+
+		“Bij FDND leer je websites bouwen en andere belangrijke skills die jij in de praktijk toe kan passen”
+
+		“Een Associate degree-opleiding is een tweejarige hbo-opleiding op niveau 5”
+
+		-->
+
+		<details open>
+			<summary>Demo video</summary>
+			<video src="assets/carrousel.mp4" width="1298" height="469" controls muted autoplay loop>
+				<a href="assets/carrousel.mp4">assets/carrousel.mp4</a>
+			</video>
+		</details>
+	</body>
+</html>
diff --git a/docs/INSTRUCTIONS.md b/docs/INSTRUCTIONS.md
@@ -46,23 +46,21 @@ Voor deze opdracht ga je een aantal UI componenten ontwerpen en bouwen in versch
 
 Maak minimaal 3 van onderstaande user interface componenten: 
 
-- Audio player met volumeregelaar
-- Carrousel met quotes
-- Combo box
-- File image upload met preview
-- Lijst met veelgestelde vragen
-- Mobiel menu
-- Rating component
+- Veelgestelde vragen
 - Switch control
-- Tabblad
-- Video player met scrubber
+- Mobiel menu
+- Rating
+- Favorieten picker
+- Carrousel
+- Tabbladen
+- File upload met preview
 
 
 ## Aanpak (per component)
 
-1. Beschrijf in eigen woorden wat dit component is, en wat eigenlijk de _core functionaliteit_ is.
+1. Beschrijf in eigen woorden wat dit component is, en wat eigenlijk de _core functionaliteit_ is. Gebruik de demo video om een idee te krijgen.
 2. Schets het component, en de interactie.
-3. Laag 1: Onderzoek welke HTML je voor de _core functionaliteit_ nodig hebt, en maak hiervan een breakdownschets (gebruik de hints in de code die klaarstaat, MDN en CanIUse).
+3. Laag 1: Onderzoek welke HTML je voor de _core functionaliteit_ nodig hebt, maak hiervan een breakdownschets, en schrijf je HTML (gebruik de hints en content in de code die klaarstaat, MDN en CanIUse).
 4. Test deze HTML versie op verschillende browsers en devices.
 5. Laag 2: Voeg CSS toe, aan de hand van MDN, CanIUse en `@supports`.
 6. Test deze “enhanced” versie op verschillende browsers en devices.

diff --git a/faq.html b/faq.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="nl">
+	<head>
+		<meta charset="utf-8">
+		<title>Veelgestelde vragen / Progressive Enhancement / FDND</title>
+		<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
+		<link href="assets/styles.css" rel="stylesheet">
+		<style>
+			/* Schrijf hier gewoon je CSS voor dit component */
+
+			/* Hint: Dit component kun je volledig met HTML en CSS bouwen */
+
+			/* Hint: Denk aan de states van het component; deze kan open en dicht zijn */
+		</style>
+	</head>
+	<body>
+		<h1>Veelgestelde vragen</h1>
+
+
+		<!-- Content (waar nog wat HTML omheen moet 😄):
+		Wat is frontend development?
+		Een frontend developer ontwerpt en bouwt websites in HTML, CSS en JavaScript. Deze frontend talen leer je bij ons, je hebt dus geen voorkennis nodig.
+
+		Moet ik al kunnen coderen?
+		Nee, je hebt helemaal geen voorkennis nodig om te beginnen aan deze opleiding, we kunnen je alles leren! Als je wel al voorkennis hebt, is dat alleen maar goed, dan kunnen we je helpen je skills te verbeteren en te verdiepen in de stof.
+
+		Wat is een Associate Degree?
+		Een Associate degree-opleiding is een tweejarige hbo-opleiding op niveau 5. Een Ad slaat een brug tussen het mbo-4 (niveau 4) en een hbo-bachelor (niveau 6). Met een Associate degree kies je voor een praktijkgerichte hbo-opleiding; je wordt opgeleid voor een beroep dat aansluit bij de praktijk. In dit geval word je opgeleid tot ‘frontend designer/developer' of kortweg ‘frontender’. Frontenders ontwerpen en maken interactieve, toegankelijke toepassingen voor het web. Frontenders werken binnen het gebied van software development, interactieontwerp en digitaal visueel ontwerp.
+		Na afronding van deze tweejarige hbo-opleiding, krijg je een wettelijk erkend hbo-diploma met de graad Associate degree. Met dit Ad-diploma kun je direct aan de slag in het werkveld of doorstromen naar de bacheloropleiding Communication and Multimedia Design (CMD).
+		-->
+
+
+		<!-- Hint: Dit stukje HTML geeft het misschien al weg :) -->
+		<details open>
+			<summary>Demo video</summary>
+			<video src="assets/faq.mp4" width="765" height="769" controls muted autoplay loop>
+				<a href="assets/faq.mp4">assets/faq.mp4</a>
+			</video>
+		</details>
+	</body>
+</html>
diff --git a/file.html b/file.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="nl">
+	<head>
+		<meta charset="utf-8">
+		<title>File upload met preview / Progressive Enhancement / FDND</title>
+		<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
+		<link href="assets/styles.css" rel="stylesheet">
+		<style>
+			/* Schrijf hier gewoon je CSS voor dit component */
+
+			/* Hint: Denk niet te ingewikkeld */
+		</style>
+		<script type="module">
+			/* Schrijf hier eventueel je client-side JavaScript */
+
+			/* Hint: Met een paar regels kom je al een heel eind */
+
+			/* Hint: Via JS kun je Custom Properties in CSS aanpassen */
+		</script>
+	</head>
+	<body>
+		<h1>File upload met preview</h1>
+
+		<!-- Voor het uploaden van een bestand heb je altijd een formulier nodig.
+			 Dus die krijg je alvast. Maak je over de server niet druk; het gaat om de UI. -->
+		<form method="post">
+
+			<!-- Hint: Denk niet te ingewikkeld -->
+
+			<button type="submit" class="fdnd-button">Uploaden</button>
+
+		</form>
+
+		<details open>
+			<summary>Demo video</summary>
+			<video src="assets/file.mp4" width="1496" height="496" controls muted autoplay loop>
+				<a href="assets/file.mp4">assets/file.mp4</a>
+			</video>
+		</details>
+	</body>
+</html>
diff --git a/index.html b/index.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="nl">
+	<head>
+		<meta charset="utf-8">
+		<title>Progressive Enhancement / FDND</title>
+		<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
+		<link href="assets/styles.css" rel="stylesheet">
+	</head>
+	<body>
+		<h1>Deeltaak Progressive Enhancement</h1>
+		<p>Kies drie componenten die je uit gaat werken. Ze gaan grofweg van makkelijk naar iets moeilijker.</p>
+		<p>In de HTML van elk component staan wat hints en content die je nodig hebt.</p>
+		<nav class="fdnd-nav">
+			<ul>
+				<li><a href="faq.html">Veelgestelde vragen</a></li>
+				<li><a href="switch.html">Switch control</a></li>
+				<li><a href="menu.html">Mobiel menu</a></li>
+				<li><a href="rating.html">Rating</a></li>
+
+				<li><a href="pickers.html">Favorieten picker</a></li>
+				<li><a href="carrousel.html">Carrousel</a></li>
+				<li><a href="file.html">File upload met preview</a></li>
+				<li><a href="tabs.html">Tabbladen</a></li>
+			</ul>
+		</nav>
+	</body>
+</html>
diff --git a/menu.html b/menu.html
@@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="nl">
+	<head>
+		<meta charset="utf-8">
+		<title>Mobiel menu / Progressive Enhancement / FDND</title>
+		<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
+		<link href="assets/styles.css" rel="stylesheet">
+		<style>
+			/* Schrijf hier gewoon je CSS voor dit component */
+
+			/* Hint: kijk eens naar :target */
+		</style>
+		<script type="module">
+			/* Schrijf hier eventueel je client-side JavaScript */
+
+			/* Hint: dit component kan volledig met CSS, maar met JS kun je 'm helemaal afmaken */
+		</script>
+	</head>
+	<body>
+		<main>
+			<h1>Mobiel menu</h1>
+
+			<!-- Hint: Wat heb je nodig, als je op een klein scherm naar het menu wilt? -->
+
+			<details open>
+				<summary>Demo video</summary>
+				<video src="assets/menu.mp4" width="773" height="863" controls muted autoplay loop>
+					<a href="assets/menu.mp4">assets/menu.mp4</a>
+				</video>
+			</details>
+
+			<!-- Deze tekst kun je gebruiken, zodat de pagina wat langer wordt
+			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum eget elit eu tincidunt. Donec gravida nulla at justo sollicitudin, hendrerit faucibus diam tincidunt. Pellentesque porta neque quis nunc laoreet congue. Sed porttitor nec tellus nec semper. Cras pharetra dictum risus ut sagittis. Aliquam in iaculis arcu. Nulla sit amet diam sit amet mauris placerat laoreet eu vel turpis. Vivamus ac massa ut diam gravida elementum ut nec nulla. Integer vel felis massa. Quisque facilisis enim ornare ultricies mattis. Fusce porta rhoncus ex. Nunc viverra orci at leo fermentum convallis. Morbi sodales, lectus congue aliquam maximus, metus ipsum placerat turpis, vitae venenatis metus erat vel eros. Vestibulum lobortis accumsan elit nec maximus. Vivamus mollis ullamcorper felis, id aliquet tellus volutpat at.</p>
+			<p>In ante sem, faucibus sit amet nisl ut, efficitur mattis augue. Aenean fringilla lorem id metus ultrices bibendum. Quisque eleifend enim purus, eu bibendum mauris blandit nec. Donec vitae purus sed eros ullamcorper vehicula sit amet eu massa. Vestibulum eget mi vel tellus pharetra convallis quis quis nunc. Maecenas bibendum neque sit amet neque ultrices sollicitudin. Donec viverra arcu nec urna accumsan pharetra. Donec pharetra lacinia elementum.</p>
+			<p>Aliquam auctor diam ut ipsum mattis semper. Praesent auctor quam ut libero aliquet, at gravida nunc aliquam. Duis mollis faucibus nisi at fringilla. Vestibulum at vulputate tortor, eget consequat libero. Praesent non ante libero. Praesent imperdiet neque at lacus mattis, at tincidunt odio ullamcorper. In massa metus, iaculis id vulputate vel, aliquam eu sem. Nulla varius lorem ut justo consectetur consectetur. Nulla viverra, metus in dapibus facilisis, magna sapien lobortis urna, vel mattis sapien velit at nisi. Nullam semper est lorem, id lobortis est blandit gravida. Nulla purus orci, aliquet ac purus at, eleifend ultricies dolor. Vivamus lobortis lectus quis augue molestie congue. Morbi vel libero ac ex sagittis euismod vitae eu dolor. Nunc sed libero enim. Duis at lacus et est fermentum ullamcorper et non eros. Ut semper auctor commodo.</p>
+			<p>Phasellus facilisis, lorem a venenatis ultrices, turpis turpis maximus est, quis lacinia risus erat quis mi. In ornare consequat malesuada. In hac habitasse platea dictumst. Maecenas egestas diam quis fringilla laoreet. Ut at tortor blandit, ultricies nisi et, pretium nisi. Praesent ac est vitae leo gravida sodales quis quis libero. Nullam nec ligula ultricies, euismod ipsum sed, iaculis urna. Sed vel eros non ex dapibus consequat sed sed diam. Fusce sem libero, fermentum vel sapien ac, dictum fringilla enim.</p>
+			<p>Duis sem ligula, cursus a arcu id, rutrum iaculis mauris. Mauris sagittis eros in elit egestas, et egestas risus lacinia. Nullam vel sapien finibus, vehicula nisi ut, hendrerit turpis. Suspendisse volutpat tortor dolor, non varius purus efficitur eget. Nam mollis sem ac ligula sodales, non commodo justo vulputate. Donec elementum viverra orci at laoreet. Proin lobortis quis neque pretium venenatis. Quisque non rhoncus diam, vitae sollicitudin quam. Sed felis nisl, ultricies sed turpis ac, faucibus imperdiet mi.</p>
+			<p>Nulla sit amet mattis enim. Aenean mollis dapibus gravida. Nam odio metus, luctus et laoreet ac, bibendum eget eros. Ut rutrum dui ut elementum consectetur. Nam imperdiet mollis mattis. Pellentesque et eros magna. Suspendisse bibendum varius mattis. Aliquam placerat quam purus, iaculis ornare augue consequat ac. Vestibulum iaculis ligula in iaculis luctus.</p>
+			<p>Vestibulum varius, nisl ac semper tincidunt, metus leo volutpat nibh, in bibendum purus lorem at mi. Quisque id tincidunt massa, sed mattis tellus. In dignissim fermentum ultricies. Phasellus ornare justo eget arcu rutrum, in elementum lacus dictum. Donec porta, odio id feugiat varius, turpis leo tristique nibh, sed malesuada quam ipsum vitae nibh. Ut tempor rhoncus auctor. Cras sit amet lectus pretium, dignissim est eu, aliquam orci.</p>
+			<p>Morbi sodales est sit amet arcu posuere molestie. Curabitur molestie felis eget orci hendrerit, id rhoncus metus venenatis. Aenean blandit, leo a bibendum porttitor, quam massa aliquam sem, id fermentum nisl libero eu arcu. Curabitur ultrices sagittis mauris, nec imperdiet augue eleifend vel. Proin non dolor ipsum. Nam bibendum erat eu volutpat luctus. Aenean dictum rhoncus erat vel gravida. Pellentesque blandit gravida eros laoreet aliquam. Curabitur tristique ipsum tellus, vitae consectetur ipsum euismod at. Vestibulum tincidunt mauris tellus, quis iaculis nisi elementum vel. Quisque vel libero placerat, pellentesque dolor id, iaculis enim. Aliquam odio sem, lacinia eu dolor vehicula, vulputate accumsan ante. Duis posuere ex sed elit vestibulum faucibus.</p>
+			<p>Sed vitae felis a lorem dictum dictum. Maecenas placerat dolor sed lobortis euismod. Aliquam rutrum tincidunt ex eu consectetur. Quisque et neque quam. Praesent augue nulla, venenatis ac accumsan at, sagittis et lectus. Donec maximus velit sit amet euismod auctor. Ut mattis ipsum nec massa tristique, vitae finibus arcu egestas. Pellentesque ut leo pulvinar, imperdiet ipsum ac, aliquam ligula. Sed ultricies nunc non arcu tempus laoreet.</p>
+			<p>Ut placerat leo quis mi placerat scelerisque. Phasellus vehicula sollicitudin orci sed sollicitudin. In hac habitasse platea dictumst. Duis auctor enim id dolor cursus, egestas venenatis quam accumsan. Integer faucibus lorem id commodo vulputate. Nulla non nulla ut nisl tincidunt finibus et in libero. In aliquet ornare diam ut pharetra.</p>
+			<p>Ut auctor iaculis libero sagittis commodo. Integer non justo eget lacus molestie dictum. Curabitur luctus elementum felis, quis posuere velit tempor ut. Donec lacinia leo non arcu eleifend, non posuere sapien rutrum. Vivamus accumsan ex ante, quis dictum nunc lobortis at. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec quam sit amet sem porttitor tincidunt. Nam ut fermentum ex. Quisque aliquet molestie enim, ut egestas arcu fringilla et. Donec dui nulla, fringilla eu urna ut, aliquet eleifend leo. Integer quis mi laoreet, sollicitudin nibh quis, hendrerit augue.</p>
+			<p>Aenean neque sem, scelerisque interdum sem ut, pulvinar aliquam est. Aenean gravida augue dui, nec egestas erat euismod ut. Curabitur et tortor mi. Ut sed dictum nibh, at ultrices purus. Maecenas in dolor vitae erat tincidunt tempor sed vel arcu. Aenean ullamcorper vitae libero mattis sollicitudin. In ultrices condimentum ante ac congue. Nullam pellentesque dolor in ante placerat, sed dignissim ligula congue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce in semper lacus, eget venenatis tellus.</p>
+			<p>Fusce congue elit eget sapien hendrerit, sollicitudin fermentum nisi tempor. Cras semper mi id lacus pharetra tincidunt. Aliquam scelerisque facilisis tempus. Quisque sed dui nec lectus pulvinar porta. Cras eget consectetur diam. Pellentesque vel congue neque. Nam arcu mauris, pretium vitae enim et, ornare finibus purus. Nam maximus libero feugiat, faucibus massa vitae, ultricies est. Aenean mattis viverra dui, sit amet aliquet neque sagittis eu. Praesent quis volutpat eros, nec hendrerit turpis. Nullam vel blandit metus, ac placerat tellus. Mauris leo nulla, efficitur a neque non, vestibulum dictum diam. Nam vestibulum tortor eu eros viverra mattis. Sed eu urna id lacus maximus luctus quis et neque.</p>
+			<p>Duis maximus lacinia mattis. Fusce fermentum dignissim sem, ut sollicitudin libero consequat nec. Quisque a vestibulum augue. Sed sit amet purus in tellus congue viverra quis id magna. Maecenas iaculis purus placerat ligula aliquet aliquam. Proin molestie mattis faucibus. Cras a volutpat dui, ut pulvinar tellus.</p>
+			<p>Suspendisse malesuada, nulla eget iaculis fermentum, libero dolor vestibulum urna, ut auctor dolor diam ut dolor. Nullam mollis congue luctus. Fusce nulla dolor, faucibus nec volutpat eget, consequat quis nisl. Cras id diam efficitur, congue lectus ac, vulputate leo. Morbi odio velit, finibus id ornare sit amet, luctus ut eros. Fusce fringilla eu diam quis tempor. Proin pretium purus a fringilla semper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin lorem diam, laoreet at lectus quis, lobortis tempor tortor. Vivamus semper, ex convallis iaculis suscipit, risus augue bibendum sapien, nec volutpat lacus quam finibus arcu. Nunc non consectetur eros, eu viverra metus. Aliquam nisl risus, condimentum et sapien id, rutrum interdum odio. Nulla facilisi. Ut ac egestas quam.</p>
+			-->
+		</main>
+
+		<!-- Dit is het menu
+		<nav>
+			<ul>
+				<li><a href="index.html">Home</a></li>
+				<li><a href="faq.html">Veelgestelde vragen</a></li>
+				<li><a href="switch.html">Switch control</a></li>
+				<li><a href="menu.html">Mobiel menu</a></li>
+				<li><a href="rating.html">Rating</a></li>
+				<li><a href="carrousel.html">Carrousel</a></li>
+				<li><a href="pickers.html">Favorieten picker</a></li>
+				<li><a href="tabs.html">Tabbladen</a></li>
+				<li><a href="file.html">File image upload met preview</a></li>
+			</ul>
+		</nav>
+		-->
+
+		<!-- Dit is eventueel het 'Sluiten' icoon
+		<svg viewBox="0 0 32 32" width="32" height="32">
+			<title>Sluiten</title>
+			<path d="M31.708 25.708c-0-0-0-0-0-0l-9.708-9.708 9.708-9.708c0-0 0-0 0-0 0.105-0.105 0.18-0.227 0.229-0.357 0.133-0.356 0.057-0.771-0.229-1.057l-4.586-4.586c-0.286-0.286-0.702-0.361-1.057-0.229-0.13 0.048-0.252 0.124-0.357 0.228 0 0-0 0-0 0l-9.708 9.708-9.708-9.708c-0-0-0-0-0-0-0.105-0.104-0.227-0.18-0.357-0.228-0.356-0.133-0.771-0.057-1.057 0.229l-4.586 4.586c-0.286 0.286-0.361 0.702-0.229 1.057 0.049 0.13 0.124 0.252 0.229 0.357 0 0 0 0 0 0l9.708 9.708-9.708 9.708c-0 0-0 0-0 0-0.104 0.105-0.18 0.227-0.229 0.357-0.133 0.355-0.057 0.771 0.229 1.057l4.586 4.586c0.286 0.286 0.702 0.361 1.057 0.229 0.13-0.049 0.252-0.124 0.357-0.229 0-0 0-0 0-0l9.708-9.708 9.708 9.708c0 0 0 0 0 0 0.105 0.105 0.227 0.18 0.357 0.229 0.356 0.133 0.771 0.057 1.057-0.229l4.586-4.586c0.286-0.286 0.362-0.702 0.229-1.057-0.049-0.13-0.124-0.252-0.229-0.357z"></path>
+		</svg>
+		-->
+	</body>
+</html>