c3bb6278b5
Completed the templates, added a cool javascript effect on textarea (added jquery.ns-autogrow plugin), modified the click functions from .on to .click for improved performance
53 lines
2.2 KiB
PHTML
53 lines
2.2 KiB
PHTML
<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">Get in touch with me</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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> |