This commit is contained in:
leoevgeniy 2023-12-17 22:07:22 +04:00
parent 8cd466c170
commit 0e5d2349fd
6 changed files with 176 additions and 579 deletions

View File

@ -51,16 +51,22 @@ body {
.movie-container { .movie-container {
width: 80%; width: 80%;
margin: 0 auto; margin: 0 auto;
overflow-x: auto; overflow-x: auto;
white-space: nowrap; white-space: nowrap;
gap: 20px;
} }
.movie-card { .movie-card {
display: inline-block;
width: 300px; width: 300px;
height: 600px;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
margin: 0 auto; margin: 0 auto;
margin-right: 20px;
border-radius: 5px; border-radius: 5px;
background-color: #ffffff; background-color: #ffffff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

View File

@ -82,6 +82,7 @@
<a href="admin.html" class="nav-link">Admin</a> <a href="admin.html" class="nav-link">Admin</a>
</div> </div>
</footer> </footer>
<script type="module"> <script type="module">
import validation from "./js/validation"; import validation from "./js/validation";
import { linesPageForm } from "./js/lines" import { linesPageForm } from "./js/lines"
@ -95,4 +96,5 @@
</body> </body>
</html> </html>

View File

@ -49,206 +49,18 @@
<div class="movie-container"> <div class="movie-container">
<h1>Наиболее Популярное</h1> <h1>Наиболее Популярное</h1>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<!-- Добавьте больше фильмов по вашему желанию --> <!-- Добавьте больше фильмов по вашему желанию -->
</div> </div>
<div class="movie-container"> <div class="movie-container">
<h1>Может быть интересно</h1> <h1>Может быть интересно</h1>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<!-- Добавьте больше фильмов по вашему желанию --> <!-- Добавьте больше фильмов по вашему желанию -->
</div> </div>
<div class="movie-container"> <div class="movie-container">
<h1>Лучшие отзывы</h1> <h1>Лучшие отзывы</h1>
<div class="movie-card" data-kinopoisk-id="61237">
<a href="#" class="movie-link" data-url=""></a>
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<!-- Добавьте больше фильмов по вашему желанию --> <!-- Добавьте больше фильмов по вашему желанию -->
</div> </div>
<footer class="footer mt-auto d-flex justify-content-center align-items-center"> <footer class="footer mt-auto d-flex justify-content-center align-items-center">
@ -261,13 +73,13 @@
<script type="module"> <script type="module">
import myBanner from "./js/banner"; import myBanner from "./js/banner";
import "./js/film.js";
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
myBanner("#banner"); myBanner("#banner");
}); });
</script> </script>
<script src="js/script.js"></script>
<script src="js/film.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

View File

@ -1,6 +1,6 @@
// film.js // film.js
import { getAllLines } from './lines-rest-api.js'; import { getAllLines, getAllItemTypes } from './lines-rest-api.js';
async function loadMovies() { async function loadMovies() {
try { try {
@ -10,7 +10,86 @@ async function loadMovies() {
console.error("Error loading movies:", error); console.error("Error loading movies:", error);
} }
} }
async function loadMoviesindex() {
try {
const moviesData = await getAllLines();
addMovieCardsindex(moviesData);
} catch (error) {
console.error("Error loading movies:", error);
}
}
async function loadMoviesBygenre() {
try {
const moviesData = await getAllLines();
const itemTypes = await getAllItemTypes();
addMoviesByGenre(moviesData, itemTypes);
} catch (error) {
console.error("Error loading movies:", error);
}
}
function addMoviesByGenre(moviesData, itemTypes) {
var containers = document.querySelectorAll(".movie-container");
containers.forEach(function (container) {
var genre = container.querySelector("h1").textContent;
// Находим все фильмы для данного жанра
var genreMovies = moviesData.filter(function (movie) {
var itemType = itemTypes[movie.itemsId-1];
if (itemType && itemType.genre === genre) {
return true;
} else {
console.error("Invalid itemTypes for movie:", movie);
console.log("itemType:", itemType);
console.log("genre:", genre);
return false;
}
});
genreMovies.forEach(function (movie) {
addMovieCardsByContainer(container, movie);
});
});
}
function addMovieCardsByContainer(container,movie) {
var container = container
if (!container) {
console.error("Movie container not found");
return;""
}
var movieCard = document.createElement("div");
movieCard.className = "movie-card";
var image = document.createElement("img");
// Проверяем, есть ли у фильма изображение, и вставляем соответствующее изображение
image.src = movie.image ? movie.image : "https://via.placeholder.com/300x400";
image.alt = "Movie Image";
var content = document.createElement("div");
content.className = "movie-card-content";
var title = document.createElement("h2");
title.textContent = movie.name;
var description = document.createElement("p");
description.textContent = "Рейтинг: " + movie.rating;
content.appendChild(title);
content.appendChild(description);
movieCard.appendChild(image);
movieCard.appendChild(content);
container.appendChild(movieCard);
}
function addMovieCards(moviesData) { function addMovieCards(moviesData) {
var container = document.getElementById("movie-container"); var container = document.getElementById("movie-container");
@ -46,5 +125,57 @@ function addMovieCards(moviesData) {
container.appendChild(movieCard); container.appendChild(movieCard);
}); });
} }
function addMovieCardsindex(moviesData) {
var containers = document.querySelectorAll(".movie-container");
document.addEventListener('DOMContentLoaded', loadMovies); if (!containers || containers.length === 0) {
console.error("Movie containers not found");
return;
}
containers.forEach(function (container) {
moviesData.forEach(function (movie) {
var movieCard = document.createElement("div");
movieCard.className = "movie-card";
var image = document.createElement("img");
// Проверяем, есть ли у фильма изображение, и вставляем соответствующее изображение
image.src = movie.image ? movie.image : "https://via.placeholder.com/300x400";
image.alt = "Movie Image";
var content = document.createElement("div");
content.className = "movie-card-content";
var title = document.createElement("h2");
title.textContent = movie.name;
var description = document.createElement("p");
description.textContent = "Рейтинг: " + movie.rating;
content.appendChild(title);
content.appendChild(description);
movieCard.appendChild(image);
movieCard.appendChild(content);
container.appendChild(movieCard);
});
});
}
document.addEventListener('DOMContentLoaded', function () {
if (window.location.pathname.includes("page2.html")) {
// Запуск функции для page2.html
loadMovies();
}else if (window.location.pathname.includes("page5.html")) {
// Запуск функции для page5.html
loadMovies();
}else if (window.location.pathname.includes("page3.html")) {
// Запуск функции для page3.html
loadMoviesBygenre();
}else if (window.location.pathname.includes("index.html")) {
// Запуск функции для index.html
loadMoviesindex();
}
});

View File

@ -42,207 +42,39 @@
</div> </div>
<div class="movie-container"> <div class="movie-container">
<h1>Ужасы</h1> <h1>Фантастика</h1>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<!-- Добавьте больше фильмов по вашему желанию --> <!-- Добавьте больше фильмов по вашему желанию -->
</div> </div>
<div class="movie-container"> <div class="movie-container">
<h1>Фентэзи</h1> <h1>Фэнтези</h1>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image"> <!-- Добавьте больше фильмов по вашему желанию -->
<div class="movie-card-content"> </div>
<h2>Название фильма 1</h2> <div class="movie-container">
<p>Описание фильма 1.</p> <h1>Романтика</h1>
</div>
</div> <!-- Добавьте больше фильмов по вашему желанию -->
<div class="movie-card"> </div>
<img src="https://via.placeholder.com/300x400" alt="Movie Image"> <div class="movie-container">
<div class="movie-card-content"> <h1>Экшн</h1>
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p> <!-- Добавьте больше фильмов по вашему желанию -->
</div> </div>
</div> <div class="movie-container">
<div class="movie-card"> <h1>Драма</h1>
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<!-- Добавьте больше фильмов по вашему желанию --> <!-- Добавьте больше фильмов по вашему желанию -->
</div> </div>
<div class="movie-container"> <div class="movie-container">
<h1>Боевик</h1> <h1>Боевик</h1>
<div class="movie-card" data-kinopoisk-id="61237">
<a href="#" class="movie-link" data-url=""></a>
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card"> <!-- Добавьте больше фильмов по вашему желанию -->
<img src="https://via.placeholder.com/300x400" alt="Movie Image"> </div>
<div class="movie-card-content"> <div class="movie-container">
<h2>Название фильма 2</h2> <h1>Научная фантастика</h1>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<!-- Добавьте больше фильмов по вашему желанию --> <!-- Добавьте больше фильмов по вашему желанию -->
</div> </div>
<footer class="footer mt-auto d-flex justify-content-center align-items-center"> <footer class="footer mt-auto d-flex justify-content-center align-items-center">
@ -254,6 +86,7 @@
<script src="script.js"></script> <script src="script.js"></script>
<script type="module" src="./js/film.js"></script>
</body> </body>

View File

@ -41,194 +41,8 @@
</nav> </nav>
</div> </div>
<h1>Топ фильмов</h1> <h1>Топ фильмов</h1>
<div class="movie-card"> <div id="movie-container" class="d-flex flex-wrap">
<img src="https://via.placeholder.com/300x400" alt="Movie Image"> <!-- Здесь будут добавляться карточки фильмов -->
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 1</h2>
<p>Описание фильма 1.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 2</h2>
<p>Описание фильма 2.</p>
</div>
</div>
<div class="movie-card">
<img src="https://via.placeholder.com/300x400" alt="Movie Image">
<div class="movie-card-content">
<h2>Название фильма 3</h2>
<p>Описание фильма 3.</p>
</div>
</div> </div>
@ -241,8 +55,7 @@
<script src="script.js"></script> <script type="module" src="./js/film.js"></script>
</body> </body>
</html> </html>