Skip to content

Instantly share code, notes, and snippets.

@janetferguson

janetferguson/about.html

Created March 1, 2015 21:22
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save janetferguson/917560d64c86ef39f265 to your computer and use it in GitHub Desktop.
Download ZIP
Exercise 6
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' />
</head>
<!-- All the stuff you can see! :) -->
<body>
<div class="container">
<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>
</div> <!-- end main_text class div -->
</div> <!-- end container div -->
</body>
</html>
Raw
about_styles.css
* { box-sizing: border-box; }
.container {
width: 90%;
}
h2, h3 {
font-family: 'Architects Daughter', cursive;
color: #9b111e;
}
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: 10px 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 #FF0960;
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: #FFCCCC;
padding: 10px 50px;
margin: 0 75px;
height: 230px;
width: 27%;
float: left;
}
.skills h2 {
text-align: center;
}
#skill_list {
display: inline;
font-size: 12px;
}
#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" />
<link href="css/bootstrap.css" rel="stylesheet" />
<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' />
</head>
<!-- All the stuff you can see! :) -->
<body>
<div class="container">
<div class="header">
<h1>Contact Janet</h1>
</div> <!-- end header div -->
<div class="contact">
<h2>Feel free to get in touch:</h2>
<p>Just click on your preferred contact method below.</p>
<ul id="icons">
<li><a href="https://github.com/janetferguson" target="_blank"><img src="img/github-128-black.png" alt="github_janet" /></a></li>
<li><a href="https://bitbucket.org/janetferguson" target="_blank"><img src="img/bitbucket-128-black.png" /></a></li>
<li><a href="mailto:[email protected]?Subject=Hello%20Janet" target="_top"><img src="img/email-128-black.png" alt="email_janet" /></a></li>
<li><a href="#" target="_blank"><img src="img/linkedin-128-black.png" alt="linkedin" /></a></li>
<li><a href="https://twitter.com/irb_janet" target="_blank"><img src="img/twitter-128-black.png" alt="twitter" /></a></li>
</ul>
</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;
}
.container {
width: 90%;
}
.contact {
width: 100%;
margin: auto;
}
.header {
background-color: black;
margin: -20px -85px;
padding: 12px 0;
}
.header h1 {
font-family: 'Rock Salt', cursive;
color: white;
text-align: center;
padding: 10px 0;
}
.contact h2 {
text-align: center;
font-family: 'Lato', sans-serif;
color: #FF0960;
padding-top: 50px;
margin: auto;
}
.contact p {
text-align: center;
font-family: 'Lato', sans-serif;
color: black;
text-transform: uppercase;
padding-top: 60px;
}
#icons {
width: 64%;
margin-left: auto;
margin-right: auto;
}
#icons li {
list-style-type: none;
display: inline;
}
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Janet Ferguson - Full Stack Web Developer | Rubyist</title>
<!-- 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" />
<!-- 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]-->
</head>
<body>
<div class="nav">
<ul id="left">
<li><a href="#">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</a></li>
</ul>
</div> <!-- end nav div -->
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<div class="intro">
<h1>Janet Ferguson</h1>
<p>Full Stack Web Developer &amp; Rubyist</p>
<img class="ruby" src="img/ruby-pink.png" />
<p><span>Placeholder text</span></p>
<p><span>Placeholder text</span></p>
</div> <!-- end intro div -->
</div> <!-- end container div -->
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Portfolio Concept</h2>
<p>My portfolio will be showcasing a variety of Rails powered applications that demonstrate superior user experience, simple designs, and good, clean code written in Ruby. And coolness in general.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h2>Project Goals</h2>
<p>Every project will receive my utmost concentration and effort. I tend to be a perfectionist, so I can see myself spending significant time tweaking small details for each portfolio piece.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h2>Course Goals</h2>
<p>I will be open to getting a junior developer job in the beginning, but eventually I would like to be a freelancer to build projects for clients and for my own startup ideas. <a href="about.html">Read more about me here.</a></p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
</div>
<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>
<hr>
<footer>
<p><strong>My &#9825; beats for Ruby.</strong> | <span><em>What can I help you portray to the world?</em></span> | <a href="contact.html">Contact me here.</a></p>
</footer>
</div> <!-- /container -->
<!--
================================================== -->
<!-- Can place script tags with JavaScript files here -->
</body>
</html>
Raw
styles.css
body {
position: relative;
}
.nav {
background-color: black;
opacity: 1;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 65px;
padding: 6px 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: 55px;
left: 0;
width: 150px;
display: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
margin-left: -1px;
opacity: 0;
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: 14px;
margin: auto;
width: 110px;
height: 55px;
border: 1px solid white;
}
.nav ul li ul li:hover {
background: #ff0960;
padding: 7px;
padding-top: 13px;
border: 1px solid transparent;
}
.nav ul li:hover ul {
display: inline-block;
opacity: 1;
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: 20px 20px;
-webkit-transition: color 600ms;
transition: color 600ms;
}
.nav ul li a:hover {
background-color: #ff0960;
text-decoration: none;
text-shadow: none;
padding: 19px 19px;
border: 1px solid transparent;
}
.nav #left {
float: left;
padding-left: 0px;
}
.jumbotron {
background-color: black;
background-size: cover;
}
.jumbotron h1 {
color: #9b111e;
font-family: 'Rock Salt', cursive;
font-size: 40px;
padding-top: 30px;
}
.jumbotron p span {
visibility: hidden;
}
.jumbotron p {
color: #ff0960;
font-family: 'Fira Sans', sans-serif;
font-size: 16px;
padding: 5px 0;
}
.ruby {
display: block;
margin: 0 auto;
}
.col-md-4 {
font-family: 'Lato', sans-serif;
}
a {
color: #9b111e;
}
footer {
color: #ff0960;
}
footer p span {
color: black;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment