<html lang="ru"><head><meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Головна сторінка</title>
</head>
<body class="bg-light">
<header class="sticky-sm-top bg-white bd- p-0 d-flex align-items-stretch border-bottom border-dark">
<!--navbar-->
<nav class="container navbar navbar-expand-lg navbar-light d-flex align-items-stretch">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarSupportedContent" style="">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" aria-current="page" href="/"><button type="button" class="btn btn-light">Головна</button></a></li>
<li class="nav-item"><a class="nav-link" aria-current="page" href="/category/iskusstvo/"><button type="button" class="btn btn-light">Искусство<span class="badge bg-primary rounded-pill">6</span></button></a></li>
<li class="nav-item"><a class="nav-link" aria-current="page" href="/category/politika/"><button type="button" class="btn btn-light">Политика <span class="badge bg-primary rounded-pill">2</span></button></a></li>
<li class="nav-item"><a class="nav-link" aria-current="page" href="/news/add_post/"><button type="button" class="btn btn-light">Додати публікацію</button></a></li>
<li class="nav-item"><a class="nav-link" aria-current="page" href="/news/contact/"><button type="button" class="btn btn-light">Зворотній зв'язок</button></a></li>
</ul>
<span class="navbar-text">
<a href="/news/about_user/admin/"><button type="button" class="btn btn-outline-primary">admin</button></a>
<a href="/news/logout/"><button type="button" class="btn btn-outline-primary">Вийти</button></a>
</span>
</div>
</nav>
</header>
<!--main-->
<main>
<!--content-->
<div class="container-mt-3">
<div class="row">
<div class="col-md-2">
<div class="hamburger-menu">
<input id="menu__toggle" type="checkbox">
<label class="menu__btn" for="menu__toggle">
<span></span>
</label>
<br>
<ul class="menu__box">
</ul>
</div>
</div>
<br>
<div class="col-md-9">
<div class="alert alert-success" role="alert">
Ви ще не зареєструвалися
</div>
<h1>Реєстрація</h1>
<br>
<form method="post" class="row g-3">
<input type="hidden" name="csrfmiddlewaretoken" value="mK7H7u872VZolfIKOsV73mUi1XEckLpDbYktFF4fgeOHb9GGxx4cjgeNtPwyLEAr">
<div class="col-md-12">
<div class="col-12">
<label for="id_first_name" class="form-label">Ім'я</label>
<input type="text" name="first_name" class="form-control" maxlength="150" id="id_first_name">
<div class="invalid-feedback">
</div>
</div>
<div class="mb-3">
<label for="id_last_name" class="form-label">Прізвисько</label>
<input type="text" name="last_name" class="form-control" maxlength="150" id="id_last_name">
<div class="invalid-feedback">
</div>
</div>
<div class="mb-3">
<label for="id_username" class="form-label">Username</label>
<input type="text" name="username" class="form-control" maxlength="150" autofocus="" required="" id="id_username">
<div class="invalid-feedback">
</div>
</div>
<div class="mb-3">
<label for="id_password1">Пароль</label>
<input type="password" name="password1" class="form-control" required="" id="id_password1">
<div class="invalid-feedback">
</div>
</div>
<div class="mb-3">
<label for="id_password2">Повторіть пароль</label>
<input type="password" name="password2" class="form-control" required="" id="id_password2">
<div class="invalid-feedback">
</div>
</div>
<div class="mb-3">
<label for="id_email">Пошта</label>
<input type="email" name="email" class="form-control" placeholder="12345@example.com" maxlength="254" id="id_email">
<div class="invalid-feedback">
</div>
</div>
<button type="submit" class="btn btn-primary btn-block col-12">Зареэструватися</button>
</div></form>
</div>
</div>
<!--end leftbar-->
</div>
</main>
<!-- Footer -->
<footer class="page-footer font-small blue">
<div class="footer-copyright text-center py-3">Instagram:
<a href="https://www.instagram.com/serhiops_/">serhiops_</a>
</div>
</footer>
<!-- endFooter -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body></html>#menu__toggle {
opacity: 0;
}
#menu__toggle:checked ~ .menu__btn > span {
transform: rotate(45deg);
}
#menu__toggle:checked ~ .menu__btn > span::before {
top: 0;
transform: rotate(0);
}
#menu__toggle:checked ~ .menu__btn > span::after {
top: 0;
transform: rotate(90deg);
}
#menu__toggle:checked ~ .menu__box {
visibility: visible;
left: 0;
}
.menu__btn {
display: flex;
align-items: center;
position: fixed;
top: 68px;
left: 20px;
width: 26px;
height: 26px;
cursor: pointer;
z-index: 3;
}
.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
display: block;
position: absolute;
width: 100%;
height: 2px;
background-color: #616161;
transition-duration: .25s;
}
.menu__btn > span::before {
content: '';
top: -8px;
}
.menu__btn > span::after {
content: '';
top: 8px;
}
.menu__box {
display: block;
position: fixed;
visibility: hidden;
top: 0;
left: -100%;
width: 17%;
height: 100%;
margin: 0;
padding: 80px 0;
list-style: none;
background-color: #ECEFF1;
opacity: .85;
box-shadow: 1px 0px 6px rgba(0, 0, 0, .2);
transition-duration: .25s;
z-index: 1;
}
.menu__item {
display: block;
padding: 12px 24px;
color: #333;
font-family: 'Roboto', sans-serif;
font-size: 20px;
font-weight: 600;
text-decoration: none;
transition-duration: .25s;
}
.menu__item:hover {
background-color: #CFD8DC;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.