bronku/piekarnikgosipl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

layout work

Browse source
This commit is contained in:
bronku 2026-05-13 12:24:43 +02:00
parent 305771fb79
commit 77a27de73c
13 changed files with 667 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

3
base.css
View file

@ -97,4 +97,5 @@ ul {
img {
color: transparent;
}
}

23
components.css
View file

@ -137,4 +137,27 @@
font-weight: bold;
font-size: 1.25rem;
}
}
.offer-card {
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);
overflow: visible;
}
& > h3 {
align-self: center;
}
& > :last-child {
grid-column: 1 / -1;
}
}

2
index.html
View file

@ -12,7 +12,7 @@
<body>
<nav>
<div>
<img alt="logo" src="scraped/pobrane-1.png" style="width: 14rem"/>
<img alt="logo" src="scraped/pobrane-1.png"/>
<div>
<a>Strona Główna</a>
<a href="wyroby.html">Wyroby</a>

85
inspiration/torty/DESIGN.md Normal file
View file

@ -0,0 +1,85 @@
# Design System Document: Artisanal Elegance
## 1. Overview & Creative North Star
### Creative North Star: "The Confectioner’s Gallery"
This design system is not a mere utility; it is a digital extension of the physical 'Piekarnik Gosi' experience. It treats every interface as a curated display case, mirroring the warmth of a family-owned bakery and the precision of a high-end pâtisserie.
To break the "template" look common in local business sites, this system rejects rigid grids in favor of **Intentional Editorial Asymmetry**. We lean into overlapping elements—such as a product image bleeding off-center into a text block—to mimic the organic arrangement of cakes on a counter. The visual language is defined by high-contrast typography scales, where massive, elegant serifs meet delicate, airy sans-serifs, creating an atmosphere that is both approachable and elite.
---
## 2. Colors
The palette is derived from the shop's interior: sage greens, dusty roses, and warm creams. This is a tonal system designed for warmth.
### The "No-Line" Rule
**Explicit Instruction:** Designers are prohibited from using 1px solid borders to define sections. Boundaries must be defined solely through background color shifts. For example, a section using `surface-container-low` (#faf3e7) should sit directly against a `surface` (#fff8f0) background. This creates a soft, "dipped" effect rather than a harsh, boxed-in feel.
### Surface Hierarchy & Nesting
Treat the UI as physical layers of fine vellum paper. Use the surface tiers to create "nested" depth:
- **Base Level:** `surface` (#fff8f0) for the main body.
- **Sectioning:** `surface-container-low` (#faf3e7) for large background blocks (e.g., the "Our Story" section).
- **Interactive Layers:** `surface-container-highest` (#eae2d2) for secondary cards or floating menus to define importance through tonal weight.
### The "Glass & Gradient" Rule
To move beyond a flat, "standard" UI, use Glassmorphism for floating elements (like a navigation bar or a "Quick Cart"). Utilize semi-transparent surface colors with a `backdrop-blur` of 12px-20px.
**Signature CTA Polish:** Use subtle linear gradients for primary actions, transitioning from `primary` (#8c4d50) to `primary-container` (#fcacaf). This adds "visual soul" and a velvet-like texture that flat colors cannot replicate.
---
## 3. Typography
The typography strategy balances the "Tradition" of the bakery with the "Clarity" of a modern cafe menu.
- **Display & Headlines (Noto Serif):** These are our "Artisanal" markers. Use large scales (e.g., `display-lg` at 3.5rem) with tighter letter-spacing for a high-end editorial look. Italics should be used sparingly for "O nas" or "Nasze Wyroby" to evoke a handwritten, personal touch.
- **Titles & Body (Plus Jakarta Sans):** This is our "Modern Service" layer. It provides high legibility. `title-lg` is your workhorse for product names, while `body-md` ensures the ingredients list is readable at any age.
The hierarchy conveys the brand: The Serif speaks to the *quality* of the recipe; the Sans-Serif speaks to the *friendliness* of the service.
---
## 4. Elevation & Depth
We eschew structural lines for **Tonal Layering**.
- **The Layering Principle:** Stack containers to create lift. Place a `surface-container-lowest` (#ffffff) card on a `surface-container-low` (#faf3e7) section. This mimics the way a white pastry box sits on a cream-colored wooden table.
- **Ambient Shadows:** For "floating" elements (like a cupcake selection modal), use extra-diffused shadows.
- *Formula:* `0px 12px 32px rgba(54, 50, 39, 0.06)`. Note the color is a tinted version of `on-surface`, never pure black.
- **The "Ghost Border" Fallback:** If a border is required for accessibility, it must be a "Ghost Border": use `outline-variant` (#b9b1a3) at **15% opacity**. 100% opaque borders are strictly forbidden.
- **Soft Geometry:** Utilize the `lg` (2rem) and `xl` (3rem) roundedness tokens. This mimics the scalloped wall details and rounded seating seen in the 'Piekarnik Gosi' interior.
---
## 5. Components
### Buttons
- **Primary:** Rounded `full` (9999px). Gradient background (`primary` to `primary-container`). Label in `on-primary` (#fff7f6).
- **Secondary:** Surface-colored with a "Ghost Border." High-quality hover state: a subtle shift to `surface-container-high`.
### Cards & Lists
- **Rule:** Absolute prohibition of divider lines.
- **Implementation:** Use vertical whitespace (refer to Spacing Scale) and background shifts. A product list should be a sequence of `surface-container-lowest` tiles floating on a `surface` background.
- **Bakery Icons:** Use custom line-art icons (Cupcakes, Whisks) in the `primary` color, but place them within a `secondary-container` (#e0f5cb) circle to create a "stamp" effect.
### Selection Chips
- Use the `md` (1.5rem) roundedness. Use `secondary-container` for the "Active" state to bring in the sage green from the shop’s beams and window frames.
### Input Fields
- Avoid the "boxed" look. Use `surface-container-highest` as a solid background fill with a bottom-only `outline` at 20% opacity. This feels more like a chic, handwritten menu.
---
## 6. Do’s and Don'ts
### Do:
* **Embrace Whitespace:** Let the "Cream" background breathe. High-end design is defined by what isn't there.
* **Layer Tones:** Always ask "Can I use a color shift instead of a line?"
* **Iconography with Intent:** Use bakery-specific icons to reinforce the family-oriented, artisanal nature.
* **Asymmetric Layouts:** Place a large serif heading on the left and a product image slightly overlapping it on the right.
### Don't:
* **Don't use pure black (#000000):** Use `on-background` (#363227) for text to maintain a warm, organic feel.
* **Don't use hard corners:** Every element should feel as soft as a pastry. Minimum corner radius is `sm` (0.5rem), but aim for `lg` (2rem).
* **Don't use heavy shadows:** If the shadow looks "dirty" or "heavy," reduce the opacity. It should feel like morning light in a coffee shop.
* **Don't use standard Dividers:** If you need to separate content, use a change in background color or a 48px-64px vertical gap.

492
inspiration/torty/code.html Normal file
View file

@ -0,0 +1,492 @@
<!DOCTYPE html>
<html lang="pl"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400&amp;family=Plus+Jakarta+Sans:wght@400;500;600;700&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"background": "#fff8f0",
"outline": "#807a6d",
"on-secondary-container": "#4c5e3e",
"surface-container-lowest": "#ffffff",
"tertiary-fixed": "#f8d472",
"primary-dim": "#7e4145",
"inverse-primary": "#f9a9ac",
"surface-variant": "#eae2d2",
"on-secondary-fixed": "#3b4b2d",
"surface-tint": "#8c4d50",
"primary-fixed": "#fcacaf",
"on-secondary": "#edffd9",
"outline-variant": "#b9b1a3",
"on-primary-container": "#622b2f",
"error-dim": "#821a01",
"secondary-container": "#e0f5cb",
"on-secondary-fixed-variant": "#566847",
"error-container": "#fa7150",
"on-background": "#363227",
"on-tertiary-fixed": "#463600",
"secondary-dim": "#475839",
"on-tertiary-fixed-variant": "#695100",
"surface": "#fff8f0",
"inverse-surface": "#100e09",
"on-primary-fixed-variant": "#6d3438",
"surface-container-low": "#faf3e7",
"inverse-on-surface": "#a19c94",
"on-surface-variant": "#645f52",
"surface-container": "#f5ede0",
"on-primary": "#fff7f6",
"secondary-fixed-dim": "#d2e6bd",
"on-primary-fixed": "#48171c",
"surface-container-high": "#efe7d9",
"on-error-container": "#671200",
"secondary-fixed": "#e0f5cb",
"surface-container-highest": "#eae2d2",
"surface-dim": "#e2d9c8",
"secondary": "#536444",
"tertiary-container": "#f8d472",
"on-tertiary-container": "#5d4800",
"tertiary": "#765c00",
"on-error": "#fff7f6",
"surface-bright": "#fff8f0",
"primary-container": "#fcacaf",
"tertiary-fixed-dim": "#e9c666",
"on-tertiary": "#fff8ef",
"tertiary-dim": "#675000",
"primary": "#8c4d50",
"primary-fixed-dim": "#ed9fa2",
"error": "#aa371c",
"on-surface": "#363227"
},
"borderRadius": {
"DEFAULT": "1rem",
"lg": "2rem",
"xl": "3rem",
"full": "9999px"
},
"fontFamily": {
"headline": ["Noto Serif"],
"body": ["Plus Jakarta Sans"],
"label": ["Plus Jakarta Sans"]
}
},
},
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
body { font-family: 'Plus Jakarta Sans', sans-serif; }
h1, h2, h3, h4 { font-family: 'Noto Serif', serif; }
</style>
</head>
<body class="bg-background text-on-background">
<!-- Top Navigation -->
<nav class="bg-[#fff8f0]/80 dark:bg-[#1a1c18]/80 backdrop-blur-xl docked full-width top-0 sticky z-50">
<div class="flex justify-between items-center w-full px-8 py-4 max-w-7xl mx-auto">
<div class="text-2xl font-serif italic text-[#8c4d50] dark:text-[#fcacaf]">Piekarnik Gosi</div>
<div class="hidden md:flex items-center gap-8">
<a class="text-[#363227] dark:text-[#e6e2d9] opacity-80 hover:text-[#8c4d50] dark:hover:text-[#fcacaf] transition-all duration-300 font-medium" href="#">Strona Główna</a>
<a class="text-[#8c4d50] dark:text-[#fcacaf] font-bold border-b-2 border-[#8c4d50] dark:border-[#fcacaf] pb-1 transition-all duration-300" href="#">Wyroby</a>
<a class="text-[#363227] dark:text-[#e6e2d9] opacity-80 hover:text-[#8c4d50] dark:hover:text-[#fcacaf] transition-all duration-300 font-medium" href="#">Portfolio</a>
<a class="text-[#363227] dark:text-[#e6e2d9] opacity-80 hover:text-[#8c4d50] dark:hover:text-[#fcacaf] transition-all duration-300 font-medium" href="#">Kawiarnia</a>
</div>
<button class="bg-gradient-to-r from-primary to-primary-container text-on-primary px-8 py-2.5 rounded-full font-medium scale-95 transition-transform duration-200 hover:scale-100 shadow-sm">
Kontakt
</button>
</div>
</nav>
<main class="max-w-7xl mx-auto px-6 lg:px-8 py-16">
<!-- Hero Section -->
<header class="mb-20">
<h1 class="text-5xl lg:text-7xl font-bold tracking-tight mb-6">Nasze Słodkości</h1>
<p class="text-on-surface-variant text-lg max-w-2xl leading-relaxed">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>
</header>
<!-- Cakes & Pastries Section -->
<section class="mb-24">
<div class="flex items-center justify-between mb-12">
<h2 class="text-4xl font-bold">Cakes &amp; Pastries</h2>
<div class="h-[1px] flex-grow mx-8 bg-outline-variant opacity-20"></div>
<div class="flex gap-2">
<span class="bg-secondary-container text-on-secondary-container px-4 py-1.5 rounded-md text-sm font-medium">Ciasta</span>
<span class="bg-surface-container-highest px-4 py-1.5 rounded-md text-sm font-medium opacity-60">Torty</span>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
<!-- Product Card 1 -->
<div class="group flex flex-col bg-surface-container-lowest rounded-lg overflow-hidden transition-all duration-300 hover:-translate-y-2">
<div class="relative h-72 overflow-hidden">
<img alt="sophisticated multi-layered chocolate mousse cake with gold leaf decoration on a ceramic plate, soft morning light" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA8eaeSUB2UNdDs_Mg-Bzwk96Wu0WyyGB3vsUHxCJEUOkXi9CbLBN3hYpYBgk7-ZjowJ2KeaYVU-x6Lm0sb-EMEo0I5p0ntqY82EuxF4A21_Ffmou1eG6S0SmCt7kC3HbVHwhKh_XdaDnAYpPy35Ci2ynJTRJXVSofqEgz_HDieyST5LdtfQkByWSqTW2bM18ozh_jA5-bTKb-B-Ve4j0dvJ6p2KQmfQWFlD6XOO4FInkqrGDTEdjJbQRmYBzIyAxTNOh6LGJMdNf-k"/>
<div class="absolute top-4 right-4 bg-white/90 backdrop-blur px-3 py-1 rounded-full text-xs font-bold text-primary tracking-wider uppercase">Bestseller</div>
</div>
<div class="p-8 flex flex-col flex-grow">
<div class="flex justify-between items-start mb-4">
<h3 class="text-2xl font-bold leading-tight">Tort Musowy Truskawkowy</h3>
<span class="text-primary font-bold text-lg">120 zł/kg</span>
</div>
<p class="text-on-surface-variant text-sm mb-8 leading-relaxed">Delikatny mus na bazie białej czekolady i świeżych polskich truskawek, z chrupiącą warstwą prażynki.</p>
<div class="mt-auto pt-6">
<button class="w-full py-4 rounded-full bg-surface-container-high text-on-surface font-bold transition-all duration-300 hover:bg-primary hover:text-on-primary flex items-center justify-center gap-2">
<span class="material-symbols-outlined text-xl">shopping_basket</span>
Dodaj do zamówienia
</button>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="group flex flex-col bg-surface-container-lowest rounded-lg overflow-hidden transition-all duration-300 hover:-translate-y-2">
<div class="relative h-72 overflow-hidden">
<img alt="collection of artisan pastel colored cupcakes with delicate floral frosting swirls on a wooden bakery counter" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDk5K-uPB0likN3jDErxnNvZK11658Q5UQaeLtdGOlsKYsiyf4qKIB5bmbF7ILwew-lpj7R7JsdwHAUjG6-LQTa82BipkI1Di581-_iZatyKgJw2rL3hYBiHkg8rLn0BuzWEXegAxOWl0D7ucEZmbYdO1KdLHt7KDtbUtC7FRlFSq3P4rMT73xqyd9oTI3wYEmfXAQFPPXAVlJD_8aagKxPqtdJ860b3onRRwf6QG1nrOcbQj4Qdv2OD9HCjJlyG5CUjBr-3K_4nFHB"/>
</div>
<div class="p-8 flex flex-col flex-grow">
<div class="flex justify-between items-start mb-4">
<h3 class="text-2xl font-bold leading-tight">Zestaw Cupcakes</h3>
<span class="text-primary font-bold text-lg">14 zł/szt</span>
</div>
<p class="text-on-surface-variant text-sm mb-8 leading-relaxed">Ręcznie dekorowane babeczki w różnych smakach: wanilia, słony karmel, pistacja. Idealne na prezent.</p>
<div class="mt-auto pt-6">
<button class="w-full py-4 rounded-full bg-surface-container-high text-on-surface font-bold transition-all duration-300 hover:bg-primary hover:text-on-primary flex items-center justify-center gap-2">
<span class="material-symbols-outlined text-xl">shopping_basket</span>
Dodaj do zamówienia
</button>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="group flex flex-col bg-surface-container-lowest rounded-lg overflow-hidden transition-all duration-300 hover:-translate-y-2">
<div class="relative h-72 overflow-hidden">
<img alt="classic sourdough tart with fresh blueberries and powdered sugar, rustic wooden background, artisanal bakery style" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDVXDjC63tmXiXhiEwjjuW8c4Y2PLue4zGYQ7bAnVmeWg4BKD7osLg0GolJOG7EVJtz9sDFTeQeTgMuuLEkacp1lgJi8TdlRSA_QMJkkHIC1miXtO_JZxs7SFgPyZZV6eRhBY15WhkhuiIXM2RUYR_f5COmpWx7thxVG7KmvQXdSSSZ1GARN5DEVRCy_fwE-vwTMISscgScheFBQYEBIBHzDjG_FcX7NaPK5XruTumtmzQSZWdgxnf67holWyNkvn0MkTQD4hp4xZmr"/>
</div>
<div class="p-8 flex flex-col flex-grow">
<div class="flex justify-between items-start mb-4">
<h3 class="text-2xl font-bold leading-tight">Klasyczny Biszkopt Owocowy</h3>
<span class="text-primary font-bold text-lg">85 zł/kg</span>
</div>
<p class="text-on-surface-variant text-sm mb-8 leading-relaxed">Puszysty biszkopt pieczony według rodzinnej receptury Gosi, z bitą śmietaną i sezonowymi owocami.</p>
<div class="mt-auto pt-6">
<button class="w-full py-4 rounded-full bg-surface-container-high text-on-surface font-bold transition-all duration-300 hover:bg-primary hover:text-on-primary flex items-center justify-center gap-2">
<span class="material-symbols-outlined text-xl">shopping_basket</span>
Dodaj do zamówienia
</button>
</div>
</div>
</div>
</div>
</section>
<!-- Torty (Cakes) Section -->
<section class="mb-24" id="torty">
<div class="flex items-center justify-between mb-12">
<h2 class="text-4xl lg:text-5xl font-bold italic">Torty</h2>
<div class="h-[1px] flex-grow mx-8 bg-outline-variant opacity-20"></div>
<span class="material-symbols-outlined text-primary text-3xl">cake</span>
</div>
<!-- 1. Special Occasion Cakes -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
<div class="bg-surface-container-low p-8 rounded-xl border border-outline-variant/10">
<h4 class="text-xl font-bold mb-3">Torty z masą cukrową</h4>
<p class="text-primary font-bold text-lg mb-2">od 190 zł</p>
<p class="text-on-surface-variant text-sm">Artystyczne zdobienia i figurki. Cena zależna od stopnia skomplikowania.</p>
</div>
<div class="bg-surface-container-low p-8 rounded-xl border border-outline-variant/10">
<h4 class="text-xl font-bold mb-3">Torty nowoczesne</h4>
<p class="text-primary font-bold text-lg mb-2">od 160 zł</p>
<p class="text-on-surface-variant text-sm">Eleganckie wykończenie tynkiem lub zamszem jadalnym.</p>
</div>
<div class="bg-surface-container-low p-8 rounded-xl border border-outline-variant/10">
<h4 class="text-xl font-bold mb-3">Torty bezowe</h4>
<p class="text-primary font-bold text-lg mb-2">od 140 zł</p>
<p class="text-on-surface-variant text-sm">Lekkie jak chmurka, z kremem mascarpone i owocami.</p>
</div>
<div class="bg-surface-container-low p-8 rounded-xl border border-outline-variant/10">
<h4 class="text-xl font-bold mb-3">Torty weselne</h4>
<p class="text-primary font-bold text-lg mb-2">Wycena indywidualna</p>
<p class="text-on-surface-variant text-sm">Degustacje i projektowanie dopasowane do motywu wesela.</p>
</div>
</div>
<!-- 2. Traditional Cake Pricing & Add-ons -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-12 mb-20 items-start">
<div class="lg:col-span-2">
<h3 class="text-2xl font-bold mb-8 flex items-center gap-3">
<span class="material-symbols-outlined text-secondary">payments</span>
Cennik Tortów Tradycyjnych
</h3>
<div class="overflow-hidden rounded-xl border border-outline-variant/20">
<table class="w-full text-left border-collapse bg-surface-container-lowest">
<thead>
<tr class="bg-secondary-container/30">
<th class="p-4 font-bold border-b border-outline-variant/20">Wielkość (porcje)</th>
<th class="p-4 font-bold border-b border-outline-variant/20 text-right">Cena orientacyjna</th>
</tr>
</thead>
<tbody class="text-on-surface">
<tr>
<td class="p-4 border-b border-outline-variant/10">Mały (6-8 porcji)</td>
<td class="p-4 border-b border-outline-variant/10 text-right font-medium">od 110 zł</td>
</tr>
<tr>
<td class="p-4 border-b border-outline-variant/10">Średni (10-12 porcji)</td>
<td class="p-4 border-b border-outline-variant/10 text-right font-medium">od 150 zł</td>
</tr>
<tr>
<td class="p-4 border-b border-outline-variant/10">Duży (15-18 porcji)</td>
<td class="p-4 border-b border-outline-variant/10 text-right font-medium">od 210 zł</td>
</tr>
<tr>
<td class="p-4 border-b border-outline-variant/10">Bardzo Duży (20-25 porcji)</td>
<td class="p-4 border-b border-outline-variant/10 text-right font-medium">od 280 zł</td>
</tr>
<tr>
<td class="p-4">Gigant (25+ porcji)</td>
<td class="p-4 text-right font-medium">od 350 zł</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="bg-primary-container/10 p-8 rounded-xl border border-primary/10">
<h4 class="text-xl font-bold mb-6 text-primary">Dodatki do tortów</h4>
<ul class="space-y-4">
<li class="flex justify-between items-center text-sm">
<span class="text-on-surface-variant">Figurka z masy cukrowej</span>
<span class="font-bold">od 40 zł</span>
</li>
<li class="flex justify-between items-center text-sm border-t border-primary/5 pt-4">
<span class="text-on-surface-variant">Żywe kwiaty (dekoracja)</span>
<span class="font-bold">od 30 zł</span>
</li>
<li class="flex justify-between items-center text-sm border-t border-primary/5 pt-4">
<span class="text-on-surface-variant">Topper personalizowany</span>
<span class="font-bold">25 zł</span>
</li>
<li class="flex justify-between items-center text-sm border-t border-primary/5 pt-4">
<span class="text-on-surface-variant">Piętrowanie (za każde piętro)</span>
<span class="font-bold">50 zł</span>
</li>
</ul>
</div>
</div>
<!-- 3. Flavor Menu -->
<div class="mb-24">
<div class="text-center mb-12">
<h3 class="text-3xl font-bold mb-2">Menu Smaków</h3>
<p class="text-on-surface-variant">Wybierz swoją ulubioną kompozycję bazową</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Chocolate Bases -->
<div class="space-y-6">
<div class="flex items-center gap-3 mb-4">
<div class="w-10 h-10 bg-[#5d4800]/10 rounded-full flex items-center justify-center">
<span class="material-symbols-outlined text-[#5d4800]" data-icon="restaurant_menu">restaurant_menu</span>
</div>
<h4 class="text-xl font-bold">Bazy Czekoladowe</h4>
</div>
<ul class="space-y-4">
<li class="group">
<span class="font-bold block text-on-surface group-hover:text-primary transition-colors">Kinder Bueno</span>
<span class="text-xs text-on-surface-variant leading-relaxed">Krem z orzechów laskowych, mleczna czekolada, chrupiące wafelki.</span>
</li>
<li class="group">
<span class="font-bold block text-on-surface group-hover:text-primary transition-colors">Oreo &amp; Dark Choco</span>
<span class="text-xs text-on-surface-variant leading-relaxed">Intensywna gorzka czekolada z kawałkami kultowych ciasteczek.</span>
</li>
<li class="group">
<span class="font-bold block text-on-surface group-hover:text-primary transition-colors">Słony Karmel</span>
<span class="text-xs text-on-surface-variant leading-relaxed">Ganache z solonego karmelu przełamany musem czekoladowym.</span>
</li>
</ul>
</div>
<!-- Creamy & Fruity -->
<div class="space-y-6">
<div class="flex items-center gap-3 mb-4">
<div class="w-10 h-10 bg-[#8c4d50]/10 rounded-full flex items-center justify-center">
<span class="material-symbols-outlined text-primary" data-icon="favorite">favorite</span>
</div>
<h4 class="text-xl font-bold">Kremowe i Owocowe</h4>
</div>
<ul class="space-y-4">
<li class="group">
<span class="font-bold block text-on-surface group-hover:text-primary transition-colors">Pistacja z Maliną</span>
<span class="text-xs text-on-surface-variant leading-relaxed">Autorska pasta pistacjowa z kwaśnym żelee malinowym.</span>
</li>
<li class="group">
<span class="font-bold block text-on-surface group-hover:text-primary transition-colors">Raffaello</span>
<span class="text-xs text-on-surface-variant leading-relaxed">Delikatny krem kokosowy z migdałami i białą czekoladą.</span>
</li>
<li class="group">
<span class="font-bold block text-on-surface group-hover:text-primary transition-colors">Mango-Marakuja</span>
<span class="text-xs text-on-surface-variant leading-relaxed">Egzotyczny mus owocowy na jasnym biszkopcie.</span>
</li>
</ul>
</div>
<!-- Refreshing -->
<div class="space-y-6">
<div class="flex items-center gap-3 mb-4">
<div class="w-10 h-10 bg-[#536444]/10 rounded-full flex items-center justify-center">
<span class="material-symbols-outlined text-secondary" data-icon="air">air</span>
</div>
<h4 class="text-xl font-bold">Smaki Orzeźwiające</h4>
</div>
<ul class="space-y-4">
<li class="group">
<span class="font-bold block text-on-surface group-hover:text-primary transition-colors">Cytrynowy Bez</span>
<span class="text-xs text-on-surface-variant leading-relaxed">Lekki krem cytrynowy z nutą kwiatu czarnego bzu.</span>
</li>
<li class="group">
<span class="font-bold block text-on-surface group-hover:text-primary transition-colors">Kawa z Whiskey</span>
<span class="text-xs text-on-surface-variant leading-relaxed">Mocne espresso z kremem na bazie Jacka Danielsa.</span>
</li>
<li class="group">
<span class="font-bold block text-on-surface group-hover:text-primary transition-colors">Leśna Jagoda</span>
<span class="text-xs text-on-surface-variant leading-relaxed">Puszysty krem jogurtowy z dużą ilością świeżych jagód.</span>
</li>
</ul>
</div>
</div>
</div>
<!-- 4. Modern Mousse Cakes Details -->
<div class="bg-surface-container rounded-3xl p-8 lg:p-16">
<div class="flex flex-col lg:flex-row items-start gap-12">
<div class="lg:w-1/3">
<h3 class="text-3xl font-bold mb-6 italic">Torty Nowoczesne (Musowe)</h3>
<p class="text-on-surface-variant mb-8 leading-relaxed">Nasze małe dzieła sztuki cukierniczej. Lekkie musy o wielowymiarowym smaku, ukryte pod aksamitnym zamszem.</p>
</div>
<div class="lg:w-2/3 grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Mousse 1 -->
<div class="gap-4">
<div>
<h5 class="font-bold text-lg mb-1">KARMEL-JOGURT-MIGDAŁY</h5>
<p class="text-xs text-on-surface-variant">Słony karmel, delikatny mus jogurtowy, chrupiąca prażynka migdałowa na biszkopcie dacquoise.</p>
</div>
</div>
<!-- Mousse 2 -->
<div class="gap-4">
<div>
<h5 class="font-bold text-lg mb-1">MARAKUJA-BIAŁA CZEKOLADA</h5>
<p class="text-xs text-on-surface-variant">Egzotyczne orzeźwienie marakui zbalansowane słodyczą aksamitnego musu z belgijskiej czekolady.</p>
</div>
</div>
<!-- Mousse 3 -->
<div class="gap-4">
<div>
<h5 class="font-bold text-lg mb-1">ORZECH LASKOWY-PORZECZKA</h5>
<p class="text-xs text-on-surface-variant">Głęboki smak prażonych orzechów przełamany kwaśnym konfiturem z czarnej porzeczki.</p>
</div>
</div>
<!-- Mousse 4 -->
<div class="gap-4">
<div>
<h5 class="font-bold text-lg mb-1">CIEMNA CZEKOLADA-WIŚNIA</h5>
<p class="text-xs text-on-surface-variant">Klasyczne połączenie w nowoczesnym wydaniu: mus 70% kakao i wiśnie marynowane w likierze.</p>
</div>
</div>
<!-- Mousse 5 -->
<div class="gap-4 md:col-span-2">
<div>
<h5 class="font-bold text-lg mb-1">PISTACJA-TRUSKAWKA-WANILIA</h5>
<p class="text-xs text-on-surface-variant">Nasz flagowy produkt: mus pistacjowy, serce z truskawki i krem waniliowy z Madagaskaru.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Homemade Gelato Section -->
<section class="bg-surface-container-low rounded-xl p-12 lg:p-20 relative overflow-hidden">
<div class="absolute top-0 right-0 w-1/3 h-full opacity-5 pointer-events-none">
<span class="material-symbols-outlined text-[20rem] rotate-12">ice_skating</span>
</div>
<div class="relative z-10">
<div class="max-w-xl mb-16">
<h2 class="text-4xl lg:text-5xl font-bold mb-6 italic">Homemade Gelato</h2>
<p class="text-on-surface-variant">Nasze lody rzemieślnicze przygotowujemy codziennie rano z prawdziwego mleka i świeżych owoców. Bez sztucznych aromatów.</p>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
<!-- Flavor 1 -->
<div class="bg-surface-container-lowest p-6 rounded-lg text-center transition-transform hover:scale-105">
<div class="w-16 h-16 bg-[#e0f5cb] rounded-full flex items-center justify-center mx-auto mb-4">
<span class="material-symbols-outlined text-secondary text-3xl">eco</span>
</div>
<h4 class="font-bold text-lg mb-1">Pistacja</h4>
<p class="text-xs text-on-surface-variant uppercase tracking-widest">Sycylia</p>
<div class="mt-4 pt-4 border-t border-outline-variant/10">
<span class="text-primary font-bold">8 zł / gałka</span>
</div>
</div>
<!-- Flavor 2 -->
<div class="bg-surface-container-lowest p-6 rounded-lg text-center transition-transform hover:scale-105">
<div class="w-16 h-16 bg-primary-container/30 rounded-full flex items-center justify-center mx-auto mb-4">
<span class="material-symbols-outlined text-primary text-3xl">favorite</span>
</div>
<h4 class="font-bold text-lg mb-1">Truskawka</h4>
<p class="text-xs text-on-surface-variant uppercase tracking-widest">Sorbet</p>
<div class="mt-4 pt-4 border-t border-outline-variant/10">
<span class="text-primary font-bold">7 zł / gałka</span>
</div>
</div>
<!-- Flavor 3 -->
<div class="bg-surface-container-lowest p-6 rounded-lg text-center transition-transform hover:scale-105">
<div class="w-16 h-16 bg-tertiary-container/30 rounded-full flex items-center justify-center mx-auto mb-4">
<span class="material-symbols-outlined text-tertiary text-3xl">bakery_dining</span>
</div>
<h4 class="font-bold text-lg mb-1">Słony Karmel</h4>
<p class="text-xs text-on-surface-variant uppercase tracking-widest">Klasyk</p>
<div class="mt-4 pt-4 border-t border-outline-variant/10">
<span class="text-primary font-bold">7 zł / gałka</span>
</div>
</div>
<!-- Flavor 4 -->
<div class="bg-surface-container-lowest p-6 rounded-lg text-center transition-transform hover:scale-105">
<div class="w-16 h-16 bg-secondary-container/30 rounded-full flex items-center justify-center mx-auto mb-4">
<span class="material-symbols-outlined text-secondary text-3xl">ac_unit</span>
</div>
<h4 class="font-bold text-lg mb-1">Śmietanka</h4>
<p class="text-xs text-on-surface-variant uppercase tracking-widest">Z Wiejskiego Mleka</p>
<div class="mt-4 pt-4 border-t border-outline-variant/10">
<span class="text-primary font-bold">7 zł / gałka</span>
</div>
</div>
</div>
<div class="mt-12 text-center">
<button class="bg-primary text-on-primary px-10 py-4 rounded-full font-bold shadow-lg hover:shadow-primary/20 transition-all">
Zamów puchar lodowy
</button>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-[#faf3e7] dark:bg-[#1a1c18] full-width rounded-t-[3rem] mt-12">
<div class="flex flex-col md:flex-row justify-between items-start w-full px-12 py-16 gap-8 max-w-7xl mx-auto">
<div class="flex flex-col gap-4">
<div class="text-xl font-serif italic text-[#8c4d50] dark:text-[#fcacaf]">Piekarnik Gosi</div>
<p class="text-[#363227] dark:text-[#e6e2d9] text-sm max-w-xs">Prawdziwe smaki dzieciństwa, wypiekane z sercem każdego dnia.</p>
<p class="text-[#8c4d50] dark:text-[#fcacaf] text-sm font-medium">© 2024 Piekarnik Gosi. Tradycja i Słodkość.</p>
</div>
<div class="flex flex-col md:flex-row gap-12">
<div class="flex flex-col gap-3">
<h5 class="font-bold text-[#363227] dark:text-[#e6e2d9]">Menu</h5>
<a class="text-[#363227] dark:text-[#e6e2d9] text-sm hover:opacity-70 transition-opacity" href="#">O nas</a>
<a class="text-[#363227] dark:text-[#e6e2d9] text-sm hover:opacity-70 transition-opacity" href="#">Alergeny</a>
<a class="text-[#363227] dark:text-[#e6e2d9] text-sm hover:opacity-70 transition-opacity" href="#">Regulamin</a>
<a class="text-[#363227] dark:text-[#e6e2d9] text-sm hover:opacity-70 transition-opacity" href="#">Polityka Prywatności</a>
</div>
<div class="flex flex-col gap-3">
<h5 class="font-bold text-[#363227] dark:text-[#e6e2d9]">Social Media</h5>
<a class="text-[#363227] dark:text-[#e6e2d9] text-sm hover:opacity-70 transition-opacity flex items-center gap-2" href="#">
Instagram
</a>
<a class="text-[#363227] dark:text-[#e6e2d9] text-sm hover:opacity-70 transition-opacity flex items-center gap-2" href="#">
Facebook
</a>
</div>
</div>
</div>
</footer>
</body></html>

BIN
inspiration/torty/screen.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 288 KiB

19
kawiarnia.css
View file

@ -82,26 +82,7 @@
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);
overflow: visible;
}
& > h3 {
align-self: center;
}
& > ul {
grid-column: 1/span 2;
& > h3 {
padding-top: 2rem;
}

16
kawiarnia.html
View file

@ -12,7 +12,7 @@
<body>
<nav>
<div>
<img alt="logo" src="scraped/pobrane-1.png" style="width: 14rem"/>
<img alt="logo" src="scraped/pobrane-1.png"/>
<div>
<a href="index.html">Strona Główna</a>
<a href="wyroby.html">Wyroby</a>
@ -88,7 +88,7 @@
<div>
<h2>Nasza karta</h2>
<div>
<div>
<div class="offer-card">
<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">
@ -115,7 +115,7 @@
<li><p>Dodatkowa porcja espresso</p><span>2 PLN</span></li>
</ul>
</div>
<div>
<div class="offer-card">
<svg style="--icon-color: #B56576" 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-cake-slice-icon lucide-cake-slice">
@ -132,7 +132,7 @@
<li><p>Mini Pavlova</p><span>10 PLN</span></li>
</ul>
</div>
<div>
<div class="offer-card">
<svg style="--icon-color: #7D8C61" 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"
@ -151,7 +151,7 @@
<li><p>Ice Tea</p><span>18 PLN</span></li>
</ul>
</div>
<div>
<div class="offer-card">
<svg style="--icon-color: #D48C45" 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"
@ -172,7 +172,7 @@
<li><p>Lemoniada</p><span>18 PLN</span></li>
</ul>
</div>
<div>
<div class="offer-card">
<svg style="--icon-color: #B56576" 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"
@ -190,7 +190,7 @@
<li><p>Duże włoskie</p><span>14 PLN</span></li>
</ul>
</div>
<div>
<div class="offer-card">
<svg style="--icon-color: #C29B40" 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"
@ -205,9 +205,7 @@
<ul>
<li><p>Gofr</p><span>12 PLN</span></li>
<li><p>Gofr bąbelkowy</p><span>24 PLN</span></li>
</ul>
<h3>Dodatki</h3>
<ul>
<li><p>Owoce</p><span>5 PLN</span></li>
<li><p>Bita śmietana</p><span>4 PLN</span></li>
<li><p>Posypka i/lub polewa</p><span>2 PLN</span></li>

5
layout.css
View file

@ -12,6 +12,10 @@ body > nav {
grid-template-rows: 1fr;
align-items: center;
& > img {
width: 20rem;
}
@media (max-width: 768px) {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
@ -43,6 +47,7 @@ body > nav {
font-size: 1.25rem;
color: var(--on-background);
text-decoration: none;
font-weight: bold;
&[href] {
font-weight: 200;

2
portfolio.html
View file

@ -12,7 +12,7 @@
<body>
<nav>
<div>
<img alt="logo" src="scraped/pobrane-1.png" style="width: 14rem"/>
<img alt="logo" src="scraped/pobrane-1.png"/>
<div>
<a href="index.html">Strona Główna</a>
<a href="wyroby.html">Wyroby</a>

2
wyroby.html
View file

@ -12,7 +12,7 @@
<body>
<nav>
<div>
<img alt="logo" src="scraped/pobrane-1.png" style="width: 14rem"/>
<img alt="logo" src="scraped/pobrane-1.png"/>
<div>
<a href="index.html">Strona Główna</a>
<a>Wyroby</a>

27
wyroby_torty.css
View file

@ -93,17 +93,38 @@
text-align: center;
}
& dl {
color: var(--on-surface);
& > * {
padding: 0.25rem 0;
}
& dt {
font-weight: 500;
font-size: 1.2em;
font-weight: 700;
}
& dd {
font-weight: lighter;
font-size: 0.75rem;
margin: 0;
}
}
}
#torty-musowe {
background-color: var(--surface-container-highest);
border-radius: var(--border-radius);
display: grid;
grid-template-columns: auto auto;
gap: 2rem;
& > div{
display: grid;
grid-template-columns: 1fr 1fr;
gap : 2rem;
}
@media (max-width: 786px) {
grid-template-columns: 1fr;
& > div {
grid-template-columns: 1fr;
}
}
}

44
wyroby_torty.html
View file

@ -12,7 +12,7 @@
<body>
<nav>
<div>
<img alt="logo" src="scraped/pobrane-1.png" style="width: 14rem"/>
<img alt="logo" src="scraped/pobrane-1.png"/>
<div>
<a href="index.html">Strona Główna</a>
<a>Wyroby</a>
@ -85,7 +85,8 @@
<h2>Menu smaków</h2>
<p>Wybierz swoją ulubioną kompozycję bazową</p>
</header>
<div class="card-low">
<div class="offer-card">
<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-grid3x3-icon lucide-grid-3x3"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M3 9h18"/><path d="M3 15h18"/><path d="M9 3v18"/><path d="M15 3v18"/></svg>
<h3>Biszkopt Kakaowy</h3>
<dl>
<div>
@ -103,7 +104,8 @@
<dt>Nugat z orzechami laskowymi i kremem śmietankowym</dt>
</dl>
</div>
<div class="card-low">
<div class="offer-card">
<svg style="--icon-color: #B56576" 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-heart-icon lucide-heart"><path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"/></svg>
<h3>Biszkopt biały</h3>
<dl>
<div>
@ -118,7 +120,8 @@
<dt>Kokosowo-malinowy z żelką malinową</dt>
</dl>
</div>
<div class="card-low">
<div class="offer-card">
<svg style="--icon-color: #D48C45" 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-citrus-icon lucide-citrus"><path d="M21.66 17.67a1.08 1.08 0 0 1-.04 1.6A12 12 0 0 1 4.73 2.38a1.1 1.1 0 0 1 1.61-.04z"/><path d="M19.65 15.66A8 8 0 0 1 8.35 4.34"/><path d="m14 10-5.5 5.5"/><path d="M14 17.85V10H6.15"/></svg>
<h3>Inne</h3>
<dl>
<dt>Cytrynowy na bazie lemon curd</dt>
@ -126,20 +129,25 @@
</dl>
</div>
</section>
<section>
<h2>Torty Musowe</h2>
<div><h4>Karmel-jogurt-migdały</h4>
<p>mus z karmelizowanej białej czekolady, chrupiąca warstwa migdałowa, ganache jogurtowy</p></div>
<div><h4>Mango-marakuja-truskawka</h4>
<p>spód migdałowy, galaretka mango-marakuja, żelka truskawkowa, krem diplomat kokosowo-waniliowy</p></div>
<div><h4>Czekolada-malina-jeżyna</h4>
<p>biszkopt jogurtowy, chrupiąca warstwa czekoladowa, żelka jeżynowa, krem malinowy, mus czekoladowy</p>
</div>
<div><h4>Whisky-mango</h4>
<p>brownie, krem mango, ganache czekoladowe , mus whisky</p></div>
<div><h4>Kawa-orzech ziemny</h4>
<p>biszkopt, karmelizowane orzeszki ziemne, namelaka z masłem orzechowym, kawowy mus</p></div>
</section>
<section id="torty-musowe">
<header>
<h2>Torty Musowe</h2>
</header>
<div>
<div><h4>Karmel-jogurt-migdały</h4>
<p>mus z karmelizowanej białej czekolady, chrupiąca warstwa migdałowa, ganache jogurtowy</p></div>
<div><h4>Mango-marakuja-truskawka</h4>
<p>spód migdałowy, galaretka mango-marakuja, żelka truskawkowa, krem diplomat kokosowo-waniliowy</p></div>
<div><h4>Czekolada-malina-jeżyna</h4>
<p>biszkopt jogurtowy, chrupiąca warstwa czekoladowa, żelka jeżynowa, krem malinowy, mus czekoladowy</p>
</div>
<div><h4>Whisky-mango</h4>
<p>brownie, krem mango, ganache czekoladowe , mus whisky</p></div>
<div><h4>Kawa-orzech ziemny</h4>
<p>biszkopt, karmelizowane orzeszki ziemne, namelaka z masłem orzechowym, kawowy mus</p></div>
</div>
</section>
</main>
<footer>
<div>