test 1-2
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Photo Album A5</title>
<link href="https://cdn.jsdelivr.net/npm/lightbox2@2.11.4/dist/css/lightbox.min.css" rel="stylesheet" />
<style>
body {
background: #f2f2f2;
font-family: sans-serif;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 30px;
padding: 40px;
}
.a5-page {
width: 420px;
height: 595px;
background: white;
position: relative;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
overflow: hidden;
}
.frame-bg {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.photo-slot {
position: absolute;
z-index: 1;
overflow: hidden;
border-radius: 4px;
}
.photo-slot img {
width: 100%;
height: 100%;
object-fit: cover;
cursor: pointer;
display: block;
}
/* 페이지 1 프레임 배치 (2장) */
.page1 .slot1 { top: 34%; left: 8%; width: 40%; height: 25%; }
.page1 .slot2 { top: 38%; left: 52%; width: 40%; height: 25%; }
/* 페이지 2 프레임 배치 (1장 + 캡션) */
.page2 .slot1 { top: 6%; left: 5%; width: 90%; height: 55%; }
.page2 .caption {
position: absolute;
bottom: 6%;
left: 5%;
width: 90%;
font-size: 12px;
z-index: 1;
}
.page2 .caption-title {
font-weight: bold;
font-size: 14px;
margin-bottom: 6px;
}
</style>
</head>
<body>
<!-- Page 1 -->
<div class="a5-page page1">
<img class="frame-bg" src="/files/attach/images/2025/04/30/ea837362da02d633b8b0168375e79183.jpg" alt="Page 1 Frame">
<a href="/files/attach/images/2025/04/30/ea837362da02d633b8b0168375e79183.jpg" data-lightbox="album" data-title="Desert View 1">
<div class="photo-slot slot1">
<img src="/files/attach/images/2025/04/30/ea837362da02d633b8b0168375e79183.jpg" alt="Photo 1">
</div>
</a>
<a href="/files/attach/images/2025/04/30/0493a3f881d83c0263211d06af551990.jpg" data-lightbox="album" data-title="Desert View 2">
<div class="photo-slot slot2">
<img src="/files/attach/images/2025/04/30/0493a3f881d83c0263211d06af551990.jpg" alt="Photo 2">
</div>
</a>
</div>
<!-- Page 2 -->
<div class="a5-page page2">
<img class="frame-bg" src="/files/attach/images/2025/04/30/0493a3f881d83c0263211d06af551990.jpg" alt="Page 2 Frame">
<a href="/files/attach/images/2025/04/30/aed9d0c3fbcc3bd8a5a1e2070ce3fcaf.jpg" data-lightbox="album" data-title="Desert View 3">
<div class="photo-slot slot1">
<img src="/files/attach/images/2025/04/30/aed9d0c3fbcc3bd8a5a1e2070ce3fcaf.jpg" alt="Photo 3">
</div>
</a>
<div class="caption">
<div class="caption-title">PUT SOME TITLE HERE</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae velit eros. Vivamus semper, velit vel sagittis convallis, nisl nisl fermentum urna.</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/lightbox2@2.11.4/dist/js/lightbox.min.js"></script>
</body>
</html>
by eGrida posted May 10, 2025
