214 lines
7.4 KiB
HTML
214 lines
7.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
@@include('_head.html')
|
|
</head>
|
|
<body>
|
|
<div class="content-wrapper">
|
|
<header class="wrapper bg-soft-primary">
|
|
@@include('_navbar.html', {
|
|
"classList": "center-nav transparent navbar-light",
|
|
"otherClassList": "w-100 d-flex ms-auto",
|
|
"otherLanguageSelect": true,
|
|
"otherBtn": true,
|
|
"otherBtnClassList": "btn-sm btn-primary rounded-pill",
|
|
"otherBtnText": "Contact",
|
|
"otherBtnLink": "@@webRoot/contact.html"
|
|
})
|
|
</header>
|
|
<!-- /header -->
|
|
<section class="wrapper bg-soft-primary">
|
|
<div class="container pt-10 pb-19 pt-md-14 pb-md-20 text-center">
|
|
<div class="row">
|
|
<div class="col-sm-10 col-md-8 col-lg-6 col-xl-6 col-xxl-5 mx-auto">
|
|
<h1 class="display-1 mb-3">Get in Touch</h1>
|
|
<nav class="d-inline-block" aria-label="breadcrumb">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
|
<li class="breadcrumb-item active" aria-current="page">Contact</li>
|
|
</ol>
|
|
</nav>
|
|
<!-- /nav -->
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section class="wrapper bg-light angled upper-end">
|
|
<div class="container py-14 py-md-16">
|
|
<div class="row gy-10 gx-lg-8 gx-xl-12 mb-16 align-items-center">
|
|
<div class="col-lg-7 position-relative">
|
|
<div class="shape bg-dot primary rellax w-18 h-18" data-rellax-speed="1" style="top: 0; left: -1.4rem; z-index: 0;"></div>
|
|
<div class="row gx-md-5 gy-5">
|
|
<div class="col-md-6">
|
|
<figure class="rounded mt-md-10 position-relative"><img src="@@webRoot/assets/img/photos/g5.jpg" srcset="@@webRoot/assets/img/photos/g5@2x.jpg 2x" alt=""></figure>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="col-md-6">
|
|
<div class="row gx-md-5 gy-5">
|
|
<div class="col-md-12 order-md-2">
|
|
<figure class="rounded"><img src="@@webRoot/assets/img/photos/g6.jpg" srcset="@@webRoot/assets/img/photos/g6@2x.jpg 2x" alt=""></figure>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="col-md-10">
|
|
<div class="card bg-pale-primary text-center counter-wrapper">
|
|
<div class="card-body py-11">
|
|
<h3 class="counter text-nowrap">5000+</h3>
|
|
<p class="mb-0">Satisfied Customers</p>
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!--/column -->
|
|
<div class="col-lg-5">
|
|
<h2 class="display-4 mb-8">Convinced yet? Let's make something great together.</h2>
|
|
<div class="d-flex flex-row">
|
|
<div>
|
|
<div class="icon text-primary fs-28 me-6 mt-n1"> <i class="uil uil-location-pin-alt"></i> </div>
|
|
</div>
|
|
<div>
|
|
<h5 class="mb-1">Address</h5>
|
|
<address>Moonshine St. 14/05 Light City, <br class="d-none d-md-block" />London, United Kingdom</address>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex flex-row">
|
|
<div>
|
|
<div class="icon text-primary fs-28 me-6 mt-n1"> <i class="uil uil-phone-volume"></i> </div>
|
|
</div>
|
|
<div>
|
|
<h5 class="mb-1">Phone</h5>
|
|
<p>00 (123) 456 78 90</p>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex flex-row">
|
|
<div>
|
|
<div class="icon text-primary fs-28 me-6 mt-n1"> <i class="uil uil-envelope"></i> </div>
|
|
</div>
|
|
<div>
|
|
<h5 class="mb-1">E-mail</h5>
|
|
<p class="mb-0"><a href="mailto:sandbox@email.com" class="link-body">sandbox@email.com</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
<div class="row">
|
|
<div class="col-lg-10 offset-lg-1 col-xl-8 offset-xl-2">
|
|
<h2 class="display-4 mb-3 text-center">Drop Us a Line</h2>
|
|
<p class="lead text-center mb-10">Reach out to us from our contact form and we will get back to you shortly.</p>
|
|
<form class="contact-form needs-validation" method="post" action="@@webRoot/assets/php/contact.php" novalidate>
|
|
<div class="messages"></div>
|
|
<div class="row gx-4">
|
|
<div class="col-md-6">
|
|
<div class="form-floating mb-4">
|
|
<input id="form_name" type="text" name="name" class="form-control" placeholder="Jane" required>
|
|
<label for="form_name">First Name *</label>
|
|
<div class="valid-feedback">
|
|
Looks good!
|
|
</div>
|
|
<div class="invalid-feedback">
|
|
Please enter your first name.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="col-md-6">
|
|
<div class="form-floating mb-4">
|
|
<input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Doe" required>
|
|
<label for="form_lastname">Last Name *</label>
|
|
<div class="valid-feedback">
|
|
Looks good!
|
|
</div>
|
|
<div class="invalid-feedback">
|
|
Please enter your last name.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="col-md-6">
|
|
<div class="form-floating mb-4">
|
|
<input id="form_email" type="email" name="email" class="form-control" placeholder="jane.doe@example.com" required>
|
|
<label for="form_email">Email *</label>
|
|
<div class="valid-feedback">
|
|
Looks good!
|
|
</div>
|
|
<div class="invalid-feedback">
|
|
Please provide a valid email address.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="col-md-6">
|
|
<div class="form-select-wrapper mb-4">
|
|
<select class="form-select" id="form-select" name="department" required>
|
|
<option selected disabled value="">Select a department</option>
|
|
<option value="Sales">Sales</option>
|
|
<option value="Marketing">Marketing</option>
|
|
<option value="Customer Support">Customer Support</option>
|
|
</select>
|
|
<div class="valid-feedback">
|
|
Looks good!
|
|
</div>
|
|
<div class="invalid-feedback">
|
|
Please select a department.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="col-12">
|
|
<div class="form-floating mb-4">
|
|
<textarea id="form_message" name="message" class="form-control" placeholder="Your message" style="height: 150px" required></textarea>
|
|
<label for="form_message">Message *</label>
|
|
<div class="valid-feedback">
|
|
Looks good!
|
|
</div>
|
|
<div class="invalid-feedback">
|
|
Please enter your messsage.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="col-12 text-center">
|
|
<input type="submit" class="btn btn-primary rounded-pill btn-send mb-3" value="Send message">
|
|
<p class="text-muted"><strong>*</strong> These fields are required.</p>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</form>
|
|
<!-- /form -->
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
</div>
|
|
<!-- /.content-wrapper -->
|
|
<footer class="bg-dark text-inverse">
|
|
<div class="container py-13 py-md-15">
|
|
@@include('_footer-widgets.html', {
|
|
"lightText": true
|
|
})
|
|
</div>
|
|
<!-- /.container -->
|
|
</footer>
|
|
@@include('_page-progress.html')
|
|
@@include('_scripts.html')
|
|
</body>
|
|
</html> |