Steph-harris/About.html

## About.html
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <link rel="stylesheet" type="text/css" href="css/normalize.css">
   <link style="text/css" rel="stylesheet" href="css/about_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>More About Me</h1>
	   </div>
	   <div class="image"><img src="img/beach.jpg" alt="Jersey Shore pic">
	   </div>
	   <div class="intro column">
	   	    <h2>Introduction</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/CSS</li>
	   	     	  <li>Music Performance and Conducting</li>
	   	     	  <li>Baseball and Basketball Scorebooking</li>
	   	     </ul>
	   </div>
	   <div class="main_text">
             <h3>"My 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>

## About_styles
/*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;
	position: fixed;
	margin-top: 20px;
}
.column {
	border: 4px ridge #008080;
	background-color: #330033;
	display: inline-block;
	float: right;
	width: 30%;
	padding: 0 20px;
	margin-left: 50%;
}
.intro {
  position: absolute;
  padding: 20px 15px 0px 20px;
  margin-top: 20px;
}
.skills {
  position: relative;
  left:-45%;
  margin: 20px 0px 20px 40px;
  padding-right: 20px;
}
.main_text {
	border: 4px ridge #008080;
	background-color: #330033;
	clear: both;
	padding: 2px 15px;
	position: relative;
	top:80px;
	width: 50%;
	margin-left: 25%;
}
#skill_list {
	padding: 0 0 0 30px;
	margin-left: 0px;
}

/*typography*/
h1, h2, h3 {
	font-family: Futura, Helvetica, Arial, sans-serif;
	color: #f5f2f2;
	text-transform: uppercase;
	text-decoration: underline;
	text-align: center;
}
p, li {
	font-family: 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;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/normalize.css">
	<link style="text/css" rel="stylesheet" href="css/about_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>More About Me</h1>
	</div>
	<div class="image"><img src="img/beach.jpg" alt="Jersey Shore pic">
	</div>
	<div class="intro column">
	<h2>Introduction</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/CSS</li>
	<li>Music Performance and Conducting</li>
	<li>Baseball and Basketball Scorebooking</li>
	</ul>
	</div>
	<div class="main_text">
	<h3>"My 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>
	/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;
	position: fixed;
	margin-top: 20px;
	}
	.column {
	border: 4px ridge #008080;
	background-color: #330033;
	display: inline-block;
	float: right;
	width: 30%;
	padding: 0 20px;
	margin-left: 50%;
	}
	.intro {
	position: absolute;
	padding: 20px 15px 0px 20px;
	margin-top: 20px;
	}
	.skills {
	position: relative;
	left:-45%;
	margin: 20px 0px 20px 40px;
	padding-right: 20px;
	}
	.main_text {
	border: 4px ridge #008080;
	background-color: #330033;
	clear: both;
	padding: 2px 15px;
	position: relative;
	top:80px;
	width: 50%;
	margin-left: 25%;
	}
	#skill_list {
	padding: 0 0 0 30px;
	margin-left: 0px;
	}

	/typography/
	h1, h2, h3 {
	font-family: Futura, Helvetica, Arial, sans-serif;
	color: #f5f2f2;
	text-transform: uppercase;
	text-decoration: underline;
	text-align: center;
	}
	p, li {
	font-family: 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;
	}