max width

components.css

@@ -14,19 +14,25 @@
     }
 }
 
-h1 {
+h1, h2 {
     margin: 0;
     font-family:  serif;
     color: var(--on-background);
-    font-size: 4rem;
-    line-height: 3.5rem;
-
     & > span {
         font-style: italic;
         color: var(--primary);
     }
 }
 
+h1{
+    font-size: 4rem;
+    line-height: 3.5rem;
+}
+
+h2{
+    font-size: 3.5rem;
+}
+
 p {
     color: var(--on-background);
     line-height: 1.5rem;

index.html

@@ -12,14 +12,16 @@
 </head>
 <body>
     <nav>
-        <img alt="logo" src="scraped/pobrane-1.png" style="width: 14rem"/>
         <div>
-        	<a>Strona Główna</a>
+            <img alt="logo" src="scraped/pobrane-1.png" style="width: 14rem"/>
-            <a href="wyroby">Wyroby</a>
+            <div>
-            <a href="portfolio">Portfolio</a>
+                <a>Strona Główna</a>
-            <a href="kawiarnia">Kawiarnia</a>
+                <a href="wyroby">Wyroby</a>
+                <a href="portfolio">Portfolio</a>
+                <a href="kawiarnia">Kawiarnia</a>
+            </div>
+            <a href="kontakt" class="btn">Kontakt</a>
         </div>
-        <a href="kontakt" class="btn">Kontakt</a>
     </nav>
     <main>
         <section class="hero">
@@ -30,10 +32,23 @@
                     <a href="wyroby" class="btn">Zobacz naszą ofertę</a>
                 </div>
                 <div>
-                    <img alt="tort" src="images/4-Z7293390-scaled_01.jpg"/>
+                    <img alt="tort" src="images/001.jpg"/>
+                </div>
+            </div>
+        </section>
+        <section class="about-us">
+            <div>
+                <div>
+                    <img alt="kawiarnia" src="images/002.jpg"/>
+                </div>
+                <div>
+                    <span>Tradycja i serce</span>
+                    <h2>O nas</h2>
+                    <p>
+                        „Piekarnik Gosi” to marzenie, które udało mi się zrealizować dzięki wsparciu i pomocy moich najbliższych. To pracownia cukiernicza stworzona z zamiłowania do pieczenia. Tworzę z pasją, z najwyższej jakości składników, słodkości, które uświetnią każdą uroczystość oraz spotkanie. Wszystkie wypieki wykonuje od podstaw własnoręcznie : od biszkoptu , frużelin owocowych, chrupek , kremów aż po elementy dekoracyjne. W mojej ofercie znajdują się torty weselne, słodkie stoły, torty okazjonalne, tarty i ciasta wykonywane na indywidualne zamówienia. Co wyróżnia moją pracownię? Domowy i naturalny smak 🙂 Realizuje życzenia klientów ze starannością i pełnym zaangażowaniem.
+                    </p>
                 </div>
             </div>
-
         </section>
     </main>
 </body>

style.css

@@ -6,8 +6,6 @@ body {
     font-family: 'Plus Jakarta Sans', sans-serif;
 }
 
-
-
 nav {
     /* positioning and look */
     position: sticky;
@@ -17,6 +15,9 @@ nav {
     background-color: color-mix(in srgb, var(--surface), transparent 20%);
     padding: 1rem;
     height: var(--nav-height);
+}
+
+nav > div {
     max-width: var(--max-content-width);
     margin: 0 auto;
 
@@ -54,11 +55,14 @@ nav {
     }
 }
 
-.hero {
+section {
-    height: calc(100vh - var(--nav-height) - 2rem);
     padding: 1rem 2rem;
     margin: 0 auto;
+}
+
+.hero {
     max-width: var(--max-content-width);
+    height: calc(100vh - var(--nav-height) - 2rem);
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -98,4 +102,26 @@ nav {
             }
         }
     }
+}
+
+.about-us {
+    background-color: var(--surface-container-low);
+
+    & > div {
+        max-width: var(--max-content-width);
+        margin: 0 auto;
+        padding: 2rem;
+
+        display: grid;
+        grid-template-columns: 2fr 1fr;
+        align-items: center;
+        gap: 1rem;
+
+        & > div {
+            & > span {
+                color: var(--primary);
+            }
+            gap: 1rem;
+        }
+    }
 }