<header>
            <img src="https://live.staticflickr.com/65535/50399028003_26f46bcc0d_t.jpg" alt="chef hat">
            <h1>Recipe Collection</h1>
        </header>
        <main>
            <article id="cookies" class="card">
                <div class="image"></div>
                <div class="recipe">
                    <h2>Gluten-Free Sugar Cookies</h2>
                    <div class="time">
                        <div class="prep">
                            <img src="https://live.staticflickr.com/65535/50399028933_84e4cd1557_t.jpg" alt="prep time"><p class="time-details"><strong>Prep Time:</strong> 10 Min</p>
                        </div>
                        <div class="cook">
                            <img src="https://live.staticflickr.com/65535/50399029078_4773b4f6ab_t.jpg" alt="cook time"><p class="time-details"><strong>Cook Time:</strong> 10 Min</p>
                        </div>
                        <div class="total">
                            <img src="https://live.staticflickr.com/65535/50399721001_3c37140e29_t.jpg" alt="total time"><p class="time-details"><strong>Total Time:</strong> 20 Min</p>
                        </div>
                    </div>
                    <p class="description">These buttery cookies have a tender texture and crispy exterior that you’re
                        sure to love!</p>
                    <div class="columns">
                        <section class="ingredients">
                            <h3>Ingredients</h3>
                            <ul>
                                <li>2 1/2 cups gluten-free flour</li>
                                <li>1 cup almond flour</li>
                                <li>1/4 teaspoon salt</li>
                                <li>1/2 teaspoon baking powder</li>
                                <li>1/4 teaspoon baking powder</li>
                                <li>1/2 cup softened, unsalted butter</li>
                                <li>1 cup sugar</li>
                                <li>2 teaspoons vanilla extract</li>
                                <li>1 egg</li>
                            </ul>
                        </section>
                        <section class="directions">
                            <h3>Directions</h3>
                            <ol>
                                <li>Preheat oven to 350&deg; F. Line baking sheets with parchment paper.</li>
                                <li>Add flour, salt, baking soda, and baking powder to a bowl and stir.</li>
                                <li>In another bowl, beat butter and sugar together.</li>
                                <li>Add egg and vanilla extract to the butter and sugar mixture.</li>
                                <li>Combine the wet and dry ingredients in a bowl. Stir until fully combined.</li>
                                <li>Drop teaspoon-sized dough onto the parchment paper. Keep dough 1 to 2 inches apart.
                                    Bake for 10 to 12 minutes.</li>
                            </ol>
                        </section>
                    </div>
                </div>
            </article>

            <article id="pesto" class="card">
                <div class="image"></div>
                <div class="recipe">
                    <h2>Nut-Free Basil Pesto</h2>
                    <div class="time">
                        <div class="prep">
                            <img src="https://live.staticflickr.com/65535/50399028933_84e4cd1557_t.jpg" alt="prep time" alt="prep time"><p class="time-details"><strong>Prep Time:</strong> 5 Min</p>
                        </div>
                        <div class="cook">
                            <img src="https://live.staticflickr.com/65535/50399029078_4773b4f6ab_t.jpg" alt="cook time"><p class="time-details"><strong>Cook Time:</strong> None</p>
                        </div>
                        <div class="total">
                            <img src="https://live.staticflickr.com/65535/50399721001_3c37140e29_t.jpg" alt="total time"><p class="time-details"><strong>Total Time:</strong> 5 Min</p>
                        </div>
                    </div>
                    <p class="description">This gorgeous pesto is full of color and flavor! Serve on your favorite pasta
                        or crackers for a delicious, healthy meal.</p>
                    <div class="columns">
                        <section class="ingredients">
                            <h3>Ingredients</h3>
                            <ul>
                                <li>1 cup packed basil leaves</li>
                                <li>1 chopped garlic clove</li>
                                <li>1/4 cup grated parmesan cheese</li>
                                <li>1/2 tablespoon lemon juice</li>
                                <li>Pinch of salt</li>
                                <li>1/4 cup olive oil</li>
                            </ul>
                        </section>
                        <section class="directions">
                            <h3>Directions</h3>
                            <ol>
                                <li>In a food processor, pulse garlic and basil together.</li>
                                <li>Add parmesan cheese, lemon juice, and salt. Pulse again.</li>
                                <li>Add olive oil and blend. If the mixture is too thick, add more oil or hot water to
                                    thin.</li>
                            </ol>
                        </section>
                    </div>
                </div>
            </article>
            
            <article id="salad" class="card">
                <div class="image"></div>
                <div class="recipe">
                    <h2>Watermelon Salad</h2>
                    <div class="time">
                        <div class="prep">
                            <img src="https://live.staticflickr.com/65535/50399028933_84e4cd1557_t.jpg" alt="prep time" alt="prep time"><p class="time-details"><strong>Prep Time:</strong> 15 Min</p>
                        </div>
                        <div class="cook">
                            <img src="https://live.staticflickr.com/65535/50399029078_4773b4f6ab_t.jpg" alt="cook time"><p class="time-details"><strong>Cook Time:</strong> None</p>
                        </div>
                        <div class="total">
                            <img src="https://live.staticflickr.com/65535/50399721001_3c37140e29_t.jpg" alt="total time"><p class="time-details"><strong>Total Time:</strong> 15 Min</p>
                        </div>
                    </div>
                    <p class="description">This salad combines juicy watermelon, tangy lemon juice, savory feta cheese,
                        and sweet honey into one delicious bowl. Serve right away on a hot summer day for a cooling
                        treat!</p>
                    <div class="columns">
                        <section class="ingredients">
                            <h3>Ingredients</h3>
                            <ul>
                                <li>1 seedless watermelon</li>
                                <li>1/3 cup extra virgin olive oil</li>
                                <li>2 tablespoons fresh lemon juice</li>
                                <li>1 tablespoon honey</li>
                                <li>2 teaspoons salt</li>
                                <li>2 cups feta cheese, crumbled</li>
                                <li>1 cup red onion, sliced</li>
                                <li>1/4 cup basil leaves, chopped</li>
                            </ul>
                        </section>
                        <section class="directions">
                            <h3>Directions</h3>
                            <ol>
                                <li>Cube watermelon, or use a melon baller to scoop chunks of watermelon. Place in a
                                    large bowl.</li>
                                <li>In a separate bowl, combine the olive oil, lemon juice, honey, and salt.</li>
                                <li>Add feta cheese, basil, and red onions to the mixture.</li>
                                <li>Pour the mixture over the watermelon.</li>
                                <li>Toss watermelon with the mixture and serve immediately!</li>
                            </ol>
                        </section>
                    </div>
                </div>
            </article>
        </main>

body {
    background: #DAF7F6;
    font-family: 'Open Sans', serif;
    font-size: 12px;
    line-height: 16px;
    color: #3B3B3B;
}

header {
    background: #FFFFFF;
    text-align: center;
}

h1 {
    display: inline-block;
    padding: 40px 0;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 48px;
    font-weight: bold;
    text-transform: uppercase;
    color: #F16059;
}

header img {
    margin-right: 16px;
}

main {
    width: 1000px;
    margin: 0 auto;
}

.card {
    margin: 25px 0;
    overflow: auto;
}

.image {
    float: left;
    width: 500px;
    height: 550px;
}

.recipe {
    float: left;
    padding: 20px;
    width: 500px;
    height: 550px;
    background: #FFFFFF;
    box-sizing: border-box;
}

#cookies .image {
    background-image: url("https://live.staticflickr.com/65535/50399721396_48a46f252a_t.jpg");
    background-size: cover;
}

#pesto .image {
    background-image: url("https://live.staticflickr.com/65535/50399028808_e7f6fd36ed_t.jpg");
    background-size: cover;
}

#salad .image {
    background-image: url("https://live.staticflickr.com/65535/50399878752_d68bb5c087_t.jpg");
    background-size: cover;
}

.recipe h2 {
    margin-top: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 29px;
    color: #F16059;
}

.time {
    margin-bottom: 20px;
    border-width: 1px;
    border-style: solid;
    border-color: #3B3B3B;
    overflow: auto;
}

.time div {
    float: left;
    padding-left: 6px;
    width: 33.3333%;
    box-sizing: border-box;
    text-transform: uppercase;
}

.time .cook {
    border-width: 0 1px;
    border-style: solid;
    border-color: #3B3B3B;
}

.time img {
    margin-right: 5px;
    vertical-align: middle;
    width: 15px;
    height: auto;
}

.time-details {
    display: inline-block;
}

.time strong {
    font-family: 'Montserrat', sans-serif;
}

.columns {
    overflow: auto;
}

.directions {
    float: left;
    width: 240px;
}

.ingredients {
    float: left;
    margin-right: 15px;
    width: 205px;
}

.recipe h3 {
    padding: 6px;
    border-width: 1px 0;
    border-style: solid;
    border-color: #3B3B3B;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    color: #F16059;
}

.ingredients ul {
    padding-left: 15px;
    line-height: 24px;
    list-style-type: square;
}

.directions ol {
    padding-left: 15px;
    line-height: 22px;
}