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>
<section class="hero">
<div>
<div>
<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
- od codziennych radości po wielkie uroczystości</p>
<a href="wyroby.html" class="btn">Zobacz naszą ofertę</a>
</div>
<div>
<img alt="tort" src="images/001.jpg"/>
</div>
<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
- od codziennych radości po wielkie uroczystości</p>
<a href="wyroby.html" class="btn">Zobacz naszą ofertę</a>
</div>
<div>
<img alt="tort" src="images/001.jpg"/>
</div>
</section>
<section class="about-us">

69
style.css
View file

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