<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- RESOURCES
BACKGROUND: https://raw.githubusercontent.com/FranCarstens/weAreCooking/master/src/images/body_background.jpg
LOGO: https://cdn.rawgit.com/FranCarstens/weAreCooking/master/src/images/logo.svg
RECIPE IMAGE: https://raw.githubusercontent.com/FranCarstens/weAreCooking/master/src/images/salad_image.jpg
-->
<header>
<h1>We are Cooking</h1><img src="https://francarstens.github.io/weAreCooking--HTML/images/logo.svg" class="logo">
</header>
<div id="content-container">
<section class="content">
<div class="banner">
<img src="https://francarstens.github.io/weAreCooking--HTML/images/salad_image.jpg">
</div>
<div class="heading">
<h2>Chicken, Pomegranate and Spinach Salad</h2>
<sup>Recipe by <a href="http://www.filmoreandunion.com/recipe-of-the-week-chicken-pomegranate-and-spinach-salad/">Filmore & Union</a>, July 2015</sup>
</div>
<article class="intro">
<p>Treat yourself to this week's lavish salad, rich in colourful ingredients including calcium-packed spinach for strengthening your bones and lean, marinated chicken to pump up your protein intake. With a sweet kick of healthy honey and sharp hint of balsamic, the dressing alone is bursting with flavour and is the perfect accompaniment to smooth avocado, crisp spinach and crunchy red onion. Scattered with ruby pomegranate pearls, this dish is vibrant in colour and taste - perfect for a summer treat!</p>
<hr>
<h3>Let's get cooking!</h3>
<ol>
<li>Combine the marinade ingredients and generously coat the chicken on both sides. Leave it in the fridge for a minimum of two hours, but longer if you can.</li>
<li>Place a ridged grill pan on medium-high heat and grill the chicken for about 5 minutes per side, turning once, until cooked through.</li>
<li>Whilst the chicken is cooking, combine the spinach, pomegranate arils, red onion and avocado in a big salad bowl.</li>
<li>Once the chicken is cooked, transfer to a chopping board, slice and mix in with the salad.</li>
<li>In a separate bowl, combine the balsamic vinegar, raw honey, extra virgin olive oil and salt and pepper and drizzle over the salad</li>
<li>Finally, serve and enjoy!</li>
</ol>
<hr class="last">
</article>
<aside class="shop">
<h3>Have it handy...</h3>
<strong>For the marinade:</strong>
<ul>
<li>2 tbsp freshly squeezed lemon juice</li>
<li>1 tsp fresh oregano, chopped</li>
<li>1 tsp garlic, crushed</li>
<li>Pinch of salt and pepper to taste</li>
</ul>
<strong>For the salad:</strong>
<ul>
<li>6oz baby spinach</li>
<li>4 chicken breasts</li>
<li>Handful of pomegranate arils</li>
<li>½ red onion, thinly sliced</li>
<li>1 avocado, chopped</li>
</ul>
<strong>For the dressing:</strong>
<ul>
<li>1 tbsp balsamic vinegar</li>
<li>1 tsp raw honey</li>
<li>2 tbsp extra virgin olive oil</li>
<li>Salt and pepper, to taste</li>
</ul>
</aside>
</section>
</div>
<footer>
<div class="credits">Made for "The Iron Yard" | Images: Pexels.com | Recipe: filmoreandunion.com</div>
</footer>
@import url("https://github.com/FranCarstens/weAreCooking/blob/master/src/styles/reset.css");
@import url("https://fonts.googleapis.com/css?family=Work+Sans:300,500");
@import url("https://fonts.googleapis.com/css?family=Crete+Round:400,400i");
* {
box-sizing: border-box
}
body {
font-family: 'Work Sans', Helvetica, Arial, Sans-Serif;
font-weight: 300;
background-image: url("https://francarstens.github.io/weAreCooking--HTML/images/body_background.jpg");
background-size: cover;
background-position: center center;
background-attachment: fixed;
line-height: 1.7;
zoom: 1
}
h1,
h2,
h3 {
font-family: 'Crete Round', Georgia, "Times New Roman", Serif;
font-weight: normal
}
h1 {
display: none
}
h2 {
font-size: 3rem;
line-height: 1.2;
margin-bottom: 0;
color: #464a4e
}
h3 {
font-size: 1.8rem;
color: #b4a191
}
hr {
margin: 4rem 0;
height: 1px;
background-color: #DDD;
border: none
}
strong {
display: block;
margin: 2rem 0 1rem;
font-weight: 500
}
img {
width: 100%;
max-width: 100%
}
header {
text-align: center;
height: 12rem
}
header .logo {
height: 8rem;
margin: 2rem 0
}
.content {
background: white;
font-size: 0;
padding: 2rem 2rem 3rem
}
.content .shop,
.content .heading,
.content .banner {
font-size: 1rem
}
.content .heading {
padding: 3rem 0;
margin-bottom: 3rem;
border-bottom: 1px solid #DDD
}
.content .intro {
font-size: 1.2rem
}
.content .intro p::first-letter {
font-size: 4rem;
font-family: 'Crete Round', Georgia, "Times New Roman", Serif;
vertical-align: text-top;
margin: -1.3rem .5rem -1.4rem 0;
float: left;
color: #b4a191
}
.content .intro ol {
padding-left: 2rem
}
.content .intro ol li {
list-style-type: decimal;
list-style-position: outside
}
footer {
text-align: center;
padding: 3rem;
color: white
}
@media (min-width: 768px) {
.banner {
height: 24rem;
overflow: hidden
}
.intro,
.shop {
display: inline-block;
vertical-align: top
}
.intro {
padding-right: 2rem;
width: 60%
}
.intro hr.last {
display: none
}
.shop {
padding-left: 2rem;
width: 40%
}
.shop ul {
padding-left: 1.5rem
}
.shop li {
list-style-type: circle;
list-style-position: outside
}
}
@media (min-width: 1280px) {
.content {
width: 1280px;
margin: 0 auto;
padding: 3rem 3rem 6rem
}
.content .intro {
padding-right: 20%;
width: 70%
}
.content .shop {
width: 30%
}
}
