mitrakmt/about.html

## about.html
<!doctype  html>
<html>
  <html lang=“en”>

<head>
  <meta charset="UTF-8">
    <title>About</title>
    <!-- [if lt IE 9]>
    <script src="dist/html5shiv.js"></script>
    <![endif]-->

    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

</head>

<body>
  <div class="container">
    <div class="header">
      <h1>Stock Images</h1>
        <div class="image">
          <img src="img/ban3.jpg" alt="beautiful scenery" id="aboutimage">
        </div>
        <div class="intro column">
          <h2>Introduction</h2>
          <p>This is a paragraph with an introduction of myself and my coding skillz.
        </div>
        <div class="skills column">
          <h3>My Skills</h3>
          <ul id="skill_list">
            <li>HTML</li>
            <li>CSS</li>
            <li>Bootstrap</li>
          </ul>
        </div>
        <div class="main_text">
          <h3>My Story</h3>
          <p>Selfies synth sustainable, meggings XOXO trust fund iPhone mumblecore raw denim Kickstarter. Bicycle rights cray 8-bit, distillery fingerstache plaid lomo ethical pug fashion axe taxidermy Shoreditch mustache. Before they sold out Helvetica fanny pack, listicle small batch photo booth migas Intelligentsia Godard PBR plaid. Plaid shabby chic tilde beard, normcore tofu Wes Anderson meh 90's distillery bespoke. Ennui Intelligentsia organic, irony banjo forage 8-bit vinyl cold-pressed Godard post-ironic trust fund taxidermy meditation. Disrupt trust fund art party craft beer squid cardigan. Mumblecore tofu Banksy shabby chic brunch artisan, cornhole street art irony semiotics whatever tilde.
          </br>
            Narwhal readymade selfies, High Life letterpress gentrify paleo PBR squid Kickstarter dreamcatcher. YOLO pop-up ethical, bitters normcore yr irony street art farm-to-table authentic. Blue Bottle mustache banjo skateboard Wes Anderson Kickstarter. Kogi yr trust fund vegan, mixtape listicle biodiesel kitsch small batch swag paleo messenger bag health goth. McSweeney's pour-over Banksy, pork belly church-key single-origin coffee asymmetrical literally chambray synth food truck. Thundercats Blue Bottle leggings, plaid +1 pork belly kitsch forage. Listicle fashion axe PBR&B, put a bird on it bicycle rights narwhal Godard.</p>
        </div>
    </div>
  </div>
</body>
</html>

## contact.html
<!doctype  html>
<html>
  <html lang=“en”>

<head>
  <meta charset="UTF-8">
    <title>Contact</title>
    <!-- [if lt IE 9]>
    <script src="dist/html5shiv.js"></script>
    <![endif]-->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css">

    <link href="css/style.css" rel="stylesheet">

</head>

<body>
  <div class="container">
    <div class="header" id="contactheader">
      <h1>Contact</h1>
        <div class="image" id="cimage">
          <img src="img/me.jpg" alt="Michael Mitrakos" id="contactimage">
          <ul>
            <li>Web Developer</li>
            <li>xxx-xxx-xxxx</li>
            <li>myemail@gmail.com</li>
          </ul>
        </div>
        <div class="contact" id="contactabout">
          <h3>My Story</h3>
          <p>Selfies synth sustainable, meggings XOXO trust fund iPhone mumblecore raw denim Kickstarter. Bicycle rights cray 8-bit, distillery fingerstache plaid lomo ethical pug fashion axe taxidermy Shoreditch mustache. Before they sold out Helvetica fanny pack, listicle small batch photo booth migas Intelligentsia Godard PBR plaid. Plaid shabby chic tilde beard, normcore tofu Wes Anderson meh 90's distillery bespoke. Ennui Intelligentsia organic, irony banjo forage 8-bit vinyl cold-pressed Godard post-ironic trust fund taxidermy meditation. Disrupt trust fund art party craft beer squid cardigan. Mumblecore tofu Banksy shabby chic brunch artisan, cornhole street art irony semiotics whatever tilde.
          <br>
          <br>
            Narwhal readymade selfies, High Life letterpress gentrify paleo PBR squid Kickstarter dreamcatcher. YOLO pop-up ethical, bitters normcore yr irony street art farm-to-table authentic. Blue Bottle mustache banjo skateboard Wes Anderson Kickstarter. Kogi yr trust fund vegan, mixtape listicle biodiesel kitsch small batch swag paleo messenger bag health goth. McSweeney's pour-over Banksy, pork belly church-key single-origin coffee asymmetrical literally chambray synth food truck. Thundercats Blue Bottle leggings, plaid +1 pork belly kitsch forage. Listicle fashion axe PBR&B, put a bird on it bicycle rights narwhal Godard.</p>
        </div>
    </div>
  </div>
</body>
</html>

## style.css
.jumbotron {
  background-image: url("../img/landscape.jpg");
  background-size: cover;
}

.jumbotron p {
  color: black;
  text-decoration: none;
}

.jumbotron h1 {
  color: black;
}

#aboutimage {
  height: 100%;
  width: 100%;
}

.container {
  width: 80%;
  margin: 0 auto;
}

.header h1 {
  text-align: center;
  margin-bottom: 30px;
}

.image {
  display: inline-block;
  float: left;
}

.column {
  display: inline-block;
  float: left;
  width: 50%;
  padding: 0 20px;
  margin-top: 20px;
}

.main_text {
  clear: both;
  padding-top: 60px;
}

element.style {
  margin-bottom: 20px;
}

* {
  box-sizing: border-box;
}

/* Typography */

h1,
h2,
h3 {
  font-family: Futura, Helvetica, Arial, sans-serif
}

p,
li,
ul{
  font-family: georgia, Didot;
  -webkit-padding-start: 0px;
}

.intro p {
  font-family: Futura, Helvetica, Arial, sans-serif;
  font-size: 1.5em;
  font-weight: 100;
  -webkit-margin-before: 0;
}

.skills {
  text-align: left;
  font-family: Futura, Helvetica, Arial, sans-serif;
}

  .skills li {
    list-style: none;
  }

body {
  background-color: #FFFFFf;
  color: #34495e;
}

/* Contact */

#contactheader {
  width: 1000px;
}

  #contactheader h1 {
    font-size: 3em;
  }

#contactimage {
  height: 50%;
  width: 50%;
}

#cimage {
  float: left;
  display: inline-block;
  width: 30%;
}


  #cimage img {
	   border-radius: 30%;
   }

#contactabout {
  float: right;
  display: inline-block;
  width: 70%;
}

.image ul {
  list-style: none;
  margin-top: 20px;
}

.contact {
  float: right;
  display: inline-block;
  width: 50%;
}
	<!doctype html>
	<html>
	<html lang=“en”>

	<head>
	<meta charset="UTF-8">
	<title>About</title>
	<!-- [if lt IE 9]>
	<script src="dist/html5shiv.js"></script>
	<![endif]-->

	<link href="css/bootstrap.css" rel="stylesheet">
	<link href="css/style.css" rel="stylesheet">

	</head>

	<body>
	<div class="container">
	<div class="header">
	<h1>Stock Images</h1>
	<div class="image">
	<img src="img/ban3.jpg" alt="beautiful scenery" id="aboutimage">
	</div>
	<div class="intro column">
	<h2>Introduction</h2>
	<p>This is a paragraph with an introduction of myself and my coding skillz.
	</div>
	<div class="skills column">
	<h3>My Skills</h3>
	<ul id="skill_list">
	<li>HTML</li>
	<li>CSS</li>
	<li>Bootstrap</li>
	</ul>
	</div>
	<div class="main_text">
	<h3>My Story</h3>
	<p>Selfies synth sustainable, meggings XOXO trust fund iPhone mumblecore raw denim Kickstarter. Bicycle rights cray 8-bit, distillery fingerstache plaid lomo ethical pug fashion axe taxidermy Shoreditch mustache. Before they sold out Helvetica fanny pack, listicle small batch photo booth migas Intelligentsia Godard PBR plaid. Plaid shabby chic tilde beard, normcore tofu Wes Anderson meh 90's distillery bespoke. Ennui Intelligentsia organic, irony banjo forage 8-bit vinyl cold-pressed Godard post-ironic trust fund taxidermy meditation. Disrupt trust fund art party craft beer squid cardigan. Mumblecore tofu Banksy shabby chic brunch artisan, cornhole street art irony semiotics whatever tilde.
	</br>
	Narwhal readymade selfies, High Life letterpress gentrify paleo PBR squid Kickstarter dreamcatcher. YOLO pop-up ethical, bitters normcore yr irony street art farm-to-table authentic. Blue Bottle mustache banjo skateboard Wes Anderson Kickstarter. Kogi yr trust fund vegan, mixtape listicle biodiesel kitsch small batch swag paleo messenger bag health goth. McSweeney's pour-over Banksy, pork belly church-key single-origin coffee asymmetrical literally chambray synth food truck. Thundercats Blue Bottle leggings, plaid +1 pork belly kitsch forage. Listicle fashion axe PBR&B, put a bird on it bicycle rights narwhal Godard.</p>
	</div>
	</div>
	</div>
	</body>
	</html>
	.jumbotron {
	background-image: url("../img/landscape.jpg");
	background-size: cover;
	}

	.jumbotron p {
	color: black;
	text-decoration: none;
	}

	.jumbotron h1 {
	color: black;
	}

	#aboutimage {
	height: 100%;
	width: 100%;
	}

	.container {
	width: 80%;
	margin: 0 auto;
	}

	.header h1 {
	text-align: center;
	margin-bottom: 30px;
	}

	.image {
	display: inline-block;
	float: left;
	}

	.column {
	display: inline-block;
	float: left;
	width: 50%;
	padding: 0 20px;
	margin-top: 20px;
	}

	.main_text {
	clear: both;
	padding-top: 60px;
	}

	element.style {
	margin-bottom: 20px;
	}

	* {
	box-sizing: border-box;
	}

	/* Typography */

	h1,
	h2,
	h3 {
	font-family: Futura, Helvetica, Arial, sans-serif
	}

	p,
	li,
	ul{
	font-family: georgia, Didot;
	-webkit-padding-start: 0px;
	}

	.intro p {
	font-family: Futura, Helvetica, Arial, sans-serif;
	font-size: 1.5em;
	font-weight: 100;
	-webkit-margin-before: 0;
	}

	.skills {
	text-align: left;
	font-family: Futura, Helvetica, Arial, sans-serif;
	}

	.skills li {
	list-style: none;
	}

	body {
	background-color: #FFFFFf;
	color: #34495e;
	}

	/* Contact */

	#contactheader {
	width: 1000px;
	}

	#contactheader h1 {
	font-size: 3em;
	}

	#contactimage {
	height: 50%;
	width: 50%;
	}

	#cimage {
	float: left;
	display: inline-block;
	width: 30%;
	}


	#cimage img {
	border-radius: 30%;
	}

	#contactabout {
	float: right;
	display: inline-block;
	width: 70%;
	}

	.image ul {
	list-style: none;
	margin-top: 20px;
	}

	.contact {
	float: right;
	display: inline-block;
	width: 50%;
	}