page 3
<style type="text/css">.page3-a5 {
width: 420px;
height: 595px;
margin: 0 auto;
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 {
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-square img,
.photo-rect img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
@media (max-width: 767px) {
.page {
width: 100%;
max-width: 420px;
margin: 0 auto 40px;
}
}
</style>
<div class="page3-a5">
<div class="photo-square"><a data-lightbox="album" data-title="Bottom Left" href="/files/attach/images/2025/04/30/aed9d0c3fbcc3bd8a5a1e2070ce3fcaf.jpg"><img alt="Bottom Square" src="/files/attach/images/2025/04/30/aed9d0c3fbcc3bd8a5a1e2070ce3fcaf.jpg" /> </a></div>
<div class="photo-rect"><a data-lightbox="album" data-title="Top Left (16:9)" href="/files/attach/images/2025/04/30/9eacc12e05e7a13cae22c45d941614d2.jpg"><img alt="Top Rect" src="/files/attach/images/2025/04/30/9eacc12e05e7a13cae22c45d941614d2.jpg" /> </a></div>
<div class="photo-tall-half"> </div>
</div>
by eGrida posted May 14, 2025
