Skip to content

Instantly share code, notes, and snippets.

@janetferguson

janetferguson/about.html

Created March 7, 2015 22:41
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save janetferguson/f496a0ea8feeb5d8504a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save janetferguson/f496a0ea8feeb5d8504a to your computer and use it in GitHub Desktop.
Download ZIP
Exercise 8
Raw
about.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link href="css/normalize.css" rel="stylesheet" />
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/about_styles.css" rel="stylesheet" />
<title>About Janet Full Stack Web Developer | Rubyist</title>
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
<!-- 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=Architects+Daughter' rel='stylesheet' type='text/css' />
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900" rel="stylesheet" type="text/css" />
</head>
<!-- All the stuff you can see! :) -->
<body>
<div class="container">
<div class="nav">
<ul id="left">
<li><a href="index.html">Home</a></li>
</ul>
<ul id="right">
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a id="portfolio" href="#">My 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="#">Portfolio</a></li>
</ul>
</li>
<li><a id="faq" href="faq.html">FAQ</a></li>
</ul>
</div> <!-- end nav div -->
<div class="header">
<h1>About Janet</h1>
</div> <!-- end header div -->
<div class="upper">
<div class="image column">
<img src="img/janet2.png" alt="janet"/>
</div> <!-- end image column class div -->
<div class="intro column">
<h2>Who is Janet?</h2>
<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 column class div -->
<div class="skills column">
<h2>My Skills</h2>
<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 column class div -->
</div> <!-- end upper class div -->
<div class="main_text">
<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. <a href="#">See my projects here.</a></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>My home base is in Los Angeles, California, but I've spent a lot of time living in Colorado as well. Both places have their appeal and quirks.</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>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure vitae ea, repudiandae adipisci vero perspiciatis, quidem sapiente nostrum exercitationem hic doloremque, atque quibusdam tenetur omnis! Tempora nostrum qui temporibus blanditiis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure vitae ea, repudiandae adipisci vero perspiciatis, quidem sapiente nostrum exercitationem hic doloremque, atque quibusdam tenetur omnis! Tempora nostrum qui temporibus blanditiis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure vitae ea, repudiandae adipisci vero perspiciatis, quidem sapiente nostrum exercitationem hic doloremque, atque quibusdam tenetur omnis! Tempora nostrum qui temporibus blanditiis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure vitae ea, repudiandae adipisci vero perspiciatis, quidem sapiente nostrum exercitationem hic doloremque, atque quibusdam tenetur omnis! Tempora nostrum qui temporibus blanditiis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure vitae ea, repudiandae adipisci vero perspiciatis, quidem sapiente nostrum exercitationem hic doloremque, atque quibusdam tenetur omnis! Tempora nostrum qui temporibus blanditiis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure vitae ea, repudiandae adipisci vero perspiciatis, quidem sapiente nostrum exercitationem hic doloremque, atque quibusdam tenetur omnis! Tempora nostrum qui temporibus blanditiis.</p>
</div> <!-- end main_text class div -->
</div> <!-- end container div -->
</body>
</html>
Raw
about_styles.css
* { box-sizing: border-box; }
body {
position: relative;
}
.container {
width: 90%;
}
.nav {
background-color: black;
opacity: 0.75;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 65px;
padding: 0;
z-index: 15;
}
.nav ul {
float: right;
display: inline;
margin: 0;
list-style: none;
}
.nav ul li {
display: inline-block;
float: left;
position: relative;
background: black;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 20px 0 20px;
margin-right: -4px;
cursor: pointer;
font-family: 'Lato', sans-serif;
color: white;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.nav 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;
opacity: 0.5;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
.nav ul li ul li {
background: black;
display: inline-block;
color: white;
text-align: center;
padding: 8px;
padding-top: 16px;
margin: auto;
width: 110px;
height: 55px;
border: 1px solid white;
}
.nav ul li ul li:hover {
background: black;
padding: 7px;
padding-top: 15px;
border: 1px solid white;
}
.nav ul li:hover ul {
display: inline-block;
opacity: 0.5;
height: 65px;
visibility: visible;
border: 1px solid transparent;
}
.nav ul li ul li a {
margin: auto;
padding: 3px 2px;
}
.nav ul li ul li a:hover {
margin: auto;
text-decoration: none;
text-shadow: none;
padding: 2px 1px;
border: 1px solid transparent;
opacity: 0.8;
}
.nav ul li a {
color: white;
padding: 25px 20px;
height: 65px;
-webkit-transition: color 600ms;
transition: color 600ms;
}
.nav ul li a:hover {
opacity: 0.4;
height: 65px;
text-decoration: none;
text-shadow: none;
padding: 24px 19px;
border: 1px solid transparent;
}
.nav #left {
float: left;
padding-left: 0px;
}
h2, h3 {
font-family: 'Source Sans Pro', sans-serif;
color: purple;
font-weight: bold;
opacity: 0.45;
}
p {
font-family: 'Lato', sans-serif;
color: #7A3D5C;
font-size: 1em;
}
.header {
background-color: black;
margin: -20px -85px;
padding: 12px 0;
}
.header h1 {
font-family: 'Rock Salt', cursive;
color: white;
text-align: center;
padding: 60px 0;
}
.column {
display: inline-block;
width: 30%;
margin: 0 auto;
}
.upper {
padding-top: 50px;
margin: auto;
width: 90%;
padding-left: 5%;
}
.image {
float: left;
width: 30%;
margin: auto;
}
.intro {
padding: 0 18px;
margin: auto;
border: 2px dashed black;
width: 27%;
height: 230px;
float: left;
}
.intro h2 {
text-align: center;
padding: 0;
}
.intro p {
text-align: center;
font-size: 1em;
}
.intro img {
display: block;
margin-left: auto;
margin-right: auto;
}
.skills {
background-color: gray;
padding: 10px 50px;
margin: 0 75px;
height: 230px;
width: 27%;
float: left;
}
.skills h2 {
text-align: center;
}
#skill_list {
display: inline;
font-size: 12px;
color: white;
}
#skill_list li {
list-style-type: none;
}
.main_text {
clear: both;
padding-top: 60px;
margin: auto;
width: 90%;
}
.main_text h3 {
padding-bottom: 15px;
}
.main_text p:last-child {
padding-bottom: 20px;
}
Raw
contact.html
<!DOCTYPE html>
<html lang="en" />
<head>
<meta charset="utf-8" />
<link href="css/normalize.css" rel="stylesheet" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="css/contact_styles.css" rel="stylesheet" />
<title>Contact Janet Full Stack Web Developer | Rubyist</title>
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
<!-- 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=Architects+Daughter' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Francois+One' rel='stylesheet' type='text/css' />
</head>
<!-- All the stuff you can see! :) -->
<body>
<div class="container">
<div class="nav">
<ul id="left">
<li><a href="index.html">Home</a></li>
</ul>
<ul id="right">
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a id="portfolio" href="#">My 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="#">Portfolio</a></li>
</ul>
</li>
<li><a id="faq" href="faq.html">FAQ</a></li>
</ul>
</div> <!-- end nav div -->
<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="border"></div>
<div class="center info">
<div id="one">
<span class="glyphicon glyphicon-globe col-xs-12"></span><h3 class="col-xs-12">Redondo Beach, CA</h3> <h3 class="col-xs-12">Colorado Springs, CO</h3>
</div> <!-- end div one -->
<br>
<div id="two">
<span class="glyphicon glyphicon-phone col-xs-3 text-right"></span><h3 class="col-xs-3">+1 323 489 8604</h3>
</div> <!-- end div two -->
<br>
<div id="three">
<span class="glyphicon glyphicon-send col-xs-3 text-right"></span><h3 class="col-xs-3">janet.ferguson[at]me.com</h3>
</div> <!-- end div three -->
</div> <!-- end center info div -->
</div> <!-- end contact div -->
</div> <!-- end container div -->
</body>
</html>
Raw
contact_styles.css
body {
background-image: url("../img/squared-metal.png");
background-repeat: repeat;
position: relative;
width: 100%;
}
.container {
width: 100%;
padding: 0;
}
.nav {
background-color: black;
opacity: 0.75;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 65px;
padding: 0;
z-index: 15;
}
.nav ul {
float: right;
display: inline;
margin: 0;
list-style: none;
}
.nav ul li {
display: inline-block;
float: left;
position: relative;
background: black;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 20px 0 20px;
margin-right: -4px;
cursor: pointer;
font-family: 'Lato', sans-serif;
color: white;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.nav 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;
opacity: 0.5;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
.nav ul li ul li {
background: black;
display: inline-block;
color: white;
text-align: center;
padding: 8px;
padding-top: 16px;
margin: auto;
width: 110px;
height: 55px;
border: 1px solid white;
}
.nav ul li ul li:hover {
background: black;
padding: 7px;
padding-top: 15px;
border: 1px solid white;
}
.nav ul li:hover ul {
display: inline-block;
opacity: 0.5;
height: 65px;
visibility: visible;
border: 1px solid transparent;
}
.nav ul li ul li a {
margin: auto;
padding: 3px 2px;
}
.nav ul li ul li a:hover {
margin: auto;
text-decoration: none;
text-shadow: none;
padding: 2px 1px;
border: 1px solid transparent;
opacity: 0.8;
}
.nav ul li a {
color: white;
padding: 25px 20px;
height: 65px;
-webkit-transition: color 600ms;
transition: color 600ms;
}
.nav ul li a:hover {
opacity: 0.4;
height: 65px;
text-decoration: none;
text-shadow: none;
padding: 24px 19px;
border: 1px solid transparent;
}
.nav #left {
float: left;
padding-left: 0px;
}
.header {
background-color: black;
margin: 0;
width: 100%;
}
.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;
}
.info {
width: 90%;
margin: auto;
}
span {
font-size: 3em;
margin: auto;
text-align: center;
}
#one, #two, #three {
width: 100%;
font-family: 'Lato', sans-serif;
margin: auto;
}
#one {
width: 70%;
display: inline-block;
margin: 0;
padding-top: 20px;
}
#one h3 {
padding-left: 325px;
padding-top, padding-bottom: 13px;
margin: 0 auto;
text-align: center;
}
.col-xs-12 {
padding-top: 15px;
}
#two, #three {
display: inline;
width: 80%;
margin: auto;
padding-bottom: 50px;
}
#two {
position: absolute;
left: -300px;
top: 90px;
}
#three {
position: absolute;
left: 340px;
top: 90px;
}
.glyphicon-globe {
margin: auto;
padding-left: 325px;
}
.border {
border-bottom: 1px dotted gray;
width: 80%;
margin: auto;
padding-top: 25px;
}
span:hover, .contact h3:hover {
color: #4B0082;
cursor: default;
}
Raw
faq.html
<!DOCTYPE html>
<html lang="en" />
<head>
<meta charset="utf-8" />
<link href="css/normalize.css" rel="stylesheet" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="css/faq_styles.css" rel="stylesheet" />
<title>FAQs Janet Full Stack Web Developer | Rubyist</title>
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
<!-- 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=Architects+Daughter' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Francois+One' rel='stylesheet' type='text/css' />
</head>
<!-- All the stuff you can see! :) -->
<body>
<div class="container">
<div class="nav">
<ul id="left">
<li><a href="index.html">Home</a></li>
</ul>
<ul id="right">
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a id="portfolio" href="#">My 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="#">Portfolio</a></li>
</ul>
</li>
<li><a id="faq" href="faq.html">FAQ</a></li>
</ul>
</div> <!-- end nav div -->
<div class="header">
<h1>Frequently Asked Questions</h1>
</div> <!-- end header div -->
<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"><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 container div -->
</body>
</html>
Raw
faq_styles.css
body {
background-image: url("../img/pink-dots.png");
background-repeat: repeat;
width: 100%;
}
.container {
width: 100%;
padding: 0;
}
.nav {
background-color: black;
opacity: 0.75;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 65px;
padding: 0;
z-index: 15;
}
.nav ul {
float: right;
display: inline;
margin: 0;
list-style: none;
}
.nav ul li {
display: inline-block;
float: left;
position: relative;
background: black;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 20px 0 20px;
margin-right: -4px;
cursor: pointer;
font-family: 'Lato', sans-serif;
color: white;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.nav 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;
opacity: 0.5;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
.nav ul li ul li {
background: black;
display: inline-block;
color: white;
text-align: center;
padding: 8px;
padding-top: 16px;
margin: auto;
width: 110px;
height: 55px;
border: 1px solid white;
}
.nav ul li ul li:hover {
background: black;
padding: 7px;
padding-top: 15px;
border: 1px solid white;
}
.nav ul li:hover ul {
display: inline-block;
opacity: 0.5;
height: 65px;
visibility: visible;
border: 1px solid transparent;
}
.nav ul li ul li a {
margin: auto;
padding: 3px 2px;
}
.nav ul li ul li a:hover {
margin: auto;
text-decoration: none;
text-shadow: none;
padding: 2px 1px;
border: 1px solid transparent;
opacity: 0.8;
}
.nav ul li a {
color: white;
padding: 25px 20px;
height: 65px;
-webkit-transition: color 600ms;
transition: color 600ms;
}
.nav ul li a:hover {
opacity: 0.4;
height: 65px;
text-decoration: none;
text-shadow: none;
padding: 24px 19px;
border: 1px solid transparent;
}
.nav #left {
float: left;
padding-left: 0px;
}
.header {
background-color: black;
margin: 0;
width: 100%;
}
.header h1 {
font-family: 'Rock Salt', cursive;
color: white;
text-align: center;
padding: 100px 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: #F08080;
font-weight: bold;
}
.panel-title a:hover {
text-decoration: none;
color: #CD5C5C;
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;
}
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" />
<!-- 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" />
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[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 src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/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>
</head>
<body>
<div class="nav">
<ul id="left">
<li><a href="index.html">Home</a></li>
</ul>
<ul id="right">
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a id="portfolio" href="#">My 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="#">Portfolio</a></li>
</ul>
</li>
<li><a id="faq" href="faq.html">FAQ</a></li>
</ul>
</div> <!-- end nav div -->
<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/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 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 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 container-fluid div -->
<div class="paragraphs">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quae ducimus, sed cum pariatur quidem animi, saepe in, quos laboriosam voluptatibus laborum blanditiis unde perferendis inventore sunt quaerat nihil. Ipsum!</p>
</div> <!-- end paragraphs div -->
<!--
================================================== -->
<!-- Can place script tags with JavaScript files here -->
</body>
</html>
Raw
styles.css
html {
height: 100%;
}
body {
position: relative;
background: url("../img/butterflies.jpg") no-repeat center fixed;
background-size: cover;
height: 100%;
}
@media (max-width: 980px) {
body {
padding-top: 0px;
}
}
.nav {
background-color: black;
opacity: 0.75;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 65px;
padding: 0;
z-index: 15;
}
.nav ul {
float: right;
display: inline;
margin: 0;
list-style: none;
}
.nav ul li {
display: inline-block;
float: left;
position: relative;
background: black;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 20px 0 20px;
margin-right: -4px;
cursor: pointer;
font-family: 'Lato', sans-serif;
color: white;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.nav 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;
opacity: 0.5;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
.nav ul li ul li {
background: black;
display: inline-block;
color: white;
text-align: center;
padding: 8px;
padding-top: 16px;
margin: auto;
width: 110px;
height: 55px;
border: 1px solid white;
}
.nav ul li ul li:hover {
background: black;
padding: 7px;
padding-top: 15px;
border: 1px solid white;
}
.nav ul li:hover ul {
display: inline-block;
opacity: 0.5;
height: 65px;
visibility: visible;
border: 1px solid transparent;
}
.nav ul li ul li a {
margin: auto;
padding: 3px 2px;
}
.nav ul li ul li a:hover {
margin: auto;
text-decoration: none;
text-shadow: none;
padding: 2px 1px;
border: 1px solid transparent;
}
.nav ul li a {
color: white;
padding: 25px 20px;
height: 65px;
-webkit-transition: color 600ms;
transition: color 600ms;
}
.nav ul li a:hover {
opacity: 0.4;
height: 65px;
text-decoration: none;
text-shadow: none;
padding: 24px 19px;
border: 1px solid transparent;
}
.nav #left {
float: left;
padding-left: 0px;
}
.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;
}
.item {
width: 100%;
height: 100%;
}
.carousel-caption {
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.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 {
position: absolute;
top: 225px;
left: 240px;
font-size: 3em;
width: 70%;
text-align: left;
color: purple;
opacity: 0.45;
padding: 0;
}
#tagline-2 {
position: absolute;
top: 310px;
left: 125px;
width: 90%;
font-size: 4em;
text-align: left;
}
#tagline-3 {
position: absolute;
top: 500px;
left: 30px;
font-size: 4em;
width: 95%;
color: aqua;
opacity: 0.35;
text-align: left;
}
.carousel-indicators {
padding-bottom: 0;
bottom: 40px;
}
a {
color: #9b111e;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment