added blank pages
This commit is contained in:
bronkuu
parent
858509b248
commit
c1af1979fe
8 changed files with 408 additions and 7 deletions
BIN
favicon.png
Normal file
BIN
favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
images/003.jpg
Normal file
BIN
images/003.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1,013 KiB |
|
|
@ -7,7 +7,7 @@
|
|||
<meta name="description" content="" />
|
||||
<link href="normalize.css" rel="stylesheet">
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
<link rel="icon" href="scraped/174394.png">
|
||||
<link rel="icon" href="favicon.png">
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
|
|
@ -39,6 +39,7 @@
|
|||
<div>
|
||||
<div>
|
||||
<img alt="kawiarnia" src="images/002.jpg"/>
|
||||
<img alt="kawiarnia" src="images/003.jpg"/>
|
||||
</div>
|
||||
<div>
|
||||
<span>Tradycja i serce</span>
|
||||
|
|
|
|||
85
inspiration/stitch_sweet_treats_online_shop/DESIGN.md
Normal file
85
inspiration/stitch_sweet_treats_online_shop/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.
|
||||
278
inspiration/stitch_sweet_treats_online_shop/code.html
Normal file
278
inspiration/stitch_sweet_treats_online_shop/code.html
Normal file
|
|
@ -0,0 +1,278 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html lang="pl"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Piekarnik Gosi | Tradycja i Słodkość</title>
|
||||
<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-secondary-fixed-variant": "#566847",
|
||||
"error-container": "#fa7150",
|
||||
"on-background": "#363227",
|
||||
"on-tertiary-fixed": "#463600",
|
||||
"secondary-dim": "#475839",
|
||||
"on-tertiary": "#fff8ef",
|
||||
"tertiary-dim": "#675000",
|
||||
"primary": "#8c4d50",
|
||||
"primary-fixed-dim": "#ed9fa2",
|
||||
"error": "#aa371c",
|
||||
"on-surface": "#363227",
|
||||
"surface": "#fff8f0",
|
||||
"surface-container-low": "#faf3e7",
|
||||
"surface-container-highest": "#eae2d2",
|
||||
"primary-container": "#fcacaf"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "1rem",
|
||||
"lg": "2rem",
|
||||
"xl": "3rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Noto Serif"],
|
||||
"body": ["Plus Jakarta Sans"],
|
||||
"label": ["Plus Jakarta Sans"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #fff8f0; color: #363227; }
|
||||
.font-serif { font-family: 'Noto Serif', serif; }
|
||||
.glass-nav { backdrop-filter: blur(20px); }
|
||||
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background">
|
||||
<!-- TopAppBar from JSON -->
|
||||
<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-[#8c4d50] dark:text-[#fcacaf] font-bold border-b-2 border-[#8c4d50] dark:border-[#fcacaf] pb-1 hover:text-[#8c4d50] dark:hover:text-[#fcacaf] transition-all duration-300" 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" href="#">Wyroby</a>
|
||||
<a class="text-[#363227] dark:text-[#e6e2d9] opacity-80 hover:text-[#8c4d50] dark:hover:text-[#fcacaf] transition-all duration-300" href="#">Portfolio</a>
|
||||
<a class="text-[#363227] dark:text-[#e6e2d9] opacity-80 hover:text-[#8c4d50] dark:hover:text-[#fcacaf] transition-all duration-300" 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">
|
||||
Kontakt
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
<main>
|
||||
<!-- Section 1: Hero -->
|
||||
<section class="relative min-h-[870px] flex items-center px-8 overflow-hidden">
|
||||
<div class="max-w-7xl mx-auto w-full grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
|
||||
<div class="z-10 order-2 md:order-1">
|
||||
<h1 class="font-serif text-5xl md:text-7xl font-bold leading-tight text-on-background tracking-tight mb-6">
|
||||
Handcrafted <span class="text-primary italic">Sweetness</span> for Every Moment.
|
||||
</h1>
|
||||
<p class="text-lg text-on-surface-variant max-w-md mb-10 leading-relaxed">
|
||||
Discover the magic of traditional baking combined with modern elegance. From our family oven to your special celebrations.
|
||||
</p>
|
||||
<div class="flex gap-4">
|
||||
<button class="bg-gradient-to-r from-primary to-primary-container text-on-primary px-10 py-4 rounded-full font-semibold shadow-lg hover:opacity-90 transition-all">
|
||||
Explore Menu
|
||||
</button>
|
||||
<button class="bg-surface-container-highest/50 backdrop-blur-sm text-on-surface px-10 py-4 rounded-full font-semibold hover:bg-surface-container-highest transition-all">
|
||||
Our Story
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative order-1 md:order-2">
|
||||
<div class="w-full aspect-[4/5] rounded-xl overflow-hidden shadow-2xl relative rotate-2 hover:rotate-0 transition-transform duration-700">
|
||||
<img class="w-full h-full object-cover" data-alt="Close-up of a luxurious tiered vanilla cake decorated with fresh blush pink peonies and delicate gold leaf accents on a marble stand" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBE3FQZijxp08QlNadylovmWbx1w5egmxTQrUo3H6tLQXTVk4ew1BFeh1m4pnvQ1DT7RGJtEvkjcwX00cLtFQnxS6hJKWSiOcTm9HTc9sHD4njGlhUS4zLXsqTBpH-i6knzGR2YHVAkRw45fd8eSQi-gA70g1Up858JEfh8374p_a5FWF1UHiqH_g6Ktuem6p24CF7P_gtZB-63DbHKioVDmoYyAnyee0MUB-T3Xs4B5aZrpwlIR9wXlmlREC-Z7k4sB0v1tjeHzi1K"/>
|
||||
</div>
|
||||
<div class="absolute -bottom-6 -left-6 bg-secondary-container p-6 rounded-lg shadow-xl hidden md:block max-w-[200px]">
|
||||
<span class="material-symbols-outlined text-on-secondary-container text-3xl mb-2">cake</span>
|
||||
<p class="text-on-secondary-container font-serif italic text-lg">Baked daily with love.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Background Decorative Elements -->
|
||||
<div class="absolute top-0 right-0 w-1/3 h-full bg-surface-container-low -z-10 rounded-l-[10rem]"></div>
|
||||
</section>
|
||||
<!-- Section 2: Our Story (Intentional Editorial Asymmetry) -->
|
||||
<section class="py-24 bg-surface-container-low overflow-hidden">
|
||||
<div class="max-w-7xl mx-auto px-8 grid grid-cols-1 md:grid-cols-12 gap-8 items-center">
|
||||
<div class="md:col-span-7 relative">
|
||||
<div class="relative z-10 w-4/5 aspect-video rounded-xl overflow-hidden shadow-xl">
|
||||
<img class="w-full h-full object-cover" data-alt="Warm and inviting interior of a modern artisanal bakery with soft sage green accents, wooden tables, and morning sunlight streaming through windows" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC2cNd0cg6ISbftWH4JrfHpA2_8UK9V99Z3wbcDm2ss5EX1D6b1IRzG590D7U9CDXqkDx9C0ocLWOfzVjEr-Lt7pQ6NTt95qFvUeyMjxu5gJXSeqn_MTtskiZzAp9F2qlgt3OR1Dn0ewGxn9BZsmCqaOgwOPVauocZXitjCT3vUdMM6T4JTkGY1spwDs_Au1fxxVx7jfCGQlpQ8EYnAdzGfniEzbtREnIre-Tg5cItxEydaS_GqGYqMCoGTEGKMEfvxJtqkUJ7d8dHO"/>
|
||||
</div>
|
||||
<div class="absolute -bottom-12 right-0 w-1/2 aspect-square rounded-xl overflow-hidden shadow-2xl z-20 border-8 border-surface-container-low">
|
||||
<img class="w-full h-full object-cover" data-alt="Hands of an artisan baker dusting flour over freshly shaped sourdough loaves in a rustic kitchen setting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAqrh_BHq7lkBpSNEXX4Z8rHM5E3SyLjQIdJCT8K9y9hcrGsC31sjR_Y9eaQzdqUWgZeNa6xZVNiFSiUWbkPqB-LMtnlK1dd9-SEWrIM7BMrgb5oF5PYqTwcbjXd169J-HOpgjVzT1p-FTDlaptuRFj_fUntIGnbZ39tJGvbMuxyqbyJlMAk8h30D12rXqLEIKNZFNaWQdJTxWYg-TbFQqMa1sMsnT9x-GiEMaMBHbtpz27UdEz5Le7XM5J2jhWpBA26a_tk5gTRqpE"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:col-span-5 md:pl-12 mt-16 md:mt-0">
|
||||
<span class="text-primary font-bold tracking-widest text-sm uppercase mb-4 block">Tradition & Heart</span>
|
||||
<h2 class="font-serif text-4xl md:text-5xl font-bold mb-8 leading-tight">A Legacy of Flour and Sugar</h2>
|
||||
<p class="text-on-surface-variant leading-relaxed mb-6">
|
||||
Piekarnik Gosi started as a small family dream in our home kitchen. Today, we continue to honor the same recipes passed down through generations, ensuring every pastry carries the warmth of home.
|
||||
</p>
|
||||
<p class="text-on-surface-variant leading-relaxed">
|
||||
We believe that the best ingredients are found close to home, which is why we source our flour, eggs, and dairy from local farmers who share our passion for quality.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Section 3: Featured Delights (Bento Grid) -->
|
||||
<section class="py-24 px-8 max-w-7xl mx-auto">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="font-serif text-4xl md:text-5xl font-bold mb-4">Our Featured Delights</h2>
|
||||
<div class="h-1 w-24 bg-primary mx-auto rounded-full"></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<!-- Artisanal Cakes -->
|
||||
<div class="group bg-surface-container-lowest rounded-xl overflow-hidden transition-all duration-500 hover:-translate-y-2">
|
||||
<div class="aspect-[4/3] overflow-hidden">
|
||||
<img class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" data-alt="Rich chocolate ganache cake topped with fresh raspberries and dark chocolate shavings on a minimalist ceramic plate" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC__6jZhqvNUqUMwUy1qeVnEcIOpIZhKqoZXaZF_rDqaFEqiMt7zCDms8Y7gudDnAbFzuW3hOIOQZPc6FWnKxApY57_Kq4i-vn2P7lh8TRTxRLmNwhz5lOOd3s_RpUASmfuyXiwhHQEwkHxnOQRZoo9biPu3ttrZB8ALVvVUO2n75rAIuedqfkl8wwWQkl1xmPtnwndro_3Su1UPNBTEyXEaX9HT40k6XGFMWn__a8Y8jQTuiUn9TA4qQZ88OncskEp12pJx73MI4ZA"/>
|
||||
</div>
|
||||
<div class="p-8">
|
||||
<h3 class="font-serif text-2xl font-bold mb-3">Artisanal Cakes</h3>
|
||||
<p class="text-on-surface-variant mb-6 text-sm">Perfectly balanced flavors and textures for your afternoon tea or celebration.</p>
|
||||
<button class="flex items-center gap-2 text-primary font-bold group-hover:gap-4 transition-all">
|
||||
Browse Cakes <span class="material-symbols-outlined">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Birthday Creations -->
|
||||
<div class="group bg-secondary-container/30 rounded-xl overflow-hidden transition-all duration-500 hover:-translate-y-2 border border-outline-variant/10">
|
||||
<div class="aspect-[4/3] overflow-hidden">
|
||||
<img class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" data-alt="Whimsical colorful birthday cake with pastel sprinkles and a single elegant candle set against a soft bokeh background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCET-MFzPmiwlj47TqU3wN7E5vcStjKjwCNjJpljzrL_s6cPdijpJATzQP8GmXmKArqWQH4T0hMCBikeOn-LatDFGk3LK2_0R8w3yB9F2aYhPA1MaNpoS8a0yuXjuem049S3TaHh_JVpM7huRnai56xYI6KbK7eoNtVWUEfycNEgemJAO4dmrqi-E_6RxaLU8JhOG6RWJ8K1ja3TUFr_6cxAJS0JijA_CHbxbs4GyyA7OmJprfho8jzmui-iOymcewvn6M_hmB6KK5w"/>
|
||||
</div>
|
||||
<div class="p-8">
|
||||
<h3 class="font-serif text-2xl font-bold mb-3">Birthday Creations</h3>
|
||||
<p class="text-on-surface-variant mb-6 text-sm">Custom designs that turn every birthday into an unforgettable masterpiece.</p>
|
||||
<button class="flex items-center gap-2 text-primary font-bold group-hover:gap-4 transition-all">
|
||||
Order Custom <span class="material-symbols-outlined">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Homemade Gelato -->
|
||||
<div class="group bg-surface-container-lowest rounded-xl overflow-hidden transition-all duration-500 hover:-translate-y-2">
|
||||
<div class="aspect-[4/3] overflow-hidden">
|
||||
<img class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" data-alt="Scoops of creamy homemade pistachio and strawberry gelato in a classic waffle cone held against a summer garden background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA-lIqaWJLlLLX7Mi9zUlrBqv_RDSjUfgg1kzyMRM2RbOkYkyfI6SyVZwRuuidAcpaOtzTacBXfk8bgJ0CBfQJvT5TYPnwmd0eOdA6FxNsxiyutlMy6qxgnomRc0bgGY2YOgDQjRypyOgs522uts9x8SjcYNqh3amRZ8qkZB70dWLN7COIT2kbwlJSuFLMSMk7BAowoXdsW2tjnk8YvnbSGMCHBbRv3WIUtorAan_QxFVqQwWcHP6iLmM90jfMeDJ-p7bmuZwhKWNNN"/>
|
||||
</div>
|
||||
<div class="p-8">
|
||||
<h3 class="font-serif text-2xl font-bold mb-3">Homemade Gelato</h3>
|
||||
<p class="text-on-surface-variant mb-6 text-sm">Crafted in small batches using real fruit and the finest Italian techniques.</p>
|
||||
<button class="flex items-center gap-2 text-primary font-bold group-hover:gap-4 transition-all">
|
||||
View Flavors <span class="material-symbols-outlined">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Section 4: Visit Our Coffee Shop -->
|
||||
<section class="py-24 bg-secondary-container">
|
||||
<div class="max-w-7xl mx-auto px-8">
|
||||
<div class="bg-surface/60 backdrop-blur-md rounded-xl p-8 md:p-16 grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
|
||||
<div>
|
||||
<div class="inline-flex items-center gap-2 px-4 py-1 rounded-full bg-secondary text-on-secondary text-sm font-medium mb-6">
|
||||
<span class="material-symbols-outlined text-sm">coffee</span> Cozy Atmosphere
|
||||
</div>
|
||||
<h2 class="font-serif text-4xl md:text-5xl font-bold mb-6 text-on-secondary-container">Your Second Home</h2>
|
||||
<p class="text-on-secondary-container opacity-80 text-lg leading-relaxed mb-8">
|
||||
Step into a space where time slows down. Enjoy our specialty coffee paired with a freshly baked croissant in a serene setting inspired by nature.
|
||||
</p>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-10 h-10 rounded-full bg-secondary/20 flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-secondary">wifi</span>
|
||||
</div>
|
||||
<span class="font-medium text-on-secondary-container">Free High-Speed Wi-Fi</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-10 h-10 rounded-full bg-secondary/20 flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-secondary">pets</span>
|
||||
</div>
|
||||
<span class="font-medium text-on-secondary-container">Pet Friendly Garden</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="rounded-xl overflow-hidden h-64">
|
||||
<img class="w-full h-full object-cover" data-alt="Barista pouring latte art with a perfect heart shape into a sage green ceramic cup" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDcwJC5HCSbD6sFQUtQO2Vup1_MLs8d5gh2lsBXgitbbnV6xYW10z-sqVh_q4dYeXgejPdBmucv1HnBfJwZgnTx7Wwa7yxsDESvlOPaRvwW-P9CtS47HG8tNnlGEQCmPWHTmLHdiXuOu3dcPLeYVxJpGP89zGRitQEBX93iYk4qFjr8LColfvuS3gY8qeb2yI-v33HcZ-Q8piA0UDbF5bp6EKRzx685Jn84wDqRoEBig4s0KFcfieJq1g3N7Z7OuQ7DX0mPBz3Nqze2"/>
|
||||
</div>
|
||||
<div class="rounded-xl overflow-hidden h-64 mt-8">
|
||||
<img class="w-full h-full object-cover" data-alt="A cozy corner of the cafe with velvet pink chairs and small round wooden tables by a large window" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBVZuG1_6XqUb-zykYUBiCgw6ifTDcYED6cTfpHob5TsLS-R9eg6CS9NkdO7vRuPNUe0YnWeijPheJCivxkiCPj3Fb81Zi3WAS4HRhu_A11C_bIETcdJxXoOXqT4dIsgqC0HTFwABSqWvUSUZUs7ViCZMAiP9ib4FoMtIx7YXJ_1aSPF_eK9jdQQZ74wC_fU-ZOsjxTokwg07ZMz2i6by-wCkCX6dyd2a1ZsCNL6Ns-Ps5-BLuGuuOTBXE1R-Fk09HWk0UoV-TwJ1Z1"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Footer from JSON -->
|
||||
<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 max-w-sm">
|
||||
<div class="text-xl font-serif italic text-[#8c4d50] dark:text-[#fcacaf]">Piekarnik Gosi</div>
|
||||
<p class="text-sm font-body text-[#363227] dark:text-[#e6e2d9] opacity-80 leading-relaxed">
|
||||
Tradycja spotyka nowoczesność w każdej okruszynie. Zapraszamy do naszej kawiarni na chwilę zapomnienia.
|
||||
</p>
|
||||
<div class="flex gap-4">
|
||||
<a class="w-10 h-10 rounded-full bg-surface-variant flex items-center justify-center text-primary hover:scale-110 transition-transform" href="#">
|
||||
<span class="material-symbols-outlined">share</span>
|
||||
</a>
|
||||
<a class="w-10 h-10 rounded-full bg-surface-variant flex items-center justify-center text-primary hover:scale-110 transition-transform" href="#">
|
||||
<span class="material-symbols-outlined">location_on</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-12">
|
||||
<div class="space-y-4">
|
||||
<h4 class="font-serif font-bold text-[#8c4d50]">Nawigacja</h4>
|
||||
<ul class="space-y-2 text-sm font-body">
|
||||
<li><a class="text-[#363227] dark:text-[#e6e2d9] hover:opacity-70 transition-opacity" href="#">O nas</a></li>
|
||||
<li><a class="text-[#363227] dark:text-[#e6e2d9] hover:opacity-70 transition-opacity" href="#">Alergeny</a></li>
|
||||
<li><a class="text-[#363227] dark:text-[#e6e2d9] hover:opacity-70 transition-opacity" href="#">Regulamin</a></li>
|
||||
<li><a class="text-[#363227] dark:text-[#e6e2d9] hover:opacity-70 transition-opacity" href="#">Polityka Prywatności</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<h4 class="font-serif font-bold text-[#8c4d50]">Kontakt</h4>
|
||||
<p class="text-sm font-body text-[#363227] dark:text-[#e6e2d9] opacity-80">
|
||||
ul. Słodka 12<br/>
|
||||
00-001 Warszawa<br/>
|
||||
+48 123 456 789
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-auto pt-8 border-t border-outline-variant/20 md:border-t-0">
|
||||
<p class="text-xs font-body text-[#363227] dark:text-[#e6e2d9] opacity-60">
|
||||
© 2024 Piekarnik Gosi. Tradycja i Słodkość.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body></html>
|
||||
BIN
inspiration/stitch_sweet_treats_online_shop/screen.png
Normal file
BIN
inspiration/stitch_sweet_treats_online_shop/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 588 KiB |
BIN
scraped/002.jpg
Normal file
BIN
scraped/002.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 154 KiB |
49
style.css
49
style.css
|
|
@ -4,6 +4,7 @@
|
|||
body {
|
||||
background-color: var(--surface);
|
||||
font-family: 'Plus Jakarta Sans', sans-serif;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
nav {
|
||||
|
|
@ -23,9 +24,12 @@ nav > div {
|
|||
/* content inside */
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: center;
|
||||
align-items: center;
|
||||
|
||||
& :last-child {
|
||||
justify-self: end
|
||||
}
|
||||
|
||||
& :last-child { justify-self: end }
|
||||
& > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -39,12 +43,14 @@ nav > div {
|
|||
&[href] {
|
||||
font-weight: 200;
|
||||
transition: color 0.2s;
|
||||
|
||||
&:hover {
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
/* The main selected link doesn't have a href attribute, so we can use that for styles */
|
||||
|
||||
&:not([href]) {
|
||||
color: var(--primary);
|
||||
padding-bottom: 8px;
|
||||
|
|
@ -62,7 +68,7 @@ nav > div {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
& > div{
|
||||
& > div {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2rem;
|
||||
|
|
@ -73,6 +79,7 @@ nav > div {
|
|||
}
|
||||
|
||||
/* left portion */
|
||||
|
||||
& > :first-child {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
|
|
@ -80,8 +87,10 @@ nav > div {
|
|||
}
|
||||
|
||||
/* right portion */
|
||||
|
||||
& > :last-child {
|
||||
align-items: center;
|
||||
|
||||
& > img {
|
||||
rotate: 2deg;
|
||||
border-radius: var(--border-radius);
|
||||
|
|
@ -100,6 +109,7 @@ nav > div {
|
|||
|
||||
.about-us {
|
||||
background-color: var(--surface-container-low);
|
||||
max-height: calc(100vh - var(--nav-height) - 2rem);
|
||||
|
||||
& > div {
|
||||
max-width: var(--max-content-width);
|
||||
|
|
@ -107,14 +117,41 @@ nav > div {
|
|||
padding: 2rem;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
grid-template-columns: 60% 40%;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
|
||||
& > div {
|
||||
& :first-child {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
|
||||
& > img {
|
||||
border-radius: var(--border-radius);
|
||||
border: 0.5rem solid var(--surface);
|
||||
scale: 0.8;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
&:first-child {
|
||||
scale: 1;
|
||||
top: -2rem;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
top: 1rem;
|
||||
left: -7rem;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
& > span {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue