Files
tscb-site/campaign-single.html
2026-03-08 19:45:20 -05:00

677 lines
37 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zxx">
<head>
<!-- Meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="Awaiken">
<!-- Page Title -->
<title>Avenix - Church HTML Template</title>
<!-- Favicon Icon -->
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.png">
<!-- Google Fonts Css-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
<!-- Bootstrap Css -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- SlickNav Css -->
<link href="css/slicknav.min.css" rel="stylesheet">
<!-- Swiper Css -->
<link rel="stylesheet" href="css/swiper-bundle.min.css">
<!-- Font Awesome Icon Css-->
<link href="css/all.css" rel="stylesheet" media="screen">
<!-- Animated Css -->
<link href="css/animate.css" rel="stylesheet">
<!-- Magnific Popup Core Css File -->
<link rel="stylesheet" href="css/magnific-popup.css">
<!-- Mouse Cursor Css File -->
<link rel="stylesheet" href="css/mousecursor.css">
<!-- Audio Css File -->
<link rel="stylesheet" href="css/plyr.css">
<!-- Main Custom Css -->
<link href="css/custom.css" rel="stylesheet" media="screen">
</head>
<body>
<!-- Preloader Start -->
<div class="preloader">
<div class="loading-container">
<div class="loading"></div>
<div id="loading-icon"><img src="images/loader.svg" alt=""></div>
</div>
</div>
<!-- Preloader End -->
<!-- Header Start -->
<header class="main-header">
<div class="header-sticky">
<nav class="navbar navbar-expand-lg">
<div class="container">
<!-- Logo Start -->
<a class="navbar-brand" href="./">
<img src="images/logo.svg" alt="Logo">
</a>
<!-- Logo End -->
<!-- Main Menu Start -->
<div class="collapse navbar-collapse main-menu">
<div class="nav-menu-wrapper">
<ul class="navbar-nav mr-auto" id="menu">
<li class="nav-item submenu"><a class="nav-link" href="./">Home</a>
<ul class="sub-menu">
<li class="nav-item"><a class="nav-link" href="index.html">Home - Image</a></li>
<li class="nav-item"><a class="nav-link" href="index-video.html">Home -
Video</a></li>
<li class="nav-item"><a class="nav-link" href="index-slider.html">Home -
Slider</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="about.html">About Us</a></li>
<li class="nav-item"><a class="nav-link" href="service.html">Services</a></li>
<li class="nav-item submenu"><a class="nav-link" href="#">Pages</a>
<ul>
<li class="nav-item"><a class="nav-link" href="service-single.html">Service
Details</a></li>
<li class="nav-item"><a class="nav-link" href="blog.html">Blog</a></li>
<li class="nav-item"><a class="nav-link" href="blog-single.html">Blog
Details</a></li>
<li class="nav-item"><a class="nav-link" href="sermons.html">Sermons</a></li>
<li class="nav-item"><a class="nav-link" href="sermons-single.html">Sermons
Details</a></li>
<li class="nav-item"><a class="nav-link" href="campaign.html">Campaigns</a></li>
<li class="nav-item"><a class="nav-link" href="campaign-single.html">Campaign
Details</a></li>
<li class="nav-item"><a class="nav-link" href="ministries.html">Ministries</a>
</li>
<li class="nav-item"><a class="nav-link" href="ministry-single.html">Ministries
Details</a></li>
<li class="nav-item"><a class="nav-link" href="pastor.html">pastor</a></li>
<li class="nav-item"><a class="nav-link" href="gallery.html">Gallery</a></li>
<li class="nav-item"><a class="nav-link" href="404.html">404</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="contact.html">Contact Us</a></li>
<li class="nav-item highlighted-menu"><a class="nav-link" href="#">donate now</a></li>
</ul>
</div>
<!-- Lets Start Button Start -->
<div class="header-btn d-inline-flex">
<a href="#" class="btn-default">donate now</a>
</div>
<!-- Lets Start Button End -->
</div>
<!-- Main Menu End -->
<div class="navbar-toggle"></div>
</div>
</nav>
<div class="responsive-menu"></div>
</div>
</header>
<!-- Header End -->
<!-- Page Header Start -->
<div class="page-header">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-12">
<!-- Page Header Box Start -->
<div class="page-header-box">
<h1 class="text-anime-style-2" data-cursor="-opaque">Kids Sports Activity</h1>
<nav class="wow fadeInUp">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="./">home</a></li>
<li class="breadcrumb-item"><a href="./">campaign</a></li>
<li class="breadcrumb-item active" aria-current="page">kids sports activity</li>
</ol>
</nav>
</div>
<!-- Page Header Box End -->
</div>
</div>
</div>
</div>
<!-- Page Header End -->
<!-- Page Campaign Single Start -->
<div class="page-campaign-single">
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="campaign-single-content">
<!-- Campaign Featured Image Start -->
<div class="campaign-featured-image">
<figure class="image-anime reveal">
<img src="images/campaign-img-1.jpg" alt="">
</figure>
</div>
<!-- Campaign Featured Image End -->
<!-- Campaign Donate Box Start -->
<div class="campaign-donate-box">
<!-- Skills Progress Bar Start -->
<div class="skills-progress-bar">
<!-- Skill Item Start -->
<div class="skillbar" data-percent="68%">
<div class="skill-progress">
<div class="count-bar"></div>
</div>
</div>
<!-- Skill Item End -->
</div>
<!-- Skills Progress Bar End -->
<!-- Campaign Donate Content Start -->
<div class="campaign-donate-content">
<div class="campaign-donate-item campaign-raised">
<h3>$<span class="counter">9,870</span></h3>
<p>raised</p>
</div>
<div class="campaign-donate-item campaign-donations">
<h3>$<span class="counter">00</span></h3>
<p>donations</p>
</div>
<div class="campaign-donate-item campaign-goal">
<h3>$<span class="counter">3000</span></h3>
<p>goal</p>
</div>
</div>
<!-- Campaign Donate Content End -->
</div>
<!-- Campaign Donate Box End -->
<!-- Campaign Entry Content Start -->
<div class="campaign-entry">
<h2 class="text-anime-style-2" data-cursor="-opaque">Donate for Kid's Sports Activities
Today!</h2>
<p class="wow fadeInUp" data-wow-delay="0.2s">Support our kids by donating to our church's
sports activities program. Your contributions provide equipment, uniforms, and
opportunities for children to participate in healthy, fun, and team-building activities.
Help us promote fitness, teamwork, and community spirit among our youth. Every donation
makes a difference. Thank you for your generosity!</p>
<p class="wow fadeInUp" data-wow-delay="0.4s">we can ensure every child has the chance to
participate and grow. Every donation, big or small, makes a significant impact. Thank
you for helping us nurture the physical and spiritual well-being of our children!</p>
<ul class="wow fadeInUp" data-wow-delay="0.6s">
<li>Help kids participate in fun, healthy activities.</li>
<li>Teach kids valuable skills in cooperation.</li>
<li>Your donations fund essential sports gear.</li>
<li>Strengthen the bonds within our church.</li>
<li>Encourage physical activity and a healthy lifestyle.</li>
<li>Ensure all children have the opportunity to join.</li>
</ul>
<!-- Campaign Entry Gallery Start -->
<div class="campaign-entry-gallery">
<div class="row gallery-items">
<div class="col-lg-3 col-6">
<!-- Image gallery start -->
<div class="campaign-gallery wow fadeInUp" data-wow-delay="0.2s"
data-cursor-text="View">
<a href="images/campaign-gallery-1.jpg">
<figure class="image-anime">
<img src="images/campaign-gallery-1.jpg" alt="img">
</figure>
</a>
</div>
<!-- Image gallery end -->
</div>
<div class="col-lg-3 col-6">
<!-- Image gallery start -->
<div class="campaign-gallery wow fadeInUp" data-wow-delay="0.4s"
data-cursor-text="View">
<a href="images/campaign-gallery-2.jpg">
<figure class="image-anime">
<img src="images/campaign-gallery-2.jpg" alt="img">
</figure>
</a>
</div>
<!-- Image gallery end -->
</div>
<div class="col-lg-3 col-6">
<!-- Image gallery start -->
<div class="campaign-gallery wow fadeInUp" data-wow-delay="0.6s"
data-cursor-text="View">
<a href="images/campaign-gallery-3.jpg">
<figure class="image-anime">
<img src="images/campaign-gallery-3.jpg" alt="img">
</figure>
</a>
</div>
<!-- Image gallery end -->
</div>
<div class="col-lg-3 col-6">
<!-- Image gallery start -->
<div class="campaign-gallery wow fadeInUp" data-wow-delay="0.8s"
data-cursor-text="View">
<a href="images/campaign-gallery-4.jpg">
<figure class="image-anime">
<img src="images/campaign-gallery-4.jpg" alt="img">
</figure>
</a>
</div>
<!-- Image gallery end -->
</div>
</div>
</div>
<!-- Campaign Entry Gallery End -->
</div>
<!-- Campaign Entry Content End -->
<!-- Campaign Single Faqs Start -->
<div class="campaign-single-faqs">
<!-- Section Title Start -->
<div class="section-title">
<h2 class="text-anime-style-2" data-cursor="-opaque">Our Core Value</h2>
</div>
<!-- Section Title End -->
<!-- Core Value FAQ Accordion Start -->
<div class="core-value-faqs-accordion" id="accordion">
<!-- FAQ Item Start -->
<div class="accordion-item wow fadeInUp">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseOne" aria-expanded="true"
aria-controls="collapseOne">
Why is faith a core value?
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show"
aria-labelledby="headingOne" data-bs-parent="#accordion">
<div class="accordion-body">
<p>We demonstrate love through compassionate service, supportive
relationships, and inclusive community practices.</p>
</div>
</div>
</div>
<!-- FAQ Item End -->
<!-- FAQ Item Start -->
<div class="accordion-item wow fadeInUp" data-wow-delay="0.25s">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#collapseTwo"
aria-expanded="false" aria-controls="collapseTwo">
How does the church demonstrate love?
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse"
aria-labelledby="headingTwo" data-bs-parent="#accordion">
<div class="accordion-body">
<p>We demonstrate love through compassionate service, supportive
relationships, and inclusive community practices.</p>
</div>
</div>
</div>
<!-- FAQ Item End -->
<!-- FAQ Item Start -->
<div class="accordion-item wow fadeInUp" data-wow-delay="0.5s">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#collapseThree"
aria-expanded="false" aria-controls="collapseThree">
How is community fostered within the church?
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse"
aria-labelledby="headingThree" data-bs-parent="#accordion">
<div class="accordion-body">
<p>We demonstrate love through compassionate service, supportive
relationships, and inclusive community practices.</p>
</div>
</div>
</div>
<!-- FAQ Item End -->
<!-- FAQ Item Start -->
<div class="accordion-item wow fadeInUp" data-wow-delay="0.75s">
<h2 class="accordion-header" id="headingfour">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#collapsefour"
aria-expanded="false" aria-controls="collapsefour">
What is the importance of spiritual growth?
</button>
</h2>
<div id="collapsefour" class="accordion-collapse collapse"
aria-labelledby="headingfour" data-bs-parent="#accordion">
<div class="accordion-body">
<p>We demonstrate love through compassionate service, supportive
relationships, and inclusive community practices.</p>
</div>
</div>
</div>
<!-- FAQ Item End -->
<!-- FAQ Item Start -->
<div class="accordion-item wow fadeInUp" data-wow-delay="1s">
<h2 class="accordion-header" id="headingfive">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#collapsefive"
aria-expanded="false" aria-controls="collapsefive">
How do these values shape church activities?
</button>
</h2>
<div id="collapsefive" class="accordion-collapse collapse"
aria-labelledby="headingfive" data-bs-parent="#accordion">
<div class="accordion-body">
<p>We demonstrate love through compassionate service, supportive
relationships, and inclusive community practices.</p>
</div>
</div>
</div>
<!-- FAQ Item End -->
</div>
<!-- Core Value FAQ Accordion End -->
</div>
<!-- Service Single Faqs End -->
<!-- Sermons Social Sharing Start -->
<div class="sermons-social-sharing wow fadeInUp" data-wow-delay="0.5s">
<div class="sermons-social-sharing-title">
<h3>Share This Sermon :</h3>
</div>
<div class="sermons-social-sharing-list">
<ul>
<li><a href="#"><i class="fa-brands fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fa-brands fa-linkedin-in"></i></a></li>
<li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
<li><a href="#"><i class="fa-brands fa-x-twitter"></i></a></li>
</ul>
</div>
</div>
<!-- Sermons Social Sharing End -->
</div>
</div>
<div class="col-lg-4">
<div class="campaign-single-sidebar">
<div class="campaign-sidebar-title">
<h3 class="wow fadeInUp"><span>give</span> today</h3>
<p class="wow fadeInUp" data-wow-delay="0.25s">Every time you give to find Faith Church,
you're helping fulfill the mission.</p>
</div>
<div class="campaign-donate-form">
<form id="donateForm" action="#" method="POST">
<div class="campaign-donate-value">
<div class="form-group mb-4">
<input type="text" name="text" class="form-control" id="text"
placeholder="donate now ..." required>
<div class="help-block with-errors"></div>
</div>
<fieldset class="donate-value-box">
<div class="donate-value">
<input type="radio" id="value1" name="value" value="value1" checked>
<label for="value1">$ 100.00</label>
</div>
<div class="donate-value">
<input type="radio" id="value2" name="value" value="value2">
<label for="value2">$ 200.00</label>
</div>
<div class="donate-value">
<input type="radio" id="value3" name="value" value="value3">
<label for="value3">$ 300.00</label>
</div>
<div class="donate-value">
<input type="radio" id="value4" name="value" value="value4" checked>
<label for="value4">$ 400.00</label>
</div>
<div class="donate-value">
<input type="radio" id="value5" name="value" value="value5">
<label for="value5">$ 500.00</label>
</div>
<div class="donate-value">
<input type="radio" id="value6" name="value" value="value6">
<label for="value6">$ 600.00</label>
</div>
</fieldset>
</div>
<div class="donate-payment-method">
<div class="payment-method-title">
<h3>select payment method</h3>
</div>
<div class="donate-payment-type">
<div class="payment-method">
<input type="radio" id="test" name="payment" value="Test" checked>
<label for="test">test donation</label>
</div>
<div class="payment-method">
<input type="radio" id="Offline" name="payment" value="Offline">
<label for="Offline">offline donation</label>
</div>
</div>
</div>
<div class="donar-personal-info">
<div class="row">
<div class="form-group col-6 mb-3">
<input type="text" name="name" class="form-control" id="fname"
placeholder="First Name" required>
</div>
<div class="form-group col-6 mb-3">
<input type="text" name="name" class="form-control" id="lname"
placeholder="Last Name" required>
</div>
<div class="form-group mb-3">
<input type="email" name="email" class="form-control" id="email"
placeholder="Email Address" required>
</div>
<div class="donar-personal-form-account">
<div class="donar-personal-create-account">
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1">create account</label>
</div>
<div class="donar-personal-login-account">
<P>Already Have Account? <a href="#">login</a></P>
</div>
</div>
</div>
</div>
<div class="form-group-btn">
<button type="submit" class="btn-default">donate now</button>
<div id="msgSubmit" class="h3 hidden"></div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Page Campaign Single End -->
<!-- Footer Start -->
<footer class="main-footer">
<div class="container">
<div class="row">
<div class="col-lg-4">
<!-- About Footer Start -->
<div class="about-footer">
<!-- Footer Logo Start -->
<div class="footer-logo">
<img src="images/footer-logo.svg" alt="">
</div>
<!-- Footer Logo End -->
<!-- About Footer Content Start -->
<div class="about-footer-content">
<p>Lorem Ipsum is simply dummy text of printing and typesetting industry. Lorem Ipsum has
been the industry's.</p>
</div>
<!-- Footer Social Links Start -->
<div class="footer-social-links">
<ul>
<li><a href="#"><i class="fa-brands fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fa-brands fa-x-twitter"></i></a></li>
<li><a href="#"><i class="fa-brands fa-linkedin-in"></i></a></li>
<li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
</ul>
</div>
<!-- Footer Social Links End -->
</div>
<!-- About Footer End -->
</div>
<div class="col-lg-2 col-md-3 col-6">
<!-- About Links Start -->
<div class="footer-links">
<h3>quick links</h3>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">our chruch</a></li>
<li><a href="#">services</a></li>
<li><a href="#">event</a></li>
<li><a href="#">news</a></li>
</ul>
</div>
<!-- About Links End -->
</div>
<div class="col-lg-3 col-md-4 col-6">
<!-- About Links Start -->
<div class="footer-links">
<h3>our services</h3>
<ul>
<li><a href="#">support groups</a></li>
<li><a href="#">special events</a></li>
<li><a href="#">online services</a></li>
<li><a href="#">pastoral care</a></li>
<li><a href="#">sunday worship</a></li>
</ul>
</div>
<!-- About Links End -->
</div>
<div class="col-lg-3 col-md-5">
<!-- About Links Start -->
<div class="footer-contact">
<h3>contact</h3>
<!-- Footer Contact Details Start -->
<div class="footer-contact-details">
<!-- Footer Info Box Start -->
<div class="footer-info-box">
<div class="icon-box">
<img src="images/icon-phone.svg" alt="">
</div>
<div class="footer-info-box-content">
<p>(+0) 789 345 012</p>
</div>
</div>
<!-- Footer Info Box End -->
<!-- Footer Info Box Start -->
<div class="footer-info-box">
<div class="icon-box">
<img src="images/icon-mail.svg" alt="">
</div>
<div class="footer-info-box-content">
<p>domain@gmail.com</p>
</div>
</div>
<!-- Footer Info Box End -->
<!-- Footer Info Box Start -->
<div class="footer-info-box">
<div class="icon-box">
<img src="images/icon-location.svg" alt="">
</div>
<div class="footer-info-box-content">
<p>24/11 Robert Road,New York,USA</p>
</div>
</div>
<!-- Footer Info Box End -->
</div>
<!-- Footer Contact Details End -->
</div>
<!-- About Links End -->
</div>
</div>
<!-- Footer Copyright Section Start -->
<div class="footer-copyright">
<div class="row align-items-center">
<div class="col-lg-6 col-md-6">
<!-- Footer Copyright Start -->
<div class="footer-copyright-text">
<p>Copyright 2024 Avenix. All Rights Reserved.</p>
</div>
<!-- Footer Copyright End -->
</div>
<div class="col-lg-6 col-md-6">
<!-- Footer Social Link Start -->
<div class="footer-privacy-policy">
<ul>
<li><a href="#">term & condition</a></li>
<li><a href="#">support</a></li>
<li><a href="#">privacy policy</a></li>
</ul>
</div>
<!-- Footer Social Link End -->
</div>
</div>
</div>
<!-- Footer Copyright Section End -->
</div>
</footer>
<!-- Footer End -->
<!-- Jquery Library File -->
<script src="js/jquery-3.7.1.min.js"></script>
<!-- Bootstrap js file -->
<script src="js/bootstrap.min.js"></script>
<!-- Validator js file -->
<script src="js/validator.min.js"></script>
<!-- SlickNav js file -->
<script src="js/jquery.slicknav.js"></script>
<!-- Swiper js file -->
<script src="js/swiper-bundle.min.js"></script>
<!-- Counter js file -->
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.counterup.min.js"></script>
<!-- Magnific js file -->
<script src="js/jquery.magnific-popup.min.js"></script>
<!-- SmoothScroll -->
<script src="js/SmoothScroll.js"></script>
<!-- Parallax js -->
<script src="js/parallaxie.js"></script>
<!-- MagicCursor js file -->
<script src="js/gsap.min.js"></script>
<script src="js/magiccursor.js"></script>
<!-- Text Effect js file -->
<script src="js/SplitText.js"></script>
<script src="js/ScrollTrigger.min.js"></script>
<!-- YTPlayer js File -->
<script src="js/jquery.mb.YTPlayer.min.js"></script>
<!-- Audio js File -->
<script src="js/plyr.js"></script>
<!-- Wow js file -->
<script src="js/wow.js"></script>
<!-- Main Custom js file -->
<script src="js/function.js"></script>
</body>
</html>