hero section work

base.css

@@ -6,4 +6,6 @@
     --primary: #8c4d50;
     --primary-container: #fcacaf;
     --on-background: #363227;
+    --nav-height: 4rem;
+    --border-radius: 48px;
 }

components.css

@@ -6,5 +6,23 @@
     font-size: 1rem;
     border-radius: 100rem;
     text-decoration: none;
-    color: black;
+    color: var(--on-background);
+}
+
+h1 {
+    margin: 0;
+    font-family:  serif;
+    color: var(--on-background);
+    font-size: 4rem;
+    line-height: 3.5rem;
+
+    & > span {
+        font-style: italic;
+        color: var(--primary);
+    }
+}
+
+p {
+    color: var(--on-background);
+    line-height: 1.5rem;
 }

index.html

@@ -22,11 +22,16 @@
         <a href="kontakt" class="btn">Kontakt</a>
     </nav>
     <main>
-        <section>
-            <h1>Słodkości tworzone z pasją</h1>
-           	<span>Naturalne składniki, domowe receptury i pasja. Tworzym torty i wypieki na Twoje najważniejsze chwile  - od codziennych radości po wielkie uroczystości</span>
-           	<a href="wyroby">Zobacz naszą ofertę</a>
-            <img alt="tort" src="scraped/4-Z7293390-scaled.jpg"/>
+        <section class="hero">
+            <div>
+                <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  - od codziennych radości po wielkie uroczystości</p>
+                    <a href="wyroby" class="btn">Zobacz naszą ofertę</a>
+                </div>
+                <img alt="tort" src="images/4-Z7293390-scaled_01.jpg"/>
+            </div>
+
         </section>
     </main>
 </body>

style.css

@@ -6,6 +6,8 @@ body {
     font-family: 'Plus Jakarta Sans', sans-serif;
 }
 
+
+
 nav {
     /* positioning and look */
     position: sticky;
@@ -13,7 +15,7 @@ nav {
     backdrop-filter: blur(var(--backdrop-blur));
     background-color: color-mix(in srgb, var(--surface), transparent 20%);
     padding: 1rem;
-    height: 4rem;
+    height: var(--nav-height);
 
     /* content inside */
     display: grid;
@@ -40,3 +42,40 @@ nav {
         }
     }
 }
+
+.hero {
+    height: calc(100vh - var(--nav-height) - 2rem);
+    padding: 1rem 2rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    & > div{
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 2rem;
+
+        /* left portion */
+        & > div {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            justify-content: center;
+            gap: 1rem;
+        }
+
+        /* right portion */
+        & > img {
+            rotate: 2deg;
+            border-radius: var(--border-radius);
+            width: 100%;
+            height: 100%;
+            transition: rotate 0.7s;
+
+            &:hover {
+                rotate: 0deg;
+            }
+        }
+    }
+}