iva/oss-vaja1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

urejeni inputi da so vsi poravnani in zaobljeni, poravnani tudi radio in checkbox

Browse Source
This commit is contained in:
iva
2026-10-28 20:15:36 +01:00
parent 325a5cabb9
commit 296ec5edaf
2 changed files with 67 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
rezervacija.html
+39 -34
View File
@@ -48,20 +48,11 @@
<legend>Podrobnosti rezervacije:</legend>
Datum obiska
<br>
<input type="date" id="datum-obiska" name="datum-obiska" required>
<br>
<br>
Ura obiska
<br>
<input type="time" id="ura-obiska" name="ura-obiska" min="10:00" max="21:00" required>
<br>
<br>
Število oseb
<br>
<input type="number" min="1" max="11" id="stevilo-oseb" name="stevilo-oseb" required>
<br>
<br>
Prostor:
<select id="prostor" name="prostor">
<option value="notranjost">Notranjost</option>
@@ -69,43 +60,57 @@
<option value="zasebna-soba">Zasebna soba</option>
</select>
</fieldset>
<br>
<br>
<fieldset class="field_rezervacija">
<legend>Osebni podatki:</legend>
Ime in priimek
<br>
<input type="text" id="ime-priimek" name="ime-priimek" required>
<br>
<br>
E-poštni naslov
<br>
<input type="email" id="email" name="email" required>
<br>
<br>
Telefonska številka
<br>
<input type="tel" id="telefon-st" name="telefon-st" placeholder="022-333-444" pattern="[0-9]{3}-[0-9]{3}-[0-9]{3}" required>
<input type="tel" id="telefon-st" name="telefon-st" placeholder="022-333-444" pattern="[0-9]{3}[0-9]{3}[0-9]{3}" required>
Priložnost <br>
<div class="opcije">
<div class="opcije_radio">
<input type="radio" id="brez" name="priloznost" value="brez">
<label for="brez">Brez</label>
</div>
<div class="opcije_radio">
<input type="radio" id="rojstni-dan" name="priloznost" value="rojstni-dan">
<label for="rojstni-dan">Rojstni dan</label>
</div>
<div class="opcije_radio">
<input type="radio" id="obletnica" name="priloznost" value="obletnica">
<label for="obletnica">Obletnica</label>
</div>
<div class="opcije_radio">
<input type="radio" id="poslovno-srecanje" name="priloznost" value="poslovno-srecanje">
<label for="poslovno-srecanje">Poslovno srečanje</label>
</div>
</div>
</fieldset>
<br>
<br>
<fieldset class="field_rezervacija">
<legend>Dodatne želje:</legend>
Priložnost
<br>
<input type="radio" id="brez" name="priloznost" value="brez"> Brez
<input type="radio" id="rojstni-dan" name="priloznost" value="rojstni-dan"> Rojstni dan
<input type="radio" id="obletnica" name="priloznost" value="obletnica"> Obletnica
<input type="radio" id="poslovno-srecanje" name="priloznost" value="poslovno-srecanje"> Poslovno srečanje
<br>
<br>
Posebne omejitve <br>
<input type="checkbox" id="vegan" name="posebne-omejitve" value="vegan"> Vegansko
<input type="checkbox" id="vegetarijan" name="posebne-omejitve" value="vegetarijan"> Vegetarjansko
<input type="checkbox" id="gluten" name="posebne-omejitve" value="gluten"> Brez glutena
<input type="checkbox" id="laktoza" name="posebne-omejitve" value="laktoza"> Brez laktoze
<br>
<br>
Posebne omejitve <br>
<div class="opcije">
<div class="opcije_checkbox">
<input type="checkbox" id="vegan" name="posebne-omejitve" value="vegan">
<lable for="vegan">Vegansko</lable>
</div>
<div class="opcije_checkbox">
<input type="checkbox" id="vegetarijan" name="posebne-omejitve" value="vegetarijan">
<lable for="vegetarijan">Vegetarjansko</lable>
</div>
<div class="opcije_checkbox">
<input type="checkbox" id="gluten" name="posebne-omejitve" value="gluten">
<label for="gluten">Brez glutena</label>
</div>
<div class="opcije_checkbox">
<input type="checkbox" id="laktoza" name="posebne-omejitve" value="laktoza">
<label for="laktoza">Brez laktoze</label>
</div>
</div>
Opombe
<br>
<textarea id="opombe" name="opombe" rows="5" cols="50"> </textarea>
stylesheet.css
+28
View File
@@ -618,6 +618,10 @@ footer p {
border-radius: var(--zaobljenost);
border:none;
border-top:0.3rem solid var(--barva-poudarek);
display:grid;
grid-template-columns: 1fr 2fr;
gap:1rem;
padding: 2rem;
}
.field_rezervacija legend {
@@ -629,6 +633,16 @@ footer p {
padding: 0.5rem;
}
.field_rezervacija input,
.field_rezervacija select {
border-radius: var(--zaobljenost);
height: 2rem;
padding:0.5rem;
font-family: "Montserrat", sans-serif;
}
.field_rezervacija:focus-within {
border-top:0.3rem solid var(--barva-dodatna);
}
@@ -636,4 +650,18 @@ footer p {
.field_rezervacija:focus-within legend {
background-color: var(--barva-dodatna);
color: var(--barva-besedilo);
}
.opcije {
display: flex ;
flex-direction: row;
justify-content: space-between;
}
.opcije_radio,
.opcije_checkbox {
display:flex;
gap: 1rem;
align-items: center;
}