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

mobile hero

Browse source
This commit is contained in:
bronkuu 2026-04-28 10:46:36 +02:00
parent 189802f82b
commit 259490b5de
2 changed files with 43 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

16
index.html
View file

@ -25,15 +25,13 @@
<main> <main>
<section class="hero"> <section class="hero">
<div> <div>
<div> <h1>Słodkości tworzone z <span>pasją</span></h1>
<h1>Słodkości tworzone z <span>pasją</span></h1> <p>Naturalne składniki, domowe receptury i pasja. Tworzymy torty i wypieki na Twoje najważniejsze chwile
<p>Naturalne składniki, domowe receptury i pasja. Tworzymy torty i wypieki na Twoje najważniejsze chwile - od codziennych radości po wielkie uroczystości</p>
- od codziennych radości po wielkie uroczystości</p> <a href="wyroby.html" class="btn">Zobacz naszą ofertę</a>
<a href="wyroby.html" class="btn">Zobacz naszą ofertę</a> </div>
</div> <div>
<div> <img alt="tort" src="images/001.jpg"/>
<img alt="tort" src="images/001.jpg"/>
</div>
</div> </div>
</section> </section>
<section class="about-us"> <section class="about-us">

69
style.css
View file

@ -30,20 +30,16 @@ nav > div {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr; grid-template-rows: 1fr 1fr;
gap: 1rem; gap: 1rem;
& > .btn {
grid-column: 2;
grid-row: 1;
}
} }
& :last-child { & :last-child {
justify-self: end justify-self: end
} }
& > .btn {
@media (max-width: 768px) {
grid-column: 2;
grid-row: 1;
}
}
& > div { & > div {
display: flex; display: flex;
align-items: center; align-items: center;
@ -87,40 +83,47 @@ nav > div {
max-width: var(--max-content-width); max-width: var(--max-content-width);
height: 800px; height: 800px;
& > div { display: grid;
display: grid; grid-template-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr; gap: 2rem;
gap: 2rem;
& > div { @media (max-width: 768px) {
display: flex; gap: 0;
justify-content: center; grid-template-columns: 1fr;
padding-bottom: 4rem;
& > :last-child {
grid-row: 1;
} }
/* left portion */
& > :first-child { & > :first-child {
align-items: flex-start; grid-row: 2;
flex-direction: column;
gap: 1rem;
} }
}
/* right portion */ & > div {
display: flex;
justify-content: center;
}
& > :last-child { & > :first-child {
align-items: center; align-items: flex-start;
flex-direction: column;
gap: 1rem;
}
& > img { & > :last-child {
rotate: 2deg; align-items: center;
border-radius: var(--border-radius);
max-width: 100%;
max-height: 80%;
aspect-ratio: 4/5;
transition: rotate 0.7s;
&:hover { & > img {
rotate: 0deg; rotate: 2deg;
} border-radius: var(--border-radius);
max-width: 100%;
max-height: 80%;
aspect-ratio: 4/5;
transition: rotate 0.7s;
&:hover {
rotate: 0deg;
} }
} }
} }