Kawiarnia header
This commit is contained in:
bronkuu
parent
e72c601be0
commit
24c4c89557
8 changed files with 229 additions and 26 deletions
18
base.css
18
base.css
|
|
@ -14,6 +14,7 @@
|
||||||
--on-secondary-container: #4c5e3e;
|
--on-secondary-container: #4c5e3e;
|
||||||
--on-surface: #363227;
|
--on-surface: #363227;
|
||||||
--outline-variant: #b9b1a3;
|
--outline-variant: #b9b1a3;
|
||||||
|
--on-surface-variant: #645f52;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
|
@ -23,35 +24,36 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
h1, h2, h3, h4{
|
h1, h2, h3, h4 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: serif;
|
font-family: serif;
|
||||||
color: var(--on-background);
|
color: var(--on-background);
|
||||||
|
|
||||||
& > span {
|
& > span {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
color: var(--primary);
|
color: var(--primary);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
h1{
|
h1 {
|
||||||
font-size: 4rem;
|
font-size: 4rem;
|
||||||
line-height: 3.5rem;
|
line-height: 3.5rem;
|
||||||
margin: 1.5rem 0;
|
margin: 1.5rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2{
|
h2 {
|
||||||
font-size: 3.5rem;
|
font-size: 3.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
h3{
|
h3 {
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
h4{
|
h4 {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
h5{
|
h5 {
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
@ -64,7 +66,7 @@ p {
|
||||||
section, nav, footer {
|
section, nav, footer {
|
||||||
padding: 8rem 2rem;
|
padding: 8rem 2rem;
|
||||||
|
|
||||||
& > div:only-child, &:not(:has(>div:only-child)){
|
& > div:only-child, &:not(:has(>div:only-child)) {
|
||||||
max-width: var(--max-content-width);
|
max-width: var(--max-content-width);
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
BIN
images/009.jpg
Normal file
BIN
images/009.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 297 KiB |
55
kawiarnia.css
Normal file
55
kawiarnia.css
Normal file
|
|
@ -0,0 +1,55 @@
|
||||||
|
@import "base.css";
|
||||||
|
|
||||||
|
#kawiarnia-header {
|
||||||
|
padding: 0;
|
||||||
|
max-width: 100%;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
& > :last-child {
|
||||||
|
z-index: -10;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
& > img {width: 100%;}
|
||||||
|
& > div {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
background-image: linear-gradient(to right, var(--surface), transparent);
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& > :first-child {
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: var(--max-content-width);
|
||||||
|
padding: 8rem 2rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1.5rem;
|
||||||
|
align-items: flex-start;
|
||||||
|
|
||||||
|
& > h1 {
|
||||||
|
line-height: unset;
|
||||||
|
}
|
||||||
|
& > * {
|
||||||
|
max-width: 40%;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > span {
|
||||||
|
color: var(--primary);
|
||||||
|
letter-spacing: 0.05rem;
|
||||||
|
font-size: 1.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > p {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
color: var(--on-surface-variant);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
134
kawiarnia.html
134
kawiarnia.html
|
|
@ -1,27 +1,131 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="pl">
|
<html lang="pl">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8"/>
|
||||||
<title>Piekarnik Gosi</title>
|
<title>Piekarnik Gosi</title>
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
<meta name="viewport" content="width=device-width,initial-scale=1"/>
|
||||||
<meta name="description" content="" />
|
<meta name="description" content=""/>
|
||||||
<link href="normalize.css" rel="stylesheet">
|
<link href="normalize.css" rel="stylesheet">
|
||||||
<link href="style.css" rel="stylesheet" />
|
<link href="style.css" rel="stylesheet"/>
|
||||||
<link rel="icon" href="scraped/174394.png">
|
<link rel="icon" href="favicon.png">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<nav>
|
<nav>
|
||||||
<div>
|
|
||||||
<img alt="logo" src="scraped/pobrane-1.png" style="width: 14rem"/>
|
|
||||||
<div>
|
<div>
|
||||||
<a href="index.html">Strona Główna</a>
|
<img alt="logo" src="scraped/pobrane-1.png" style="width: 14rem"/>
|
||||||
<a href="wyroby.html">Wyroby</a>
|
<div>
|
||||||
<a href="portfolio.html">Portfolio</a>
|
<a href="index.html">Strona Główna</a>
|
||||||
<a>Kawiarnia</a>
|
<a href="wyroby.html">Wyroby</a>
|
||||||
|
<a href="portfolio.html">Portfolio</a>
|
||||||
|
<a>Kawiarnia</a>
|
||||||
|
</div>
|
||||||
|
<a class="btn">Kontakt</a>
|
||||||
</div>
|
</div>
|
||||||
<a class="btn">Kontakt</a>
|
|
||||||
</div>
|
|
||||||
</nav>
|
</nav>
|
||||||
<main>
|
<main>
|
||||||
|
<header id="kawiarnia-header">
|
||||||
|
<div>
|
||||||
|
<span>Miejsce spotkań</span>
|
||||||
|
<h1>Chwila wytchnienia w sercu <span>tradycji</span></h1>
|
||||||
|
<p>Zapraszamy do naszej kawiarni, gdzie zapach świeżo mielonej kawy miesza się z aromatem wypieków prosto z
|
||||||
|
pieca.</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<img alt="kawiarnia" src="images/009.jpg"/>
|
||||||
|
<div></div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<h2>Nasza karta</h2>
|
||||||
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
<footer>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<img alt="logo" src="scraped/pobrane-1.png" style="width: 14rem"/>
|
||||||
|
<p>Pasja, natura i domowy smak w każdym kawałku ciasta.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4>Lokalizacja</h4>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="https://maps.app.goo.gl/YD3DWUNKBoweKdpb7">
|
||||||
|
<div>
|
||||||
|
<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-map-pin-icon lucide-map-pin">
|
||||||
|
<path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/>
|
||||||
|
<circle cx="12" cy="10" r="3"/>
|
||||||
|
</svg>
|
||||||
|
<span>Pracownia</span></div>
|
||||||
|
<p>ul. Polna 7k<br>
|
||||||
|
83-314 Somonino</p>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://maps.app.goo.gl/568ax4QLJnXvqbhD9">
|
||||||
|
<div>
|
||||||
|
<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-map-pin-icon lucide-map-pin">
|
||||||
|
<path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/>
|
||||||
|
<circle cx="12" cy="10" r="3"/>
|
||||||
|
</svg>
|
||||||
|
<span>Kawiarnia</span></div>
|
||||||
|
<p>ul. Dworcowa 3a<br>
|
||||||
|
83-300 Kartuzy</p>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4>Kontakt</h4>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="https://facebook.com/piekarnikgosi">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 48 48">
|
||||||
|
<mask id="ipSFacebook0">
|
||||||
|
<path fill="#fff" stroke="#fff" stroke-linejoin="round" stroke-width="3.8"
|
||||||
|
d="M36 12.6h-6.013c-1.086 0-1.967.88-1.967 1.967v6.9H36l-1.169 7.597h-6.81V43h-8.776V29.064H12v-7.597h7.151l.094-7.21l-.013-1.31A7.868 7.868 0 0 1 27.099 5H36v7.6Z"/>
|
||||||
|
</mask>
|
||||||
|
<path fill="currentColor" d="M0 0h48v48H0z" mask="url(#ipSFacebook0)"/>
|
||||||
|
</svg>
|
||||||
|
<span>facebook.com/PiekarnikGosi</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://instagram.com/piekarnikgosi">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 24 24">
|
||||||
|
<path fill="currentColor"
|
||||||
|
d="M17.34 5.46a1.2 1.2 0 1 0 1.2 1.2a1.2 1.2 0 0 0-1.2-1.2Zm4.6 2.42a7.59 7.59 0 0 0-.46-2.43a4.94 4.94 0 0 0-1.16-1.77a4.7 4.7 0 0 0-1.77-1.15a7.3 7.3 0 0 0-2.43-.47C15.06 2 14.72 2 12 2s-3.06 0-4.12.06a7.3 7.3 0 0 0-2.43.47a4.78 4.78 0 0 0-1.77 1.15a4.7 4.7 0 0 0-1.15 1.77a7.3 7.3 0 0 0-.47 2.43C2 8.94 2 9.28 2 12s0 3.06.06 4.12a7.3 7.3 0 0 0 .47 2.43a4.7 4.7 0 0 0 1.15 1.77a4.78 4.78 0 0 0 1.77 1.15a7.3 7.3 0 0 0 2.43.47C8.94 22 9.28 22 12 22s3.06 0 4.12-.06a7.3 7.3 0 0 0 2.43-.47a4.7 4.7 0 0 0 1.77-1.15a4.85 4.85 0 0 0 1.16-1.77a7.59 7.59 0 0 0 .46-2.43c0-1.06.06-1.4.06-4.12s0-3.06-.06-4.12ZM20.14 16a5.61 5.61 0 0 1-.34 1.86a3.06 3.06 0 0 1-.75 1.15a3.19 3.19 0 0 1-1.15.75a5.61 5.61 0 0 1-1.86.34c-1 .05-1.37.06-4 .06s-3 0-4-.06a5.73 5.73 0 0 1-1.94-.3a3.27 3.27 0 0 1-1.1-.75a3 3 0 0 1-.74-1.15a5.54 5.54 0 0 1-.4-1.9c0-1-.06-1.37-.06-4s0-3 .06-4a5.54 5.54 0 0 1 .35-1.9A3 3 0 0 1 5 5a3.14 3.14 0 0 1 1.1-.8A5.73 5.73 0 0 1 8 3.86c1 0 1.37-.06 4-.06s3 0 4 .06a5.61 5.61 0 0 1 1.86.34a3.06 3.06 0 0 1 1.19.8a3.06 3.06 0 0 1 .75 1.1a5.61 5.61 0 0 1 .34 1.9c.05 1 .06 1.37.06 4s-.01 3-.06 4ZM12 6.87A5.13 5.13 0 1 0 17.14 12A5.12 5.12 0 0 0 12 6.87Zm0 8.46A3.33 3.33 0 1 1 15.33 12A3.33 3.33 0 0 1 12 15.33Z"/>
|
||||||
|
</svg>
|
||||||
|
<span>instagram.com/PiekarnikGosi</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="mailto:gosia@piekarnikgosi.pl">
|
||||||
|
<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-mail-icon lucide-mail">
|
||||||
|
<path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"/>
|
||||||
|
<rect x="2" y="4" width="20" height="16" rx="2"/>
|
||||||
|
</svg>
|
||||||
|
<span>gosia@piekarnikgosi.pl</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="tel:+48503186245">
|
||||||
|
<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-phone-icon lucide-phone">
|
||||||
|
<path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"/>
|
||||||
|
</svg>
|
||||||
|
<span>+48 503 186 245</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<p>© 2026 Piekarnik Gosi.</p>
|
||||||
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
29
portfolio.css
Normal file
29
portfolio.css
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
@import "base.css";
|
||||||
|
|
||||||
|
.portfolio {
|
||||||
|
padding-top: 2rem;
|
||||||
|
|
||||||
|
& > header {
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
& > p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > * {
|
||||||
|
text-align: center;
|
||||||
|
max-width: 40rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& > div:nth-child(2) {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -28,6 +28,12 @@
|
||||||
<h1>Nasze Słodkie Realizacje</h1>
|
<h1>Nasze Słodkie Realizacje</h1>
|
||||||
<p>Galeria pasji uwieczniona w kremie i dekoracjach. Zobacz wybrane projekty, które uświetniły wyjątkowe chwile naszych klientów – od bajkowych tortów dla dzieci po eleganckie torty weselne.</p>
|
<p>Galeria pasji uwieczniona w kremie i dekoracjach. Zobacz wybrane projekty, które uświetniły wyjątkowe chwile naszych klientów – od bajkowych tortów dla dzieci po eleganckie torty weselne.</p>
|
||||||
</header>
|
</header>
|
||||||
|
<div>
|
||||||
|
<a class="btn-green">Ciasta</a>
|
||||||
|
<a class="btn-green" href="wyroby_torty.html">Torty</a>
|
||||||
|
<a class="btn-green" href="wyroby_slodkie_stoly.html">Slodkie stoły</a>
|
||||||
|
<a class="btn-green" href="wyroby_lody.html">Lody</a>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
<footer>
|
<footer>
|
||||||
|
|
|
||||||
|
|
@ -3,3 +3,5 @@
|
||||||
@import "home.css";
|
@import "home.css";
|
||||||
@import "layout.css";
|
@import "layout.css";
|
||||||
@import "wyroby.css";
|
@import "wyroby.css";
|
||||||
|
@import "portfolio.css";
|
||||||
|
@import "kawiarnia.css";
|
||||||
|
|
@ -27,7 +27,9 @@
|
||||||
|
|
||||||
& > :last-child {
|
& > :last-child {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(3, 1fr);
|
justify-content: center;
|
||||||
|
grid-template-columns: repeat(auto-fill, 18rem);
|
||||||
|
width: 100%;
|
||||||
gap: 2rem;
|
gap: 2rem;
|
||||||
|
|
||||||
& > .card {
|
& > .card {
|
||||||
|
|
@ -35,10 +37,13 @@
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: auto auto;
|
grid-template-columns: auto auto;
|
||||||
grid-template-rows: auto auto;
|
grid-template-rows: auto auto;
|
||||||
|
& > h3 {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
& > span {
|
& > span {
|
||||||
color: var(--primary);
|
color: var(--primary);
|
||||||
font-size: 1.5rem;
|
font-size: 1.25rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
justify-self: end;
|
justify-self: end;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue