home
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
font-family: 'Inter', sans-serif;
}
.menu {
display: flex;
list-style-type: none;
padding: 0;
width: 100%;
justify-content: space-around;
}
.menu li {
margin-right: 10px;
}
.menu li a {
display: block;
padding: 20px;
background-color: rgba(163, 144, 226, 0.478);
border-radius: 40px;
text-decoration: none;
color: black;
font-size: 20px;
font-family: 'Inter', sans-serif;
}
.menu li a:hover {
display: block;
padding: 20px;
background-color: rgb(77, 60, 133);
border-radius: 50px;
text-decoration: none;
color: rgb(255, 255, 255);
font-size: 20px;
font-family: 'Inter', sans-serif;
}
.container {
display: flex;
align-items: center;
}
.logo {
margin-left: 75px;
}
.photo {
width: 800px;
height: 490px;
border-radius: 50px;
margin-left: 5%;
display: flex;
}
.photo2 {
width: 800px;
height: 490px;
border-radius: 50px;
margin-left: 3%
}
.container3 {
display: flex;
align-items: center;
margin-top: 3%;
}
.map {
width: 30%;
height: 50%;
border-radius: 50px;
margin-top: 3%;
margin-left: 3%;
margin-right: 1%;
}
.infografic {
width: 60%;
height: 50%;
border-radius: 50px;
margin-top: 3%;
margin-left: 2%;
margin-right: 0%;
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 30%;
text-align: center;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.error {
width: 400px;
height: 200px;
}
.subscribe-button {
padding: 10px 60px;
background-color: #ECE9E7;
color: rgba(163, 144, 226, 0.478);
border: none;
cursor: pointer;
border-radius: 40px;
font-size: 1.5em;
margin: 30px 620px;
display: flex;
}
.subscribe-button:hover {
background-color: rgb(77, 60, 133);
color: #ffffff;
display: flex;
}
.email{
height: 15px;
width: 40%;
margin-left: 30%;
margin-top: 1%;
border-radius: 20px;
padding: 10px;
font-size: 1.5em;
display: flex;
}
h1 {
text-align: center;
}
.basement {
display: flex;
justify-content: space-around;
padding: 10px 0;
}
.basement li {
list-style-type: none;
}
.basement a {
text-decoration: none;
color: #153043;
padding: 8px 16px;
display: block;
}
.basement a:hover {
color: rgba(163, 144, 226, 0.478)4B;
}
.label{
display:block;
}
.holder {
width:400px;
margin:0 auto;
}
.checkbox {
margin-top: 1%;
margin-left: 30%;
position:relative;
display:block;
width:100%;
height:60px;
background:#ffffff;
overflow:hidden;
}
.checkbox:not(:last-child){
border-bottom:2px solid white;
}
.check {
width:50px;
height:50px;
position:absolute;
opacity:0;
}
.label span {
position:absolute;
margin-top:15px;
}
.path1{
stroke-dasharray:400;
stroke-dashoffset:400;
transition:.5s all;
}
.path2{
stroke-dasharray:1800;
stroke-dashoffset:1800;
transition:.5s all;
}
.check:checked + label svg g path {
stroke-dashoffset:0;
}
.fixed-menu {
left: 4px;
cursor: pointer;
position: fixed;
width: 300px;
height: 300px;
z-index: 997;
}
.fixed-menu ul {
display: flex;
flex-direction: column;
list-style-type: none;
}
.fixed-menu li {
font-size: 30px;
margin: 25px;
padding: 5px;
background-color: rgba(163, 144, 226, 0.478);
border-radius: 30px;
transition: background-color 0.8s ease, color 0.8s ease;
}
.fixed-menu a {
font-family: 'Inter', sans-serif;
padding: 10px;
margin-bottom: 100px;
color: rgb(0, 0, 0);
text-decoration: none;
transition: color 0.6s ease;
}
.fixed-menu li:hover a {
color: rgb(255, 255, 255);
}
.fixed-menu li:hover {
background-color: rgb(126, 94, 230);
}
.d7:after {content:""; clear:both; display:table}
.d7 form {
width: auto;
float: right;
margin-right: 30px;
}
.d7 input {
width: 250px;
height: 42px;
padding-left: 15px;
border-radius: 42px;
border: 2px solid rgba(163, 144, 226, 0.478);
background: #ffffff;
outline: none;
position: relative;
transition: .3s linear;
}
.d7 input:focus {
width: 300px;
}
.d7 button {
width: 42px;
height: 42px;
background: none;
border: none;
position: absolute;
top: 2px;
right: 0;
}
.d7 button:before{
font-family: FontAwesome;
color:rgba(163, 144, 226, 0.478);
}
.footer {
background-color: #333;
overflow: hidden;
padding: 10px 0;
bottom: 0;
width: 100%;
text-align: center;
}
.footer a, .footer img {
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.footer a:hover {
background-color: #ffffff;
color: black;
}
.form-container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
background-color: #f9f9f9;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
form {
display: grid;
gap: 10px;
}
.form-container input,
.form-container select,
.form-container textarea {
padding: 10px;
width: 100%;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 10px; /* Добавлен отступ между элементами */
}
.form-container button {
padding: 10px;
width: 100%;
background-color: rgb(126, 94, 230)rgb(126, 94, 230);
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.form-container button:hover {
background-color: rgb(103, 78, 187);
}
.footer {
background-color: #333;
overflow: hidden;
padding: 10px 0;
bottom: 0;
width: 100%;
text-align: center;
}
.footer a, .footer img {
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.footer a:hover {
background-color: #ffffff;
color: black;
}
h1 {
margin-top: 20px;
color: #333;
}
h2 {
margin-top: 20px;
color: #555;
}
p {
color: #777;
}
.img {
width: 200px;
}
button {
background-color: #007bff;
color: white;
padding: 5px 10px;
border: none;
border-radius: 5px;
margin-top: 15px;
cursor: pointer;
}
.block {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.block > div {
width: 300px;
margin: 20px;
padding: 10px;
text-align: center;
background-color: #f9f9f9;
border-radius: 10px;
}
.block > div img {
max-width: 100%;
border-radius: 10px;
}
button {
padding: 5px 10px;
border: none;
background-color: #007bff;
color: white;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
h1, h2, h3{
text-align: center;
}
</style>
</head>
<body>
<nav>
<div class="container">
<div class="logo">
<a href="home.html"><img src="logo.png" alt="logo"></a>
</div>
<ul class="menu">
<li><a href="home.html">Главная</a></li>
<li><a href="nashiuslugi.html">Наши услуги</a></li>
<li><a href="onas.html">О нас</a></li>
<li><a href="kontact.html">Контакты</a></li>
<li><form class="d7">
<input type="text" placeholder="Искать здесь...">
<button type="submit">Найти</button>
</form></li>
</ul>
</div>
</nav>
<div class="fixed-menu">
<ul>
<li><a href="#section1">Новости</a></li>
<li><a href="#section2">Путешествия</a></li>
<li><a href="#section3">Заказать тур</a></li>
<li><a href="#section4">Подписаться</a></li>
<li><a href="#section5">Отзывы</a></li>
</div>
<nav>
<div id="section1">
<h1>Добро пажаловать</h1>
<img src="" alt="eee">
</div>
</nav>
<nav>
<div id="section2" class="container2">
<div class="block">
<div style="display: block;">
<h2>...</h2>
<img src="зона.jpg" alt="Регион 1" class="img">
<p>...</p>
</div>
<div style="display: block;">
<h2>...</h2>
<img src="зона.jpg" alt="Регион 2" class="img">
<p>...</p>
</div>
</div> </div>
<div class="block">
<div style="display: block;">
<p>...</p>
<img src="зона.jpg" alt="Маршрут 1" class="img">
<p>...</p>
</div>
<div style="display: block;">
<p>...</p>
<img src="зона.jpg" alt="Маршрут 2" class="img">
<p>...</p>
</div></div>
<div class="block">
<div style="display: block;">
<h2>...</h2>
<img src="зона.jpg" alt="Зона маршрута 1" class="img">
<p>...</p>
</div> <br>
<div style="display: block;">
<h2>...</h2>
<img src="зона.jpg" alt="Зона маршрута 2" class="img">
<p>...</p>
</div>
</nav>
</div>
<nav>
<div class="container3">
<div id="section3" class="form-container">
<h2>Заказать тур</h2>
<form action="str3.html" method="post" enctype="multipart/form-data">
<input type="text" name="first_name" placeholder="Имя" required>
<input type="text" name="last_name" placeholder="Фамилия" required>
<input type="text" name="patronymic" placeholder="Отчество">
<input type="email" name="email" placeholder="Эмэйл" required>
<input type="tel" name="phone" placeholder="Телефон" required>
<label for="region">Выберите регион:</label>
<select id="region">
<option value="region1">Регион 1</option>
<option value="region2">Регион 2</option>
</select>
<label for="zones">Выберите зоны:</label>
<select id="zones">
<option value="zone1">Зона 1</option>
<option value="zone2">Зона 2</option>
</select>
<label for="skill-level">Уровень подготовки:</label>
<select id="skill-level">
<option value="beginner">Новичок</option>
<option value="pro">Профи</option>
</select>
<label for="date-range">Диапазон дат:</label>
<input type="date" id="start-date">
<input type="date" id="end-date">
<label for="participants">Количество участников:</label>
<input type="number" id="participants" min="1">
<label for="services">Дополнительные услуги:</label>
<input type="checkbox" id="guide-services" name="guide-services">Услуги проводника<br>
<input type="checkbox" id="equipment-rental" name="equipment-rental">Аренда туристического оборудования<br>
<input type="checkbox" id="photographer" name="photographer">Услуги фотографа<br>
<input type="checkbox" id="insurance" name="insurance">Страхование<br>
<label for="price">Стоимость (в USD):</label>
<input type="number" id="price" name="price" min="0">
<label for="comment">Комментарий:</label>
<textarea id="comment" name="comment" rows="4" cols="50"></textarea>
<button type="submit" class="btn-book">Бронировать</button>
</form>
</div>
</div>
</div>
</nav>
<div id="section4">
<h1>Подписаться на новости</h1>
</div>
<div>
<label class="email" for="email">Эл. Почта</label>
<input class="email" type="email" name="email" required>
</div>
<div class="checkbox">
<input type="checkbox" class="check" id="check2" />
<label for="check2" class="label">
<svg width="50" height="50" viewbox="0 0 100 100">
<rect x="30" y="20" width="50" height="50" stroke="black" fill="none" />
<g transform="translate(0,-952.36222)">
<path d="m 56,963 c -102,122 6,9 7,9 17,-5 -66,69 -38,52 122,-77 -7,14 18,4 29,-11 45,-43 23,-4 " stroke="black" stroke-width="3" fill="none" class="path1" />
</g>
</svg>
<span>Вы принимаете все условия подписки</span>
</label>
</div>
<button class="subscribe-button" id="addToCart" >Подписаться</button>
<div>
<ul class="basement">
<li><a href="home.html">Главная</a></li>
<li><a href="nashiuslugi.html">Наши услуги</a></li>
<li><a href="onas.html">О нас</a></li>
<li><a href="kontact.html">Контакты</a></li>
</ul>
</div>
</body>
</html>
Наши услуги
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
font-family: 'Inter', sans-serif;
}
.menu {
display: flex;
list-style-type: none;
padding: 0;
width: 100%;
justify-content: space-around;
}
.menu li {
margin-right: 10px;
}
.menu li a {
display: block;
padding: 20px;
background-color: rgba(163, 144, 226, 0.478);
border-radius: 40px;
text-decoration: none;
color: black;
font-size: 20px;
font-family: 'Inter', sans-serif;
}
.menu li a:hover {
display: block;
padding: 20px;
background-color: rgb(77, 60, 133);
border-radius: 50px;
text-decoration: none;
color: rgb(255, 255, 255);
font-size: 20px;
font-family: 'Inter', sans-serif;
}
.container {
display: flex;
align-items: center;
}
.logo {
margin-left: 75px;
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 30%;
text-align: center;
}
h1 {
text-align: center;
}
.basement {
display: flex;
justify-content: space-around;
padding: 10px 0;
}
.basement li {
list-style-type: none;
}
.basement a {
text-decoration: none;
color: #153043;
padding: 8px 16px;
display: block;
}
.basement a:hover {
color: rgba(163, 144, 226, 0.478)4B;
}
.label{
display:block;
}
.d7:after {content:""; clear:both; display:table}
.d7 form {
width: auto;
float: right;
margin-right: 30px;
}
.d7 input {
width: 250px;
height: 42px;
padding-left: 15px;
border-radius: 42px;
border: 2px solid rgba(163, 144, 226, 0.478);
background: #ffffff;
outline: none;
position: relative;
transition: .3s linear;
}
.d7 input:focus {
width: 300px;
}
.d7 button {
width: 42px;
height: 42px;
background: none;
border: none;
position: absolute;
top: 2px;
right: 0;
}
.d7 button:before{
font-family: FontAwesome;
color:rgba(163, 144, 226, 0.478);
}
.footer {
background-color: #333;
overflow: hidden;
padding: 10px 0;
bottom: 0;
width: 100%;
text-align: center;
}
.footer a, .footer img {
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.footer a:hover {
background-color: #ffffff;
color: black;
}
h1 {
margin-top: 20px;
color: #333;
}
h2 {
margin-top: 20px;
color: #555;
}
p {
color: #777;
}
.img {
width: 200px;
}
button {
background-color: #007bff;
color: white;
padding: 5px 10px;
border: none;
border-radius: 5px;
margin-top: 15px;
cursor: pointer;
}
.block {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.block > div {
width: 300px;
margin: 20px;
padding: 10px;
text-align: center;
background-color: #f9f9f9;
border-radius: 10px;
}
.block > div img {
max-width: 100%;
border-radius: 10px;
}
button {
padding: 5px 10px;
border: none;
background-color: #007bff;
color: white;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
h1, h2, h3{
text-align: center;
}
</style>
</head>
<body>
<nav>
<div class="container">
<div class="logo">
<a href="home.html"><img src="logo.png" alt="logo"></a>
</div>
<ul class="menu">
<li><a href="home.html">Главная</a></li>
<li><a href="nashiuslugi.html">Наши услуги</a></li>
<li><a href="onas.html">О нас</a></li>
<li><a href="kontact.html">Контакты</a></li>
<li><form class="d7">
<input type="text" placeholder="Искать здесь...">
<button type="submit"></button>
</form></li>
</ul>
</div>
</nav>
<nav>
<div class="container2">
<h1>Информация о регионах</h1>
<div class="block">
<!-- Первый регион -->
<div style="display: block;">
<h2>Регион 1</h2>
<img src="зона.jpg" alt="Регион 1" class="img">
<p>Описание региона 1.</p>
<button >Выбрать</button>
</div>
<div style="display: block;">
<!-- Второй регион -->
<h2>Регион 2</h2>
<img src="зона.jpg" alt="Регион 2" class="img">
<p>Описание региона 2.</p>
<button>Выбрать</button>
</div>
</div> </div>
<!-- Навигация на страницу -->
<h3>Навигация</h3>
<div class="block">
<!-- Первый регион -->
<div style="display: block;">
<p>Маршрут 1: просторы</p>
<img src="зона.jpg" alt="Маршрут 1" class="img">
<p>Описание маршрута 1.</p>
<button>Выбрать</button>
</div>
<div style="display: block;">
<p>Маршрут 2: сложный</p>
<img src="зона.jpg" alt="Маршрут 2" class="img">
<p>Описание маршрута 2.</p>
<button>Выбрать</button>
</div></div>
<!-- Ближайшая бронь отдыха -->
<p style="text-align: center; font-size: 25px; color: blue;">Ближайшая бронь отдыха возможна с 15 июля</p>
<div class="block">
<!-- Первый регион -->
<div style="display: block;">
<!-- Описание двух зон маршрута -->
<h2>Зона маршрута 1</h2>
<img src="зона.jpg" alt="Зона маршрута 1" class="img">
<p>Описание зоны маршрута 1.</p>
<button>Выбрать</button>
</div> <br>
<div style="display: block;">
<h2>Зона маршрута 2</h2>
<img src="зона.jpg" alt="Зона маршрута 2" class="img">
<p>Описание зоны маршрута 2.</p>
<button>Выбрать</button>
</div>
</nav>
<nav>
<div class="container3">
</div>
</nav>
<div>
<ul class="basement">
<li><a href="home.html">Главная</a></li>
<li><a href="nashiuslugi.html">Наши услуги</a></li>
<li><a href="onas.html">О нас</a></li>
<li><a href="kontact.html">Контакты</a></li>
</ul>
</div>
</body>
</html>
контакты
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
font-family: 'Inter', sans-serif;
}
.menu {
display: flex;
list-style-type: none;
padding: 0;
width: 100%;
justify-content: space-around;
}
.menu li {
margin-right: 10px;
}
.menu li a {
display: block;
padding: 20px;
background-color: rgba(163, 144, 226, 0.478);
border-radius: 40px;
text-decoration: none;
color: black;
font-size: 20px;
font-family: 'Inter', sans-serif;
}
.menu li a:hover {
display: block;
padding: 20px;
background-color: rgb(77, 60, 133);
border-radius: 50px;
text-decoration: none;
color: rgb(255, 255, 255);
font-size: 20px;
font-family: 'Inter', sans-serif;
}
.container {
display: flex;
align-items: center;
}
.logo {
margin-left: 75px;
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 30%;
text-align: center;
}
h1 {
text-align: center;
}
.basement {
display: flex;
justify-content: space-around;
padding: 10px 0;
}
.basement li {
list-style-type: none;
}
.basement a {
text-decoration: none;
color: #153043;
padding: 8px 16px;
display: block;
}
.basement a:hover {
color: rgba(163, 144, 226, 0.478)4B;
}
.label{
display:block;
}
.d7:after {content:""; clear:both; display:table}
.d7 form {
width: auto;
float: right;
margin-right: 30px;
}
.d7 input {
width: 250px;
height: 42px;
padding-left: 15px;
border-radius: 42px;
border: 2px solid rgba(163, 144, 226, 0.478);
background: #ffffff;
outline: none;
position: relative;
transition: .3s linear;
}
.d7 input:focus {
width: 300px;
}
.d7 button {
width: 42px;
height: 42px;
background: none;
border: none;
position: absolute;
top: 2px;
right: 0;
}
.d7 button:before{
font-family: FontAwesome;
color:rgba(163, 144, 226, 0.478);
}
.container {
display: flex;
align-items: center;
}
.tel {
width: 30px;
margin-right: 2%;
}
.container1 {
margin-left:3%;
display: flex;
align-items: center;
}
.container2 {
margin-left:3%;
display: flex;
align-items: center;
}
.container3 {
margin-left:3%;
display: flex;
align-items: center;
}
.container4 {
margin-left:3%;
display: flex;
align-items: center;
}
h1 {
color: #153043;
margin-left: 3%;
}
p {
position: relative;
font-family: sans-serif;
text-transform: uppercase;
font-size: 2em;
letter-spacing: 4px;
overflow: hidden;
background: linear-gradient(90deg, #ffffff, #8d4bc7, #ffffff);
background-repeat: no-repeat;
background-size: 80%;
animation: animate 4s linear infinite;
-webkit-text-fill-color: rgb(255, 255, 255);
text-align: center;
}
@keyframes animate {
0% {
background-position: -500%;
}
100% {
background-position: 500%;
}
}
</style>
</head>
<body>
<nav>
<div class="container">
<div class="logo">
<a href="home.html"><img src="logo.png" alt="logo"></a>
</div>
<ul class="menu">
<li><a href="home.html">Главная</a></li>
<li><a href="nashiuslugi.html">Наши услуги</a></li>
<li><a href="onas.html">О нас</a></li>
<li><a href="kontact.html">Контакты</a></li>
<li><form class="d7">
<input type="text" placeholder="Искать здесь...">
<button type="submit"></button>
</form></li>
</ul>
</div>
</nav>
<div><h1>Наши контакты:</h1></div>
<div class="container1">
<img class="tel" src="tel.png" alt="tel"><h2>Номер администратора: +7 952 446 88 33</h2>
</div>
<div class="container2">
<img class="tel" src="vk.png" alt="tel"><h2>Вконтакте: https://vk.com/sian</h2>
</div>
<div class="container3">
<img class="tel" src="tg.png" alt="tel"><h2>Телеграмм: https://web.telegram.org/k/</h2>
</div>
<div class="container4">
<img class="tel" src="yt.png" alt="tel"><h2>YouTube: https://www.youtube.com/</h2>
</div>
<p>Путешествуй с нами!</p>
<div>
<div>
<ul class="basement">
<li><a href="home.html">Главная</a></li>
<li><a href="nashiuslugi.html">Наши услуги</a></li>
<li><a href="onas.html">О нас</a></li>
<li><a href="kontact.html">Контакты</a></li>
</ul>
</div>
</body>
</html>
О нас
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
font-family: 'Inter', sans-serif;
}
.menu {
display: flex;
list-style-type: none;
padding: 0;
width: 100%;
justify-content: space-around;
}
.menu li {
margin-right: 10px;
}
.menu li a {
display: block;
padding: 20px;
background-color: rgba(163, 144, 226, 0.478);
border-radius: 40px;
text-decoration: none;
color: black;
font-size: 20px;
font-family: 'Inter', sans-serif;
}
.menu li a:hover {
display: block;
padding: 20px;
background-color: rgb(77, 60, 133);
border-radius: 50px;
text-decoration: none;
color: rgb(255, 255, 255);
font-size: 20px;
font-family: 'Inter', sans-serif;
}
.container {
display: flex;
align-items: center;
}
.logo {
margin-left: 75px;
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 30%;
text-align: center;
}
h1 {
text-align: center;
}
.basement {
display: flex;
justify-content: space-around;
padding: 10px 0;
}
.basement li {
list-style-type: none;
}
.basement a {
text-decoration: none;
color: #153043;
padding: 8px 16px;
display: block;
}
.basement a:hover {
color: rgba(163, 144, 226, 0.478)4B;
}
.label{
display:block;
}
.d7:after {content:""; clear:both; display:table}
.d7 form {
width: auto;
float: right;
margin-right: 30px;
}
.d7 input {
width: 250px;
height: 42px;
padding-left: 15px;
border-radius: 42px;
border: 2px solid rgba(163, 144, 226, 0.478);
background: #ffffff;
outline: none;
position: relative;
transition: .3s linear;
}
.d7 input:focus {
width: 300px;
}
.d7 button {
width: 42px;
height: 42px;
background: none;
border: none;
position: absolute;
top: 2px;
right: 0;
}
.d7 button:before{
font-family: FontAwesome;
color:rgba(163, 144, 226, 0.478);
}
</style>
</head>
<body>
<nav>
<div class="container">
<div class="logo">
<a href="home.html"><img src="logo.png" alt="logo"></a>
</div>
<ul class="menu">
<li><a href="home.html">Главная</a></li>
<li><a href="nashiuslugi.html">Наши услуги</a></li>
<li><a href="onas.html">О нас</a></li>
<li><a href="kontact.html">Контакты</a></li>
<li><form class="d7">
<input type="text" placeholder="Искать здесь...">
<button type="submit"></button>
</form></li>
</ul>
</div>
</nav>
<nav>
<div class="container2">
</div>
</nav>
<nav>
<div class="container3">
</div>
</nav>
<div>
<ul class="basement">
<li><a href="home.html">Главная</a></li>
<li><a href="nashiuslugi.html">Наши услуги</a></li>
<li><a href="onas.html">О нас</a></li>
<li><a href="kontact.html">Контакты</a></li>
</ul>
</div>
</body>
</html>