<style>
    #contact-form {
        font-family: 'Roboto Condensed', sans-serif;
    }
</style>
<header class="masthead" style="background-image: url(img/bg-5.jpg)">
    <div class="overlay"></div>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-md-10 mx-auto">
                <div class="page-heading">
                    <h1>Why keeping all your questions for you?</h1>
                    <span class="subheading">Just ask them here!</span>
                    <a href="#contact-form" id="scrolldown-button">
                        <i class="fas fa-chevron-circle-down fa-3x fa-inverse" style="line-height: 2;"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</header>
<div class="container">
    <div class="row">
        <div class="col-lg-8 col-md-10 mx-auto">
            <form class="form-horizontal" id="contact-form">
                <div class="form-group">
                    <label for="contact-form-name">Name</label>
                    <input type="text" class="form-control" id="contact-form-name" placeholder="John Doe">
                </div>
                <div class="form-group">
                    <label for="contact-form-email">Email</label>
                    <input type="email" class="form-control" id="contact-form-email" placeholder="john.doe@example.com">
                </div>
                <div class="form-group">
                    <label for="contact-form-message">Your Message:</label>
                    <textarea class="form-control" id="contact-form-message" rows="3"></textarea> 
                </div>
                <button type="submit" class="btn btn-default btn-outline-secondary" id="contact-form-send">Get in touch with me</button>
            </form>
        </div>
    </div>
</div>
<script src="vendor/jquery.ns-autogrow/jquery.ns-autogrow.min.js"></script>
<script src="js/onePageApp-contactForm.js"></script>