* {
background: #1e1a1a;
color: #ffffff;
font-size: 20px;
}
.container {
padding: 0 110px
}
.logo{
width: 90px;
height: 50px;
margin-right: 35px;
margin-top: -15px;
}
.header_ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
margin-top: 35px;
}
.header_li {
margin-right: 45px;
cursor: pointer;
}
.slider_ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
margin-top: 60px;
}
.slider_img {
max-width: 680px;
max-height: 350px;
margin-left: 20px;
}
.slider_arrow_one {
font-size: 70px;
margin-top: 120px;
cursor: pointer;
}
.slider_arrow_two {
font-size: 70px;
margin-left: 20px;
margin-top: 120px;
cursor: pointer;
}
.slider_ul_ul {
list-style: none;
margin-top: 80px;
}
.default_button {
border: none;
text-decoration: none;
background: #0B63F6;
width: 150px;
height: 45px;
cursor: pointer;
}
.slider_description {
padding-bottom: 45px; /* оступ вниз */
}
.slider_ul_ul_text{
color: #fff905;
margin-top: 50px;
}
.registration_ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
margin-top: 60px;
}
.registration_ul_ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
margin-top: 15px;
}
.default_input {
width: 330px;
height: 55px;
background-color: #3b3b3f;
outline: none;
border: none;
}
.default_input::placeholder {
color: #676565; /* Цвет текста-заполнителя */
}
.form_two {
margin-top: 15px;
}
.help_pasword {
font-size: 13px;
color: #0300ff;
text-decoration: underline;
margin-top: 10px;
margin-right: 50px; /* отступ вправо след элимента*/
cursor: pointer;
}
.description_ul {
list-style: none;
margin-left: 350px;
}
.instructions_p {
text-align: center;
margin-top: 70px;
font-size: 30px;
}
.ul_instructions_find {
list-style: none;
margin-top: 25px;
}
.ul_instructions_find_button {
margin-left: 100px;
}
.card_ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.card_ul_two {
list-style: none;
margin: 0;
padding: 0;
display: flex;
margin-top: 80px;
}
.card_fon {
height: 700px;
width: 330px;
background-color: #3b3b3f;
position: relative;
}
.card_fon_last{
height: 700px;
width: 330px;
background-color: #3b3b3f;
position: relative;
margin-top: 80px;
margin-left: 390px;
}
.card_text_name {
position: absolute;
background-color: #3b3b3f;
left: 120px;
margin-top: 11px;
font-size: 25px;
}
.card_img {
width: 300px;
height: 200px;
margin-top: 50px;
margin-left: 15px;
}
.card_text_description {
background-color: #3b3b3f;
margin-left: 15px;
}
.card_text_description_two {
background-color: #3b3b3f;
margin-left: 15px;
margin-top: 160px;
}
.card_button {
border: none;
text-decoration: none;
background: #0B63F6;
width: 330px;
height: 60px;
cursor: pointer;
margin-top: 75px;
text-align: center;
}
.card_left {
margin-left: 60px;
}
.reviews_text_main {
font-size: 25px;
margin-top: 120px;
margin-left: 80px;
}
.reviews_card_fon{
height: 560px;
width: 320px;
background-color: #3b3b3f;
position: relative;
}
.reviews_photo {
width: 100px;
height: 100px;
margin-top: 25px;
margin-left: 114px;
}
.reviews_card_name{
background-color: #3b3b3f;
text-align: center;
}
.reviews_card_description{
background-color: #3b3b3f;
text-align: center;
margin-top: 55px;
}
.reviews_card_link {
background-color: #3b3b3f;
font-size: 16px;
color: #0e2af3;
text-decoration: underline;
cursor: pointer;
margin-left: 20px;
margin-top: 0px;
}
.reviews_card_date{
background-color: #3b3b3f;
font-size: 18px;
margin-left: 20px;
margin-top: -5px;
}
.reviews_ul-ul{
list-style: none;
margin: 0;
padding: 0;
display: flex;
background-color: #3b3b3f;
}
.slider_arrow_three {
font-size: 65px;
margin-top: 30px;
margin-left: -60px;
cursor: pointer;
}
.slider_arrow_four {
font-size: 65px;
margin-left: 365px;
margin-top: 30px;
cursor: pointer;
}
.send_text_main{
font-size: 25px;
}
.send_ul_ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.send_button{
width: 25px;
height: 25px;
background-color: #3b3b3f;
cursor: pointer;
border: none;
text-decoration: none;
margin-top: 18px;
margin-right: 10px;
}
.send_ul{
margin-left: 600px;
margin-top: -635px;
}
.footer_fon{
width: 100%;
height: 300px;
background-color: #3b3b3f;
margin-top: 570px;
position: relative;
}
.footer_text_one{
position: absolute;
background-color: #3b3b3f;
font-size: 25px;
margin-top: 40px;
}
.footer_text_Two{
position: absolute;
background-color: #3b3b3f;
font-size: 25px;
margin-top: 80px;
}
.footer_text_Three{
position: absolute;
background-color: #3b3b3f;
font-size: 25px;
margin-top: 120px;
}
.footer_ul {
cursor: pointer;
}
.footer_ul_two {
margin-left: 290px;
cursor: pointer;
}
.footer_text_Four{
position: absolute;
background-color: #3b3b3f;
font-size: 25px;
margin-top: 160px;
}
.footer_three{
margin-left: 800px;
cursor: pointer;
}
<body>
<div class="container">
<header>
<div>
<ul class="header_ul">
<img src="media/logo.png" class="logo">
<li class="header_li"><a>Регистрация</a></li>
<li class="header_li"><a>Личный кабинет</a></li>
<li class="header_li"><a>О нас</a></li>
<li class="header_li"><a>Контакты</a></li>
<li class="header_li"><a>Поиск</a></li>
<li class="header_li"><a>Наши экскурсии</a></li>
</ul>
</div>
</header>
<main>
<div>
<ul class="slider_ul">
<li class="slider_arrow_one"> < </li>
<img src="media/photo.jpg" class="slider_img">
<li class="slider_arrow_two"> > </li>
<ul class="slider_ul_ul">
<li class="slider_description">Описание Описание Описание Описание Описание Описание ...</li>
<button class="default_button">Далее</button>
<li class="slider_ul_ul_text">Рейтинг 4/5</li>
</ul>
</ul>
<ul class="registration_ul">
<ul>
<form>
<input type="text" placeholder="Email" class="default_input">
</form>
<form class="form_two">
<input type="text" placeholder="Email" class="default_input">
</form>
<ul class="registration_ul_ul">
<a class="help_pasword">Забыл пароль</a>
<button class="default_button">Войти</button>
</ul>
</ul>
<ul class="description_ul">
<li>О нас</li>
<br/>
<li>Наш слоган:</li>
<br/>
<li>Описание</li>
</ul>
</ul>
</div>
<div>
<p class="instructions_p">Наши инструкции</p>
<ul class="ul_instructions_find">
<form>
<input type="text" placeholder="Поис инструкции" class="default_input">
<button class="default_button ul_instructions_find_button">Поиск</button>
</form>
</ul>
<div>
<ul class="card_ul">
<div class="card_fon">
<p class="card_text_name">Название</p>
<img src="media/photo.jpg" class="card_img">
<p class="card_text_description">Описание ..................................
<br/>...........................................................</p>
<p class="card_text_description_two">Продолжительность 7 дней;
<br>
Кол-во бронирований: 10;
<br>
Рейтинг 3/5
</p>
<button class="card_button">Забрноировать</button>
</div>
<div class="card_fon card_left">
<p class="card_text_name">Название</p>
<img src="media/photo.jpg" class="card_img">
<p class="card_text_description">Описание ..................................
<br/>...........................................................</p>
<p class="card_text_description_two">Продолжительность 7 дней;
<br>
Кол-во бронирований: 10;
<br>
Рейтинг 3/5
</p>
<button class="card_button">Забрноировать</button>
</div>
<div class="card_fon card_left">
<p class="card_text_name">Название</p>
<img src="media/photo.jpg" class="card_img">
<p class="card_text_description">Описание ..................................
<br/>...........................................................</p>
<p class="card_text_description_two">Продолжительность 7 дней;
<br>
Кол-во бронирований: 10;
<br>
Рейтинг 3/5
</p>
<button class="card_button">Забрноировать</button>
</div>
</ul>
<ul class="card_ul_two">
<div class="card_fon">
<p class="card_text_name">Название</p>
<img src="media/photo.jpg" class="card_img">
<p class="card_text_description">Описание ..................................
<br/>...........................................................</p>
<p class="card_text_description_two">Продолжительность 7 дней;
<br>
Кол-во бронирований: 10;
<br>
Рейтинг 3/5
</p>
<button class="card_button">Забрноировать</button>
</div>
<div class="card_fon card_left">
<p class="card_text_name">Название</p>
<img src="media/photo.jpg" class="card_img">
<p class="card_text_description">Описание ..................................
<br/>...........................................................</p>
<p class="card_text_description_two">Продолжительность 7 дней;
<br>
Кол-во бронирований: 10;
<br>
Рейтинг 3/5
</p>
<button class="card_button">Забрноировать</button>
</div>
<div class="card_fon card_left">
<p class="card_text_name">Название</p>
<img src="media/photo.jpg" class="card_img">
<p class="card_text_description">Описание ..................................
<br/>...........................................................</p>
<p class="card_text_description_two">Продолжительность 7 дней;
<br>
Кол-во бронирований: 10;
<br>
Рейтинг 3/5
</p>
<button class="card_button">Забрноировать</button>
</div>
</ul>
<div class="card_fon_last">
<p class="card_text_name">Название</p>
<img src="media/photo.jpg" class="card_img">
<p class="card_text_description">Описание ..................................
<br/>...........................................................</p>
<p class="card_text_description_two">Продолжительность 7 дней;
<br>
Кол-во бронирований: 10;
<br>
Рейтинг 3/5
</p>
<button class="card_button">Забрноировать</button>
</div>
</div>
<div>
<p class="reviews_text_main">Отзывы клиентов</p>
<div class="reviews_card_fon">
<img src="media/face.jpg" class="reviews_photo">
<p class="reviews_card_name">Даниил</p>
<p class="reviews_card_description">Описание, описание, описание, описание, описание, описание, описание...</p>
<ul class="reviews_ul-ul">
<p class="slider_arrow_three"><</p>
<p class="slider_arrow_four">></p>
</ul>
<p class="reviews_card_link">Ссылка на описание экскурсии<p/>
<p class="reviews_card_date">10.11.2024<p/>
</div>
<ul class="send_ul">
<p class="send_text_main">Новости сервиса</p>
<form>
<input type="text" placeholder="Поис инструкции" class="default_input">
<ul class="send_ul_ul">
<button class="send_button"></button>
<p>Согласие на оброботку персональных данных</p>
</ul>
<button class="default_button">Подписаться</button>
</form>
</ul>
</div>
</div>
</main>
</div>
<footer class="footer_fon">
<ul class="footer_ul">
<p class="footer_text_one">Главная</></p>
<p class="footer_text_Two">Ригистрация</p>
<p class="footer_text_Three">Личный кабинет</p>
</ul>
<ul class="footer_ul_two">
<p class="footer_text_one">О нас</></p>
<p class="footer_text_Two">Контакты</p>
<p class="footer_text_Three">Поиск</p>
<p class="footer_text_Four">Наши экскурсии</p>
</ul>
<ul class="footer_three">
<p class="footer_text_one">+7 (353) 123-45-67</></p>
<p class="footer_text_Two">info@moscow.ru</p>
</ul>
</footer>
</body>
file_path = "/app/my_data.json"
with open(file_path, 'w') as f:
f.write(str(json_data))
print("Файл сохранен")