zoerooney/index.html

## index.html
<!DOCTYPE HTML>
<html>
	<head>
		<title>OCCASIONETTE</title>
		<link rel="stylesheet" type="text/css" href="reset.css">
		<link rel="stylesheet" type="text/css" href="style.css">
		<link href='https://fonts.googleapis.com/css?family=Pompiere|Sacramento' rel='stylesheet' type='text/css'>
	</head>

	<body>
		<header>
			<div class="wrapper">
				<h1>OCCASIONETTE</h1>
				<ul>
					<li>ABOUT</li>
					<li>CONTACT</li>
				</ul>
				<img src="assets/best-of-philly.png" />
			</div>
		</header>
		<section id="feature" class="wrapper">
			<div>
				<!-- left text column -->
				<p>OCCASIONETTE is an award-winning boutique on East Passyunk Avenue in South Philadelphia.</p>

				<p>You’ll find the entire line of Girls Can Tell decorative housewares, towels, and gifts, along with great products for home, dining, entertaining, birthdays, weddings, and other special events.</p>
			</div>
			<div>
				<!-- right image column -->
				<img src="assets/card-wall.jpg" alt="card wall" />
			</div>
		</section><!-- end #feature -->

		<section id="columns" class="wrapper">
			<div>
				Column 1
			</div>
			<div>
				Column 2
			</div>
			<div>
				Column 3
			</div>
		</section><!-- end #columns -->

		<footer class="wrapper">

		</footer>
	</body>
</html>

## style.css
* {
	box-sizing: border-box;
}
body {
	background: url(assets/back_pattern.png);
}
section,
div {
	border: 1px solid red;
}
header {
	background: #372522;
}
header h1 {
	font-family: 'Pompiere', sans-serif;
	font-size: 50px;
	color: #ff8874;
	padding: 10px 20px;
	background: #fcd566;
	display:inline-block;
	-moz-transform: rotate(-10deg);
	-webkit-transform: rotate(-10deg);
	-o-transform: rotate(-10deg);
	-ms-transform: rotate(-10deg);
	transform: rotate(-10deg);
	position: relative;
	left: -10px;
	top: 10px;
}
.wrapper {
	width: 1140px;
	margin: 0 auto;
	position: relative;
}
#columns div {
	background: pink;
	border: 1px solid blue;
	height: 100px;
	float: left;
	width: 33%;
	padding: 20px;
}
header img {
	position: absolute;
	top: 30px;
	right: 0;
}
	<!DOCTYPE HTML>
	<html>
	<head>
	<title>OCCASIONETTE</title>
	<link rel="stylesheet" type="text/css" href="reset.css">
	<link rel="stylesheet" type="text/css" href="style.css">
	<link href='https://fonts.googleapis.com/css?family=Pompiere\|Sacramento' rel='stylesheet' type='text/css'>
	</head>

	<body>
	<header>
	<div class="wrapper">
	<h1>OCCASIONETTE</h1>
	<ul>
	<li>ABOUT</li>
	<li>CONTACT</li>
	</ul>
	<img src="assets/best-of-philly.png" />
	</div>
	</header>
	<section id="feature" class="wrapper">
	<div>
	<!-- left text column -->
	<p>OCCASIONETTE is an award-winning boutique on East Passyunk Avenue in South Philadelphia.</p>

	<p>You’ll find the entire line of Girls Can Tell decorative housewares, towels, and gifts, along with great products for home, dining, entertaining, birthdays, weddings, and other special events.</p>
	</div>
	<div>
	<!-- right image column -->
	<img src="assets/card-wall.jpg" alt="card wall" />
	</div>
	</section><!-- end #feature -->

	<section id="columns" class="wrapper">
	<div>
	Column 1
	</div>
	<div>
	Column 2
	</div>
	<div>
	Column 3
	</div>
	</section><!-- end #columns -->

	<footer class="wrapper">

	</footer>
	</body>
	</html>
	* {
	box-sizing: border-box;
	}
	body {
	background: url(assets/back_pattern.png);
	}
	section,
	div {
	border: 1px solid red;
	}
	header {
	background: #372522;
	}
	header h1 {
	font-family: 'Pompiere', sans-serif;
	font-size: 50px;
	color: #ff8874;
	padding: 10px 20px;
	background: #fcd566;
	display:inline-block;
	-moz-transform: rotate(-10deg);
	-webkit-transform: rotate(-10deg);
	-o-transform: rotate(-10deg);
	-ms-transform: rotate(-10deg);
	transform: rotate(-10deg);
	position: relative;
	left: -10px;
	top: 10px;
	}
	.wrapper {
	width: 1140px;
	margin: 0 auto;
	position: relative;
	}
	#columns div {
	background: pink;
	border: 1px solid blue;
	height: 100px;
	float: left;
	width: 33%;
	padding: 20px;
	}
	header img {
	position: absolute;
	top: 30px;
	right: 0;
	}