some refactors

base.css

@@ -63,7 +63,7 @@ p {
     line-height: 1.5rem;
 }
 
-section, nav, footer {
+body > nav, body > footer, body > main > * {
     padding: 8rem 2rem;
 
     & > div:only-child, &:not(:has(>div:only-child)) {
@@ -72,7 +72,7 @@ section, nav, footer {
     }
 }
 
-nav {
+body > nav {
     padding: 1rem;
 }
 

home.css

@@ -1,6 +1,6 @@
 @import "base.css";
 
-.hero {
+#index > header {
     max-width: var(--max-content-width);
 
     display: grid;
@@ -49,7 +49,7 @@
     }
 }
 
-.about-us {
+#about-us {
     background-color: var(--surface-container-low);
 
     & > div {
@@ -100,7 +100,7 @@
     }
 }
 
-.featured-delights {
+#featured-delights {
     gap: 2rem;
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
@@ -121,7 +121,7 @@
     }
 }
 
-.kawiarnia {
+#kawiarnia {
     background-color: var(--secondary-container);
 
     & > div {

index.html

@@ -19,11 +19,11 @@
             <a href="portfolio.html">Portfolio</a>
             <a href="kawiarnia.html">Kawiarnia</a>
         </div>
-        <a class="btn">Kontakt</a>
+        <a class="btn" href="#footer">Kontakt</a>
     </div>
 </nav>
-<main>
-    <section class="hero">
+<main id="index">
+    <header>
         <div>
             <h1>Słodkości tworzone z <span>pasją</span></h1>
             <p>Naturalne składniki, domowe receptury i pasja. Tworzymy torty i wypieki na Twoje najważniejsze chwile
@@ -33,8 +33,8 @@
         <div>
             <img alt="tort" src="images/001.jpg"/>
         </div>
-    </section>
-    <section class="about-us">
+    </header>
+    <section id="about-us">
         <div>
             <div>
                 <div>
@@ -59,7 +59,7 @@
             </div>
         </div>
     </section>
-    <section class="featured-delights">
+    <section id="featured-delights">
         <h2>Nasze Wyroby</h2>
         <div class="card">
             <div>
@@ -114,7 +114,7 @@
         </div>
 
     </section>
-    <section class="kawiarnia">
+    <section id="kawiarnia">
         <div>
             <div>
                 <h3>Twój drugi dom</h3>
@@ -161,7 +161,7 @@
         </div>
     </section>
 </main>
-<footer>
+<footer id="footer">
     <div>
         <div>
             <img alt="logo" src="scraped/pobrane-1.png" style="width: 14rem"/>

layout.css

@@ -1,7 +1,7 @@
 @import "base.css";
 
 
-nav {
+body > nav {
     position: sticky;
     top: 0;
     z-index: 50;

wyroby.css

@@ -1,4 +1,5 @@
 @import "base.css";
+@import "wyroby_torty.css";
 
 #wyroby {
     padding-top: 2rem;
@@ -8,20 +9,23 @@
         align-items: center;
         display: flex;
         flex-direction: column;
+
         & > p {
             margin: 0;
         }
+
         & > * {
             text-align: center;
             max-width: 40rem;
         }
-        & > div {
+
+        & > nav {
              display: flex;
              align-items: center;
              gap: 1rem;
              justify-content: center;
              padding: 3rem;
-         }
+        }
     }
 
 

wyroby.html

@@ -28,12 +28,12 @@
         <p>Poznaj nasze tradycyjne receptury przekute w nowoczesne formy. Każdy wypiek to historia pasji, a każde lody
             to
             powiew naturalnej świeżości</p>
-        <div>
+        <nav>
             <a class="btn-green">Ciasta</a>
             <a class="btn-green" href="wyroby_torty.html">Torty</a>
             <a class="btn-green" href="wyroby_slodkie_stoly.html">Slodkie stoły</a>
             <a class="btn-green" href="wyroby_lody.html">Lody</a>
-        </div>
+        </nav>
     </header>
     <section>
         <div class="card">

wyroby_torty.html

@@ -28,12 +28,12 @@
         <p>Poznaj nasze tradycyjne receptury przekute w nowoczesne formy. Każdy wypiek to historia pasji, a każde lody
             to
             powiew naturalnej świeżości</p>
-        <div>
+        <nav>
             <a class="btn-green" href="wyroby.html">Ciasta</a>
             <a class="btn-green">Torty</a>
             <a class="btn-green" href="wyroby_slodkie_stoly.html">Slodkie stoły</a>
             <a class="btn-green" href="wyroby_lody.html">Lody</a>
-        </div>
+        </nav>
     </header>
     <section>
         <div>