сделал предварительную версию странички с фильмами

CineSync/films/models.py

@@ -8,7 +8,7 @@ from django.db.models import (
     IntegerField,
     DateField,
     ManyToManyField,
-    Manager, ImageField,
+    Manager, ImageField, Min,
 )
 from django.utils import timezone
 from django.core.validators import MinValueValidator
@@ -22,6 +22,16 @@ class FilmManager(Manager):
             release_date__lt=timezone.now(),
         )
 
+    def will_be_shown(self):
+        current_datetime = timezone.now()
+        films_with_sessions = super().get_queryset().filter(
+            sessions__start_datetime__gte=current_datetime,
+        ).annotate(
+            nearest_session=Min('sessions__start_datetime')
+        ).order_by('nearest_session')
+
+        return films_with_sessions
+
     def on_main(self):
         current_datetime = timezone.now()
         end_datetime = current_datetime + timedelta(days=5)

CineSync/films/views.py

@@ -5,7 +5,7 @@ from films.models import Film
 
 
 def films_list(request: HttpResponse) -> HttpResponse:
-    films = Film.objects.released()
+    films = Film.objects.will_be_shown()
     return render(
         request,
         'films/films_list.html',

CineSync/static/css/films/films_list.css

@@ -0,0 +1,51 @@
+.film_preview_card {
+    width: 18vw;
+    height: 25vw;
+    margin: 1vw;
+    border-radius: 3vw;
+    display: flex;
+    align-items: flex-end; 
+    justify-content: center;
+    background-size: cover;
+    background-position: center;
+    position: relative;
+}
+
+.film_preview_card_text_block {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 40%;
+    background-color: rgba(13, 29, 58, 0.8);
+    padding: 1vw;
+    border-bottom-left-radius: 3vw;
+    border-bottom-right-radius: 3vw;
+    color: #eaeaea; 
+    opacity: 0;
+    transition: opacity 0.5s ease;
+}
+
+.film_preview_card_text_block h3 {
+    margin-top: 0;
+    margin-bottom: 0.5vw;
+    font-size: 1.5vw;
+    font-weight: bold;
+}
+
+.film_preview_card_text_block p {
+    margin-top: 0;
+    margin-bottom: 0;
+    font-size: 1vw;
+}
+.films_list {
+    width: 84%;
+    margin-left: 12%;
+    margin-right: 12%;
+}
+.films_block {
+    margin-top: 5vw;
+}
+.film_preview_card:hover .film_preview_card_text_block {
+    opacity: 1;
+}

CineSync/static/css/home/homepage.css

@@ -7,3 +7,6 @@
     display: flex;
     justify-content: center;
 }
+.carousel_title {
+    margin-top: 5vw;
+}

CineSync/templates/films/films_list.html

@@ -1 +1,23 @@
 {% extends "base.html" %}
+{% load static %}
+{% block title %}
+Фильмы
+{% endblock title %}
+{% block content %}
+<link href="{% static 'css/style.css' %}" rel="stylesheet">
+<link href="{% static 'css/films/films_list.css' %}" rel="stylesheet">
+<div class="films_block">
+    <h1 class="header_title carousel_title">Смотрите в прокате</h1>
+    <div class="films_list row row-cols-3">
+        {% for film in films %}
+        <a class="film_preview_card col" href="{% url 'films:film_details' film_id=film.id %}"
+             style="{% if film.image %}background-image: url('{{ film.image.url }}'){% else %}background-color: #eaeaea{% endif %};">
+            <div class="film_preview_card_text_block">
+                <h3>{{ film.name }}</h3>
+                <p>{{ film.description|truncatewords_html:10 }}</p>
+            </div>
+        </a>
+        {% endfor %}
+    </div>
+</div>
+{% endblock %}

CineSync/templates/home/homepage.html

@@ -65,12 +65,12 @@
                  aria-labelledby="tab-{{ date }}"
                  aria-selected="{% if forloop.counter0 == 0 %} true {% else %} false {% endif %}">
                 {% for film, session in sessions.items %}
-                <div class="film_card">
+                <div class="film_card" style="">
                     {% if film.image %}
                     <img src="{{ film.image.url }}" class="d-block w-100 film_card_image film_card_item"
                          alt="Фотография фильма не найдена">
                     {% else %}
-                    Картинки нет :(
+                    <p class="no-image-msg">Картинки нет :(</p>
                     {% endif %}
                     <div class="film_card_column">
                         <div class="film_card_title_row">
@@ -96,5 +96,4 @@
         </div>
     </div>
 </div>
-
 {% endblock %}

CineSync/templates/users/profile.html

@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 {% load static %}
-{% block title %}{{ user.username }}: изменить профиль{% endblock %}
+{% block title %}{{ user.username }}: Профиль{% endblock %}
 {% block content %}
 <link href="{% static 'css/users/profile.css' %}" rel="stylesheet">
 <div class="profile_block">