Skip to content

Instantly share code, notes, and snippets.

@dgreen22

dgreen22/Application.js

Last active November 3, 2015 15:50
Show Gist options
  • Save dgreen22/9061fa8ae5ae66b01b37 to your computer and use it in GitHub Desktop.
Save dgreen22/9061fa8ae5ae66b01b37 to your computer and use it in GitHub Desktop.
Download ZIP
CF First Page
Raw
Application.js
//Twitter
!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');
var myKitties = [ { title: "First Project", pic: "https://www.petfinder.com/wp-content/uploads/2012/09/Blog-Kitty-Cam-solo.jpg" }, { title: "Second Project", pic: "http://www.animal-photography.com/thumbs/red_tabby_long_hair_kitten_~AP-0UJFTC-TH.jpg" },
{ title: "Third Project", pic: "http://www.animal-photography.com/thumbs/silver_tabby_kittens~AP-0JO6Y9-TH.jpg" },
{ title: "Fourth Project", pic: "http://www.animal-photography.com/thumbs/silver_tabby_kitten_looking_up~AP-0DLVMB-TH.jpg" }
];
function initMap() {
var myLatLng = {lat: 43.642230, lng: -79.374778};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Downtown H.O.'
});
}
$(document).ready(function(){
//Smooth Scrolling
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;
});
//Tooltips
$(function () {
$('#goodguy').tooltip();
});
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
//Stellar
$(function() {
$.stellar();
});
//keyup//
$(".message-box").on("keyup", function(){
console.log("keyup happened");
var charCount = $(".message-box").val().length;
console.log(charCount);
$("#char-count").html(charCount);
if (charCount > 50){
$("#char-count").css("color","red");
} else {
$("#char-count").css("color","black");
}
});
$('.message-box').css("background-color", "pink");
//form button//
$('.contact-submit').on("click",function() {
var comment = $(".message-box").val();
x = comment.toUpperCase();
$('#visible-comment').html(x);
return false;
});
for(var i=0; i<myKitties.length; ++i) {
$( "#" + i ).css("background-image", "url(" + myKitties[i].pic + ")" );
};
$(".image").mouseenter( function() {
console.log(myKitties[this.id].title);
$(this).html("<p class='info'><span class='proj-title'>Title:</span> " + myKitties[this.id].title + "</p>");
}).mouseleave( function() {
$("p.info").html("");
});
//var rows = $(".my-row");
//console.log(rows);
//for(var i=0; i<rows.length; ++i) {
// if (i%2===0) {
// $(rows[i]).css("background-color","gray");
// };
//};
});
Raw
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Hello World!</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Custom styles for this template go here -->
<link rel="stylesheet" href="css/styles.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-target=".navbar">
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid"> <!--nav container-->
<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="DavidGreen navbar-brand">
<a href="#">David Green</a>
</div>
</div> <!--End Navbar Header-->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right nav-tabs">
<li><a href="#index">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Work <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#project1">Project 1</a></li>
<li><a href="#project2">Project 2</a></li>
</ul>
</li>
<li><a href="#faq">FAQ</a></li>
</ul>
</div> <!--navbar-collapse end-->
</div><!--container-fluid end-->
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<!--<div class="jumbotron">
<div class="container">
<h1>David Green - Developer Extraordinaire</h1>
<p> <strong> Coding For the World. </strong> </p>
</div><! /container -->
<!---</div> /jumbotron end-->
<div class="container-fluid anchor" id="index">
<!-- Example row of columns -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item typewriter active">
<img src="img/New1.jpg" alt="New1">
<div class="carousel-caption">
<h2>Think It.</h2>
<p>What's your vision?</p>
</div>
</div>
<div class="item keyboard">
<img src="img/New2.jpeg" alt="New2">
<div class="carousel-caption">
<h2>Create It.</h2>
<p>How will you build it?</p>
</div>
</div>
<div class="item table">
<img src="img/New3T.jpeg" alt="New3">
<div class="carousel-caption">
<h2>Live It.</h2>
<p>How does it come to life?</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="row">
<div class="col-md-4 col-xs-12">
<h2>Portfolio Concept</h2>
<p>My portfolio focuses on ROI for my clients. A great looking site is fantastic, but a great looking site that generates proven higher ROI is even better! </p>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="See More Portfolios">View More</button>
</div><!-- /col -->
<div class="col-md-4 col-xs-12">
<h2>Project Goals</h2>
<p> I can commit around 25-35 hours per week and I'm aggresively hoping to be functional at coding by very early 2016 as I want to build out a new version of a website of a business I've founded and currently run by late January. </p>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="See More Project Goals">View More</button>
</div><!-- /col -->
<div class="col-md-4 col-xs-12">
<h2>Course Goals</h2>
<p>I'm looking to become a freelance web developer so I have the flexibility to grow my own business as well as any other businesses that cross my path in the future.</p>
<button type="left" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="See More Course Goals">View More</button>
</div><!-- /col -->
</div><!-- /row -->
<hr>
</div> <!-- /container -->
<!--About Page Below-->
<div class="container" id="about">
<div class="row DavidG">
<div class="col-sm-12">
<div class="image-me">
<img src="img/me-me.jpg" alt="DavidG">
</div> <!--end of image class-->
</div> <!--end of col-sm-6-->
</div> <!--end of DavidG div-->
<div class="row inside-about">
<div class="col-md-4 col-xs-12">
<h2> Who am I? </h2>
<p> I'm more than a developer-to-be. I'm a cool guy with great aspirations! </p>
</div>
<div class="col-md-4 col-xs-12">
<ul id="skill-list">
<h2> My Skills </h2>
<ul>
<li> HTML, CSS, Bootstrap</li>
<li> Being a <a href="http://milspecmonkey.com/store/365-large_atch/goodguy.jpg" title="My Good Guy Twin" id="goodguy" target="_blank"> good guy</a> </li>
</ul>
</ul>
</div>
<div class="col-md-4 col-xs-12">
<h2> 3rd column </h2>
<p> 3rd column stuff </p>
</div>
</div> <!--row class ends-->
<div class="row">
<div class="col-xs-12 more-about">
<h3> More about me </h3>
<p> Part man. Part amazing. Mere mortal. I have a zest for life, and believe in fulfilling a purpose. Helping you with your web dev needs isn't exactly my purpose, but I love doing it and I love working with growing companies and aspiring entrepreneurs. And believe it or not, it's a stepping stone towards that purpose.</p>
</div>
</div><!--row class end-->
</div> <!--container ends-->
<!--Contact Page Below-->
<div class="container anchor" id="contact" data-stellar-background-ratio="0.5">
<div class="row" "contactrow">
<div class="col-md-4">
<div class="jumbotron-contact">
<h1> David Green </h1>
<h2> Web Developer Extraordinaire</h2>
<p>
<span class="glyphicon glyphicon-map-marker"></span>
Address: Toronto, Canada
<br>
<span class="glyphicon glyphicon-phone"></span>
Phone number: 416-455-5755
<br>
<span class="glyphicon glyphicon-envelope"></span>
Email: David.e.green@gmail.com
</p>
<div class="ContactMe">
<p> Contact me any time for any web developer needs. </p>
</div>
</div> <!--jumbotron-contract end -->
</div> <!--col-md-4 end -->
<form>
<div class="col-md-4">
<div class="form-group name-form">
<label for="name"> Name * </label>
<input placeholder="Your Name" required="required" type="text" id="name" class="form-control">
</div>
</div><!--col-md-4 end-->
<div class="col-md-4">
<div class="form-group phone-form">
<label for="phone"> Phone </label>
<input placeholder="987-765-4321" type="tel" minlength="10" id="phone" class="form-control">
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<label for="addy"> Email *</label>
<input placeholder="youremail@gmail.com" required="required" type="email" class="form-control" id="addy">
</div>
<div class="form-group">
<label for="message"> Message * </label>
<textarea placeholder="Your message here" required="required" id="message" class="message-box" type="text" style="resize:none"></textarea>
</div>
<button type="submit" class="btn btn-success contact-submit" id="button"> Submit </button>
</div><!--col-md-8 class end-->
</form>
</div> <!--row end-->
<p ID="visible-comment"></p>
<p ID="char-count"></p>
</div> <!--container end-->
<!--Work Page below-->
<div class="container anchor" id="work">
<h1> Work </h1>
<div class="row" id="first">
<div class="col-lg-3 col-md-3 col-xs-6 pro pro1 ">
<div class="image" id="0"></div>
</div>
<div class="col-lg-3 col-md-3 col-xs-6 pro pro2">
<div class="image" id="1"></div>
</div>
<div class="col-lg-3 col-md-3 col-xs-6 pro pro3">
<div class="image" id="2"></div>
</div>
<div class="col-lg-3 col-md-3 col-xs-6 pro pro4">
<div class="image" id="3"></div>
</div>
</div>
</div>
<!--FAQ Page below-->
<div class="container anchor" id="faq">
<div class="row">
<h4 class="learn-more"> Learn More </h4>
<div class="modal-button">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
</div>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Resume</h4>
</div>
<div class="modal-body">
<embed id="dg-resume" src="img/Sample-Resume.pdf">
</div>
</div>
</div>
</div>
</div>
<h1> Frequently Asked Questions </h1>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data- parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
How many hours a week do you work?
</a>
</h4>
</div><!--panel heading-->
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
A lot.
</div>
</div><!--panel-collapse close-->
</div><!--panel panel-default-->
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Have you started a business before?
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
Yes. Multiple.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
How are you different from anyone else?
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
My sales and marketing background drive me to focus a lot more than just function and design of your site - but ultimately ROI. (i.e. Is this getting you closer to your goal)
</div>
</div><!--panel-collapse div end-->
</div><!--panel panel-default end-->
<!--<iframe id="g-map" width="100%" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJmc9YYSnL1IkRQikvAz2XTAo&key=AIzaSyAVNTz7dDRpCK4Oa9Womz9edOaZ_WWCOI8" allowfullscreen></iframe>-->
<h2 class="loc-head">Location</h2>
<div id="map"></div>
<table class="price-table table-striped table-hover">
<tr class="price-header my-row">
<th>Package 1</th>
<th>Package 2</th>
<th>Package 3</th>
</tr>
<tr class="my-row">
<td>$499</td>
<td>$999</td>
<td>$1999</td>
</tr>
<tr class="my-row">
<td>Some features</td>
<td>More features</td>
<td>All features</td>
</tr>
<tr class="my-row">
<td>Small</td>
<td>Medium</td>
<td>Large</td>
</tr>
</table>
<div class="youvideo">
<iframe width="560" height="315" src="https://www.youtube.com/embed/jC4gs44zQtY" frameborder="0" allowfullscreen></iframe>
</div>
<footer class="footer">&copy; David Green 2015
<a href="https://twitter.com/Breeze_St" class="twitter-follow-button" data-show-count="false">Follow @Breeze_St</a>
<div class="fb-like" data-href="https://www.facebook.com/BreezeStreet" data-layout="button" data-action="like" data-show-faces="true" data-share="true"></div>
</footer>
</div><!--panel group end-->
</div><!--div container end-->
<!-- ============================= -->
<!-- All your JavaScript comes now -->
<!-- ============================= -->
<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/js/bootstrap.min.js"></script>
<!-- Can place script tags with JavaScript files here -->
<script src="js/application.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDHZ_Wl5IWLy7ypTwcLXGBMY1_FvRcsOm0&callback=initMap">
</script>
</body>
</html>
Raw
styles.css
html body {
position: relative;
height: 100%;
margin: 0;
padding: 0;
}
/***index***/
.carousel-inner {
height: 748px;
}
.contact-submit{
margin-top: 10px;
margin-bottom: 5px;
}
.message-box{
width: 100%;
height: 3em;
color: black;
}
.name-form{
margin-top: 10px;
}
.phone-form{
margin-top: 10px;
}
.learn-more{
float: left;
text-align: left;
margin-left: 5px;
}
.modal-button{
float: right;
padding-left: 15px;
margin-right: 5px;
}
.DavidGreen a {
text-transform: uppercase;
color: white;
}
.item p{
font-size: 3em;
}
.keyboard p {
color: blue;
}
.keyboard h2{
color: blue;
}
.item h2{
font-size: 4em;
}
.container-fluid{
padding-right: 0px;
padding-left: 0px;
}
#work {
padding-top: 100px;
}
/***Contact Page***/
.ContactMe {
padding-top: 25px;
}
.data-stellar-background-ratio{
background-attachment: fixed;
}
/*typography*/
h1, h2, h3, p, li, {
font-family: montserrat, helvitica, sans-serif;
text-align: left;
}
.jumbotron-contact h1 {
font-size: 4em;
}
#contact{
background-image: url("../img/contactpic.jpg");
color: white;
background-size: cover;
background-attachment: fixed;
}
.glyphicon:hover {
color: blue;
}
/**work page**/
.pro p{
padding-left: 10px;
padding-right: 10px;
}
#dg-resume {
margin-left: auto;
margin-right: auto;
display: block;
height: 360px;
width: 100%;
}
.loc-head{
margin-top: 50px;
}
#map{
height: 460px;
width: 100%;
margin-top: 30px;
}
.image {
box-sizing:border-box;
border:2px solid pink;
width:200px;
height:200px;
margin:5px;
display:inline-block;
position:relative;
}
.info {
display:inline-block;
color:#fff;
font-family:Futura;
text-transform:uppercase;
font-weight:700;
letter-spacing:0.5em;
line-height:1.6;
position:absolute;
top:15%;
left:22%;
}
.proj-title {
font-weight:100;
}
/***faq page***/
.panel-body {
font-family: montserrat, helvitica, sans-serif;
}
.panel-title {
font-weight: bold;
color: white;
}
.container .panel-heading {
background-color: blue;
}
#faq {
padding-top: 100px;
}
.price-table{
margin-top: 30px;
margin-left: auto;
margin-right: auto;
font-size: 25px;
}
.price-header > th{
background-color: black;
color: white;
text-align: center;
}
td {
padding: 2px 5px;
text-align: center;
}
/**About Me Page**/
* {box-sizing: border-box;}
.more-about {
margin-left: 20px;
}
.container {
width: 80%;
margin: 0 auto;
}
.picture {
width: 100%;
}
.image-me {
display: block;
padding-left: 300px;
height: auto;
}
.inside-about {
margin-left: 20px
}
.youvideo {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}
.youvideo iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 50px;
}
#goodguy:link {
color: red;
}
#goodguy:visited {
color: purple;
}
/***footer***/
.footer {
position: absolute;
bottom: 0;
width: 100%;
padding-top: 10px;
background-color: #f5f5f5;
}
.fb-like{
padding-left: 10px;
}
@Scosentino
Copy link

Go ahead and delete all the code you have commented out

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment