Lobashov_Ivan_PIBD-21_IP/Lab3/serial.html
2024-01-10 22:39:31 +04:00

428 lines
28 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Киносмешарики</title>
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="css/serial.css" rel="stylesheet">
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg sticky-top">
<div class="container">
<a href="index.html" class="navbar-brand"><img class="brand" src="img/Logo.png"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav me-auto mt-xxl-5">
<li class="nav-item">
<a href="tv.html" class="nav-link px-4 mx-3">ТВ-каналы</a>
</li>
<li class="nav-item">
<a href="film.html" class="nav-link px-4 mx-3">Фильмы</a>
</li>
<li class="nav-item">
<a href="serial.html" class="nav-link px-4 mx-3">Сериалы</a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse navv" id="navbarResponsive">
<ul class="navbar-nav mb-xxl-3">
<!-- <li class="nav-item">
<a href="#" class="nav-link px-3 mx-2">
<img src="img/" alt="VK">
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link px-3 mx-2">
<img src="img/" alt="Tg">
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link px-3 mx-2">
<img src="img/" alt="Inst">
</a>
</li> -->
<li class="nav-item">
<a href="reg.html" class="nav-link px-3 mx-2">Регистрация</a>
</li>
<li class="nav-item">
<a href="in.html" class="nav-link px-3 mx-2">Вход</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container back">
<div class="row">
<p class="lead stil">КиноСмешарики | Сериалы</p>
<p class="lead stil2">Сериалы ➪</p>
<div class="col-12">
<img class="po" src="img/6.png" alt="Лого">
<div class="search-container">
<form id="search-form" action="/search" method="get">
<input type="text" id="search-input" name="query" placeholder="Название сериала, жанр или имя актёра" autocomplete="off">
</form>
</div>
<div class="line"></div>
</div>
<p class="lead" style="margin-left: 50px;">Сериалы по жанрам</p>
<div class="justify-content-start text-start w-100 my-5 filt_films" style="margin-left: 35px; margin-top: 5px !important;">
<a href="#" class="btn btn-tag btn-rounded " data-mdb-close="true">
<div class="" style="margin-top: 65px;">Комедии</div>
</a>
<a href="#" class="btn btn-tag btn-rounded" data-mdb-close="true">
<div class="" style="margin-top: 55px;">Мело-драмы</div>
</a>
<a href="#" class="btn btn-tag btn-rounded" data-mdb-close="true">
<div class="" style="margin-top: 55px;">Детек тивы</div>
</a>
<a href="#" class="btn btn-tag btn-rounded" data-mdb-close="true">
<div class="" style="margin-top: 65px;">Ужасы</div>
</a>
<a href="#" class="btn btn-tag btn-rounded" data-mdb-close="true">
<div class="" style="margin-top: 65px;">Боевики</div>
</a>
</div>
<p class="lead" style="margin-left: 50px;">Сейчас смотрят</p>
<p class="lead" style="margin-left: 50px; font-size: 18px !important; font-family: Imbue, sans-serif !important; font-weight: normal !important;">Самые популярные сериалы за последние сутки</p>
<div class="container back_ob mb-3">
<div class="row">
<div class="col-12">
<div class="d-flex justify-content-start colu2">
<a href="#" class="dsds" style="text-decoration: none;">
<div class="card" style="transition: transform 0.3s; width: 148px; height: 231px; background: none; border: none; margin-top: 20px; margin-left: 25px;">
<img src="img/film.png" class="card-img-top" alt="...">
<div class="card-body" >
<img src="img/16+.png" class="img-voz" style="position: relative; margin-left: -5px; margin-top: -20px;" alt="...">
<p class="card-text" style="font-size: 8px; color: #797979; width: 103px; margin-left: 15px; margin-top: -30px; position: relative;">Экшн, приключения, комедия</p>
<h6 class="card-title" style="font-size: 14px; font-weight: normal; color: white; width: 148px; position: relative; margin-left: -5px; margin-top: -15px;">Неудержимые 4</h6>
</div>
</div>
</a>
<a href="#" class="dsds" style="text-decoration: none;">
<div class="card" style="transition: transform 0.3s; width: 148px; height: 231px; background: none; border: none; margin-top: 20px; margin-left: 25px;">
<img src="img/film.png" class="card-img-top" alt="...">
<div class="card-body" >
<img src="img/16+.png" class="img-voz" style="position: relative; margin-left: -5px; margin-top: -20px;" alt="...">
<p class="card-text" style="font-size: 8px; color: #797979; width: 103px; margin-left: 15px; margin-top: -30px; position: relative;">Экшн, приключения, комедия</p>
<h6 class="card-title" style="font-size: 14px; font-weight: normal; color: white; width: 148px; position: relative; margin-left: -5px; margin-top: -15px;">Неудержимые 4</h6>
</div>
</div>
</a>
<a href="#" class="dsds" style="text-decoration: none;">
<div class="card" style="transition: transform 0.3s; width: 148px; height: 231px; background: none; border: none; margin-top: 20px; margin-left: 25px;">
<img src="img/film.png" class="card-img-top" alt="...">
<div class="card-body" >
<img src="img/16+.png" class="img-voz" style="position: relative; margin-left: -5px; margin-top: -20px;" alt="...">
<p class="card-text" style="font-size: 8px; color: #797979; width: 103px; margin-left: 15px; margin-top: -30px; position: relative;">Экшн, приключения, комедия</p>
<h6 class="card-title" style="font-size: 14px; font-weight: normal; color: white; width: 148px; position: relative; margin-left: -5px; margin-top: -15px;">Неудержимые 4</h6>
</div>
</div>
</a>
<a href="#" class="dsds" style="text-decoration: none;">
<div class="card" style="transition: transform 0.3s; width: 148px; height: 231px; background: none; border: none; margin-top: 20px; margin-left: 25px;">
<img src="img/film.png" class="card-img-top" alt="...">
<div class="card-body" >
<img src="img/16+.png" class="img-voz" style="position: relative; margin-left: -5px; margin-top: -20px;" alt="...">
<p class="card-text" style="font-size: 8px; color: #797979; width: 103px; margin-left: 15px; margin-top: -30px; position: relative;">Экшн, приключения, комедия</p>
<h6 class="card-title" style="font-size: 14px; font-weight: normal; color: white; width: 148px; position: relative; margin-left: -5px; margin-top: -15px;">Неудержимые 4</h6>
</div>
</div>
</a>
<a href="#" class="dsds" style="text-decoration: none;">
<div class="card" style="transition: transform 0.3s; width: 148px; height: 231px; background: none; border: none; margin-top: 20px; margin-left: 25px;">
<img src="img/film.png" class="card-img-top" alt="...">
<div class="card-body" >
<img src="img/16+.png" class="img-voz" style="position: relative; margin-left: -5px; margin-top: -20px;" alt="...">
<p class="card-text" style="font-size: 8px; color: #797979; width: 103px; margin-left: 15px; margin-top: -30px; position: relative;">Экшн, приключения, комедия</p>
<h6 class="card-title" style="font-size: 14px; font-weight: normal; color: white; width: 148px; position: relative; margin-left: -5px; margin-top: -15px;">Неудержимые 4</h6>
</div>
</div>
</a>
<a href="#" class="dsds d-none d-xl-block film6" style="text-decoration: none;">
<div class="card" style="transition: transform 0.3s; width: 148px; height: 231px; background: none; border: none; margin-top: 20px; margin-left: 25px;">
<img src="img/film.png" class="card-img-top" alt="...">
<div class="card-body" >
<img src="img/16+.png" class="img-voz" style="position: relative; margin-left: -5px; margin-top: -20px;" alt="...">
<p class="card-text" style="font-size: 8px; color: #797979; width: 103px; margin-left: 15px; margin-top: -30px; position: relative;">Экшн, приключения, комедия</p>
<h6 class="card-title" style="font-size: 14px; font-weight: normal; color: white; width: 148px; position: relative; margin-left: -5px; margin-top: -15px;">Неудержимые 4</h6>
</div>
</div>
</a>
<a href="#" class="dsds d-none d-xl-block film7" style="text-decoration: none;">
<div class="card" style="transition: transform 0.3s; width: 148px; height: 231px; background: none; border: none; margin-top: 20px; margin-left: 25px; ">
<img src="img/film.png" class="card-img-top" alt="...">
<div class="card-body" >
<img src="img/16+.png" class="img-voz" style="position: relative; margin-left: -5px; margin-top: -20px;" alt="...">
<p class="card-text" style="font-size: 8px; color: #797979; width: 103px; margin-left: 15px; margin-top: -30px; position: relative; ">Экшн, приключения, комедия</p>
<h6 class="card-title" style="font-size: 14px; font-weight: normal; color: white; width: 148px; position: relative; margin-left: -5px; margin-top: -15px;">Неудержимые 4</h6>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<p class="lead" style="margin-left: 50px;">Лучшие российские сериалы</p>
<p class="lead" style="margin-left: 50px; font-size: 18px !important; font-family: Imbue, sans-serif !important; font-weight: normal !important;">Сериалы, которые можно пересматривать постоянно</p>
<div class="container back_ob mb-3">
<div class="row">
<div class="col-12">
<div class="d-flex justify-content-start colu2">
<a href="#" class="dsds" style="text-decoration: none;">
<div class="card" style="transition: transform 0.3s; width: 148px; height: 231px; background: none; border: none; margin-top: 20px; margin-left: 25px;">
<img src="img/film.png" class="card-img-top" alt="...">
<div class="card-body" >
<img src="img/16+.png" class="img-voz" style="position: relative; margin-left: -5px; margin-top: -20px;" alt="...">
<p class="card-text" style="font-size: 8px; color: #797979; width: 103px; margin-left: 15px; margin-top: -30px; position: relative;">Экшн, приключения, комедия</p>
<h6 class="card-title" style="font-size: 14px; font-weight: normal; color: white; width: 148px; position: relative; margin-left: -5px; margin-top: -15px;">Неудержимые 4</h6>
</div>
</div>
</a>
<a href="#" class="dsds" style="text-decoration: none;">
<div class="card" style="transition: transform 0.3s; width: 148px; height: 231px; background: none; border: none; margin-top: 20px; margin-left: 25px;">
<img src="img/film.png" class="card-img-top" alt="...">
<div class="card-body" >
<img src="img/16+.png" class="img-voz" style="position: relative; margin-left: -5px; margin-top: -20px;" alt="...">
<p class="card-text" style="font-size: 8px; color: #797979; width: 103px; margin-left: 15px; margin-top: -30px; position: relative;">Экшн, приключения, комедия</p>
<h6 class="card-title" style="font-size: 14px; font-weight: normal; color: white; width: 148px; position: relative; margin-left: -5px; margin-top: -15px;">Неудержимые 4</h6>
</div>
</div>
</a>
<a href="#" class="dsds" style="text-decoration: none;">
<div class="card" style="transition: transform 0.3s; width: 148px; height: 231px; background: none; border: none; margin-top: 20px; margin-left: 25px;">
<img src="img/film.png" class="card-img-top" alt="...">
<div class="card-body" >
<img src="img/16+.png" class="img-voz" style="position: relative; margin-left: -5px; margin-top: -20px;" alt="...">
<p class="card-text" style="font-size: 8px; color: #797979; width: 103px; margin-left: 15px; margin-top: -30px; position: relative;">Экшн, приключения, комедия</p>
<h6 class="card-title" style="font-size: 14px; font-weight: normal; color: white; width: 148px; position: relative; margin-left: -5px; margin-top: -15px;">Неудержимые 4</h6>
</div>
</div>
</a>
<a href="#" class="dsds" style="text-decoration: none;">
<div class="card" style="transition: transform 0.3s; width: 148px; height: 231px; background: none; border: none; margin-top: 20px; margin-left: 25px;">
<img src="img/film.png" class="card-img-top" alt="...">
<div class="card-body" >
<img src="img/16+.png" class="img-voz" style="position: relative; margin-left: -5px; margin-top: -20px;" alt="...">
<p class="card-text" style="font-size: 8px; color: #797979; width: 103px; margin-left: 15px; margin-top: -30px; position: relative;">Экшн, приключения, комедия</p>
<h6 class="card-title" style="font-size: 14px; font-weight: normal; color: white; width: 148px; position: relative; margin-left: -5px; margin-top: -15px;">Неудержимые 4</h6>
</div>
</div>
</a>
<a href="#" class="dsds" style="text-decoration: none;">
<div class="card" style="transition: transform 0.3s; width: 148px; height: 231px; background: none; border: none; margin-top: 20px; margin-left: 25px;">
<img src="img/film.png" class="card-img-top" alt="...">
<div class="card-body" >
<img src="img/16+.png" class="img-voz" style="position: relative; margin-left: -5px; margin-top: -20px;" alt="...">
<p class="card-text" style="font-size: 8px; color: #797979; width: 103px; margin-left: 15px; margin-top: -30px; position: relative;">Экшн, приключения, комедия</p>
<h6 class="card-title" style="font-size: 14px; font-weight: normal; color: white; width: 148px; position: relative; margin-left: -5px; margin-top: -15px;">Неудержимые 4</h6>
</div>
</div>
</a>
<a href="#" class="dsds d-none d-xl-block film6" style="text-decoration: none;">
<div class="card" style="transition: transform 0.3s; width: 148px; height: 231px; background: none; border: none; margin-top: 20px; margin-left: 25px;">
<img src="img/film.png" class="card-img-top" alt="...">
<div class="card-body" >
<img src="img/16+.png" class="img-voz" style="position: relative; margin-left: -5px; margin-top: -20px;" alt="...">
<p class="card-text" style="font-size: 8px; color: #797979; width: 103px; margin-left: 15px; margin-top: -30px; position: relative;">Экшн, приключения, комедия</p>
<h6 class="card-title" style="font-size: 14px; font-weight: normal; color: white; width: 148px; position: relative; margin-left: -5px; margin-top: -15px;">Неудержимые 4</h6>
</div>
</div>
</a>
<a href="#" class="dsds d-none d-xl-block film7" style="text-decoration: none;">
<div class="card" style="transition: transform 0.3s; width: 148px; height: 231px; background: none; border: none; margin-top: 20px; margin-left: 25px; ">
<img src="img/film.png" class="card-img-top" alt="...">
<div class="card-body" >
<img src="img/16+.png" class="img-voz" style="position: relative; margin-left: -5px; margin-top: -20px;" alt="...">
<p class="card-text" style="font-size: 8px; color: #797979; width: 103px; margin-left: 15px; margin-top: -30px; position: relative; ">Экшн, приключения, комедия</p>
<h6 class="card-title" style="font-size: 14px; font-weight: normal; color: white; width: 148px; position: relative; margin-left: -5px; margin-top: -15px;">Неудержимые 4</h6>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<p class="lead" style="margin-left: 50px;">Новые серии</p>
<p class="lead" style="margin-left: 50px; font-size: 18px !important; font-family: Imbue, sans-serif !important; font-weight: normal !important;">Смотрите первыми новые эпизоды ваших любимых сериалов</p>
<div class="container back_ob mb-3">
<div class="row">
<div class="col-12">
<div class="d-flex justify-content-start colu2">
<a href="#" class="dsds" style="text-decoration: none;">
<div class="card" style="transition: transform 0.3s; width: 148px; height: 231px; background: none; border: none; margin-top: 20px; margin-left: 25px;">
<img src="img/film.png" class="card-img-top" alt="...">
<div class="card-body" >
<img src="img/16+.png" class="img-voz" style="position: relative; margin-left: -5px; margin-top: -20px;" alt="...">
<p class="card-text" style="font-size: 8px; color: #797979; width: 103px; margin-left: 15px; margin-top: -30px; position: relative;">Экшн, приключения, комедия</p>
<h6 class="card-title" style="font-size: 14px; font-weight: normal; color: white; width: 148px; position: relative; margin-left: -5px; margin-top: -15px;">Неудержимые 4</h6>
</div>
</div>
</a>
<a href="#" class="dsds" style="text-decoration: none;">
<div class="card" style="transition: transform 0.3s; width: 148px; height: 231px; background: none; border: none; margin-top: 20px; margin-left: 25px;">
<img src="img/film.png" class="card-img-top" alt="...">
<div class="card-body" >
<img src="img/16+.png" class="img-voz" style="position: relative; margin-left: -5px; margin-top: -20px;" alt="...">
<p class="card-text" style="font-size: 8px; color: #797979; width: 103px; margin-left: 15px; margin-top: -30px; position: relative;">Экшн, приключения, комедия</p>
<h6 class="card-title" style="font-size: 14px; font-weight: normal; color: white; width: 148px; position: relative; margin-left: -5px; margin-top: -15px;">Неудержимые 4</h6>
</div>
</div>
</a>
<a href="#" class="dsds" style="text-decoration: none;">
<div class="card" style="transition: transform 0.3s; width: 148px; height: 231px; background: none; border: none; margin-top: 20px; margin-left: 25px;">
<img src="img/film.png" class="card-img-top" alt="...">
<div class="card-body" >
<img src="img/16+.png" class="img-voz" style="position: relative; margin-left: -5px; margin-top: -20px;" alt="...">
<p class="card-text" style="font-size: 8px; color: #797979; width: 103px; margin-left: 15px; margin-top: -30px; position: relative;">Экшн, приключения, комедия</p>
<h6 class="card-title" style="font-size: 14px; font-weight: normal; color: white; width: 148px; position: relative; margin-left: -5px; margin-top: -15px;">Неудержимые 4</h6>
</div>
</div>
</a>
<a href="#" class="dsds" style="text-decoration: none;">
<div class="card" style="transition: transform 0.3s; width: 148px; height: 231px; background: none; border: none; margin-top: 20px; margin-left: 25px;">
<img src="img/film.png" class="card-img-top" alt="...">
<div class="card-body" >
<img src="img/16+.png" class="img-voz" style="position: relative; margin-left: -5px; margin-top: -20px;" alt="...">
<p class="card-text" style="font-size: 8px; color: #797979; width: 103px; margin-left: 15px; margin-top: -30px; position: relative;">Экшн, приключения, комедия</p>
<h6 class="card-title" style="font-size: 14px; font-weight: normal; color: white; width: 148px; position: relative; margin-left: -5px; margin-top: -15px;">Неудержимые 4</h6>
</div>
</div>
</a>
<a href="#" class="dsds" style="text-decoration: none;">
<div class="card" style="transition: transform 0.3s; width: 148px; height: 231px; background: none; border: none; margin-top: 20px; margin-left: 25px;">
<img src="img/film.png" class="card-img-top" alt="...">
<div class="card-body" >
<img src="img/16+.png" class="img-voz" style="position: relative; margin-left: -5px; margin-top: -20px;" alt="...">
<p class="card-text" style="font-size: 8px; color: #797979; width: 103px; margin-left: 15px; margin-top: -30px; position: relative;">Экшн, приключения, комедия</p>
<h6 class="card-title" style="font-size: 14px; font-weight: normal; color: white; width: 148px; position: relative; margin-left: -5px; margin-top: -15px;">Неудержимые 4</h6>
</div>
</div>
</a>
<a href="#" class="dsds d-none d-xl-block film6" style="text-decoration: none;">
<div class="card" style="transition: transform 0.3s; width: 148px; height: 231px; background: none; border: none; margin-top: 20px; margin-left: 25px;">
<img src="img/film.png" class="card-img-top" alt="...">
<div class="card-body" >
<img src="img/16+.png" class="img-voz" style="position: relative; margin-left: -5px; margin-top: -20px;" alt="...">
<p class="card-text" style="font-size: 8px; color: #797979; width: 103px; margin-left: 15px; margin-top: -30px; position: relative;">Экшн, приключения, комедия</p>
<h6 class="card-title" style="font-size: 14px; font-weight: normal; color: white; width: 148px; position: relative; margin-left: -5px; margin-top: -15px;">Неудержимые 4</h6>
</div>
</div>
</a>
<a href="#" class="dsds d-none d-xl-block film7" style="text-decoration: none;">
<div class="card" style="transition: transform 0.3s; width: 148px; height: 231px; background: none; border: none; margin-top: 20px; margin-left: 25px; ">
<img src="img/film.png" class="card-img-top" alt="...">
<div class="card-body" >
<img src="img/16+.png" class="img-voz" style="position: relative; margin-left: -5px; margin-top: -20px;" alt="...">
<p class="card-text" style="font-size: 8px; color: #797979; width: 103px; margin-left: 15px; margin-top: -30px; position: relative; ">Экшн, приключения, комедия</p>
<h6 class="card-title" style="font-size: 14px; font-weight: normal; color: white; width: 148px; position: relative; margin-left: -5px; margin-top: -15px;">Неудержимые 4</h6>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="text-center text_">
<section class="">
<div class="container text-center text-md-start mt-4 pt-5">
<a href="#" class="navbar-brand"><img class="brand" src="img/Logo.png"></a>
<div class="row mt-3">
<div class="col-md-3 col-lg-4 col-xl-2 mx-auto mb-4">
<h6 class="text-uppercase fw-bold mb-4 text_1"> Тех. поддержка</h6>
<p>
Ответим на любой ваш вопрос!
</p>
<p>
<a href="#!" class="text-reset">vano00189@mail.ru</a>
</p>
</div>
<div class="col-md-3 col-lg-3 col-xl-2 mx-auto mb-4">
<h6 class="text-uppercase fw-bold mb-4 text_1">Для гостей </h6>
<p>
<a href="#!" class="text-reset">Акции и скидки</a>
</p>
<p>
<a href="#!" class="text-reset">Подарочные карты</a>
</p>
<p>
<a href="#!" class="text-reset">Пользовательское соглашение</a>
</p>
</div>
<div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
<h6 class="text-uppercase fw-bold mb-4 text_1" >О нас</h6>
<p>
<a href="#!" class="text-reset">Контакты</a>
</p>
<p>
<a href="#!" class="text-reset">Помощь</a>
</p>
<p>
<a href="#!" class="text-reset">Партнерам</a>
</p>
</div>
<div class="col-md-3 col-lg-3 col-xl-2 mx-auto mb-4 ">
<h6 class="text-uppercase fw-bold mb-4 text_1">Мы в соц. сетях</h6>
<div class="social-icons">
<a href="#" class="text-reset me-3"><img src="img/vk.png" alt="vk" class="rounded border border-dark"></a>
<a href="#" class="text-reset me-3"><img src="img/tg.png" alt="tg" class="rounded border border-dark"></a>
<a href="#" class="text-reset"><img src="img/inst.png" alt="Inst" class="rounded border border-dark"></a>
</div>
</div>
<div class="col-md-5 col-lg-3 col-xl-3 mx-auto mb-5 mt_">
<h6 class="text-uppercase fw-bold mb-4" ><a href="#" class="navbar-brand"><img class="brand" src="img/icon22.png"></a></h6>
<h6 class="text-uppercase fw-bold mb-0 "><a href="#" class="navbar-brand"><img src="img/google.png"></a></h6>
<h6 class="text-uppercase fw-bold mb-0 mt_1"><a href="#" class="navbar-brand"><img src="img/Appst.png"></a></h6>
</div>
</div>
</div>
</section>
</footer>
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
</body>
</html>