<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CBA| Apply</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'; ?>

    <!-- Page Banner Section -->
    <section class="page-banner">
        <div class="image-layer lazy-image" data-bg="url('images/background/bg-banner-1.jpg')"></div>
        <div class="bottom-rotten-curve"></div>

        <div class="auto-container">
            <h1>Contact Us</h1>
            <ul class="bread-crumb clearfix">
                <li><a href="index.html">Home</a></li>
                <li class="active">Contact Us</li>
            </ul>
        </div>

    </section>
    <!--End Banner Section -->
    
    <!--Contact Info Section-->
    <section class="contact-info-section">
        <div class="auto-container">
            
            <div class="sec-title centered">
                <div class="sub-title">Contact Us</div>
                <h2>Get In Touch</h2>
               
            </div>
            
        	<div class="info-boxes">
                <div class="row clearfix">
                    <!--Info Box-->
                    <div class="info-box col-lg-4 col-md-6 col-sm-12">
                        <div class="inner-box wow fadeInUp" data-wow-delay="0ms">
							<div class="image-layer lazy-image" data-bg="url('images/resource/contact-image-1.jpg')"></div>
                            <div class="icon-box"><span class="flaticon-home-location-marker"></span></div>
                            <h4>Our Location</h4>
                            <ul>
                            <?php include 'connection.php';
$display =mysqli_query($con,  "select * from main_content");
while($dis=mysqli_fetch_array($display)){
?>
                            	<li><?php echo $dis['address']; ?></li>
                            </ul>
                        </div>
                    </div>
                    <!--Info Box-->
                    <div class="info-box col-lg-4 col-md-6 col-sm-12">
                        <div class="inner-box wow fadeInUp" data-wow-delay="300ms">
                            <div class="image-layer lazy-image" data-bg="url('images/resource/contact-image-2.jpg')"></div>
                            <div class="icon-box"><span class="flaticon-phone-call"></span></div>
                            <h4>Phone Number</h4>
                            <ul>
                            <li><a href="tel:<?php echo $dis['phone']; ?>"><?php echo $dis['phone']; ?></a></li>
                            </ul>
                        </div>
                    </div>
                    <!--Info Box-->
                    <div class="info-box col-lg-4 col-md-6 col-sm-12">
                        <div class="inner-box wow fadeInUp" data-wow-delay="600ms">
                            <div class="image-layer lazy-image" data-bg="url('images/resource/contact-image-3.jpg')"></div>
                            <div class="icon-box"><span class="flaticon-email"></span></div>
                            <h4>Email Address</h4>
                            <ul>
                            <li><a href="mailto:<?php echo $dis['email']; ?>"><?php echo $dis['email']; ?></a></li>
                            </ul>
</div><?php } ?>
                    </div>
                </div>
        	</div>
            
        </div>
    </section>
    
    
    <!--Contact Section-->
    <section class="contact-section">
        <div class="outer-container clearfix">
            
        	<div class="form-column clearfix">
                <div class="inner clearfix">
                
                    <div class="sec-title centered">
                       
                        <h2>We Would Love to Hear from You</h2>
                        
                    </div>
                    <?php

include('connection.php');
 
    if(isset($_POST['submit']))
  {

 $name=$_POST['name'];
 $email=$_POST['email'];
 $message=$_POST['message'];

 
 $toEmail = "communitybuilders555@gmail.com";
 $mailHeaders = "From: " . $name . "<". $email .">\r\n";
 $email_body = "You have received a new message from your  Contact form.\n\n"."Here are the details:\n\nName: $name\n\nEmail: $email\n\nMessage: $message";
 $query=mysqli_query($con, "insert into contact(name,email,message) value('$name','$email','$message')");
 
 
	
	

 
    if ($query) {
		mail($toEmail, $email_body, $mailHeaders); 
    $msg="Your Information has been submitted succesfully, We will contact you soon.";
  }
  else
    {
      $msg="Something Went Wrong. Please try again";
    }

 
}?>
                    
                    
                    
                    
                    <!-- Sign-Up Form Section -->
<!-- Sign-Up Form Section -->
 class="sign-up-form-section">
    <div class="auto-container">
        <div class="sec-title centered">
            <h2>Sign Up</h2>
        </div>

        <form method="post" action="submit_form.php" id="signup-form" role="form">
            <!-- Recipient Form -->
            <div class="form-row">
                <div class="col-md-4 form-group">
                    <input type="text" name="recipient_name" placeholder="Recipient Name" required="">
                </div>
                <div class="col-md-4 form-group">
                    <input type="text" name="recipient_signature" placeholder="Recipient Signature" required="">
                </div>
                <div class="col-md-4 form-group">
                    <input type="tel" name="recipient_phone" placeholder="Recipient Phone Number" required="">
                </div>
            </div>

            <!-- Parent/Guardian Form -->
            <div class="form-row">
                <div class="col-md-4 form-group">
                    <input type="text" name="parent_name" placeholder="Parent/Guardian Name" required="">
                </div>
                <div class="col-md-4 form-group">
                    <input type="text" name="parent_signature" placeholder="Parent/Guardian Signature" required="">
                </div>
                <div class="col-md-4 form-group">
                    <input type="tel" name="parent_phone" placeholder="Parent/Guardian Phone Number" required="">
                </div>
            </div>

            <!-- Principal Form -->
            <div class="form-row">
                <div class="col-md-4 form-group">
                    <input type="text" name="principal_name" placeholder="Principal Name" required="">
                </div>
                <div class="col-md-4 form-group">
                    <input type="text" name="principal_signature" placeholder="Principal Signature" required="">
                </div>
                <div class="col-md-4 form-group">
                    <input type="tel" name="principal_phone" placeholder="Principal Phone Number" required="">
                </div>
            </div>

            <!-- Coordinator Form -->
            <div class="form-row">
                <div class="col-md-4 form-group">
                    <input type="text" name="coordinator_name" placeholder="Coordinator Name" required="">
                </div>
                <div class="col-md-4 form-group">
                    <input type="text" name="coordinator_signature" placeholder="Coordinator Signature" required="">
                </div>
                <div class="col-md-4 form-group">
                    <input type="tel" name="coordinator_phone" placeholder="Coordinator Phone Number" required="">
                </div>
            </div>

            <div class="col-md-12 form-group text-center">
                <button class="theme-btn btn-style-one" type="submit" name="submit"><span class="btn-title">Submit Form</span></button>
            </div>
        </form>
    </div>



                    
                    
                    <!-- Contact Form-->
                    <div class="contact-form">
                        <form method="post" action="" id="contact-form" role="form">
                            <div class="row clearfix"> 
                            <div class="col-md-4 form-group">
                    <input type="text" name="recipient_name" placeholder="Recipient Name" required="">
                </div>
                <div class="col-md-4 form-group">
                    <input type="text" name="recipient_signature" placeholder="Recipient Signature" required="">
                </div>
                <div class="col-md-4 form-group">
                    <input type="tel" name="recipient_phone" placeholder="Recipient Phone Number" required="">
                </div>
            
                                <div class="col-md-6 col-sm-12 form-group">
                                    <input type="text" name="name" placeholder="Your name" required="">
                                </div>
                                
                                <div class="col-md-6 col-sm-12 form-group">
                                    <input type="email" name="email" placeholder="Your Email" required="">
                                </div>
        
                                <div class="col-md-12 col-sm-12 form-group">
                                    <textarea name="message" placeholder="Write your message"></textarea>
                                </div>
        
                                <div class="col-md-12 col-sm-12 form-group text-center">
                                    <button class="theme-btn btn-style-one" type="submit" name="submit"><span class="btn-title">Send Message</span></button>
                                </div>
                            </div>
                        </form>
                    </div>

                </div>
        	</div>
            <?php
          /*  <div class="map-column clearfix">
            	<div class="map-canvas"
                    data-zoom="12"
                    data-lat="-37.817085"
                    data-lng="144.955631"
                    data-type="roadmap"
                    data-hue="#ffc400"
                    data-title="Envato"
                    data-icon-path="images/icons/map-marker.png"
                    data-content="Melbourne VIC 3000, Australia<br><a href='mailto:info@youremail.com'>info@youremail.com</a>">
                </div>
            </div>*/
           ?> 
        </div>
    </section>
    
    
    
    <!-- Call To Action Section -->
    <section class="call-to-action-two">
        <div class="auto-container">
            <div class="inner clearfix">
                <div class="title-box wow fadeInLeft" data-wow-delay="0ms"><h2>Become A Volunteer</h2></div>
                <div class="link-box wow fadeInRight" data-wow-delay="0ms"><a href="contact.php" class="theme-btn btn-style-five"><span class="btn-title">Get Involved</span></a></div>
            </div>
        </div>
    </section>
    <!--End Gallery Section -->

    
	<!-- Main Footer -->
    <footer class="main-footer">
    	<div class="auto-container">
        	<!--Widgets Section-->
            <div class="widgets-section">
            	<div class="row clearfix">
                	
                    <!--Column-->
                    <div class="column col-lg-3 col-md-6 col-sm-12">
						<div class="footer-widget logo-widget">
                        	<div class="widget-content">
                                <div class="footer-logo">
                                    <a href="index.php"><img class="lazy-image" src="images/resource/image-spacer-for-validation.png" data-src="images/footer-logo.png" alt="" /></a>
                                </div>
                                      
                            </div>
						</div>
					</div>
					
					<!--Column-->
                    <div class="column col-lg-3 col-md-6 col-sm-12">
						<div class="footer-widget links-widget">
							<div class="widget-content">
								<h3>Quick Links</h3>
                                <ul>
                                    <li><a href="donate.php">Donate</a></li>
                                    <li><a href="about.php">Abouts Us</a></li>
                                    <li><a href="faq.php">FAQ</a></li>
                                    <li><a href="contact.php">Join US</a></li>
                                    <li><a href="member">Volunteer</a></li>
                                    
                                </ul>
							</div>	
						</div>
					</div>
					
					<!--Column-->
                    <div class="column col-lg-3 col-md-6 col-sm-12">
						<div class="footer-widget info-widget">
							<div class="widget-content">
                            <?php include 'connection.php';
$display =mysqli_query($con,  "select * from main_content");
while($dis=mysqli_fetch_array($display)){?>
								<h3>Contacts</h3>
								<ul class="contact-info">
                                <li><?php echo $dis['address']; ?></li>
                                <li><a href="tel:<?php echo $dis['phone']; ?>"><?php echo $dis['phone']; ?></a></li>
									<li><a href="mailto:<?php echo $dis['email']; ?>"><?php echo $dis['email']; ?></a></li>
                                    <ul class="social-links clearfix">
                                        <li><a href="https://<?php echo $dis['fb_link']; ?>"><span class="fab fa-facebook-f"></span></a></li>
                                        <li><a href="https://<?php echo $dis['twitter_link']; ?>"><span class="fab fa-twitter"></span></a></li>
                                        <li><a href="https://<?php echo $dis['youtube_link']; ?>"><span class="fab fa-youtube"></span></a></li>
                                        <li><a href="https://<?php echo $dis['insta_link']; ?>"><span class="fab fa-instagram"></span></a></li>
                                    </ul>
                                </ul>
							</div>	
						</div>
					</div>
                    
<?php } ?>
				</div>
                
                <div class="nav-box clearfix">
                	
                </div>
                
			</div>
		</div>
		
		<!-- Footer Bottom -->
		<div class="footer-bottom">
			<div class="auto-container">
				
				<!--Scroll to top-->
				<div class="clearfix">
                	<div class="copyright">Community Builders for Africa  &copy;  2023 All Right Reserved</div>
                    <ul class="bottom-links">
                    	<li><a href="#">Terms of Service</a></li>
                        <li><a href="#">Privacy Policy</a></li>
                    </ul>
				</div>
			</div>
		</div>
		
	</footer>
	
</div>
<!--End pagewrapper-->

<!--Scroll to top-->
<div class="scroll-to-top scroll-to-target" data-target="html"><span class="flaticon-up-arrow"></span></div>

<script src="js/jquery.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery.fancybox.js"></script>
<script src="js/owl.js"></script>
<script src="js/appear.js"></script>
<script src="js/wow.js"></script>
<script src="js/lazyload.js"></script>
<script src="js/scrollbar.js"></script>
<script src="js/validate.js"></script>
<script src="js/script.js"></script>
<!--Google Map APi Key-->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDcaOOcFcQ0hoTqANKZYz-0ii-J0aUoHjk"></script>
<script src="js/map-script.js"></script>
<!--End Google Map APi-->


</body>
</html>