generated from fdnd/subtask
-
Notifications
You must be signed in to change notification settings - Fork 51
/
rating.html
48 lines (39 loc) · 2.4 KB
/
rating.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
<!doctype html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Rating / 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: als je de sterren als achtergrond voor iets wilt gebruiken, zijn dit de SVG's die je kunt gebruiken:
url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="%2366E5BF" d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798zM16 23.547l-6.983 3.671 1.334-7.776-5.65-5.507 7.808-1.134 3.492-7.075 3.492 7.075 7.807 1.134-5.65 5.507 1.334 7.776-6.983-3.671z"></path></svg>')
url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="%2366E5BF" d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path></svg>')
*/
/* Hint: met Grid Layout kun je elementen over elkaar heen leggen */
</style>
</head>
<body>
<h1>Rating</h1>
<!-- Dit zijn de SVG's van de sterren. Maar horen die wel in HTML, of is dit eigenlijk styling?
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path fill="#66E5BF" d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798zM16 23.547l-6.983 3.671 1.334-7.776-5.65-5.507 7.808-1.134 3.492-7.075 3.492 7.075 7.807 1.134-5.65 5.507 1.334 7.776-6.983-3.671z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path fill="#66E5BF" d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
</svg>
-->
<!-- Waarschijnlijk wil je je rating ooit opslaan, dus heb je een formulier nodig -->
<form method="post">
<!-- Hint: hoeveel verschillende ratings kun je geven? -->
</form>
<details open>
<summary>Demo video</summary>
<video src="assets/rating.mp4" width="271" height="110" controls muted autoplay loop>
<a href="assets/rating.mp4">assets/rating.mp4</a>
</video>
</details>
</body>
</html>