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

Compare commits

base: iva/oss-vaja1:b285e5d04ba702368c1cd2ce37c44d3ca1e16b64
Branches Tags
iva/oss-vaja1:master
..
compare: iva/oss-vaja1:296ec5edafa764db73886c1d07520c8c99fdf3ea
Branches Tags
iva/oss-vaja1:master
8 Commits
b285e5d04b .. 296ec5edaf
Author SHA1 Message Date
iva 296ec5edaf urejeni inputi da so vsi poravnani in zaobljeni, poravnani tudi radio in checkbox 2026-10-28 20:15:36 +01:00
iva 325a5cabb9 urejeni borderji okoli fieldstov 2026-10-28 19:35:09 +01:00
iva 5c56e96c17 meni receptov urejen v sistem gumbov 2026-10-28 16:32:29 +01:00
iva 20cdd155d6 ustvarjen template za kartice receptov 2026-10-28 16:21:23 +01:00
iva c6d2a65336 dodani div class=recepti_grid v vseh receptih 2026-10-28 15:03:58 +01:00
iva 5d487a73ad recepti urejeni dodani classi in div za urejanje kot kartice 2026-10-28 14:55:11 +01:00
iva 8228b63d6c sprememnjen padding v mainu 2026-10-28 14:18:35 +01:00
iva 4c6fdc33bf dodani classi v recepte 2026-10-27 10:45:38 +01:00
3 changed files with 528 additions and 310 deletions
Expand all files Collapse all files
recepti.html
+80 -50
View File
@@ -22,32 +22,39 @@
</ul>
</nav>
</header>
<main class="recepti_page">
<h1 id="na_vrh">Recepti</h1>
<ul>
<li><a href="#muckalica">Mučkalica</a></li>
<li><a href="#pizza_diavola">Pizza diavola</a></li>
<li><a href="#paella">Paella</a></li>
<ul class="seznam_receptov">
<li><a class="gumb_2" href="#muckalica">Mučkalica</a></li>
<li><a class="gumb_2" href="#pizza_diavola">Pizza diavola</a></li>
<li><a class="gumb_2" href="#paella">Paella</a></li>
</ul>
<section class="recepti_uvod">
<h2>Svetovni okusi. Vaša kuhinja</h2>
<p>Navdihnjeni s potovanj, ustvarjeni za vašo mizo. Odkrite recepte z različnih koncev sveta in prinesi košček kulinaričnega potovanja v svoj dom.</p> <br>
<article class="muckalica">
</section>
<article class="recepti_jedi" >
<h2 id="muckalica">Mučkalica </h2>
<figure>
<div class="recepti_grid">
<figure class="recepti_slika">
<img src="muckalica.png" alt="mučkalica">
<figcaption>Mučkalica</figcaption>
</figure>
<table>
<tr>
<th> Aktiven čas priprave </th>
<th> Skupen čas priprave </th>
<th> Število porcij </th>
</tr>
<tr>
<td>20 min</td>
<td>cca. 70 min</td>
<td>4 porcije</td>
</tr>
</table>
<div class="o_receptu">
<div class="recepti_info">
<ul>
<li><b>Aktiven čas priprave </b><br>
20min
</li>
<li><b>Skupen čas priprave</b> <br>
cca. 70min
</li>
<li><b>Število porciji</b> <br>
4 porcije
</li>
</ul>
</div>
<div class="recepti_sestavine">
<h3>Sestavine</h3>
<ul>
<li>800g svinjskega vratu ali plečeta</li>
@@ -64,6 +71,10 @@
<li>Ščepec čilija (po želji) </li>
<li>svež peteršilj za postrežbo</li>
</ul>
</div>
</div>
</div>
<div class="recepti_priprava">
<h3>Priprava</h3>
<ol>
<li>
@@ -91,27 +102,32 @@
<p>Poskusi, popravi začimbe in po želji dodaj ščepec čilija. Potresi s svežim peteršiljem. Postrezi s pečenim krompirjem ali domačim kruhom</p>
</li>
</ol>
<a href="#na_vrh">Na vrh strani</a>
</div>
<a class="gumb_3" href="#na_vrh">Na vrh strani</a>
</article>
<br>
<article class="pizza_diavola">
<article class="recepti_jedi">
<h2 id="pizza_diavola">Napolitanska pizza Diavola</h2>
<figure>
<div class="recepti_grid">
<figure class="recepti_slika">
<img src="pizza_diavola.png" alt="pizza diavola">
<figcaption>Pizza diavola</figcaption>
</figure>
<table>
<tr>
<th> Aktiven čas priprave </th>
<th> Skupen čas priprave </th>
<th> Število pic </th>
</tr>
<tr>
<td>30 min</td>
<td>cca. 13-25 ur</td>
<td>4 pice</td>
</tr>
</table>
<div class="o_receptu">
<div class="recepti_info">
<ul>
<li><b>Aktiven čas priprave </b><br>
30min
</li>
<li><b>Skupen čas priprave</b> <br>
cca. 13-25ur
</li>
<li><b>Število pic</b> <br>
4 pice
</li>
</ul>
</div>
<div class="recepti_sestavine">
<h3>Sestavine</h3>
<ul>
<li>600g moke tipa 00</li>
@@ -126,6 +142,10 @@
<li>malo olivnega olja</li>
<li>čili kosmiči (po želji) </li>
</ul>
</div>
</div>
</div>
<div class="recepti_priprava">
<h3>Priprava</h3>
<ol>
<li>
@@ -157,28 +177,32 @@
<p>Po želji dodaj nekaj kapljic oljčnega olja, svežo baziliko in čili v kosmičih.</p>
</li>
</ol>
<a href="#na_vrh">Na vrh strani</a>
</div>
<a class="gumb_3" href="#na_vrh">Na vrh strani</a>
</article>
<br>
<article>
<article class="recepti_jedi">
<h2 id="paella">Španska paella z morskimi zadeži</h2>
<p>Dišeč riž z žafranom, kozicami, školjkami in lignji, ki v eni ponvi združi bogate okuse morja in španske kulinarične tradicije.</p>
<figure>
<div class="recepti_grid">
<figure class="recepti_slika">
<img src="paella.png" alt="paella">
<figcaption>Paella</figcaption>
</figure>
<table>
<tr>
<th> Aktiven čas priprave </th>
<th> Skupen čas priprave </th>
<th> Število porcij </th>
</tr>
<tr>
<td>20 min</td>
<td>cca. 50 min</td>
<td>4 porcije</td>
</tr>
</table>
<div class="o_receptu">
<div class="recepti_info">
<ul>
<li><b>Aktiven čas priprave </b><br>
20min
</li>
<li><b>Skupen čas priprave</b> <br>
cca. 50min
</li>
<li><b>Število porciji</b> <br>
4 porcije
</li>
</ul>
</div>
<div class="recepti_sestavine">
<h3>Sestavine</h3>
<ul>
<li>320g riža za paello (npr. bomba ali podobna kratkozrnata sorta)</li>
@@ -197,6 +221,10 @@
<li>limona</li>
<li>svež peteršilj</li>
</ul>
</div>
</div>
</div>
<div class="recepti_priprava">
<h3>Priprava</h3>
<ol>
<li>
@@ -228,9 +256,11 @@
<p>Ponev odstavi, pokrij za približno 5 minut in nato paello postrezi z rezinami limone ter svežim peteršiljem.</p>
</li>
</ol>
<a href="#na_vrh">Na vrh strani</a>
</div>
<a class="gumb_3" href="#na_vrh">Na vrh strani</a>
</article>
<br><br>
</main>
<footer>
<address>
Za prste obliznit<br>
rezervacija.html
+44 -36
View File
@@ -22,6 +22,7 @@
</ul>
</nav>
</header>
<main class="rezervacija_page">
<h1>Vaša miza vas že čaka</h1>
<p>Dobra hrana je boljša v dobri družbi. Rezervirajte svojo mizo in si privoščite kulinarično popotovanje po spletu.</p>
<h2>Nekaj informaciji pred rezervacijo:</h2>
@@ -43,23 +44,15 @@
<h2>Rezervacija</h2>
<p>Izpolnite podatke in pošljite zahtevo za restavracijo.</p>
<form method="get">
<fieldset>
<fieldset class="field_rezervacija">
<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>
@@ -67,43 +60,57 @@
<option value="zasebna-soba">Zasebna soba</option>
</select>
</fieldset>
<br>
<br>
<fieldset>
<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>
<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>
<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>
@@ -117,6 +124,7 @@
<input type="reset" value="Ponastavi">
</form>
<br><br>
</main>
<footer>
<address>
Za prste obliznit<br>
stylesheet.css
+182 -2
View File
@@ -159,7 +159,7 @@ main {
width: 100%;
max-width: 1100px; /* da lahko stran malo diha, da ne zasede celega zaslona */
margin: 0 auto;
padding: 2rem 1rem 4rem;
padding: 3rem 1.5rem 5rem;
}
footer {
@@ -264,7 +264,7 @@ footer p {
margin-bottom: 2rem;
}
.home_page .priljubljene_jedi > h2 {
.home_page .priljubljene_jedi h2 {
text-align: center;
}
@@ -485,3 +485,183 @@ footer p {
font-weight: 700;
color: var(--barva-poudarek);
}
/*recepti page*/
.recepti_page {
width: 100%;
max-width: 1100px;
margin: 0 auto;
padding: 3rem 1.5rem 5rem;
}
.recepti_page h1 {
text-align: center;
}
/*menu receptov*/
.seznam_receptov {
display: flex;
max-width: 1100px;
justify-content: center;
gap: 3.5rem;
list-style: none;
margin-top: 3rem;
margin-bottom: 5rem;
}
.gumb_2 {
padding: 0.85rem 1.5rem;
border-radius: var(--zaobljenost);
outline: 0.15rem solid var(--barva-besedilo);
color: var(--barva-besedilo);
text-decoration: none;
}
.gumb_2:hover {
background-color:var(--barva-kartice);
transition:0.2s;
}
/* kartice receptov */
.recepti_jedi {
margin: 2rem;
padding: 1.5rem;
background-color: var(--barva-kartice);
border-radius:var(--zaobljenost);
box-shadow: var(--senca-kartice);
}
.recepti_jedi h2 {
text-align:center;
}
.recepti_grid {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
align-items: stretch;
gap: 0.5rem;
}
.o_receptu {
display:flex;
flex-direction: column;
}
.recepti_slika {
display: flex;
overflow: hidden;
flex-direction: column;
position:relative;
min-height: 350px;
flex-shrink: 0;
overflow: hidden;
margin:0;
}
.recepti_slika img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.recepti_slika figcaption {
display:none;
}
.recepti_info ul {
display:flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 3rem;
margin: 0;
padding: 0;
list-style: none;
}
.recepti_info li {
display: block;
text-align: center;
font-size: 0.95rem;
max-width: 10rem;
}
.gumb_3 {
display: inline-block;
padding: 0.5rem 1rem;
border-radius: var(--zaobljenost);
color: var(--barva-besedilo-na-temnem);
font-weight: 500;
text-decoration: none;
background-color: var(--barva-besedilo);
}
.gumb_3:hover {
background-color: var(--barva-dodatna);
color: var(--barva-besedilo);
transition: 0.2s;
font-weight: 500;
}
/*rezervacija- fieldseti */
.field_rezervacija {
background-color: var(--barva-kartice);
box-shadow: var(--senca-kartice);
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 {
background-color: var(--barva-poudarek);
color: var(--barva-besedilo-na-temnem);
font-weight: 600;
font-family: "Fraunces", sans-serif;
border-radius: var(--zaobljenost);
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);
}
.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;
}