I’m coding a website for this charity event and although I can write HTML, I have no experience in java or jquery, as you can probably see by the code. I have managed to implement 2 plugins so far - FadeThis and Shine.js however upon trying to install Paver to add a panorama to the page, I somehow broke it and even when the page was working, the panorama aspect didn’t. I will eventually get round to learning jquery however at this point I would appreciate if someone could help on this specific task as we are one a somewhat tight schedule. Thanks for you help.
<!DOCTYPE html>
<html lang="en">
<head>
<!--Meta Tags-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Open Source Images"/>
<meta name="google-site-verification" content="bPSa0t8kOsCtCAQutkxSznVbdDAGIO1SyPRRjDIrPx8"/>
<title>NCSiesta | Charity Dog Show</title>
<!--CSS-->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" href="css/paver.min.css">
<!--Java-->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/tether.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.ba-throttle-debounce.min.js"></script>
<script src="js/jquery.paver.min.js"></script>
<script src="js/jquery.fadethis.min.js"></script>
<script src="js/shine.min.js"></script>
</head>
<body>
<script>document.body.className += ' fade-out';</script>
<!--Nav Bar Ting-->
<div class="container">
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<img src="assets/Logo2bNav.thick.png" width="50" height="50" alt="Logo">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="activities.html">Activites</a></li>
<li class="nav-item active"><a class="nav-link" href="venue.html">Venue<span class="sr-only">(current)</span></a></li>
<li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
</ul>
<a class="btn btn-outline-ncsiesta form-inline my-2 my-sm-0" href="https://gf.me/u/bm6h48">Donate</a> </div>
</nav>
</div>
<!--Page Header-->
<div class="pageheader">
<div class="container">
<div class="headerText">
<p id="shine">Charity Dog Show</p>
</div>
<div class="extra">
<p>Brought to you by NCSiesta</p>
</div>
</div>
</div>
<div class="pageheader2"></div>
<div class="pageheader3"></div>
<!--Grid-->
<!--Middle Column-->
<div class="panorama">
<img src="assets/panorama.png" alt="Panorama" title="Panorama"/>
</div>
<div class="container">
<!--Right Column-->
<div class="row">
<div class="col-10">
<div class="hidden-md-down">
<div class="card" style="margin-bottom: 1.25rem;">
<div class="card-block">
<h3 class="card-title"><img src="assets/twitter.png" width="30" height="30" class="d-inline-block align-top" alt=""> Twitter</h3>
<p class="card-text">Any questions or queries, chat with us on twitter!</p>
<a href="https://twitter.com/NCSiesta" class="btn btn-ncsiesta">@NCSiesta</a></div>
</div>
<div class="card" style="margin-bottom: 1.25rem;">
<div class="card-block">
<h3 class="card-title"><img src="assets/instagram.png" width="30" height="30" class="d-inline-block align-top" alt=""> Instagram</h3>
<p class="card-text">Show us some support over on our instagram page!</p>
<a href="https://instagram.com/NCSiesta" class="btn btn-ncsiesta">@NCSiesta</a></div>
</div>
<div class="card" style="margin-bottom: 1.25rem;">
<div class="card-block">
<!--Form-->
<p class="lead">Contact Form</p>
<form method="post" role="form">
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Your Name">
</div>
<div class="form-group">
<input type="email" name="email" class="form-control" placeholder="Your Email">
</div>
<div class="form-group">
<input type="text" name="message" class="form-control" style="padding-bottom:40px;" placeholder="Message">
</div>
<br>
<div class="checkbox">
<label class="custom-control custom-checkbox">
<input type="checkbox" name="check" class="custom-control-input">
<span class="custom-control-indicator"></span><span class="custom-control-description">I am human</span></label>
</div>
<div align="center">
<input type="submit" name="submit" class="btn btn-ncsiesta" value="Submit">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hidden-lg-up">
<div class="container">
<hr class="my-4">
<div class="rowContact">
<!--Form-->
<p class="lead">Contact Form</p>
</div>
<div class="rowContact">
<form method="post" role="form">
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Your Name">
</div>
<div class="form-group">
<input type="email" name="email" class="form-control" placeholder="Your Email">
</div>
<div class="form-group">
<input type="text" name="message" class="form-control" style="padding-bottom:40px;" placeholder="Message">
</div>
<div class="checkbox">
<label class="custom-control custom-checkbox">
<input type="checkbox" name="check" class="custom-control-input">
<span class="custom-control-indicator"></span><span class="custom-control-description">I am human</span></label>
</div>
<div align="center">
<input type="submit" name="submit" class="btn btn-ncsiesta" value="Submit">
</div>
</form>
</div>
</div>
</div>
<footer>
<div class="footerBlue">
<div class="container">
<div class="row justify-content-around">
<div class="col-auto">
<ul class="social-network social-circle">
<li><a class="icoMail" title="Mail"><i class="fa fa-envelope"></i></a></li>
<li><a href="https://www.facebook.com/events/2005754382977812/" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
<li><a href="https://twitter.com/NCSiesta" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="https://www.instagram.com/NCSiesta/" class="icoInstagram" title="Instagram" ><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="legal">
<p>Copyright © NCSiesta 2017. All Rights Reserved. I don't know what this means.</p>
</div>
</div>
</div>
</div>
</footer>
<script>
$(function() {
$('div.panorama').paver();
});
</script>
<script>
$(document).ready(function() {
$(window).fadeThis({reverse: false, speed: 500, offset: -300});
});
</script>
<script type="text/javascript">
var shine = new Shine(document.getElementById('shine'));
function handleMouseMove(event) {
shine.light.position.x = event.clientX;
shine.light.position.y = event.clientY;
shine.draw();
}
window.addEventListener('mousemove', handleMouseMove, false);
</script>
<script>
$(function() {
$('body').removeClass('fade-out');
});
</script>
<script type="text/javascript">
$(function() {
// Paver
$('div.panorama').paver();
});
</script>
<script>
$(document).ready(function ($) {
$('.cycle').cyclotron();
});
</script>
</body>
</html>