{% extends "SofaChampsBowlPickemBundle::layout.html.twig" %}

{% block content %}
    <div class="jumbotron">
        <h1>How To Play</h1>

        <ol id="steps">
            <li>Pick a winner for each game: <br /><img src="img/howtoplay/step1-pick-winner.png" alt="Step 1" /></li>
            <li>Drag game rows to assign confidence points: <br /><img src="img/howtoplay/step2-assign-confidence.png" alt="Step 2" /></li>
            <li>Enter a tiebreaker score: <br /><img src="img/howtoplay/step3-tiebreaker.png" alt="Step 3" /></li>
            <li>Save your picks: <br /><img src="img/howtoplay/step4-save.png" alt="Step 4" /></li>
        </ol>
    </div>
{% endblock %}

{% extends "SofaChampsBowlPickemBundle::layout.html.twig" %}

{% block content %}
    <div class="jumbotron">
        <h1>How To Play</h1>

        <ol id="steps">
            <li>Pick a winner for each game: <br /><img src="{{ asset('img/howtoplay/step1-pick-winner.png') }}" alt="Step 1" /></li>
            <li>Drag game rows to assign confidence points: <br /><img src="{{ asset('img/howtoplay/step2-assign-confidence.png') }}" alt="Step 2" /></li>
            <li>Enter a tiebreaker score: <br /><img src="{{ asset('img/howtoplay/step3-tiebreaker.png') }}" alt="Step 3" /></li>
            <li>Save your picks: <br /><img src="{{ asset('img/howtoplay/step4-save.png') }}" alt="Step 4" /></li>
        </ol>
    </div>
{% endblock %}

Fix how to play images
Fix how to play images
