153 lines
4.3 KiB
HTML
153 lines
4.3 KiB
HTML
<!-- index.html -->
|
||
{% load static %}
|
||
<!DOCTYPE html>
|
||
<html lang="en" xmlns="http://www.w3.org/1999/html">
|
||
<head>
|
||
|
||
|
||
<meta charset="UTF-8">
|
||
<title>Title</title>
|
||
<style>
|
||
body {
|
||
background-image: url('{% static "bg.jpg" %}');
|
||
}
|
||
</style>
|
||
</head>
|
||
<body >
|
||
<h1 class="centered-div" style="font-size: 72px; margin-bottom: 50px;">ЗООПАРК "СКАЗКА"</h1>
|
||
<div class="centered-div">
|
||
<a href="tickets.html"><button type="button" style="width: 800px; height: 150px; font-size: 50px; opacity: 0.7; margin-bottom: 50px; border-radius: 10px;">Билеты</button></a>
|
||
</div>
|
||
<div class="centered-div">
|
||
<a href="#info"><button type="button" style="width: 800px; height: 150px; font-size: 50px; opacity: 0.7; margin-bottom: 50px; border-radius: 10px;">Наши правила</button></a>
|
||
</div>
|
||
|
||
|
||
<script src="{% static '/js/jquery-3.7.1.min.js' %}"></script>
|
||
<script src="{% static '/js/custom.js' %}"></script>
|
||
</body>
|
||
</html>
|
||
|
||
<style>
|
||
|
||
|
||
.centered-div {
|
||
text-align: center;
|
||
}
|
||
.modal {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
background: rgba(0,0,0,0.5); /* фон */
|
||
z-index: 1050;
|
||
opacity: 0; /* по умолчанию модальное окно прозрачно */
|
||
-webkit-transition: opacity 200ms ease-in;
|
||
-moz-transition: opacity 200ms ease-in;
|
||
transition: opacity 200ms ease-in; /* анимация перехода */
|
||
pointer-events: none; /* элемент невидим для событий мыши */
|
||
margin: 0;
|
||
padding: 0;
|
||
|
||
|
||
}
|
||
/* При отображении модального окно */
|
||
.modal:target {
|
||
opacity: 1; /* делаем окно видимым */
|
||
pointer-events: auto; /* элемент видим для событий мыши */
|
||
overflow-y: auto; /* добавляем прокрутку по y, когда элемент не помещается на страницу */
|
||
}
|
||
/* ширина модального окна и его отступы от экрана */
|
||
.modal-dialog {
|
||
position: relative;
|
||
width: auto;
|
||
margin: 10px;
|
||
}
|
||
@media (min-width: 576px) {
|
||
.modal-dialog {
|
||
max-width: 500px;
|
||
margin: 30px auto; /* отображение окна по центру */
|
||
}
|
||
}
|
||
/* Стили для блока с контентом окна */
|
||
.modal-content {
|
||
position: relative;
|
||
display: -webkit-box;
|
||
display: -webkit-flex;
|
||
display: -ms-flexbox;
|
||
display: flex;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-box-direction: normal;
|
||
-webkit-flex-direction: column;
|
||
-ms-flex-direction: column;
|
||
flex-direction: column;
|
||
background-color: #fff;
|
||
-webkit-background-clip: padding-box;
|
||
background-clip: padding-box;
|
||
border: 1px solid rgba(0,0,0,.2);
|
||
border-radius: .3rem;
|
||
outline: 0;
|
||
|
||
}
|
||
@media (min-width: 768px) {
|
||
.modal-content {
|
||
-webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
|
||
box-shadow: 0 5px 15px rgba(0,0,0,.5);
|
||
}
|
||
}
|
||
/* Стили заголовка окна */
|
||
.modal-header {
|
||
display: -webkit-box;
|
||
display: -webkit-flex;
|
||
display: -ms-flexbox;
|
||
display: flex;
|
||
-webkit-box-align: center;
|
||
-webkit-align-items: center;
|
||
-ms-flex-align: center;
|
||
align-items: center;
|
||
-webkit-box-pack: justify;
|
||
-webkit-justify-content: space-between;
|
||
-ms-flex-pack: justify;
|
||
justify-content: space-between;
|
||
padding: 15px;
|
||
border-bottom: 1px solid #eceeef;
|
||
}
|
||
.modal-title {
|
||
margin-top: 0;
|
||
margin-bottom: 0;
|
||
line-height: 1.5;
|
||
font-size: 1.25rem;
|
||
font-weight: 500;
|
||
}
|
||
/* Стили кнопки "х" ("Закрыть") */
|
||
.close {
|
||
float: right;
|
||
font-family: sans-serif;
|
||
font-size: 24px;
|
||
font-weight: 700;
|
||
line-height: 1;
|
||
color: #000;
|
||
text-shadow: 0 1px 0 #fff;
|
||
opacity: .5;
|
||
text-decoration: none;
|
||
}
|
||
/* Стили для закрывающей кнопки в фокусе или наведении */
|
||
.close:focus, .close:hover {
|
||
color: #000;
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
opacity: .75;
|
||
}
|
||
/* Стили блока основного содержимого окна */
|
||
.modal-body {
|
||
position: relative;
|
||
-webkit-box-flex: 1;
|
||
-webkit-flex: 1 1 auto;
|
||
-ms-flex: 1 1 auto;
|
||
flex: 1 1 auto;
|
||
padding: 15px;
|
||
overflow: auto;
|
||
}
|
||
|
||
</style> |