file structure
This commit is contained in:
bronku
parent
77a27de73c
commit
a206518367
1125 changed files with 34 additions and 39 deletions
85
resources/inspiration/portfolio/DESIGN.md
Normal file
85
resources/inspiration/portfolio/DESIGN.md
Normal 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.
|
||||
209
resources/inspiration/portfolio/code.html
Normal file
209
resources/inspiration/portfolio/code.html
Normal file
|
|
@ -0,0 +1,209 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html lang="pl"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<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;
|
||||
background-color: #fff8f0;
|
||||
color: #363227;
|
||||
}
|
||||
h1, h2, h3, .font-serif {
|
||||
font-family: 'Noto Serif', serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background min-h-screen">
|
||||
<!-- Top Navigation Bar -->
|
||||
<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 gap-8 items-center">
|
||||
<a class="text-[#363227] dark:text-[#e6e2d9] opacity-80 hover:text-[#8c4d50] dark:hover:text-[#fcacaf] transition-all duration-300 font-medium text-sm" href="#">Strona Główna</a>
|
||||
<a class="text-[#363227] dark:text-[#e6e2d9] opacity-80 hover:text-[#8c4d50] dark:hover:text-[#fcacaf] transition-all duration-300 font-medium text-sm" href="#">Wyroby</a>
|
||||
<a class="text-[#8c4d50] dark:text-[#fcacaf] font-bold border-b-2 border-[#8c4d50] dark:border-[#fcacaf] pb-1 text-sm" 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 text-sm" href="#">Kawiarnia</a>
|
||||
</div>
|
||||
<button class="bg-gradient-to-r from-primary to-primary-container text-on-primary px-6 py-2 rounded-full font-medium hover:scale-95 transition-transform duration-200">
|
||||
Kontakt
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
<main class="max-w-7xl mx-auto px-6 pt-12 md:pt-20">
|
||||
<!-- Header Section -->
|
||||
<header class="text-center mb-16 space-y-4 max-w-3xl mx-auto">
|
||||
<h1 class="text-4xl md:text-6xl font-bold text-on-background tracking-tight">Our Birthday Cake Gallery</h1>
|
||||
<p class="text-on-surface-variant text-lg md:text-xl leading-relaxed italic">
|
||||
From whimsical dreams for the little ones to elegant masterpieces for grand celebrations. Every cake is a unique story baked with love and artisanal precision.
|
||||
</p>
|
||||
</header>
|
||||
<!-- Category Filters -->
|
||||
<div class="flex flex-wrap justify-center gap-3 mb-12">
|
||||
<button class="px-6 py-2 rounded-full bg-secondary-container text-on-secondary-container font-semibold transition-all hover:bg-secondary-container/80">Wszystkie</button>
|
||||
<button class="px-6 py-2 rounded-full bg-surface-container-highest text-on-surface-variant font-medium transition-all hover:bg-secondary-container/50">Dla Dzieci</button>
|
||||
<button class="px-6 py-2 rounded-full bg-surface-container-highest text-on-surface-variant font-medium transition-all hover:bg-secondary-container/50">Elegant</button>
|
||||
<button class="px-6 py-2 rounded-full bg-surface-container-highest text-on-surface-variant font-medium transition-all hover:bg-secondary-container/50">Owocowe</button>
|
||||
<button class="px-6 py-2 rounded-full bg-surface-container-highest text-on-surface-variant font-medium transition-all hover:bg-secondary-container/50">Czekoladowe</button>
|
||||
<button class="px-6 py-2 rounded-full bg-surface-container-highest text-on-surface-variant font-medium transition-all hover:bg-secondary-container/50">Nowoczesne</button>
|
||||
</div>
|
||||
<!-- Bento Grid Gallery -->
|
||||
<section class="grid grid-cols-1 md:grid-cols-12 gap-6 auto-rows-[250px] md:auto-rows-[300px]">
|
||||
<!-- Large Feature Item -->
|
||||
<div class="md:col-span-8 md:row-span-2 group relative overflow-hidden rounded-xl bg-surface-container-low flex flex-col">
|
||||
<img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" data-alt="Exquisite multi-tiered custom birthday cake with pastel floral decorations, soft pink frosting, and gold leaf accents on a marble table" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDFikZPqI_iQXFO4l_-RW7Z57qyXR8H4zRhI1eIjtx9VU9D-k_wP4SOd80FuENx_DkMFWhN2_VpcE-I9O_eqLgkYzf9dafZNy64qMRBEa2uIUy3B9wDtLBgaKhCOFvzEGBgPwyY4a9WkCNHc7JAlVMWrDmUhfuFZYRFKT6at-LhnyJM4NQZsDcVDs5thUfVu4pen3ckbGkln0t_N0g05c_ViBM6rUuch6zV11MMr2a8mlwVo3kA0NKotR6hj8Bs6yMl0jjZuXWt6x1-"/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-8">
|
||||
<h3 class="text-white text-2xl font-serif">Królewski Ogród</h3>
|
||||
<p class="text-white/80 text-sm">Nasza flagowa propozycja na jubileusze.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tall Item -->
|
||||
<div class="md:col-span-4 md:row-span-2 group relative overflow-hidden rounded-xl bg-surface-container-low">
|
||||
<img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" data-alt="A tall, minimalist birthday cake with sleek sage green buttercream, decorated with fresh rosemary and organic honey drips" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCrjRsn6mQ-JnhAEr6VXI_FZYPK7uUEcbos_c3OapJRDwZEhzX1ngitip1MAZ3iJTDdEsfGB7C-k4cjmKOl20qwpjHtyGq67Slz4MUo8c0GKANaXSM2_k7A1zEDAfX1H6eVjtK_3-lfKTga3GDFJlH4mSDR82z5NJ9FwkEyfzhC47HNhpQ5ItM58Q0acbKgOJr-Qg35E1AezERr-SHJCZBLGxIDoTzbCfSNHd5J718A5DgtHuc8xRHqBV1u01UYgvBrBMHCdF4XOHxR"/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">
|
||||
<h3 class="text-white text-xl font-serif">Leśna Harmonia</h3>
|
||||
<p class="text-white/80 text-xs">Elegancja w stylu minimalistycznym.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Small Square Item -->
|
||||
<div class="md:col-span-4 md:row-span-1 group relative overflow-hidden rounded-xl bg-surface-container-low">
|
||||
<img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" data-alt="Playful colorful children's birthday cake shaped like a friendly dinosaur with fondant details and vibrant sprinkles" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDk6Nl9FXhUDm20Odf8qp6S4z8_RSMCqPT2NzYNTKuywxA2ROhr--FOkQbUpvdEy98pRFcrFU9ek4emoEn0eJY1WwsobcDXQf8NSvT36usE-Zo1IsJjq-hckSaxy0pZp3HkK83Twd9BUsNjuII9Ppgd3DnY8MadsRGF2KB0U1yi-U0gFU3GjxwKOtAWil_40yLsohJVmQloo48O23AhnRUShe_9vRCMCXKOXOW1Sk413Bs5UsuSqjDkP_rmfvGwnLiwsEnKuLAXraCG"/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">
|
||||
<h3 class="text-white text-xl font-serif">Dino-Przygoda</h3>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Small Square Item -->
|
||||
<div class="md:col-span-4 md:row-span-1 group relative overflow-hidden rounded-xl bg-surface-container-low">
|
||||
<img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" data-alt="Modern geometric birthday cake with dark chocolate ganache, copper metallic stripes, and fresh raspberries on top" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAR-7CSH5K6ev9a-ZLwUst-9GAXGXrhU9sXR5Jpcmutf54AuV-GCq2DaGmNz2PDURUaaGHsecsZR4HWwaTL_K0m95c4FKwQ5jip3Bet50GuTi9-R1BY0VHkm93rrbZ_UU1g_lcqkhv9tS42EZ144JqhJp3UqLAHLW6ZBabLjm5cvUtWE72HTk8Cp5kPgFNuDFfiYknHktD0_tXt5G53XEMzgDSv8fng_-uWffT05icSTzw0OpRAiAWeEIaIWMxA0J7heBEmcMOwhrBc"/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">
|
||||
<h3 class="text-white text-xl font-serif">Miedziany Akcent</h3>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Medium Item -->
|
||||
<div class="md:col-span-4 md:row-span-1 group relative overflow-hidden rounded-xl bg-surface-container-low">
|
||||
<img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" data-alt="Heart-shaped vintage style cake with intricate white piping, pearls, and a delicate silk ribbon around the base" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC2uSaLKtXL7CMMeleD9-hTvqnf8vEJAn2vCl6QlLBK-UeO4FKNQIEaWbsu8txf8115OFwYDRnLHMpsI5qepNZr7bQH8PmGMj3GRXeYQYu0S5kW6drjFHsefy2PzuZkof9f5ScXd9VtYk38P6TUjMGtpilgeuX6CCRbxsMSDiCjecff7KYWJGqDxRtj35AKwkxjYDVvvD5x9oGqJ0hTIryJMcKvX4YUbE1zd-2PCD_LPYjmO42EYL2kzWShHh1NQf4LUpCxBuW2dHcK"/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">
|
||||
<h3 class="text-white text-xl font-serif">Vintage Love</h3>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- CTA Section -->
|
||||
<section class="mt-24 mb-12 p-8 md:p-16 rounded-xl bg-surface-container-low relative overflow-hidden">
|
||||
<div class="absolute top-0 right-0 w-64 h-64 bg-primary/5 rounded-full -mr-32 -mt-32"></div>
|
||||
<div class="absolute bottom-0 left-0 w-48 h-48 bg-secondary-container/20 rounded-full -ml-24 -mb-24"></div>
|
||||
<div class="relative z-10 flex flex-col md:flex-row items-center justify-between gap-8">
|
||||
<div class="max-w-2xl">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Inquire About Your Custom Cake</h2>
|
||||
<p class="text-on-surface-variant text-lg">
|
||||
Have a specific vision in mind? Let's discuss your perfect celebration cake. We handle everything from intimate gatherings to large parties.
|
||||
</p>
|
||||
</div>
|
||||
<button class="whitespace-nowrap bg-gradient-to-r from-primary to-primary-container text-on-primary px-10 py-4 rounded-full font-bold text-lg hover:scale-105 transition-transform shadow-lg shadow-primary/20">
|
||||
Get a Quote
|
||||
</button>
|
||||
</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="space-y-4">
|
||||
<div class="text-xl font-serif italic text-[#8c4d50] dark:text-[#fcacaf]">Piekarnik Gosi</div>
|
||||
<p class="text-sm text-[#363227] dark:text-[#e6e2d9] max-w-xs leading-relaxed">
|
||||
© 2024 Piekarnik Gosi. Tradycja i Słodkość. Tworzymy wspomnienia ze smaku.
|
||||
</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-x-12 gap-y-4">
|
||||
<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 gap-4">
|
||||
<span class="material-symbols-outlined text-[#8c4d50] cursor-pointer hover:scale-110 transition-transform">social_leaderboard</span>
|
||||
<span class="material-symbols-outlined text-[#8c4d50] cursor-pointer hover:scale-110 transition-transform">camera</span>
|
||||
<span class="material-symbols-outlined text-[#8c4d50] cursor-pointer hover:scale-110 transition-transform">mail</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body></html>
|
||||
BIN
resources/inspiration/portfolio/screen.png
Normal file
BIN
resources/inspiration/portfolio/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1 MiB |
Loading…
Add table
Add a link
Reference in a new issue