123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233 |
- <!DOCTYPE html>
- <html lang="ru">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link rel="stylesheet" href="./styles/style.css">
- <title>Методический центр "Технология"</title>
- <style>
- body {
- background-color: #FFEED4;
- font-family: 'Tac1', sans-serif;
- }
- /* ... (оставшийся стиль) ... */
- .contacts-container {
- background-color: white;
- padding: 20px;
- margin: 20px auto;
- max-width: 960px;
- border-radius: 10px;
- display: flex;
- flex-direction: column; /* Изменяем направление на столбцовое */
- align-items: center; /* Выравнивание по вертикали и горизонтали */
- }
- .contacts-container h2 {
- color: #F7AA27;
- font-size: 2em;
- margin-bottom: 20px;
- text-align: center; /* Выравниваем заголовок по центру */
- }
- .contact-info {
- display: flex;
- align-items: center;
- margin-bottom: 20px; /* Отступ между секциями */
- }
- .social-icons {
- display: flex;
- align-items: center; /* Выравнивание по вертикали */
- margin-right: 20px; /* Отступ справа от иконок */
- }
- .social-icons a {
- margin-right: 10px;
- text-decoration: none;
- }
- .social-icons img {
- width: 30px;
- height: 30px;
- }
- .email-container {
- display: flex;
- margin-left: 40px;
- align-items: center; /* Выравнивание по вертикали */
- }
- .email-container img {
- width: 20px;
- height: 20px;
- margin-right: 5px; /* Отступ между иконкой и email */
- }
- .feedback-button {
- background-color: #F7AA27;
- color: white;
- padding: 10px 20px;
- border: none;
- border-radius: 5px;
- cursor: pointer;
- font-size: 1em;
- display: block; /* Кнопка занимает всю ширину */
- margin: 20px auto; /* Кнопка по центру */
- width: fit-content; /* Кнопка не растягивается на всю ширину */
- }
- .feedback-form {
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- background-color: rgba(255, 255, 255, 0.8);
- padding: 20px;
- border-radius: 10px;
- display: none; /* Сначала скрываем форму */
- z-index: 100; /* Чтобы форма была поверх всего */
- }
- .feedback-form input,
- .feedback-form textarea {
- width: 100%;
- padding: 10px;
- margin-bottom: 10px;
- border: 1px solid #ccc;
- border-radius: 5px;
- }
- .feedback-form textarea {
- height: 100px;
- }
- .feedback-form button {
- background-color: #F7AA27;
- color: white;
- padding: 10px 20px;
- border: none;
- border-radius: 5px;
- cursor: pointer;
- font-size: 1em;
- display: block; /* Кнопка занимает всю ширину */
- margin: 20px auto; /* Кнопка по центру */
- width: fit-content; /* Кнопка не растягивается на всю ширину */
- }
- .close-form {
- position: absolute;
- top: 10px;
- right: 10px;
- cursor: pointer;
- }
- .close-form img {
- width: 20px;
- height: 20px;
- }
- .contacts-text {
- text-align: center;
- }
- .social-icons p {
- margin-left: 10px; /* Отступ слева от текста */
- }
- .map-container {
- margin-top: 20px; /* Отступ сверху от карты */
- }
- </style>
- </head>
- <body>
- <header class="header">
- <div class="header-logo">
- <img src="img/лого.png" alt="Логотип методического центра">
- </div>
- <div class="header-info">
- <h1 class="header-tech">ТЕХНОЛОГИЯ</h1>
- <div class="header-center">
- | Методический центр
- </div>
- <div class="header-location">
- г. Нижний Новгород, пр. Кирова, 12
- </div>
- <div class="header-phone">
- | +7 (831) 291-50-25
- </div>
- </div>
- <div class="header-nav">
- <button>Меню</button>
- <ul>
- <li><a href="index.html">Главная</a></li>
- <li><a href="about.html">О нас</a></li>
- <li><a href="videos.html">Видео пособия</a></li>
- <li><a href="obychenie.html">Обучение</a></li>
- <li><a href="contacts.html">Контакты</a></li>
- <li><a href="questions.html">Вопросы</a></li>
- </ul>
- </div>
- </header>
- <main>
- <div class="contacts-container">
- <div class="contacts-text">
- <h2>Хотите быть в курсе всех новостей "Методического центра "Технология"?</h2>
- <p>Подписывайтесь на наши соцсети:</p>
- <ul>
- <li>
- <div class="social-icons">
- <a href="https://www.youtube.com/@user-zn9gh3ok3j/videos" target="_blank"><img src="img/ютуб.png" alt="YouTube"></a>
- <p>YouTube: узнавайте о новых программах, смотрите видеоуроки и интервью с нашими педагогами.</p>
- </div>
- </li>
- <li>
- <div class="social-icons">
- <a href="https://vk.com/giraffcr" target="_blank"><img src="img/вк.png" alt="ВКонтакте"></a>
- <p>ВКонтакте: следите за расписанием занятий, акциями и событиями в "Технологии".</p>
- </div>
- </li>
- </ul>
- <p>Остались вопросы?</p>
- <div class="contact-info">
- <div class="email-container">
- <a href="mailto:Tatilo@mail.ru" target="_blank"><img src="img/емайл.png" alt="Email"></a>
- <div class="email">Tatilo@mail.ru Мы всегда рады общению!</div>
- </div>
-
- </div>
- <p>Также, вы можете найти нас:</p>
- </div>
- <div class="map-container">
- <iframe src="https://yandex.ru/map-widget/v1/?um=constructor%3Aa6f01873507308da8343b7fdec711541180e0c9cc02357752b7b63e49fc11b33&source=constructor" width="100%" height="400" frameborder="0"></iframe>
- <p>Карта проезда</p>
- </div>
- <h2>С нетерпением ждем вас в Методическом центре "Технология"!</h2>
- <button class="feedback-button">Обратная связь</button>
- </div>
- <div class="feedback-form">
- <div class="close-form">
- <img src="img/крестик.png" alt="Закрыть">
- </div>
- <h2>Обратная связь</h2>
- <form>
- <input type="text" placeholder="Имя" required>
- <input type="text" placeholder="Фамилия" required>
- <input type="email" placeholder="Email" required>
- <input type="tel" placeholder="Номер телефона" required>
- <textarea placeholder="Ваше сообщение" required></textarea>
- <button type="submit">Отправить</button>
- </form>
- </div>
- </main>
- <footer class="footer">
- <p>© 2023 Методический центр "Технология"</p>
- </footer>
- <script src="./js/proverka.js"></script>
- </body>
- </html>
|