Lobashov_Ivan_PIBD-21_IP/Lab3/serial.html

428 lines
28 KiB
HTML
Raw Permalink Normal View History

2024-01-10 22:39:31 +04:00
<!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>