<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>
</header>
<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">
<label for="contact-form-email">Email</label>
<input type="email" class="form-control" id="contact-form-email" placeholder="john.doe@example.com">
<label for="contact-form-message">Your Message:</label>
<textarea class="form-control" id="contact-form-message" rows="3"></textarea>
<button type="submit" class="btn btn-default btn-outline-secondary">Get in touch with me</button>
</form>
<script src="vendor/jquery.ns-autogrow/jquery.ns-autogrow.min.js"></script>
<script>
$(function () {
$("#scrolldown-button").click(function() {
$('html,body').animate({
scrollTop: $("#contact-form").offset().top},
'slow');
});
$("#contact-form-message").css('overflow', 'hidden').autogrow({vertical: true, horizontal: false, flickering: false});
</script>