Skip to content

Instantly share code, notes, and snippets.

@Kaiserhaynes

Kaiserhaynes/index.html

Created November 24, 2015 01:19
Show Gist options
  • Save Kaiserhaynes/47710f1671c1ee60aff5 to your computer and use it in GitHub Desktop.
Save Kaiserhaynes/47710f1671c1ee60aff5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<! doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Contact me</title>
<!-- jQuery script -->
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="js/scripts.js"></script>
<!--[if lt IE 9]><script src="dist/html5shiv.js"></script>
<![endif]-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- stylesheets below here -->
<link rel="stylesheet" href="css/styles.css">
</head>
<body class="background">
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand">
<a href="index.html">David Haynes</a>
</div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="contact.html">Contact Me</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="faq.html">F.A.Q</a></li>
<li><a href="about.html">About Me</a></li>
</ul>
</div>
</div>
</div>
</nav>
<!-- Content -->
<div class="container-fluid" id="contact">
<div class="contact-header">
<h1>David Haynes</h1>
<p>Contact Me</p>
</div>
<div class="container-fluid">
<div class="row" id="contact-form">
<div class="col-md-7 col-md-5">
<div class="text_transbox">
<p class="contact-text">I am here to help you with your web project from beginning to completion. If you would like to get in contact with me to start a project that would best suit your needs. Do not hesitate to send me an email:</p>
<a href="mailto:donovan@donovanclarke.com"><span class="glyphicon glyphicon-envelope" data-toggle="tooltip" title="Email me"></span></a>
<p class="contact-text">davidhaynesjoseph@gmail.com</p>
</div>
</div>
<div class="col-md-7 col-md-5">
<h3>Talk to me!</h3>
<p id="visible-comment"></p>
<form>
<div class="form-group">
<label for="name">Name*</label>
<input type="text" class="form-control" id="name" placeholder="Enter name">
</div>
<div class="form-group">
<label for="tel">Telephone number (optional)</label>
<input type="tel" class="form-control" id="tel" placeholder="Enter phone number (optional)">
</div>
<div class="form-group">
<label for="email">Email address*</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="message">Your message below.</label><br>
<textarea style="resize:none" cols="40" rows="5" placeholder="Your message here" class="message-box" id="message" minlength=5></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default" id="button">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap Core JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></script>
</body>
Raw
script.js
$(document).ready(function(){
$(".message-box").css("background-color", "pink");
$("#button").on("click", function() {
var comment = $(".message-box").val();
comment = comment.toUpperCase();
$("#visible-comment").html(comment);
console.log(comment);
var addTooComment = (comment + " !!!!!");
console.log(addTooComment);
return false;
// no code here.
}); // this closes the function.
}); // here we close the document ready. no more code below here
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment