about.html 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274
  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. .header {
  14. background-color: #F7AA27;
  15. color: white;
  16. padding: 15px 0;
  17. display: flex;
  18. justify-content: space-between;
  19. align-items: center;
  20. }
  21. .header-logo {
  22. margin-left: 20px;
  23. }
  24. .header-logo img {
  25. width: 100px;
  26. height: auto;
  27. }
  28. .header-info {
  29. display: flex;
  30. align-items: center;
  31. }
  32. .header-tech {
  33. font-size: 2em;
  34. margin-right: 10px; /* Минимальный отступ */
  35. }
  36. .header-center {
  37. font-family: 'Tac1', sans-serif;
  38. font-size: 1.2em;
  39. margin-right: 180px; /* Большой отступ */
  40. }
  41. .header-location, .header-phone {
  42. font-size: 1.2em; /* Увеличенный шрифт */
  43. margin-right: 20px; /* Отступ для телефона */
  44. }
  45. .header-nav {
  46. position: relative;
  47. margin-right: 100px;
  48. font-size: 1.2em
  49. }
  50. .header-nav button {
  51. background-color: transparent;
  52. border: none;
  53. padding: 10px 15px;
  54. color: white;
  55. font-size: 1em;
  56. cursor: pointer;
  57. }
  58. .header-nav ul {
  59. list-style: none;
  60. margin: 0;
  61. padding: 0;
  62. position: absolute;
  63. top: 100%;
  64. right: 0;
  65. background-color: rgba(255, 255, 255, 0.8); /* Прозрачный белый цвет */
  66. border-radius: 5px;
  67. display: none;
  68. box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  69. padding: 10px;
  70. border: 1px solid #F7AA27;
  71. }
  72. .header-nav li {
  73. padding: 10px;
  74. border-bottom: 1px solid #F7AA27; /* Цвет разделителя */
  75. transition: background-color 0.3s ease; /* Добавляем плавный переход */
  76. }
  77. .header-nav li:last-child {
  78. border-bottom: none;
  79. }
  80. .header-nav li a {
  81. text-decoration: none;
  82. color: #F7AA27; /* Цвет текста */
  83. }
  84. .header-nav li:hover {
  85. background-color: rgba(247, 170, 39, 0.5); /* Прозрачно-рыжий цвет */
  86. }
  87. .header-nav li a:hover {
  88. color: white; /* Цвет текста при наведении */
  89. }
  90. .header-nav:hover ul {
  91. display: block;
  92. }
  93. .container {
  94. background-color: white;
  95. padding: 20px;
  96. margin: 20px auto;
  97. max-width: 960px;
  98. border-radius: 10px;
  99. display: flex;
  100. align-items: center;
  101. }
  102. .creator-info {
  103. margin-left: 20px;
  104. }
  105. .creator-info h2 {
  106. font-size: 1.5em;
  107. margin-bottom: 10px;
  108. }
  109. .creator-info p {
  110. font-size: 1em;
  111. line-height: 1.5;
  112. margin-bottom: 5px;
  113. }
  114. .creator-image {
  115. width: 200px;
  116. height: 300px;
  117. object-fit: cover;
  118. border-radius: 10px;
  119. margin-right: 120px;
  120. }
  121. .creator-info h2:nth-child(2) { /* Выбираем второй h2 */
  122. color: #F7AA27; /* Устанавливаем цвет */
  123. }
  124. .certificates {
  125. display: flex;
  126. align-items: center;
  127. margin-bottom: 20px;
  128. }
  129. .certificates-image {
  130. width: 305px;
  131. height: 350px;
  132. object-fit: cover;
  133. border-radius: 10px;
  134. margin-right: 20px;
  135. }
  136. .certificates-text {
  137. font-size: 1em;
  138. line-height: 1.5;
  139. }
  140. .footer {
  141. background-color: #DBAD63;
  142. color: white;
  143. text-align: center;
  144. padding: 15px 0;
  145. }
  146. </style>
  147. </head>
  148. <body>
  149. <header class="header">
  150. <div class="header-logo">
  151. <img src="img/лого.png" alt="Логотип методического центра">
  152. </div>
  153. <div class="header-info">
  154. <h1 class="header-tech">ТЕХНОЛОГИЯ</h1>
  155. <div class="header-center">
  156. | Методический центр
  157. </div>
  158. <div class="header-location">
  159. г. Нижний Новгород, пр. Кирова, 12
  160. </div>
  161. <div class="header-phone">
  162. | +7 (831) 291-50-25
  163. </div>
  164. </div>
  165. <div class="header-nav">
  166. <button>Меню</button>
  167. <ul>
  168. <li><a href="index.html">Главная</a></li>
  169. <li><a href="about.html">О нас</a></li>
  170. <li><a href="videos.html">Видео пособия</a></li>
  171. <li><a href="obychenie.html">Обучение</a></li>
  172. <li><a href="contacts.html">Контакты</a></li>
  173. <li><a href="questions.html">Вопросы</a></li>
  174. </ul>
  175. </div>
  176. </header>
  177. <div class="container">
  178. <div class="creator-image">
  179. <img src="img/татьяна.png" alt="Фото создателя">
  180. </div>
  181. <div class="creator-info">
  182. <h2>Создатель методического центра</h2>
  183. <h2>Лобзина Татьяна Павловна</h2>
  184. <p>- Кандидат педагогических наук</p>
  185. <p>- Преподаватель дошкольной педагогики и психологии (НГПУ)</p>
  186. <p>- Магистр менеджмента (магистратура ННГУ им. Лобачевского)</p>
  187. <p>- Педагог-исследователь (аспирантура ГБОУ ДПО НИРО), научная педагогическая деятельность с 2010 года (более 25 статей и публикаций)</p>
  188. </div>
  189. </div>
  190. <div class="container">
  191. <div class="certificates">
  192. <img class="certificates-image" src="img/сертификат1.png" alt="Сертификат 1">
  193. <img class="certificates-image" src="img/сертификат2.png" alt="Сертификат 2">
  194. <img class="certificates-image" src="img/сертификат3.png" alt="Сертификат 3">
  195. </div>
  196. </div>
  197. <div class="container">
  198. <div class="certificates-text">
  199. <h2>О нас</h2>
  200. <p>Методический центр "Технология" - это команда опытных педагогов и специалистов, которые помогают взрослым освоить новые навыки в области робототехники, легоконструирования и раннего развития. </p>
  201. <h2>Мы предлагаем:</h2>
  202. <p>Обучение специалистов</p>
  203. <p> - Педагог раннего развития</p>
  204. <p> - Педагог по легоконструированию</p>
  205. <p> - Тренер по робототехнике</p>
  206. <p> - Легоконструирование</p>
  207. <p> - Легорисование (схемы)</p>
  208. <h2>Мы также предлагаем комплексные решения для детских центров и детских садов:</h2>
  209. <h2 style="color: #F7AA27;">Станьте нашим партнером! </h2>
  210. <p>Мы поможем вам организовать успешную работу детского центра, включая:</p>
  211. <p> - Запуск робототехнического направления</p>
  212. <p> - Построение эффективных бизнес-процессов</p>
  213. <p> - Обучение персонала</p>
  214. <p> - Маркетинговая поддержка</p>
  215. <h2> Почему стоит выбрать нас?</h2>
  216. <p>- Опыт и экспертиза: Наша команда обладает многолетним опытом работы в сфере образования и робототехники. </p>
  217. <p>- Качественные материалы: Мы используем только лучшие материалы и оборудование для обучения.</p>
  218. <p> - Доступные цены: Мы предлагаем конкурентные цены на наши услуги. </p>
  219. <h2> Мы поможем вам: </h2>
  220. <p>- Повысить квалификацию</p>
  221. <p>- Создать собственный детский центр</p>
  222. <p>- Запустить успешное робототехническое направление</p>
  223. <h2 style="color: #F7AA27;">Учитесь на чужом опыте и избегайте ошибок! Достигайте успеха вместе с "Технологией"!</h2>
  224. </div>
  225. </div>
  226. <footer class="footer">
  227. <p>© 2023 Методический центр "Технология"</p>
  228. </footer>
  229. </body>
  230. </html>