[html]<div class="album">
<h2>Салем, бар «Far From The Tree Cider»</h2>
<div class="gallery">
<div class="photo">
<img src="https://upforme.ru/uploads/001c/82/f2/168/980436.png">
<div class="text">Пробую свой первый крафтовый сидор</div>
</div>
<div class="photo">
<img src="https://upforme.ru/uploads/001c/82/f2/168/837296.png">
<div class="text">Собиралась танцевать, а в итоге царственно восседаю на стуле</div>
</div>
</div>
</div>
<style>
.album {
max-width:750px;
margin:auto;
padding:30px;
background:
radial-gradient(circle at top,#4b145c,#120914);
border-radius:20px;
box-shadow:
0 0 40px rgba(255,0,150,.25);
text-align:center;
}
/* Заголовок */
.album h2 {
font-family:Georgia,serif;
color:#ff4fa3;
letter-spacing:5px;
font-size:28px;
/* расстояние до фотографий */
margin-bottom:60px;
text-shadow:
0 0 10px #ff4fa3,
0 0 25px #9b00ff;
}
/* Блок фотографий */
.gallery {
display:flex;
justify-content:center;
gap:35px;
flex-wrap:wrap;
/* дополнительный воздух */
margin-top:20px;
}
/* Карточки */
.photo {
background:#fff;
padding:12px 12px 35px;
width:280px;
position:relative;
box-shadow:
0 10px 30px rgba(0,0,0,.7);
transition:
transform .45s ease,
box-shadow .45s ease;
}
/* наклон карточек */
.photo:first-child {
transform:rotate(-4deg);
}
.photo:nth-child(2) {
transform:rotate(4deg);
}
/* эффект наведения */
.photo:hover {
transform:
scale(1.15)
rotate(0deg);
z-index:5;
box-shadow:
0 0 15px #ff005d,
0 0 35px #ff005d,
0 0 70px #8b00ff;
}
/* изображения */
.photo img {
width:100%;
height:360px;
object-fit:cover;
display:block;
}
/* подписи */
.text {
margin-top:12px;
font-family:cursive;
font-size:18px;
color:#4b3545;
}
</style>[/html]
Отредактировано Velanna Marrow (04-08-2026 20:49:48)