<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Community Builders for Africa | CBA </title>
<!-- Stylesheets -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- Responsive File -->
<link href="css/responsive.css" rel="stylesheet">
<!-- Color File -->
<link href="css/color.css" rel="stylesheet">

<link rel="shortcut icon" href="images/favicon.png" type="image/x-icon">
<link rel="icon" href="images/favicon.png" type="image/x-icon">

<!-- Responsive -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script><![endif]-->
<!--[if lt IE 9]><script src="js/respond.js"></script><![endif]-->

</head>


    <?php include 'header.php'; ?>


    <!-- Banner Section -->
    <section class="banner-section style-three">
        <div class="banner-carousel love-carousel owl-theme owl-carousel" data-options='{"loop": true, "margin": 0, "autoHeight":false, "singleItem" : true, "autoplay": true, "lazyload":true, "nav": true, "dots": true, "autoplay": true, "autoplayTimeout": 6000, "smartSpeed": 300, "responsive":{ "0" :{ "items": "1" }, "768" :{ "items" : "1" } , "1024":{ "items" : "1" }}}'>
            <!-- Slide Item -->
            <div class="slide-item">
				<div class="image-layer lazy-image" data-bg="url('images/slider/home-slider-1.jpg')"></div>
               
                <?php include 'connection.php';
$display =mysqli_query($con,  "select * from site_slide");
while($dis=mysqli_fetch_array($display)){


?>
                <div class="auto-container">
                    <div class="content-box">
						<h2><?php echo $dis['slide1_text1']; ?></h2>
						<div class="text"><?php echo $dis['slide1_text2']; ?> </div>
						<div class="btn-box"><a href="donate.php" class="theme-btn btn-style-one"><span class="btn-title">Donate Now</span></a></div>
					</div>  
				</div>
			</div>

			<!-- Slide Item -->
            <div class="slide-item">
				<div class="image-layer lazy-image" data-bg="url('images/slider/home-slider-2.jpg')"></div>
               

                <div class="auto-container">
                    <div class="content-box">
						<h2><?php echo $dis['slide2_text1']; ?> </h2>
                        <div class="text"><?php echo $dis['slide2_text2']; ?> </div>
						<div class="btn-box"><a href="donate.php" class="theme-btn btn-style-one"><span class="btn-title">Donate Now</span></a></div>
					</div>  
				</div>
			</div>

			<!-- Slide Item -->
            <div class="slide-item">
				<div class="image-layer lazy-image" data-bg="url('images/slider/home-slider-3.jpg')"></div>
             

                <div class="auto-container">
                    <div class="content-box">
						<h2><?php echo $dis['slide3_text1']; ?></h2>
                        <div class="text"><?php echo $dis['slide3_text2']; ?> </div>
						<div class="btn-box"><a href="donate.php" class="theme-btn btn-style-one"><span class="btn-title">Donate Now</span></a></div>
					</div>  
				</div>
			</div>

		</div>
    </section>
<?php } ?>
    <!--End Banner Section -->

	<!--About Section-->
    <section class="about-section">
    	<div class="top-rotten-curve"></div>
        <div class="bottom-rotten-curve"></div>
        <div class="circle-one"></div>
        <div class="circle-two"></div>
        
        <div class="auto-container">
        	<div class="row clearfix">
            	<!--Left Column-->
                <div class="left-column col-lg-6 col-md-12 col-sm-12">
                	<div class="inner">
                    	<div class="sec-title">
                        	<div class="sub-title">We are Community Builders</div>
                            <h2>We Fight Together</h2>
                            <div class="text">Our aim is to build Africa to an extent</div>
							<div class="link-box clearfix"><a href="about.php" class="theme-btn btn-style-one"><span class="btn-title">Read More</span></a></div>
                        </div>
                    </div>
                </div>
                <!--Right Column-->
                <div class="right-column col-lg-6 col-md-12 col-sm-12">
                	<div class="inner">
                    	<div class="row clearfix">
                        	<!--About Feature-->
                            <div class="about-feature col-md-6 col-sm-12">
                            	<div class="inner-box wow fadeInUp">
                                	<div class="icon-box"><span class="flaticon-user"></span></div>
                                    <h4>Become Volunteer</h4>
                                    <a href="contact.php" class="over-link"></a>
                                </div>
                            </div>
                            <!--About Feature-->
                            <div class="about-feature col-md-6 col-sm-12">
                            	<div class="inner-box wow fadeInUp" data-wow-delay="300ms">
                                	<div class="icon-box"><span class="flaticon-heart-2"></span></div>
                                    <h4>Quick Donation</h4>
                                    <a href="donate.php" class="over-link"></a>
                                </div>
                            </div>
                          
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
    </section>
    
    
    
    <!----
    <section class="video-section">
    	<div class="circle-one"></div>
        <div class="circle-two"></div>
        <div class="top-rotten-curve"></div>
        <div class="bottom-rotten-curve"></div>
        
    	<Image Layer
        <div class="image-layer wow slideInLeft" data-wow-delay="500ms"><div class="bg-image lazy-image" data-bg="url('images/background/fluid-image-1.jpg')"></div></div>
        <div class="auto-container">
        	<div class="row clearfix">
            	<!--Text Column
                <div class="text-column col-lg-6 col-md-12 col-sm-12">
                	<div class="inner">
                    	<div class="sec-title">
                        	<div class="sub-title">Watch Video</div>
                            <h2>Watch Our Latest Activities</h2>
                            <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore dolore magna aliqua. enim minim veniam, quis nostrud exercitation ullamco laboris.</div>
							<div class="link-box clearfix"><a href="causes.html" class="theme-btn btn-style-one"><span class="btn-title">Donate Now</span></a></div>
                        </div>
                    </div>
                </div>
                <!--Image Column
                <div class="image-column col-lg-6 col-md-12 col-sm-12">
                	<div class="inner wow fadeInLeft" data-wow-delay="0ms">
                    	<figure class="image-box">
                        	<img class="lazy-image" src="images/resource/image-spacer-for-validation.png" data-src="images/resource/video-image-1.jpg" alt="">
                            <a href="https://www.youtube.com/watch?v=C9rVAbcQH_U" class="lightbox-image over-link"><span class="icon flaticon-play-button"></span></a>
                        </figure>
                    </div>
                </div>
            </div>
        </div>
    </section>
-->
    <!--What We Do Section-->
    <section class="what-we-do">
        <div class="auto-container">
        
        	<div class="sec-title centered">
               
                <h2>Our Causes</h2>
               
            </div>
                        
        	<div class="row clearfix">
            
            	<!--Service Block-->
                <div class="service-block col-xl-4 col-lg-6 col-md-6 col-sm-12">
                	<div class="inner-box">
                    	<div class="icon-box"><span class="flaticon-water-bottle"></span></div>
                        <?php include 'connection.php';
$display =mysqli_query($con,  "select * from cause");
while($dis=mysqli_fetch_array($display)){


?>
                        <h3>SOCIAL WELFARE</h3>
                        <div class="text"> <?php echo $dis['welfare']; ?></div>
                    </div>
                    <div class="link-box"><a href="donate.php" class="theme-btn btn-style-one"><span class="btn-title">Donate</span></a></div>
                </div>
                
                
                
                <!--Service Block-->
                <div class="service-block col-xl-4 col-lg-6 col-md-6 col-sm-12">
                	<div class="inner-box">
                    	<div class="icon-box"><span class="flaticon-medicine"></span></div>
                        <h3>HEALTH</h3>
                        <div class="text"><?php echo $dis['health']; ?></div>
                    </div>
                    <div class="link-box"><a href="donate.php" class="theme-btn btn-style-one"><span class="btn-title">Donate</span></a></div>
                </div>
                
                <!--Service Block-->
                <div class="service-block col-xl-4 col-lg-6 col-md-6 col-sm-12">
                	<div class="inner-box">
                    	<div class="icon-box"><span class="flaticon-reading"></span></div>
                        <h3>EDUCATION</h3>
                        <div class="text"><?php echo $dis['eduaction']; ?></div>
                    </div>
                    <div class="link-box"><a href="donate.php" class="theme-btn btn-style-one"><span class="btn-title">Donate</span></a></div>
                </div>
<?php } ?>

            </div>
            
            <div class="bottom-image"><img class="lazy-image" src="images/resource/image-spacer-for-validation.png" data-src="images/resource/services-bottom-image.png" alt=""></div>
            
        </div>
    </section>

	<!--Mission Vision Section-->
    <section class="mission-vision">
    	<div class="circle-one"></div>
        <div class="circle-two"></div>
        
        <div class="auto-container">
        
        	<div class="mission">
            	<div class="row clearfix">
                	<div class="text-column col-lg-6 col-md-12 col-sm-12">
                    	<div class="inner">
                            <div class="sec-title">
                            <?php include 'connection.php';
$display =mysqli_query($con,  "select * from homepage");
while($dis=mysqli_fetch_array($display)){


?>
                               
                                <h2>Our Mission</h2>
                                <?php $str1 = $dis['mission']; ?>
                                <div class="text"><?php echo substr ($str1 , 0, 100);?></div>
                                <div class="link-box"><a href="mission.php" class="theme-btn btn-style-one"><span class="btn-title">Read More</span></a></div>
                            </div>
                        </div>
                    </div>
                    <div class="image-column col-lg-6 col-md-12 col-sm-12">
                    	<div class="inner">
                            <div class="row clearfix">
                                <div class="image wow fadeInUp" data-wow-delay="0ms"><img class="lazy-image" src="images/resource/image-spacer-for-validation.png" data-src="images/resource/mission-image-1.jpg" alt=""></div>
                                <div class="image wow fadeInDown" data-wow-delay="0ms"><img class="lazy-image" src="images/resource/image-spacer-for-validation.png" data-src="images/resource/mission-image-2.jpg" alt=""></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="vision">    
                <div class="row clearfix">
                	<div class="text-column col-lg-6 col-md-12 col-sm-12">
                    	<div class="inner">
                            <div class="sec-title">
                               
                                <h2>Our Vision</h2><?php $str2 = $dis['vision'];?>
                                <div class="text"><?php echo substr($str2, 0, 100);?></div>
                                <div class="link-box"><a href="vision.php" class="theme-btn btn-style-one"><span class="btn-title">Read More</span></a></div>
                            </div>
                        </div>
                    </div>
                    <div class="image-column col-lg-6 col-md-12 col-sm-12">
                    	<div class="inner">
                            <div class="image wow fadeInLeft" data-wow-delay="0ms"><img class="lazy-image" src="images/resource/image-spacer-for-validation.png" data-src="images/resource/vision-image-1.jpg" alt=""></div>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    </section>
<!--Mission Vision Section-->
<section class="mission-vision">
    <div class="circle-one"></div>
    <div class="circle-two"></div>
    
    <div class="auto-container">
    
        <div class="mission">
            <div class="row clearfix">
                <div class="text-column col-lg-6 col-md-12 col-sm-12">
                    <div class="inner">
                        <div class="sec-title"><?php $str3 = $dis['help'];?>
                            <h2>Help & Support</h2>
                            <div class="text"><?php echo substr($str3,0,100); ?></div>
                            <div class="link-box"><a href="help-support.php" class="theme-btn btn-style-one"><span class="btn-title">Read More</span></a></div>
                        </div>
                    </div>
                </div>
                <div class="image-column col-lg-6 col-md-12 col-sm-12">
                    <div class="inner">
                        <div class="row clearfix">
                            <div class="image wow fadeInUp" data-wow-delay="0ms"><img class="lazy-image" src="images/resource/image-spacer-for-validation.png" data-src="images/resource/mission-image-1.jpg" alt=""></div>
                            <div class="image wow fadeInDown" data-wow-delay="0ms"><img class="lazy-image" src="images/resource/image-spacer-for-validation.png" data-src="images/resource/mission-image-2.jpg" alt=""></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="vision">    
            <div class="row clearfix">
                <div class="text-column col-lg-6 col-md-12 col-sm-12">
                    <div class="inner">
                        <div class="sec-title">
                            
                            <h2>Our Program</h2>
                            <?php $str4 = $dis['program']; ?>
                            <div class="text"><?php echo substr($str4,0,100); ?></div>
                            <div class="link-box"><a href="program.php" class="theme-btn btn-style-one"><span class="btn-title">Read More</span></a></div>
                        </div>
                    </div>
                </div>
                <div class="image-column col-lg-6 col-md-12 col-sm-12">
                    <div class="inner">
                        <div class="image wow fadeInLeft" data-wow-delay="0ms"><img class="lazy-image" src="images/resource/image-spacer-for-validation.png" data-src="images/resource/vision-image-1.jpg" alt=""></div>
                    </div>
                </div>
            </div>
        </div>
<?php } ?>
    </div>
</section>    
    
    <!--Call To Action Section-->
    <section class="call-to-action">
        
    	<!--Image Layer-->
        <div class="image-layer lazy-image" data-bg="url('images/background/call-to-action-1.jpg')"></div>
        
        <div class="auto-container">
            <div class="inner">
                <div class="sec-title centered">
                    <h2>How Can You Help?</h2>
                    <div class="text"><p>Lending a helping hand in times of need can be the extension someone is looking for to breakthrough. </p></div>
                    <div class="link-box clearfix"><a href="donate.php" class="theme-btn btn-style-three"><span class="btn-title">Donate Now</span></a><a href="contact.php" class="theme-btn btn-style-one"><span class="btn-title">Join Us Now</span></a></div>
                </div>
            </div>
        </div>
    </section>
    
    
    <!-- Sponsors Section -->
    <section class="sponsors-section">
        <div class="auto-container">
            <!--Sponsors Carousel-->
            <div class="love-carousel owl-theme owl-carousel" data-options='{"loop": true, "margin": 40, "autoheight":true, "lazyload":true, "nav": true, "dots": true, "autoplay": true, "autoplayTimeout": 6000, "smartSpeed": 300, "responsive":{ "0" :{ "items": "1" }, "600" :{ "items" : "2" }, "768" :{ "items" : "3" } , "800":{ "items" : "3" }, "1024":{ "items" : "4" }}}'>
                <div class="slide-item"><figure class="image-box"><a href="#"><img src="images/clients/1.png" alt=""></a></figure></div>
                <div class="slide-item"><figure class="image-box"><a href="#"><img src="images/clients/2.png" alt=""></a></figure></div>
                     </div>
        </div>
    </section>
    <?php include 'footer.php'; ?> 
    
   
    
	