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

396 lines
27 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/index.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">
<div class="col-md-4">
<a href="#" class="navbar-brand d-none d-xl-block"><img src="img/2.png"></a>
</div>
<div class="col-md-12 col-xl-6 col-sm-12">
<p class="lead stil">Вперед, к невероятным приключениям! Добро пожаловать в мир кино вместе с нами!</p>
<p class="lead ots">Сейчас в кино</p>
<div class="container back_2 mb-3">
<div class="row">
<div class="col-12">
<div class="d-flex justify-content-start colu">
<div class="card 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>
<div class="card 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>
<div class="card 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>
<div class="card 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>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="d-flex justify-content-start colu">
<div class="card 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>
<div class="card 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>
<div class="card 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>
<div class="card 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>
</div>
</div>
</div>
</div>
</div>
<hr>
<p class="lead">Любимые Фильмы и сериалы</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>
<hr>
<p class="lead" style="margin-top: 30px;">Сейчас смотрят</p>
<div class="container back_ob mb-4">
<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>