<!-- Save as: lifeblessings-layout.html (or paste into WP Custom HTML block) -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Life Blessings — Layout Preview</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;700&family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
<style>
/* ========== Basic Reset ========== */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
background:#f8f8f8;
color:#222;
line-height:1.5;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
padding:30px;
}
/* ========== Container ========== */
.container{
max-width:1200px;
margin:0 auto;
background:#fff;
padding:32px;
box-shadow:0 6px 30px rgba(20,20,20,0.05);
border-radius:10px;
display:grid;
grid-template-columns: 1fr 320px; /* main + sidebar */
gap:28px;
}
header.site-header{
grid-column:1/-1;
text-align:center;
margin-bottom:10px;
}
header .title{
font-family: "Lora", serif;
font-size:44px;
letter-spacing:2px;
color:#111;
}
/* ========== Hero / Slider ========== */
.hero{
background:#eee;
border-radius:8px;
padding:18px;
min-height:260px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
overflow:hidden;
}
.slider{
width:100%;
height:100%;
position:relative;
}
.slide{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
padding:20px;
opacity:0;
transform:translateY(8px);
transition:opacity .5s ease, transform .5s ease;
}
.slide.active{ opacity:1; transform:none; }
.slider .controls{
position:absolute;
bottom:12px;
right:12px;
display:flex;
gap:8px;
}
.dot{
width:10px;height:10px;border-radius:50%;background:rgba(0,0,0,0.2);cursor:pointer;
}
.dot.active{ background:#333; }
/* ========== Browse by Day grid ========== */
.day-grid{
margin-top:20px;
display:grid;
grid-template-columns: repeat(3,1fr);
gap:12px;
}
.day-btn{
padding:20px;
background:#fff;
border-radius:8px;
border:1px solid #eee;
text-align:center;
font-weight:600;
cursor:pointer;
box-shadow:0 6px 18px rgba(10,10,10,0.03);
}
/* ========== Testimonial ========== */
.testimonial{
margin-top:20px;
padding:18px;
background:#fafafa;
border-radius:8px;
border-left:4px solid #f0c987;
font-style:italic;
color:#333;
}
/* ========== Sidebar ========== */
aside.sidebar{
background:transparent;
}
.widget{
background:#fff;
padding:14px;
border-radius:8px;
margin-bottom:16px;
border:1px solid #f0f0f0;
box-shadow:0 4px 18px rgba(12,12,12,0.03);
}
.widget h4{
font-size:14px;
margin-bottom:8px;
letter-spacing:0.6px;
color:#111;
}
.search input{
width:100%;
padding:10px 12px;
border-radius:6px;
border:1px solid #e6e6e6;
}
.today-blessing{ font-size:14px; color:#444; }
.recent-list{ display:flex; flex-direction:column; gap:10px; }
.recent-item{ display:flex; gap:10px; align-items:center; }
.thumb{ width:48px; height:48px; background:#eaeaea; border-radius:6px; }
.social-icons{ display:flex; gap:10px; margin-top:8px; }
.social-icons a{ width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#f2f2f2;text-decoration:none;color:#333;font-weight:600; }
.subscribe input[type="email"]{ width:100%; padding:10px;border-radius:6px;border:1px solid #e6e6e6;margin-bottom:8px;}
.btn{ display:inline-block;padding:10px 14px;border-radius:6px;background:#333;color:#fff;text-decoration:none;font-weight:600; }
/* ========== Footer (4 columns) ========== */
footer.site-footer{
grid-column:1/-1;
margin-top:26px;
border-top:1px solid #eee;
padding-top:22px;
display:grid;
grid-template-columns: repeat(4,1fr);
gap:18px;
}
.footer-col h5{ font-weight:700;margin-bottom:10px; }
.footer-col p, .footer-col li{ font-size:14px;color:#555; line-height:1.6; }
/* ========== Responsive ========== */
@media (max-width:980px){
.container{ grid-template-columns:1fr; padding:20px;}
footer.site-footer{ grid-template-columns:repeat(2,1fr); }
.day-grid{ grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
.day-grid{ grid-template-columns:repeat(1,1fr); }
header .title{ font-size:30px; }
footer.site-footer{ grid-template-columns:1fr; gap:12px;}
}
</style>
</head>
<body>
<div class="container" role="main">
<!-- Header -->
<header class="site-header">
<div class="title">LIFE BLESSINGS</div>
</header>
<!-- Main Content -->
<main>
<!-- HERO / IMAGE SLIDER -->
<section class="hero" aria-label="Hero slider">
<div class="slider" id="simpleSlider">
<div class="slide active">
<!-- Replace this block with WP slider shortcode: [smartslider3 slider="1"] -->
<div style="text-align:center;">
<h3 style="font-family:Lora, serif; font-size:22px; margin-bottom:6px;">Daily Blessing — "Peace be upon you"</h3>
<p style="max-width:720px;">Beautiful short prayer or image caption goes here — replace with actual slider or image.</p>
</div>
</div>
<div class="slide">
<div style="text-align:center;">
<h3 style="font-family:Lora, serif; font-size:22px; margin-bottom:6px;">Blessing Image 2</h3>
<p style="max-width:720px;">Another slide — use your slider plugin or images.</p>
</div>
</div>
<div class="slide">
<div style="text-align:center;">
<h3 style="font-family:Lora, serif; font-size:22px; margin-bottom:6px;">Blessing Image 3</h3>
<p style="max-width:720px;">Third slide — replace with your content or shortcode.</p>
</div>
</div>
<div class="controls" aria-hidden="true">
<div class="dot active" data-index="0" title="Slide 1"></div>
<div class="dot" data-index="1" title="Slide 2"></div>
<div class="dot" data-index="2" title="Slide 3"></div>
</div>
</div>
</section>
<!-- BROWSE BY DAY -->
<section style="margin-top:18px;">
<h3 style="font-family:Lora, serif; margin-bottom:8px;">BROWSE BY DAY</h3>
<div class="day-grid">
<a class="day-btn" href="/category/monday-blessings">Monday Blessings</a>
<a class="day-btn" href="/category/tuesday-blessings">Tuesday Blessings</a>
<a class="day-btn" href="/category/wednesday-blessings">Wednesday Blessings</a>
<a class="day-btn" href="/category/thursday-blessings">Thursday Blessings</a>
<a class="day-btn" href="/category/friday-blessings">Friday Blessings</a>
<a class="day-btn" href="/category/saturday-blessings">Saturday Blessings</a>
</div>
</section>
<!-- TESTIMONIAL -->
<section class="testimonial" aria-label="testimonial">
"میں آپ کے بلاگ کے لیے بہت شکر گزار ہوں — یہاں کی دعاوں نے میرے دن بدل دئیے" — ایک قاری
</section>
</main>
<!-- SIDEBAR -->
<aside class="sidebar" aria-label="Sidebar">
<!-- Search -->
<div class="widget search" role="search">
<h4>SEARCH</h4>
<!-- If using WP, replace INPUT with <?php get_search_form(); ?> or put shortcode -->
<input type="search" placeholder="Search Blessings..." aria-label="Search Blessings">
</div>
<!-- Today's Blessing -->
<div class="widget">
<h4>TODAY'S BLESSING</h4>
<div class="today-blessing">
<!-- Replace with dynamic random quote or WP widget/plugin -->
"The Lord is my shepherd; I shall not want."
</div>
</div>
<!-- Recent Posts -->
<div class="widget">
<h4>RECENT BLESSINGS</h4>
<div class="recent-list">
<!-- Replace these static items with WordPress Recent Posts widget or shortcode -->
<div class="recent-item"><div class="thumb" aria-hidden="true"></div><div>How to share blessings today</div></div>
<div class="recent-item"><div class="thumb" aria-hidden="true"></div><div>Friday Blessings — 110 Quotes</div></div>
<div class="recent-item"><div class="thumb" aria-hidden="true"></div><div>Sunday prayers for peace</div></div>
</div>
</div>
<!-- Categories -->
<div class="widget">
<h4>CATEGORIES</h4>
<ul style="list-style:none;padding-left:0;">
<!-- Replace with WP Categories widget or dynamic list -->
<li>Monday Blessings</li>
<li>Friday Blessings</li>
<li>Sunday Blessings</li>
</ul>
</div>
<!-- Follow -->
<div class="widget">
<h4>FOLLOW US</h4>
<div class="social-icons">
<a href="#" aria-label="Facebook">f</a>
<a href="#" aria-label="Pinterest">p</a>
<a href="#" aria-label="Instagram">ig</a>
<a href="#" aria-label="WhatsApp">w</a>
</div>
</div>
<!-- Subscribe -->
<div class="widget subscribe">
<h4>JOIN OUR BLESSINGS LIST</h4>
<!-- Replace with WPForms / MailPoet shortcode or form -->
<form onsubmit="alert('Replace this with your email provider form/shortcode'); return false;">
<input type="email" placeholder="Email" required>
<button class="btn" type="submit">SUBSCRIBE</button>
</form>
</div>
</aside>
<!-- Footer -->
<footer class="site-footer" role="contentinfo">
<div class="footer-col">
<h5>ABOUT LIFE BLESSINGS</h5>
<p>Life Blessings پر آپ کو روزانہ کی دعا اور محبت ملے گی۔ ہم آسان، دل کو چھو لینے والی تحریروں کے ذریعے امید پھیلانے کی خدمت کرتے ہیں۔</p>
</div>
<div class="footer-col">
<h5>QUICK LINKS</h5>
<ul style="list-style:none;padding-left:0;">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Friday Blessings</li>
<li>Sunday Blessings</li>
</ul>
</div>
<div class="footer-col">
<h5>POPULAR POSTS</h5>
<ul style="list-style:none;padding-left:0;">
<li>110+ Happy Sunday Blessings</li>
<li>Morning Blessings For Peace</li>
<li>Blessings For Family</li>
</ul>
</div>
<div class="footer-col">
<h5>STAY CONNECTED</h5>
<p>Subscribe to receive daily blessings in your inbox.</p>
<form onsubmit="alert('Replace with your subscription provider form'); return false;">
<input type="email" placeholder="Email" style="width:100%; padding:10px; border-radius:6px;border:1px solid #e6e6e6;margin-bottom:8px;">
<button class="btn" type="submit">SUBSCRIBE</button>
</form>
</div>
</footer>
</div>
<!-- ========== Minimal JS for Slider ========== -->
<script>
(function(){
const slides = document.querySelectorAll('.slide');
const dots = document.querySelectorAll('.dot');
let idx = 0;
function show(i){
slides.forEach((s,si)=> s.classList.toggle('active', si===i));
dots.forEach((d,di)=> d.classList.toggle('active', di===i));
idx = i;
}
// Auto-advance every 5s
let timer = setInterval(()=> {
let next = (idx + 1) % slides.length;
show(next);
}, 5000);
// dot click
dots.forEach(d => d.addEventListener('click', function(){
clearInterval(timer);
show(+this.dataset.index);
// restart timer
timer = setInterval(()=> { show((idx + 1) % slides.length); }, 5000);
}));
})();
</script>
</body>
</html>
