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

popravljeni zapisi label in narejeni gumbi za oddajo in ponastavitev obrazca

Browse Source
This commit is contained in:
iva
2026-10-28 20:43:24 +01:00
parent 296ec5edaf
commit 10a0f35160
2 changed files with 60 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
rezervacija.html
+12 -11
View File
@@ -63,9 +63,9 @@
<fieldset class="field_rezervacija"> <fieldset class="field_rezervacija">
<legend>Osebni podatki:</legend> <legend>Osebni podatki:</legend>
Ime in priimek Ime in priimek
<input type="text" id="ime-priimek" name="ime-priimek" required> <input type="text" id="ime-priimek" name="ime-priimek" placeholder="Neža Novak" required>
E-poštni naslov E-poštni naslov
<input type="email" id="email" name="email" required> <input type="email" id="email" name="email" placeholder="neza.novak@primer.si" required>
Telefonska številka Telefonska številka
<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> Priložnost <br>
@@ -96,11 +96,11 @@
<div class="opcije"> <div class="opcije">
<div class="opcije_checkbox"> <div class="opcije_checkbox">
<input type="checkbox" id="vegan" name="posebne-omejitve" value="vegan"> <input type="checkbox" id="vegan" name="posebne-omejitve" value="vegan">
<lable for="vegan">Vegansko</lable> <label for="vegan">Vegansko</label>
</div> </div>
<div class="opcije_checkbox"> <div class="opcije_checkbox">
<input type="checkbox" id="vegetarijan" name="posebne-omejitve" value="vegetarijan"> <input type="checkbox" id="vegetarijan" name="posebne-omejitve" value="vegetarijan">
<lable for="vegetarijan">Vegetarjansko</lable> <label for="vegetarijan">Vegetarjansko</label>
</div> </div>
<div class="opcije_checkbox"> <div class="opcije_checkbox">
<input type="checkbox" id="gluten" name="posebne-omejitve" value="gluten"> <input type="checkbox" id="gluten" name="posebne-omejitve" value="gluten">
@@ -113,15 +113,16 @@
</div> </div>
Opombe Opombe
<br> <br>
<textarea id="opombe" name="opombe" rows="5" cols="50"> </textarea> <textarea id="opombe" placeholder="Npr. potrebujete stolček za otroka, ..." name="opombe" rows="5" cols="50" ></textarea>
<br>
<div class="pogoji_uporabe">
<input type="checkbox" id="pogoji" name="pogoji" value="da" required>
<label for="pogoji">Strinjam se z obdelavo osebnih podatkov </label>
</div>
</fieldset> </fieldset>
<br>
<br>
<input type="checkbox" id="pogoji" name="pogoji" value="da" required>Strinjam se z obdelavo osebnih podatkov
<br><br> <br><br>
<input type="submit" value="Oddaja rezervacije"> <input class="gumb_osnovni_obratno" type="submit" value="Oddaja rezervacije">
<br> <input class="gumb_manj" type="reset" value="Ponastavi">
<input type="reset" value="Ponastavi">
</form> </form>
<br><br> <br><br>
</main> </main>
stylesheet.css
+48 -4
View File
@@ -227,7 +227,7 @@ footer p {
font-size: 1.15rem; font-size: 1.15rem;
} }
.home_page .gumb_osnovni { .gumb_osnovni {
display: inline-block; display: inline-block;
padding: 0.85rem 1.5rem; padding: 0.85rem 1.5rem;
border-radius: 0.5rem; border-radius: 0.5rem;
@@ -240,7 +240,7 @@ footer p {
transition: background-color 0.2s ease; /* da izgleda sprememba barve bolj smooth */ transition: background-color 0.2s ease; /* da izgleda sprememba barve bolj smooth */
} }
.home_page .gumb_osnovni:hover { .gumb_osnovni:hover {
background-color: var(--barva-poudarek); background-color: var(--barva-poudarek);
color: var(--barva-besedilo-na-temnem); color: var(--barva-besedilo-na-temnem);
} }
@@ -634,13 +634,18 @@ footer p {
} }
.field_rezervacija input, .field_rezervacija input,
.field_rezervacija select { .field_rezervacija select,
.field_rezervacija textarea {
border-radius: var(--zaobljenost); border-radius: var(--zaobljenost);
height: 2rem; height: 2rem;
padding:0.5rem; padding:0.5rem;
font-family: "Montserrat", sans-serif; font-family: "Montserrat", sans-serif;
} }
.field_rezervacija textarea {
height:6rem;
}
.field_rezervacija:focus-within { .field_rezervacija:focus-within {
@@ -660,8 +665,47 @@ footer p {
} }
.opcije_radio, .opcije_radio,
.opcije_checkbox { .opcije_checkbox,
.pogoji_uporabe {
display:flex; display:flex;
gap: 1rem; gap: 1rem;
align-items: center; align-items: center;
}
.gumb_manj{
display: inline-block;
padding: 0.85rem 1.5rem;
border-radius: 0.5rem;
border: 0.01rem solid var(--barva-besedilo);
background-color: var(--barva-ozadje);
color: var(--barva-besedilo);
font-weight: 500;
text-decoration: none;
transition: background-color 0.2s ease; /* da izgleda sprememba barve bolj smooth */
}
.gumb_manj:hover {
background-color: var(--barva-dodatna3);
color: var(--barva-besedilo);
cursor: pointer;
}
.gumb_osnovni_obratno {
display: inline-block;
padding: 0.85rem 1.5rem;
border-radius: 0.5rem;
background-color: var(--barva-poudarek);
color: var(--barva-besedilo-na-temnem);
font-weight: 700;
text-decoration: none;
transition: background-color 0.2s ease; /* da izgleda sprememba barve bolj smooth */
}
.gumb_osnovni_obratno:hover {
background-color: var(--barva-dodatna);
color: var(--barva-besedilo);
cursor: pointer
} }