ademsas/about.html

## about.html
<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="css/normalize.css">
		<link rel="stylesheet" href="css/about_styles.css">
		<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Raleway">
		<title>About Me</title>
		<!--[if lt IE 9]>
		<script src="dist/html5shiv.js"></script>
		<![endif]-->
	</head>
	<body class="body">
		<div class="container">
			<div class="header">
				<h1>About Me</h1>
			</div>
			<div class="image column">
				<img class="picture" src="img/LFC.jpg" alt="LFC">
			</div>
			<div class="intro column">
				<h2>Intro</h2>
					<p>I was born and raised in East Africa. I moved to the US in 1998. I currently reside in sunny Santa Barbara, CA.</p>
			</div>
			<div class="skills column">
				<h2>My Skills</h2>
					<ul id="skill_list">
						<li>HTML5</li>
						<li>CSS3</li>
						<li>Ruby On Rails</li>
					</ul>
			</div>
			<div class="main_text">
				<h2>More About Me</h2>
					<p>I am a big Liverpool FC fan. I love to stay active playing soccer and basketball. If I'm not on the pitch or on the basketball court I am enjoying the beautiful outdoors. </p>
			</div>
		</div> <!-- end container -->
	</body>
</html>

## about_styles.css
* {
	box-sizing: border-box; }
body {
	font-family: 'Raleway', sans-serif;
	color: #34495e;
	background-image: url("../img/pitch.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.container {
	margin: 0 auto;
	width: 90%;
	color: white;
}
.header h1 {
	text-align: center;
}
.column {
	display: inline-block;
	float: left;
	width: 30%;
}
.main_text {
	clear: both;
	color: #FFF;
	-webkit-margin-before: 0;
}
.main_text h3 {
	text-align: center;
}
img {
	float: right;
	width: 75%;
	opacity: 0.1;
	margin-right: 100px;
}
#skill_list {
	margin-left: 100px;
}
.skills {
	color: #FFF;
	padding: 30px;
	-webkit-margin-before: 0;
}
.intro {
	position: static;
}
/*Typography*/
h1,
h2,
h3 {
	font-family: 'Raleway', Helvetica, Arial, sans-serif;
}
p{
	font-family: 'Raleway', Helvetica, Arial, sans-serif;
	font-size: 2em;
	font-weight: 100;
}
li {
	font-family: 'Raleway', Helvetica, Arial, sans-serif;
	font-size: 2em;
	font-weight: 100;
	padding: 0 0 0 20px;
}
.intro p {
	font-family: 'Raleway', Helvetica, Arial, sans-serif;
	font-size: 2em;
	font-weight: 100;
	color: #FFF;
	padding-top: 5px;
	-webkit-margin-before: 0;
	opacity: 0.8;
}
.skills h2{
	font-size: 2em;
	font-weight: 100;
	text-align: center;
	text-transform: uppercase;
	color: #FFF;
}
.intro h2
 {
	font-size: 2em;
	font-weight: 100;
	text-align: center;
	text-transform: uppercase;
	color: #FFF;
	padding-top: 22px;
}
.main_text h2 {
	font-size: 2em;
	font-weight: 100;
	text-align: center;
	text-transform: uppercase;
	padding: 100px 10px 20px 0px;
}
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" href="css/about_styles.css">
	<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Raleway">
	<title>About Me</title>
	<!--[if lt IE 9]>
	<script src="dist/html5shiv.js"></script>
	<![endif]-->
	</head>
	<body class="body">
	<div class="container">
	<div class="header">
	<h1>About Me</h1>
	</div>
	<div class="image column">
	<img class="picture" src="img/LFC.jpg" alt="LFC">
	</div>
	<div class="intro column">
	<h2>Intro</h2>
	<p>I was born and raised in East Africa. I moved to the US in 1998. I currently reside in sunny Santa Barbara, CA.</p>
	</div>
	<div class="skills column">
	<h2>My Skills</h2>
	<ul id="skill_list">
	<li>HTML5</li>
	<li>CSS3</li>
	<li>Ruby On Rails</li>
	</ul>
	</div>
	<div class="main_text">
	<h2>More About Me</h2>
	<p>I am a big Liverpool FC fan. I love to stay active playing soccer and basketball. If I'm not on the pitch or on the basketball court I am enjoying the beautiful outdoors. </p>
	</div>
	</div> <!-- end container -->
	</body>
	</html>
	* {
	box-sizing: border-box; }
	body {
	font-family: 'Raleway', sans-serif;
	color: #34495e;
	background-image: url("../img/pitch.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	}
	.container {
	margin: 0 auto;
	width: 90%;
	color: white;
	}
	.header h1 {
	text-align: center;
	}
	.column {
	display: inline-block;
	float: left;
	width: 30%;
	}
	.main_text {
	clear: both;
	color: #FFF;
	-webkit-margin-before: 0;
	}
	.main_text h3 {
	text-align: center;
	}
	img {
	float: right;
	width: 75%;
	opacity: 0.1;
	margin-right: 100px;
	}
	#skill_list {
	margin-left: 100px;
	}
	.skills {
	color: #FFF;
	padding: 30px;
	-webkit-margin-before: 0;
	}
	.intro {
	position: static;
	}
	/Typography/
	h1,
	h2,
	h3 {
	font-family: 'Raleway', Helvetica, Arial, sans-serif;
	}
	p{
	font-family: 'Raleway', Helvetica, Arial, sans-serif;
	font-size: 2em;
	font-weight: 100;
	}
	li {
	font-family: 'Raleway', Helvetica, Arial, sans-serif;
	font-size: 2em;
	font-weight: 100;
	padding: 0 0 0 20px;
	}
	.intro p {
	font-family: 'Raleway', Helvetica, Arial, sans-serif;
	font-size: 2em;
	font-weight: 100;
	color: #FFF;
	padding-top: 5px;
	-webkit-margin-before: 0;
	opacity: 0.8;
	}
	.skills h2{
	font-size: 2em;
	font-weight: 100;
	text-align: center;
	text-transform: uppercase;
	color: #FFF;
	}
	.intro h2
	{
	font-size: 2em;
	font-weight: 100;
	text-align: center;
	text-transform: uppercase;
	color: #FFF;
	padding-top: 22px;
	}
	.main_text h2 {
	font-size: 2em;
	font-weight: 100;
	text-align: center;
	text-transform: uppercase;
	padding: 100px 10px 20px 0px;
	}