willshepp28/index.html

## index.html
<!DOCTYPE html>
<html class="no-js" lang="">
<head>
	<meta charset="utf-8">
	<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
	<title></title>
	<meta content="" name="description">
	<meta content="width=device-width, initial-scale=1" name="viewport">
	<link charset="utf-8" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" media=
	"screen" rel="stylesheet" title="no title">
	<link href="css/main.css" rel="stylesheet">
	</script>
</head>
<body>
	<header class="site-header">
		<section class="header-wrapper">
			<div class="logo"><img src="img/logo.png" alt=""></div>
			<h1 class="main-heading">Swamp Rabbit Cycling</h1>
			<hr class="divider">
			<section class="subheader-wrapper">
				<h2 class="subheader-msg">Bringing you the best in bicycle gear, equipment and community since 1999!</h2>
			</section>
		</section>
	</header>
	<main>
		<section class="site-imgs">
			<ul class="image-cards">
				<li class="single-img-card" id="left-img"></li>
				<li class="single-img-card" id="middle-img"></li>
				<li class="single-img-card" id="right-img"></li>
			</ul>
		</section>
		<section class="callout-wrapper">
			<div class="callout-msg">
				<p class="primary-text">From mountain bikes to kid training wheels, we've got what you need. Come join us for our Saturday community events or just step by to say hello!</p>
			</div>
		</section>
		<section class="contact-wrapper">
			<h3 class="contact-msg">Visit, call or email us today and get the most out of your bike riding experience.</h3>
			<div class="contact-phone">
				<i aria-hidden="true" class="fa fa-phone"></i> (202) 555-0127
			</div>
			<div class="contact-email">
				<a href=""><i aria-hidden="true" class="fa fa-envelope-o"></i></a>
			</div>
		</section>
		<footer>
			<div class="footer-wrapper">
				<span class="site-footer-text">Swamp Rabbit Cycling, LLC</span>
			</div>
		</footer>
	</main>
</body>
</html>

## main.css
@font-face {

      font-family: 'Oleo Script';
      font-style: normal;
      font-weight: 400;
      src: local('Oleo Script'), url(http://fonts.gstatic.com/s/oleoscript/v5/_weQNDK6Uf40CiGFKBBUjogp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2');

}

@font-face {

    font-family: 'Poiret One';
    font-style: normal;
    font-weight: 400;
    src: local('Poiret One'), url(http://fonts.gstatic.com/s/poiretone/v4/HrI4ZJpJ3Fh0wa5ofYMK8QzyDMXhdD8sAj6OAJTFsBI.woff2) format('woff2');

}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  background: black;

}

.main-heading,
.callout-message,
.callout-wrapper,
.contact-wrapper {
  font-family: 'Oleo Script';
}

.subheader-msg {
  font-family: 'Poiret One';
}

 body {
   margin: 0 auto;
   width: 60%;
  background: white;

}

li {
  list-style-type: none;
}

.logo img {
  height: 187px;

filter: invert(100%);
position: relative;
left: 269px;
bottom: -72px;
}

h1.main-heading {
    font-size: 52px;
}


.site-header {

  background: url(../img/header-background.jpg) no-repeat ;
  background-size: cover;
  height: 520px;
  width: 100%;
  color: white;
  padding: 50px;
text-align: center;
}

.image-cards {
  display: flex;

}

.site-imgs {
  padding: 50px;
}

.site-imgs li {
  height: 166px;

}

.single-img-card {
  min-height: 200px;
  margin-left: 15px;
  border-radius: 2px;
}

#left-img {
  background: url(../img/left-img.jpg) no-repeat ;
  background-size: cover;
  flex:1;


}

#middle-img {
  background: url(../img/middle-img.jpg) no-repeat ;
  background-size: cover;
    flex:1;
}

#right-img {
  background: url(../img/right-img.jpg) no-repeat ;
  background-size: cover;
  flex: 1;
}

.contact-wrapper {
    text-align: center;
    height: 136px;
    padding: 27px;
}


.callout-wrapper {
    background-color: #228B22;
    color: white;
    flex: 1;
    height: 136px;
    text-align: center;
    padding: 50px;
}

footer {
    background: black;
    color: white;
    text-align: center;
    padding: 16px;
    height: 40px;
}
	<!DOCTYPE html>
	<html class="no-js" lang="">
	<head>
	<meta charset="utf-8">
	<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
	<title></title>
	<meta content="" name="description">
	<meta content="width=device-width, initial-scale=1" name="viewport">
	<link charset="utf-8" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" media=
	"screen" rel="stylesheet" title="no title">
	<link href="css/main.css" rel="stylesheet">
	</script>
	</head>
	<body>
	<header class="site-header">
	<section class="header-wrapper">
	<div class="logo"><img src="img/logo.png" alt=""></div>
	<h1 class="main-heading">Swamp Rabbit Cycling</h1>
	<hr class="divider">
	<section class="subheader-wrapper">
	<h2 class="subheader-msg">Bringing you the best in bicycle gear, equipment and community since 1999!</h2>
	</section>
	</section>
	</header>
	<main>
	<section class="site-imgs">
	<ul class="image-cards">
	<li class="single-img-card" id="left-img"></li>
	<li class="single-img-card" id="middle-img"></li>
	<li class="single-img-card" id="right-img"></li>
	</ul>
	</section>
	<section class="callout-wrapper">
	<div class="callout-msg">
	<p class="primary-text">From mountain bikes to kid training wheels, we've got what you need. Come join us for our Saturday community events or just step by to say hello!</p>
	</div>
	</section>
	<section class="contact-wrapper">
	<h3 class="contact-msg">Visit, call or email us today and get the most out of your bike riding experience.</h3>
	<div class="contact-phone">
	<i aria-hidden="true" class="fa fa-phone"></i> (202) 555-0127
	</div>
	<div class="contact-email">
	<a href=""><i aria-hidden="true" class="fa fa-envelope-o"></i></a>
	</div>
	</section>
	<footer>
	<div class="footer-wrapper">
	<span class="site-footer-text">Swamp Rabbit Cycling, LLC</span>
	</div>
	</footer>
	</main>
	</body>
	</html>
	@font-face {

	font-family: 'Oleo Script';
	font-style: normal;
	font-weight: 400;
	src: local('Oleo Script'), url(http://fonts.gstatic.com/s/oleoscript/v5/_weQNDK6Uf40CiGFKBBUjogp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2');

	}

	@font-face {

	font-family: 'Poiret One';
	font-style: normal;
	font-weight: 400;
	src: local('Poiret One'), url(http://fonts.gstatic.com/s/poiretone/v4/HrI4ZJpJ3Fh0wa5ofYMK8QzyDMXhdD8sAj6OAJTFsBI.woff2) format('woff2');

	}

	* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	}

	html {
	background: black;

	}

	.main-heading,
	.callout-message,
	.callout-wrapper,
	.contact-wrapper {
	font-family: 'Oleo Script';
	}

	.subheader-msg {
	font-family: 'Poiret One';
	}

	body {
	margin: 0 auto;
	width: 60%;
	background: white;

	}

	li {
	list-style-type: none;
	}

	.logo img {
	height: 187px;

	filter: invert(100%);
	position: relative;
	left: 269px;
	bottom: -72px;
	}

	h1.main-heading {
	font-size: 52px;
	}


	.site-header {

	background: url(../img/header-background.jpg) no-repeat ;
	background-size: cover;
	height: 520px;
	width: 100%;
	color: white;
	padding: 50px;
	text-align: center;
	}

	.image-cards {
	display: flex;

	}

	.site-imgs {
	padding: 50px;
	}

	.site-imgs li {
	height: 166px;

	}

	.single-img-card {
	min-height: 200px;
	margin-left: 15px;
	border-radius: 2px;
	}

	#left-img {
	background: url(../img/left-img.jpg) no-repeat ;
	background-size: cover;
	flex:1;


	}

	#middle-img {
	background: url(../img/middle-img.jpg) no-repeat ;
	background-size: cover;
	flex:1;
	}

	#right-img {
	background: url(../img/right-img.jpg) no-repeat ;
	background-size: cover;
	flex: 1;
	}

	.contact-wrapper {
	text-align: center;
	height: 136px;
	padding: 27px;
	}


	.callout-wrapper {
	background-color: #228B22;
	color: white;
	flex: 1;
	height: 136px;
	text-align: center;
	padding: 50px;
	}

	footer {
	background: black;
	color: white;
	text-align: center;
	padding: 16px;
	height: 40px;
	}