matt-barker/about.html

## about.html
<!doctype html>
<html lang="en">
  <head>

    <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">

      <title>About | Matt Barker</title>

      <!--[if lt IE 9]>
        <script src="dist/html5shiv.js"></script>
      <![endif]-->
        <link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i" rel="stylesheet">
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/styles.css">
        <!--<link rel="stylesheet" href="css/about_styles.css">-->
  </head>

  <body>
    <div class="container">
      <div class="header">
        <h1><strong>About</strong> Me.</h1>
      </div>
      <div class="column-container clearfix">
      <div class="image column">
        <img class="about-image" src="img/html-photo.jpg" alt="HTML on a laptop">
      </div>
      <div class="intro column">
        <p>
          HTML and CSS padawan.
        </p>
      </div><!-- end intro column-->
      <div class="skills column">
        <h3>My skills</h3>
        <ul id="skill-list">
          <li>HTML</li>
          <li>CSS</li>
          <li>Web Design</li>
          <li>Web Development</li>
        </ul>
      </div><!-- end skills column-->
      </div>
      <div class="main-text">
        <h3>More about me...</h3>
        <p>
          I'm a budding web designer living in the midlands of the UK. My current full time job is Lead IT Support for a firm of solicitors but I'm working towards a change of career to web design and development. <br><br>
          I am currently enrolled in the <a href="http://www.careerfoundry.com" target="_blank">Career Foundry</a> <a href="https://careerfoundry.com/en/courses/become-a-web-developer" target="_blank">Web Developer</a> course.
        </p>
      </div><!-- end main-text -->
    </div><!-- end container -->

  </body>
</html>

## contact.html
<!doctype html>
<html lang="en">
  <head>

    <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">

      <title>Contact | Matt Barker</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.min.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i" rel="stylesheet">
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/styles.css">
  </head>
  <body>
    <div class="container contact-container">
      <div class="header">
        <h1><strong>Contact</strong> Me</h1>
        <p>Franzen irony pabst, est esse readymade consequat ugh you probably haven't heard of them health goth etsy eu. Labore offal odio, kickstarter consequat skateboard taxidermy kogi shoreditch heirloom. Non nihil deep v heirloom aute. Roof party man braid meggings shabby chic. Asymmetrical 90's celiac nisi twee neutra.</p>
      </div><!--header-->
      <!--<div class="row">-->
      <div class="row contact-card-row">
        <div class="col-md-4 contact-card">
          <h3>Email</h3>
          <div class="contact-image">
            <a href="mailto:matt@mattbarker.net"><img src="img/envelope-8.png"></a>
          </div>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p><a href="mailto:matt@mattbarker.net">matt@mattbarker.net</a></p>
        </div>
        <div class="col-md-4 contact-card">
          <h3>Phone</h3>
          <div class="contact-image">
            <img src="img/phone.png">
          </div>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>0773777111</p>
        </div>
        <div class="col-md-4 contact-card">
          <h3>LinkedIn</h3>
          <div class="contact-image">
            <a href="https://uk.linkedin.com/in/matt-barker-b9282b37" target="_blank"><img src="img/linkedin.png"></a>
          </div>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p><a href="https://uk.linkedin.com/in/matt-barker-b9282b37" target="_blank">
            Matt Barker</a></p>
        </div>
      <div class="col-md-4 contact-card">
          <h3>Address</h3>
        <div class="contact-image">
          <img src="img/placeholder-2.png">
          </div>
        <p>56 Fake Street</p>
        <p>Fake Town</p>
        <p>S44 1BT</p>
        </div>
      </div>
      <div class="row map-row">
        <div class="map-image-container">
          <img src="img/map.png">
        </div>
        <!--<div class="map-image">
        </div>-->
    </div>
    </div><!--contact container-->
<!--</div>-->
  </body>
</html>

## styles.css
* { box-sizing: border-box; }

.jumbotron {
    background-image: url(../img/background.jpg);
    background-size: cover;
    padding-top: 10px;
}


.jumbotron p {
      color: white;
      margin-bottom: 30px;
}

.jumbotron a {
  text-decoration: none;
  color: #ffffff;
}

.jumbotron a:hover {
  text-decoration: none;
  color: #b7b7b7;
}

.jumbotron h1 {
  font-weight: 400;
  font-size: 500%;
  color: #f8f8f8;
  margin-bottom: 10px;
}

a {
  text-decoration: none;
  color: #000;
}

a:hover {
  color: #34495e;
}

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

body {
      color: #34495e;
      font-family: 'Lato', sans-serif;
}

.container {
    position: relative;
    width: 80%;
    margin: 10px auto;

}

.contact-container {
  background-color: #cbe4f4;
}

.header {
  margin-bottom: 25px;
}

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

.column-container {
  background-color: #ecf0f1;
}

.column {
  display: inline-block;
  float: left;
  width: 33%;
  padding-right: 10px;
}

.contact-card {
  background-color: #94c6e7;
  padding: 0;
  margin-right: 0px;
  width: 23%;
  height: auto;
  display: inline;
}

.contact-card-row {
  display: flex;
  justify-content: space-between;
  background-color: #afd5ed;
  padding: 10px;
  width: 80%;
  text-align: center;
  margin-left: 10%;
  margin-right: 10%;
  margin-bottom: 20px;

}

.contact-card p {
  margin-bottom: 2px;
}

.main-text {
        clear: both;
        padding-top: 40px;
}

.map-row {
  margin: 30px 20%;
  text-align: center;
  width: 60%;

}
.contact-image img {
  height: 30px;
}


.map-image-container {
  display: inline;
  height: 450px;
}

.map-image-container img {
  /*background-image: url(../img/map.png);
  background-size: 100%;
  height: 450px;
  background-repeat: no-repeat;*/
  width: 100%;
  margin: 10px;
  border: solid 10px #afd5ed;

}

.about-image {
  width: 100%;
}

.intro {
  padding: 30px 50px;
}

.skills {
  padding-left: 20px;
  padding-top: 10px;
  margin-top: 55px;
  color: #404040;
  border: 1px solid white;
}


#skill-list {
  padding-left: 50px;
}


/*---typography---*/


h1 {
  font-weight: 300;
  font-size: 3em;
}

.header h1 {
  text-align: center;
}

.intro p {
  font-size: 2em;
  font-weight: 100;
  -webkit-margin-before: 0;
}

.skills h3 {
  margin-top: 0;
  text-align: center;
  text-transform: uppercase;
}
	<!doctype html>
	<html lang="en">
	<head>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>About \| Matt Barker</title>

	<!--[if lt IE 9]>
	<script src="dist/html5shiv.js"></script>
	<![endif]-->
	<link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i" rel="stylesheet">
	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" href="css/styles.css">
	<!--<link rel="stylesheet" href="css/about_styles.css">-->
	</head>

	<body>
	<div class="container">
	<div class="header">
	<h1><strong>About</strong> Me.</h1>
	</div>
	<div class="column-container clearfix">
	<div class="image column">
	<img class="about-image" src="img/html-photo.jpg" alt="HTML on a laptop">
	</div>
	<div class="intro column">
	<p>
	HTML and CSS padawan.
	</p>
	</div><!-- end intro column-->
	<div class="skills column">
	<h3>My skills</h3>
	<ul id="skill-list">
	<li>HTML</li>
	<li>CSS</li>
	<li>Web Design</li>
	<li>Web Development</li>
	</ul>
	</div><!-- end skills column-->
	</div>
	<div class="main-text">
	<h3>More about me...</h3>
	<p>
	I'm a budding web designer living in the midlands of the UK. My current full time job is Lead IT Support for a firm of solicitors but I'm working towards a change of career to web design and development. <br><br>
	I am currently enrolled in the <a href="http://www.careerfoundry.com" target="_blank">Career Foundry</a> <a href="https://careerfoundry.com/en/courses/become-a-web-developer" target="_blank">Web Developer</a> course.
	</p>
	</div><!-- end main-text -->
	</div><!-- end container -->

	</body>
	</html>
	* { box-sizing: border-box; }

	.jumbotron {
	background-image: url(../img/background.jpg);
	background-size: cover;
	padding-top: 10px;
	}


	.jumbotron p {
	color: white;
	margin-bottom: 30px;
	}

	.jumbotron a {
	text-decoration: none;
	color: #ffffff;
	}

	.jumbotron a:hover {
	text-decoration: none;
	color: #b7b7b7;
	}

	.jumbotron h1 {
	font-weight: 400;
	font-size: 500%;
	color: #f8f8f8;
	margin-bottom: 10px;
	}

	a {
	text-decoration: none;
	color: #000;
	}

	a:hover {
	color: #34495e;
	}

	.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
	* html .clearfix { zoom: 1; } /* IE6 */
	:first-child+html .clearfix { zoom: 1; } / IE7 */

	body {
	color: #34495e;
	font-family: 'Lato', sans-serif;
	}

	.container {
	position: relative;
	width: 80%;
	margin: 10px auto;

	}

	.contact-container {
	background-color: #cbe4f4;
	}

	.header {
	margin-bottom: 25px;
	}

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

	.column-container {
	background-color: #ecf0f1;
	}

	.column {
	display: inline-block;
	float: left;
	width: 33%;
	padding-right: 10px;
	}

	.contact-card {
	background-color: #94c6e7;
	padding: 0;
	margin-right: 0px;
	width: 23%;
	height: auto;
	display: inline;
	}

	.contact-card-row {
	display: flex;
	justify-content: space-between;
	background-color: #afd5ed;
	padding: 10px;
	width: 80%;
	text-align: center;
	margin-left: 10%;
	margin-right: 10%;
	margin-bottom: 20px;

	}

	.contact-card p {
	margin-bottom: 2px;
	}

	.main-text {
	clear: both;
	padding-top: 40px;
	}

	.map-row {
	margin: 30px 20%;
	text-align: center;
	width: 60%;

	}
	.contact-image img {
	height: 30px;
	}


	.map-image-container {
	display: inline;
	height: 450px;
	}

	.map-image-container img {
	/*background-image: url(../img/map.png);
	background-size: 100%;
	height: 450px;
	background-repeat: no-repeat;*/
	width: 100%;
	margin: 10px;
	border: solid 10px #afd5ed;

	}

	.about-image {
	width: 100%;
	}

	.intro {
	padding: 30px 50px;
	}

	.skills {
	padding-left: 20px;
	padding-top: 10px;
	margin-top: 55px;
	color: #404040;
	border: 1px solid white;
	}


	#skill-list {
	padding-left: 50px;
	}



	/---typography---/


	h1 {
	font-weight: 300;
	font-size: 3em;
	}

	.header h1 {
	text-align: center;
	}

	.intro p {
	font-size: 2em;
	font-weight: 100;
	-webkit-margin-before: 0;
	}

	.skills h3 {
	margin-top: 0;
	text-align: center;
	text-transform: uppercase;
	}