@themesberg/pixel-lite-bootstrap-ui-kit
Version:
Open-source Bootstrap 5 UI Kit
222 lines (210 loc) • 12 kB
HTML
<!--
=========================================================
* Pixel Free Bootstrap 5 UI Kit
=========================================================
* Product Page: https://themesberg.com/product/ui-kit/pixel-free-bootstrap-5-ui-kit
* Copyright 2021 Themesberg (https://www.themesberg.com)
* Coded by https://themesberg.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. Contact us if you want to remove it.
-->
<html lang="en">
<head>
@@include('./_head.html', {
"path": "../..",
"title": "Pixel Bootstrap 5 - Contact"
})
</head>
<body>
@@include('./_navigation.html', {
"path": "../..",
"classes": "navbar-dark navbar-theme-primary"
})
<main>
@@include('./_preloader.html', {
"path": "../.."
})
<!-- Hero -->
<section class="section section-header pb-11 bg-primary text-white">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-xl-8 text-center">
<h1 class="display-2 mb-3">Get in touch today</h1>
<p class="lead">Have a new project in mind? Drop us a line about your project needs, we answer same day.</p>
</div>
</div>
</div>
</section>
<!-- Section -->
<div class="section py-0">
<div class="container mt-n10">
<div class="row">
<div class="col-12">
<iframe class="map rounded" id="gmap_canvas" src="https://maps.google.com/maps?q=san%20francisco&t=&z=8&ie=UTF8&iwloc=&output=embed"></iframe>
</div>
</div>
</div>
</div>
<!-- Section -->
<section class="section section-lg pt-6">
<div class="container">
<div class="row justify-content-center mb-5 mb-lg-6">
<div class="col-12 col-lg-8">
<!-- Contact Card -->
<div class="card border-0 p-2 p-md-3 p-lg-5">
<div class="card-header bg-white border-0 text-center">
<h2>Want to work with us?</h2>
<p>Cool! Let’s talk about your project</p>
</div>
<div class="card-body px-0 pt-0">
<form action="#">
<!-- Form -->
<div class="mb-4">
<label for="name">Your Name</label>
<div class="input-group">
<span class="input-group-text" id="basic-addon3"><span class="fas fa-user-circle"></span></span>
<input type="text" class="form-control" placeholder="e.g. Bonnie Green" id="name" required>
</div>
</div>
<!-- End of Form -->
<!-- Form -->
<div class="mb-4">
<label for="email">Your Email</label>
<div class="input-group">
<span class="input-group-text" id="basic-addon4"><span class="fas fa-envelope"></span></span>
<input type="email" class="form-control" placeholder="example@company.com" id="email" required>
</div>
</div>
<!-- End of Form -->
<div class="mb-4">
<label for="message">Your Message</label>
<textarea placeholder="Your message" class="form-control" id="message" rows="4" required></textarea>
</div>
<!-- End of Form -->
<div class="d-grid">
<button type="submit" class="btn rounded btn-secondary">Send message</button>
</div>
</form>
</div>
</div>
<!-- End of Contact Card -->
</div>
</div>
<div class="row">
<div class="col-12 text-center mb-5">
<h2>Our support team</h2>
</div>
<div class="col-12 col-md-6 col-lg-4 mb-5 mb-lg-0">
<div class="card border-0 text-center">
<div class="card-header border-0 bg-white">
<img src="../../assets/img/team/profile-picture-2.jpg" class="card-img-top rounded shadow border-0" alt="Christopher Avatar">
</div>
<div class="card-body">
<span class="card-subtitle text-gray fw-normal">Sales</span>
<h3 class="h4 card-title mt-2">Christopher Wood</h3>
<ul class="list-unstyled d-flex justify-content-center mt-3">
<li>
<a href="#" target="_blank" aria-label="facebook social link" class="icon icon-sm icon-facebook me-3">
<span class="fab fa-facebook-f"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="twitter social link" class="icon icon-sm icon-twitter me-3">
<span class="fab fa-twitter"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="slack social link" class="icon icon-sm icon-slack me-3">
<span class="fab fa-slack-hash"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="dribbble social link" class="icon icon-sm icon-dribbble me-3">
<span class="fab fa-dribbble"></span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4 mb-5 mb-lg-0">
<div class="card border-0 text-center">
<div class="card-header border-0 bg-white">
<img src="../../assets/img/team/profile-picture-3.jpg" class="card-img-top rounded shadow border-0" alt="Bonnie Avatar">
</div>
<div class="card-body">
<span class="card-subtitle text-gray fw-normal">Marketing</span>
<h3 class="h4 card-title mt-2">Bonnie Green</h3>
<ul class="list-unstyled d-flex justify-content-center mt-3">
<li>
<a href="#" target="_blank" aria-label="facebook social link" class="icon icon-sm icon-facebook me-3">
<span class="fab fa-facebook-f"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="twitter social link" class="icon icon-sm icon-twitter me-3">
<span class="fab fa-twitter"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="slack social link" class="icon icon-sm icon-slack me-3">
<span class="fab fa-slack-hash"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="dribbble social link" class="icon icon-sm icon-dribbble me-3">
<span class="fab fa-dribbble"></span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card border-0 text-center">
<div class="card-header border-0 bg-white">
<img src="../../assets/img/team/profile-picture-4.jpg" class="card-img-top rounded shadow border-0" alt="Neil Avatar">
</div>
<div class="card-body">
<span class="card-subtitle text-gray fw-normal">Invoice</span>
<h3 class="h4 card-title mt-2">Neil Sims</h3>
<ul class="list-unstyled d-flex justify-content-center mt-3">
<li>
<a href="#" target="_blank" aria-label="facebook social link" class="icon icon-sm icon-facebook me-3">
<span class="fab fa-facebook-f"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="twitter social link" class="icon icon-sm icon-twitter me-3">
<span class="fab fa-twitter"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="slack social link" class="icon icon-sm icon-slack me-3">
<span class="fab fa-slack-hash"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="dribbble social link" class="icon icon-sm icon-dribbble me-3">
<span class="fab fa-dribbble"></span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End of section -->
</main>
@@include('./_footer.html', {
"path": "../..",
"classes": "bg-dark text-white"
})
@@include('./_scripts.html', {
"path": "../.."
})
</body>
</html>