The idea of the base.html is not to be repeating some codes that I will need in almost all of the pages. I can easily put {% extends 'homepage/base.html' %} on every page I need it.
Check out my base.html below.
1. (base.html)
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--fonts-->
<link href="https://fonts.googleapis.com/css2?
family=Comfortaa:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Niconne&family=Satisfy&display=swap"
rel="stylesheet">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="{% static 'homepage/css/styles.css' %}">
{% if title %}
<title>Amal Restaurant - {{ title }}</title>
{% else %}
<title>Amal Restaurant</title>
{% endif %}
</head>
<body>
{% block content %}
{% endblock content %}
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
crossorigin="anonymous"></script>
-->
<!--jquery cdn-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous">
</script>
<!--local js files-->
<script src="{% static 'homepage/js/jquery.js' %}"></script>
<script src="{% static 'homepage/js/main.js' %}"></script>
</body>
</html>
This is the index.html where I have {% extends 'homepage/base.html' %}. Everything is working well except for my images.
Check out my index.html below.
2. (index.html)
{% extends 'homepage/base.html' %}
{% block content %}
<header class="header">
<div id="logo">
<img src="images/logo-white.png" alt="logo">
</div>
<div id="nav-bar">
<ul>
<li id="delivery"><a href="#">Food deliveries</a></li>
<li id="works"><a href="#">How it works</a></li>
<li id="cities"><a href="#">Our cities</a></li>
<li id="sign"><a href="#">Sign up</a></li>
</ul>
</div>
<div class="header-text">
<h1 id="header-text-main">
<span id="header-text-primary">Goodbye junk food.</span>
<span id="header-text-secondary">Hello super healthy meals.</span>
</h1>
<div class="header-buttons">
<span id="hungry">I'm hungry</span>
<span id="more">Place Your Order</span>
</div>
</div>
</header>
<section class="main">
<h2 class="headers">Get food fast — not fast food</h2>
<p class="texts">
Hello, we're Omnifood, your new premium food delivery service. We know you're always busy. No time for cooking. So let us take care of that, we're really good at it, we promise!
</p>
<div class="container">
<div class="row">
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-xs-12">
<i class="glyphicon glyphicon-repeat"></i>
<h3>Up to 365 days/year</h3>
<p>
Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.
</p>
</div>
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-xs-12">
<i class="glyphicon glyphicon-time"></i>
<h3>Ready in 20 minutes</h3>
<p>
You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We work with the best chefs in each town to ensure that you're 100% happy.
</p>
</div>
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-xs-12">
<i class="glyphicon glyphicon-cutlery"></i>
<h3>100% organic</h3>
<p>
All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better!
</p>
</div>
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-xs-12">
<i class="glyphicon glyphicon-shopping-cart"></i>
<h3>Order anything</h3>
<p>
We don't limit your creativity, which means you can order whatever you feel like. You can also choose from our menu containing over 100 delicious meals. It's up to you!
</p>
</div>
</div>
</div>
</section>
<section class="gallery">
<div class="container-fluid">
<div class="row text-center text-lg-left">
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="mb-4 h-100">
<img src="{% static 'homepage/images/amala.jpeg' %}">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="mb-4 h-100">
<img src="{% static 'homepage/images/semo.jpeg' %}">
</a>
</div>
<div class="col-lg-3 col-md-4 col-6">
<a href="#" class="mb-4 h-100">
<img src="{% static 'homepage/images/jollof.jpeg' %}">
</a>
</div>
</div>
</div>
</section>
{% endblock content %}
In my static directory I have another directory homepage, inside the homepage is where I have the images, CSS and js directories.
Like this: static/homepage/images
