Snippets library

Browse Snippets
Claim your Free Profile
Add Snippet
Home / Widgets / church website
Duplicate Snippet

Embed Snippet on Your Site

church website

Gift Mukhwana
<10
Code Preview
Comments
html
<!DOCTYPE html>
<html lang="en">
	<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1"/>
<title>Your Church Name – Your Tagline Here</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Raleway:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --gold:#c8a96e;
  --gold-light:#e8d5a8;
  --dark:#0a0a0a;
  --dark2:#111;
  --dark3:#1a1a1a;
  --white:#fff;
  --gray:#888;
  --text:#ccc;
}
html{scroll-behavior:smooth}
body{font-family:'Raleway',sans-serif;background:var(--dark);color:var(--white);overflow-x:hidden}
/* ===== NAV ===== */
nav{position:fixed;top:0;width:100%;z-index:999;background:rgba(10,10,10,0.95);backdrop-filter:blur(10px);border-bottom:1px solid rgba(200,169,110,0.2);padding:16px 40px;display:flex;align-items:center;justify-content:space-between}
.nav-logo img{height:50px}
.nav-logo span{font-family:'Playfair Display',serif;font-size:1.4rem;font-weight:700;color:var(--gold);letter-spacing:2px}
.nav-links{display:flex;gap:36px;list-style:none}
.nav-links a{color:var(--text);text-decoration:none;font-size:.85rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;transition:color .3s}
.nav-links a:hover{color:var(--gold)}
.nav-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer}
.nav-toggle span{width:26px;height:2px;background:var(--white);display:block;transition:.3s}
/* ===== HERO ===== */
.hero{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:100px 60px 60px;position:relative;overflow:hidden;background:linear-gradient(135deg,#0a0a0a 60%,#12100a)}
.hero::before{content:'';position:absolute;inset:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800"><circle cx="600" cy="200" r="300" fill="rgba(200,169,110,0.04)"/><circle cx="100" cy="600" r="200" fill="rgba(200,169,110,0.03)"/></svg>') no-repeat center/cover;pointer-events:none}
.hero-text{z-index:2}
.hero-text .eyebrow{font-size:.75rem;font-weight:700;letter-spacing:5px;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.hero-text h1{font-family:'Playfair Display',serif;font-size:clamp(3rem,6vw,6rem);font-weight:900;line-height:1.05;margin-bottom:24px;color:var(--white)}
.hero-text h1 span{color:var(--gold)}
.hero-meta{display:flex;flex-direction:column;gap:8px;margin-bottom:36px}
.hero-meta p{font-size:.9rem;color:var(--gray);letter-spacing:1px}
.hero-meta p strong{color:var(--gold);font-weight:600}
.btn-primary{display:inline-block;background:var(--gold);color:var(--dark);padding:15px 38px;font-size:.85rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;text-decoration:none;border:2px solid var(--gold);transition:all .3s}
.btn-primary:hover{background:transparent;color:var(--gold)}
.hero-image{position:relative;z-index:2;display:flex;justify-content:center}
.hero-image .convener-img{width:100%;max-width:380px;object-fit:cover;filter:grayscale(20%)}
.hero-image .signature{position:absolute;bottom:40px;left:0;width:140px;opacity:.8}
.convener-tag{margin-top:12px;text-align:center;font-size:.7rem;letter-spacing:4px;text-transform:uppercase;color:var(--gold)}
.hero-socials{display:flex;gap:14px;justify-content:center;margin-top:14px}
.hero-socials a{color:var(--gray);font-size:.8rem;text-decoration:none;border:1px solid #333;padding:6px 12px;transition:all .3s;letter-spacing:1px}
.hero-socials a:hover{border-color:var(--gold);color:var(--gold)}
/* ===== SECTION SHARED ===== */
section{padding:100px 60px}
.section-eyebrow{font-size:.7rem;font-weight:700;letter-spacing:5px;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.section-title{font-family:'Playfair Display',serif;font-size:clamp(2rem,4vw,3.5rem);font-weight:700;line-height:1.15;color:var(--white);margin-bottom:28px}
.divider{width:60px;height:2px;background:var(--gold);margin:20px 0 30px}
/* ===== ABOUT ===== */
.about{background:var(--dark2)}
.about-inner{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;max-width:1200px;margin:auto}
.about-img img{width:100%;object-fit:cover}
.about-text p{color:var(--text);line-height:1.9;font-size:.95rem;margin-bottom:24px}
.btn-outline{display:inline-block;border:2px solid var(--gold);color:var(--gold);padding:13px 34px;font-size:.8rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;text-decoration:none;transition:all .3s}
.btn-outline:hover{background:var(--gold);color:var(--dark)}
/* ===== PILLARS ===== */
.pillars{background:var(--dark3);text-align:center}
.pillars-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;max-width:1000px;margin:60px auto 0}
.pillar-card{border:1px solid rgba(200,169,110,0.2);padding:50px 30px;position:relative;transition:border-color .3s}
.pillar-card:hover{border-color:var(--gold)}
.pillar-icon{font-size:2.5rem;margin-bottom:20px}
.pillar-card h3{font-family:'Playfair Display',serif;font-size:1.4rem;color:var(--gold);margin-bottom:14px}
.pillar-card p{color:var(--text);font-size:.88rem;line-height:1.8}
/* ===== BUSINESS FORUM ===== */
.forum{background:linear-gradient(135deg,#0e0c06,#1a1505);position:relative;overflow:hidden}
.forum::before{content:'BUSINESS FORUM';position:absolute;font-family:'Playfair Display',serif;font-size:clamp(5rem,12vw,14rem);font-weight:900;color:rgba(200,169,110,0.04);top:50%;transform:translateY(-50%);white-space:nowrap;pointer-events:none;left:0}
.forum-inner{max-width:800px;margin:auto;position:relative;z-index:2}
.forum-badge{display:inline-block;background:var(--gold);color:var(--dark);font-size:.7rem;font-weight:700;letter-spacing:4px;text-transform:uppercase;padding:6px 18px;margin-bottom:24px}
.forum-details{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:48px}
.forum-detail{border-left:2px solid var(--gold);padding-left:20px}
.forum-detail .label{font-size:.7rem;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.forum-detail p{color:var(--white);font-size:.95rem}
/* ===== COUNTDOWN ===== */
.countdown-section{background:var(--dark);text-align:center;padding:80px 60px}
.countdown-title{font-family:'Playfair Display',serif;font-size:2rem;margin-bottom:50px;color:var(--white)}
#countdown{display:flex;justify-content:center;gap:40px;flex-wrap:wrap}
.count-box{text-align:center;min-width:100px}
.count-number{font-family:'Playfair Display',serif;font-size:clamp(3rem,6vw,5rem);font-weight:900;color:var(--gold);line-height:1;display:block}
.count-label{font-size:.65rem;letter-spacing:4px;text-transform:uppercase;color:var(--gray);margin-top:8px;display:block}
.count-sep{font-family:'Playfair Display',serif;font-size:4rem;color:rgba(200,169,110,0.3);align-self:center;padding-bottom:20px}
/* ===== SPEAKERS ===== */
.speakers{background:var(--dark2)}
.speakers .section-title{text-align:center}
.speakers .divider{margin:20px auto 60px}
.speakers-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px;max-width:1200px;margin:auto}
.speaker-card{text-align:center;cursor:pointer;group:true}
.speaker-card .img-wrap{width:100%;aspect-ratio:4/5;overflow:hidden;margin-bottom:16px;position:relative}
.speaker-card .img-wrap img{width:100%;height:100%;object-fit:cover;filter:grayscale(40%);transition:all .4s}
.speaker-card:hover .img-wrap img{filter:grayscale(0);transform:scale(1.05)}
.speaker-card .img-wrap::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,10,.6) 0%,transparent 60%)}
.speaker-card h4{font-family:'Playfair Display',serif;font-size:1rem;color:var(--white);margin-bottom:6px}
.speaker-card p{font-size:.75rem;color:var(--gold);letter-spacing:1px}
.speaker-socials{display:flex;justify-content:center;gap:12px;margin-top:10px}
.speaker-socials a{color:var(--gray);font-size:.7rem;letter-spacing:1px;text-decoration:none;transition:color .3s}
.speaker-socials a:hover{color:var(--gold)}
/* ===== TESTIMONIALS ===== */
.testimonials{background:var(--dark3);overflow:hidden}
.testimonials .section-title{text-align:center;margin-bottom:60px}
.testimonials .divider{margin:20px auto 60px}
.testi-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:1100px;margin:auto}
.testi-card{border:1px solid rgba(200,169,110,0.15);padding:40px;position:relative}
.testi-card::before{content:'"';font-family:'Playfair Display',serif;font-size:6rem;color:var(--gold);opacity:.2;position:absolute;top:-10px;left:20px;line-height:1}
.testi-card p{color:var(--text);line-height:1.9;font-size:.9rem;font-style:italic;margin-bottom:24px}
.testi-author{display:flex;align-items:center;gap:14px}
.testi-author img{width:50px;height:50px;border-radius:50%;object-fit:cover;border:2px solid var(--gold)}
.testi-author strong{display:block;color:var(--white);font-size:.9rem}
.testi-author span{font-size:.75rem;color:var(--gold)}
/* ===== FAQ ===== */
.faq{background:var(--dark);max-width:900px;margin:auto;padding:100px 60px}
.faq .section-title{margin-bottom:50px}
.faq-item{border-bottom:1px solid #222;padding:28px 0;cursor:pointer}
.faq-question{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:.95rem;color:var(--white);letter-spacing:.5px}
.faq-question span{color:var(--gold);font-size:1.4rem;transition:transform .3s;flex-shrink:0;margin-left:20px}
.faq-answer{color:var(--text);font-size:.88rem;line-height:1.8;margin-top:0;max-height:0;overflow:hidden;transition:max-height .4s ease,margin-top .3s}
.faq-item.open .faq-answer{max-height:200px;margin-top:16px}
.faq-item.open .faq-question span{transform:rotate(45deg)}
/* ===== NEWSLETTER ===== */
.newsletter{background:var(--dark2);text-align:center;padding:100px 60px}
.newsletter h2{font-family:'Playfair Display',serif;font-size:2.5rem;margin-bottom:14px}
.newsletter p{color:var(--gray);margin-bottom:40px;font-size:.9rem}
.subscribe-form{display:flex;max-width:480px;margin:auto;gap:0}
.subscribe-form input{flex:1;padding:16px 20px;background:#111;border:1px solid #333;border-right:none;color:var(--white);font-family:'Raleway',sans-serif;font-size:.85rem;outline:none}
.subscribe-form input::placeholder{color:#555}
.subscribe-form button{padding:16px 30px;background:var(--gold);color:var(--dark);border:none;font-family:'Raleway',sans-serif;font-weight:700;font-size:.8rem;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:background .3s}
.subscribe-form button:hover{background:var(--gold-light)}
.no-spam{font-size:.75rem;color:#444;margin-top:12px}
/* ===== FOOTER ===== */
footer{background:#070707;padding:80px 60px 30px;border-top:1px solid rgba(200,169,110,0.15)}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:60px;margin-bottom:60px}
.footer-brand .logo{font-family:'Playfair Display',serif;font-size:1.8rem;color:var(--gold);font-weight:700;margin-bottom:16px}
.footer-brand p{color:var(--gray);font-size:.85rem;line-height:1.8;margin-bottom:20px}
.footer-socials{display:flex;gap:12px}
.footer-socials a{width:38px;height:38px;border:1px solid #333;display:flex;align-items:center;justify-content:center;color:var(--gray);text-decoration:none;font-size:.7rem;font-weight:700;transition:all .3s}
.footer-socials a:hover{border-color:var(--gold);color:var(--gold)}
.footer-col h4{font-size:.7rem;letter-spacing:4px;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:12px}
.footer-col a{color:var(--gray);text-decoration:none;font-size:.85rem;transition:color .3s}
.footer-col a:hover{color:var(--gold)}
.footer-col .contact-item{color:var(--gray);font-size:.85rem;margin-bottom:10px}
.footer-bottom{border-top:1px solid #1a1a1a;padding-top:30px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.footer-bottom p{color:#444;font-size:.78rem}
.footer-bottom-links{display:flex;gap:20px}
.footer-bottom-links a{color:#444;text-decoration:none;font-size:.78rem;transition:color .3s}
.footer-bottom-links a:hover{color:var(--gold)}
.partner-cta{background:var(--gold);color:var(--dark);text-align:center;padding:60px;margin-top:-1px}
.partner-cta h3{font-family:'Playfair Display',serif;font-size:2rem;margin-bottom:24px}
.partner-cta .cta-btns{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}
.partner-cta .cta-btns a{padding:14px 36px;font-size:.8rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;text-decoration:none;border:2px solid var(--dark);color:var(--dark);transition:all .3s}
.partner-cta .cta-btns a:hover{background:var(--dark);color:var(--gold)}
/* ===== MOBILE ===== */
@media(max-width:768px){
  nav{padding:14px 20px}
  .nav-links{display:none;flex-direction:column;position:absolute;top:100%;left:0;width:100%;background:#0a0a0a;padding:20px;gap:20px}
  .nav-links.open{display:flex}
  .nav-toggle{display:flex}
  .hero{grid-template-columns:1fr;padding:100px 24px 60px;text-align:center}
  .hero-image{order:-1}
  .hero-image .convener-img{max-width:260px}
  section{padding:70px 24px}
  .about-inner{grid-template-columns:1fr;gap:40px}
  .pillars-grid{grid-template-columns:1fr}
  .forum-details{grid-template-columns:1fr}
  .testi-grid{grid-template-columns:1fr}
  .speakers-grid{grid-template-columns:repeat(2,1fr)}
  .footer-top{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;text-align:center}
  .subscribe-form{flex-direction:column}
  .subscribe-form input,.subscribe-form button{width:100%}
  .subscribe-form input{border-right:1px solid #333;border-bottom:none}
  .partner-cta{padding:40px 24px}
  .faq{padding:70px 24px}
  #countdown{gap:20px}
}
/* ===== FADE IN ANIMATION ===== */
.fade-in{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}
</style>
</head>
<body>
<!-- NAV -->
<nav>
  <div class="nav-logo">
    <span>YOUR CHURCH</span>
    <!-- Or use an img tag: <img src="your-logo.png" alt="Logo"> -->
  </div>
  <ul class="nav-links" id="navLinks">
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About Us</a></li>
    <li><a href="#speakers">Speakers</a></li>
    <li><a href="#faq">FAQs</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
  <div class="nav-toggle" id="navToggle">
    <span></span><span></span><span></span>
  </div>
</nav>
<!-- HERO -->
<section class="hero" id="home">
  <div class="hero-text fade-in">
    <p class="eyebrow">Welcome To</p>
    <h1>Your Event<br/><span>Name 2026</span></h1>
    <div class="hero-meta">
      <p><strong>Dates:</strong> 1st August – 5th August</p>
      <p><strong>Venue:</strong> Your Event Venue</p>
      <p><strong>City, Country</strong></p>
    </div>
    <a href="#" class="btn-primary">Register Online</a>
  </div>
  <div class="hero-image fade-in" style="animation-delay:.2s">
    <!-- Replace src with your convener/pastor image -->
    <div style="width:340px;height:420px;background:linear-gradient(160deg,#1a1a12,#2a2510);border:1px solid rgba(200,169,110,0.2);display:flex;align-items:center;justify-content:center;">
      <span style="color:#444;font-size:.8rem;letter-spacing:2px;text-transform:uppercase">Convener Photo</span>
    </div>
    <p class="convener-tag">Convener</p>
    <div class="hero-socials">
      <a href="#">FB</a>
      <a href="#">IG</a>
      <a href="#">TW</a>
      <a href="#">YT</a>
    </div>
  </div>
</section>
<!-- ABOUT -->
<section class="about" id="about">
  <div class="about-inner">
    <div class="about-img fade-in">
      <!-- Replace with your image -->
      <div style="width:100%;height:400px;background:linear-gradient(135deg,#1a1508,#2a2010);border:1px solid rgba(200,169,110,0.15);display:flex;align-items:center;justify-content:center;">
        <span style="color:#444;font-size:.8rem;letter-spacing:2px;text-transform:uppercase">About Image</span>
      </div>
    </div>
    <div class="about-text fade-in">
      <p class="section-eyebrow">ABOUT</p>
      <h2 class="section-title">About Your Event / Church</h2>
      <div class="divider"></div>
      <p>Replace this with your church or event description. Share your mission, your vision, and what makes your gathering unique. Keep it authentic and inspiring for your audience.</p>
      <p>Add another paragraph here about your history, your values, or what attendees can expect from this event.</p>
      <a href="#" class="btn-outline">Learn More</a>
    </div>
  </div>
</section>
<!-- PILLARS -->
<section class="pillars">
  <p class="section-eyebrow" style="text-align:center">OUR FOUNDATION</p>
  <h2 class="section-title" style="text-align:center;max-width:500px;margin:auto">What Are Our Core Pillars?</h2>
  <div class="pillars-grid">
    <div class="pillar-card fade-in">
      <div class="pillar-icon">📖</div>
      <h3>The Word</h3>
      <p>Replace this with a description of your first pillar. Explain what it means to your church or event and how it shapes everything you do.</p>
    </div>
    <div class="pillar-card fade-in">
      <div class="pillar-icon">🙏</div>
      <h3>Worship</h3>
      <p>Replace this with a description of your second pillar. Describe your worship culture and what people can expect during your gatherings.</p>
    </div>
    <div class="pillar-card fade-in">
      <div class="pillar-icon">✝️</div>
      <h3>Prayer</h3>
      <p>Replace this with a description of your third pillar. Share how prayer is central to your community and how it underpins all that you do.</p>
    </div>
  </div>
</section>
<!-- BUSINESS FORUM / SPECIAL EVENT -->
<section class="forum">
  <div class="forum-inner fade-in">
    <span class="forum-badge">Special Event</span>
    <h2 class="section-title">Get the Best Value at the<br/>Special Forum 2026</h2>
    <p style="color:var(--text);line-height:1.8;font-size:.95rem">Replace this with a description of your special event, workshop, or forum. Explain who it's for, what will happen, and why people should attend.</p>
    <div class="forum-details">
      <div class="forum-detail">
        <p class="label">Date</p>
        <p>1st August, 2026</p>
      </div>
      <div class="forum-detail">
        <p class="label">Time</p>
        <p>8:00 AM – 7:00 PM</p>
      </div>
      <div class="forum-detail">
        <p class="label">Venue</p>
        <p>Your Venue Name</p>
      </div>
      <div class="forum-detail">
        <p class="label">Location</p>
        <p>Your Venue Area / Zone</p>
      </div>
    </div>
  </div>
</section>
<!-- COUNTDOWN -->
<section class="countdown-section">
  <h2 class="countdown-title">Countdown Until <span style="color:var(--gold)">Your Event 2026</span></h2>
  <div id="countdown">
    <div class="count-box"><span class="count-number" id="days">000</span><span class="count-label">Days</span></div>
    <span class="count-sep">:</span>
    <div class="count-box"><span class="count-number" id="hours">00</span><span class="count-label">Hours</span></div>
    <span class="count-sep">:</span>
    <div class="count-box"><span class="count-number" id="minutes">00</span><span class="count-label">Minutes</span></div>
    <span class="count-sep">:</span>
    <div class="count-box"><span class="count-number" id="seconds">00</span><span class="count-label">Seconds</span></div>
  </div>
</section>
<!-- SPEAKERS -->
<section class="speakers" id="speakers">
  <p class="section-eyebrow" style="text-align:center">FEATURED</p>
  <h2 class="section-title">Speakers At Your Event 2026</h2>
  <div class="divider"></div>
  <div class="speakers-grid">
    <!-- Speaker cards – replace name, role, and photo for each -->
    <div class="speaker-card fade-in">
      <div class="img-wrap" style="background:#1a1a12;display:flex;align-items:center;justify-content:center;"><span style="color:#333;font-size:.75rem;letter-spacing:2px">Photo</span></div>
      <h4>Speaker Name</h4>
      <p>Title / Church Name</p>
      <div class="speaker-socials"><a href="#">FB</a><a href="#">IG</a></div>
    </div>
    <div class="speaker-card fade-in">
      <div class="img-wrap" style="background:#1a1a12;display:flex;align-items:center;justify-content:center;"><span style="color:#333;font-size:.75rem;letter-spacing:2px">Photo</span></div>
      <h4>Speaker Name</h4>
      <p>Title / Church Name</p>
      <div class="speaker-socials"><a href="#">FB</a><a href="#">IG</a></div>
    </div>
    <div class="speaker-card fade-in">
      <div class="img-wrap" style="background:#1a1a12;display:flex;align-items:center;justify-content:center;"><span style="color:#333;font-size:.75rem;letter-spacing:2px">Photo</span></div>
      <h4>Speaker Name</h4>
      <p>Title / Church Name</p>
      <div class="speaker-socials"><a href="#">FB</a><a href="#">IG</a></div>
    </div>
    <div class="speaker-card fade-in">
      <div class="img-wrap" style="background:#1a1a12;display:flex;align-items:center;justify-content:center;"><span style="color:#333;font-size:.75rem;letter-spacing:2px">Photo</span></div>
      <h4>Speaker Name</h4>
      <p>Title / Church Name</p>
      <div class="speaker-socials"><a href="#">FB</a><a href="#">IG</a></div>
    </div>
    <div class="speaker-card fade-in">
      <div class="img-wrap" style="background:#1a1a12;display:flex;align-items:center;justify-content:center;"><span style="color:#333;font-size:.75rem;letter-spacing:2px">Photo</span></div>
      <h4>Speaker Name</h4>
      <p>Title / Church Name</p>
      <div class="speaker-socials"><a href="#">FB</a><a href="#">IG</a></div>
    </div>
    <div class="speaker-card fade-in">
      <div class="img-wrap" style="background:#1a1a12;display:flex;align-items:center;justify-content:center;"><span style="color:#333;font-size:.75rem;letter-spacing:2px">Photo</span></div>
      <h4>Speaker Name</h4>
      <p>Title / Church Name</p>
      <div class="speaker-socials"><a href="#">FB</a><a href="#">IG</a></div>
    </div>
  </div>
</section>
<!-- TESTIMONIALS -->
<section class="testimonials">
  <p class="section-eyebrow" style="text-align:center">TESTIMONIALS</p>
  <h2 class="section-title">What People Say</h2>
  <div class="divider"></div>
  <div class="testi-grid">
    <div class="testi-card fade-in">
      <p>Replace this with a real testimonial from someone who attended your event or is part of your church community. Keep it genuine and impactful.</p>
      <div class="testi-author">
        <div style="width:50px;height:50px;border-radius:50%;background:#2a2510;border:2px solid var(--gold);flex-shrink:0"></div>
        <div><strong>Attendee Name</strong><span>City, Country</span></div>
      </div>
    </div>
    <div class="testi-card fade-in">
      <p>Add another testimonial here. A second voice helps build trust and gives visitors a richer picture of what your event means to people.</p>
      <div class="testi-author">
        <div style="width:50px;height:50px;border-radius:50%;background:#2a2510;border:2px solid var(--gold);flex-shrink:0"></div>
        <div><strong>Attendee Name</strong><span>City, Country</span></div>
      </div>
    </div>
  </div>
</section>
<!-- FAQ -->
<section class="faq" id="faq">
  <p class="section-eyebrow">GOT QUESTIONS?</p>
  <h2 class="section-title">Frequently Asked<br/>Questions</h2>
  <div class="divider"></div>
  <div class="faq-item">
    <div class="faq-question">Can I get a refund for my ticket? <span>+</span></div>
    <div class="faq-answer">Replace this with your actual refund policy. Be clear and specific so attendees know what to expect.</div>
  </div>
  <div class="faq-item">
    <div class="faq-question">When and where is the event taking place? <span>+</span></div>
    <div class="faq-answer">Replace with your event dates, venue name, and address. Include any useful directions or parking info.</div>
  </div>
  <div class="faq-item">
    <div class="faq-question">Is there a special event or workshop ticket? <span>+</span></div>
    <div class="faq-answer">Replace with your ticketing details. Explain what different ticket tiers include and how they differ.</div>
  </div>
  <div class="faq-item">
    <div class="faq-question">What topics will be covered at the event? <span>+</span></div>
    <div class="faq-answer">Replace with an overview of your event programme, themes, or teaching focus areas.</div>
  </div>
</section>
<!-- NEWSLETTER -->
<section class="newsletter" id="contact">
  <p class="section-eyebrow">STAY CONNECTED</p>
  <h2>Stay Tuned with<br/><span style="color:var(--gold)">Daily Updates & Prayers</span></h2>
  <p>Subscribe to our newsletter and never miss an update.</p>
  <div class="subscribe-form">
    <input type="email" placeholder="Enter your email address"/>
    <button type="button">Subscribe</button>
  </div>
  <p class="no-spam">No worries, we won't spam your inbox.</p>
</section>
<!-- PARTNER CTA -->
<div class="partner-cta">
  <h3>Join This Move of God by Partnering With Us</h3>
  <div class="cta-btns">
    <a href="#">Become A Partner</a>
    <a href="#">Become A Vendor</a>
  </div>
</div>
<!-- FOOTER -->
<footer>
  <div class="footer-top">
    <div class="footer-brand">
      <div class="logo">YOUR CHURCH</div>
      <p>Replace this with your church or ministry tagline. Keep it short, powerful, and true to your identity.</p>
      <p style="font-size:.8rem;color:#555">Mon – Fri: 8am – 8pm<br/>[email protected]<br/>Your Office Address Here</p>
      <div class="footer-socials" style="margin-top:20px">
        <a href="#">FB</a><a href="#">TW</a><a href="#">IG</a><a href="#">YT</a>
      </div>
    </div>
    <div class="footer-col">
      <h4>Quick Links</h4>
      <ul>
        <li><a href="#">Schedule</a></li>
        <li><a href="#">About Speakers</a></li>
        <li><a href="#">Registration Info</a></li>
        <li><a href="#">Terms & Conditions</a></li>
        <li><a href="#">Privacy Policy</a></li>
      </ul>
    </div>
    <div class="footer-col">
      <h4>Contact</h4>
      <p class="contact-item">📍 Your Address, City</p>
      <p class="contact-item">📧 [email protected]</p>
      <p class="contact-item">📞 +000 000 000 000</p>
    </div>
  </div>
  <div class="footer-bottom">
    <p>© 2026 Your Church Name. All rights reserved.</p>
    <div class="footer-bottom-links">
      <a href="#">Privacy</a>
      <a href="#">Terms</a>
    </div>
  </div>
</footer>
<script>
// Mobile nav toggle
document.getElementById('navToggle').addEventListener('click',()=>{
  document.getElementById('navLinks').classList.toggle('open');
});
// Countdown — SET YOUR EVENT DATE HERE
const eventDate = new Date('2026-08-01T08:00:00');
function updateCountdown(){
  const now = new Date();
  const diff = eventDate - now;
  if(diff<=0){document.getElementById('countdown').innerHTML='<p style="color:var(--gold);font-family:Playfair Display,serif;font-size:2rem">The Event Has Started!</p>';return;}
  const d=Math.floor(diff/86400000);
  const h=Math.floor((diff%86400000)/3600000);
  const m=Math.floor((diff%3600000)/60000);
  const s=Math.floor((diff%60000)/1000);
  document.getElementById('days').textContent=String(d).padStart(3,'0');
  document.getElementById('hours').textContent=String(h).padStart(2,'0');
  document.getElementById('minutes').textContent=String(m).padStart(2,'0');
  document.getElementById('seconds').textContent=String(s).padStart(2,'0');
}
updateCountdown();
setInterval(updateCountdown,1000);
// FAQ accordion
document.querySelectorAll('.faq-item').forEach(item=>{
  item.querySelector('.faq-question').addEventListener('click',()=>{
    const isOpen = item.classList.contains('open');
    document.querySelectorAll('.faq-item').forEach(i=>i.classList.remove('open'));
    if(!isOpen) item.classList.add('open');
  });
});
// Fade in on scroll
const obs = new IntersectionObserver((entries)=>{
  entries.forEach(e=>{if(e.isIntersecting) e.target.classList.add('visible')});
},{threshold:0.15});
document.querySelectorAll('.fade-in').forEach(el=>obs.observe(el));
</script>
</body>
</html>
Hosted with ❤️ by WPCode
1-click Use in WordPress

Comments

Add a Comment

Login to Deploy Snippet