kawiarnia content section

kawiarnia.css

@@ -12,7 +12,12 @@
         position: absolute;
         bottom: 0;
         width: 100%;
-        & > img {width: 100%;}
+        height: 100%;
+        & > img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
         & > div {
             position: absolute;
             bottom: 0;
@@ -36,7 +41,7 @@
             line-height: unset;
         }
         & > * {
-            max-width: 40%;
+            max-width: 32rem;
             margin: 0;
         }
 
@@ -53,3 +58,54 @@
     }
 }
 
+#kawiarnia-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 2rem;
+    & > div{
+        justify-content: center;
+        display: grid;
+        grid-template-columns: repeat(auto-fill, 18rem);
+        width: 100%;
+        gap: 2rem;
+        & > div {
+            background-color: white;
+            border-radius: var(--border-radius);
+            padding: 2rem;
+            display: grid;
+            grid-template-columns: auto 1fr;
+            grid-template-rows: auto 1fr;
+            gap: 1rem;
+
+            & > svg {
+                padding: 1rem;
+                color: var(--icon-color);
+                background-color: rgb(from var(--icon-color) r g b / 10%);
+                border-radius: var(--border-radius);
+            }
+
+            & > h3 {
+                align-self: center;
+            }
+
+            & > ul {
+                grid-column: 1/span 2;
+
+                & > li {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    font-weight: bolder;
+                    & > span {
+                        color: var(--primary);
+                    }
+                    &:not(:last-child){
+                        border-bottom: 1px dashed var(--on-surface-variant);
+                    }
+                }
+            }
+        }
+    }
+}

kawiarnia.html

@@ -35,8 +35,37 @@
             <div></div>
         </div>
     </header>
-    <section>
+    <section id="kawiarnia-content">
         <h2>Nasza karta</h2>
+        <div>
+        <div>
+            <svg style="--icon-color: var(--primary)" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-coffee-icon lucide-coffee"><path d="M10 2v2"/><path d="M14 2v2"/><path d="M16 8a1 1 0 0 1 1 1v8a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1h14a4 4 0 1 1 0 8h-1"/><path d="M6 2v2"/></svg>
+            <h3>Kawy</h3>
+            <ul>
+                <li><p>Espresso</p><span>6 PLN</span></li>
+                <li><p>Espresso Affogato</p><span>12 PLN</span></li>
+                <li><p>Espresso Gourmet</p><span>16 PLN</span></li>
+                <li><p>Amerikana</p><span>8 PLN</span></li>
+                <li><p>Flat White</p><span>10 PLN</span></li>
+                <li><p>Cappucino</p><span>10 PLN</span></li>
+                <li><p>Caffee Latte</p><span>12 PLN</span></li>
+                <li><p>Latte Macchiato</p><span>12 PLN</span></li>
+                <li><p>Kawa Mrożona</p><span>18 PLN</span></li>
+            </ul>
+        </div>
+        <div>
+            <h3>Herbaty</h3>
+        </div>
+        <div>
+            <h3>Przekąski</h3>
+        </div>
+        <div>
+            <h3>Lody</h3>
+        </div>
+        <div>
+            <h3>Gofry</h3>
+        </div>
+        </div>
     </section>
 </main>
 <footer>