test 3-6 1
<style type="text/css">
.spread {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0;
width: 100%;
margin: 40px auto;
}
.page {
width: 420px;
height: 595px;
margin: 0 0 0 0;
background-color: white;
border: none;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
.photo-square,
.photo-rect,
.photo-tall-half,
.photo-tall-cont,
.photo-vertical {
position: absolute;
background-repeat: no-repeat;
}
.photo-square {
width: 275px;
height: 275px;
left: 0;
bottom: 0;
z-index: 1;
}
.photo-rect {
width: 275px;
height: 140px;
left: 0;
bottom: 280px;
z-index: 1;
}
.photo-tall-half {
width: 140px;
height: 420px;
left: 280px;
bottom: 0;
background-image: url('/files/attach/images/2025/05/13/29f6a1a4707e7c878080754974dd5088.jpg');
background-size: 560px 420px;
background-position: left center;
z-index: 0;
}
.photo-tall-cont {
width: 420px;
height: 420px;
left: 0;
bottom: 0;
background-image: url('/files/attach/images/2025/05/13/29f6a1a4707e7c878080754974dd5088.jpg');
background-size: 560px 420px;
background-position: right center;
z-index: 0;
}
.photo-vertical {
width: 168px;
height: 252px;
object-fit: cover;
display: block;
overflow: hidden;
}
.photo-square img,
.photo-rect img,
.photo-vertical img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.text-box {
position: absolute;
top: 20px;
width: 70%;
right: 5%;
background: rgba(255, 255, 255, 0.9);
padding: 16px;
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: 16px;
margin: 0 0 8px;
}
.text-box p {
margin: 0 0 6px;
}
@media (max-width: 767px) {
.spread {
flex-direction: column;
align-items: center;
}
.page {
width: 100%;
max-width: 420px;
margin: 0 auto 40px;
}
}
</style>
<div class="spread">
<!-- Page 3 -->
<div class="page">
<a href="/files/attach/images/2025/04/30/aed9d0c3fbcc3bd8a5a1e2070ce3fcaf.jpg" data-lightbox="album" data-title="Bottom Left">
<div class="photo-square">
<img src="/files/attach/images/2025/04/30/aed9d0c3fbcc3bd8a5a1e2070ce3fcaf.jpg" alt="Bottom Square">
</div>
</a>
<a href="/files/attach/images/2025/04/30/9eacc12e05e7a13cae22c45d941614d2.jpg" data-lightbox="album" data-title="Top Left (16:9)">
<div class="photo-rect">
<img src="/files/attach/images/2025/04/30/9eacc12e05e7a13cae22c45d941614d2.jpg" alt="Top Rect">
</div>
</a>
<a href="/files/attach/images/2025/05/13/29f6a1a4707e7c878080754974dd5088.jpg" data-lightbox="album" data-title="Vertical Span">
<div class="photo-tall-half"></div>
</a>
</div>
<!-- Page 4 -->
<div class="page">
<a href="/files/attach/images/2025/05/13/29f6a1a4707e7c878080754974dd5088.jpg" data-lightbox="album" data-title="Vertical Continued">
<div class="photo-tall-cont"></div>
</a>
<div class="text-box">
<h3>Desert Echoes</h3>
<p>사막의 아침 공기가 아직 따스함을 품기 전</p>
<p>고요한 장면을 담은 한 컷</p>
<p>#빛 #바람 #침묵</p>
</div>
</div>
<!-- Page 5 -->
<div class="page">
<a href="/files/attach/images/2025/05/13/964c45c07e7c9e0c22077a9c6842a98f.jpg" data-lightbox="album" data-title="Photo 1">
<div class="photo-vertical" style="right: 0; top: 0; position: absolute;">
<img src="/files/attach/images/2025/05/13/964c45c07e7c9e0c22077a9c6842a98f.jpg" alt="Photo 1">
</div>
</a>
<a href="/files/attach/images/2025/05/13/1924fdcee942825449910ea4b4db917c.jpg" data-lightbox="album" data-title="Photo 2">
<div class="photo-vertical" style="left: 0; bottom: 0; position: absolute;">
<img src="/files/attach/images/2025/05/13/1924fdcee942825449910ea4b4db917c.jpg" alt="Photo 2">
</div>
</a>
<a href="/files/attach/images/2025/05/13/9e6951c0ae1c2dcfdfde24e7880e5f69.jpg" data-lightbox="album" data-title="Photo 3">
<div class="photo-vertical" style="right: 0; bottom: 0; position: absolute;">
<img src="/files/attach/images/2025/05/13/9e6951c0ae1c2dcfdfde24e7880e5f69.jpg" alt="Photo 3">
</div>
</a>
</div>
<!-- Page 6 -->
<div class="page">
<!-- Blank or extend with new layout -->
</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
