contact_us.html

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

<head>
    <!-- Title -->
    <title>About Agency | Front - Responsive Website Template</title>

    <!-- Required Meta Tags Always Come First -->
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">

    <!-- Favicon -->
    <link href="./favicon.ico" rel="shortcut icon">

    <!-- Font -->
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">

    <!-- CSS Implementing Plugins -->
    <link href="assets/front_v3_3/vendor/fontawesome/css/all.min.css" rel="stylesheet">
    <link href="assets/front_v3_3/vendor/hs-mega-menu/dist/hs-mega-menu.min.css" rel="stylesheet">

    <!-- CSS Front Template -->
    <link href="assets/front_v3_3/css/theme.min.css" rel="stylesheet">

</head>

<body>
    <!-- ========== HEADER ========== -->
    <header-component></header-component>
    <!-- ========== END HEADER ========== -->

    <!-- ========== MAIN ========== -->
    <main id="content" role="main">
        <!-- Contact Form Section -->
        <div class="container space-top-3 space-top-lg-4 space-bottom-2">
            <div class="row">
                <div class="col-lg-6 mb-9 mb-lg-0">
                    <div class="mb-5">
                        <h1>Get in touch</h1>
                        <p>We'd love to talk about how we can help you.</p>
                    </div>

                    <!-- Leaflet -->
                    <div class="min-h-300rem mb-5" data-hs-leaflet-options='{
                 "map": {
                   "scrollWheelZoom": false,
                   "coords": [37.4040344, -122.0289704]
                 },
                 "marker": [
                   {
                     "coords": [37.4040344, -122.0289704],
                     "icon": {
                       "iconUrl": "assets/front_v3_3/svg/components/map-pin.svg",
                       "iconSize": [50, 45]
                     },
                     "popup": {
                       "text": "153 Williamson Plaza, Maggieberg"
                     }
                   }
                 ]
                }' id="map"></div>
                    <!-- End Leaflet -->

                    <div class="row">
                        <div class="col-sm-6">
                            

                            <div class="mb-3">
                                <span class="d-block h5 mb-1">Email us:</span>
                                <span class="d-block text-body font-size-1">pavlos@seas.harvard.edu</span>
                            </div>
                        </div>

                        <div class="col-sm-6">
                            <div class="mb-3">
                                <span class="d-block h5 mb-1">Address:</span>
                                <span class="d-block text-body font-size-1"><a class="nav-link media" href="https://goo.gl/maps/GMKQnV4LsEbwrw2i8">Science and Engineering Complex, 150 Western Ave, Boston, MA 02134</a></span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6">
                    <div class="ml-lg-5">
                        <!-- Form -->
                        <form class="js-validate card shadow-lg mb-4">
                            <div class="card-header border-0 bg-light text-center py-4 px-4 px-md-6">
                                <h2 class="h4 mb-0">General Enquiries</h2>
                            </div>

                            <div class="card-body p-4 p-md-6">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <!-- Form Group -->
                                        <div class="js-form-message form-group">
                                            <label class="input-label" for="firstName">First name</label>
                                            <input aria-label="Nataly" class="form-control" data-msg="Please enter first your name" id="firstName" name="firstName" placeholder="Pavlos" required type="text">
                                        </div>
                                        <!-- End Form Group -->
                                    </div>

                                    <div class="col-sm-6">
                                        <!-- Form Group -->
                                        <div class="js-form-message form-group">
                                            <label class="input-label" for="lastName">Last name</label>
                                            <input aria-label="Gaga" class="form-control" data-msg="Please enter last your name" id="lastName" name="lastName" placeholder="Protopapas" required type="text">
                                        </div>
                                        <!-- End Form Group -->
                                    </div>

                                    <div class="col-sm-12">
                                        <!-- Form Group -->
                                        <div class="js-form-message form-group">
                                            <label class="input-label" for="emailAddress">email@here.com</label>
                                            <input aria-label="alex@pixeel.com" class="form-control" data-msg="Please enter a valid email address" id="emailAddress" name="emailAddress" placeholder="email@here.com" required type="email">
                                        </div>
                                        <!-- End Form Group -->
                                    </div>

                                    <div class="col-sm-12">
                                        <!-- Form Group -->
                                        <div class="js-form-message form-group">
                                            <label class="input-label" for="message">Message</label>
                                            <div class="input-group">
                                                <textarea aria-label="Hi there, I would like to ..." class="form-control" data-msg="Please enter a reason." id="message" name="message" placeholder="Hi there, I would like to ..." required rows="4"></textarea>
                                            </div>
                                        </div>
                                        <!-- End Form Group -->
                                    </div>
                                </div>

                                <button class="btn btn-block btn-primary transition-3d-hover" type="submit">Submit</button>
                            </div>
                        </form>
                        <!-- End Form -->

                        <div class="text-center">
                            <p class="small">We'll get back to you</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Contact Form Section -->
    </main>
    <!-- ========== END MAIN ========== -->

    <!-- ========== FOOTER ========== -->
    <footer-component></footer-component>
    <!-- ========== END FOOTER ========== -->

    <!-- JS Global Compulsory  -->
    <script src="assets/front_v3_3/vendor/jquery/dist/jquery.min.js"></script>
    <script src="assets/front_v3_3/vendor/jquery-migrate/dist/jquery-migrate.min.js"></script>
    <script src="assets/front_v3_3/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

    <!-- JS Implementing Plugins -->
    <script src="assets/front_v3_3/vendor/hs-header/dist/hs-header.min.js"></script>
    <script src="assets/front_v3_3/vendor/hs-go-to/dist/hs-go-to.min.js"></script>
    <script src="assets/front_v3_3/vendor/hs-unfold/dist/hs-unfold.min.js"></script>
    <script src="assets/front_v3_3/vendor/hs-mega-menu/dist/hs-mega-menu.min.js"></script>
    <script src="assets/front_v3_3/vendor/hs-show-animation/dist/hs-show-animation.min.js"></script>
    <script src="assets/front_v3_3/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

    <!-- JS Front -->
    <script src="assets/front_v3_3/js/theme.min.js"></script>

    <!-- IE Support -->
    <script>
        if (/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) document.write('<script src="assets/front_v3_3/vendor/babel-polyfill/dist/polyfill.js"><\/script>');
    </script>

    <!-- JS -->
    <script src="assets/common_components/js/header.js"></script>
    <script src="assets/common_components/js/footer.js"></script>
</body>

</html>