
<!DOCTYPE html>
<html lang="zxx">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Ansonika">
    <title>Contact Us - Gypsie Cottage</title>
    
    <!-- Favicons-->
    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">

    <!-- GOOGLE WEB FONT-->
    <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=Caveat:wght@400;500&family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <!-- BASE CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
	  <link href="css/vendors.min.css" rel="stylesheet">

    <!-- YOUR CUSTOM CSS -->
    <link href="css/custom.css" rel="stylesheet">
	
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
	
</head>

<body> 

    <?php include 'include/header.php';?>
    
    <main>
      <div class="hero small-height jarallax" data-jarallax data-speed="0.2">
          <img class="jarallax-img" src="img/hero-1.jpg" alt="">
          <div class="wrapper opacity-mask d-flex align-items-center justify-content-center text-center animate_hero" data-opacity-mask="rgba(0, 0, 0, 0.5)">
              <div class="container">
                  <small class="slide-animated one">Gypsie Cottage</small>
                  <h1 class="slide-animated two">Contact Us</h1>
              </div>
          </div>
      </div>
      <!-- /Background Img Parallax -->

      <div class="container margin_120_95">
            <div class="row justify-content-between">
                <div class="col-xl-4 col-lg-5 order-lg-2">
                    <div class="contact_info">
                        <ul class="clearfix">
                            <li>
                                <i class="bi bi-geo-alt"></i>
                                <h4>Address</h4>
                                <div>D.No.4/592, Mel-Cowhatty, Nanjanad Village Panchayat, Udhagamandalam Taluk, Nilgiris</div>
                            </li>
                            <li>
                                <i class="bi bi-envelope-paper"></i>
                                <h4>Email address</h4>
                                <p><a href="mailto:gypsiecottage@gmail.com">gypsiecottage@gmail.com</a></p>
                            </li>
                            <li>
                                <i class="bi bi-telephone"></i>
                                <h4>Telephone</h4>
                                <div>+91 9790429582</div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-xl-7 col-lg-7 order-lg-1">
                    <h3 class="mb-3">Get in Touch</h3>
                    <div id="message-contact"></div>
                    <form action="mail.php" method="post">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-floating mb-4">
                                    <input class="form-control" type="text"  name="name" placeholder="Name" required pattern="^(?!\s*$).+" title="Name cannot be empty or contain only spaces">
                                    <label for="name">Name</label>
                                </div>
                            </div>
                           
                        </div>
                        <!-- /row -->
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-floating mb-4">
                                    <input class="form-control" type="email" name="email" placeholder="Email" required>
                                    <label for="email">Email</label>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-floating mb-4">
                                    <input class="form-control" type="text" name="phone" placeholder="Telephone" required pattern="^(?!\s*$).+" title="Phone cannot be empty or contain only spaces">
                                    <label for="phone">Telephone</label>
                                </div>
                            </div>
                        </div>
                        <!-- /row -->
                        <div class="form-floating mb-4">
                            <textarea class="form-control" placeholder="Message"  name="message" required pattern="^(?!\s*$).+" title="Message cannot be empty or contain only spaces"></textarea>
                            <label for="message">Message</label>
                        </div>
                        <div class="captcha">
							<div class="g-recaptcha" data-sitekey="6LfYkVIsAAAAAFsvSeeAz-BmSzP3wA58lPV7zR6h"></div>
							<script src="https://www.google.com/recaptcha/api.js" async defer></script>
                        </div>
                        
                        <p class="mt-3"><input type="submit" value="Submit Now" class="btn_1 outline"></p>
                    </form>
                </div>
            </div>
            <!-- /row -->
        </div>
        <!--/container -->

        <div class="map_contact">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3539.457876070857!2d76.65921759999999!3d11.390959800000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ba8972be7dc2f33%3A0x46a0869d9177306b!2sGypsie%20cottage!5e1!3m2!1sen!2sin!4v1768550436866!5m2!1sen!2sin"  width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
        </div>
        <!--/map_contact -->


  </main>

  <?php include 'include/footer.php';?>



<!-- COMMON SCRIPTS -->
<script src="js/common_scripts.js"></script>
<script src="js/common_functions.js"></script>
<script src="phpmailer/validate.js"></script>

</body>
</html>