Skip to content

Instantly share code, notes, and snippets.

@janetferguson

janetferguson/About_v1

Last active August 29, 2015 14:15
Show Gist options
  • Save janetferguson/0d2ef2fe1f6d14799bdc to your computer and use it in GitHub Desktop.
Save janetferguson/0d2ef2fe1f6d14799bdc to your computer and use it in GitHub Desktop.
Download ZIP
About Page (Version 1)
Raw
about_styles.css
* { box-sizing: border-box; }
.container {
width: 80%;
margin: 0 auto;
padding: 15px;
}
p, li {
font-family: 'Lato', sans-serif;
color: #FF0960;
}
h1 {
font-family: 'Rock Salt', cursive;
width: 30%;
}
h2, h3 {
font-family: 'Architects Daughter', cursive;
color: #9b111e;
}
.header {
display: inline;
}
.header h1 {
position: absolute;
left: 400px;
display: inline;
color: black;
padding-bottom: 20px;
padding-right, padding-left: 0;
text-align: center;
border-bottom: 4px solid #ff0960;
}
.header img {
display: block;
float: left;
}
.column {
display: inline-block;
width: 30%;
margin: 0 auto;
}
.inline_block {
display: inline-block;
margin: auto;
padding-left: 2%;
}
.image {
float: left;
width: 30%;
padding-right: 20px;
margin-left: 22px;
}
.intro {
padding: 0 20px;
margin: auto;
border: 2px dashed black;
width: 25%;
height: 220px;
float: left;
}
.intro h2 {
text-align: center;
padding: 10px;
}
.intro p {
text-align: center;
font-size: 1em;
}
.skills {
background-color: #FFCCCC;
padding: 10px 50px;
margin: 0 75px;
height: 220px;
width: 26%;
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 {
display: inline;
border-bottom: 3px solid #FF0960;
width: 30%;
}
.main_text p {
padding-top: 20px;
}
Raw
About_v1
<!doctype html>
<html lang=“en”>
<head>
<meta charset="utf-8">
<title>About | Janet Ferguson Full Stack Web Developer</title>
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="header">
<h1>About Janet</h1>
<div class="image">
<img src="img/janet2.png" alt="ruby"/>
</div> <!-- end image class div -->
<div class="intro column">
<h2>Who is Janet?</h2>
<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, do know that I never do things only halfway...every project is completed to its fullest extent.</p>
<div class="skills column">
<h3>My Skills</h3>
</div> <!-- end skills column class div -->
<ul id="skill_list">
<li>Ruby on Rails</li>
<li>JavaScript/jQuery</li>
<li>HTML5</li>
<li>CSS3</li>
<li>What else are we learning in this course? I'll finish this list later! :)</li>
</ul>
</div> <!-- end intro column class div -->
<div class="main_text">
<h3>More About Me</h3>
<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 header class div -->
</div> <!-- end container -->
</body>
</html>
Raw
about_v2.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>
<img src="img/ruby_red_pink.png" alt="ruby" />
</div> <!-- end header class div -->
<div class="inline_block">
<div class="image">
<img src="img/janet2.png" alt="janet"/>
</div> <!-- end image 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>
</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 inline_block 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 -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment