dodane še opis restavracije, kartice za favourite jedi, zančka za novo jed, in pa prilagoditev telefonu oz pač manjšim zaslonom

index.html

@@ -45,7 +45,7 @@
                         <figcaption>Mučkalica</figcaption>
                     </figure>
                     <div class="card_vsebina">
-                        <h3>Mučkalica</h3>ž
+                        <h3>Mučkalica</h3>
                         <p>Tradicionalna balkanska klasika, ki vedno znova navduši.</p><br>
                     </div>
                 </article>

stylesheet.css

@@ -243,3 +243,148 @@ footer p {
     color: var(--barva-besedilo-na-temnem);
 }
 
+/* opis restavracije */
+
+.home_page .o_restavraciji {
+    max-width: 850px;
+    margin: 0 auto 4rem;
+    text-align: center;
+}
+
+.home_page .o_restavraciji h2,
+.home_page .priljubljene_jedi > h2 {
+    margin-bottom: 1.5rem;
+}
+
+/* kartice priljubjenih jedi */
+
+.home_page .priljubljene_jedi {
+    margin-bottom: 2rem;
+}
+
+.home_page .priljubljene_jedi > h2 {
+    text-align: center;
+}
+
+.home_page .jedi_grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr)); /* fr je enota ki ti pove kolkšen delež prostora zavzeme, fraction, pač da se lahko samodejno razporedijo brez definiceije procentov */
+    align-items: stretch;
+    gap: 1.5rem;
+}
+
+.home_page .jedi_card {
+    display: flex;
+    flex-direction: column;
+
+    min-width: 0;
+    overflow: hidden;
+
+    background-color: var(--barva-kartice);
+    border-radius: var(--zaobljenost);
+    box-shadow: var(--senca-kartice);
+}
+
+.home_page .card_slika {
+    position: relative;
+
+    height: 200px;
+    flex-shrink: 0;
+    overflow: hidden;
+    margin: 0;
+}
+
+.home_page .card_slika img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+}
+
+.home_page .card_slika figcaption {
+    display: none; /* da se imena ne podvajajo ker je figcaption v mojem primeru enak h3 jedi*/
+}
+
+.home_page .card_vsebina {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    padding: 1.25rem;
+}
+
+.home_page .card_vsebina h3 {
+    margin-top: 0;
+    margin-bottom: 0.75rem;
+}
+
+.home_page .card_vsebina p {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+/*značka novo */
+
+.home_page .znacka_novo {
+    position: absolute;
+    top: 0.75rem;
+    right: 0.75rem;
+    z-index: 1; /* da je postavljena čisto odspredaj */
+
+    padding: 0.3rem 0.75rem;
+    border-radius: 999px;
+
+    background-color: var(--barva-dodatna);
+    color: var(--barva-besedilo);
+    font-size: 0.8rem;
+    font-weight: 700;
+}
+
+/* prilagotitev telefonom */
+
+@media (max-width: 800px) {
+    .nav_bar {
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+
+    .main_menu {
+        justify-content: center;
+    }
+
+    .home_page .jedi_grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .home_page .hero h1 {
+        font-size: 2.6rem;
+    }
+}
+
+@media (max-width: 520px) {
+    .main_menu {
+        gap: 0.15rem;
+    }
+
+    .main_menu a {
+        padding: 0.45rem;
+        font-size: 0.8rem;
+    }
+
+    .home_page .jedi_grid {
+        grid-template-columns: 1fr; /*da bojo v bistvu vsak v svoji vrst */
+    }
+
+    .home_page .hero {
+        min-height: 60vh;
+        padding: 2rem 1rem;
+    }
+
+    .home_page .hero h1 {
+        font-size: 2.2rem;
+    }
+
+    h2 {
+        font-size: 1.7rem;
+    }
+}