Skip to content

Instantly share code, notes, and snippets.

@Steph-harris

Steph-harris/About css

Created June 3, 2015 19:44
Show Gist options
  • Save Steph-harris/fd3aecabf171eea54704 to your computer and use it in GitHub Desktop.
Save Steph-harris/fd3aecabf171eea54704 to your computer and use it in GitHub Desktop.
Download ZIP
Ex. 5 Revised
Raw
about
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
<link rel="stylesheet" style="text/css" href="css/style.css" >
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" style="text/css" href="css/about_styles.css">
<link rel="stylesheet" type="text/css" href="css/contact_styles.css">
<title>Stephanie Harris Web</title>
<!--[if IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="header">
<h1>About Me</h1>
<div class="nav">
<ul>
<li><a href="http://painter-mildred-27247.bitballoon.com">Home</a></li>
<li><a href="http://painter-mildred-27247.bitballoon.com/about">About Me</a></li>
<li><a href="http://painter-mildred-27247.bitballoon.com/contact">Contact Me</a></li>
<li><a href="">Work</a></li>
<li><a href="">FAQ</a></li>
</ul>
</div>
</div>
<div class="image"><img src="img/beach.jpg" alt="Jersey Shore pic">
</div>
<div class="intro column">
<h2>The Basics</h2>
<p>I am a late 20's career changer trying to break into a new industry in the least amount of time, but with the maximum amount of effort possible.</p>
</div>
<div class="skills column">
<h3>My Skills</h3>
<ul id="skill_list">
<li>Html</li>
<li>CSS</li>
<li>Writing/Editing</li>
<li>Music Performance, Conducting and Theory</li>
<li>Baseball and Basketball Scorebooking</li>
</ul>
</div>
<div class="main_text">
<h3>The "<em>Fuller</em>" Story</h3>
<p>Until very recently, I thought that my life's goal was to become a full-time church musician. To that end I studied for and received both a B.A. and a Master's Degree in music. After months of feeling like I had maybe chosen the wrong career, I decided to make a drastic change and pursue web development instead. It has been less than a month since I started down this path, but I already feel much happier and excited than I have been in awhile.
</div>
</div><!--end of main container-->
</body>
</html>
Raw
About css
/*about_styles.css*/
* {box-sizing: border-box;}
body {
background-color: #f5f2f2;
color: #008080;
}
.container {
width:80%;
margin: 0 auto;
}
.header h1 {
text-align: center;
background-image: url("../img/purple.jpg");
background-size: contain;
text-decoration: none;
}
.image {
display: inline-block;
float: left;
margin-top: 35px;
}
.column {
border: 4px ridge #008080;
background-color: #330033;
display: inline-block;
width: 37%;
padding: 0 20px;
margin-left: 50%;
}
.intro {
position: relative;
padding: 20px 15px 0px 20px;
margin: 35px 10px 0px 35px;
}
.skills {
position: relative;
float:right;
margin: 35px 0px 20px 20px;
padding-right: 20px;
}
.main_text {
border: 4px ridge #008080;
background-color: #330033;
clear: both;
padding: 2px 15px;
position: relative;
top:35px;
left: -21px;
width: 50%;
margin-left: 25%;
}
#skill_list {
padding: 0 0 0 30px;
margin-left: 0px;
}
/*typography*/
h1, h2, h3 {
font-family: 'Open Sans', Futura, Helvetica, Arial, sans-serif;
color: #f5f2f2;
text-transform: uppercase;
text-decoration: underline;
text-align: center;
}
p, li {
font-family: 'Lora', Georgia, Times, Times New Roman, serif;
}
.intro p {
font-family: 'Segoe UI', Frutiger, 'Frutiger Linotype', 'Dejavu Sans', 'Helvetica Neue', Arial, sans-serif;
font-size: 1.5em;
font-weight: 500;
-webkit-margin-before: 0;
}
.skills h3 {
text-align: center;
text-transform: uppercase;
}
Raw
Contact
/*contact_styles.css*/
.header, .email, .number, .address {
font-family: 'Segoe UI', Frutiger, 'Frutiger Linotype', 'Dejavu Sans', 'Helvetica Neue', Arial, sans-serif;
font-size: 1.5em;
font-weight: 500;
border: 4px ridge #008080;
background-color: #330033;
}
.email, .number, .address, .image_one, .image_two, .image_three {
display: inline-block;
position: relative;
}
.email, .number, .address {
padding: 5px;
}
.image_one, .image_two, .image_three {
margin-top: 25px;
margin-bottom: 15px;
}
.image_one {
left: 10%
}
.image_two {
left: 23%;
}
.image_three {
left: 36%;
}
.email {
left: 4%;
}
.number {
left: 12%;
}
.address {
left: 22%;
}
Raw
contact
<!Doctype Html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
<link rel="stylesheet" style="text/css" href="css/style.css" >
<link rel="stylesheet" type="text/css" href="css/contact_styles.css">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/about_styles.css">
<title>Contact Info</title>
</head>
<body>
<div class="container">
<div class="header">
<h1>Contact Info</h1>
<div class="nav">
<ul>
<li><a href="http://painter-mildred-27247.bitballoon.com">Home</a></li>
<li><a href="http://painter-mildred-27247.bitballoon.com/about">About Me</a></li>
<li><a href="http://painter-mildred-27247.bitballoon.com/contact">Contact Me</a></li>
<li><a href="">Work</a></li>
<li><a href="">FAQ</a></li>
</ul>
</div>
</div>
<div class="image_one"><img src="img/email.jpg" alt="pic of email"></div>
<div class="image_two"><img src="img/phone.jpg" alt="pic of telephone"></div>
<div class="image_three"><img src="img/snailmail.jpg" alt="pic of mailbox"></div>
<br>
<div class="email">
<h3>Steph.harris21@gmail.com</h3>
</div>
<div class="number">
<h3>XXX-616-8505</h3>
</div>
<div class="address">
<h3>Union and Central Ave <br>Stratford, NJ 08084</h3>
</div>
<!--Add Facebook, Twitter, and LinkedIn?-->
</div><!--end of div class container-->
</body>
</html>
Raw
index html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Stephanie Harris Web</title>
<!-- Bootstrap core CSS -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
<link style="text/css" href="css/bootstrap.css" rel="stylesheet">
<link style="text/css" href="css/style.css" rel="stylesheet">
<link style="text/css" href="css/about_styles.css" rel="stylesheet" >
<link rel="stylesheet" href="css/contact_styles.css" type="text/css" >
<!-- Custom styles for this template go here -->
<!-- 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>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Stephanie Harris</h1>
<p><strong> Webmaster Apprentice.</strong> Info on me and my development as a web specialist. Making the leap from guitarist to GitHub-ist.
</p>
</div>
</div>
<div class="nav">
<ul>
<li><a href="http://painter-mildred-27247.bitballoon.com">Home</a></li>
<li><a href="http://painter-mildred-27247.bitballoon.com/about">About Me</a></li>
<li><a href="http://painter-mildred-27247.bitballoon.com/contact">Contact Me</a></li>
<li><a href="">Work</a></li>
<li><a href="">FAQ</a></li>
</ul>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Portfolio Concept</h2>
<p>I want to learn how to make beautifully interactive websites. I've been a church musician for almost 5 years, but I'm looking to use my artistic creativity to go in a completely new direction.</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>My work at church really dies down over the summer, so it is in my best interest to get as much work done during this time as possible. I would like to be done with all my assignments by the end of September so I can avoid working during the pre-Christmas crazy season. </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 want to switch careers and become an entry-level developer. I don't <strong>hate</strong> the idea of freelancing, but the entire reason I want to leave my current career is to have more stability, not <em>even more</em> uncertainty!</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
</div>
<hr>
</div> <!-- /container -->
<!--
================================================== -->
<!-- Can place script tags with JavaScript files here -->
</body>
</html>
Raw
style (index)
/*style.css*/
* {box-sizing: border-box;}
body {
background-color: #EEDC82;
}
h2 {
color:purple;}
.jumbotron {
background-image: url("../img/purple.jpg");
background-size: contain;
}
.jumbotron h1 {
text-decoration: none;
}
.jumbotron p {
color:#f0f8ff;
}
.nav {
position: fixed;
width: 100%;
top: 0;
left:65%;
}
.nav ul {
margin: 0;
}
.nav ul li {
display: inline-block;
background-color: #008080;
text-transform: uppercase;
padding: 10px 20px;
float: left;
font-size: 14px;
line-height: 1.428;
}
.nav ul li a{
letter-spacing: 0.05em;
transition: color 700ms;
-webkit-transition: color 700ms;
}
a {
color:#f0f8ff;
text-decoration: underline;
}
a:hover {
color:#FFB00F;
font-weight: bold;
text-decoration: none;
}
.jumbotron h1 {
color:#f0f8ff;
}
.row {
border: 4px ridge #008080;
background-color: #330033;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment