bryanpedini/bryanpedini.it_old
Archived
0
0
Fork 0
Code Releases Activity

Improved performance, finished templates, added jquery plugins

Browse Source 
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
This commit is contained in:
Bryan Pedini
2019-01-20 17:51:07 +01:00
parent ec496c7ce1
commit c3bb6278b5
5 changed files with 195 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
templates/contact-form.phtml
View File

@@ -1,3 +1,8 @@
<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">
@@ -6,11 +11,43 @@
<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="scolldown-button">
<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>
</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>