Skip to content

Instantly share code, notes, and snippets.

@janetferguson

janetferguson/index.html

Created March 21, 2015 22:59
Show Gist options
  • Save janetferguson/9e6f1c1ca5a88a33f89c to your computer and use it in GitHub Desktop.
Save janetferguson/9e6f1c1ca5a88a33f89c to your computer and use it in GitHub Desktop.
Download ZIP
Exercise 11
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<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" />
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>
</head>
<body data-spy="scroll" data-target=".navbar" data-stellar-background-ratio="3">
<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.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- 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" class="nav nav-tabs navbar-nav" role="tablist">
<li><a href="#index">Home</a></li>
</ul>
<ul id="right" class="nav nav-tabs navbar-nav" role="tablist">
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li><a id="portfolio" href="#work">Work</a>
<ul class="submenu">
<li><a href="https://github.com/janetferguson">GitHub</a></li>
<li><a href="https://bitbucket.org/janetferguson">Bitbucket</a></li>
<li><a href="#work">Samples</a></li>
</ul>
</li>
<li><a 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" 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 class="img-responsive" src="img/tulips_hero_image.jpg" alt="tulips">
<div class="carousel-caption">
<h1 class="name">Janet Ferguson</h1>
<p class="job-title">Full Stack Web Developer &amp; Rubyist</p>
<h1 class="tagline" id="tagline-1">Life is too short to do anything other than follow your passion.</h1>
</div>
</div>
<div class="item">
<img class="img-responsive" src="img/flower_hero_image.jpg" alt="flowers">
<div class="carousel-caption">
<h1 class="name">Janet Ferguson</h1>
<p class="job-title">Full Stack Web Developer &amp; Rubyist</p>
<h1 class="tagline" id="tagline-2">What can I help you portray to the world?</h1>
</div>
</div>
<div class="item">
<img class="img-responsive" src="img/beach_hero_image.jpg" alt="beach">
<div class="carousel-caption">
<h1 class="name">Janet Ferguson</h1>
<p class="job-title">Full Stack Web Developer &amp; Rubyist</p>
<h1 class="tagline" id="tagline-3">The world needs your ideas.</h1>
</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="false"></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="false"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div> <!-- end row-fluid div -->
</div> <!-- end container-fluid div -->
<!-- end Carousel -->
<div class="butterflies"></div> <!-- end butterflies div -->
</div> <!-- end container div home -->
<div class="container" id="about">
<div class="header">
<h1>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>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>My Skills</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 id="video"><iframe width="560" height="315" src="https://www.youtube.com/embed/E1oZhEIrer4" frameborder="0" allowfullscreen></iframe></div>
<div class="container-fluid">
<div class="row-fluid">
<div class="main-text col-md-12 col-xs-12">
<h3>More About Me</h3>
<p>For some odd reason, I thrive on being overwhelmed (for lack of a better word.) What that means is, 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>
<p>I am a non-cookie cutter, anti-9-to-5 kind of person. Office politics and rushed lunch breaks are not my thing. I work hard (smart, actually), but I also maximize my "me" time and family time.</p>
<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, biking, beachgoing, integrating the concept of <a href="http://www.kaizen.com/about-us/definition-of-kaizen.html">kaizen</a> into my life, dogs, and most of all -- my 11 year old son, Alex.</p>
</div> <!-- end main_text class div -->
</div> <!-- end row div -->
</div> <!-- end container-fluid div -->
</div> <!-- end container div about -->
<div class="butterflies"></div> <!-- end butterflies div -->
<div class="container" id="contact">
<div class="header">
<h1>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 hire me for a project, if you'd like to collaborate on a project, or even just to say hello.</h2>
<br>
<div class="container-fluid">
<div class="row-fluid center info">
<div id="glyphs">
<span class="glyphicon glyphicon-send col-md-4 col-xs-12"></span>
<span class="glyphicon glyphicon-phone col-md-4 col-xs-12"></span>
<span class="glyphicon glyphicon-globe col-md-4 col-xs-12"></span>
</div> <!-- end glyphs div -->
<div id="info">
<h3 class="e col-md-4 col-xs-12">janet.ferguson[at]me.com</h3>
<h3 class="p col-md-4 col-xs-12">(323) 489-8604</h3>
<h3 class="l col-md-4 col-xs-12">Redondo Beach, CA</h3>
</div> <!-- end info div -->
</div> <!-- end row center info div -->
</div> <!-- end contact div -->
</div> <!-- end container-fluid div -->
</div> <!-- end container div contact -->
<div class="butterflies"></div> <!-- end butterflies div -->
<div class="container" id="work">
<div class="container-fluid">
<div class="header">
<h1>Portfolio</h1>
<p>Some recent projects:</p>
</div> <!-- end header div -->
<div class="row-fluid">
<div class="img-responsive col-md-12 col-xs-12"><img src="img/website.jpg" />
<h3 id="pfolio">This site. A collection of my most recent projects.</h3>
</div>
<div class="img-responsive col-md-12 col-xs-12"><img src="img/mock-job-interview.jpg" />
<h3 id="app">iPhone application to help prepare for job interviews. Objective-C.</h3>
</div>
</div> <!-- end row-fluid -->
</div> <!-- end container-fluid div -->
</div> <!-- end container div work -->
<div class="butterflies"></div> <!-- end butterflies div -->
<div class="container" id="faq">
<div class="header">
<h1>Frequently Asked Questions</h1>
</div> <!-- end header div -->
<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 -->
<div class="butterflies"></div> <!-- end butterflies div -->
<footer> <!-- begin footer -->
<div class="social-media">
<a class="twitter" href="https://twitter.com/irb_janet"><i class="fa fa-twitter"></i> @irb_janet</a>
<a class="facebook" 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"> <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>
<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>
</body>
</html>
Raw
styles.css
body {
position: relative;
background: url("../img/butterflies.png") repeat;
background-attachment: fixed;
background-size: cover;
}
.butterflies {
height: 300px;
}
/* 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;
color: #fff;
-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;
color: #fff;
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;
color: #000;
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;
color: #fff;
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;
color: #fff;
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;
color: #fff;
width: 110px;
}
.navbar ul li a {
color: #fff;
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;
color: #000;
}
.navbar #left {
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: black;
height: 65px;
width: 110px;
}
.nav-tabs > li > a {
margin-right: 0;
}
.navbar-collapse.collapse {
overflow: visible;
}
#right 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;
}
.glyphicon-chevron-left, .glyphicon-chevron-right {
color: white;
opacity: 0.45;
}
.name {
color: white !important;
font-family: 'Rock Salt', cursive;
font-size: 4em;
opacity: 0.65;
position: absolute;
top: 70px;
left: 25px;
}
.job-title {
font-family: 'Fira Sans', sans-serif;
font-size: 15px;
font-weight: bolder;
padding: 0;
color: black;
position: absolute;
top: 170px;
left: 30px;
}
.tagline {
font-family: 'Source Sans Pro', sans-serif;
font-weight: bold;
color: white;
opacity: 0.75;
}
#tagline-1 {
font-size: 3em;
color: purple;
opacity: 0.45;
display: block;
padding-left, padding-right: 0;
padding-top: 240px;
margin: auto;
width: 66.6%;
text-align: center;
}
#tagline-2 {
color: white;
opacity: 0.65;
display: block;
padding-left, padding-right: 0;
padding-top: 308px;
margin: auto;
font-size: 4em;
text-align: center;
}
#tagline-3 {
font-size: 4em;
color: aqua;
opacity: 0.35;
padding-top: 408px;
padding-left: 25px;
text-align: left;
}
.carousel-indicators {
padding-bottom: 0;
bottom: 40px;
}
#index a {
color: #9b111e;
}
.container {
width: 100%;
padding: 0;
}
/* About CSS Below */
#about .container-fluid {
padding-bottom: 25px;
}
#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;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
#about h2, h3 {
font-family: 'Source Sans Pro', sans-serif;
color: purple;
font-weight: bold;
opacity: 0.45;
}
#about .header {
background-color: black;
display: block;
margin-left, margin-right: auto;
padding: 85px 0;
}
#about .header h1 {
font-family: 'Rock Salt', cursive;
color: white;
text-align: center;
padding: 0;
}
.image {
margin-top: 50px;
}
.intro {
margin-top: 50px;
padding: 0;
}
.intro h2 {
text-align: center;
font-size: 2em;
}
.intro p {
text-align: center;
font-size: 1em;
font-family: 'Lato', sans-serif;
}
.intro img {
display: block;
margin-left, margin-right: auto;
}
.skills {
margin-top: 68px;
padding-top: 0;
}
.skills h3 {
text-align: center;
font-size: 2em;
padding-top: 0;
margin-top: 0;
padding-left: 0;
}
#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;
}
#video {
width: 560px;
height: 315px;
margin: 0 auto;
}
.main-text {
clear: both;
padding-top: 5%;
padding-left: 10%;
margin: auto;
width: 90%;
}
.main-text p {
font-family: 'Source Sans Pro', sans-serif;
color: #7A3D5C;
font-size: 2em;
width: 90%;
font-weight: 400;
text-align: justify;
}
.main-text p:hover {
color: purple;
cursor: default;
}
.main-text h3 {
padding-bottom: 1%;
font-size: 3em;
}
.main-text p:last-child {
padding-bottom: 10%;
}
/* Contact CSS Below */
#contact {
position: relative;
width: 100%;
padding-bottom: 200px;
}
#contact .header {
background-color: black;
margin: 0;
width: 100%;
}
#contact .header h1 {
font-family: 'Rock Salt', cursive;
color: white;
text-align: center;
padding: 100px 0;
margin: auto;
width: 100%;
}
.contact {
width: 100%;
margin: auto;
padding-top: 50px;
}
.center {
width: 70%;
margin: auto;
position: relative;
}
.contact h2 {
text-align: center;
font-family: 'Source Sans Pro', sans-serif;
color: purple;
padding-top: 50px;
margin: auto;
}
.contact h3 {
font-family: 'Source Sans Pro', sans-serif;
color: black;
display: inline;
}
.contact .contact-me {
font-family: 'Source Sans Pro', sans-serif;
color: purple;
opacity: 0.45;
font-weight: bold;
margin: auto;
width: 70%;
padding-top: 5px;
padding-left: 10px;
background: white;
}
.info {
width: 90%;
margin: auto;
background: white;
}
#info h3 {
color: black;
font-weight: 300;
opacity: 1;
}
.glyphicon-send, .glyphicon-phone, .glyphicon-globe {
width: 33%;
}
.e, .p, .l {
width: 33%;
}
#glyphs span {
font-size: 3em;
margin: auto;
text-align: center;
color: black;
}
#contact span:hover {
color: gray;
cursor: pointer;
}
.contact h3:hover {
color: #DDA0DD!important;
cursor: default;
}
.nav span {
cursor: pointer;
}
#contact .container-fluid .row-fluid .col-md-4, #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;
}
/* Work CSS Below */
#work img {
padding: 0 10px 60px 10px;
display: block;
}
#work h1 {
font-family: 'Rock Salt', cursive;
display: block;
padding-left, padding-right: 0;
padding-top: 55px;
margin-left: auto;
margin-right: auto;
margin-top: -2px;
width: 33.3%;
text-align: center;
color: white;
}
#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;
}
#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;
}
#work .container-fluid {
padding: 0 0 65px 0;
margin-bottom: 125px;
}
#work .header {
background-color: black;
margin: 0;
width: 100%;
padding-top: 20px;
}
#work .row-fluid {
padding-top: 50px;
}
#work h3 {
font-family: 'Architects Daughter', cursive;
width: 515px;
color: #000;
opacity: 1;
display: block;
padding-left: 10px;
margin-top: 0;
}
/* 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;
}
#faq .header {
background-color: black;
margin: 0;
padding: 10px 0 0 0;
width: 100%;
}
#faq .header h1 {
font-family: 'Rock Salt', cursive;
color: white;
text-align: center;
padding: 100px 0 90px 0;
margin: auto;
width: 100%;
}
.panel-group {
margin: 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-body {
font-family: 'Architects Daughter', cursive;
color: black;
background-color: white;
font-size: 18px;
}
.panel {
border: 2px solid black;
width: 600px;
}
#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;
color: white;
font-family: 'Lato', sans-serif;
padding: 1%;
}
.copyright {
float: left;
font-size: 1em;
margin: auto;
padding-left: 1%;
padding-top: 12px;
}
.twitter, .facebook {
color: white;
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