AminFaka.github.io/snack.html at main · AminBaghouri/AminFaka.github.io · GitHub

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
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
    <title></title>
  </head>
  <body>
    <section id="overlay">
      <img src="https://scontent.fbru1-1.fna.fbcdn.net/v/t39.30808-6/305279162_511364964324326_7209063581937432230_n.jpg?_nc_cat=103&ccb=1-7&_nc_sid=09cbfe&_nc_ohc=SkuHzi1I_BMAX9B3-OM&_nc_ht=scontent.fbru1-1.fna&oh=00_AfAMWu2JfPbtDIP270KMpua03e6vRjBH17I6p2IkP2P6Xw&oe=63C9B305" alt="Snack Amin" id="logo">
      <hr>
      <form action="index.html" method="POST">
        <h1>Maak een burger!</h1>
		<section class="vlees">   <!--section onderverdeeld verschillende texten op het scherm-->
          <label for="vlees">Wat voor soort vlees wilt u?</label>   <!--label maakt de tekst die hoort bij de input, for koppelt die met de input-->
    			<input type="text" name="vlees" id="vlees">
        </section>
        <hr> <!--maakt een horizontale scheiding tussen secties-->
        <section class="vlees">
          <label for="hvlheid">Hoeveel porties zou u willen?</label>
          <input type="number" name="hvlheid" id="hvlheid" min="0" max="10" required>
        </section>
        <hr>
        <section class="kook">
          <label for="gekooktheid">Hoe wilt u ze gekookt?</label>
          <br>
          <span>Rauw</span>
          <input type="range" name="klaarheid" id="klaarheid" value="3" min="1" max="5" step="0.5">
          <span>Zwart</span>
        </section>
        <hr>
        <section class="extra">
          <span>Wat voor extra zou u willen?</span>
          <br>
          <input type="checkbox" name="extra" id="sla" value="sla">
          <label for="sla">sla</label>
          <input type="checkbox" name="extra" id="tomaat" value="tomaat">
          <label for="tomaat">tomaat</label>
          <input type="checkbox" name="extra" id="ajuin" value="ajuin">
          <label for="ajuin">ajuin</label>
        </section>
        <hr>
        <section class="kaas">
          <span>Zou u kaas willen toevoegen?</span>
          <br>
          <input type="radio" name="queso" id="ja" value="ja">
          <label for="ja">ja</label>
          <input type="radio" name="queso" id="nee" value="nee">
          <label for="ja">nee</label>
        </section>
        <hr>
        <section class="drank">
          <label for="drank">Wat voor soort drank wenst u?</label>
          <select name="drank" id="drank">
            <option value="Cola">Cola</option>
            <option value="Fanta">Fanta</option>
            <option value="Sprite">Sprite</option>
          </select>
        </section>
        <hr>
        <section class="saus">
          <label for="saus">Wat voor soort saus wenst u?</label>
          <input list="sauzen" id="saus" name="saus">
          <datalist id="sauzen">
            <option value="ketchup"></option>
            <option value="mayo"></option>
            <option value="mosterd"></option>
			<option value="andalouse"></option>
			<option value="looksaus"></option>
			<option value="samurai"></option>
          </datalist>
        </section>
        <hr>
        <section class="extra info">
          <label for="extra">Nog iets anders?</label>
          <br>
          <textarea id="extra" name="extra" rows="5" cols="40"></textarea>
        </section>
        <hr>

        <section class="inleveren">
          <input type="submit">
        </section>
      </form>
    </section>
  </body>
</html>