LivelyPuer/PIbd-24_Boiko_M.S._InternetProgramming
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

lab2

Browse Source
This commit is contained in:
LivelyPuer 2025-02-21 21:24:42 +04:00
parent 13cfefe9d3
commit 00abf69d77
13 changed files with 503 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
about.html
View File

@ -2,22 +2,31 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>О фильме - Груз 200</title> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<header> <header>
<nav> <div class="header-container">
<ul> <div class="logo">
<li><a href="index.html">Главная</a></li> <img src="resources/logo.webp" alt="Online Cinema Theater Logo">
<li><a href="catalog.html">Каталог</a></li> <span>Online Cinema Theater</span>
<li><a href="films.html">Фильмы</a></li> </div>
<li><a href="seriales.html">Сериалы</a></li> <nav>
<li><a href="reviews.html">Рецензии</a></li> <ul class="navbar">
</ul> <li><a href="index.html">Главная</a></li>
</nav> <li><a href="catalog.html">Каталог</a></li>
<div class="logo"> <li><a href="reviews.html">Рецензии</a></li>
<img src="resources/logo.webp" alt="Online Cinema Theater Logo"> <li class="dropdown">
<span>Что глянуть? ▾</span>
<ul class="features-menu">
<li><a href="films.html">Фильмы</a></li>
<li><a href="seriales.html">Сериалы</a></li>
</ul>
</li>
</ul>
</nav>
</div> </div>
</header> </header>
<main> <main>
@ -67,7 +76,27 @@
</main> </main>
<footer> <footer>
<div class="footer-container">
<div class="contact-info">
<h3>Контактная информация</h3>
<p>Телефон: +7 (123) 456-78-90</p>
<p>Email: info@cinema.com</p>
<p>Адрес: ул. Примерная, 123, Москва, Россия</p>
</div>
<div class="social-media">
<h3>Мы в соцсетях</h3>
<a href="#"><img src="resources/icons/icq.svg" alt="ICQ"></a>
<a href="#"><img src="resources/icons/tg.webp" alt="Telegram"></a>
<a href="#"><img src="resources/icons/vk.webp" alt="VK"></a>
</div>
<div class="working-hours">
<h3>Время работы</h3>
<p>Понедельник - Пятница: 10:00 - 22:00</p>
<p>Суббота - Воскресенье: 12:00 - 24:00</p>
</div>
</div>
<p>&copy; 2022 Online Cinema Theater. All rights reserved.</p> <p>&copy; 2022 Online Cinema Theater. All rights reserved.</p>
</footer> </footer>
</body> </body>
</html> </html>

54
catalog.html
View File

@ -3,22 +3,30 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Cinema Theater - Catalog</title> <title>Page Title</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<header> <header>
<nav> <div class="header-container">
<ul> <div class="logo">
<li><a href="index.html">Главная</a></li> <img src="resources/logo.webp" alt="Online Cinema Theater Logo">
<li><a href="catalog.html">Каталог</a></li> <span>Online Cinema Theater</span>
<li><a href="films.html">Фильмы</a></li> </div>
<li><a href="seriales.html">Сериалы</a></li> <nav>
<li><a href="reviews.html">Рецензии</a></li> <ul class="navbar">
</ul> <li><a href="index.html">Главная</a></li>
</nav> <li><a href="catalog.html">Каталог</a></li>
<div class="logo"> <li><a href="reviews.html">Рецензии</a></li>
<img src="resources/logo.webp" alt="Online Cinema Theater Logo"> <li class="dropdown">
<span>Что глянуть? ▾</span>
<ul class="features-menu">
<li><a href="films.html">Фильмы</a></li>
<li><a href="seriales.html">Сериалы</a></li>
</ul>
</li>
</ul>
</nav>
</div> </div>
</header> </header>
<main> <main>
@ -48,6 +56,26 @@
</section> </section>
</main> </main>
<footer> <footer>
<div class="footer-container">
<div class="contact-info">
<h3>Контактная информация</h3>
<p>Телефон: +7 (123) 456-78-90</p>
<p>Email: info@cinema.com</p>
<p>Адрес: ул. Примерная, 123, Москва, Россия</p>
</div>
<div class="social-media">
<h3>Мы в соцсетях</h3>
<a href="#"><img src="resources/icons/icq.svg" alt="ICQ"></a>
<a href="#"><img src="resources/icons/tg.webp" alt="Telegram"></a>
<a href="#"><img src="resources/icons/vk.webp" alt="VK"></a>
</div>
<div class="working-hours">
<h3>Время работы</h3>
<p>Понедельник - Пятница: 10:00 - 22:00</p>
<p>Суббота - Воскресенье: 12:00 - 24:00</p>
</div>
</div>
<p>&copy; 2022 Online Cinema Theater. All rights reserved.</p> <p>&copy; 2022 Online Cinema Theater. All rights reserved.</p>
</footer></body> </footer>
</body>
</html> </html>

2
description.txt
View File

@ -16,4 +16,4 @@
Рецензии Рецензии
Назначение: Назначение:
Страница рецензий предоставляет пользователям возможность ознакомиться с профессиональными и пользовательскими отзывами о фильмах и сериалах. Здесь публикуются обзоры, аналитические статьи и оценки, которые помогут посетителям сделать выбор перед просмотром. Рецензии могут сопровождаться комментариями, рейтингами и ссылками на детальные обзоры, а также предоставлять возможность сортировки по жанрам, дате публикации или популярности обзора. Страница рецензий предоставляет пользователям возможность ознакомиться с профессиональными и пользовательскими отзывами о фильмах и сериалах. Здесь публикуются обзоры, аналитические Что глянуть? и оценки, которые помогут посетителям сделать выбор перед просмотром. Рецензии могут сопровождаться комментариями, рейтингами и ссылками на детальные обзоры, а также предоставлять возможность сортировки по жанрам, дате публикации или популярности обзора.

74
films.html
View File

@ -1,57 +1,83 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Cinema Theater</title> <title>Page Title</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<header> <header>
<nav> <div class="header-container">
<ul> <div class="logo">
<li><a href="index.html">Главная</a></li> <img src="resources/logo.webp" alt="Online Cinema Theater Logo">
<li><a href="catalog.html">Каталог</a></li> <span>Online Cinema Theater</span>
<li><a href="films.html">Фильмы</a></li> </div>
<li><a href="seriales.html">Сериалы</a></li> <nav>
<li><a href="reviews.html">Рецензии</a></li> <ul class="navbar">
</ul> <li><a href="index.html">Главная</a></li>
</nav> <li><a href="catalog.html">Каталог</a></li>
<div class="logo"> <li><a href="reviews.html">Рецензии</a></li>
<img src="resources/logo.webp" alt="Online Cinema Theater Logo"> <li class="dropdown">
<span>Что глянуть? ▾</span>
<ul class="features-menu">
<li><a href="films.html">Фильмы</a></li>
<li><a href="seriales.html">Сериалы</a></li>
</ul>
</li>
</ul>
</nav>
</div> </div>
</header> </header>
<main> <main>
<section class="featured-movies"> <section class="featured-movies">
<h2>Оновные фильмы</h2> <h2>Основные фильмы</h2>
<div class="movie-list"> <div class="movie-list">
<div class="movie-card"> <div class="movie-card">
<img src="resources/movies/gruz.jpeg" alt="Movie Poster"> <img src="resources/movies/gruz.jpeg" alt="Movie Poster">
<h3>Груз 200</h3> <h3>Груз 200</h3>
<p>Режиссер: Алексей Балабанов</p> <p>Режиссер: Алексей Балабанов</p>
<p>Жанр: триллер драма криминал</p> <p>Жанр: триллер, драма, криминал</p>
<p>Год выпуска: 2007</p> <p>Год выпуска: 2007</p>
<a href="about.html" class="watch-now-btn">Смотреть сейчас</a> <a href="about.html" class="watch-now-btn">Смотреть сейчас</a>
</div> </div>
</div> </div>
</section> </section>
<section class="upcoming-movies"> <section class="upcoming-movies">
<h2>Предтоящие фильмы</h2> <h2>Предстоящие фильмы</h2>
<div class="movie-list"> <div class="movie-list">
<div class="movie-list"> <div class="movie-card">
<div class="movie-card"> <img src="resources/movies/gruz.jpeg" alt="Movie Poster">
<img src="resources/movies/gruz.jpeg" alt="Movie Poster"> <h3>Груз 200</h3>
<h3>Груз 200</h3> <p>Режиссер: Алексей Балабанов</p>
<p>Режиссер: Алексей Балабанов</p> <p>Жанр: триллер, драма, криминал</p>
<p>Жанр: триллер драма криминал</p> <p>Год выпуска: 2025</p>
<p>Год выпуска: 2025</p> <a href="about.html" class="watch-now-btn">Смотреть сейчас</a>
<a href="about.html" class="watch-now-btn">Смотреть сейчас</a>
</div>
</div> </div>
</div> </div>
</section> </section>
</main> </main>
<footer> <footer>
<div class="footer-container">
<div class="contact-info">
<h3>Контактная информация</h3>
<p>Телефон: +7 (123) 456-78-90</p>
<p>Email: info@cinema.com</p>
<p>Адрес: ул. Примерная, 123, Москва, Россия</p>
</div>
<div class="social-media">
<h3>Мы в соцсетях</h3>
<a href="#"><img src="resources/icons/icq.svg" alt="ICQ"></a>
<a href="#"><img src="resources/icons/tg.webp" alt="Telegram"></a>
<a href="#"><img src="resources/icons/vk.webp" alt="VK"></a>
</div>
<div class="working-hours">
<h3>Время работы</h3>
<p>Понедельник - Пятница: 10:00 - 22:00</p>
<p>Суббота - Воскресенье: 12:00 - 24:00</p>
</div>
</div>
<p>&copy; 2022 Online Cinema Theater. All rights reserved.</p> <p>&copy; 2022 Online Cinema Theater. All rights reserved.</p>
</footer> </footer>
</body> </body>

80
index.html
View File

@ -3,55 +3,73 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Cinema Theater</title> <title>Page Title</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<header> <header>
<nav> <div class="header-container">
<ul> <div class="logo">
<li><a href="index.html">Главная</a></li> <img src="resources/logo.webp" alt="Online Cinema Theater Logo">
<li><a href="catalog.html">Каталог</a></li> <span>Online Cinema Theater</span>
<li><a href="films.html">Фильмы</a></li> </div>
<li><a href="seriales.html">Сериалы</a></li> <nav>
<li><a href="reviews.html">Рецензии</a></li> <ul class="navbar">
</ul> <li><a href="index.html">Главная</a></li>
</nav> <li><a href="catalog.html">Каталог</a></li>
<div class="logo"> <li><a href="reviews.html">Рецензии</a></li>
<img src="resources/logo.webp" alt="Online Cinema Theater Logo"> <li class="dropdown">
<span>Что глянуть? ▾</span>
<ul class="features-menu">
<li><a href="films.html">Фильмы</a></li>
<li><a href="seriales.html">Сериалы</a></li>
</ul>
</li>
</ul>
</nav>
</div> </div>
</header> </header>
<main> <main>
<section class="featured-movies"> <section class="hero">
<h2>Оновные фильмы</h2> <h1>Добро пожаловать в Online Cinema Theater</h1>
<p>Ваш лучший выбор для просмотра фильмов и сериалов онлайн.</p>
</section>
<section class="featured-content">
<h2>Рекомендуемые фильмы</h2>
<div class="movie-list"> <div class="movie-list">
<!-- Example of integrated content from Lab Work №1 -->
<div class="movie-card"> <div class="movie-card">
<img src="resources/movies/gruz.jpeg" alt="Movie Poster"> <img src="resources/movies/gruz.jpeg" alt="Груз 200">
<h3>Груз 200</h3> <h3>Груз 200</h3>
<p>Режиссер: Алексей Балабанов</p> <p>Режиссер: Алексей Балабанов</p>
<p>Жанр: триллер драма криминал</p> <p>Жанр: триллер, драма, криминал</p>
<p>Год выпуска: 2007</p> <p>Год выпуска: 2007</p>
<a href="about.html" class="watch-now-btn">Смотреть сейчас</a> <a href="about.html" class="watch-now-btn">Смотреть сейчас</a>
</div> </div>
</div> <!-- Add more movie cards as needed -->
</section>
<section class="upcoming-movies">
<h2>Предтоящие фильмы</h2>
<div class="movie-list">
<div class="movie-list">
<div class="movie-card">
<img src="resources/movies/gruz.jpeg" alt="Movie Poster">
<h3>Груз 200</h3>
<p>Режиссер: Алексей Балабанов</p>
<p>Жанр: триллер драма криминал</p>
<p>Год выпуска: 2025</p>
<a href="about.html" class="watch-now-btn">Смотреть сейчас</a>
</div>
</div>
</div> </div>
</section> </section>
</main> </main>
<footer> <footer>
<div class="footer-container">
<div class="contact-info">
<h3>Контактная информация</h3>
<p>Телефон: +7 (123) 456-78-90</p>
<p>Email: info@cinema.com</p>
<p>Адрес: ул. Примерная, 123, Москва, Россия</p>
</div>
<div class="social-media">
<h3>Мы в соцсетях</h3>
<a href="#"><img src="resources/icons/icq.svg" alt="ICQ"></a>
<a href="#"><img src="resources/icons/tg.webp" alt="Telegram"></a>
<a href="#"><img src="resources/icons/vk.webp" alt="VK"></a>
</div>
<div class="working-hours">
<h3>Время работы</h3>
<p>Понедельник - Пятница: 10:00 - 22:00</p>
<p>Суббота - Воскресенье: 12:00 - 24:00</p>
</div>
</div>
<p>&copy; 2022 Online Cinema Theater. All rights reserved.</p> <p>&copy; 2022 Online Cinema Theater. All rights reserved.</p>
</footer> </footer>
</body> </body>

3
resources/icons/icq.svg Normal file
View File

@ -0,0 +1,3 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg width="210mm" height="210mm" version="1.1" viewBox="0 0 210 210" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><g stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="13.229"><g fill="#00ff03"><path d="m106.61 110.23s-42.218-47.933-48.752-62.93c-6.534-14.998-4.4796-30.925 7.3807-35.35 11.86-4.4252 29.058 10.284 32.436 29.134 3.3782 18.85 8.9346 69.146 8.9346 69.146z"/><path d="m104.24 108.08s-3.4772-58.275 0-77.208c3.4772-18.933 21.955-27.771 36.631-23.482 14.676 4.2897 26.361 23.591 15.968 42.267-10.394 18.676-52.599 58.422-52.599 58.422z"/><path d="m104.14 106.37s40.123-44.003 58.085-48.769c17.962-4.7668 29.582-2.6383 34.339 9.6808 4.7576 12.319-7.0663 24.257-24.476 31.234-17.41 6.977-67.948 7.8542-67.948 7.8542z"/><path d="m103.95 105.45s64.011-10.41 80.734-0.91329c16.724 9.4971 17.563 19.84 16.256 31.234s-7.5384 23.693-28.129 23.197-68.862-53.518-68.862-53.518z"/><path d="m103.38 103.59s33.695 33.474 41.812 47.95c8.1173 14.476 5.3388 30.4-1.7262 35.866s-18.627 2.975-30.496-11.508c-11.869-14.483-9.59-72.308-9.59-72.308z"/><path d="m104.47 106.23s9.8769 64.267 0.54797 79.273c-9.329 15.006-22.579 21.054-35.001 17.249s-20.905-12.366-19.065-32.592c1.8397-20.226 53.518-63.93 53.518-63.93z"/></g><path d="m103.44 107.4s-35.939 37.331-51.327 40.732c-15.388 3.4011-23.473 2.9458-28.129-4.9317s-5.067-16.321 7.6716-27.216 71.784-8.5849 71.784-8.5849z" fill="#f5091f"/><path d="m102.01 107.02s-49.266 2.8098-69.592 0-24.215-11.647-23.745-23.745c0.46999-12.098 15.745-27.854 33.426-27.033s59.911 50.779 59.911 50.779z" fill="#00ff03"/><circle cx="103.56" cy="104.51" r="22.852" fill="#f8ee3e"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
resources/icons/tg.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.9 KiB

BIN
resources/icons/vk.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

76
reviews.html
View File

@ -2,39 +2,71 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Рецензии</title> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<header> <header>
<nav> <div class="header-container">
<ul> <div class="logo">
<li><a href="index.html">Главная</a></li> <img src="resources/logo.webp" alt="Online Cinema Theater Logo">
<li><a href="catalog.html">Каталог</a></li> <span>Online Cinema Theater</span>
<li><a href="films.html">Фильмы</a></li> </div>
<li><a href="seriales.html">Сериалы</a></li> <nav>
<li><a href="reviews.html">Рецензии</a></li> <ul class="navbar">
</ul> <li><a href="index.html">Главная</a></li>
</nav> <li><a href="catalog.html">Каталог</a></li>
<div class="logo"> <li><a href="reviews.html">Рецензии</a></li>
<img src="resources/logo.webp" alt="Online Cinema Theater Logo"> <li class="dropdown">
<span>Что глянуть? ▾</span>
<ul class="features-menu">
<li><a href="films.html">Фильмы</a></li>
<li><a href="seriales.html">Сериалы</a></li>
</ul>
</li>
</ul>
</nav>
</div> </div>
</header> </header>
<main> <main>
<section class="movie-reviews"> <section class="movie-reviews">
<article> <h2>Рецензии на фильмы</h2>
<h2>Груз 200</h2> <div class="reviews-container">
<img src="resources/movies/gruz.jpeg" alt="Movie Poster"> <article class="review-card">
<p> <h3>Груз 200</h3>
Рецензия: Груз 200 - это история о двух братьях, которые вместе с другими людьми отправляются в грузовике на поиски золота в Африке. <img src="resources/movies/gruz.jpeg" alt="Movie Poster">
Однако путь к цели оказывается опасным и сложным, и братья сталкиваются с различными препятствиями, в том числе с коррупцией и жестокостью. <p>
</p> Рецензия: Груз 200 - это история о двух братьях, которые вместе с другими людьми отправляются в
</article> грузовике на поиски золота в Африке.
Однако путь к цели оказывается опасным и сложным, и братья сталкиваются с различными препятствиями, в
том числе с коррупцией и жестокостью.
</p>
</article>
<!-- Add more review cards as needed -->
</div>
</section> </section>
</main> </main>
<footer> <footer>
<div class="footer-container">
<div class="contact-info">
<h3>Контактная информация</h3>
<p>Телефон: +7 (123) 456-78-90</p>
<p>Email: info@cinema.com</p>
<p>Адрес: ул. Примерная, 123, Москва, Россия</p>
</div>
<div class="social-media">
<h3>Мы в соцсетях</h3>
<a href="#"><img src="resources/icons/icq.svg" alt="ICQ"></a>
<a href="#"><img src="resources/icons/tg.webp" alt="Telegram"></a>
<a href="#"><img src="resources/icons/vk.webp" alt="VK"></a>
</div>
<div class="working-hours">
<h3>Время работы</h3>
<p>Понедельник - Пятница: 10:00 - 22:00</p>
<p>Суббота - Воскресенье: 12:00 - 24:00</p>
</div>
</div>
<p>&copy; 2022 Online Cinema Theater. All rights reserved.</p> <p>&copy; 2022 Online Cinema Theater. All rights reserved.</p>
</footer> </footer>
</body> </body>

55
seriales.html
View File

@ -3,27 +3,35 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Cinema Theater</title> <title>Page Title</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<header> <header>
<nav> <div class="header-container">
<ul> <div class="logo">
<li><a href="index.html">Главная</a></li> <img src="resources/logo.webp" alt="Online Cinema Theater Logo">
<li><a href="catalog.html">Каталог</a></li> <span>Online Cinema Theater</span>
<li><a href="films.html">Фильмы</a></li> </div>
<li><a href="seriales.html">Сериалы</a></li> <nav>
<li><a href="reviews.html">Рецензии</a></li> <ul class="navbar">
</ul> <li><a href="index.html">Главная</a></li>
</nav> <li><a href="catalog.html">Каталог</a></li>
<div class="logo"> <li><a href="reviews.html">Рецензии</a></li>
<img src="resources/logo.webp" alt="Online Cinema Theater Logo"> <li class="dropdown">
<span>Что глянуть? ▾</span>
<ul class="features-menu">
<li><a href="films.html">Фильмы</a></li>
<li><a href="seriales.html">Сериалы</a></li>
</ul>
</li>
</ul>
</nav>
</div> </div>
</header> </header>
<main> <main>
<section class="featured-movies"> <section class="featured-movies">
<h2>Оновные фильмы</h2> <h2>Оновные сериалы</h2>
<div class="movie-list"> <div class="movie-list">
<div class="movie-card"> <div class="movie-card">
<img src="resources/series/960.webp" alt="Movie Poster"> <img src="resources/series/960.webp" alt="Movie Poster">
@ -35,7 +43,26 @@
</section> </section>
</main> </main>
<footer> <footer>
<div class="footer-container">
<div class="contact-info">
<h3>Контактная информация</h3>
<p>Телефон: +7 (123) 456-78-90</p>
<p>Email: info@cinema.com</p>
<p>Адрес: ул. Примерная, 123, Москва, Россия</p>
</div>
<div class="social-media">
<h3>Мы в соцсетях</h3>
<a href="#"><img src="resources/icons/icq.svg" alt="ICQ"></a>
<a href="#"><img src="resources/icons/tg.webp" alt="Telegram"></a>
<a href="#"><img src="resources/icons/vk.webp" alt="VK"></a>
</div>
<div class="working-hours">
<h3>Время работы</h3>
<p>Понедельник - Пятница: 10:00 - 22:00</p>
<p>Суббота - Воскресенье: 12:00 - 24:00</p>
</div>
</div>
<p>&copy; 2022 Online Cinema Theater. All rights reserved.</p> <p>&copy; 2022 Online Cinema Theater. All rights reserved.</p>
</footer> </footer>
</body> </body>
</html> </html>

171
style.css
View File

@ -13,46 +13,104 @@ body {
} }
header { header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 20px; padding: 20px;
background-color: #222222; background-color: #222222;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.header-container {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
} }
nav ul { nav ul {
display: flex; display: flex;
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0;
} }
nav ul li { nav ul li {
margin-right: 20px; margin-right: 20px;
position: relative; /* Required for dropdown positioning */
} }
nav ul li a { nav ul li a, .dropdown > span {
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
transition: color 0.3s ease; padding: 10px 15px;
border-radius: 5px;
transition: background-color 0.3s ease, color 0.3s ease;
cursor: pointer;
} }
nav ul li a:hover { nav ul li a:hover, .dropdown > span:hover {
color: #ff6600; background-color: #ff6600;
color: #fff;
} }
.logo { .logo {
max-width: 50px; display: flex;
max-height: 50px; align-items: center;
} }
.logo img { .logo img {
max-width: 50px;
max-height: 50px;
margin-right: 10px;
}
.logo span {
font-size: 1.2em;
color: #fff;
}
/* Dropdown Menu Styles */
.dropdown .features-menu {
display: none;
position: absolute;
background-color: #333;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
list-style-type: none;
padding: 0;
border-radius: 5px;
overflow: hidden;
}
.dropdown .features-menu li {
padding: 12px 16px;
}
.dropdown .features-menu li a {
color: #fff;
text-decoration: none;
display: block;
padding: 10px 15px;
transition: background-color 0.3s ease;
}
.dropdown .features-menu li a:hover {
background-color: #444;
}
.dropdown:hover .features-menu {
display: block; display: block;
width: 100%;
height: auto;
} }
main { main {
padding: 20px; padding: 80px 20px 20px; /* Adjust top padding to account for fixed header */
} }
.featured-movies, .featured-movies,
@ -138,3 +196,98 @@ footer {
text-align: left; text-align: left;
width: 200px; width: 200px;
} }
/* Footer Styles */
footer {
background-color: #222222;
color: #999;
padding: 20px;
text-align: center;
}
/* Responsive Styles */
@media (max-width: 768px) {
.header-container, .footer-container {
flex-direction: column;
align-items: center;
}
.navbar {
flex-direction: column;
align-items: center;
}
.navbar li {
margin-bottom: 10px;
}
.movie-list {
flex-direction: column;
align-items: center;
}
.movie-card {
width: 90%;
margin-bottom: 20px;
}
.footer-container div {
margin: 20px 0;
text-align: center;
}
}
@media (max-width: 480px) {
body {
font-size: 14px;
}
.logo img {
max-width: 40px;
max-height: 40px;
}
.movie-card {
width: 100%;
}
.watch-now-btn {
padding: 8px 16px;
}
}
.footer-container {
display: flex;
justify-content: space-around;
align-items: flex-start;
flex-wrap: wrap;
margin-bottom: 20px;
}
.footer-container div {
margin: 10px;
}
.footer-container h3 {
color: #fff;
margin-bottom: 10px;
}
.footer-container p {
margin: 5px 0;
}
.social-media a {
display: inline-block;
margin: 0 5px;
transition: transform 0.3s ease;
}
.social-media a img {
width: 24px;
height: 24px;
}
.social-media a:hover {
transform: scale(1.1);
}

60
template.html Normal file
View File

@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="header-container">
<div class="logo">
<img src="resources/logo.webp" alt="Online Cinema Theater Logo">
<span>Online Cinema Theater</span>
</div>
<nav>
<ul class="navbar">
<li><a href="index.html">Главная</a></li>
<li><a href="catalog.html">Каталог</a></li>
<li><a href="reviews.html">Рецензии</a></li>
<li class="dropdown">
<span>Что глянуть? ▾</span>
<ul class="features-menu">
<li><a href="films.html">Фильмы</a></li>
<li><a href="seriales.html">Сериалы</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
<main>
<section class="content">
<!-- Main content goes here -->
</section>
</main>
<footer>
<div class="footer-container">
<div class="contact-info">
<h3>Контактная информация</h3>
<p>Телефон: +7 (123) 456-78-90</p>
<p>Email: info@cinema.com</p>
<p>Адрес: ул. Примерная, 123, Москва, Россия</p>
</div>
<div class="social-media">
<h3>Мы в соцсетях</h3>
<a href="#"><img src="resources/icons/icq.svg" alt="ICQ"></a>
<a href="#"><img src="resources/icons/tg.webp" alt="Telegram"></a>
<a href="#"><img src="resources/icons/vk.webp" alt="VK"></a>
</div>
<div class="working-hours">
<h3>Время работы</h3>
<p>Понедельник - Пятница: 10:00 - 22:00</p>
<p>Суббота - Воскресенье: 12:00 - 24:00</p>
</div>
</div>
<p>&copy; 2022 Online Cinema Theater. All rights reserved.</p>
</footer>
</body>
</html>

BIN
Отчет.docx
View File

Binary file not shown.