test 5-6 6
<style type="text/css">
.spread {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0;
width: 100%;
margin: 40px auto;
}
.page-pair {
display: flex;
flex-wrap: nowrap;
justify-content: center;
width: 100%;
max-width: 860px;
margin: 0 auto 40px;
}
.page {
width: 420px;
height: 595px;
background-color: white;
border: none;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
padding: 5mm 0 5mm 5mm;
box-sizing: border-box;
}
.photo-vertical,
.photo-group-left,
.photo-group-right-top,
.photo-group-right-bottom,
.photo5,
.photo6,
.photo4 {
object-fit: cover;
display: block;
overflow: hidden;
position: absolute;
}
.photo-vertical {
width: 168px;
height: 252px;
}
.photo3 {
width: calc(100% - 10mm);
height: calc(595px - 2 * 10mm);
left: 5mm;
top: 10mm;
}
.photo4 {
width: 265px;
height: calc(265px * 5 / 4);
left: 10mm;
top: 10mm;
z-index: 1;
z-index: 1;
}
.photo5 {
right: 0;
width: 140px;
height: calc((420px - 10mm - 210px - 5mm - 10mm) * 2 / 3);
top: 10mm;
z-index: 1;
position: absolute;
object-fit: cover;
}
.photo6 {
right: 0;
width: 140px;
top: calc(10mm + 85.3px + 5mm);
z-index: 1;
}
.text-box {
position: absolute;
bottom: 10mm;
right: 10mm;
width: 168px;
background: rgba(255, 255, 255, 0.9);
padding: 10px;
box-shadow: 0 0 6px rgba(0,0,0,0.1);
font-size: 13px;
line-height: 1.4;
z-index: 2;
}
.text-box h3 {
font-size: 14px;
margin: 0 0 6px;
}
.text-box p {
margin: 0 0 4px;
}
@media (max-width: 767px) {
.spread {
flex-direction: column;
align-items: center;
}
.page-pair {
flex-direction: column;
}
.page {
width: 100%;
max-width: 420px;
margin: 0 auto 40px;
}
}
</style>
<div class="spread">
<!-- Pages 5-6 -->
<div class="page-pair">
<div class="page">
<a href="/files/attach/images/2025/05/13/9e6951c0ae1c2dcfdfde24e7880e5f69.jpg" data-lightbox="album" data-title="Photo 3">
<img class="photo3" src="/files/attach/images/2025/05/13/9e6951c0ae1c2dcfdfde24e7880e5f69.jpg" alt="Photo 3">
</a>
<a href="/files/attach/images/2025/05/13/964c45c07e7c9e0c22077a9c6842a98f.jpg" data-lightbox="album" data-title="Photo 1">
<img class="photo-vertical" style="right: 0; top: 0;" src="/files/attach/images/2025/05/13/964c45c07e7c9e0c22077a9c6842a98f.jpg" alt="Photo 1">
</a>
<a href="/files/attach/images/2025/05/13/1924fdcee942825449910ea4b4db917c.jpg" data-lightbox="album" data-title="Photo 2">
<img class="photo-vertical" style="left: 0; bottom: 0;" src="/files/attach/images/2025/05/13/1924fdcee942825449910ea4b4db917c.jpg" alt="Photo 2">
</a>
</div>
<div class="page">
<a href="/files/attach/images/2025/05/13/a73ea5343c6caec3a1307a16f8d1a2da.jpg" data-lightbox="album" data-title="Photo 4">
<img class="photo4" src="/files/attach/images/2025/05/13/a73ea5343c6caec3a1307a16f8d1a2da.jpg" alt="Photo 4">
</a>
<a href="/files/attach/images/2025/05/13/a73ea5343c6caec3a1307a16f8d1a2da.jpg" data-lightbox="album" data-title="Photo 5">
<img class="photo5" src="/files/attach/images/2025/05/13/a73ea5343c6caec3a1307a16f8d1a2da.jpg" alt="Photo 5">
</a>
<a href="/files/attach/images/2025/05/13/7ab2d9468ba278b9baca9ca31645d3f6.jpg" data-lightbox="album" data-title="Photo 6">
<img class="photo6" src="/files/attach/images/2025/05/13/7ab2d9468ba278b9baca9ca31645d3f6.jpg" alt="Photo 6">
</a>
<div class="text-box">
<h3>Late Sun</h3>
<p>오후의 빛이 사라지기 직전</p>
<p>작은 그림자와 함께 남은 감정</p>
<p>#노을 #감성 #끝자락</p>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/lightbox2@2.11.4/dist/js/lightbox.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/lightbox2@2.11.4/dist/css/lightbox.min.css" rel="stylesheet" />
by eGrida posted May 13, 2025
