Прблемы со статикой и медиа. Пробовала всё

base.html

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {% load static %}
    <title>{% block title %}Мой сайт рецептов{% endblock %}</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="{% static 'style.css' %}">
    <link rel="icon" href="data:;base64,=">
<body>
    <div class="page-wrapper">
        <div class="content">
            {% block body %} {% endblock %}
        </div>
    </div>

    <footer class="footer">
        <p>&copy; 2025 Рецепты.</p>
        <p>Рецепты: вкусные, аппетитные из всех разделов кулинарии. Бюджетные и простые на каждый день.</p>
        <p>Разработчик:Дудко Лариса.<p>
    </footer>
</body>
</html>


home.html

{% extends 'recipe/base.html' %}
{% load static %}
{% block title %} List recipes {% endblock %}
{% block body %}
    <div class="recipe-list">
        <header class="header">
            <h1 class="h1">Добро пожаловать на сайт рецептов!</h1>
            {% if username %}
                <p> Привет, {{username}}!</p>
                <nav class="navigation container">
                    <a href="{% url 'recipe:logout'%}"><button class="butt1">Выход</button></a>
                </nav>
            {% else %}
                <nav class="navigation container">
                    <a href="{% url 'recipe:login'%}"><button class="butt1">Вход</button></a>
                    <a href="{% url 'recipe:register'%}"><button class="butt1">Регистрация</button></a>
                </nav>
            {% endif %}
        </header>


        <!-- Форма выбора категории -->
        <form action="#" method="GET">
            <p class="input">
                Категория:
                <select name="category" id="category">
                    <option value="">---</option>
                    {% for category in categories %}
                        <option value="{{ category.id }}" {% if category.id == selected_category_id %}selected{% endif %}>{{ category.name }}</option>
                    {% endfor %}
                </select>
            </p>
            <button class="btn btn-secondary">Поиск</button>
        </form>

        <!-- Сетка рецептов -->
        <div class="recipe-grid">
            {% for recipe in recipe %}
                <div class="recipe-item">
                        <h3 class="title">{{ recipe.title }}</h3>
                    </a>
                    {% if recipe.image %}
                        <img class="recipe-item img" src="{{ recipe.image.url }}" alt="{{ recipe.title }}">
                    {% else %}
                        <p>Без изображения</p>
                    {% endif %}
                    {% if recipe.ingredients %}
                        <p class="recipe-card"><strong>Ингредиенты:</strong> {{ recipe.ingredients|truncatechars:100 }} </p>
                        <a href="{% url 'recipe:recipe_detail' recipe.id %}">Подробнее</a>
                    {% else %}
                        <p><strong>Ингредиенты:</strong> Не указаны</p>
                    {% endif %}
                </div>
            {% empty %}
                <p> Нет доступных рецептов. </p>
            {% endfor %}
        </div>
          <div class="button-container">
                <a href="{% url 'recipe:add_recipe'%}" class="btn btn-secondary">Добавить рецепт</a>
                <a href="{% url 'recipe:add_ingredient'%}" class="btn btn-secondary">Добавить ингредиент</a>
            </div>

    </div>

{% endblock %}
Вернуться на верх