plainoldrecipe/templates/recipe.html

{% include 'recipe-header.html' %}

    <div class="recipe-image">
        <img src="{{recipe['image']}}" alt="An image of {{recipe['name']}}" />
    </div>
    <h1>{{recipe['name']}}</h1>
    {% if recipe['description'] %}
        <p>
            <i>{{recipe['description']}}</i>
        </p>
    {% endif %}

    <h2>Ingredients</h2>

    <ul class="ingredients-list">
        {% for i in recipe['ingredients'] %}
        <li>{{i}}</li>
        {% endfor %}
    </ul>

    <h2>Directions</h2>

    <ol style="margin:0.125in; padding:0; overflow: visible; display: block">
        {% for i in recipe['instructions'] %}
        <li>{{i}}<br></li>
        {% endfor %}
    </ol>

    {% if recipe['instruction_groups'] %}
    {% for group, instructions in recipe['instruction_groups'].items() %}
    <h3>{{group}}</h3>
    <ol style="margin:0.125in; padding:0; overflow: visible; display: block">
        {% for i in instructions %}
        <li>{{i}}<br></li>
        {% endfor %}
    </ol>
    {% endfor %}
    {% endif %}

    <a href="{{recipe['url']}}">{{recipe['url']}}</a>

{% include 'footer.html' %}