File: C:/laragon/www/its/contact.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Italian Tourist Services LTD | The Best Travel Agency</title>
<!-- [Assets] Icon -->
<link rel="icon" type="image/png" href="assets/images/favicon.png">
<!-- [Assets] Vendors -->
<link rel="stylesheet" href="assets/vendors/bootstrap/css/bootstrap.min.css" media="all">
<link rel="stylesheet" type="text/css" href="assets/vendors/fontawesome/css/all.min.css">
<link rel="stylesheet" type="text/css" href="assets/vendors/jquery-ui/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="assets/vendors/modal-video/modal-video.min.css">
<link rel="stylesheet" type="text/css" href="assets/vendors/lightbox/dist/css/lightbox.min.css">
<link rel="stylesheet" type="text/css" href="assets/vendors/slick/slick.css">
<link rel="stylesheet" type="text/css" href="assets/vendors/slick/slick-theme.css">
<!-- [Fonts] -->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap" rel="stylesheet">
<!-- [CSS] -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="siteLoader" class="site-loader">
<div class="preloader-content">
<img src="assets/images/loader1.gif" alt="">
</div>
</div>
<div id="page" class="full-page">
<header id="masthead" class="site-header header-primary">
<div class="contactTop-js"></div>
<div class="nav-js"></div>
</header>
<main id="content" class="site-main">
<section class="inner-banner-wrap">
<div class="inner-baner-container" style="background-image: url(assets/images/background-index.jpg);">
<div class="container">
<div class="inner-banner-content">
<h1 class="inner-title">Contact us</h1>
</div>
</div>
</div>
<div class="inner-shape"></div>
</section>
<div class="contact-page-section">
<div class="contact-form-inner">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="contact-from-wrap">
<div class="section-heading">
<h5 class="dash-style">GET IN TOUCH</h5>
<h2>CONTACT US TO GET MORE INFO</h2>
</div>
<form class="contact-from">
<p>
<input id="name" type="text" name="name" placeholder="Your Name*">
</p>
<p>
<input id="email" type="email" name="email" placeholder="Your Email*">
</p>
<p>
<textarea id="message" rows="8" name="message" placeholder="Your Message*"></textarea>
</p>
<button class="btn btn-outline-secondary" type="submit" onclick="sendMail()">Send Mail</button>
</form>
</div>
</div>
<div class="col-md-6">
<div class="contact-detail-wrap">
<h3>Do you need help? Would you like to request a personalized quote? Contact us</h3>
<p>Do you need help, want a customized quote or want to make a special request to Italian Tourist Services LTD? Contact us</p>
<div class="details-list">
<ul>
<li>
<span class="icon">
<i class="fas fa-map-signs"></i>
</span>
<div class="details-content">
<h4>Location Address</h4>
<span>71-75 SHELTON STREET COVENT GARDEN, LONDON, UNITED KINGDOW WC2H 9JQ</span>
</div>
</li>
<li>
<span class="icon">
<i class="fas fa-envelope-open-text"></i>
</span>
<div class="details-content">
<h4>Email Address</h4>
<a href="mailto:info@italiantouristservices.uk">info@italiantouristservices.uk</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="map-section">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d280.6471502789063!2d-0.12367074099943437!3d51.51483537317739!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487604ccab37652b%3A0x22220c3f07824033!2sShop%2071%2C%20ALG%20ID%20Cards%20t%2Fa%20The%20Lanyard%2C%2075%20Shelton%20St%2C%20London%20WC2H%209JQ%2C%20Regno%20Unito!5e1!3m2!1sit!2sch!4v1706692409081!5m2!1sit!2sch" width="800" height="600" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
</main>
<div class="footer-js"></div>
<a id="backTotop" href="#" class="to-top-icon">
<i class="fas fa-chevron-up"></i>
</a>
<div class="header-search-form">
<div class="container">
<div class="header-search-container">
<form class="search-form" role="search" method="get" >
<input type="text" name="s" placeholder="Enter your text...">
</form>
<a href="#" class="search-close">
<i class="fas fa-times"></i>
</a>
</div>
</div>
</div>
</div>
<!-- JavaScript -->
<!--<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>-->
<script src="assets/js/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
<script src="assets/vendors/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/vendors/jquery-ui/jquery-ui.min.js"></script>
<script src="assets/vendors/countdown-date-loop-counter/loopcounter.js"></script>
<script src="assets/js/jquery.counterup.js"></script>
<script src="assets/vendors/modal-video/jquery-modal-video.min.js"></script>
<script src="assets/vendors/masonry/masonry.pkgd.min.js"></script>
<script src="assets/vendors/lightbox/dist/js/lightbox.min.js"></script>
<script src="assets/vendors/slick/slick.min.js"></script>
<script src="assets/js/jquery.slicknav.js"></script>
<script src="assets/js/custom.min.js"></script>
<script type="module">
import { showFooter } from "./assets/js/footer.js";
import { showNav } from "./assets/js/nav.js";
import { showCTop } from "./assets/js/contactTop.js"
showFooter();
showNav();
showCTop();
</script>
<script>
function sendMail() {
var name = $.trim($("#name").val());
var email = $.trim($("#email").val());
var message = $.trim($("#message").val());
if (name != "" && email != "" && message != "") {
const xhr = new XMLHttpRequest();
xhr.open("POST", "sendMail.php");
xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
const body = JSON.stringify({name: name, email: email, message: message});
xhr.onload = () => {
if (xhr.readyState == 4 && xhr.status == 201) {
console.log(JSON.parse(xhr.responseText));
} else {
console.log(`Error: ${xhr.status}`);
}
};
xhr.send(body);
} else {
alert("Error! Fill all the fields and then send the request.");
}
}
</script>
</body>
</html>