Skip to content

Instantly share code, notes, and snippets.

@khazelton77

khazelton77/index.html

Created May 4, 2016 01:14
Show Gist options
  • Save khazelton77/71fcbc2a73031f432353336f017b4711 to your computer and use it in GitHub Desktop.
Save khazelton77/71fcbc2a73031f432353336f017b4711 to your computer and use it in GitHub Desktop.
Download ZIP
Final interactive website
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>Keri Hazelton. Web Developer Extraordinaire!</title>
<link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<!-- Bootstrap core CSS -->
<script src="js/jquery.min.js"></script>
<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">
<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>
<span class="icon-bar"></span>
</button>
<div class="keriHazelton navbar-brand">
<a href="#">Keri Hazelton</a>
</div><!-- end keriHazelton -->
</div><!-- end navbar header -->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right"> <!-- list for navbar -->
<li><a href="#contact">Contact</a></li>
<li><a href="#faq">FAQ</a></li>
<li><a href="#about">About</a></li>
<li><a href="#work">Work</a></li>
</ul> <!-- end nav list -->
</div><!-- end navbar collapse -->
</div><!-- end nav container-fluid -->
</nav> <!-- end navbar -->
<!-- Main jumbotron for a primary marketing message or call to action -->
<!--<div class="jumbotron"> -->
<div class="container-fluid">
<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 active">
<img src="img/light-it-up.jpg" alt="Image One">
<div class="carousel-caption">
<h3>Keri Hazelton</h3>
<p>Web Developer, Extraordinaire!</p>
</div>
</div>
<div class="item">
<img src="img/high-tech.jpg" alt="Image Two">
<div class="carousel-caption">
<h3>Any project, big or small...</h3>
<p>I'm here to help.</p>
</div>
</div>
<div class="item">
<img src="img/dream-world.jpg" alt="Image Three">
<div class="carousel-caption caption-three">
<h3>Help me help you...</h3>
<p>Let's make your wildest dreams come true!</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><!-- /container-fluid -->
<div class="main-header">
<p><strong>Serving all of your web development needs.</strong></p>
<p>No project is to small or large. <a href="#about" title="More Information" id="item1">I</a> enjoy what I do, and you will see that in the results when you choose me to make your ideas a reality!</p>
</div> <!-- end main-header -->
<!--</div>/jumbotron -->
<!-- Example row of columns -->
<div class="container">
<div class="row portfolio-settings">
<div class="col-md-4">
<h2>Portfolio Concept</h2>
<p>I am coming from a background in the hospitality industry. I have been studying web development on my own for a few weeks now, and I am very excited to join the CareerFoundry team as a new student! I am looking forward to bringing my skills to a whole new level, as well as learning so many new things.</p>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">View details &raquo;</button>
</div><!-- /col -->
<div class="col-md-4">
<h2>Project Goals</h2>
<p>I plan to complete this project, and course in as little time as possible, while also getting everything possible from it. I am treating the course as if it were a job, so I will be committing to 30-40 hours per week minimum. </p>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">View details &raquo;</button>
</div><!-- /col -->
<div class="col-md-4">
<h2>Course Goals</h2>
<p>My plan for the future after this course is to become a freelance web developer, or to become employed remotely so that I will have the freedom to live and travel wherever I want. I want to learn multiple programming languages so that I am extremely desirable to anyone who may wish to make use of my services.</p>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">View details &raquo;</button>
</div><!-- /col -->
</div><!-- /row -->
</div> <!-- end container -->
<hr>
<div id="work" class="container anchor">
<div id="cols" class="row">
<h2>Work</h2>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle work-btn" type="button" data-toggle="dropdown">My Work
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="http://keri-calculator.bitballoon.com">Calculator</a></li>
<li><a href="#">Work Two</a></li>
<li><a href="#work3">Work Three</a></li>
<li><a href="#work4">Work Four</a></li>
<li><a href="#work5">Work Five</a></li>
<li><a href="#work6">Work Six</a></li>
<li><a href="#work7">Work Seven</a></li>
<li><a href="#work8">Work Eight</a></li>
</ul>
</div> <!-- /dropdown -->
<!--
<div id="work1" class="col-md-3 col-xs-6 top-buffer">
<img src="img/coming-soon.jpg" alt="Coming soon" class="img-responsive">
</div>
<div id="work2" class="col-md-3 col-xs-6 top-buffer">
<img src="img/coming-soon.jpg" alt="Coming soon" class="img-responsive">
</div>
<div id="work3" class="col-md-3 col-xs-6 top-buffer">
<img src="img/coming-soon.jpg" alt="Coming soon" class="img-responsive">
</div>
<div id="work4" class="col-md-3 col-xs-6 top-buffer">
<img src="img/coming-soon.jpg" alt="Coming soon" class="img-responsive">
</div>
<div id="work5" class="col-md-3 col-xs-6 top-buffer">
<img src="img/coming-soon.jpg" alt="Coming soon" class="img-responsive">
</div>
<div id="work6" class="col-md-3 col-xs-6 top-buffer">
<img src="img/coming-soon.jpg" alt="Coming soon" class="img-responsive">
</div>
<div id="work7" class="col-md-3 col-xs-6 top-buffer">
<img src="img/coming-soon.jpg" alt="Coming soon" class="img-responsive">
</div>
<div id="work8" class="col-md-3 col-xs-6 top-buffer">
<img src="img/coming-soon.jpg" alt="Coming soon" class="img-responsive">
</div> -->
</div> <!-- /row and cols -->
</div><!-- /container and work -->
<!-- About Section -->
<div data-stellar-background-ratio="0.005">
<div id="about" class="container anchor">
<div class="row row-centered">
<div class="about-header">
<h1>About Me</h1>
</div> <!-- /about-header -->
<div class="image column">
<div class="col-xs-4 col-md-4">
<img id="keri" src="img/keri1.jpg" alt="Keri">
</div> <!-- /col-m-4 -->
</div> <!-- /image and column -->
<div class="intro column">
<div class="col-xs-4 col-md-4">
<h2>Introduction</h2>
<p>My name is Keri Hazelton, and I am excited to introduce myself as a beginner web developer.</p>
</div> <!-- /col-md-4 -->
</div><!-- /intro and column -->
<div class="col-xs-4 col-md-4">
<h3 id="skillset">My Skills</h3>
<ul id="skill-list" class="skills column">
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
</div> <!-- /col-md-4 -->
</div> <!-- /row and row-centered-->
</div> <!-- /container, anchor and about -->
</div> <!-- /data-stellar -->
<!-- FAQ Section -->
<div data-stellar-background-ratio="0.005">
<div id="faq" class="container anchor">
<div class="row">
<h2 class="learn-more">Learn More</h2>
<!-- Large modal button -->
<div id="faq-button">
<button class="btn btn-primary modal-button" data-toggle="modal" data-target=".bs-example-modal-lg">Resume</button>
<!-- Large modal -->
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Sample Resume</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div> <!-- /modal header -->
<!-- Modal Body -->
<div class="modal-body">
<embed id="modalembed" src="img/resume.pdf">
</div> <!-- /modal-content -->
</div> <!-- /modal-dialog -->
</div> <!-- /modal fade -->
</div> <!-- /modal body -->
</div> <!-- /faq-button -->
<h2 id="faqhead">FAQ</h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
1. Why did you decide to become a web developer?
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
My decision to change careers, especially at my age, was something that took a lot of thought. Honestly, it might never have happened at all if I hadn’t had such a supportive partner and family. I had thought for a long time about a career in web development, but I just wrote it off as a dream of something that would never happen, like a daydream that got me through long, tough days at the front desks of various hotels. Some of those hotels had longer, tougher days than others, but that is a completely different story! Just suffice it to say that I have given this career a lot of thought, and I really feel that it chose me in the long run. I enjoy the process of creating, and since I have no drawing or singing ability, the best way for me to express myself creatively is through web development.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
2. Who are your clients?
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Anyone who wants a website or program that is written thoughtfully and with the utmost of care given to the smallest detail can be my client. I have a client with a side business creating metal sculptures (although she humbly calls them “yard art”) and at the other end of the spectrum I have a client that needs a program to deal with large amounts of data that she deals with daily in her sales business. I put the same amount of care into a project that is a hobby as I do one that deals with serious business matters. So, a short answer to the question is, “Anyone that needs me!”
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
3. What is your average turnaround time?
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
That is a question that does not have a definitive answer, because there are so many factors that come into play concerning the time that it takes to complete a project. I make it a point to prioritize my clients’ projects according to the urgency of their need for a finished product. I always commit to finishing each project as quickly as possible, while also guaranteeing that each piece of work that I put my name on is as close to perfect as is humanly possible.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFour">
4. What happens if you have a project that you can’t complete on your own?
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
I pride myself on giving my clients the best finished product possible, and sometimes that means that I must put aside my ego and ask for help. It happens to the best of us, and the very best of us also understand that knowing when to ask for help is the mark of a true professional. I have a network of close associates and friends that I can turn to on the rare occasion that I get stuck beyond repair. I always take into consideration the urgency of a project as well, meaning that if there is a rush to finish a particular piece of work, I will quickly evaluate whether I need to call in back up so that the client never has to suffer for the sake of my pride!
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFive">
5. Why did you choose CareerFoundry over a traditional university education?
</a>
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse">
<div class="panel-body">
That is a very good question, and one that I answer all the time! I carefully considered whether I would attend a traditional college to get a Bachelor’s or Master’s degree in Computer Science or if I would go in a different direction and pursue another type of education. I chose CareerFoundry based on a number of factors. First of all, the reviews from various alumni is fantastic and cannot be ignored. Also, I was anxious to get started working as soon as possible, while not ignoring the quality of the knowledge I needed to get me there. The value of a traditional degree is undeniable. That does not mean, however, that it is the best way to go for everyone. For me, at this stage of my life, I felt that what I needed was to get the best quality education that was available in the least amount of time. I felt, and now have seen firsthand, that CareerFoundry offered a unique combination of speed and quality that just fit me like a glove. They also offer a lifetime of support that offers a valuable network of alumni and staff that will be of great service for years to come.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Contact Section -->
<div id="contact" class="container anchor">
<div class="row contact-info">
<div class="col-xs-6 col-md-7 center-block">
<h2 id="contacthead">Contact Me!</h2>
<ul>
<li><span class="glyphicon glyphicon-phone-alt"></span>Reach me by phone: (229) 206-1786</li>
<li><span class="glyphicon glyphicon-circle-arrow-right"></span>Email me at: keri.hazelton@gmail.com</li>
<li><span class="glyphicon glyphicon-envelope"></span>Mail: 305 East Pinson Street, Sylvester, GA 31791</li>
</ul>
<div id="map">
</div>
<!--
<div>
<iframe src="https://www.google.com/maps/embed/v1/place?q=place_id:EikzMDUgRSBQaW5zb24gU3QsIFN5bHZlc3RlciwgR0EgMzE3OTEsIFVTQQ&key=AIzaSyAP_5CJFNH13oeqd5EXL-W74yYFx7ExGDI" allowfullscreen></iframe>
</div> -->
</div> <!-- /col-md-8 -->
<div class="col-xs-5 col-md-4 center-block">
<div class="form-group">
<input id="name" type="text" minlength=2 class="form-control" placeholder="Your name here">
<label for="name">Your name</label>
</div> <!-- /form-group -->
<div class="form-group">
<input id="email" type="email" class="form-control" placeholder="Your email address">
<label for="email">Email address</label>
<textarea id="message-box" style="resize:none" cols="40" rows="5" class="form-control" placeholder="Your message here"></textarea>
<button id="contact-button" type="submit" class="btn btn-primary">Submit</button> </div> <!-- /form-group -->
</div> <!-- /row -->
<div class="col-xs-1 col-md-1 center-block">
<div class="social">
<a href="https://twitter.com/khazelton_77" class="twitter-follow-button" data-show-count="false" data-size="large" data-show-screen-name="false">Follow @khazelton_77</a>
<div class="fb-like" data-href="http://keri-hazelton.bitballoon.com" data-width="100px" data-layout="standard" data-action="like" data-show-faces="true" data-share="true">
</div> <!-- /social -->
</div> <!-- /col-md-4 -->
</div>
</div>
</div>
<!-- ============================= -->
<!-- All your JavaScript comes now -->
<!-- ============================= -->
<!-- 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/scripts.js"></script>
<script src="js/jquery.stellar.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script>$("#about").stellar(); </script>
<script src="js/work.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAP_5CJFNH13oeqd5EXL-W74yYFx7ExGDI&callback=initMap">
</script>
<footer>
&copy; Keri Hazelton Designs 2016
</footer>
</body>
</html>
Raw
scripts.js
(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.6";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
!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 marker;
function initMap() {
var myLatLng = {lat: 31.5334630, lng: -83.8334330};
var map = new google.maps.Map(document.getElementById('map'), {
center: myLatLng,
zoom: 15
});
marker = new google.maps.Marker ( {
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
position: myLatLng,
title: "I am here!"
});
marker.addListener('click', toggleBounce);
}
function toggleBounce() {
if (marker.getAnimation()!==null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
$(document).ready(function() {
initMap();
// 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;
});
// Stellar //
$("#about").stellar();
$("#faq").stellar();
$(function() {
$("#item1").tooltip();
});
//Tooltip
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
$("#message-box").on("keyup", function() {
console.log("It works!");
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");
};
});
//Works Section //
for(var i = 0; i < works.length; ++i) {
$("#work").append("\
<div class='col-sm-3 col-md-3'>\
<a href='#' class='work-img'>\
<img class='img-responsive' src='" + works[i].pic + "'>\
<span class='info'><p class='proj-title'>Title:</p> + works[i].title</span>\
</a>\
</div>\
");
};
$(".work-img").mouseenter(function() {
$(".info", this).show();
});
$(".work-img").mouseleave(function() {
$(".info", this).hide();
});
$(".proj-title").mouseenter(function() {
$(".info", this).show();
});
$(".proj-title").mouseleave(function() {
$(".info", this).hide();
});
//Textarea background color//
$("#message-box").css("background-color", "#b3ffb3");
//Message Box Comment //
$("#contact-button").on("click", function() {
var comment=$("#message-box").val();
console.log(comment);
$("#visible-comment").html("Thank you for commenting!");
$("#message-box").hide();
return false;
});
});
Raw
styles.css
* {
box-sizing: border-box;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-image: url("../img/lights.jpeg");
background-size: cover;
position: relative;
}
.navbar {
font-family: Poiret One, Arial, sans-serif;
}
.carousel-caption h1 {
color: white;
}
.carousel-caption h3 {
color: white;
font-size: 5em;
margin-bottom: 250px;
padding-bottom: 15%;
font-family: Poiret One, Arial, sans-serif;
text-shadow: 0 1px 1px #fff;
z-index: 1;
}
.carousel-caption p {
color: white;
margin-top: -250px;
padding-bottom: 25%;
font-family: Poiret One, Arial, sans-serif;
font-size: 4.5em;
text-shadow: 0 1px 1px #fff;
}
.main-header h1{
font-size: 3em;
text-align: center;
font-weight: bolder;
}
.main-header p{
text-align: center;
}
.main-header {
font-family: Poiret One, Arial, sans-serif;
font-size: 2em;
}
.main-button {
color: white;
font-family: Poiret One, Arial, sans-serif;
background-color: #9C7C24;
}
.portfolio-settings {
font-family: Poiret One, Arial, sans-serif;
}
/*.jumbotron {
background-image: url("../img/clockwork_heart.jpg");
background-size: cover;
}
.jumbotron p {
color: white;
}*/
/* Work styling */
#work {
font-family: Poiret One, Arial, sans-serif;
margin-left: 40px;
margin-right: auto
}
#work h2 {
text-align: center;
}
/*
#cols h2 {
text-align: center;
font-size: 3em;
postion: relative;
padding-top: 75px;
}
#cols {
margin-left: 15px;
margin-right: 15px;
padding: 20px 10px 20px 10px;
}
.top-buffer {
margin-top:20px;
}
*/
.dropdown {
margin-bottom: 35px;
}
.work-btn{
background-color: #9C7C24;
}
.work-img {
display: block;
margin: auto;
max-width: 800px;
}
.info {
display: none;
position: absolute;
top: 15%;
left: 22%;
color: #fff;
font-family: Futura;
text-transform: uppercase;
font-weight: 900;
letter-spacing: 0.5em;
line-height: 1.6;
}
.proj-title {
font-weight: 100;
}
/* About Styling */
#about {
background-image: url("../img/lights.jpeg");
margin: auto;
height: 800px;
background-attachment: fixed;
background-size: cover;
padding-bottom: 100px;
}
.about-header h1 {
padding: 75px;
text-align: center;
font-size: 2em;
font-weight: bolder;
}
#keri {
border: 2px inset black;
margin-left: 20%;
height: 350px;
max-width: 100%;
}
h1,
h2,
h3 {
font-family: Poiret One, Arial, sans-serif;
}
.intro h2 {
text-align: center;
font-weight: bolder;
font-size: 1.5em;
text-transform: uppercase;
}
.intro p {
text-align: center;
font-family: Poiret One, Arial, sans-serif;
font-size: 1.5em;
font-weight: 100;
-webkit-margin-before: 0;
}
.skills {
text-align: center;
font-family: Poiret One, Arial, sans-serif;
}
#skillset {
font-size: 1.5em;
font-weight: bolder;
text-align: center;
text-transform: uppercase;
}
.skills li {
font-size: 1.5em;
list-style-type: none;
}
body {
background-color: #fffeea;
color: #34495e;
}
.main-text {
font-family: Poiret One, Arial, sans-serif;
text-align: center;
font-weight: bolder;
}
/* FAQ Styling */
#faq {
font-family: Poiret One, Arial, sans-serif;
padding-top: 100px;
background-image: url("../img/bubbly.png");
background-attachment: fixed;
background-size: cover;
height: 800px;
margin-bottom: 200px;
}
#accordion {
padding-bottom: 250px;
}
#faq>.row {
margin-left: -10px;
margin-right: -10px;
}
/*
.faq-body {
background-image: url("../img/lights.jpeg");
background-size: cover;
}
#accordion {
background-image: url("../img/lights.jpeg");
}
*/
#faqhead {
margin-top: -20px;
color: white;
text-align: center;
font-size: 2em;
font-weight: bolder;
}
.learn-more {
margin-top: -20px;
font-family: Poiret One, Arial, sans-serif;
font-weight: bolder;
text-align: left;
float: left;
}
.modal-button {
float: right;
padding: 15px;
margin-top: -30px;
}
#modalembed {
height: 500px;
width: 100%;
padding: 10px;
}
.learn-more {
font-family: Poiret One, Arial, sans-serif;
font-size: 2em;
color: white;
}
.panel-title {
font-size: 1.5em;
font-family: Poiret One, Arial, sans-serif;
}
#collapseOne,
#collapseTwo,
#collapseThree,
#collapseFour,
#collapseFive {
background-color: #d9b38c;
}
/* Contact Styling */
#contact{
background-image: url("../img/the-wall.jpg");
/*Add a background image*/
background-attachment: fixed;
/*Give the background a fixed position does it not scroll when you scroll*/
background-size: cover;
/*Have the background cover the entire div section*/
color: black;
/*Change the color of the text on top so it is readable, and adjust the padding as needed.*/
/* padding:100px;*/
height: 600px;
padding-top: 100px;
padding-bottom: 300px;
margin-left: auto;
margin-right: auto;
font-family: Poiret One, Arial, sans-serif;
}
.form-control {
max-width: 50%;
}
.keriHazelton {
text-transform: uppercase;
}
.keriHazelton a {
color: white;
}
.glyphicon {
padding-right: 10px;
}
.contact-info {
color: white;
text-shadow: 0 3px 3px black;
font-weight: bolder;
width: 100%;
}
#contacthead {
margin-top: -10%;
padding-bottom: 5%;
font-size: 3em;
text-align: center;
}
.contact-info ul li {
font-size: 2em;
list-style-type: none;
}
.allcontact{
color: white;
}
#map {
height: 250px;
max-width: 100%;
}
.form-group {
font-size: 2em;
font-weight: bolder;
color: white;
width: 100%;
font-weight: bolder;
}
.form-group input {
outline: double black;
}
.form-group textarea {
outline: double black;
}
#contact-button {
background-color: #9C7C24;
}
.social {
margin-left: -95px;
}
.fb-like {
padding-top: 25px;
}
/* Footer Section */
footer {
font-family: Poiret One, Arial, sans-serif;
font-size: 2em;
display: block;
margin: 30px;
padding: 50px;
float: right
}
/* Media Queries */
@media screen
and (device-width: 375px)
and (device-height: 667px)
and (-webkit-device-pixel-ratio: 2) {
}
@media screen
and (device-width: 320px)
and (devide-height: 640px)
and (-webkit-device-pixel-ratio: 2) {
}
/* ----------- Galaxy S3 ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2) {
}
/* Portrait */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- Galaxy S4 ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
}
/* Portrait */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
}
/* ----------- Galaxy S5 ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
}
/* Portrait */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
}
/* ----------- iPhone 4 and 4S ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 5 and 5S ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 6 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 6+ ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3) {
}
/* Portrait */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
}
Raw
work.js
var works = [
{
title: "First Project",
pic: "img/citybridge.jpeg"
},
{
title: "Second Project",
pic: "img/citybridge.jpeg"
},
{
title: "Third Project",
pic: "img/citybridge.jpeg"
},
{
title: "Fourth Project",
pic: "img/citybridge.jpeg"
}
];
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment