Skip to content

Instantly share code, notes, and snippets.

@ThisBenRoberts

ThisBenRoberts/conact.html

Created July 27, 2015 04:23
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ThisBenRoberts/deb77970bcb948205c9f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ThisBenRoberts/deb77970bcb948205c9f to your computer and use it in GitHub Desktop.
Download ZIP
my_cf_project_final copy_ex_17
Raw
conact.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Contact</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/nav_style.css" rel="stylesheet">
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- jQuery is required for Bootstrap to work -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- Custom styles for this template go here -->
<link href="css/contact_styles.css" rel="stylesheet">
<link href="css/media_styles.css" rel="stylesheet">
<link href="css/nav_style.css" rel="stylesheet">
<!-- custom jQuery -->
<script src="js/scripts.js"></script>
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> <!-- /Script for Twitter Button -->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" data-toggle="collapse" data-target=".navbar-collapse" >
<div class="container-fluid">
<div class="navbar-header" ><!-- get rid ofthis border -->
<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="projectName">
<a href="#">Ben Roberts</a>
<a href="https://twitter.com/901_ideas" class="twitter-follow-button" data-show-count="false">
Follow @901_ideas</a>
</div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav"><!-- style="background-color:#333333" -->
<li><a href="index.html">Home</a></li>
<li><a href="index.html#work">Work</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="index.html#about">About</a></li>
<li><a href="index.html#faq">FAQ</a></li>
</ul>
</div>
</div>
</nav> <!-- /nav -->
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Contact Me<br><span class="vols">GO VOLS!!!</span></h1>
<p><strong>Let me solve your development problems.</strong></p>
<a href="https://google.com">Learn More</a>
</div>
</div>
<div class="container-fluid anchor" id="contact">
<div class="col-sm-8 col-md-8 col-lg-8" >
<form>
<div class="form-group">
<label for="name"> Your Name: </label>
<input placeholder="First and Last Name" type="text" class="form-control" required=”required” name="flname" id="name">
</div>
<div class="form-group">
<label for="teln"> Phone Number: </label>
<input placeholder="Phone Number" type=”tel” minlength="10" maxlength="12" class="form-control" name="teln" id="teln" > <!-- pattern="{3}[\-]\d{3}[\-]\d{4}" -->
</div>
<div class="form-group">
<label for="email"> Email Address: </label>
<input placeholder="Email" type="email" class="form-control" required=”required” name="email" id="email">
</div>
<div class="form-group">
<label for="message"> Let me know what you think: </label>
<textarea placeholder="What's on your mind?" style="width:100%; resize:none; color:black" rows="3" class="message-box" required=”required” name="message" id="message"></textarea><p id="charCount"></p>
</div>
<button type="submit" class="btn btn-default" id="button">Send</button>
</form>
</div>
<!-- Example row of columns -->
<!-- <div class="row" > -->
<div class="col-md-4 col-lg-4" >
<h2><span class="glyphicon glyphicon-envelope"></span> E-Mail</h2>
<p>BenRobertsMemphis@gmail.com or 901ideas@gmail.com </p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
</div> <!-- /contact container -->
<div class="col-md-8 col-md-offset-2">
<h1 id="visible-comment"></h1>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2><span class="glyphicon glyphicon-envelope"></span> E-Mail</h2>
<p>BenRobertsMemphis@gmail.com or 901ideas@gmail.com </p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h2><span class="glyphicon glyphicon-send"></span> Snail Mail</h2>
<p>Located in East Memphis, you can find me at the corner of Walnut Grove and Yates, a block east of I-240.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h2><span class="glyphicon glyphicon-earphone"></span> The Phone</h2>
<p>You could call or text me as well. 901-555-4887</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
</div>
<div class="row smoke">
<h2><span class="glyphicon glyphicon-alert"></span> Smoke Signals</h2>
<p>Currenly Unavailable but please check back soon.</p>
<!-- <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p> -->
</div>
<hr>
</div> <!-- /container -->
<!--
================================================== -->
<!-- Can place script tags with JavaScript files here -->
<script type="text/javascript">
var $root = $('html, body');
$('.navbar-nav a').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top}, 500, function () {
window.location.hash = href;
});
return false;
});
</script>
</body>
</html>
Raw
scripts.js
$(document).ready(function(){
//all your code goes in here
//Make sure the file is linked correctly
// alert("Document is ready!")
//Color the message box of the contact form
$(".message-box").css("background-color", "pink");
$("#button").on("click",function(){
console.log("clicked");
var comment = $(".message-box").val();
console.log(comment)
$("#visible-comment").html(comment);
return false;
});
$(".message-box").on("keyup", function() {
console.log("keyup happened!");
var charCount = $(".message-box").val().length;
console.log(charCount);
$("#charCount").html(charCount);
if(charCount > 50) {
// need to turn character count red
$("#charCount").css("color","red");
}
else {
// need it to be black
$("#charCount").css("color","black");
};
});
}); // here we close the doc ready. no more code below here
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment