kawiarnia
This commit is contained in:
bronkuu
parent
19b426adb3
commit
3739e17226
2 changed files with 87 additions and 86 deletions
74
index.html
74
index.html
|
|
@ -116,48 +116,46 @@
|
|||
</section>
|
||||
<section class="kawiarnia">
|
||||
<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>
|
||||
<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>
|
||||
<img alt="kawiarnia" src="images/007.jpg"/>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<img alt="kawiarnia" src="images/007.jpg"/>
|
||||
</div>
|
||||
<div>
|
||||
<img alt="ciasto i kawa" src="images/008.jpg"/>
|
||||
</div>
|
||||
<img alt="ciasto i kawa" src="images/008.jpg"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
99
style.css
99
style.css
|
|
@ -132,6 +132,7 @@ nav > div {
|
|||
background-color: var(--surface-container-low);
|
||||
|
||||
padding: 2rem;
|
||||
|
||||
& > div {
|
||||
max-width: var(--max-content-width);
|
||||
margin: 0 auto;
|
||||
|
|
@ -281,63 +282,65 @@ nav > div {
|
|||
margin: 6rem auto;
|
||||
border-radius: var(--border-radius);
|
||||
|
||||
& > div {
|
||||
padding: 4rem;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 4rem;
|
||||
padding: 4rem;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 4rem;
|
||||
|
||||
& > :first-child {
|
||||
& > h3 {
|
||||
color: var(--on-secondary-container);
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
& > 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);
|
||||
}
|
||||
}
|
||||
& > :first-child {
|
||||
& > h3 {
|
||||
color: var(--on-secondary-container);
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
& > :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%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
& img {
|
||||
width: 100%;
|
||||
border-radius: var(--border-radius);
|
||||
position: relative;
|
||||
border-radius: var(--border-radius);
|
||||
position: relative;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
& div:first-child > img {
|
||||
top: -1rem;
|
||||
}
|
||||
& div:first-child > img {
|
||||
top: -1rem;
|
||||
}
|
||||
|
||||
& div:last-child > img {
|
||||
top: 1rem;
|
||||
}
|
||||
& div:last-child > img {
|
||||
top: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue