From d4af477bf8b7f175457d623a1f620ff56f5ea4b9 Mon Sep 17 00:00:00 2001 From: bronkuu Date: Wed, 29 Apr 2026 07:27:51 +0200 Subject: [PATCH] wyroby start --- base.css | 61 +++++++++++++++++++++- components.css | 116 ++++++++++++++++++++++-------------------- home.css | 66 ------------------------ index.html | 6 +-- style.css | 3 +- wyroby.css | 8 +++ wyroby.html | 134 ++++++++++++++++++++++++++++++++++++++++++++++--- 7 files changed, 262 insertions(+), 132 deletions(-) create mode 100644 wyroby.css diff --git a/base.css b/base.css index db02615..4abd6b2 100644 --- a/base.css +++ b/base.css @@ -17,4 +17,63 @@ body { background-color: var(--surface); font-family: 'Plus Jakarta Sans', sans-serif; box-sizing: border-box; -} \ No newline at end of file +} + + +h1, h2, h3, h4{ + margin: 0; + font-family: serif; + color: var(--on-background); + & > span { + font-style: italic; + color: var(--primary); + } +} + +h1{ + font-size: 4rem; + line-height: 3.5rem; +} + +h2{ + font-size: 3.5rem; +} + +h3{ + font-size: 1.5rem; +} + +h4{ + font-size: 1rem; +} + +h5{ + font-size: 0.8rem; + +} + +p { + color: var(--on-background); + line-height: 1.5rem; +} + +section, nav, footer { + padding: 8rem 2rem; + + & > div:only-child, &:not(:has(>div:only-child)){ + max-width: var(--max-content-width); + margin: 0 auto; + } +} + +svg { + height: 1em; + width: 1em; +} + +ul { + list-style-type: none; + padding: 0; + margin: 0; +} + diff --git a/components.css b/components.css index 7db7789..fd1cc6a 100644 --- a/components.css +++ b/components.css @@ -14,59 +14,67 @@ } } -h1, h2, h3, h4{ - margin: 0; - font-family: serif; - color: var(--on-background); - & > span { - font-style: italic; - color: var(--primary); +.card { + width: 100%; + display: flex; + flex-direction: column; + + position: relative; + border-radius: var(--border-radius); + overflow: hidden; + background-color: white; + + .greener { + background-color: rgb(from var(--secondary-container) r g b / 0.3); + } + + & img { + display: block; + width: 100%; + scale: 1; + transition: scale 0.7s; + } + + & > div:first-child { + overflow: hidden; + } + + & > div:last-child { + display: grid; + grid-template-rows: auto auto 1fr; + padding: 2rem; + flex-grow: 1; + + & > a { + display: flex; + align-self: end; + align-items: center; + justify-content: flex-start; + gap: 1rem; + color: var(--primary); + font-weight: bold; + text-decoration: none; + } + } + + top: 0; + transition: top 0.2s; + + &:hover { + top: -10px; + + & img { + scale: 1.1; + } + + & svg { + margin-left: 10px; + } + } + + & svg { + transition-duration: 0.2s; + height: 2em; + width: 2em; } } - -h1{ - font-size: 4rem; - line-height: 3.5rem; -} - -h2{ - font-size: 3.5rem; -} - -h3{ - font-size: 1.5rem; -} - -h4{ - font-size: 1rem; -} - -h5{ - font-size: 0.8rem; - -} - -p { - color: var(--on-background); - line-height: 1.5rem; -} - -section, nav, footer { - padding: 8rem 2rem; - - & > div:only-child, &:not(:has(>div:only-child)){ - max-width: var(--max-content-width); - margin: 0 auto; - } -} - -svg { - height: 1em; - width: 1em; -} - -ul { - list-style-type: none; - padding: 0; - margin: 0; -} \ No newline at end of file diff --git a/home.css b/home.css index 64017a5..0191e0e 100644 --- a/home.css +++ b/home.css @@ -119,72 +119,6 @@ grid-column: 1; } } - - & > div { - width: 100%; - display: flex; - flex-direction: column; - - - position: relative; - border-radius: var(--border-radius); - overflow: hidden; - background-color: white; - - .greener { - background-color: rgb(from var(--secondary-container) r g b / 0.3); - } - - & img { - display: block; - width: 100%; - scale: 1; - transition: scale 0.7s; - } - - & > div:first-child { - overflow: hidden; - } - - & > div:last-child { - display: grid; - grid-template-rows: auto auto 1fr; - padding: 2rem; - flex-grow: 1; - - & > a { - display: flex; - align-self: end; - align-items: center; - justify-content: flex-start; - gap: 1rem; - color: var(--primary); - font-weight: bold; - text-decoration: none; - } - } - - top: 0; - transition: top 0.2s; - - &:hover { - top: -10px; - - & img { - scale: 1.1; - } - - & svg { - margin-left: 10px; - } - } - - & svg { - transition-duration: 0.2s; - height: 2em; - width: 2em; - } - } } .kawiarnia { diff --git a/index.html b/index.html index f1c5773..266c63f 100644 --- a/index.html +++ b/index.html @@ -61,7 +61,7 @@

Nasze Wyroby

-
+
tort
@@ -78,7 +78,7 @@
-
+
ciasto
@@ -95,7 +95,7 @@
-
+
slodkosci
diff --git a/style.css b/style.css index e1fa3fd..afe9778 100644 --- a/style.css +++ b/style.css @@ -1,4 +1,5 @@ @import "base.css"; @import "components.css"; @import "home.css"; -@import "layout.css"; \ No newline at end of file +@import "layout.css"; +@import "wyroby.css"; \ No newline at end of file diff --git a/wyroby.css b/wyroby.css new file mode 100644 index 0000000..b4febd7 --- /dev/null +++ b/wyroby.css @@ -0,0 +1,8 @@ +@import "base.css"; + +.wyroby { + & > :last-child { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + } +} \ No newline at end of file diff --git a/wyroby.html b/wyroby.html index 51ce104..dbe61cc 100644 --- a/wyroby.html +++ b/wyroby.html @@ -1,13 +1,13 @@ - + Piekarnik Gosi - - + + - - + +
-

Tutaj wyroby mają być (potem)

+
+

Nasze słodkości

+

Poznaj nasze tradycyjne receptury przekute w nowoczesne formy. Każdy wypiek to jistoria pasji, a kade lody to powiew naturalnej świeżości

+
+

Ciasta

+ +
+
+
+
+ tort +
+
+

Torty Okazjonalne

+

Weselne, urodzinowe i te bez okazji – od klasyki po nowoczesne musy.

+ Przeglądaj Torty + + + + + +
+
+
+
+