<div class="col-8 mx-auto p-3 rounded shadow-sm my-4 context-main-bg">
    <h1 class="text-center">Work in Progress</h1>
    <hr>
    {LOOP}
        <div class="wip-project">
            <h3 class="wip-project-title atb-green">{title}</h3>
            <small class=""><b>Started: </b><i>{prettyStart}</i></small>
            <div class="progress mt-2">
                <div class="progress-bar atb-green-bg" role="progressbar" style="width: {progress}%" aria-valuenow="{progress}" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <div class="well my-3">
                {description}
            </div>
        </div>
        <div class="col-6 offset-3 my-2">
            <hr>
        </div>
    {/LOOP}
    {ALT}
        <div class="wip-project">
            <p>None Found</p>
        </div>
    {/ALT}
</div>