Lobashov_Ivan_PIBD-21_IP/Lab2/tv.html

446 lines
29 KiB
HTML
Raw 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/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>