strwbrry/PIBD-23_Matvienko_Internet_Programming_Labs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

lab-2

Browse Source
This commit is contained in:
strwbrry1
2025-05-28 21:37:05 +04:00
parent 716ef76c99
commit cc721a081f
12 changed files with 522 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
Labs/about.html Normal file
View File

@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="img/icon.png"/>
<title>О нас</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="header-logo">
<a href="index.html">
<img src="img/icon.png" alt="Логотип">
</a>
<h1>О нас</h1>
</div>
<div class="nav-container">
<button class="menu-button">Меню</button>
<div class="nav-dropdown">
<ul class="features-menu">
<li><a href="movies.html">Фильмы</a></li>
<li><a href="series.html">Сериалы</a></li>
<li><a href="library.html">Библиотека</a></li>
<li><a href="about.html">О нас</a></li>
</ul>
</div>
</div>
<nav class="nav-links">
<a href="movies.html">Фильмы</a>
<a href="series.html">Сериалы</a>
<a href="library.html">Библиотека</a>
<a href="about.html">О нас</a>
</nav>
</div>
<div class="content">
<h2>Лучший кинотеатр на просторах интернета</h2>
<p>Контакты:</p>
<ul>
<li>Телефон: 88005553535</li>
<li>Почта: spoiler@gmail.com</li>
</ul>
</div>
<footer class="footer">
<div class="footer-info">
<p>Контакты: <span class="email">ebatyushka@mail.com</span>, <span class="phone">+7&nbsp;123&nbsp;456&nbsp;7890</span></p>
<p>Адрес: г. Москва, ул. Примерная, 1</p>
</div>
<div class="footer-social">
<a href="https://t.me/u_strawberry"><img src="img/telegram.png"></a>
</div>
</footer>
</body>
</html>

BIN
Labs/img/icon-paint.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
Labs/img/icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
Labs/img/movie-posters/brat.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 180 KiB

BIN
Labs/img/movie-posters/brba.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 MiB

BIN
Labs/img/movie-posters/marsianin.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 202 KiB

BIN
Labs/img/telegram.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

72
Labs/index.html Normal file
View File

@@ -0,0 +1,72 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="img/icon.png"/>
<title>Онлайн-кинотеатр Спойлер</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="header-logo">
<a href="index.html">
<img src="img/icon.png" alt="Логотип">
</a>
<h1>Онлайн-кинотеатр</h1>
</div>
<div class="nav-container">
<button class="menu-button">Меню</button>
<div class="nav-dropdown">
<ul class="features-menu">
<li><a href="movies.html">Фильмы</a></li>
<li><a href="series.html">Сериалы</a></li>
<li><a href="library.html">Библиотека</a></li>
<li><a href="about.html">О&nbsp;нас</a></li>
</ul>
</div>
</div>
<nav class="nav-links">
<a href="movies.html">Фильмы</a>
<a href="series.html">Сериалы</a>
<a href="library.html">Библиотека</a>
<a href="about.html">О&nbsp;нас</a>
</nav>
</div>
<main class="content">
<h2>Добро пожаловать в наш онлайн-кинотеатр!</h2>
<p>Здесь вы найдете <strong>только</strong> лучшие фильмы и сериалы</p>
<div class="movie-list">
<div class="movie-item">
<img src="img/movie-posters/marsianin.jpg">
<p>Марсианин (2015)</p>
</div>
<div class="movie-item">
<img src="img/movie-posters/brat.jpg">
<p>Брат (2009)</p>
</div>
</div>
</main>
<footer class="footer">
<div class="footer-info">
<p>Контакты: <span class="email">ebatyushka@mail.com</span>, <span class="phone">+7&nbsp;123&nbsp;456&nbsp;7890</span></p>
<p>Адрес: г. Москва, ул. Примерная, 1</p>
</div>
<div class="footer-social">
<a href="https://t.me/u_strawberry"><img src="img/telegram.png"></a>
</div>
</footer>
</body>
</html>

62
Labs/library.html Normal file
View File

@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="img/icon.png"/>
<title>Ваши фильмы</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="header-logo">
<a href="index.html">
<img src="img/icon.png" alt="Логотип">
</a>
<h1>Библиотека</h1>
</div>
<div class="nav-container">
<button class="menu-button">Меню</button>
<div class="nav-dropdown">
<ul class="features-menu">
<li><a href="movies.html">Фильмы</a></li>
<li><a href="series.html">Сериалы</a></li>
<li><a href="library.html">Библиотека</a></li>
<li><a href="about.html">О нас</a></li>
</ul>
</div>
</div>
<nav class="nav-links">
<a href="movies.html">Фильмы</a>
<a href="series.html">Сериалы</a>
<a href="library.html">Библиотека</a>
<a href="about.html">О нас</a>
</nav>
</div>
<div class="content">
<h2>Просмотренные</h2>
</div>
<div class="movie-list">
<div class="movie-item">
<img src="img/movie-posters/marsianin.jpg">
<p>Марсианин (2015)</p>
</div>
<div class="movie-item">
<img src="img/movie-posters/brat.jpg">
<p>Брат (2009)</p>
</div>
</div>
<footer class="footer">
<div class="footer-info">
<p>Контакты: <span class="email">ebatyushka@mail.com</span>, <span class="phone">+7&nbsp;123&nbsp;456&nbsp;7890</span></p>
<p>Адрес: г. Москва, ул. Примерная, 1</p>
</div>
<div class="footer-social">
<a href="https://t.me/u_strawberry"><img src="img/telegram.png"></a>
</div>
</footer>
</body>
</html>

61
Labs/movies.html Normal file
View File

@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="img/icon.png"/>
<title>Фильмы</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="header-logo">
<a href="index.html">
<img src="img/icon.png" alt="Логотип">
</a>
<h1>Фильмы</h1>
</div>
<div class="nav-container">
<button class="menu-button">Меню</button>
<div class="nav-dropdown">
<ul class="features-menu">
<li><a href="movies.html">Фильмы</a></li>
<li><a href="series.html">Сериалы</a></li>
<li><a href="library.html">Библиотека</a></li>
<li><a href="about.html">О нас</a></li>
</ul>
</div>
</div>
<nav class="nav-links">
<a href="movies.html">Фильмы</a>
<a href="series.html">Сериалы</a>
<a href="library.html">Библиотека</a>
<a href="about.html">О нас</a>
</nav>
</div>
<div class="content">
<p>Здесь будут <em>фильмы</em></p>
</div>
<div class="movie-list">
<div class="movie-item">
<img src="img/movie-posters/marsianin.jpg">
<p>Марсианин (2015)</p>
</div>
<div class="movie-item">
<img src="img/movie-posters/brat.jpg">
<p>Брат (2009)</p>
</div>
</div>
<footer class="footer">
<div class="footer-info">
<p>Контакты: <span class="email">ebatyushka@mail.com</span>, <span class="phone">+7&nbsp;123&nbsp;456&nbsp;7890</span></p>
<p>Адрес: г. Москва, ул. Примерная, 1</p>
</div>
<div class="footer-social">
<a href="https://t.me/u_strawberry"><img src="img/telegram.png"></a>
</div>
</footer>
</body>
</html>

58
Labs/series.html Normal file
View File

@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="img/icon.png"/>
<title>Сериалы</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="header-logo">
<a href="index.html">
<img src="img/icon.png" alt="Логотип">
</a>
<h1>Сериалы</h1>
</div>
<div class="nav-container">
<button class="menu-button">Меню</button>
<div class="nav-dropdown">
<ul class="features-menu">
<li><a href="movies.html">Фильмы</a></li>
<li><a href="series.html">Сериалы</a></li>
<li><a href="library.html">Библиотека</a></li>
<li><a href="about.html">О нас</a></li>
</ul>
</div>
</div>
<nav class="nav-links">
<a href="movies.html">Фильмы</a>
<a href="series.html">Сериалы</a>
<a href="library.html">Библиотека</a>
<a href="about.html">О нас</a>
</nav>
</div>
<div class="content">
<p>Здесь будут <em>сериалы</em></p>
</div>
<div class="movie-list">
<div class="movie-item">
<img src="img/movie-posters/brba.jpg">
<p>Во все тяжкие (2008-2013)</p>
</div>
</div>
<footer class="footer">
<div class="footer-info">
<p>Контакты: <span class="email">ebatyushka@mail.com</span>, <span class="phone">+7&nbsp;123&nbsp;456&nbsp;7890</span></p>
<p>Адрес: г. Москва, ул. Примерная, 1</p>
</div>
<div class="footer-social">
<a href="https://t.me/u_strawberry"><img src="img/telegram.png"></a>
</div>
</footer>
</body>
</html>

211
Labs/style.css Normal file
View File

@@ -0,0 +1,211 @@
body {
background-color: #F2F2F7;
margin: 5px;
font-family: Arial, sans-serif;
/*overflow-x: hidden;*/
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #67A8C2;
color: #081c15;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
z-index: 10;
}
.header-logo {
display: flex;
align-items: center;
gap: 15px;
}
.header-logo img {
width: 50px;
height: auto;
}
/* Стили основного горизонтального меню */
.nav-links {
display: flex;
gap: 15px;
margin-right: 20px;
}
.nav-links a {
text-decoration: none;
color: #081c15;
font-weight: bold;
background: #ffffff;
padding: 8px 15px;
border-radius: 5px;
transition: 0.3s;
}
.nav-links a:hover {
background: #FF6A25;
}
/* Контейнер для навигационного меню */
.nav-container {
position: relative;
}
.features-menu {
padding-left: 0px;
margin: 10px 5px;
}
/* Выпадающее меню для мобильных устройств */
.nav-dropdown {
display: none;
flex-direction: column;
position: absolute;
top: 60px; /* Чуть ниже шапки */
right: 0px;
background-color: #67A8C2;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
width: 150px;
border-radius: 5px;
padding: 5px;
}
/* Изменение цвета при наведении в выпадающем меню */
.nav-dropdown a:hover {
background: #FF6A25;
}
.features-menu li {
display: inline;
position: relative;
}
.features-menu a {
padding: 5% 2%;
display: flex;
text-align: center;
text-decoration: none;
color: #081c15;
background: #ffffff;
border-radius: 5px;
border: 2px solid #000000;
gap: 1%;
}
/* Кнопка меню (бургер) */
.menu-button {
display: none;
cursor: pointer;
text-decoration: none;
color: #081c15;
font-weight: bold;
background: #ffffff;
padding: 8px 15px;
border-radius: 5px;
transition: 0.3s;
margin-right: 20px;
}
/* выпадающее меню при наведении или при фокусе внутри контейнера */
.nav-container:hover .nav-dropdown,
.nav-container:focus-within .nav-dropdown {
display: flex;
}
/* стили для списка фильмов и т.д. остаются без изменений */
.movie-list {
display: flex;
justify-content: left;
gap: 20px;
margin: 50px 50px;
}
.movie-item {
text-align: center;
}
.movie-item img {
width: 300px;
height: auto;
}
.content {
margin-top: 80px;
padding: 20px;
}
.footer {
position: relative;
width: 100%;
background-color: #081c15;
color: #fff;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
padding: 20px;
}
.footer-info,
.footer-social {
flex: 1;
min-width: 250px;
margin: 10px;
white-space:inherit;
}
.footer-social img {
width: 2em;
}
.footer-social a {
margin-right: 10px;
}
/* планшет (от 701px до 960px) */
@media only screen and (min-width: 701px) and (max-width: 960px) {
.header {
font-size: 0.8em;
}
.nav-links {
padding: 0.7em 0.5em;
}
}
/* мобильное устройство (ширина до 700px) */
@media only screen and (max-width: 700px) {
.nav-links {
display: none;
}
.menu-button {
display: flex;
}
.movie-list {
flex-direction: column;
justify-content: center;
}
.movie-item img {
width: 90%;
}
.footer {
position: relative;
text-align: center;
padding: 0px;
}
.header {
font-size: 0.7em;
}
}