index.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  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. </head>
  9. <body>
  10. <header class="header">
  11. <div class="header-logo">
  12. <img src="img/лого.png" alt="Логотип методического центра">
  13. </div>
  14. <div class="header-info">
  15. <h1 class="header-tech">ТЕХНОЛОГИЯ</h1>
  16. <div class="header-center">
  17. | Методический центр
  18. </div>
  19. <div class="header-location">
  20. г. Нижний Новгород, пр. Кирова, 12
  21. </div>
  22. <div class="header-phone">
  23. | +7 (831) 291-50-25
  24. </div>
  25. </div>
  26. <div class="header-nav">
  27. <button>Меню</button>
  28. <ul>
  29. <li><a href="index.html">Главная</a></li>
  30. <li><a href="about.html">О нас</a></li>
  31. <li><a href="videos.html">Видео пособия</a></li>
  32. <li><a href="obychenie.html">Обучение</a></li>
  33. <li><a href="contacts.html">Контакты</a></li>
  34. <li><a href="questions.html">Вопросы</a></li>
  35. </ul>
  36. </div>
  37. </header>
  38. <div class="container">
  39. <h2>Популярные курсы</h2>
  40. <div class="course">
  41. <img src="img/1курс.png" alt="Название курса 1" class="course-image">
  42. <div class="course-info">
  43. <h3 class="course-title">Организация робототехники для детей дошкольного и младшего школьного возраста</h3>
  44. <p class="course-description"> Предлагает комплексную помощь в запуске робототехнического направления: план, консультации по оборудованию, подготовку специалистов, программы, доп. материалы.
  45. </p>
  46. <p class="course-price">Цена: 35 000 рублей</p><br>
  47. <a href="obychenie.html" class="course-button">Подробнее</a>
  48. </div>
  49. </div>
  50. <div class="course">
  51. <img src="img/2курс.png" alt="Название курса 2" class="course-image">
  52. <div class="course-info">
  53. <h3 class="course-title">Легорисование</h3>
  54. <p class="course-description">Конструирование на плоскости: авторский конструкторский набор «Жираф-инженерик», комплект схем для легорисования.</p>
  55. <p class="course-price">Цена: 3 000 рублей</p><br>
  56. <a href="obychenie.html" class="course-button">Подробнее</a>
  57. </div>
  58. </div>
  59. <div class="course">
  60. <img src="img/3курс.png" alt="Название курса 3" class="course-image">
  61. <div class="course-info">
  62. <h3 class="course-title">Легоконструирование</h3>
  63. <p class="course-description">Курс по легоконструированию предоставляет пошаговое руководство по созданию построек, транспортных средств и механизмов из кубиков LEGO.</p>
  64. <p class="course-price">Цена: 10 000 рублей</p><br>
  65. <a href="obychenie.html" class="course-button">Подробнее</a>
  66. </div>
  67. </div>
  68. <div class="reviews">
  69. <h3>Отзывы</h3>
  70. <div class="review-item">
  71. <img src="img/мама1.png" alt="Фото автора отзыва" class="review-image">
  72. <div>
  73. <p class="review-author">Вера</p>
  74. <p class="review-text">В конце уходящего 🌏2023 года хотим выразить 🗣 огромную 🙏🏻 благодарность нашему 💛любимому 🦒“Жирафику”(так любя мы его называем). Огормное спасибо 👏 выражаем всему коллективу! Спасибо за тепло 🥰и уют💝. Спасибо за ☝🏻терпение и ✊🏻труд. Спасибо за 🤝взаимопонимание! Ребенок 👧🏼 счастлив 🥳! Что было до - 😵‍💫Моя дочь отказывалась и отказывается ходить в обычный детский сад. То 😭плакала, то болела 🤒и постоянно недовольный, 🤧больной ребенок. Попали мы в Жираф, (пр. Кирова,12) 3 года назад по рекомендации 👌🏻знакомой. Ребенок👧🏼 влился с 1 дня. И с каждым днем новые 📚 знания, новые 👀навыки, новые умения! Ребенок меньше болеть стал. В 2024 году мы идем в 1 класс и сколько получено здесь знаний, так готов ребенок на 🌹100%! На сегодня наш педагог 👩‍🦳Альбина Ильгизовна, она очень 🤩 крутая. Знает про 👩‍👧‍👦детей все и даже 😉больше. Дочка ее очень 😘любит и с удовольствием ходит на занятия. 🧡 </p>
  75. </div>
  76. </div>
  77. <div class="review-item">
  78. <img src="img/мама2.png" alt="Фото автора отзыва" class="review-image">
  79. <div>
  80. <p class="review-author">Анна</p>
  81. <p class="review-text">Сегодня посещали ваше занятие первый
  82. раз, Денису очень понравилось, придёт
  83. ещё. Лего для него это прям страсть....
  84. Спасибо, Вам, огромное за положительные
  85. эмоции детей.И отдельное спасибо за видео
  86. отчёт.</p>
  87. </div>
  88. </div>
  89. <div class="review-item">
  90. <img src="img/мама3.png" alt="Фото автора отзыва" class="review-image">
  91. <div>
  92. <p class="review-author">Ольга</p>
  93. <p class="review-text">
  94. Татьяна Павловна, большая благодарность Вам и
  95. всем педагогам вашего центра, от семьи Толкачёвых,
  96. спасибо за знания , которые получил наш сын, за
  97. ваши советы, полученные не зря), в следующем году
  98. обязательно придём и приведём младшего. Спасибо
  99. Вам и всей вашей команде.</p>
  100. </div>
  101. </div>
  102. <div class="review-item">
  103. <img src="img/мама4.png" alt="Фото автора отзыва" class="review-image">
  104. <div>
  105. <p class="review-author">Лидия</p>
  106. <p class="review-text">
  107. Хочу выразить благодарность Татьяне Павловне, педагогу "нулевого класса" Альбине Илгизовне. Вы замечательные, внимательные, относитесь к каждому ребенку как к своему. Посещаем наш любимый Жирафик уже 3 года. Сынок бежит каждое утро с радостью, как к себе домой. Очень расстраивается, если впереди выходные и не будет занятий. Ребенок в 2024 году идет в первый класс полностью подготовленный! В этом заслуга преподавателей Жирафа!!! Спасибо Вам огромное! С Наступающим Новым годом!!!</p>
  108. </div>
  109. </div>
  110. <div class="review-item">
  111. <img src="img/мама5.png" alt="Фото автора отзыва" class="review-image">
  112. <div>
  113. <p class="review-author">Наталья</p>
  114. <p class="review-text">
  115. Ходим в Жираф второй год . Максиму очень нравиться . И коллектив и занятия и атмосфера ! Отдельно он выделяет Альбину Ильгизовну ) - авторитет и вдохновитель, добрая и справедливая , просто чудесный человек 🥰! На переменках- игры и занятия на сплочение коллектива, укрепление дружбы ! На занятиях - знания и навыки , которые нам так нужны в 1 классе ! Благодарю за чистоту , которую обеспечивает Вера Евгеньевна 🧚🏻! Очень приятно приходить туда , где следят за порядком ! И конечно , руководителя, Татьяну Павловну !!! Видно , когда человек 🔥 горит своим делом и вкладывает в него душу !!! Жалко , что скоро первый класс и придётся прощаться 🤗
  116. </div>
  117. </div>
  118. <button class="buy-button">Оставить отзыв</button>
  119. </div>
  120. <div class="map">
  121. <h3>Наш адрес</h3>
  122. <iframe src="https://yandex.ru/map-widget/v1/?um=constructor%3Aa6f01873507308da8343b7fdec711541180e0c9cc02357752b7b63e49fc11b33&amp;source=constructor" width="100%" height="400" frameborder="0"></iframe>
  123. </div>
  124. </div>
  125. <footer class="footer">
  126. <p>© 2023 Методический центр "Технология"</p>
  127. </footer>
  128. <div class="buy-form">
  129. <div class="close-form" onclick="closeForm()">
  130. <img src="img/крестик.png" alt="Закрыть">
  131. </div>
  132. <h2>Оставить отзыв</h2>
  133. <form>
  134. <input type="text" placeholder="Имя" required>
  135. <textarea placeholder="Ваш отзыв" required></textarea>
  136. <button type="submit" onclick="validateForm()">Отправить</button>
  137. </form>
  138. </div>
  139. <script>
  140. const buyButtons = document.querySelectorAll('.buy-button');
  141. const buyForm = document.querySelector('.buy-form');
  142. buyButtons.forEach(button => {
  143. button.addEventListener('click', () => {
  144. buyForm.style.display = 'block';
  145. });
  146. });
  147. function closeForm() {
  148. buyForm.style.display = 'none';
  149. }
  150. function validateForm() {
  151. const phoneInput = document.getElementById('phone');
  152. const phone = phoneInput.value.trim();
  153. // Проверяем, начинается ли номер с 7, 8 или +7
  154. if (!/^(7|8|\+7)/.test(phone)) {
  155. alert('Номер телефона должен начинаться с 7, 8 или +7.');
  156. phoneInput.focus();
  157. return false; // Предотвращаем отправку формы
  158. }
  159. // Проверяем, состоит ли номер из 10 или 11 цифр
  160. if (!/^\d{10,11}$/.test(phone)) {
  161. alert('Номер телефона должен состоять из 10 или 11 цифр.');
  162. phoneInput.focus();
  163. return false; // Предотвращаем отправку формы
  164. }
  165. // Если телефон валиден, отправляем форму
  166. alert('Заявка отправлена!');
  167. closeForm();
  168. return true; // Разрешаем отправку формы
  169. }
  170. </script>
  171. </body>
  172. </html>