Django templating Example

django_template_example.html

{% extends "biz/base.html" %}
{% load staticfiles %}


{% block content %}
<!-- start: MAIN CONTAINER -->
<div class="main-container">
    <section class="page-top">
        <div class="container">
            <div class="col-md-4 col-sm-4">
                <h1>FAQ</h1>
            </div>
            <div class="col-md-8 col-sm-8">
                <ul class="pull-right breadcrumb">
                    <li>
                        <a href="index.html">
                            Home
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            Pages
                        </a>
                    </li>
                    <li class="active">
                        FAQ
                    </li>
                </ul>
            </div>
        </div>
    </section>
    <section class="wrapper padding50">
        <div class="container">

            <div class="row">
                <div class="col-md-12">
                    <h1 class="center">Frequently Asked Questions</h1>
                    <p class="center">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum pellentesque imperdiet. Nulla lacinia iaculis nulla non metus. pulvinar. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut eu risus enim, ut pulvinar lectus. Sed hendrerit nibh.
                    </p>
                    <hr>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">

                    <!-- start: FAQ -->
                    <div class="tabbable tabs-left">
                        <ul id="myTab3" class="nav nav-tabs tab-teal">
                            {% for topic in topics %}
                            <li class="{% if forloop.counter == 1 %}active{% endif %}">
                                <a href="#{{ topic.slug }}" data-toggle="tab">
                                    <i class="fa {{ topic.fa_icon }}"></i> {{ topic.name }}
                                </a>
                            </li>
                            {% endfor %}
                        </ul>
                        <div class="tab-content">
                            {% for topic in topics %}
                            <div class="tab-pane {% if forloop.counter == 1 %}active{% endif %}" id="{{ topic.slug }}">
                                <div id="accordion" class="panel-group accordion accordion-custom accordion-teal">

                                    {% for qa in topic.qas.all %}
                                    <div class="panel panel-default">
                                        <div class="panel-heading">
                                            <h4 class="panel-title">
                                            <a href="#{{ qa.pk }}" data-parent="#accordion" data-toggle="collapse" class="accordion-toggle collapsed">
                                                <i class="icon-arrow"></i>
                                                {{ qa.question }}
                                            </a></h4>
                                        </div>
                                        <div class="panel-collapse collapse" id="{{ qa.pk }}">
                                            <div class="panel-body">
                                                {{ qa.answer }}
                                            </div>
                                        </div>
                                    </div>
                                    {% endfor %}
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                    <!-- end: FAQ -->

                </div>
            </div>
        </div>
    </section>
    <section class="wrapper wrapper-grey">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="promobox">
                        <p class="center">
                            Clip-One Template makes it easy to create a World class website with a unique style and many new awesome features!
                        </p>
                        <p class="center">
                            <a href="/" class="btn btn-bricky">
                                Start Free Trial
                            </a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<!-- end: MAIN CONTAINER -->
{% endblock content %}