Часть 1
5 июля 2024 г., 20:48
Рассказываем, как сделать анимацию без использования JavaScript. Пишем страницу авторизации пользователя на CSS и HTML5.
За годы работы с Front End технологиями мне приходилось работать с разными способами анимации. В этой статье я хочу подробнее разобрать, как работает анимация в CSS без использования JavaScript.
В CSS есть свойство animation, которое позволяет анимировать практически любое свойство HTML элемента. Правило анимации указывается в блоке keyframes.
Свойство animation может быть использовано для анимации других свойств CSS, таких как цвет фона, высота, длинна, положение элемента и многие другие.
Давайте рассмотрим пример, где мы меняем цвет фона у элемента.
Создадим в HTML элемент с классом «element»:
<!DOCTYPE html>
<html>
<head>
<title>Иноземная</title>
<link rel="stylesheet" href="style_1.2.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
<heade>
<script>
window.onscroll = function() {
if (window.pageYOffset > 0) {
document.querySelector('nav').style.opacity = '0.8';
} else {
document.querySelector('nav').style.opacity = '1';
}
};
</script>
<nav>
<a href="index.html">
<img src="logo.png" alt="Логоtype" class="logo_type"></a>
<ul>
<li class="li_1" style="border-bottom: 5px solid var(--color-2);
background-color: var(--color-5);">
<a style="color: white;" href="index.html">Главная</a></li>
<li class="li_2"><a href="str_menu.html">Наши услуги</a></li>
<li class="li_3"><a href="str_sale.html">О нас</a></li>
<li class="li_4"><a href="str_contact.html">Контакты</a></li>
</ul>
<div class="search-bar">
<input name="s" placeholder="Искать здесь..." type="text">
<button type="submit">Найти</button>
</div>
<div class="social-icons">
<ul>
<li><a href="https://sun9-23.userapi.com/impg/ntk9GoyYwKwDDac7Rzp6t6YqqRVggsXW4w8_VQ/9gr-EUftaS4.jpg?size=2560x2560&quality=95&sign=87e40443b9a9df5b898603194db383e5&type=album"><i class="fab fa-vk"></a></li>
<li><a href="https://sun9-60.userapi.com/impg/uQ9jIO_0Gqc7sJU7Ps-4WjuFBBPvDobF0XDzUg/XoHKBVbKEu0.jpg?size=677x677&quality=95&sign=4aa365debeee584c91633380dbdf5bd3&type=album"><i class="fab fa-telegram"></a></li>
<li><a href="https://sun9-10.userapi.com/impg/CtHHtGm54xNohtfYbvVjDNHsyx3TV_VqDYzMmA/fdoFhbfSAVs.jpg?size=1020x1020&quality=95&sign=2fb5116665732b4a6bbe181a86d6a3ee&type=album"><i class="fab fa-youtube"></a></li>
</ul>
</div>
</nav>
</heade>
<main>
<div id="section1"></div>
<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>
<h1 class="toptop">Путешествуй вместе с нами!</h1>
<div style="display: flex; justify-content: center; align-items: center; height: 650px;">
<iframe width="1120" height="630" src="https://www.youtube.com/embed/eSUmkFPln_U?autoplay=1&mute=1&controls=0&loop=1&playlist=eSUmkFPln_U&modestbranding=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<h1 class="toptop">Горящие предложения </h1>
<img style="display: flex; justify-content: center; margin: 150px; margin-top: 50px;" src="foto_1.1.0.PNG" alt="banner">
<div class="animated-banner">
<span class="animated-banner-text">Отдохнуть как в Раю, вам поможет наше Турагенство "ООО" Прыгай, не о чем не жалей!</span>
</div>
<div id="section2"></div>
<div style="display: flex; justify-content: center; margin: 20px;"><img src="888.png" alt="banner"></div>
<div class="history">
<img src="foto_1.png" alt="banner" class="img_1">
<div class="text_1">
<h1>Что такое путешествовать с нами? Это - Туры в лучшие курорты мира!</h1>
Туры стоят немалых денег, а ваше время – и того больше! Поэтому мы создали сервис,
благодаря которому вы можете сэкономить свои ценные ресурсы. Закажите готовый тур онлайн.
Все необходимые детали путешествия мы сообщим вам по телефону,
а документы пришлем на email. С Travelata вы всегда будете уверены, что отдых пройдет на ура!
</div>
</div>
<div id="section3"></div>
<div style="display: flex; justify-content: center; margin: 20px;"><img src="888.png" alt="banner"></div>
<h2 style="text-align: center; font-size: 40px; font-family: 'ledger';">Заказать тур у нас:</h2>
<div class="lenta">
<form action="/submit-tour" method="post">
<div class="column">
<label for="people">Количество человек:</label>
<input type="number" id="people" name="people" min="1" required>
<label for="start-date">Дата начала:</label>
<input type="date" id="start-date" name="start-date" required>
<label for="end-date">Дата окончания:</label>
<input type="date" id="end-date" name="end-date" required>
<label for="children">С детьми:</label>
<input type="checkbox" id="children" name="children">
<label for="vacation-type">Тип отдыха:</label>
<select id="vacation-type" name="vacation-type" required>
<option value="beach">Пляжный</option>
<option value="cruise">Круиз</option>
<option value="adventure">Приключенческий</option>
<option value="skiing">Горные лыжи</option>
</select>
<label for="country">Страна:</label>
<select id="country" name="country" required>
<option value="skiing">Турция</option>
<option value="skiing">Греция</option>
<option value="skiing">Испания</option>
</select>
<label for="region">Предпочтение вид отдха:</label>
<select id="region" name="region" required>
<option value="skiing">Пассивный</option>
<option value="skiing">Активный</option>
<option value="skiing">Не важно</option>
</select>
</div>
<div class="column">
<label for="fullname">ФИО:</label>
<input type="text" id="fullname" name="fullname" required placeholder="Иван Иванов">
<label for="phone">Контактный номер телефона:</label>
<input type="tel" id="phone" name="phone" required placeholder="+7-900-345-11-22">
<label for="email">Адрес почты:</label>
<input type="email" id="email" name="email" required placeholder="IAM@mai">
</div>
<button type="submit">Отправить</button>
</form>
</div>
<div id="section4"></div>
<div style="display: flex; justify-content: center; margin: 20px;"><img src="888.png" alt="banner"></div>
<div class="spam">
<img src="lab_3.png" alt="banner">
<div class="text_2">
<h1>Подпишитесь на рассылку</h1>
И вы первыми узнаете о наших секретных акциях и конкурсах!
<label for="email">Введите вашу почту: </label>
<form class="form_2" method="POST">
<input type="text" name="email" placeholder="af@mail" required>
<button type="submit">Подписаться</button></form>
<p class="yess">Нажимая на кнопку, вы принимаете наше <a style="text-decoration: none ; color: rgb(75, 132, 255);" href=""> Соглашение о конфиденциальности !</a>
</div>
</div>
<div id="section5"></div>
<div style="display: flex; justify-content: center; margin: 20px;"><img src="888.png" alt="banner"></div>
<div class="mod_1">
<h2>Отзывы наших посетителей</h2>
Рейтинг: 4.4/5
<img src="lab_5.png" alt="banner">
</div>
<div class="sms">
<div class="reviews-container">
<div class="review">
<p class="review-text">"Это турагентство превзошло все мои ожидания! Организация путешествия была безупречной, и поддержка клиентов была на высшем уровне."
<p class="review-author">- Алексей И.
</div>
<div class="review">
<p class="review-text">"Я в восторге от сервиса и внимания к деталям, которые предоставило это агентство. Мой отпуск был незабываемым благодаря их профессионализму."
<p class="review-author">- Марина В.
</div>
<div class="review">
<p class="review-text">"Спасибо этому турагентству за создание идеального тура для нашей семьи. Все было организовано исключительно хорошо, и мы обязательно воспользуемся их услугами снова!"
<p class="review-author">- Игорь С.
</div>
</div>
</div>
<button class="button_upp" onclick="window.scrollTo(0, 0)"></button>
</main>
<footer>
<div>
<h2>Мы в соц. сетях:</h2>
<ul class="social-iconss">
<li><a href="https://sun9-23.userapi.com/impg/ntk9GoyYwKwDDac7Rzp6t6YqqRVggsXW4w8_VQ/9gr-EUftaS4.jpg?size=2560x2560&quality=95&sign=87e40443b9a9df5b898603194db383e5&type=album"><i class="fab fa-vk"></a></li>
<li><a href="https://sun9-60.userapi.com/impg/uQ9jIO_0Gqc7sJU7Ps-4WjuFBBPvDobF0XDzUg/XoHKBVbKEu0.jpg?size=677x677&quality=95&sign=4aa365debeee584c91633380dbdf5bd3&type=album"><i class="fab fa-telegram"></a></li>
<li><a href="https://sun9-10.userapi.com/impg/CtHHtGm54xNohtfYbvVjDNHsyx3TV_VqDYzMmA/fdoFhbfSAVs.jpg?size=1020x1020&quality=95&sign=2fb5116665732b4a6bbe181a86d6a3ee&type=album"><i class="fab fa-youtube"></a></li>
</ul>
</div>
<div>
<h2>ИП Дилюк Рагнавиндр "Иноземная Гастрономия".</h2>
Copyright © COGNOSPHERE. All Rights Reserved.
</div>
<div>
<h2>Контакты:</h2>
Foreign_Gastronomy@mail.ru
+7 245 436 34 44
+7 245 431 87 99
Тейват, Мондштат, Винокурня рассвет, д1.
</div>
</footer>
</body>
</html>
__________________________________________________________________________
<!DOCTYPE html>
<html>
<head>
<title>Иноземная Гастрономия</title>
<link rel="stylesheet" href="style_1.2.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<style>
.tur_rum {
border: 2px solid #ddd;
border-radius: 5%;
padding: 20px; /* Уменьшенный внутренний отступ */
margin: 10px;
display: inline-block;
width: 700px;
transition: transform 0.3s, box-shadow 0.3s; /* Плавность для анимации */
}
.tur_rum:hover {
transform: translateY(-10px); /* Сдвиг блока вверх при наведении */
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); /* Тень при наведении */
}
.tur_rum img {
width: 100%; /* Ширина изображения до краёв блока */
height: auto; /* Автоматическая высота для сохранения пропорций */
border-radius: 5%; /* Скругление углов изображения */
display: block;
}
.tur_rum h3, .tur_rum p, .tur_rum button {
font-size: 25px;
font-family: var(--texx-1);
text-align: center;
width: 100%; /* Ширина текста и кнопки до краёв блока */
margin-top: 10px;
}
.tur_rum button {
background-color: #ffbb87;
color: white;
border: none;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
}
.text_4 {
font-family: var(--texx-1);
color: rgb(63, 63, 63);
font-size: 25px;
}
</style>
</head>
<body>
<heade>
<nav>
<a href="index.html">
<img src="logo.png" alt="Логоtype" class="logo_type"></a>
<ul>
<li class="li_1"><a href="index.html">Главная</a></li>
<li class="li_2" style="border-bottom: 5px solid var(--color-2);
background-color: var(--color-5);
"><a style="color: white;" href="str_menu.html">Наши услуги</a></li>
<li class="li_3"><a href="str_sale.html">О нас</a></li>
<li class="li_4"><a href="str_contact.html">Контакты</a></li>
</ul>
<div class="search-bar">
<input name="s" placeholder="Искать здесь..." type="input">
<button type="submit">Найти</button>
</div>
<div class="social-icons">
<ul>
<li><a href="https://sun9-23.userapi.com/impg/ntk9GoyYwKwDDac7Rzp6t6YqqRVggsXW4w8_VQ/9gr-EUftaS4.jpg?size=2560x2560&quality=95&sign=87e40443b9a9df5b898603194db383e5&type=album"><i class="fab fa-vk"></a></li>
<li><a href="https://sun9-60.userapi.com/impg/uQ9jIO_0Gqc7sJU7Ps-4WjuFBBPvDobF0XDzUg/XoHKBVbKEu0.jpg?size=677x677&quality=95&sign=4aa365debeee584c91633380dbdf5bd3&type=album"><i class="fab fa-telegram"></a></li>
<li><a href="https://sun9-10.userapi.com/impg/CtHHtGm54xNohtfYbvVjDNHsyx3TV_VqDYzMmA/fdoFhbfSAVs.jpg?size=1020x1020&quality=95&sign=2fb5116665732b4a6bbe181a86d6a3ee&type=album"><i class="fab fa-youtube"></a></li>
</ul>
</div>
</nav>
</heade>
<main>
<h1 style="font-size: 60px; font-family: 'ledger'; display: flex; justify-content: center; color: rgb(60, 60, 60)d;">Наши услуги</h1>
<div class="mond_2">
<div class="text_4">
<ul><H3>Наши услуги включают:</ul></H3>
<li>Подбор и бронирование туров.</li>
Реализуем стандартные пакеты, в цену которых уже входит стоимость билета, отеля и трансфера.
<li>Авиабилеты.</li>
Вы можете самостоятельно забронировать и выкупить себе авиабилет на нашем сайте или мы сделаем это для вас.
<li>Страхование.</li>
Подберем для вас лучшие варианты страховки для оформления визы или для вашей личной уверенности.
<li>Визы.</li>
Доверьте этот ответственный этап нам, и мы сделаем все за вас. Вам останется предоставить минимальный пакет документов.
<li>VIP-услуги.</li>
Организуем сопровождение клиента с момента прибытия в аэропорт до посадки на рейс, а также закажем ВИП-зал.
<li>Медицинское сопровождение.</li>
Услуги медсестер и врачей необходимо заказать заблаговременно. Мы решим все организационные вопросы и проинформируем перевозчика о необходимости медицинского сопровождения.
</div>
</div>
<H2>Каждый найдет свой отдых! Вот небольшой список что мы можем предложить!
</H2>
<div class="tur_rum">
<img src="tur1.png" alt="Десерт 1">
<h3>Греция</h3>
Жаркая и загадочная хорошо подойдет для экскурсий.
Цена: от 50.000 рублей/на 1 чел
<a href="index.html#section3"><button>Выбрать этот тур </button></a>
</div>
<div class="tur_rum">
<img src="tur2.png" alt="Десерт 1">
<h3>Боливия</h3>
Дикая, загадочная опасная хорошо подойдет для исследований.
Цена: от 70.000 рублей/на 1 чел
<a href="index.html#section3"><button>Выбрать этот тур </button></a>
</div>
<button class="button_upp" onclick="window.scrollTo(0, 0)"></button>
</main>
<footer>
<div>
<h2>Мы в соц. сетях:</h2>
<ul class="social-iconss">
<li><a href="https://sun9-23.userapi.com/impg/ntk9GoyYwKwDDac7Rzp6t6YqqRVggsXW4w8_VQ/9gr-EUftaS4.jpg?size=2560x2560&quality=95&sign=87e40443b9a9df5b898603194db383e5&type=album"><i class="fab fa-vk"></a></li>
<li><a href="https://sun9-60.userapi.com/impg/uQ9jIO_0Gqc7sJU7Ps-4WjuFBBPvDobF0XDzUg/XoHKBVbKEu0.jpg?size=677x677&quality=95&sign=4aa365debeee584c91633380dbdf5bd3&type=album"><i class="fab fa-telegram"></a></li>
<li><a href="https://sun9-10.userapi.com/impg/CtHHtGm54xNohtfYbvVjDNHsyx3TV_VqDYzMmA/fdoFhbfSAVs.jpg?size=1020x1020&quality=95&sign=2fb5116665732b4a6bbe181a86d6a3ee&type=album"><i class="fab fa-youtube"></a></li>
</ul>
</div>
<div>
<h2>ИП Дилюк Рагнавиндр "Иноземная Гастрономия".</h2>
Copyright © COGNOSPHERE. All Rights Reserved.
</div>
<div>
<h2>Контакты:</h2>
Foreign_Gastronomy@mail.ru
+7 245 436 34 44
+7 245 431 87 99
Тейват, Мондштат, Винокурня рассвет, д1.
</div>
</footer>
</body>
</html>
__________________________________________________________________________
<!DOCTYPE html>
<html>
<head>
<title>Иноземная Гастрономия</title>
<link rel="stylesheet" href="style_1.2.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
<heade>
<nav>
<a href="index.html">
<img src="logo.png" alt="Логоtype" class="logo_type"></a>
<ul>
<li class="li_1"><a href="index.html">Главная</a></li>
<li class="li_2"><a href="str_menu.html">Наши услуги</a></li>
<li class="li_3" style="border-bottom: 5px solid var(--color-2);
background-color: var(--color-5);
"><a style="color: white;" href="str_sale.html">О нас</a></li>
<li class="li_4"><a href="str_contact.html">Контакты</a></li>
</ul>
<div class="search-bar">
<input name="s" placeholder="Искать здесь..." type="input">
<button type="submit">Найти</button>
</div>
<div class="social-icons">
<ul>
<li><a href="https://sun9-23.userapi.com/impg/ntk9GoyYwKwDDac7Rzp6t6YqqRVggsXW4w8_VQ/9gr-EUftaS4.jpg?size=2560x2560&quality=95&sign=87e40443b9a9df5b898603194db383e5&type=album"><i class="fab fa-vk"></a></li>
<li><a href="https://sun9-60.userapi.com/impg/uQ9jIO_0Gqc7sJU7Ps-4WjuFBBPvDobF0XDzUg/XoHKBVbKEu0.jpg?size=677x677&quality=95&sign=4aa365debeee584c91633380dbdf5bd3&type=album"><i class="fab fa-telegram"></a></li>
<li><a href="https://sun9-10.userapi.com/impg/CtHHtGm54xNohtfYbvVjDNHsyx3TV_VqDYzMmA/fdoFhbfSAVs.jpg?size=1020x1020&quality=95&sign=2fb5116665732b4a6bbe181a86d6a3ee&type=album"><i class="fab fa-youtube"></a></li>
</ul>
</div>
</nav>
</heade>
<main style="display: flex; justify-content: center; align-items: center; flex-direction: column;">
<h1>Наша компания может вам предложить</h1>
<div class="text_3">
<div><img src="top_1.png"></div>
<div style="margin: 70px;">
<h2>Что входит в стоимость забронированного тура.</h2>
1. Итоговая стоимость тура, включающая в себя все возможные доплаты такие, как топливный сбор, отельный сбор (например, Италия), виза, страховка от невыезда, горнолыжная страховка, посадочный талон (при путешествии с детьми до двух лет), праздничные ужины (новогодние туры) и т.д.
2. Визовые формальности. Каким образом оформляется виза в ту или иную страну, ее стоимость. Если виза оформляется в консульстве, то необходимо подробно ознакомиться со списком необходимых документов до бронирования тура.
3. Дата начала тура, дата заселения в отель и дата окончания туры. Так, например, дата заселения в отели Таиланда, Индонезии, Мальдивских островов, Индии, Вьетнама и других стран Юго-Восточной Азии приходится на следующий день после даты начала тура. А дата выселения из отелей Кубы, Мексики и Доминиканской Республики на 1 день отстает от даты окончания тура.
4. Страховка от невыезда, страховые случаи, стоимость страховки от невыезда. Порядок отказа от забронированного тура и штрафные санкции.
</div>
</div>
<div class="text_2" style="color: rgb(37, 37, 37);">
Воспользуйтесь этими и другими услугами, заполнив <a href="index.html#section3"> онлайн-форму </a> или позвонив нашим менеджерам по телефону в Москве +7 (499) 495-11-52 и номеру бесплатной горячей линии 8 (800) 700-32-19. Также ждем ваших вопросов на адрес электронной почты travel@startour.ru . Мы расскажем, сколько стоят выбранные услуги, рассчитаем итоговую цену тура и подскажем, какую дату лучше выбрать для поездки.
</div>
<button class="button_upp" onclick="window.scrollTo(0, 0)"></button>
</main>
<footer>
<div>
<h2>Мы в соц. сетях:</h2>
<ul class="social-iconss">
<li><a href="https://sun9-23.userapi.com/impg/ntk9GoyYwKwDDac7Rzp6t6YqqRVggsXW4w8_VQ/9gr-EUftaS4.jpg?size=2560x2560&quality=95&sign=87e40443b9a9df5b898603194db383e5&type=album"><i class="fab fa-vk"></a></li>
<li><a href="https://sun9-60.userapi.com/impg/uQ9jIO_0Gqc7sJU7Ps-4WjuFBBPvDobF0XDzUg/XoHKBVbKEu0.jpg?size=677x677&quality=95&sign=4aa365debeee584c91633380dbdf5bd3&type=album"><i class="fab fa-telegram"></a></li>
<li><a href="https://sun9-10.userapi.com/impg/CtHHtGm54xNohtfYbvVjDNHsyx3TV_VqDYzMmA/fdoFhbfSAVs.jpg?size=1020x1020&quality=95&sign=2fb5116665732b4a6bbe181a86d6a3ee&type=album"><i class="fab fa-youtube"></a></li>
</ul>
</div>
<div>
<h2>ИП Дилюк Рагнавиндр "Иноземная Гастрономия".</h2>
Copyright © COGNOSPHERE. All Rights Reserved.
</div>
<div>
<h2>Контакты:</h2>
Foreign_Gastronomy@mail.ru
+7 245 436 34 44
+7 245 431 87 99
Тейват, Мондштат, Винокурня рассвет, д1.
</div>
</footer>
</body>
</html>
__________________________________________________________________________
<!DOCTYPE html>
<html>
<head>
<title>Иноземная Гастрономия</title>
<link rel="stylesheet" href="style_1.2.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
<heade>
<nav>
<a href="index.html">
<img src="logo.png" alt="Логоtype" class="logo_type"></a>
<ul>
<li class="li_1"><a href="index.html">Главная</a></li>
<li class="li_2"><a href="str_menu.html">Наши услуги</a></li>
<li class="li_3"><a href="str_sale.html">О нас</a></li>
<li class="li_4" style="border-bottom: 5px solid var(--color-2);
background-color: rgb(255, 176, 176)
"><a style="color: white;" href="str_contact.html">Контакты</a></li>
</ul>
<div class="search-bar">
<input name="s" placeholder="Искать здесь..." type="input">
<button type="submit">Найти</button>
</div>
<div class="social-icons">
<ul>
<li><a href="https://sun9-23.userapi.com/impg/ntk9GoyYwKwDDac7Rzp6t6YqqRVggsXW4w8_VQ/9gr-EUftaS4.jpg?size=2560x2560&quality=95&sign=87e40443b9a9df5b898603194db383e5&type=album"><i class="fab fa-vk"></a></li>
<li><a href="https://sun9-60.userapi.com/impg/uQ9jIO_0Gqc7sJU7Ps-4WjuFBBPvDobF0XDzUg/XoHKBVbKEu0.jpg?size=677x677&quality=95&sign=4aa365debeee584c91633380dbdf5bd3&type=album"><i class="fab fa-telegram"></a></li>
<li><a href="https://sun9-10.userapi.com/impg/CtHHtGm54xNohtfYbvVjDNHsyx3TV_VqDYzMmA/fdoFhbfSAVs.jpg?size=1020x1020&quality=95&sign=2fb5116665732b4a6bbe181a86d6a3ee&type=album"><i class="fab fa-youtube"></a></li>
</ul>
</div>
</nav>
</heade>
<main>
<h1 class="toptop"> Наши контакты и режим работы, наши двери всегда открыт для вас!</h1>
<div class="cont">
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d124.81140037476568!2d30.311346766948116!3d59.96561532289889!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4696315ade8ea349%3A0xcad97d89ee9c99d8!2z0KHQtdCy0LXRgC3QnNC10YLRgNC-0L_QvtC70Yw!5e0!3m2!1sru!2sru!4v1715076537772!5m2!1sru!2sru" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<div class="contact-container">
<div class="contact-info">
<h2>Контактная информация</h2>
Адрес: Тейват, Мондштад, Доля Ангелов 1
Тлефон: +7 134 263 09 09
доп: +7 245 436 34 44
Email: Foreign_Gastronomy@mail.ru
Pежим работы: с 8:00 - до 23:00
</div>
</div>
</div>
<button class="button_upp" onclick="window.scrollTo(0, 0)"></button>
</main>
<footer>
<div>
<h2>Мы в соц. сетях:</h2>
<ul class="social-iconss">
<li><a href="https://sun9-23.userapi.com/impg/ntk9GoyYwKwDDac7Rzp6t6YqqRVggsXW4w8_VQ/9gr-EUftaS4.jpg?size=2560x2560&quality=95&sign=87e40443b9a9df5b898603194db383e5&type=album"><i class="fab fa-vk"></a></li>
<li><a href="https://sun9-60.userapi.com/impg/uQ9jIO_0Gqc7sJU7Ps-4WjuFBBPvDobF0XDzUg/XoHKBVbKEu0.jpg?size=677x677&quality=95&sign=4aa365debeee584c91633380dbdf5bd3&type=album"><i class="fab fa-telegram"></a></li>
<li><a href="https://sun9-10.userapi.com/impg/CtHHtGm54xNohtfYbvVjDNHsyx3TV_VqDYzMmA/fdoFhbfSAVs.jpg?size=1020x1020&quality=95&sign=2fb5116665732b4a6bbe181a86d6a3ee&type=album"><i class="fab fa-youtube"></a></li>
</ul>
</div>
<div>
<h2>ИП Дилюк Рагнавиндр "Иноземная Гастрономия".</h2>
Copyright © COGNOSPHERE. All Rights Reserved.
</div>
<div>
<h2>Контакты:</h2>
Foreign_Gastronomy@mail.ru
+7 245 436 34 44
+7 245 431 87 99
Тейват, Мондштат, Винокурня рассвет, д1.
</div>
</footer>
</body>
</body>
</html>
____________________________________________________________________________________________________________________________________________________
:root {
--color-1: rgb(154, 255, 252);
--color-2: rgb(255, 128, 111);
--color-3: rgba(242, 200, 136, 1);
--color-4: rgba(80, 109, 255, 1);
--color-5: rgb(255, 169, 169);
--texx-1: 'ledger';
}
body {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
gap: 200px;
}
nav {
top: 0;
align-items: center;
display: flex;
color: #000000;
background-color: #ffffff;
border-bottom: 5px solid var(--color-1);
left: 50%;
transform: translateX(-50%);
position: fixed; /*! закрепляет меню на экране, даже при прокрутке*/
z-index: 1000; /*! делает меню поверх остальных окон */
width: 100%;
max-width: 1920px;
}
nav ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
font-size: 30px;
font-family: 'ledger';
margin-left: 40px;
}
nav li {
margin-bottom: -7px;
margin-right: 0px;
background-color: rgb(255, 255, 255);
padding: 25px;
padding-right: auto;
border-bottom: 5px solid rgb(154, 255, 252);
transition: background-color 0.3s, text-shadow 0.6s ease, border-bottom 0.3s;
}
nav li:hover {
border-bottom: 5px solid var(--color-2);
background-color: var(--color-5);
text-shadow: 0 0 20px white;
}
nav a {
color: #1087a5;
text-decoration: none;
}
nav li:hover a{
color: white;
text-shadow: 0 0 20px white;
}
.logo_type {
width: 90px;
height: 70px;
padding: 6px;
transition: transform 0.8s ease;
}
.logo_type:hover {
transform: scale(1.3, 1.3);
}
.search-bar {
margin-right: -600px;
}
.search-bar input {
border: 0;
background-color: white;
font-size: 16px;
width: 150px;
/* Добавьте следующие стили для устранения стандартной обводки */
outline: none;
height: 30px;
}
.search-bar button {
margin-right: -16px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
border-radius: 25px;
color: white;
font-size: 20px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
padding: 10px;
border: 2px solid var(--color-5);
background-color: var(--color-3);
height: 40px;
transition: all 0.6s ease-in;
}
.search-bar button:hover {
color: white;
background-color: var(--color-2);
border-color: var(--color-5);
}
.search-bar input:focus{
outline: none;
}
.search-bar {
display: flex;
align-items: center;
color: #454545;
height: 20px;
max-width: 400px;
margin-left: auto;
padding: 10px 15px;
border: 3px solid var(--color-2);
border-radius: 25px; /* Скругление углов */
font-size: 16px; /* Размер шрифта */
font-family: 'ledger';
color: #333; /* Цвет текста */
background-color: #fff; /* Фоновый цвет */
}
body {
background-image: url(2.jpg);
background-size: 100% auto;
background-repeat: no-repeat;
background-position: top center;
}
.social-icons {
margin-left: auto;
}
.button_upp {
color: white;
text-align: center;
cursor: pointer;
position: fixed;
background-color: var(--color-3);
border: 5px solid var(--color-2);
border-radius: 50%;
font-size: 35px;
padding: 30px;
bottom: 130px; /* Отступ снизу */
right: 50px; /* Отступ справа */
z-index: 999;
}
.button_up {
text-align: center;
cursor: pointer;
transition: all 0.3s, transform 0.3s;
padding: 30px;
background-color: var(--color-3);
border: 5px solid var(--color-2);
border-radius: 50%;
position: fixed;
bottom: 220px;
right: 80px;
z-index: 999;
overflow: hidden; /* Обрезаем содержимое вне границ кнопки */
}
.button_upp::before {
position: absolute;
top: 10px;
left: 10px;
content: ""; /* Необходимо для создания псевдоэлемента */
display: block; /* Делает псевдоэлемент видимым */
width: 70%; /* Задает ширину псевдоэлемента */
height: 70%; /* Задает высоту псевдоэлемента */
background: url("up.png") no-repeat center center; /* Путь к изображению и его позиционирование */
background-size: contain;
}
.button_upp:hover {
border-radius: 40px; /* Менее круглая форма при наведении */
color: #fff; /* Показываем текст */
width: 200px;
}
.button_upp:hover::before {
background: none;
content: "Наверх"; /* Текст вместо стрелки при наведении */
font-size: 35px; /* Размер шрифта для текста */
}
.toptop {
display: flex;
justify-content: center;
font-family: var(--texx-1);
font-size: 50px;
color: #0056b3;
}
main {
border: 0;
background-color: rgba(255, 255, 255, 0.8);
min-width: 1450px;
max-width: 1650px;
height: auto;
margin: -30px;
padding: 50px;
}
body {
margin: 0;
padding: 0;
}
.lab {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.history {
display: flex;
color: white;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 24px;
background-color: var(--color-5);
height: 700px;
width: 1400px;
padding: 30px;
margin: 30px;
}
.text_1 h1 {
font-family: 'ledger';
font-size: 50px;
margin: -2px;
}
.text_1 p {
text-indent: 40px;
margin: 10px;
padding: 9px;
}
.img_1 {
height: 600px;
width: 600px;
margin-left: -100px;
}
.img_2 {
margin-right: -100px;
}
.spam {
align-items: center;
justify-content: center;
display: flex;
margin: auto;
margin-top: 50px;
width: 1291px;
height: 470px;
background-color: var(--color-5);
}
.text_2 {
color: white;
font-size: 30px;
}
.yess {
width: 700px;
align-items: center;
}
.lenta {
display: flex;
justify-content: center;
align-items: center;
}
.lenta form {
font-size: 30px;
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 8px 10px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
max-width: 1200px; /* Установите максимальную ширину формы */
}
.lenta .column {
display: flex;
flex-direction: column;
width: 48%; /* Примерно половина ширины формы, чтобы учесть отступы */
margin-bottom: 20px;
}
.lenta label {
margin-bottom: 10px;
}
.lenta input,
.lenta select {
font-size: 25px;
padding: 15px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
.lenta button {
font-size: 25px;
padding: 12px 20px;
background-color: var(--color-5);
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.lenta button:hover {
background-color: var(--color-2);
}
.form_2 {
display: flex; /* Устанавливаем flex контейнер */
align-items: center; /* Центрируем элементы по вертикали */
justify-content: space-between; /* Распределяем пространство между элементами */
max-width: 500px;
margin: 0 auto;
padding: 10px;
background: #f3f3f3;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.form_2 input[type="text"] {
flex-grow: 1; /* Поле ввода займет все доступное пространство */
margin-right: 10px; /* Добавляем отступ справа */
padding: 10px;
border: 2px solid #ddd;
border-radius: 4px;
transition: border-color 0.3s;
}
.form_2 input[type="text"]:focus {
border-color: #007bff;
outline: none;
}
.form_2 button {
padding: 10px 20px; /* Увеличиваем padding для кнопки */
border: none;
border-radius: 4px;
background-color: var(--color-2);
color: white;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}
.form_2 button:hover {
background-color: #0056b3;
}
/* Анимация для кнопки при нажатии */
.form_2 button:active {
animation: clickAnimation 0.2s ease;
}
@keyframes clickAnimation {
0% {
transform: scale(1);
}
50% {
transform: scale(0.95);
}
100% {
transform: scale(1);
}
}
@keyframes moveLeft {
0% { transform: translateX(150%); }
100% { transform: translateX(-150%); }
}
.animated-banner-text {
display: inline-block; /* Для поддержки анимации transform */
white-space: nowrap; /* Чтобы текст оставался в одной строке */
animation: moveLeft 20s linear infinite;
}
@keyframes gradientAnimation {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.animated-banner {
width: 100%;
height: 50px;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradientAnimation 15s ease infinite;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: bold;
}
.mod_1 {
line-height: 0.2;
font-size: 40px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.sms {
display: flex;
align-items: center;
justify-content: space-between;
margin: auto;
background-color: rgba(14, 75, 150, 0.8);
width: 100%;
height: 155px;
}
.fon {
font-size: 16px;
padding: 20px;
background-color: rgba(255, 255, 255, 0.6);
height: 450px;
width: 320px;
}
.lul {
height: 450px;
width: 650px;
background: url(font_1.png);
background-size: 100% auto;
background-repeat: no-repeat;
background-position: top center;
}
.mond {
height: 450px;
width: 650px;
background: url(font_2.png);
background-size: 100% auto;
background-repeat: no-repeat;
background-position: top center;
}
.inad {
height: 450px;
width: 650px;
background: url(font_3.png);
background-size: 100% auto;
background-repeat: no-repeat;
background-position: top center;
}
.lul, .mond, .inad {
transition: transform 0.3s ease;
}
.lul:hover, .mond:hover, .inad:hover {
transform: scale(1.6); /* Увеличивает размер блока на 10% */
}
.reviews-container {
font-size: 24px;
max-width: 1200px;
margin: auto;
padding: 20px;
background-color: #f9f9f9;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.review {
padding: 15px;
border-bottom: 1px solid #eaeaea;
}
.review:last-child {
border-bottom: none;
}
.review-text {
font-style: italic;
color: #333;
}
.review-author {
text-align: right;
color: #666;
margin-top: 5px;
}
.cont {
display: flex;
padding: 20px;
justify-content: space-around;
}
.feedback-form {
max-width: 400px;
margin: 0 auto;
padding: 20px;
border: 1px solid #a2b6e7;
border-radius: 5px;
}
.feedback-form h2 {
color: rgb(247, 167, 54);
font-family: 'Times New Roman', Times, serif;
text-align: center;
margin-bottom: 20px;
}
.feedback-form label {
color: orange;
display: block;
margin-bottom: 5px;
}
.feedback-form input, .feedback-form textarea {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #c4d2f3;
border-radius: 5px;
box-sizing: border-box;
}
.feedback-form button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: #ffffff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.feedback-form button:hover {
background-color: #45a049;
}
.contact-container {
padding: 20px;
font-size: 20px;
font-family: 'Times New Roman', Times, serif;
color: #0091ff;
display: flex;
justify-content: space-around;
margin-top: 20px;
}
.contact-info {
flex: 1;
/* Стили для текста с контактной информацией */
}
.box {
flex: 1;
height: 100px;
margin: 10px;
background-color: lightblue;
text-align: center;
line-height: 100px;
}
.box h2 {
flex: 100%;
text-align: center;
color: #333;
font-family: Arial, sans-serif;
}
.button {
position: fixed;
bottom: 20px;
right: 20px;
background-color: rgb(255, 162, 0);
color: white;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
border: none;
}
.box h1 {
color: #ffffff;
}
.box {
width: 100px;
height: 100px;
margin: 10px;
display: inline-block;
background-color: #f0f0f0;
animation: scaleUp 3s infinite ease-in-out;
}
@keyframes scaleUp {
0%, 100% {
transform: scale(1);
}
33% {
transform: scale(1.5);
}
}
.box:nth-child(1) {
animation-delay: 0s;
}
.box:nth-child(2) {
animation-delay: 1s;
}
.box:nth-child(3) {
animation-delay: 2s;
}
.fixed-menu {
left: 100px;
cursor: pointer;
position: fixed; /* Фиксированное позиционирование */
width: 300px; /* Ширина меню */
height: 200px; /* Высота меню */
z-index: 997;
}
.fixed-menu ul {
display: flex;
flex-direction: column;
list-style-type: none; /* Убираем маркеры списка */
}
.fixed-menu li {
font-size: 30px;
margin: 10px;
padding: 5px;
background-color: rgba(255, 206, 126, 1);
border: 3px solid rgba(85, 41, 9, 1);
border-radius: 5px;
transition: background-color 0.8s ease, color 0.8s ease;
}
.fixed-menu a {
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
padding: 10px; /* Добавляем отступы для ссылок */
margin-bottom: 100px;
color: rgba(85, 41, 9, 1); /* Цвет текста ссылок */
text-decoration: none; /* Убираем подчёркивание текста */
transition: color 0.6s ease;
}
.fixed-menu li:hover a {
color: white;
}
.fixed-menu li:hover {
background-color: rgb(125, 59, 12);
}
.text_3 {
display: flex;
margin: -70px;
justify-content: center;
align-items: center;
font-size: 25px;
font-family: var(--texx-1);
padding: 5px;
}
.text_3 div {
margin-bottom: 20px;
}
.text_3 img {
width: 600px;
}
footer {
font-size: 16px;
display: flex;
bottom: 0;
z-index: 998;
width: 100%;
max-width: 1920px;
justify-content: space-around;
align-items: center;
flex-direction: row;
display: flex;
flex-wrap: wrap;
color: whitesmoke;
border-top: 5px solid var(--color-2);
background-color: var(--color-5);
}
.social-iconss {
padding: 0;
list-style: none;
margin: 10px;
display: flex;
justify-content: flex-end;
width: 100%;
}
.social-iconss a i {
font-size: 32px;
line-height: 64px;
transition: 0.3s;
}
.social-iconss a img {
width: 32px;
height: 32px;
margin-top: 16px;
}
.social-iconss a {
text-decoration:none;
position: relative;
display: block;
width: 64px;
height: 64px;
background: var(--ico-color);
text-align: center;
margin: 0 8px;
box-shadow: 10px 0 10px rgba(0, 0, 0, 0.3);
transition: 0.3s;
color: #fdfdfd;
}
.social-iconss a::before {
content: "";
position: absolute;
top: -6px;
left: 3px;
background: rgba(183, 71, 51, 0.3);
height: 10%;
width: 100%;
transform: skewX(-45deg);
transition: 0.3s;
}
.social-iconss a::after {
content: "";
position: absolute;
top: -3px;
left: 64px;
background: rgba(183, 110, 51, 0.6);
height: 100%;
width: 10%;
transform: skewY(-45deg);
transition: 0.3s;
}
.social-iconss a:hover {
transform: translate(-5%, 5%);
box-shadow: 6px 4px 20px rgba(0, 0, 0, 0.5);
}
.social-iconss a:hover {
background: #b74033;
}
.social-iconss a:hover i {
color: #fff;
}
.social-iconss a:hover::after {
background: rgb(81, 35, 54);
}
.social-iconss a:hover::before {
background: rgb(170, 65, 42);
}
