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="nav">
      <a href="index.html"><strong>Matt</strong>Barker</a>
      <ul>

        <li><a href="#">About</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">FAQ</a></li>
      </ul>
    </div>
    </div>
    <div class="container">
      <div class="header">
        <h1><strong>About</strong> Me</h1>
      </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 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">
    <div class="nav">
      <a href="index.html"><strong>Matt</strong>Barker</a>
      <ul>

        <li><a href="about.html">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">FAQ</a></li>
      </ul>
    </div>
    </div>
    <div class="container">
      <div class="header">
        <h1><strong>Contact</strong> Me</h1>
        <div class="main-text"><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>
      </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: #e8e8e8;

}

a:hover {
  color: #34495e;
  transition: color 0.25s;
  -webkit-transition: color 0.25s;
}

.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: #fff;
      font-family: 'Lato', sans-serif;
      padding-top: 21px;
}

.container {

    width: 80%;
    margin: 0px auto auto auto;
    background-color: #d35400;

}

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

.header {
  margin-bottom: 25px;
}

.header h1 {
  color: #fff;
  font-size: 3em;
}

.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: #b14600;
  padding: 0;
  margin-right: 0px;
  width: 23%;
  height: auto;
  display: inline;
}

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

}

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

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

.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 #c24d00;

}

.nav {
  background-color: #d35400;
  position: fixed;
  width: 80%;
  top: 0;
  padding-top: 20px;
}

.nav a {
  display: inline-block;
  color: #fff;
  float: left;
  text-transform: uppercase;
  padding: 10px 15px 10px 50px;
  transition: color 0.25s;
  -webkit-transition: color 0.25s;
}

.nav a:hover {
  color: #34495e;
}

.nav ul {
  margin: 2px 0px;
}
.nav ul li {
  display: inline-block;

  float: right;
}

.nav ul li a {
  color: #fff;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 10px 15px 10px 0px;

}

.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="nav">
	<a href="index.html"><strong>Matt</strong>Barker</a>
	<ul>

	<li><a href="#">About</a></li>
	<li><a href="contact.html">Contact</a></li>
	<li><a href="#">Work</a></li>
	<li><a href="#">FAQ</a></li>
	</ul>
	</div>
	</div>
	<div class="container">
	<div class="header">
	<h1><strong>About</strong> Me</h1>
	</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: #e8e8e8;

	}

	a:hover {
	color: #34495e;
	transition: color 0.25s;
	-webkit-transition: color 0.25s;
	}

	.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: #fff;
	font-family: 'Lato', sans-serif;
	padding-top: 21px;
	}

	.container {

	width: 80%;
	margin: 0px auto auto auto;
	background-color: #d35400;

	}

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

	.header {
	margin-bottom: 25px;
	}

	.header h1 {
	color: #fff;
	font-size: 3em;
	}

	.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: #b14600;
	padding: 0;
	margin-right: 0px;
	width: 23%;
	height: auto;
	display: inline;
	}

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

	}

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

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

	.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 #c24d00;

	}

	.nav {
	background-color: #d35400;
	position: fixed;
	width: 80%;
	top: 0;
	padding-top: 20px;
	}

	.nav a {
	display: inline-block;
	color: #fff;
	float: left;
	text-transform: uppercase;
	padding: 10px 15px 10px 50px;
	transition: color 0.25s;
	-webkit-transition: color 0.25s;
	}

	.nav a:hover {
	color: #34495e;
	}

	.nav ul {
	margin: 2px 0px;
	}
	.nav ul li {
	display: inline-block;

	float: right;
	}

	.nav ul li a {
	color: #fff;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 10px 15px 10px 0px;

	}

	.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;
	}