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

428 lines
28 KiB
HTML
Raw Permalink 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/film.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 stil2" 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>