How to display a row from the database so that when it is output, it replaces itself?

Question

Django

TO BE HONEST, CAN YOU EXPLAIN IN GENERAL HOW TO MAKE A SLIDE AT THE SAME TIME AND CLICK ON IT TO OPEN THE INFORMATION PAGE I DID THIS

models.py

from django.db import models
from PIL import Image


class News(models.Model):

    NameNews = models.CharField(max_length=20)
    OfferNews = models.TextField(max_length=100)
    TitleNews = models.CharField(max_length=35)
    DescriptionNews = models.TextField()

    def __str__(self):
        return self.NameNews

    class Meta:
        verbose_name = 'Новость'
        verbose_name_plural = 'Новости'

views.py

from django.shortcuts import render
from .models import News

def obito(request):
    news = News.objects.all()
    context = {
        'pr': news
    }
    return render(request, 'loli/News.html', context)


def madara(request):
    news = News.objects.all()
    context = {
        'pr': news
    }
    return render(request, 'loli/news-offer.html', context)

News.html
This is the slide itself, it redirects to a separate page.

<section class="skill">
        <div class="container">
            <div class="row">
                {% for post in pr %}
                <div class="col-md-4">
                    <a href="{% url 'madara' %}" class="pointer">
                        <div class="card">
                            <div class="card-img">
                                <img src="image/Card2.svg" alt="car" class="card-img2">
                            </div>
                            <h3 class="card-title">
                                {{ post.NameNews}}
                            </h3>
                            <p class="card-offer">
                                {{ post.OfferNews}}
                            </p>
                        </div>
                    </a>
                </div>
                {% endfor %}

madara
This is the page where all tables appear at the same time

<section class="news-list">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                        {% for post in pr %}
                        <h2 class="news-list_title">
                            {{ post.TitleNews}}
                        </h2>
                        <p class="news-list_offer">
                            {{ post.DescriptionNews}}
                        </p>
                        {% endfor %}
                </div>
            </div>
        </div>
    </section>

Answer 1

if it works, then go