Skip to content

Instantly share code, notes, and snippets.

@dgreen22

dgreen22/Application.js

Created November 6, 2015 17:00
Show Gist options
  • Save dgreen22/525c7b78389d60bdeabb to your computer and use it in GitHub Desktop.
Save dgreen22/525c7b78389d60bdeabb to your computer and use it in GitHub Desktop.
Download ZIP
DGreen-devsite
Raw
Application.js
function initMap() {
var mapOptions = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: new google.maps.LatLng(43.642440,-79.374328),
styles: [{"featureType":"administrative","stylers":[{"visibility":"off"}]},{"featureType":"poi","stylers":[{"visibility":"simplified"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"simplified"}]},{"featureType":"water","stylers":[{"visibility":"simplified"}]},{"featureType":"transit","stylers":[{"visibility":"simplified"}]},{"featureType":"landscape","stylers":[{"visibility":"simplified"}]},{"featureType":"road.highway","stylers":[{"visibility":"off"}]},{"featureType":"road.local","stylers":[{"visibility":"on"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"visibility":"on"}]},{"featureType":"water","stylers":[{"color":"#84afa3"},{"lightness":52}]},{"stylers":[{"saturation":-17},{"gamma":0.36}]},{"featureType":"transit.line","elementType":"geometry","stylers":[{"color":"#3f518c"}]}]
});
var mapElement = document.getElementById('map');
var map = new google.maps.Map(mapElement, mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(43.642440,-79.374328),
map: map,
title: 'Home Office'
});
}
$(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;
});
});
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">
<title>I am David Green</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Itim' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Playfair+Display:900,400' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/styles_index.css"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDHZ_Wl5IWLy7ypTwcLXGBMY1_FvRcsOm0&callback=initMap"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
</head>
<body data-spy="scroll" data-target=".navbar">
<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="dg">
<a class="navbar-brand" href="#">David Green</a>
</div>
</div><!--.navbar-header end-->
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right nav-tabs">
<li ><a href="#index">Home</a></li>
<li ><a href="#services">Services</a></li>
<li ><a href="#bio">Bio</a></li>
<li class="dropdown" role="presentation">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Portfolio<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#portfolio">E-Commerce</a></li>
<li><a href="#portfolio">Non-Profit</a></li>
<li><a href="#portfolio">Real Estate</a></li>
<li><a href="#portfolio">FinTech</a></li>
</ul><!--.dropdown-menu-->
</li> <!--.dropdown end-->
<li ><a href="#contact">Contact</a></li>
</ul>
</div><!--#myNavbar end-->
</div><!--.container-fluid end-->
</nav>
<div class="header" id="index">
<img src="img/make-your-own-path.jpg" id="header-image" class="img-responsive" alt="path image">
<h1 class="header-text">Where is your business going to take you?</h1>
</div>
<div class="container" id="services">
<div class="row services-row">
<div class="col-xs-12 col-md-4">
<div class="dev-services">
<h3> Web Development </h3>
<p> Developing the site of your dreams</p>
</div> <!--.dev-services end-->
</div>
<div class="col-xs-12 col-md-4">
<div class="design-services">
<h3> Web Design </h3>
<p> Designing your online presence to ensure you maximize R.O.I. </p>
</div> <!--.design-services end-->
</div>
<div class="col-xs-12 col-md-4">
<div class="consult-services">
<h3> Business Consulting </h3>
<p> Your business is your baby. I get it. Let's focus on growing it to serve your needs.</p>
</div> <!--.consult-services end-->
</div>
</div> <!--.row end-->
</div> <!--#services .container end-->
<div class="container">
<div class="row" id="bio">
<div class="col-md-6 col-xs-12">
<img src="img/me-me.JPG" class="david-pic" alt="David G image">
</div>
<div class="col-md-6 col-xs-12">
<h3 class="bio-header">About Me</h3>
<p class="bio-describe">Driven. Motivated. Focused. Continously expecting more from myself, to make others better, and to impact the world. </p>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">My Resume</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">David Green Resume</h4>
</div>
<div class="modal-body dg-modal">
<embed id="dg-resume" src="img/Sample-Resume.pdf">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div> <!--col-md-6 col-xs-12 end -->
</div> <!--.row #bio end-->
<h3 class="portfolio-header" id="portfolio">Portfolio</h3>
<div class="row portfolio-row">
<div class="col-xs-6 col-md-3">
<div class="view view-first">
<img src="img/ecommerce.jpg" class="portfolio-image" id="ecommerce" />
<div class="mask">
<h2>E-Commerce</h2>
<p>E-commerce sites that will drive more sales and more profits for your business.</p>
<a href="#" class="info">See More</a>
</div>
</div> <!--.view-first end-->
</div><!--col-xs-6 col-md-3 end-->
<div class="col-xs-6 col-md-3">
<div class="view view-first">
<img src="img/nonprofit.jpg" class="portfolio-image" id="nonprofit" />
<div class="mask">
<h2>Non-Profit</h2>
<p>Non-profit sites that will capture the heart of your donors.</p>
<a href="#" class="info">See More</a>
</div>
</div>
</div>
<div class="col-xs-6 col-md-3">
<div class="view view-first">
<img src="img/realestate.jpg" class="portfolio-image" id="realestate" />
<div class="mask">
<h2>Real Estate</h2>
<p>Real estate sites that will help you sell more homes, more often.</p>
<a href="#" class="info">See More</a>
</div>
</div>
</div>
<div class="col-xs-6 col-md-3">
<div class="view view-first">
<img src="img/fintech.jpg" class="portfolio-image" id="fintech" />
<div class="mask">
<h2>FinTech</h2>
<p>Fintech sites that will drive your business into the future of the financial industry.</p>
<a href="#" class="info">See More</a>
</div>
</div>
</div>
</div><!--.row .portfolio end-->
<h3 class="contact-header" id="contact"> Drop me a line </h3>
<div class="row" id="contact-row">
<div class="col-xs-12 col-md-4">
<img class="mugpic">
<h2>David Green</h2>
<h4>Phone: 416-455-5755</h4>
<h4>Email: [email protected]</h4>
<div id="map"></div>
</div>
<div class="col-xs-12 col-md-8">
<form role="form" class="contact-form">
<div class="form-group">
<label for="name">Name: *</label>
<input type="text" class="form-control" required="required" id="name">
</div>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" required="required" class="form-control" id="email">
</div>
<div class="form-group">
<label for="phone">Contact Number: *</label>
<input type="tel" class="form-control" id="telephone">
</div>
<div class="form-group">
<label for="Description">Drop me a line: *</label>
<textarea rows="3" required="required" type="text" class="form-control" id="description">
</textarea>
</div>
<button type="submit" class="btn btn-default contact-button">Submit</button>
</form>
</div>
</div>
</div> <!--div container end-->
<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_index.css
* {
box-sizing: border-box;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
margin-top: 30px;
height: 250px;
}
/***-----------------------------navbar------------------------------------------***/
.navbar {
background-color: #660066;
}
.dg a {
text-transform: uppercase;
}
/***----------------------------Header----------------------------------------------**/
.header {
margin-bottom: 350px;
}
#header-image {
position: absolute;
display: block;
opacity: 0.55;
}
.header-text {
position: relative;
display: inline-block;
color: white;
padding-top: 250px;
text-align: center;
width: 100%;
font-weight: bold;
font-size: 60px;
font-family: 'Open Sans Condensed', sans-serif;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
/***-------------------------------------------Services-------------------------------***/
.services-header{
font-family: 'Itim', cursive;
font-size: 40px;
}
#services h3 {
font-family: 'Itim', cursive;
font-size: 40px;
padding-top: 100px;
}
#services {
background-color:
}
#services p {
font-family: Arial, Helvetica, sans-serif;
}
.services-row {
padding-top: 70px;
padding-bottom: 120px;
}
/***-----------------------------------------Bio----------------------------------***/
#bio {
padding: 100px 140px;
display: block;
background-color: #E0E0D1;
vertical-align: middle;
}
.bio-header {
font-family: 'Itim', cursive;
font-size: 40px;
}
.david-pic {
width: 50%;
min-width: 50%;
min-height: 50%;
}
#dg-resume{
height: 400px;
width: 500px;
display: block;
margin-right: auto;
margin-left: auto;
}
/***---------------------------------------------------Portfolio-------------------------------------***/
.portfolio-header {
font-family: 'Itim', cursive;
font-size: 40px;
}
#portfolio{
padding-top: 100px;
}
.portfolio-row {
margin: 10px 50px 30px -40px;
}
.portfolio-image {
width: 100%;
}
.view {
width: 300px;
height: 200px;
margin: 10px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff url(../img/bgimg.jpg) no-repeat center center
}
.view .mask, .view .content {
width: 300px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0
}
.view img {
display: block;
position: relative
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
box-shadow: 0 0 1px #000
}
.view a.info:hover {
box-shadow: 0 0 5px #000
}
.view-first img {
transition: all 0.2s linear;
}
.view-first .mask {
opacity: 0;
background-color: rgba(219,127,8, 0.7);
transition: all 0.4s ease-in-out;
}
.view-first h2 {
transform: translateY(-100px);
opacity: 0;
transition: all 0.2s ease-in-out;
}
.view-first p {
transform: translateY(100px);
opacity: 0;
transition: all 0.2s linear;
}
.view-first a.info{
opacity: 0;
transition: all 0.2s ease-in-out;
}
.view-first:hover img {
transform: scale(1.1);
}
.view-first:hover .mask {
opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
opacity: 1;
transform: translateY(0px);
}
.view-first:hover p {
transition-delay: 0.1s;
}
.view-first:hover a.info {
transition-delay: 0.2s;
}
/***----------------------------------------------Contact--------------------------------------------------***/
.contact-header{
font-family: 'Itim', cursive;
font-size: 40px;
padding-top: 30px;
margin-bottom: 10px;
}
#contact{
padding-top: 100px;
}
#contact-row {
background-attachment: fixed;
background-image: url("../img/mug.jpg");
background-size: cover;
color: white;
margin-bottom: 30px;
height: 450px;
}
#contact-row h2 {
margin-top: 5px;
font-family: 'Playfair Display', serif;
font-weight: bold;
font-size: 40px;
}
#contact-row h4{
font-family: 'Playfair Display', serif;
font-size: 25px;
}
.contact-form{
padding-top: 25px;
}
.contact-button {
margin-top: 10px;
margin-bottom: 20px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment