body {
margin: 0;
font-family: sans-serif;
}
header {
background-color: #333;
color: white;
padding: 16px;
text-align: center;
}
nav {
background-color: #222;
position: sticky;
top: 0;
z-index: 10;
}
nav ul {
list-style: none;
margin: 0;
padding: 8px 16px;
display: flex;
gap: 16px;
}
nav a {
color: white;
text-decoration: none;
}
.gallery {
padding: 16px;
/* TODO: dodaj clearfix dla .gallery (::after z clear: both) */
}
.photo-item {
float: left;
width: 30%;
margin: 1.5%;
position: relative;
}
.photo-item img {
width: 100%;
display: block;
}
.photo-caption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
margin: 0;
padding: 4px 0;
background: rgba(0, 0, 0, 0.5);
color: white;
text-align: center;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 12px;
clear: both;
}
@media (max-width: 768px) {
.photo-item{
width: 46%;
}
}
@media (max-width: 480px) {
.photo-item{
width: 96%;
float: none;
}
}
Moja galeria
.jpg)
Krajobraz 1
.jpg)
Krajobraz 2
.jpg)
Krajobraz 3
.jpg)
Krajobraz 4
.jpg)
Krajobraz 5
.jpg)
Krajobraz 6