święta complete

css/swieta.css

@@ -4,23 +4,31 @@
 }
 
 #swieta {
+    & > * {
+        padding: 2rem;
+    }
+    & .card:hover{
+        transform:none;
+    }
     & > header {
         & p, & h1 {
             color: white;
         }
-        padding: 8rem 2rem;
-        padding-bottom: 0;
+        padding: 8rem 2rem 0;
+        max-width: var(--max-content-width);
+        margin: 0 auto;
         & span {
             word-spacing: 0.5rem;
             color: var(--swieta-gold);
         }
         & > div {
-            padding: 4rem 2rem;
+            padding: 2rem;
             display: flex;
             flex-direction: column;
             align-items: center;
             background-color: var(--swieta-green);
             border-radius: var(--border-radius);
+
         }
     }
 
@@ -36,6 +44,34 @@
             }
         }
     }
+
+    & #additional-info {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 2rem;
+        @media (max-width: 768px) {
+            grid-template-columns: 1fr ;
+        }
+        & > div {
+            box-sizing: border-box;
+            padding: 2rem;
+            display: flex;
+            flex-direction:column;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        & span {
+            color: var(--primary);
+        }
+        &  a {
+            text-decoration: none;
+            color: var(--on-background);
+        }
+        & p {
+            margin: 0;
+            text-align: center;
+        }
+    }
 }
 
 

html/swieta.templ

@@ -14,6 +14,18 @@ templ Swieta(products []types.Product) {
 					</p>
 				</div>
 			</header>
+			<section id="additional-info">
+				<div class="card">
+					<span>ODBIÓR ZAMÓWIEŃ</span>
+					<h3>24 grudnia (wigilia)</h3>
+					<p>Wszystkie zamówienia wydajemy w wigilię w Kawiarnii</p>
+				</div>
+				<div class="card">
+					<span>ZAMÓWIENIA PRZYJMUJEMY DO</span>
+					<h3>15 grudnia</h3>
+					<p>Zamówienia można złożyć telefonicznie <a href="tel:+48690214515">690 214 515</a><br>lub osobiście w kawiarnii</p>
+				</div>
+			</section>
 			<div id="wyroby" class="swieta">
 				<h2>Święteczne Słodkości</h2>
 				for _, product:= range products {