<!-- Paste this entire block into a Blogger page (HTML view) -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Blogger One-Page - 3 Column Responsive Layout</title>
<style>
/* ---------- Reset & base ---------- */
:root{
--gap: 18px;
--overlay: rgba(0,0,0,0.55);
--text-color: #fff;
--accent: #ffffff;
--card-radius: 12px;
}
*{box-sizing:border-box}
body{
margin:0;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
background:#f6f7f9;
color:#111;
padding:20px;
}
/* ---------- Container grid (3 columns on desktop) ---------- */
.layout {
display: grid;
grid-template-columns: 36% 32% 32%;
gap: var(--gap);
align-items: start;
min-height: 80vh; /* make left banner fill */
}
/* Left banner (big image) */
.left-banner {
position: relative;
height: calc(100vh - 40px); /* full-ish height viewport minus page padding */
border-radius: var(--card-radius);
overflow: hidden;
display:flex;
}
.left-banner a{
display:block;
width:100%;
height:100%;
text-decoration:none;
color:inherit;
}
.left-banner .bg {
position:absolute;
inset:0;
background-image: url("https://images.pexels.com/photos/2397262/pexels-photo-2397262.jpeg");
background-size:cover;
background-position:center;
transform-origin:center;
transition:transform .9s cubic-bezier(.2,.9,.3,1);
will-change: transform;
}
.left-banner:hover .bg{ transform: scale(1.03) }
.left-banner .banner-overlay{
position:absolute;
inset:0;
background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.6));
display:flex;
align-items:flex-end;
padding:28px;
}
.left-banner .banner-text{
color:var(--text-color);
max-width:85%;
}
.left-banner h2{ margin:0 0 6px; font-size: clamp(20px,3vw,30px); line-height:1.05 }
.left-banner p{ margin:0; font-size: clamp(13px,1.6vw,16px); opacity:.95 }
/* ---------- Card column styles ---------- */
.col {
display:flex;
flex-direction:column;
gap:var(--gap);
}
/* Each card (thumbnail) -- aspect ratio 1280x720 -> 16:9 */
.card {
position: relative;
border-radius: var(--card-radius);
overflow: hidden;
cursor: pointer;
min-height: 0;
transform: translateY(14px);
opacity: 0;
transition: transform .6s cubic-bezier(.2,.9,.3,1), opacity .6s ease;
will-change: transform, opacity;
box-shadow: 0 8px 20px rgba(20,30,40,0.06);
}
.card.in-view{
transform: translateY(0);
opacity: 1;
}
/* aspect ratio box */
.card .media {
width:100%;
padding-top:56.25%; /* 16:9 */
position:relative;
background-size:cover;
background-position:center;
transition: transform .6s cubic-bezier(.2,.9,.3,1);
}
.card:hover .media { transform: scale(1.035) }
/* overlay always visible but slightly transparent */
.card .overlay {
position:absolute;
inset:0;
background: var(--overlay);
display:flex;
align-items:flex-end;
padding:14px;
}
/* inner overlay split into two columns: left text, right read more */
.card .overlay-inner {
display:flex;
width:100%;
gap:12px;
}
.card .text {
flex:1 1 0;
display:flex;
flex-direction:column;
justify-content:flex-end;
min-width:0;
}
.card h3{
margin:0 0 6px;
color:var(--text-color);
font-size:16px;
line-height:1.05;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.card p {
margin:0;
color:var(--text-color);
font-size:13px;
opacity:0.95;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.card .read {
width: 120px;
min-width:110px;
display:flex;
align-items:center;
justify-content:center;
padding:10px;
border-radius:10px;
background: rgba(255,255,255,0.06);
color:var(--text-color);
font-weight:600;
font-size:14px;
text-align:center;
align-self:flex-end;
}
/* blinking animation for Read More */
@keyframes blink {
0% { opacity: 1; transform: translateY(0); }
45% { opacity: 0.15; transform: translateY(-1px); }
100% { opacity: 1; transform: translateY(0); }
}
.card .read.blink {
animation: blink 1.6s linear infinite;
}
/* Remove default link styles when wrapping full area */
.card a{ display:block; color:inherit; text-decoration:none; }
/* ---------- Responsive: hide left banner on tablet and below ---------- */
@media (max-width: 1024px){ /* tablet and below */
.layout {
grid-template-columns: 1fr 1fr; /* without left banner visible it will still make two cols */
}
.left-banner{ display:none; }
}
@media (max-width: 720px){ /* mobile */
.layout{ grid-template-columns: 1fr; }
.col{ width:100% }
.card .overlay-inner { flex-direction:row; }
.card .read { width:100px; font-size:13px; }
}
/* small visual polish */
.sr-only{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
</style>
</head>
<body>
<!-- ---------- Layout ---------- -->
<div class="layout">
<!-- Left banner (desktop only) -->
<div class="left-banner" aria-hidden="false">
<a href="https://example.com/left-banner-link" target="_blank" rel="noopener">
<div class="bg" role="img" aria-label="Banner image"></div>
<div class="banner-overlay">
<div class="banner-text">
<h2>Big Left Banner Title</h2>
<p>Clickable full-height banner. Hidden on tablet and mobile. Replace link/title/desc as needed.</p>
</div>
</div>
</a>
</div>
<!-- Column 1 of thumbnails -->
<div class="col" id="col-1">
<!-- Card 1 -->
<article class="card" data-link="https://example.com/post-1">
<a href="https://example.com/post-1" target="_blank" rel="noopener">
<div class="media" style="background-image: url('https://images.pexels.com/photos/2397262/pexels-photo-2397262.jpeg');" role="img" aria-label="Thumbnail 1"></div>
<div class="overlay">
<div class="overlay-inner">
<div class="text">
<h3>Thumbnail Title One</h3>
<p>Short description that remains visible. This is truncated to two lines when long.</p>
</div>
<div class="read blink">Read More →</div>
</div>
</div>
</a>
</article>
<!-- Card 2 -->
<article class="card" data-link="https://example.com/post-2">
<a href="https://example.com/post-2" target="_blank" rel="noopener">
<div class="media" style="background-image: url('https://images.pexels.com/photos/2397262/pexels-photo-2397262.jpeg');" role="img" aria-label="Thumbnail 2"></div>
<div class="overlay">
<div class="overlay-inner">
<div class="text">
<h3>Thumbnail Title Two</h3>
<p>Another description. Keeps text visible even when hovering or not.</p>
</div>
<div class="read blink">Read More →</div>
</div>
</div>
</a>
</article>
</div>
<!-- Column 2 of thumbnails -->
<div class="col" id="col-2">
<!-- Card 3 -->
<article class="card" data-link="https://example.com/post-3">
<a href="https://example.com/post-3" target="_blank" rel="noopener">
<div class="media" style="background-image: url('https://images.pexels.com/photos/2397262/pexels-photo-2397262.jpeg');" role="img" aria-label="Thumbnail 3"></div>
<div class="overlay">
<div class="overlay-inner">
<div class="text">
<h3>Thumbnail Title Three</h3>
<p>Short teaser or summary. Always visible over the dark overlay.</p>
</div>
<div class="read blink">Read More →</div>
</div>
</div>
</a>
</article>
<!-- Card 4 -->
<article class="card" data-link="https://example.com/post-4">
<a href="https://example.com/post-4" target="_blank" rel="noopener">
<div class="media" style="background-image: url('https://images.pexels.com/photos/2397262/pexels-photo-2397262.jpeg');" role="img" aria-label="Thumbnail 4"></div>
<div class="overlay">
<div class="overlay-inner">
<div class="text">
<h3>Thumbnail Title Four</h3>
<p>Last card sample text. Remove date/time display as requested.</p>
</div>
<div class="read blink">Read More →</div>
</div>
</div>
</a>
</article>
</div>
</div>
<script>
/* ---------- Entrance animation using IntersectionObserver ---------- */
(function(){
const cards = document.querySelectorAll('.card');
if ('IntersectionObserver' in window) {
const io = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('in-view');
// unobserve to avoid repeated triggers
io.unobserve(entry.target);
}
});
}, {threshold: 0.18});
cards.forEach(c => io.observe(c));
} else {
// fallback: just reveal
cards.forEach(c => c.classList.add('in-view'));
}
/* Make whole card clickable (for users who click outside the link) */
document.querySelectorAll('.card').forEach(card => {
const anchor = card.querySelector('a');
if (!anchor) return;
card.addEventListener('click', (e) => {
// avoid double if clicked on actual link element (anchor default)
if (e.target.tagName.toLowerCase() === 'a') return;
// open in new tab to match anchor target
window.open(anchor.href, '_blank', 'noopener');
});
})
;
/* Optional: reduce read-more blinking on small screens for power saving */
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (prefersReducedMotion) {
document.querySelectorAll('.read').forEach(el => el.classList.remove('blink'));
}
})();
</script>
</body>
</html>