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

287 lines
14 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/profil.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>
<section>
<div class="row">
<div class="col-lg-4">
<div class="card mb-4">
<div class="card-body text-center">
<img src="img/photo.jpg" alt="avatar"
class="rounded-circle img-fluid" style="width: 150px;">
<h5 class="my-3">Лобашов Иван</h5>
<p class="text-muted mb-1">Зритель</p>
<p class="text-muted mb-4">Ульяновск</p>
<div class="d-flex justify-content-center mb-2">
<button type="button but1" class="btn btn-primary" style="background-color: #160C57;">Редактировать</button>
<button type="button but2" class="btn btn-outline-primary ms-1">Выйти</button>
</div>
</div>
</div>
<div class="card mb-4">
<div class="card-body p-0">
<ul class="list-group list-group-flush rounded-3" style="background: #F5F6BE !important;">
<li class="list-group-item d-flex justify-content-between align-items-center p-3" style="background: #F5F6BE !important;">
<p class="mb-0">Лицевой счет</p>
<p class="mb-0">Сбер</p>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center p-3" style="background: #F5F6BE !important;">
<p class="mb-0">Рубли</p>
<p class="mb-0">158,7 рублей</p>
</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="card mb-4">
<div class="card-body">
<div class="row">
<div class="col-sm-3">
<p class="mb-0">Фамилия, имя</p>
</div>
<div class="col-sm-9">
<p class="text-muted mb-0">Лобашов Иван</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-3">
<p class="mb-0">Почта</p>
</div>
<div class="col-sm-9">
<p class="text-muted mb-0">example@example.com</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-3">
<p class="mb-0">Номер телефона</p>
</div>
<div class="col-sm-9">
<p class="text-muted mb-0">(097) 234-5678</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-3">
<p class="mb-0"> Дата рождения</p>
</div>
<div class="col-sm-9">
<p class="text-muted mb-0">29.08.2004</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-3">
<p class="mb-0">Город</p>
</div>
<div class="col-sm-9">
<p class="text-muted mb-0">Ульяновск</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="card mb-4 mb-md-0">
<div class="card-body">
<p class="mb-4">Сейчас смотрим</p>
<p class="mb-1" style="font-size: .77rem;">Белочка</p>
<div class="progress rounded" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="width: 80%" aria-valuenow="80"
aria-valuemin="0" aria-valuemax="100">
</div>
</div>
<p class="mt-4 mb-1" style="font-size: .77rem;">Спуск</p>
<div class="progress rounded" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="width: 72%" aria-valuenow="72"
aria-valuemin="0" aria-valuemax="100">
</div>
</div>
<p class="mt-4 mb-1" style="font-size: .77rem;">Обитель зла 5</p>
<div class="progress rounded" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="width: 89%" aria-valuenow="89"
aria-valuemin="0" aria-valuemax="100">
</div>
</div>
<p class="mt-4 mb-1" style="font-size: .77rem;">Жили-были</p>
<div class="progress rounded" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="width: 55%" aria-valuenow="55"
aria-valuemin="0" aria-valuemax="100">
</div>
</div>
<p class="mt-4 mb-1" style="font-size: .77rem;">Вместе</p>
<div class="progress rounded mb-2" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="width: 66%" aria-valuenow="66"
aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card mb-4 mb-md-0">
<div class="card-body">
<p class="mb-4">Посмотрели</p>
<p class="mb-1" style="font-size: .77rem;">Мстители</p>
<div class="progress rounded" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100"
aria-valuemin="0" aria-valuemax="100">
</div>
</div>
<p class="mt-4 mb-1" style="font-size: .77rem;">Кириешки</p>
<div class="progress rounded" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100"
aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</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>