This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {% load static %} | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Basic Blog</title> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" | |
| integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous"> | |
| <link rel="stylesheet" href="{% static 'css/styles.css' %}" rel="stylesheet"> | |
| </head> | |
| <header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom"> | |
| <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none"> | |
| <span class="fs-4">My Site</span> | |
| </a> | |
| <ul class="nav nav-pills"> | |
| <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Home</a></li> | |
| <li class="nav-item"><a href="#" class="nav-link">Features</a></li> | |
| <li class="nav-item"><a href="#" class="nav-link">Pricing</a></li> | |
| <li class="nav-item"><a href="#" class="nav-link">FAQs</a></li> | |
| <li class="nav-item"><a href="#" class="nav-link">About</a></li> | |
| </ul> | |
| </header> | |
| <body class="container"> | |
| {% block content %} | |
| {% endblock %} | |
| </body> | |
| <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top"> | |
| <p class="col-md-4 mb-0 text-muted">© 2022 Company, Inc</p> | |
| <a href="/" | |
| class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none"> | |
| <svg class="bi me-2" width="40" height="32"> | |
| <use xlink:href="#bootstrap"></use> | |
| </svg> | |
| </a> | |
| <ul class="nav col-md-4 justify-content-end"> | |
| <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Home</a></li> | |
| <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Features</a></li> | |
| <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Pricing</a></li> | |
| <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">FAQs</a></li> | |
| <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">About</a></li> | |
| </ul> | |
| </footer> | |
| {% block javascript %} | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" | |
| integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" | |
| crossorigin="anonymous"></script> | |
| {% endblock %} | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This an example of a base template for a Django project. It uses Bootstrap and custom CSS for styling. To understand how base templates are constructed, see my tutorial: https://ctrlzblog.com/how-to-create-a-base-template-for-your-django-project/