Skip to content

Instantly share code, notes, and snippets.

@janetferguson

janetferguson/index.html

Last active August 29, 2015 14:19
Show Gist options
  • Save janetferguson/dcd4f5217d72fb8c6103 to your computer and use it in GitHub Desktop.
Save janetferguson/dcd4f5217d72fb8c6103 to your computer and use it in GitHub Desktop.
Download ZIP
Exercise 20
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- My js File -->
<meta charset="utf-8">
<title>Janet Ferguson - Full Stack Web Developer | Rubyist</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet" />
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
<!-- Custom styles for this template go here -->
<link href="css/styles.css" rel="stylesheet" />
<!-- Google fonts -->
<link href="http://fonts.googleapis.com/css?family=Rock+Salt" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Lato:400,700,900,400italic,700italic,900italic" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Fira+Sans:400,500italic" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Architects+Daughter' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />
<!-- Favicon -->
<link rel="shortcut icon" href="img/fav-ruby-black.png" type="image/png" />
<!-- Google Maps JavaScript APIv3 -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDEE0qyKVfVLav6hze9fgAE9tDLooOQTrQ"></script>
<!--[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]-->
</head>
<body data-spy="scroll" data-target=".navbar" data-stellar-background-ratio="3">
<!-- navbar starts here -->
<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> <!-- end navbar-header -->
<div class="navbar-collapse collapse">
<ul id="left-nav" class="nav nav-tabs navbar-nav wht-txt" role="tablist">
<li class="wht-txt"><a class="wht-txt" href="#index">Home</a></li>
</ul>
<ul id="right-nav" class="nav nav-tabs navbar-nav" role="tablist">
<li class="wht-txt"><a class="wht-txt" href="#about">About</a></li>
<li class="wht-txt"><a class="wht-txt" href="#contact">Contact</a></li>
<li class="wht-txt"><a class="wht-txt" id="portfolio" href="#work">Work</a>
<ul class="submenu">
<li class="wht-txt"><a class="wht-txt" href="https://github.com/janetferguson">GitHub</a></li>
<li class="wht-txt"><a class="wht-txt" href="https://bitbucket.org/janetferguson">Bitbucket</a></li>
<li class="wht-txt"><a class="wht-txt" href="#work">Samples</a></li>
</ul>
</li>
<li class="wht-txt"><a class="wht-txt" id="freq-asked" href="#faq">FAQ</a></li>
</ul>
</div> <!-- end navbar-collapse collapse -->
</div> <!-- end nav container-fluid -->
</nav> <!-- end navbar -->
<!-- Carousel -->
<div class="container" id="index">
<div class="container-fluid">
<div class="row-fluid">
<div id="carousel-example-generic" class="carousel slide carousel-fade" data-ride="carousel" data-interval="2000">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="img-responsive" src="img/flower.jpg" alt="flower">
<div class="carousel-caption">
<h1 class="my-name wht-txt bold">Janet Ferguson</h1>
<p class="job-title wht-txt">Full Stack Web Developer &amp; Rubyist</p>
<p class="scroll wht-txt">Scroll Down to Learn More</p>
<i class="fa fa-arrow-circle-down wht-txt"></i>
</div>
</div>
<div class="item">
<img class="img-responsive" src="img/flower.jpg" alt="flower">
<div class="carousel-caption">
<h1 class="my-name wht-txt bold">Janet Ferguson</h1>
<p class="job-title wht-txt">Full Stack Web Developer &amp; Rubyist</p>
<h1 class="tagline wht-txt header-font bold" id="tagline-2">What can I help you portray to the world?</h1>
<p class="scroll wht-txt">Scroll Down to Learn More</p>
<i class="fa fa-arrow-circle-down wht-txt"></i>
</div>
</div>
<div class="item">
<img class="img-responsive" src="img/flower.jpg" alt="flower">
<div class="carousel-caption">
<h1 class="my-name wht-txt bold">Janet Ferguson</h1>
<p class="job-title wht-txt">Full Stack Web Developer &amp; Rubyist</p>
<p class="scroll wht-txt">Scroll Down to Learn More</p>
<i class="fa fa-arrow-circle-down wht-txt"></i>
</div>
</div>
</div>
</div>
</div> <!-- end row-fluid div -->
</div> <!-- end container-fluid div -->
<!-- end Carousel -->
</div> <!-- end container div home -->
<div class="container" id="about">
<div class="header header-font wht-txt">
<h1 class="centered-header">About Janet</h1>
</div> <!-- end header div -->
<div class="container-fluid">
<div class="row-fluid">
<div class="image col-md-4 col-xs-12">
<img class="img-responsive" src="img/janet.png" alt="janet"/>
</div> <!-- end image div -->
<div class="intro col-md-4 col-xs-6">
<h3 class="purple-text">Who is Janet?</h3>
<p>I'm a Full Stack Web Developer specializing in Ruby on Rails!</p>
<img src="img/ruby-black.png" alt="ruby-pic" />
</div> <!-- end intro div -->
<div class="skills col-md-3 col-md-offset-1 col-xs-6">
<h3 class="purple-text">My <a href="#" title="Ruby on Rails, HTML5, CSS3, JavaScript, jQuery" id="tooltip-1">Skills</a></h3>
<ul id="skill-list">
<li>&#9825; Ruby on Rails</li>
<li>&#9825; Python</li>
<li>&#9825; JavaScript/jQuery</li>
<li>&#9825; HTML5</li>
<li>&#9825; CSS3</li>
<li>&#9825; I'll finish this list later! :)</li> <!-- Maybe the skills will be deserving of a page of their own later. :D -->
</ul>
</div> <!-- end skills div -->
</div> <!-- end row div -->
</div> <!-- end container-fluid div -->
<div class="row-fluid">
<table class="table-hover table-stripe">
<tr class="my-row">
<th>HTML/CSS</th>
<th>JavaScript</th>
<th>Ruby on Rails</th>
</tr>
<tr class="my-row">
<td>HTML5</td>
<td>jQuery</td>
<td>Ruby</td>
</tr>
<tr class="my-row">
<td>HAML</td>
<td>CoffeeScript</td>
<td>Rails</td>
</tr>
<tr class="my-row">
<td>CSS3</td>
<td>JSON</td>
<td>MVC</td>
</tr>
<tr class="my-row">
<td>SASS</td>
<td>AJAX</td>
<td>REST</td>
</tr>
<tr class="my-row">
<td>Bootstrap</td>
<td>AngularJS</td>
<td>Git</td>
</tr>
</table>
</div> <!-- end row-fluid div -->
<div id="video"><iframe width="560" height="315" src="https://www.youtube.com/embed/E1oZhEIrer4" frameborder="0" allowfullscreen></iframe></div>
<div class="modal-section row-fluid" data-stellar-background-ratio="1.5">
<h2 class="learn-more">Check Out My
<br>
Pre-Web Developer
<br>
Resume</h2>
<i class="fa fa-file-pdf-o"></i>
<div class="modal-button">
<!-- Large modal button -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg" data-toggle="tooltip" data-placement="bottom" title="I'm legit!">View CV/Resume</button>
</div> <!-- end modal-button -->
<!-- Large modal -->
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<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">CV/Resume</h4>
</div>
<div class="modal-body">
<iframe id="modalframe" src="docs/onlineresume2015.pdf"></iframe>
</div>
</div>
</div>
</div>
</div><!-- end row-fluid div -->
<div class="container-fluid">
<div class="row-fluid">
<div class="main-text col-md-12 col-xs-12">
<h3 class="purple-text">More About Me</h3>
<p>I love dabbling in many projects at once. It makes me feel alive and more focused. Despite having multiple projects going simultaneously...every project is completed to its fullest extent.</p>
<br>
<p>Besides Ruby on Rails and other web development projects, my interests gravitate toward world travel (especially if I can mix travel with a web dev project!), food, tea, and biking.</p>
</div> <!-- end main_text class div -->
<div data-stellar-background-ratio="3" id="divider"></div> <!-- end divider div -->
</div> <!-- end row div -->
</div> <!-- end container-fluid div -->
</div> <!-- end container div about -->
<div class="parallax-butterflies-bg"></div> <!-- end butterflies div -->
<div class="container-fluid" id="contact">
<div class="header header-font wht-txt">
<h1 class="centered-header">Contact Janet</h1>
</div> <!-- end header div -->
<div class="contact">
<h2 class="contact-me">Web development is a true passion of mine. Contact me if you'd like to collaborate on a project, or even just to say hello.</h2>
<br>
<div class="row-fluid">
<!-- Begin form -->
<form action="/login" method="post" name="login" id="form">
<div class="form-group col-md-offset-3 col-md-8">
<label for="name">Name*</label>
<input type="text" name="name" minlength=2 class="form-control" id="name" placeholder="Jane Doe" required="required" title="Name">
<div class="form-group">
<label for="email">Email address*</label>
<input type="email" name="email" class="form-control" id="email" placeholder="Enter your email address" required="required" title="Email">
<div class="form-group">
<label for="phone">Phone Number</label>
<input type="phone" name="phone" class="form-control" id="phone" placeholder="Enter your phone number (not required)" title="Phone Number">
<div class="form-group">
<textarea class="form-control" id="txt" style="resize:none" cols="5" rows="10" maxlength=300 placeholder="Type a message..." required="required" title="Your Message"></textarea>
<p id="char-count"></p>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="What's on your mind?">Submit</button>
</div>
</div>
</div>
</div> <!-- end row-fluid -->
</div>
</form>
<!-- End form -->
<p id="visible-comment"></p>
<div id="map-canvas" style="height: 300px; width: 300px">
<!-- <iframe width="600" height="450" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?q=California%201%2C%20Redondo%20Beach%2C%20CA%2C%20United%20States&key=AIzaSyDEE0qyKVfVLav6hze9fgAE9tDLooOQTrQ"></iframe> -->
</div> <!-- end map-canvas div -->
<div class="row-fluid center info">
<div id="info col-md-4">
<div id="mail">
<i class="fa fa-envelope"></i>
<h3 class="e">janet.ferguson[at]me.com</h3>
</div>
<!-- end mail div -->
<br>
<div id="tele">
<i class="fa fa-phone-square"></i>
<h3 class="p">(323) 489-8604</h3>
</div>
<!-- end tele div -->
<br>
<div id="loc">
<i class="fa fa-globe"></i>
<h3 class="l">Redondo Beach, CA</h3>
</div>
<!-- end loc div -->
</div> <!-- end info div -->
</div> <!-- end row center info div -->
</div> <!-- end contact div -->
</div> <!-- end container div contact -->
<div class="parallax-butterflies-bg"></div> <!-- end butterflies div -->
<div class="container" id="work">
<div class="container-fluid">
<div class="header header-font wht-txt">
<h1 class="centered-header">Portfolio</h1>
<p>Some recent projects:</p>
</div> <!-- end header div -->
<div class="row-fluid">
<div class="col-md-12 col-xs 12">
<div class="image" id="0"></div>
<div class="image" id="1"></div>
<div class="image" id="2"></div>
<div class="image" id="3"></div>
<div class="image" id="4"></div>
<div class="image" id="5"></div>
<div class="image" id="6"></div>
<div class="image" id="7"></div>
</div>
</div>
</div> <!-- end container-fluid div -->
</div> <!-- end container div work -->
<div class="parallax-butterflies-bg"></div> <!-- end butterflies div -->
<div class="container" id="faq">
<div class="header header-font wht-txt">
<h1 class="centered-header">Frequently Asked Questions</h1>
</div> <!-- end header div -->
<!-- Begin Accordion -->
<div class="container-fluid">
<div class="row-fluid">
<div class="panel-group col-md-8 col-xs-12" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-heart"></span>
Why did you decide to become a web developer?
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
I decided it was time to get involved in a career that makes me excited to get up each day. My old career was dragging me down and brought too much negativity into my life.
</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"><span class="glyphicon glyphicon-time"></span>
What is your average project turnaround time?
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
It really depends on the depth of the project and how many other clients' projects I have going at the same time. Send me an email for an up-to-date answer.
</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"><span class="glyphicon glyphicon-info-sign"></span>
What did you do before becoming a web developer?
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
I was an Apple Certified Technician.
</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"><span class="glyphicon glyphicon-console"></span>
What is Ruby?
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
<a href="http://en.wikipedia.org/wiki/Ruby_%28programming_language%29">Ruby</a> is a dynamic, object-oriented programming langauage developed in the mid '90s by Japanese computer scientist and software programmer Yukihiro "Matz" Matsumoto.
</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"><span class="glyphicon glyphicon-thumbs-up"></span>
Why do you like Ruby so much?
</a>
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse">
<div class="panel-body">
It's a lot of fun to program in Ruby! What better reason to love it?
</div>
</div>
</div>
</div>
</div> <!-- end row-fluid div -->
</div> <!-- end container-fluid div -->
</div> <!-- end container div faq -->
<!-- End Accordion -->
<div class="parallax-butterflies-bg"></div> <!-- end butterflies div -->
<!-- Begin footer -->
<footer>
<div class="social-media">
<a class="twitter wht-txt" href="https://twitter.com/irb_janet"><i class="fa fa-twitter"></i> @irb_janet</a>
<a class="facebook wht-txt" href="https://www.facebook.com/janet.kaizen "><i class="fa fa-facebook-official"></i> facebook.com/janet.kaizen</a>
</div> <!-- end social-media div -->
<div class="copyright wht-txt"> <p>&copy; 2015 irb_ Janet | All Rights Reserved.</p></div>
<!-- end copyright div -->
</footer>
<!-- end footer -->
<!-- JavaScript files -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- Stellar.js -->
<script src="js/jquery.stellar.min.js"></script>
<script type="text/javascript">
$.stellar({
verticalOffset: 200,
horizontalScrolling: false,
});
</script>
<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>
<!--jQuery Media Script-->
<script src="js/jquery.media.js" type="text/javascript"></script>
<!-- Tooltip -->
<script>
$(function () {
$('#tooltip-1').tooltip();
});
</script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<script src="js/scripts.js"></script>
</body>
</html>
Raw
scripts.js
// User input transformed into upper case letters + !
$(".btn-default").on("click", function() {
console.log("clicked");
var comment = $("#txt").val().toUpperCase() + "!";
console.log(comment);
$("#visible-comment").html(comment);
return false;
// no code here, just above the 'return false'
});
// Gray background in textarea
$("#txt").css("background-color", "gray");
// Make textarea more translucent on click
$("#txt").on("click", function() {
$("#txt").css({ opacity: 0.75 });
});
// Work section objects
var myWork = [{
title: "Janet's Portfolio",
pic: "../img/website.jpg"
}, {
title: "Mock Job Interview",
pic: "../img/mock-job-interview.jpg"
}, {
title: "Third Project",
pic: "../img/ComingSoon1.png"
}, {
title: "Fourth Project",
pic: "../img/ComingSoon1.png"
},{
title: "Fifth Project",
pic: "../img/ComingSoon1.png"
},{
title: "Sixth Project",
pic: "../img/ComingSoon1.png"
},{
title: "Seventh Project",
pic: "../img/ComingSoon1.png"
},{
title: "Eighth Project",
pic: "../img/ComingSoon1.png"
}];
// Document ready functions
$(document).ready(function() {
$("#txt").on("keyup", function() {
console.log("keyup happened!!!");
var charCount = $("#txt").val().length;
console.log(charCount);
$("#char-count").html(charCount);
if (charCount > 50) {
$("#char-count").css("color", "red");
} else {
$("#char-count").css("color", "black");
};
});
});
$(document).ready(function() {
var rows = $(".my-row");
for (var i = 0; i < rows.length; ++i) {
if (i % 2 === 0) {
$(rows[i]).css("background-color", "#FFFFFF");
} else {
$(rows[i]).css("background-color", "#DDA0DD");
};
};
});
$(document).ready(function() {
for (var i = 0; i < myWork.length; ++i) {
$("#" + i).css("background-image", "url(" + myWork[i].pic + ")");
};
$(".image").mouseenter(function() {
console.log(myWork[this.id].title);
$(this).html("<p class='info'><span class='proj-title'>Title:</span> " + myWork[this.id].title) + "</p>";
}).mouseleave(function() {
$("p.info").html("");
});
});
$(document).ready(function() {
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(33.835161, -118.385167, 15),
zoom: 8
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: 'Click to zoom'
});
google.maps.event.addListener(marker, 'click', function() {
map.setZoom(15);
map.setCenter(marker.getPosition());
});
};
google.maps.event.addDomListener(window, 'load', initialize);
});
Raw
styles.css
body {
position: relative;
background: url("../img/butterflies.png") repeat;
background-attachment: fixed;
background-size: cover;
}
.parallax-butterflies-bg {
height: 100px;
}
.wht-txt {
color: #fff;
}
.header-font {
font-family: 'Rock Salt', cursive;
}
.purple-text {
font-family: 'Source Sans Pro', sans-serif;
color: purple;
font-weight: bold;
opacity: 0.45;
}
.bold {
font-weight: bold;
}
.centered-header {
font-family: 'Rock Salt', cursive;
text-align: center;
}
/* Navigation CSS Below */
.navbar-header {
padding-right: 1%;
}
.navbar {
background-color: #000;
opacity: 1;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 65px;
padding: 0;
z-index: 15;
margin: 0;
border-radius: 0;
border: 0px solid transparent;
}
.navbar .container-fluid {
padding: 0;
background: #000;
}
.navbar ul {
float: right;
display: inline;
margin: 0;
list-style: none;
}
.navbar ul li {
display: inline-block;
float: left;
position: relative;
background: #000;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0;
margin-right: 0;
cursor: pointer;
font-family: 'Lato', sans-serif;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.navbar ul li ul {
padding: 0;
position: absolute;
top: 64px;
left: 0;
width: 150px;
display: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
margin-left: -1px;
visibility: hidden;
-webkit-transiton: opacity 0.1s;
-moz-transition: opacity 0.1s;
-ms-transition: opacity 0.1s;
-o-transition: opacity 0.1s;
-transition: opacity 0.1s;
}
.navbar ul li ul li {
background: #000;
display: inline-block;
font-weight: 300;
text-align: center;
padding: 8px;
padding-top: 16px;
margin: auto;
width: 110px;
height: 55px;
border: 1px solid #fff;
}
.navbar ul li ul li:hover {
background: #fff;
font-weight: 300;
padding: 7px;
padding-top: 15px;
border: 1px solid #fff;
width: 110px;
height: 60px;
opacity: 0.9;
}
.navbar ul li:hover ul {
display: inline-block;
height: 65px;
visibility: visible;
border: 1px solid transparent;
width: 110px;
}
.navbar ul li ul:hover li:hover {
background: #000;
padding: 6px;
padding-top: 14px;
border: 1px solid #fff;
width: 110px;
opacity: 0.9;
}
.navbar ul li ul li a {
margin: auto;
padding: 3px 2px;
width: 110px;
text-align: center;
}
.navbar ul li ul li a:hover {
margin: auto;
text-decoration: none;
text-shadow: none;
padding: 2px 1px;
border: 1px solid transparent;
width: 110px;
color: #fff;
}
.navbar ul li a {
padding: 25px 20px;
width: 110px;
height: 65px;
text-align: center;
-webkit-transition: color 200ms;
transition: color 200ms;
}
.navbar ul li a:hover {
height: 65px;
width: 110px;
text-decoration: none;
text-shadow: none;
padding: 24px 19px;
border: 1px solid transparent;
border-radius: 0;
}
.navbar #left-nav {
float: left;
padding-left: 0px;
}
.navbar .nav > .active > a {
border-radius: 0;
border: 0px solid transparent;
background: #fff;
color: black;
height: 65px;
width: 110px;
}
.navbar .nav > .active > a:hover {
border-radius: 0;
border: 0px solid transparent;
background: #fff;
color: #000;
height: 65px;
width: 110px;
}
.nav-tabs > li > a {
margin-right: 0;
}
.navbar-collapse.collapse {
overflow: visible;
}
#right-nav li #portfolio {
margin-right: 0;
}
#index .container-fluid {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
height: 100%;
width: 100%;
padding: 0;
}
/* Carousel */
.item {
width: 100%;
height: 100%;
}
.carousel-caption {
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.my-name {
font-family: 'Source Sans Pro', sans-serif;
font-size: 5em;
opacity: 0.65;
text-align: center;
padding: auto;
left: 0;
line-height: 200px;
margin: auto;
margin-top: -100px;
position: absolute;
top: 40%;
width: 100%;
}
.job-title {
font-family: 'Fira Sans', sans-serif;
font-size: 15px;
font-weight: bolder;
opacity: 1;
text-align: center;
padding: auto;
left: 0;
line-height: 200px;
margin: auto;
margin-top: -100px;
position: absolute;
top: 50%;
width: 100%;
}
.tagline {
opacity: 0.75;
}
#tagline-1, #tagline-2, #tagline-3 {
font-size: 2em;
opacity: 1;
display: block;
text-align: center;
padding: auto;
left: 0;
line-height: 100px;
margin: auto;
margin-top: -100px;
position: absolute;
top: 70%;
width: 100%;
}
.scroll {
font-size: 2em;
opacity: 1;
display: block;
text-align: center;
padding: auto;
left: 0;
line-height: 100px;
margin: auto;
margin-top: -100px;
position: absolute;
top: 90%;
width: 100%;
}
.fa-arrow-circle-down {
font-size: 4em;
opacity: 0.75;
display: block;
text-align: center;
padding: auto;
left: 0;
line-height: 100px;
margin: auto;
margin-top: -100px;
position: absolute;
top: 97%;
width: 100%;
}
#index a {
color: #9b111e;
}
.container {
width: 100%;
padding: 0;
}
/* Fade on Slider */
.carousel-fade .carousel-inner .item {
opacity: 1;
-webkit-transition-property: opacity;
-moz-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
}
.carousel-fade .carousel-inner .active {
opacity: 1 !important;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
left: 0;
opacity: 0;
z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
opacity: 1;
}
.carousel-fade .carousel-control {
z-index: 2;
}
/* About CSS Below */
#about .container-fluid {
padding-bottom: 25px;
padding-left: 0;
padding-right: 0;
margin: auto;
width: 100%;
display: flex;
flex-flow: row;
flex-direction: column;
justify-content: center;
align-items: center;
align-content: center;
}
#about .container-fluid .row-fluid .col-md-3, #about .container-fluid .row-fluid .col-md-4, #about .container-fluid .row-fluid .col-xs-12, #about .container-fluid .row-fluid .col-md-12 {
display: flex;
flex-flow: row;
flex-direction: column;
justify-content: center;
align-items: center;
align-content: center;
padding-top: 50px;
}
#about .img-responsive {
display: block;
max-width: 100%;
height: auto;
margin: auto;
padding: auto;
}
#about .header {
background-color: black;
display: block;
margin-left, margin-right: auto;
padding: 85px 0;
}
#about .header h1 {
padding: 0;
}
.image {
margin-top: 50px;
width: 33.3%;
margin-left: auto;
margin-right: auto;
padding-left: auto;
padding-right: auto;
}
.intro {
margin-top: 50px;
width: 33.3%;
margin-left: auto;
margin-right: auto;
padding-left: auto;
padding-right: auto;
display: flex;
}
.intro h3 {
text-align: center;
font-size: 2em;
margin-left: auto;
margin-right: auto;
padding: auto;
}
.intro p {
text-align: center;
font-size: 1em;
font-family: 'Lato', sans-serif;
margin-left: auto;
margin-right: auto;
padding: auto;
}
.intro img {
display: block;
width: 33.3%;
margin-left: auto;
margin-right: auto;
padding: auto;
}
.skills {
margin-top: 68px;
padding-top: 0;
width: 33.3%;
margin-left: auto;
margin-right: auto;
padding-left: auto;
padding-right: auto;
display: inline-block;
}
.skills h3 {
text-align: left;
font-size: 2em;
padding-top: 0;
margin-top: 0;
}
#tooltip-1 {
color: purple;
}
#tooltip-1:hover {
text-decoration: none;
font-style: italic;
}
#skill-list {
font-size: 1em;
font-weight: 400;
color: black;
list-style: none;
list-style-position: inside;
padding-left: 0;
}
#skill-list li {
list-style-type: none;
margin-left: auto;
margin-right: auto;
padding-left: auto;
padding-right: auto;
}
#video {
width: 560px;
height: 315px;
margin: 0 auto;
}
.main-text {
clear: both;
padding: auto;
margin: auto;
width: 100%;
display: flex;
flex-flow: row;
flex-direction: column;
justify-content: center;
align-items: center;
align-content: center;
float: none;
}
.main-text p {
font-family: 'Source Sans Pro', sans-serif;
color: #7A3D5C;
font-size: 2em;
width: 50%;
font-weight: 400;
text-align: justify;
padding: auto;
margin: auto;
}
.main-text p:hover {
color: purple;
cursor: default;
padding: auto;
margin: auto;
}
.main-text h3 {
width: 90%;
font-size: 3em;
text-align: center;
margin: auto;
display: flex;
flex-flow: row;
flex-direction: column;
float: none;
}
.main-text p:last-child {
padding-bottom: 10%;
}
#divider {
background: url("../img/purple-spring-flowers.jpg") no-repeat;
background-size: cover;
background-position: fixed;
margin: 0;
padding-bottom: 0;
padding-right: 0;
width: 100%;
height: 450px;
}
/* Table CSS Below */
table {
display: flex;
flex-flow: row;
flex-direction: column;
justify-content: center;
align-items: center;
align-content: center;
font-family: 'Source Sans Pro', sans-serif;
opacity: 0.75;
padding: 20px;
}
th {
padding: 8px;
font-size: 2em;
}
td {
text-align: center;
font-size: 1.5em;
}
/* Modal CSS Below */
.modal-section {
padding: auto;
margin: 50px auto;
width: 100%;
display: flex;
flex-flow: row;
flex-direction: column;
justify-content: center;
align-items: center;
align-content: center;
float: none;
background: url("../img/purple-blurry-background.jpg") no-repeat;
background-attachment: fixed;
background-size: cover;
}
.fa-file-pdf-o {
color: white;
font-size: 4em;
}
.fa-file-pdf-o:hover {
color: black;
}
.learn-more {
text-align: center;
padding: 35px;
width: 75%;
margin: auto;
color: white!important;
opacity: 1!important;
font-size: 3em;
}
.modal-button {
float: right;
padding: 15px 15px 30px 15px;
}
.modal-button .btn {
border-radius: 0;
border: 2px solid black;
background: white;
color: black;
}
.modal-button .btn:focus {
outline: 2px solid purple;
opacity: 0.75;
}
.modal-button .btn:hover {
border-radius: 0;
border: 2px solid white;
background: black;
color: white;
}
.modal-body {
height: 500px;
}
#modalframe {
padding: 10px;
width: 100%;
height: 100%;
}
/* Contact CSS Below */
#contact {
position: relative;
width: 100%;
padding-bottom: 200px;
padding-left: 0;
padding-right: 0;
}
#contact .header {
background-color: black;
margin: 0;
width: 100%;
}
#contact .header h1 {
padding: 100px 0;
margin: auto;
width: 100%;
}
.contact {
width: 100%;
margin: auto;
padding: auto;
}
.center {
margin: auto;
}
.contact h2 {
text-align: center;
font-family: 'Source Sans Pro', sans-serif;
color: purple;
padding-top: 50px;
margin: auto;
}
.contact .contact-me {
font-family: 'Source Sans Pro', sans-serif;
color: purple;
opacity: 0.65;
font-weight: bold;
margin: auto;
width: 70%;
padding-top: 50px;
padding-left: 10px;
}
.fa-envelope, .fa-phone-square, .fa-globe {
display: block;
font-size: 3em;
width: 40%;
margin: auto;
padding: auto;
text-align: center;
color: black;
opacity: 0.95;
}
.fa-envelope:hover, .fa-phone-square:hover, .fa-globe:hover {
color: purple;
opacity: 0.65;
}
.info {
margin: auto;
padding: auto;
width: 50%;
float: left;
display: inline-block;
}
#info h3 {
color: black;
font-weight: 300;
opacity: 1;
}
.e, .p, .l {
display: inline-block;
font-size: 2em;
width: 100%;
margin: 0;
padding: 0;
text-align: center;
opacity: 0.95;
color: black;
}
#mail, #tele, #loc {
padding: auto;
margin: 20px auto;
}
.nav span {
cursor: pointer;
}
#contact .container-fluid .row-fluid .col-md-4, #contact .container-fluid .row-fluid .col-md-6, #contact .container-fluid .row-fluid .col-md-8, #contact .container-fluid .row-fluid .col-md-12, #contact .container-fluid .row-fluid .col-xs-12 {
display: flex;
flex-flow: row;
justify-content: center;
align-items: center;
align-content: center;
padding: auto;
margin: auto;
}
#info {
margin: auto;
padding: auto;
width: 40%;
float: left;
}
#map-canvas {
display: flex;
flex-flow: row;
justify-content: center;
align-items: center;
align-content: center;
padding: auto;
margin: auto;
}
/* Form CSS Below */
form {
width: 50%;
margin: auto auto 50px auto;
padding: auto;
font-size: 2em;
font-family: 'Lato', sans-serif;
float: right;
align-items: center;
align-content: center;
display: inline-block;
}
input[type=text], input[type=email], input[type=phone] {
border-radius: 0;
border: 2px solid black;
background: transparent;
width: 300px;
}
label {
margin-bottom: 10px;
}
.form-control {
display: block;
line-height: 130%;
border-radius: 0;
border: 2px solid black;
background: transparent;
margin-top: 10px;
}
.form-control:focus {
outline: 2px solid purple;
opacity: 0.75;
font-weight: 400;
color: black;
}
.form-control::-webkit-input-placeholder {
color: purple;
opacity: 0.95;
}
.form-control:-moz-placeholder {
color: purple;
opacity: 0.95;
}
.form-control::-moz-placeholder {
color: purple;
opacity: 0.95;
}
.form-control:-ms-input-placeholder {
color: purple;
opacity: 0.95;
}
form .btn {
border-radius: 0;
border: 2px solid black;
background: transparent;
color: purple;
font-weight: 300;
}
form .btn:hover {
border-radius: 0;
border: 2px solid gray;
background: black;
color: white;
font-weight: 300;
}
.form-group {
padding-top: 15px;
}
#txt {
width: 300px;
}
/* Work CSS Below */
#work img {
padding: 0 10px 60px 30px;
display: inline-block;
}
#work h1 {
display: block;
padding-left, padding-right: 0;
padding-top: 55px;
margin-left: auto;
margin-right: auto;
margin-top: -2px;
width: 33.3%;
}
#work p {
font-family: 'Source Sans Pro', sans-serif;
font-weight: bold;
opacity: 0.45;
color: purple;
margin-left: auto;
margin-right: auto;
width: 33.3%;
text-align: center;
color: #FAEBD7;
padding-top: 30px;
padding-bottom: 65px;
display: inline-block;
}
#work .container-fluid .row-fluid .col-md-12, #work .container-fluid .row-fluid .col-xs-12 {
display: flex;
flex-flow: row-fluid;
justify-content: center;
align-items: center;
align-content: center;
display: inline-block;
padding: auto;
margin: auto;
width: 100%;
}
#work .container-fluid {
padding: 0 0 65px 0;
margin-bottom: 125px;
}
#work .header {
background-color: black;
margin: 0;
width: 100%;
padding-top: 20px;
}
#work .header p {
margin: auto;
padding-bottom: auto;
width: 100%;
}
#work .row-fluid {
padding-top: 50px;
}
#work h3 {
font-family: 'Architects Daughter', cursive;
width: 515px;
color: #000;
opacity: 1;
display: inline-block;
padding-left: 10px;
margin: auto;
}
.image {
box-sizing: border-box;
border: 2px solid black;
width: 200px;
height: 200px;
margin: auto;
display: inline-block;
position: relative;
}
#work .info {
display: inline-block;
color: #000!important;
font-family: Futura;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.5em;
line-height: 1.6;
position: absolute;
top: 15%;
left: 22%;
opacity: 1!important;
}
.proj-title {
font-weight: 100;
}
/* FAQ CSS Below */
#faq {
width: 100%;
padding-bottom: 125px;
}
#faq .container-fluid .row-fluid .col-md-8, #faq .container-fluid .row-fluid .col-xs-12 {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
align-content: center;
width: 100%;
padding: 0;
}
#faq .container-fluid {
padding-top: 35px;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
align-content: center;
padding-left: auto;
padding-right: auto;
margin-left: auto;
margin-right: auto;
width: 100%;
}
#faq .header {
background-color: black;
margin: 0;
padding: 10px 0 0 0;
width: 100%;
}
#faq .header h1 {
padding: 100px 0 90px 0;
margin: auto;
width: 100%;
}
#faq .panel-group {
padding-top: 35px;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
align-content: center;
padding-left: auto;
padding-right: auto;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.panel-heading {
background-color: white!important;
}
.panel-title {
font-family: 'Lato', sans-serif;
color: purple;
opacity: 0.45;
font-weight: bold;
}
.panel-title a:hover {
text-decoration: none;
color: gray;
font-weight: bold;
}
.panel-title a:active {
text-decoration: none;
}
.panel-body {
font-family: 'Architects Daughter', cursive;
color: black;
background-color: white;
font-size: 18px;
}
.panel {
border: 2px solid black;
width: 600px;
margin: auto;
padding: auto;
}
#accordion {
padding-top: 50px;
padding-left: 20px;
}
.glyphicon {
padding: 3px;
}
/* Footer CSS Below */
footer {
display: block;
background-color: black;
-webkit-background-clip: border-box;
-webkit-background-size: auto;
background-size: auto;
background-origin: padding-box;
height: 70px;
clear: both;
z-index: -10;
font-family: 'Lato', sans-serif;
padding: 1%;
}
.copyright {
float: left;
font-size: 1em;
margin: auto;
padding-left: 1%;
padding-top: 12px;
}
.twitter, .facebook {
float: right;
font-size: 1.5em;
text-decoration: none;
margin: auto;
padding-right: 1%;
padding-top: 7px;
}
.twitter:hover{
color: #4099FF;
text-decoration: none;
opacity: 1;
}
.facebook:hover {
color: #3B5998;
text-decoration: none;
opacity: 1;
}
.copyright:hover {
color: #D8BFD8;
cursor: default;
opacity: 0.45;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment