Tag Archives: Django HTML template

Building a To Do Application in Python using Django Framework – Part 05

In this 5th part we are going to create an HTML template which will be our template for all other HTML pages.

In the home’s template folder (same folder as index.html) create a file named base.html and add the following code into it:

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Todo App</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="{% static 'home/style.css' %}" type="text/css" />
    
    <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/solid.js" integrity="sha384-+Ga2s7YBbhOD6nie0DzrZpJes+b2K1xkpKxTFFcx59QmVPaSA8c7pycsNaFwUK6l" crossorigin="anonymous"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/fontawesome.js" integrity="sha384-7ox8Q2yzO/uWircfojVuCQOZl+ZZBg2D2J5nkpLqzH1HY0C1dHlTKIbpRz/LG23c" crossorigin="anonymous"></script>
    
</head>
<body>
    
    <div class="container-fluid">
        <header class="row bg-dark pl-5 pr-5">
            <div class="col-md-6 p-2">
                <h1 id="title" class="navbar-text text-light border border-light rounded-circle p-3">ToDo</h1>
            </div>
            <nav class="col-md-6 text-right pt-4">
                <a href="{% url 'home' %}"><i class="fas fa-home text-light"></i></a>
                <a href="{% url 'todo_index' %}" class="pl-2"><i class="fas fa-list-alt text-light"></i></a>
            </nav>
        </header>
        
                {% block content %}{% endblock %}
        
        <footer class="row bg-dark pt-3">
            <div class="col-md-12 text-center text-light">
                <img id="dan-pic" src="http://saigon.ro/img/d3.jpg" class="rounded-circle m-3" ald="Dan Dumitrache - Full stack web developer">
                <p>Dan Dumitrache | Portfolio Project<br>
                Code Institute, Dublin<br>
                Jan 2018</p>
            </div>
        </footer>
    </div>
    
    <!-- =========== Bootstrap JavaScript ========== -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <!-- =========== jQuery ========== -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <!-- =========== Popper ========== -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

</body>
</html>

Continue reading