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

446 lines
29 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/tv.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="justify-content-start text-start w-100 my-5 filt-tv" style="margin-left: 35px; margin-top: 5px !important;">
<a href="#" class="btn btn-tag btn-rounded" data-mdb-close="true">
Все</a>
<a href="#" class="btn btn-tag btn-rounded" data-mdb-close="true">
• HD</a>
<a href="#" class="btn btn-tag btn-rounded" data-mdb-close="true">
• Детские</a>
<a href="#" class="btn btn-tag btn-rounded" data-mdb-close="true">
• Эфирные</a>
<a href="#" class="btn btn-tag btn-rounded" data-mdb-close="true">
• Развлекательные</a>
<a href="#" class="btn btn-tag btn-rounded" data-mdb-close="true">
• Музыкальные</a>
<a href="#" class="btn btn-tag btn-rounded" data-mdb-close="true">
• Взрослые</a>
<a href="#" class="btn btn-tag btn-rounded" data-mdb-close="true">
• Спортивные</a>
<a href="#" class="btn btn-tag btn-rounded" data-mdb-close="true">
• Познавательные</a>
</div>
<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: 206px; height: 152px; background: none; border: none; margin-top: 30px; margin-left: 25px;">
<img src="img/tv.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: -25px;" alt="...">
<p class="card-text" style="font-size: 8px; color: white; width: 103px; margin-left: 15px; margin-top: -30px; position: relative;">23:15 </p>
<p class="card-text" style="font-size: 8px; color: #797979; width: 103px; margin-left: 35px; margin-top: -28px; 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: -5px;">MTV</h6>
</div>
</div>
</a>
<a href="#" class="dsds" style="text-decoration: none;">
<div class="card" style="transition: transform 0.3s; width: 206px; height: 152px; background: none; border: none; margin-top: 30px; margin-left: 25px;">
<img src="img/tv.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: -25px;" alt="...">
<p class="card-text" style="font-size: 8px; color: white; width: 103px; margin-left: 15px; margin-top: -30px; position: relative;">23:15 </p>
<p class="card-text" style="font-size: 8px; color: #797979; width: 103px; margin-left: 35px; margin-top: -28px; 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: -5px;">MTV</h6>
</div>
</div>
</a>
<a href="#" class="dsds" style="text-decoration: none;">
<div class="card" style="transition: transform 0.3s; width: 206px; height: 152px; background: none; border: none; margin-top: 30px; margin-left: 25px;">
<img src="img/tv.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: -25px;" alt="...">
<p class="card-text" style="font-size: 8px; color: white; width: 103px; margin-left: 15px; margin-top: -30px; position: relative;">23:15 </p>
<p class="card-text" style="font-size: 8px; color: #797979; width: 103px; margin-left: 35px; margin-top: -28px; 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: -5px;">MTV</h6>
</div>
</div>
</a>
<a href="#" class="dsds" style="text-decoration: none;">
<div class="card" style="transition: transform 0.3s; width: 206px; height: 152px; background: none; border: none; margin-top: 30px; margin-left: 25px;">
<img src="img/tv.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: -25px;" alt="...">
<p class="card-text" style="font-size: 8px; color: white; width: 103px; margin-left: 15px; margin-top: -30px; position: relative;">23:15 </p>
<p class="card-text" style="font-size: 8px; color: #797979; width: 103px; margin-left: 35px; margin-top: -28px; 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: -5px;">MTV</h6>
</div>
</div>
</a>
<a href="#" class="dsds" style="text-decoration: none;">
<div class="card" style="transition: transform 0.3s; width: 206px; height: 152px; background: none; border: none; margin-top: 30px; margin-left: 25px;">
<img src="img/tv.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: -25px;" alt="...">
<p class="card-text" style="font-size: 8px; color: white; width: 103px; margin-left: 15px; margin-top: -30px; position: relative;">23:15 </p>
<p class="card-text" style="font-size: 8px; color: #797979; width: 103px; margin-left: 35px; margin-top: -28px; 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: -5px;">MTV</h6>
</div>
</div>
</a>
<a href="#" class="dsds" style="text-decoration: none;">
<div class="card" style="transition: transform 0.3s; width: 206px; height: 152px; background: none; border: none; margin-top: 30px; margin-left: 25px;">
<img src="img/tv.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: -25px;" alt="...">
<p class="card-text" style="font-size: 8px; color: white; width: 103px; margin-left: 15px; margin-top: -30px; position: relative;">23:15 </p>
<p class="card-text" style="font-size: 8px; color: #797979; width: 103px; margin-left: 35px; margin-top: -28px; 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: -5px;">MTV</h6>
</div>
</div>
</a>
<a href="#" class="dsds" style="text-decoration: none;">
<div class="card" style="transition: transform 0.3s; width: 206px; height: 152px; background: none; border: none; margin-top: 30px; margin-left: 25px;">
<img src="img/tv.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: -25px;" alt="...">
<p class="card-text" style="font-size: 8px; color: white; width: 103px; margin-left: 15px; margin-top: -30px; position: relative;">23:15 </p>
<p class="card-text" style="font-size: 8px; color: #797979; width: 103px; margin-left: 35px; margin-top: -28px; 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: -5px;">MTV</h6>
</div>
</div>
</a>
<a href="#" class="dsds" style="text-decoration: none;">
<div class="card" style="transition: transform 0.3s; width: 206px; height: 152px; background: none; border: none; margin-top: 30px; margin-left: 25px;">
<img src="img/tv.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: -25px;" alt="...">
<p class="card-text" style="font-size: 8px; color: white; width: 103px; margin-left: 15px; margin-top: -30px; position: relative;">23:15 </p>
<p class="card-text" style="font-size: 8px; color: #797979; width: 103px; margin-left: 35px; margin-top: -28px; 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: -5px;">MTV</h6>
</div>
</div>
</a>
<a href="#" class="dsds" style="text-decoration: none;">
<div class="card" style="transition: transform 0.3s; width: 206px; height: 152px; background: none; border: none; margin-top: 30px; margin-left: 25px;">
<img src="img/tv.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: -25px;" alt="...">
<p class="card-text" style="font-size: 8px; color: white; width: 103px; margin-left: 15px; margin-top: -30px; position: relative;">23:15 </p>
<p class="card-text" style="font-size: 8px; color: #797979; width: 103px; margin-left: 35px; margin-top: -28px; 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: -5px;">MTV</h6>
</div>
</div>
</a>
<a href="#" class="dsds" style="text-decoration: none;">
<div class="card" style="transition: transform 0.3s; width: 206px; height: 152px; background: none; border: none; margin-top: 30px; margin-left: 25px;">
<img src="img/tv.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: -25px;" alt="...">
<p class="card-text" style="font-size: 8px; color: white; width: 103px; margin-left: 15px; margin-top: -30px; position: relative;">23:15 </p>
<p class="card-text" style="font-size: 8px; color: #797979; width: 103px; margin-left: 35px; margin-top: -28px; 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: -5px;">MTV</h6>
</div>
</div>
</a>
<a href="#" class="dsds" style="text-decoration: none;">
<div class="card" style="transition: transform 0.3s; width: 206px; height: 152px; background: none; border: none; margin-top: 30px; margin-left: 25px;">
<img src="img/tv.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: -25px;" alt="...">
<p class="card-text" style="font-size: 8px; color: white; width: 103px; margin-left: 15px; margin-top: -30px; position: relative;">23:15 </p>
<p class="card-text" style="font-size: 8px; color: #797979; width: 103px; margin-left: 35px; margin-top: -28px; 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: -5px;">MTV</h6>
</div>
</div>
</a>
<a href="#" class="dsds" style="text-decoration: none;">
<div class="card" style="transition: transform 0.3s; width: 206px; height: 152px; background: none; border: none; margin-top: 30px; margin-left: 25px;">
<img src="img/tv.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: -25px;" alt="...">
<p class="card-text" style="font-size: 8px; color: white; width: 103px; margin-left: 15px; margin-top: -30px; position: relative;">23:15 </p>
<p class="card-text" style="font-size: 8px; color: #797979; width: 103px; margin-left: 35px; margin-top: -28px; 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: -5px;">MTV</h6>
</div>
</div>
</a>
<a href="#" class="dsds" style="text-decoration: none;">
<div class="card" style="transition: transform 0.3s; width: 206px; height: 152px; background: none; border: none; margin-top: 30px; margin-left: 25px;">
<img src="img/tv.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: -25px;" alt="...">
<p class="card-text" style="font-size: 8px; color: white; width: 103px; margin-left: 15px; margin-top: -30px; position: relative;">23:15 </p>
<p class="card-text" style="font-size: 8px; color: #797979; width: 103px; margin-left: 35px; margin-top: -28px; 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: -5px;">MTV</h6>
</div>
</div>
</a>
<a href="#" class="dsds" style="text-decoration: none;">
<div class="card" style="transition: transform 0.3s; width: 206px; height: 152px; background: none; border: none; margin-top: 30px; margin-left: 25px;">
<img src="img/tv.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: -25px;" alt="...">
<p class="card-text" style="font-size: 8px; color: white; width: 103px; margin-left: 15px; margin-top: -30px; position: relative;">23:15 </p>
<p class="card-text" style="font-size: 8px; color: #797979; width: 103px; margin-left: 35px; margin-top: -28px; 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: -5px;">MTV</h6>
</div>
</div>
</a>
<a href="#" class="dsds" style="text-decoration: none;">
<div class="card" style="transition: transform 0.3s; width: 206px; height: 152px; background: none; border: none; margin-top: 30px; margin-left: 25px;">
<img src="img/tv.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: -25px;" alt="...">
<p class="card-text" style="font-size: 8px; color: white; width: 103px; margin-left: 15px; margin-top: -30px; position: relative;">23:15 </p>
<p class="card-text" style="font-size: 8px; color: #797979; width: 103px; margin-left: 35px; margin-top: -28px; 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: -5px;">MTV</h6>
</div>
</div>
</a>
<a href="#" class="dsds" style="text-decoration: none;">
<div class="card" style="transition: transform 0.3s; width: 206px; height: 152px; background: none; border: none; margin-top: 30px; margin-left: 25px;">
<img src="img/tv.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: -25px;" alt="...">
<p class="card-text" style="font-size: 8px; color: white; width: 103px; margin-left: 15px; margin-top: -30px; position: relative;">23:15 </p>
<p class="card-text" style="font-size: 8px; color: #797979; width: 103px; margin-left: 35px; margin-top: -28px; 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: -5px;">MTV</h6>
</div>
</div>
</a>
<a href="#" class="dsds" style="text-decoration: none;">
<div class="card" style="transition: transform 0.3s; width: 206px; height: 152px; background: none; border: none; margin-top: 30px; margin-left: 25px;">
<img src="img/tv.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: -25px;" alt="...">
<p class="card-text" style="font-size: 8px; color: white; width: 103px; margin-left: 15px; margin-top: -30px; position: relative;">23:15 </p>
<p class="card-text" style="font-size: 8px; color: #797979; width: 103px; margin-left: 35px; margin-top: -28px; 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: -5px;">MTV</h6>
</div>
</div>
</a>
<a href="#" class="dsds" style="text-decoration: none;">
<div class="card" style="transition: transform 0.3s; width: 206px; height: 152px; background: none; border: none; margin-top: 30px; margin-left: 25px;">
<img src="img/tv.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: -25px;" alt="...">
<p class="card-text" style="font-size: 8px; color: white; width: 103px; margin-left: 15px; margin-top: -30px; position: relative;">23:15 </p>
<p class="card-text" style="font-size: 8px; color: #797979; width: 103px; margin-left: 35px; margin-top: -28px; 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: -5px;">MTV</h6>
</div>
</div>
</a>
<a href="#" class="dsds" style="text-decoration: none;">
<div class="card card-" style="transition: transform 0.3s; width: 206px; height: 152px; background: none; border: none; margin-top: 30px; margin-left: 25px;">
<img src="img/tv.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: -25px;" alt="...">
<p class="card-text" style="font-size: 8px; color: white; width: 103px; margin-left: 15px; margin-top: -30px; position: relative;">23:15 </p>
<p class="card-text" style="font-size: 8px; color: #797979; width: 103px; margin-left: 35px; margin-top: -28px; 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: -5px;">MTV</h6>
</div>
</div>
</a>
<a href="#" class="dsds" style="text-decoration: none;">
<div class="card card-" style="transition: transform 0.3s; width: 206px; height: 152px; background: none; border: none; margin-top: 30px; margin-left: 25px;">
<img src="img/tv.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: -25px;" alt="...">
<p class="card-text" style="font-size: 8px; color: white; width: 103px; margin-left: 15px; margin-top: -30px; position: relative;">23:15 </p>
<p class="card-text" style="font-size: 8px; color: #797979; width: 103px; margin-left: 35px; margin-top: -28px; 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: -5px;">MTV</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>