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

kawiarnia

Browse source
This commit is contained in:
bronkuu 2026-04-28 12:08:32 +02:00
parent 19b426adb3
commit 3739e17226
2 changed files with 87 additions and 86 deletions
Download patch file Download diff file Expand all files Collapse all files

74
index.html
View file

@ -116,48 +116,46 @@
</section> </section>
<section class="kawiarnia"> <section class="kawiarnia">
<div> <div>
<div>
<h3>Twój drugi dom</h3>
<p>Poczuj się jak w domu. Codziennie czekają na Ciebie świeże wypieki prosto z naszej pracowni,
selekcja
najlepszych herbat i przepyszna kawa. To tutaj nasze ciasta smakują najlepiej – podane z
uśmiechem, w
miejscu stworzonym z pasji do słodkości.</p>
<ul>
<li>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-coffee-icon lucide-coffee">
<path d="M10 2v2"/>
<path d="M14 2v2"/>
<path d="M16 8a1 1 0 0 1 1 1v8a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1h14a4 4 0 1 1 0 8h-1"/>
<path d="M6 2v2"/>
</svg>
<span>Miła atmosfera</span>
</li>
<li>
<svg 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-wifi-icon lucide-wifi">
<path d="M12 20h.01"/>
<path d="M2 8.82a15 15 0 0 1 20 0"/>
<path d="M5 12.859a10 10 0 0 1 14 0"/>
<path d="M8.5 16.429a5 5 0 0 1 7 0"/>
</svg>
<span>Darmowe wifi</span>
</li>
</ul>
</div>
<div> <div>
<div> <div>
<h3>Twój drugi dom</h3> <img alt="kawiarnia" src="images/007.jpg"/>
<p>Poczuj się jak w domu. Codziennie czekają na Ciebie świeże wypieki prosto z naszej pracowni,
selekcja
najlepszych herbat i przepyszna kawa. To tutaj nasze ciasta smakują najlepiej – podane z
uśmiechem, w
miejscu stworzonym z pasji do słodkości.</p>
<ul>
<li>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-coffee-icon lucide-coffee">
<path d="M10 2v2"/>
<path d="M14 2v2"/>
<path d="M16 8a1 1 0 0 1 1 1v8a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1h14a4 4 0 1 1 0 8h-1"/>
<path d="M6 2v2"/>
</svg>
<span>Miła atmosfera</span>
</li>
<li>
<svg 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-wifi-icon lucide-wifi">
<path d="M12 20h.01"/>
<path d="M2 8.82a15 15 0 0 1 20 0"/>
<path d="M5 12.859a10 10 0 0 1 14 0"/>
<path d="M8.5 16.429a5 5 0 0 1 7 0"/>
</svg>
<span>Darmowe wifi</span>
</li>
</ul>
</div> </div>
<div> <div>
<div> <img alt="ciasto i kawa" src="images/008.jpg"/>
<img alt="kawiarnia" src="images/007.jpg"/>
</div>
<div>
<img alt="ciasto i kawa" src="images/008.jpg"/>
</div>
</div> </div>
</div> </div>
</div> </div>

99
style.css
View file

@ -132,6 +132,7 @@ nav > div {
background-color: var(--surface-container-low); background-color: var(--surface-container-low);
padding: 2rem; padding: 2rem;
& > div { & > div {
max-width: var(--max-content-width); max-width: var(--max-content-width);
margin: 0 auto; margin: 0 auto;
@ -281,63 +282,65 @@ nav > div {
margin: 6rem auto; margin: 6rem auto;
border-radius: var(--border-radius); border-radius: var(--border-radius);
& > div { padding: 4rem;
padding: 4rem; display: grid;
display: grid; grid-template-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr; gap: 4rem;
gap: 4rem;
& > :first-child { @media (max-width: 768px) {
& > h3 { grid-template-columns: 1fr;
color: var(--on-secondary-container); }
font-size: 3rem;
margin-bottom: 1.5rem;
}
& > p { & > :first-child {
color: var(--on-secondary-container); & > h3 {
font-size: 1.125rem; color: var(--on-secondary-container);
opacity: 0.8; font-size: 3rem;
margin-bottom: 2rem; margin-bottom: 1.5rem;
}
& li {
font-size: 1.25rem;
margin: 1rem 0;
& span {
margin-left: 1rem;
color: var(--on-secondary-container);
}
}
} }
& > :last-child { & > p {
color: var(--on-secondary-container);
font-size: 1.125rem;
opacity: 0.8;
margin-bottom: 2rem;
}
& li {
font-size: 1.25rem;
margin: 1rem 0;
& span {
margin-left: 1rem;
color: var(--on-secondary-container);
}
}
}
& > :last-child {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
& > div {
display: flex;
align-items: center;
}
& img {
width: 100%; width: 100%;
display: grid; border-radius: var(--border-radius);
grid-template-columns: 1fr 1fr; position: relative;
gap: 1rem;
& > div {
display: flex;
align-items: center;
}
& img {
width: 100%;
border-radius: var(--border-radius);
position: relative;
} }
& div:first-child > img { & div:first-child > img {
top: -1rem; top: -1rem;
} }
& div:last-child > img { & div:last-child > img {
top: 1rem; top: 1rem;
}
} }
} }
} }