dodan hero naslov v css

index.html

@@ -1,19 +1,20 @@
 <!DOCTYPE html>
 <html lang="sl">
 <head>
+    <link rel="stylesheet" href="stylesheet.css">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Domov | Za prste obliznit</title>
 </head>
 <body>
-<header>
+<header class="site_header">
-    <nav>
+    <nav class="nav_bar">
-        <a href="index.html">
+        <a class="logo" href="index.html">
             <img src="logo.png" alt="Logotip restavracije" width="150"><br>
-             Za prste obliznit
+             <span>Za prste obliznit</span>
         </a>
-        <ul>
+        <ul class="main_menu">
-            <li><a href="index.html">Domov</a></li>
+            <li><a class="active" href="index.html">Domov</a></li>
             <li><a href="jedilnik.html">Jedilnik</a></li>
             <li><a href="recepti.html">Recepti</a></li>
             <li><a href="rezervacija.html">Rezervacija</a></li>
@@ -21,29 +22,55 @@
         </ul>
     </nav>
 </header>
-    <main>
+    <main class="home_page">
-        <h1>Svet na krožniku</h1>
+        <section class="hero">
-            <p>Okusi iz vseh koncev sveta, ki vas bodo vedno znova navdušili- od prvega grižljaja do zadnjega obliznjenega prsta.</p><br>
+            <div class="hero_vsebina">
-            <a href="rezervacija.html">Rezervirajte si mizo</a>
+                <h1>Svet na krožniku</h1>
-        <h2>O restavraciji</h2>
+                    <p>Okusi iz vseh koncev sveta, ki vas bodo vedno znova navdušili- od prvega grižljaja do zadnjega obliznjenega prsta.</p><br>
-            <p>Odkrivamo <i>okuse sveta</i> in jih združujemo na enem mestu. Od klasik do kulinaričnih posebnosti z različnih koncev sveta- pri nas vsak najde nekaj zase.</p>
+                    <a class="gumb_osnovni" href="rezervacija.html">Rezervirajte si mizo</a>
-            <p><b>Pridite, odkrite svoj najljubši okus in se prepusti kulinaričnemu potovanju.</b></p>
+            </div>
-        <h2>Najbolj priljubljene jedi</h2>
+        </section>
-            <figure>
+        <section class="o_restavraciji">
-                <img src="muckalica.png" alt="mučkalica">
+            <h2>O restavraciji</h2>
-                <figcaption>Mučkalica</figcaption>
+                <p>Odkrivamo <i>okuse sveta</i> in jih združujemo na enem mestu. Od klasik do kulinaričnih posebnosti z različnih koncev sveta- pri nas vsak najde nekaj zase.</p>
-            </figure>
+                <p><b>Pridite, odkrite svoj najljubši okus in se prepusti kulinaričnemu potovanju.</b></p>
-            <h3>Mučkalica</h3><p>Tradicionalna balkanska klasika, ki vedno znova navduši.</p><br>
+        </section>
-            <figure>
+        <section class="priljubljene_jedi">
-                <img src="pizza_diavola.png" alt="pizza diavola">
+            <h2>Najbolj priljubljene jedi</h2>
-                <figcaption>Pizza diavola</figcaption>
+            <div class="jedi_grid">
-            </figure>
+                <article class="jedi_card">
-            <h3>Pizza diavola</h3><p>Ko se italjanska tradicija sreča s pekočo strastjo.</p><br>
+                    <figure class="card_slika">
-            <figure>
+                        <img src="muckalica.png" alt="mučkalica">
-                <img src="paella.png" alt="Paella">
+                        <span class="znacka_novo">Novo</span>
-                <figcaption>Paella</figcaption>
+                        <figcaption>Mučkalica</figcaption>
-            </figure>
+                    </figure>
-            <h3>Paella</h3><p> Barvita španska klasika, ki združuje najboljše iz morja in kopnega.</p> <br>
+                    <div class="card_vsebina">
+                        <h3>Mučkalica</h3>ž
+                        <p>Tradicionalna balkanska klasika, ki vedno znova navduši.</p><br>
+                    </div>
+                </article>
+                <article class="jedi_card">
+                    <figure class="card_slika">
+                        <img src="pizza_diavola.png" alt="pizza diavola">
+                        <figcaption>Pizza diavola</figcaption>
+                    </figure>
+                    <div class="card_vsebina">
+                        <h3>Pizza diavola</h3>
+                        <p>Ko se italjanska tradicija sreča s pekočo strastjo.</p><br>
+                    </div>
+                </article>
+                <article class="jedi_card">
+                    <figure class="card_slika">
+                        <img src="paella.png" alt="Paella">
+                        <figcaption>Paella</figcaption>
+                    </figure>
+                    <div class="card_vsebina">
+                        <h3>Paella</h3>
+                        <p> Barvita španska klasika, ki združuje najboljše iz morja in kopnega.</p> <br>
+                    </div>
+                </article>
+            </div>
+        </section>
     </main>
     <footer>
     <address>

jedilnik.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="sl">
 <head>
+    <link rel="stylesheet" href="stylesheet.css">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Jedilnik | Za prste obliznit</title>
@@ -12,7 +13,7 @@
             <img src="logo.png" alt="Logotip restavracije" width="150"><br>
              Za prste obliznit
         </a>
-        <ul>
+        <ul class="main_menu">
             <li><a href="index.html">Domov</a></li>
             <li><a href="jedilnik.html">Jedilnik</a></li>
             <li><a href="recepti.html">Recepti</a></li>

o_nas.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="sl">
 <head>
+    <link rel="stylesheet" href="stylesheet.css">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>O nas | Za prste obliznit</title>
@@ -13,7 +14,7 @@
             <img src="logo.png" alt="Logotip restavracije" width="150"><br>
              Za prste obliznit
         </a>
-        <ul>
+        <ul class="main_menu">
             <li><a href="index.html">Domov</a></li>
             <li><a href="jedilnik.html">Jedilnik</a></li>
             <li><a href="recepti.html">Recepti</a></li>

recepti.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="sl">
 <head>
+    <link rel="stylesheet" href="stylesheet.css">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Recepti | Za prste obliznit</title>
@@ -12,7 +13,7 @@
             <img src="logo.png" alt="Logotip restavracije" width="150"><br>
              Za prste obliznit
         </a>
-        <ul>
+        <ul class="main_menu">
             <li><a href="index.html">Domov</a></li>
             <li><a href="jedilnik.html">Jedilnik</a></li>
             <li><a href="recepti.html">Recepti</a></li>

rezervacija.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="sl">
 <head>
+    <link rel="stylesheet" href="stylesheet.css">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Rezervacija | Za prste obliznit</title>
@@ -12,7 +13,7 @@
             <img src="logo.png" alt="Logotip restavracije" width="150"><br>
              Za prste obliznit
         </a>
-        <ul>
+        <ul class="main_menu">
             <li><a href="index.html">Domov</a></li>
             <li><a href="jedilnik.html">Jedilnik</a></li>
             <li><a href="recepti.html">Recepti</a></li>

stylesheet.css

@@ -0,0 +1,245 @@
+/* spetna pisava*/
+@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700&display=swap');
+
+/* CSS barve pa oblike ki se bojo ponavljale da mi jih ne bo treba vsakic znova definirt bojo tuki, pa ce bo reba kej spremenit bo tudi lazje, ker samo na enem mestu spremenis */
+:root {
+    --barva-ozadje: #F0E5D2; /*vse barve so vzete iz logotipa*/
+    --barva-besedilo: #45220E;
+    --barva-poudarek: #60552C; /*ta je tista malo bolj zelena*/
+    --barva-dodatna: #CE9550;
+
+    --barva-kartice: #FFF9F0;
+    --barva-besedilo-na-temnem: #F0E5D2;
+    --barva-hero-prekrivna: rgba(69, 34, 14, 0.55);
+    --barva-senca: rgba(69, 34, 14, 0.18); /* uporabljena vrednost rgba da lahko nastavim še prosojnost a- alpha chanell za prosojnost */
+
+    --senca-kartice: 0 0.25rem 0.8rem var(--barva-senca); /*rem- relative unit of measurement, lažje prilagajanje, var- pa predstavlja vrednost definirano v root-u */
+    --zaobljenost: 0.75rem;
+}
+
+/*osnovne nastavitve */
+
+* {
+    box-sizing: border-box; /* zvezdica pomeni da velja za vse */
+}
+
+html {
+    font-size: 100%;
+    scroll-behavior: smooth; /* men se je osebno samo lepše zdel da kamorkoli prideš da je vmes scroll transition da ne mors kr jumpat iz elementa na element */
+    scroll-padding-top: 7rem; /* ko bom pri receptih uporabljala sidra in skakanje po strani "nazaj na vrh" da mi naslova ne bo prekrila glava, da bo vmes 7rem prostora */
+}
+
+body {
+    margin: 0;
+    background-color: var(--barva-ozadje);
+    color: var(--barva-besedilo);
+    font-family: "Montserrat", sans-serif;
+    font-size: 1rem;
+    line-height: 1.7;
+}
+
+h1,
+h2,
+h3 {
+    color: var(--barva-besedilo);
+    font-family: "Fraunces", serif;
+    line-height: 1.25; /*koliko je razmoke med vrsticami, če bi bilo 0 bi se besedila prekrivala */
+}
+
+h1 {
+    font-size: 2.8rem;
+}
+
+h2 {
+    font-size: 2rem;
+}
+
+h3 {
+    font-size: 1.4rem;
+}
+
+img {
+    max-width: 100%;
+}
+
+a {
+    color: var(--barva-poudarek);
+}
+
+a:focus-visible { /*če klikneš Tab se okoli naslova pojavi obroč da veša kaj je izbrano*/
+    outline: 0.15rem solid var(--barva-dodatna);
+    outline-offset: 0.2rem;
+}
+
+/* glava in navigacija */
+
+.site_header {
+    position: sticky; /*da tudi ko scrollas dol ostane viden */
+    top: 0;
+    z-index: 1000; /* element je čisto odspredaj, no je pred elementi >1000, če bi pa dala nekemu elementu index 1001 bi bil pa ta prikazan nad tem */
+
+    background-color: var(--barva-ozadje); 
+    box-shadow: var(--senca-kartice); /*dodana senca za malo globine, bolj zaradi lepega kot karkoli drugega, no pa za to da se loči od ozadja kr sta iste barve */
+}
+
+.nav_bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1.5rem;
+
+    width: 100%;
+    max-width: 1100px;
+    min-height: 6rem;
+    margin: 0 auto;
+    padding: 0.5rem 1rem;
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+
+    color: var(--barva-besedilo);
+    font-family: "Fraunces", serif;
+    font-size: 1.2rem;
+    font-weight: 700;
+    text-decoration: none;
+}
+
+.logo br {
+    display: none; /* da slucajno nebi uničili vodoravne postavitve logotipa */
+}
+
+.logo img {
+    display: block;
+    width: 5rem;
+    height: auto;
+}
+
+.main_menu {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    gap: 0.35rem;
+
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.main_menu a {
+    display: block;
+    padding: 0.6rem 0.8rem;
+    border-radius: 0.4rem;
+
+    color: var(--barva-besedilo);
+    font-size: 0.95rem;
+    font-weight: 600;
+    text-decoration: none;
+
+    transition: background-color 0.2s ease;
+}
+
+.main_menu a:hover {
+    background-color: var(--barva-dodatna);
+}
+
+.main_menu a.active {
+    background-color: var(--barva-poudarek);
+    color: var(--barva-besedilo-na-temnem);
+}
+
+/* glavna vsebina in noga, na splosno*/
+
+main {
+    width: 100%;
+    max-width: 1100px; /* da lahko stran malo diha, da ne zasede celega zaslona */
+    margin: 0 auto;
+    padding: 2rem 1rem 4rem;
+}
+
+footer {
+    padding: 2.5rem 1rem;
+    background-color: var(--barva-besedilo);
+    color: var(--barva-ozadje);
+    text-align: center;
+}
+
+footer address {
+    margin-bottom: 1rem;
+    font-style: normal;
+}
+
+footer a {
+    color: var(--barva-dodatna);
+}
+
+footer p {
+    margin-bottom: 0;
+    font-size: 0.9rem;
+}
+
+/* hero naslov */
+
+.home_page .hero {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    min-height: 70vh; /* 1vh - 1% višine vidnega mesta, in pač ker se to vidno mesto razlikuje, je ta enota bolj responsive */
+    margin-bottom: 3rem;
+    padding: 3rem 1.5rem;
+
+    background-image:
+        linear-gradient(
+            var(--barva-hero-prekrivna),
+            var(--barva-hero-prekrivna) /*da je zmanjšana prosojnost slike ozadja, da tekst bolj "pade v oči" */
+        ),
+        url("restavracija.png");
+
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+
+    border-radius: var(--zaobljenost);
+    text-align: center;
+}
+
+.home_page .hero_vsebina {
+    width: 100%;
+    max-width: 700px;
+    color: var(--barva-besedilo-na-temnem);
+}
+
+.home_page .hero h1 {
+    margin-top: 0;
+    color: var(--barva-besedilo-na-temnem);
+    font-size: 3.5rem;
+}
+
+.home_page .hero p {
+    margin-bottom: 2rem;
+    color: var(--barva-besedilo-na-temnem);
+    font-size: 1.15rem;
+}
+
+.home_page .gumb_osnovni {
+    display: inline-block;
+    padding: 0.85rem 1.5rem;
+    border-radius: 0.5rem;
+
+    background-color: var(--barva-dodatna);
+    color: var(--barva-besedilo);
+    font-weight: 700;
+    text-decoration: none;
+
+    transition: background-color 0.2s ease; /* da izgleda sprememba barve bolj smooth */
+}
+
+.home_page .gumb_osnovni:hover {
+    background-color: var(--barva-poudarek);
+    color: var(--barva-besedilo-na-temnem);
+}
+