186 lines
8.3 KiB
HTML
186 lines
8.3 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||
|
|
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
|
||
|
|
<link href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"/>
|
||
|
|
<link rel="stylesheet" href="./style.css">
|
||
|
|
<title>Главная</title>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<main class="d-flex flex-nowrap">
|
||
|
|
<div class ="cl1 text-bg-dark">
|
||
|
|
<div class="filters ">
|
||
|
|
<div class="d-flex flex-column flex-shrink-0 text-bg-dark;" style ="width: 280px;">
|
||
|
|
|
||
|
|
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
|
||
|
|
<svg class="bi pe-none me-2" width="40" height="32"><img src="images/icon.jpg" alt="icon" width ="24" height ="24"></svg>
|
||
|
|
<span class="fs-4">Сообщения</span>
|
||
|
|
</a>
|
||
|
|
<hr>
|
||
|
|
<ul class="nav nav-pills flex-column mb-auto">
|
||
|
|
<li class="nav-item">
|
||
|
|
<a href="Messages.html" class="nav-link active" aria-current="page">
|
||
|
|
<svg class="bi pe-none me-2" width="16" height="16"><img src="images/messages.png" alt="home" width ="24" height ="24"></svg>
|
||
|
|
Сообщения
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="settings.html" class="nav-link text-white">
|
||
|
|
<svg class="bi pe-none me-2" width="16" height="16"><img src="images/settings.png" alt="settings" width ="24" height ="24"></svg>
|
||
|
|
Настройки
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="login.html" class="nav-link text-white">
|
||
|
|
<svg class="bi pe-none me-2" width="16" height="16"><img src="images/exit.png" alt="exit" width ="24" height ="24"></svg>
|
||
|
|
Выход
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<hr>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class ="cl2 bg-body-tertiary" style ="position:sticky; height:100vh;">
|
||
|
|
<div class="filters">
|
||
|
|
<div class="d-flex flex-column flex-shrink-0 bg-body-tertiary" style="width: 3rem;">
|
||
|
|
<a href="/" class="d-block p-3 link-body-emphasis text-decoration-none" title="Icon-only" data-bs-toggle="tooltip" data-bs-placement="right">
|
||
|
|
<img class="icon" src="images/icon.jpg" alt="icon" width ="32" height ="32">
|
||
|
|
<span class="visually-hidden">Icon</span>
|
||
|
|
</a>
|
||
|
|
<ul class="nav nav-pills nav-flush flex-column mb-auto text-center">
|
||
|
|
<li class="nav-item">
|
||
|
|
<a href="Messages.html" class="nav-link active py-3 border-bottom rounded-0" aria-current="page" title="Messages" data-bs-toggle="tooltip" data-bs-placement="right">
|
||
|
|
<svg class="bi pe-none" width="24" height="24" role="img" aria-label="Home"><img src="images/messages.png" alt="home" width ="24" height ="24"></svg>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="settings.html" class="nav-link py-3 border-bottom rounded-0" title="Settings" data-bs-toggle="tooltip" data-bs-placement="right">
|
||
|
|
<svg class="bi pe-none" width="24" height="24" role="img" aria-label="Settings"><img src="images/settings.png" alt="settings" width ="24" height ="24"></svg>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="login.html" class="nav-link py-3 border-bottom rounded-0" title="Orders" data-bs-toggle="tooltip" data-bs-placement="right">
|
||
|
|
<svg class="bi pe-none" width="24" height="24" role="img" aria-label="Orders"><img src="images/exit.png" alt="exit" width ="24" height ="24"></svg>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="filters">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="list-group">
|
||
|
|
<a class="list-group-item list-group-item-action d-flex gap-1 py-2" aria-current="true">
|
||
|
|
<img src="images/da.jpg" alt="twbs" width="40" height="40" class="rounded-circle flex-shrink-0">
|
||
|
|
<div class="d-flex w-100 justify-content-between">
|
||
|
|
<div>
|
||
|
|
<h6 class="mb-0">Давид Макаров</h6>
|
||
|
|
<p class="mb-0 opacity-75">Оцените моего</p>
|
||
|
|
<div class = "postImage">
|
||
|
|
<img src="images/da2.jpg" class="img-fluid" alt="Данил" height="200" width="500"></div>
|
||
|
|
<div class="d-flex gap-2 w-100 justify-content-between">
|
||
|
|
<input type="image" src="images/like.png" width="20" height="20" alt="Кнопка «input»">
|
||
|
|
<h6 class="mb-0">5</h6>
|
||
|
|
</div>
|
||
|
|
<div class="d-flex gap-2 w-100 justify-content-between">
|
||
|
|
<img src="images/eye.png" alt="Просмотры" width="20" height="20" >
|
||
|
|
<h6 class="mb-0">2100</h6>
|
||
|
|
</div>
|
||
|
|
<div class="d-flex gap-2 w-50 justify-content-between">
|
||
|
|
<button class="btn btn-dark rounded-pill px-3" type="button">Прокомментировать</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<small class="opacity-1">сейчас</small>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
|
||
|
|
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
|
||
|
|
<div class="d-flex gap-2 w-100 justify-content-between">
|
||
|
|
<div>
|
||
|
|
<h6 class="mb-0">List group item heading</h6>
|
||
|
|
<p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
|
||
|
|
</div>
|
||
|
|
<small class="opacity-50 text-nowrap">now</small>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
|
||
|
|
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
|
||
|
|
<div class="d-flex gap-2 w-100 justify-content-between">
|
||
|
|
<div>
|
||
|
|
<h6 class="mb-0">Third heading</h6>
|
||
|
|
<p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
|
||
|
|
</div>
|
||
|
|
<small class="opacity-50 text-nowrap">1w</small>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
|
||
|
|
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
|
||
|
|
<div class="d-flex gap-2 w-100 justify-content-between">
|
||
|
|
<div>
|
||
|
|
<h6 class="mb-0">Third heading</h6>
|
||
|
|
<p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
|
||
|
|
</div>
|
||
|
|
<small class="opacity-50 text-nowrap">1w</small>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
|
||
|
|
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
|
||
|
|
<div class="d-flex gap-2 w-100 justify-content-between">
|
||
|
|
<div>
|
||
|
|
<h6 class="mb-0">Third heading</h6>
|
||
|
|
<p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
|
||
|
|
</div>
|
||
|
|
<small class="opacity-50 text-nowrap">1w</small>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
|
||
|
|
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
|
||
|
|
<div class="d-flex gap-2 w-100 justify-content-between">
|
||
|
|
<div>
|
||
|
|
<h6 class="mb-0">Third heading</h6>
|
||
|
|
<p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
|
||
|
|
</div>
|
||
|
|
<small class="opacity-50 text-nowrap">1w</small>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
|
||
|
|
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
|
||
|
|
<div class="d-flex gap-2 w-100 justify-content-between">
|
||
|
|
<div>
|
||
|
|
<h6 class="mb-0">Third heading</h6>
|
||
|
|
<p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
|
||
|
|
</div>
|
||
|
|
<small class="opacity-50 text-nowrap">1w</small>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
|
||
|
|
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
|
||
|
|
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
|
||
|
|
<div class="d-flex gap-2 w-100 justify-content-between">
|
||
|
|
<div>
|
||
|
|
<h6 class="mb-0">Third heading</h6>
|
||
|
|
<p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
|
||
|
|
</div>
|
||
|
|
<small class="opacity-50 text-nowrap">1w</small>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|