contacts.html 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233
  1. <!DOCTYPE html>
  2. <html lang="ru">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <link rel="stylesheet" href="./styles/style.css">
  7. <title>Методический центр "Технология"</title>
  8. <style>
  9. body {
  10. background-color: #FFEED4;
  11. font-family: 'Tac1', sans-serif;
  12. }
  13. /* ... (оставшийся стиль) ... */
  14. .contacts-container {
  15. background-color: white;
  16. padding: 20px;
  17. margin: 20px auto;
  18. max-width: 960px;
  19. border-radius: 10px;
  20. display: flex;
  21. flex-direction: column; /* Изменяем направление на столбцовое */
  22. align-items: center; /* Выравнивание по вертикали и горизонтали */
  23. }
  24. .contacts-container h2 {
  25. color: #F7AA27;
  26. font-size: 2em;
  27. margin-bottom: 20px;
  28. text-align: center; /* Выравниваем заголовок по центру */
  29. }
  30. .contact-info {
  31. display: flex;
  32. align-items: center;
  33. margin-bottom: 20px; /* Отступ между секциями */
  34. }
  35. .social-icons {
  36. display: flex;
  37. align-items: center; /* Выравнивание по вертикали */
  38. margin-right: 20px; /* Отступ справа от иконок */
  39. }
  40. .social-icons a {
  41. margin-right: 10px;
  42. text-decoration: none;
  43. }
  44. .social-icons img {
  45. width: 30px;
  46. height: 30px;
  47. }
  48. .email-container {
  49. display: flex;
  50. margin-left: 40px;
  51. align-items: center; /* Выравнивание по вертикали */
  52. }
  53. .email-container img {
  54. width: 20px;
  55. height: 20px;
  56. margin-right: 5px; /* Отступ между иконкой и email */
  57. }
  58. .feedback-button {
  59. background-color: #F7AA27;
  60. color: white;
  61. padding: 10px 20px;
  62. border: none;
  63. border-radius: 5px;
  64. cursor: pointer;
  65. font-size: 1em;
  66. display: block; /* Кнопка занимает всю ширину */
  67. margin: 20px auto; /* Кнопка по центру */
  68. width: fit-content; /* Кнопка не растягивается на всю ширину */
  69. }
  70. .feedback-form {
  71. position: fixed;
  72. top: 50%;
  73. left: 50%;
  74. transform: translate(-50%, -50%);
  75. background-color: rgba(255, 255, 255, 0.8);
  76. padding: 20px;
  77. border-radius: 10px;
  78. display: none; /* Сначала скрываем форму */
  79. z-index: 100; /* Чтобы форма была поверх всего */
  80. }
  81. .feedback-form input,
  82. .feedback-form textarea {
  83. width: 100%;
  84. padding: 10px;
  85. margin-bottom: 10px;
  86. border: 1px solid #ccc;
  87. border-radius: 5px;
  88. }
  89. .feedback-form textarea {
  90. height: 100px;
  91. }
  92. .feedback-form button {
  93. background-color: #F7AA27;
  94. color: white;
  95. padding: 10px 20px;
  96. border: none;
  97. border-radius: 5px;
  98. cursor: pointer;
  99. font-size: 1em;
  100. display: block; /* Кнопка занимает всю ширину */
  101. margin: 20px auto; /* Кнопка по центру */
  102. width: fit-content; /* Кнопка не растягивается на всю ширину */
  103. }
  104. .close-form {
  105. position: absolute;
  106. top: 10px;
  107. right: 10px;
  108. cursor: pointer;
  109. }
  110. .close-form img {
  111. width: 20px;
  112. height: 20px;
  113. }
  114. .contacts-text {
  115. text-align: center;
  116. }
  117. .social-icons p {
  118. margin-left: 10px; /* Отступ слева от текста */
  119. }
  120. .map-container {
  121. margin-top: 20px; /* Отступ сверху от карты */
  122. }
  123. </style>
  124. </head>
  125. <body>
  126. <header class="header">
  127. <div class="header-logo">
  128. <img src="img/лого.png" alt="Логотип методического центра">
  129. </div>
  130. <div class="header-info">
  131. <h1 class="header-tech">ТЕХНОЛОГИЯ</h1>
  132. <div class="header-center">
  133. | Методический центр
  134. </div>
  135. <div class="header-location">
  136. г. Нижний Новгород, пр. Кирова, 12
  137. </div>
  138. <div class="header-phone">
  139. | +7 (831) 291-50-25
  140. </div>
  141. </div>
  142. <div class="header-nav">
  143. <button>Меню</button>
  144. <ul>
  145. <li><a href="index.html">Главная</a></li>
  146. <li><a href="about.html">О нас</a></li>
  147. <li><a href="videos.html">Видео пособия</a></li>
  148. <li><a href="obychenie.html">Обучение</a></li>
  149. <li><a href="contacts.html">Контакты</a></li>
  150. <li><a href="questions.html">Вопросы</a></li>
  151. </ul>
  152. </div>
  153. </header>
  154. <main>
  155. <div class="contacts-container">
  156. <div class="contacts-text">
  157. <h2>Хотите быть в курсе всех новостей "Методического центра "Технология"?</h2>
  158. <p>Подписывайтесь на наши соцсети:</p>
  159. <ul>
  160. <li>
  161. <div class="social-icons">
  162. <a href="https://www.youtube.com/@user-zn9gh3ok3j/videos" target="_blank"><img src="img/ютуб.png" alt="YouTube"></a>
  163. <p>YouTube: узнавайте о новых программах, смотрите видеоуроки и интервью с нашими педагогами.</p>
  164. </div>
  165. </li>
  166. <li>
  167. <div class="social-icons">
  168. <a href="https://vk.com/giraffcr" target="_blank"><img src="img/вк.png" alt="ВКонтакте"></a>
  169. <p>ВКонтакте: следите за расписанием занятий, акциями и событиями в "Технологии".</p>
  170. </div>
  171. </li>
  172. </ul>
  173. <p>Остались вопросы?</p>
  174. <div class="contact-info">
  175. <div class="email-container">
  176. <a href="mailto:Tatilo@mail.ru" target="_blank"><img src="img/емайл.png" alt="Email"></a>
  177. <div class="email">Tatilo@mail.ru Мы всегда рады общению!</div>
  178. </div>
  179. </div>
  180. <p>Также, вы можете найти нас:</p>
  181. </div>
  182. <div class="map-container">
  183. <iframe src="https://yandex.ru/map-widget/v1/?um=constructor%3Aa6f01873507308da8343b7fdec711541180e0c9cc02357752b7b63e49fc11b33&amp;source=constructor" width="100%" height="400" frameborder="0"></iframe>
  184. <p>Карта проезда</p>
  185. </div>
  186. <h2>С нетерпением ждем вас в Методическом центре "Технология"!</h2>
  187. <button class="feedback-button">Обратная связь</button>
  188. </div>
  189. <div class="feedback-form">
  190. <div class="close-form">
  191. <img src="img/крестик.png" alt="Закрыть">
  192. </div>
  193. <h2>Обратная связь</h2>
  194. <form>
  195. <input type="text" placeholder="Имя" required>
  196. <input type="text" placeholder="Фамилия" required>
  197. <input type="email" placeholder="Email" required>
  198. <input type="tel" placeholder="Номер телефона" required>
  199. <textarea placeholder="Ваше сообщение" required></textarea>
  200. <button type="submit">Отправить</button>
  201. </form>
  202. </div>
  203. </main>
  204. <footer class="footer">
  205. <p>© 2023 Методический центр "Технология"</p>
  206. </footer>
  207. <script src="./js/proverka.js"></script>
  208. </body>
  209. </html>