Home Verkennen Help
Inloggen
PP_Jirafik
/
Metod_centre
2
0
Vork 0
Bestanden Issues 0 Pull-aanvragen 0 Wiki
Bladeren bron

Frontend

Anastasia 4 maanden geleden
commit
0c35db5d49
32 gewijzigde bestanden met toevoegingen van 2238 en 0 verwijderingen
Zij-aan-zij weergave Toon Diff Stats
  1. 274 0
      about.html
  2. 233 0
      contacts.html
  3. 20 0
      front/front.css
  4. BIN
      front/helvetica_bold.otf
  5. BIN
      front/helvetica_cyr_boldoblique.ttf
  6. BIN
      front/helvetica_cyr_oblique.ttf
  7. BIN
      front/helvetica_light.otf
  8. BIN
      img/1курс.png
  9. BIN
      img/2курс.png
  10. BIN
      img/3курс.png
  11. BIN
      img/вк.png
  12. BIN
      img/емайл.png
  13. BIN
      img/крестик.png
  14. BIN
      img/лого.png
  15. BIN
      img/логотип.png
  16. BIN
      img/мама1.png
  17. BIN
      img/мама2.png
  18. BIN
      img/мама3.png
  19. BIN
      img/мама4.png
  20. BIN
      img/мама5.png
  21. BIN
      img/сертификат1.png
  22. BIN
      img/сертификат2.png
  23. BIN
      img/сертификат3.png
  24. BIN
      img/татьяна.png
  25. BIN
      img/ютуб.png
  26. 192 0
      index.html
  27. 45 0
      js/proverka.js
  28. 409 0
      obychenie.html
  29. 273 0
      ped.html
  30. 200 0
      questions.html
  31. 319 0
      styles/style.css
  32. 273 0
      videos.html

+ 274 - 0
about.html
Bestand weergeven 

@@ -0,0 +1,274 @@
 
+<!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;
 
+        }
 
+
 
+        .header {
 
+            background-color: #F7AA27;
 
+            color: white;
 
+            padding: 15px 0;
 
+            display: flex;
 
+            justify-content: space-between;
 
+            align-items: center;
 
+        }
 
+
 
+        .header-logo {
 
+            margin-left: 20px;
 
+        }
 
+
 
+        .header-logo img {
 
+            width: 100px;
 
+            height: auto;
 
+        }
 
+
 
+        .header-info {
 
+            display: flex;
 
+            align-items: center;
 
+        }
 
+
 
+        .header-tech {
 
+            font-size: 2em;
 
+            margin-right: 10px; /* Минимальный отступ */
 
+        }
 
+
 
+        .header-center {
 
+            font-family: 'Tac1', sans-serif;
 
+            font-size: 1.2em;
 
+            margin-right: 180px; /* Большой отступ */
 
+        }
 
+
 
+        .header-location, .header-phone {
 
+            font-size: 1.2em; /* Увеличенный шрифт */
 
+            margin-right: 20px; /* Отступ для телефона */
 
+        }
 
+
 
+        .header-nav {
 
+            position: relative;
 
+            margin-right: 100px;
 
+            font-size: 1.2em
 
+        }
 
+
 
+        .header-nav button {
 
+            background-color: transparent;
 
+            border: none;
 
+            padding: 10px 15px;
 
+            color: white;
 
+            font-size: 1em;
 
+            cursor: pointer;
 
+        }
 
+
 
+        .header-nav ul {
 
+            list-style: none;
 
+            margin: 0;
 
+            padding: 0;
 
+            position: absolute;
 
+            top: 100%;
 
+            right: 0;
 
+            background-color: rgba(255, 255, 255, 0.8); /* Прозрачный белый цвет */
 
+            border-radius: 5px;
 
+            display: none;
 
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 
+            padding: 10px;
 
+            border: 1px solid #F7AA27;
 
+        }
 
+
 
+        .header-nav li {
 
+            padding: 10px;
 
+            border-bottom: 1px solid #F7AA27; /* Цвет разделителя */
 
+            transition: background-color 0.3s ease; /* Добавляем плавный переход */
 
+        }
 
+
 
+        .header-nav li:last-child {
 
+            border-bottom: none;
 
+        }
 
+
 
+        .header-nav li a {
 
+            text-decoration: none;
 
+            color: #F7AA27; /* Цвет текста */
 
+        }
 
+
 
+        .header-nav li:hover {
 
+            background-color: rgba(247, 170, 39, 0.5); /* Прозрачно-рыжий цвет */
 
+        }
 
+
 
+        .header-nav li a:hover {
 
+            color: white; /* Цвет текста при наведении */
 
+        }
 
+
 
+        .header-nav:hover ul {
 
+            display: block;
 
+        }
 
+
 
+        .container {
 
+            background-color: white;
 
+            padding: 20px;
 
+            margin: 20px auto;
 
+            max-width: 960px;
 
+            border-radius: 10px;
 
+            display: flex;
 
+            align-items: center;
 
+        }
 
+
 
+        .creator-info {
 
+            margin-left: 20px;
 
+        }
 
+
 
+        .creator-info h2 {
 
+            font-size: 1.5em;
 
+            margin-bottom: 10px;
 
+        }
 
+
 
+        .creator-info p {
 
+            font-size: 1em;
 
+            line-height: 1.5;
 
+            margin-bottom: 5px; 
+        } 
+
 
+        .creator-image {
 
+            width: 200px;
 
+            height: 300px;
 
+            object-fit: cover;
 
+            border-radius: 10px;
 
+            margin-right: 120px;
 
+        }
 
+
 
+        .creator-info h2:nth-child(2) { /* Выбираем второй h2 */
 
+            color: #F7AA27; /* Устанавливаем цвет */
 
+        }
 
+        
+
 
+        .certificates {
 
+            display: flex;
 
+            align-items: center;
 
+            margin-bottom: 20px;
 
+        }
 
+
 
+        .certificates-image {
 
+            width: 305px;
 
+            height: 350px;
 
+            object-fit: cover;
 
+            border-radius: 10px;
 
+            margin-right: 20px;
 
+        }
 
+
 
+        .certificates-text {
 
+            font-size: 1em;
 
+            line-height: 1.5;
 
+        }
 
+
 
+        .footer {
 
+            background-color: #DBAD63;
 
+            color: white;
 
+            text-align: center;
 
+            padding: 15px 0;
 
+        }
 
+    </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>
 
+
 
+    <div class="container">
 
+        <div class="creator-image">
 
+            <img src="img/татьяна.png" alt="Фото создателя">
 
+        </div>
 
+        <div class="creator-info">
 
+            <h2>Создатель методического центра</h2>
 
+            <h2>Лобзина Татьяна Павловна</h2>
 
+            <p>- Кандидат педагогических наук</p>
 
+            <p>- Преподаватель дошкольной педагогики и психологии (НГПУ)</p>
 
+                
+            <p>- Магистр менеджмента (магистратура ННГУ им. Лобачевского)</p>
 
+                
+            <p>- Педагог-исследователь (аспирантура ГБОУ ДПО НИРО), научная педагогическая деятельность с 2010 года (более 25 статей и публикаций)</p>
 
+        </div>
 
+    </div>
 
+
 
+    <div class="container">
 
+        <div class="certificates">
 
+            <img class="certificates-image" src="img/сертификат1.png" alt="Сертификат 1">
 
+            <img class="certificates-image" src="img/сертификат2.png" alt="Сертификат 2">
 
+            <img class="certificates-image" src="img/сертификат3.png" alt="Сертификат 3">
 
+        </div>
 
+      
+    </div>
 
+    <div class="container">
 
+    <div class="certificates-text">
 
+        <h2>О нас</h2>
 
+        <p>Методический центр "Технология" - это команда опытных педагогов и специалистов, которые помогают взрослым освоить новые навыки в области робототехники, легоконструирования и раннего развития. </p>
 
+
 
+        <h2>Мы предлагаем:</h2>
 
+            
+            <p>Обучение специалистов</p>
 
+            <p> - Педагог раннего развития</p>
 
+            <p> - Педагог по легоконструированию</p>
 
+            <p> - Тренер по робототехнике</p>
 
+            <p> - Легоконструирование</p>
 
+            <p> - Легорисование (схемы)</p>
 
+            
+            <h2>Мы также предлагаем комплексные решения для детских центров и детских садов:</h2>
 
+            
+            <h2 style="color: #F7AA27;">Станьте нашим партнером!  </h2>
 
+                <p>Мы поможем вам организовать успешную работу детского центра, включая:</p>
 
+                <p> - Запуск робототехнического направления</p>
 
+                <p> - Построение эффективных бизнес-процессов</p>
 
+                <p> - Обучение персонала</p>
 
+                <p> - Маркетинговая поддержка</p>
 
+            
+                <h2>  Почему стоит выбрать нас?</h2>
 
+            
+                <p>- Опыт и экспертиза:  Наша команда обладает многолетним опытом работы в сфере образования и робототехники. </p>
 
+                <p>- Качественные материалы:  Мы используем только лучшие материалы и оборудование для обучения.</p>
 
+                <p> - Доступные цены:  Мы предлагаем конкурентные цены на наши услуги. </p>
 
+            
+            <h2> Мы поможем вам: </h2>
 
+            
+                <p>- Повысить квалификацию</p>
 
+                <p>- Создать собственный детский центр</p>
 
+                <p>- Запустить успешное робототехническое направление</p>
 
+            
+                <h2 style="color: #F7AA27;">Учитесь на чужом опыте и избегайте ошибок! Достигайте успеха вместе с "Технологией"!</h2>
 
+    </div>
 
+</div>
 
+
 
+    <footer class="footer">
 
+        <p>© 2023 Методический центр "Технология"</p>
 
+    </footer>
 
+
 
+</body>
 
+</html>

+ 233 - 0
contacts.html
Bestand weergeven 

@@ -0,0 +1,233 @@
 
+<!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&amp;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>

+ 20 - 0
front/front.css
Bestand weergeven 

@@ -0,0 +1,20 @@
 
+@font-face {
 
+    font-family: 'Tac1';
 
+    src: url(helvetica_cyr_boldoblique.ttf);
 
+    font-weight: 400;
 
+    font-style: normal;
 
+}
 
+
 
+@font-face {
 
+    font-family: 'Tac';
 
+    src: url(helvetica_light.otf);
 
+    font-weight: 700;
 
+    font-style: normal;
 
+}
 
+
 
+@font-face {
 
+    font-family: 'Tac';
 
+    src: url(helvetica_bold.otf);
 
+    font-weight: 900;
 
+    font-style: normal;
 
+}

BIN
front/helvetica_bold.otf
Bestand weergeven


BIN
front/helvetica_cyr_boldoblique.ttf
Bestand weergeven


BIN
front/helvetica_cyr_oblique.ttf
Bestand weergeven


BIN
front/helvetica_light.otf
Bestand weergeven


BIN
img/1курс.png
Bestand weergeven


BIN
img/2курс.png
Bestand weergeven


BIN
img/3курс.png
Bestand weergeven


BIN
img/вк.png
Bestand weergeven


BIN
img/емайл.png
Bestand weergeven


BIN
img/крестик.png
Bestand weergeven


BIN
img/лого.png
Bestand weergeven


BIN
img/логотип.png
Bestand weergeven


BIN
img/мама1.png
Bestand weergeven


BIN
img/мама2.png
Bestand weergeven


BIN
img/мама3.png
Bestand weergeven


BIN
img/мама4.png
Bestand weergeven


BIN
img/мама5.png
Bestand weergeven


BIN
img/сертификат1.png
Bestand weergeven


BIN
img/сертификат2.png
Bestand weergeven


BIN
img/сертификат3.png
Bestand weergeven


BIN
img/татьяна.png
Bestand weergeven


BIN
img/ютуб.png
Bestand weergeven


+ 192 - 0
index.html
Bestand weergeven 

@@ -0,0 +1,192 @@
 
+<!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>
 
+   
+</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>
 
+
 
+    <div class="container">
 
+        <h2>Популярные курсы</h2>
 
+
 
+        <div class="course">
 
+            <img src="img/1курс.png" alt="Название курса 1" class="course-image">
 
+            <div class="course-info">
 
+                <h3 class="course-title">Организация робототехники для детей дошкольного и младшего школьного возраста</h3>
 
+                <p class="course-description"> Предлагает комплексную помощь в запуске робототехнического направления: план, консультации по оборудованию, подготовку специалистов, программы, доп. материалы.
 
+                </p>
 
+                <p class="course-price">Цена: 35 000 рублей</p><br>
 
+                <a href="obychenie.html" class="course-button">Подробнее</a> 
+            </div>
 
+        </div>
 
+
 
+        <div class="course">
 
+            <img src="img/2курс.png" alt="Название курса 2" class="course-image">
 
+            <div class="course-info">
 
+                <h3 class="course-title">Легорисование</h3>
 
+                <p class="course-description">Конструирование на плоскости: авторский конструкторский набор «Жираф-инженерик», комплект схем для легорисования.</p>
 
+                <p class="course-price">Цена: 3 000 рублей</p><br>
 
+                <a href="obychenie.html" class="course-button">Подробнее</a> 
+            </div>
 
+        </div>
 
+
 
+        <div class="course">
 
+            <img src="img/3курс.png" alt="Название курса 3" class="course-image">
 
+            <div class="course-info">
 
+                <h3 class="course-title">Легоконструирование</h3>
 
+                <p class="course-description">Курс по легоконструированию предоставляет пошаговое руководство по созданию построек, транспортных средств и механизмов из кубиков LEGO.</p>
 
+                <p class="course-price">Цена: 10 000 рублей</p><br>
 
+                <a href="obychenie.html" class="course-button">Подробнее</a> 
+            </div>
 
+        </div>
 
+
 
+        <div class="reviews">
 
+            <h3>Отзывы</h3>
 
+            <div class="review-item">
 
+                <img src="img/мама1.png" alt="Фото автора отзыва" class="review-image">
 
+                <div>
 
+                    <p class="review-author">Вера</p>
 
+                    <p class="review-text">В конце уходящего 🌏2023 года хотим выразить 🗣 огромную 🙏🏻 благодарность нашему 💛любимому 🦒“Жирафику”(так любя мы его называем). Огормное спасибо 👏 выражаем всему коллективу! Спасибо за тепло 🥰и уют💝. Спасибо за ☝🏻терпение и ✊🏻труд. Спасибо за 🤝взаимопонимание! Ребенок 👧🏼 счастлив 🥳! Что было до - 😵‍💫Моя дочь отказывалась и отказывается ходить в обычный детский сад. То 😭плакала, то болела 🤒и постоянно недовольный, 🤧больной ребенок. Попали мы в Жираф, (пр. Кирова,12) 3 года назад по рекомендации 👌🏻знакомой. Ребенок👧🏼 влился с 1 дня. И с каждым днем новые 📚 знания, новые 👀навыки, новые умения! Ребенок меньше болеть стал. В 2024 году мы идем в 1 класс и сколько получено здесь знаний, так готов ребенок на 🌹100%! На сегодня наш педагог 👩‍🦳Альбина Ильгизовна, она очень 🤩 крутая. Знает про 👩‍👧‍👦детей все и даже 😉больше. Дочка ее очень 😘любит и с удовольствием ходит на занятия. 🧡 </p>
 
+                </div>
 
+            </div>
 
+            <div class="review-item">
 
+                <img src="img/мама2.png" alt="Фото автора отзыва" class="review-image">
 
+                <div>
 
+                    <p class="review-author">Анна</p>
 
+                    <p class="review-text">Сегодня посещали ваше занятие первый
 
+                        раз, Денису очень понравилось, придёт
 
+                        ещё. Лего для него это прям страсть....
 
+                        Спасибо, Вам, огромное за положительные
 
+                        эмоции детей.И отдельное спасибо за видео
 
+                        отчёт.</p>
 
+                </div>
 
+            </div>
 
+            <div class="review-item">
 
+                <img src="img/мама3.png" alt="Фото автора отзыва" class="review-image">
 
+                <div>
 
+                    <p class="review-author">Ольга</p>
 
+                    <p class="review-text">
 
+                        Татьяна Павловна, большая благодарность Вам и
 
+                        всем педагогам вашего центра, от семьи Толкачёвых,
 
+                        спасибо за знания , которые получил наш сын, за
 
+                        ваши советы, полученные не зря), в следующем году
 
+                        обязательно придём и приведём младшего. Спасибо
 
+                        Вам и всей вашей команде.</p>
 
+                </div>
 
+            </div>
 
+            <div class="review-item">
 
+                <img src="img/мама4.png" alt="Фото автора отзыва" class="review-image">
 
+                <div>
 
+                    <p class="review-author">Лидия</p>
 
+                    <p class="review-text">
 
+                        Хочу выразить благодарность Татьяне Павловне, педагогу "нулевого класса" Альбине Илгизовне. Вы замечательные, внимательные, относитесь к каждому ребенку как к своему. Посещаем наш любимый Жирафик уже 3 года. Сынок бежит каждое утро с радостью, как к себе домой. Очень расстраивается, если впереди выходные и не будет занятий. Ребенок в 2024 году идет в первый класс полностью подготовленный! В этом заслуга преподавателей Жирафа!!! Спасибо Вам огромное! С Наступающим Новым годом!!!</p>
 
+                </div>
 
+            </div>
 
+            <div class="review-item">
 
+                <img src="img/мама5.png" alt="Фото автора отзыва" class="review-image">
 
+                <div>
 
+                    <p class="review-author">Наталья</p>
 
+                    <p class="review-text">
 
+                        Ходим в Жираф второй год . Максиму очень нравиться . И коллектив и занятия и атмосфера ! Отдельно он выделяет Альбину Ильгизовну ) - авторитет и вдохновитель, добрая и справедливая , просто чудесный человек 🥰! На переменках- игры и занятия на сплочение коллектива, укрепление дружбы ! На занятиях - знания и навыки , которые нам так нужны в 1 классе ! Благодарю за чистоту , которую обеспечивает Вера Евгеньевна 🧚🏻! Очень приятно приходить туда , где следят за порядком ! И конечно , руководителя, Татьяну Павловну !!! Видно , когда человек 🔥 горит своим делом и вкладывает в него душу !!! Жалко , что скоро первый класс и придётся прощаться 🤗
 
+                    </div>
 
+            </div>
 
+
 
+
 
+            <button class="buy-button">Оставить отзыв</button>
 
+        </div>
 
+
 
+        <div class="map">
 
+            <h3>Наш адрес</h3>
 
+            <iframe src="https://yandex.ru/map-widget/v1/?um=constructor%3Aa6f01873507308da8343b7fdec711541180e0c9cc02357752b7b63e49fc11b33&amp;source=constructor" width="100%" height="400" frameborder="0"></iframe>
 
+        </div>
 
+    </div>
 
+
 
+    <footer class="footer">
 
+        <p>© 2023 Методический центр "Технология"</p>
 
+    </footer>
 
+
 
+    <div class="buy-form">
 
+        <div class="close-form" onclick="closeForm()">
 
+            <img src="img/крестик.png" alt="Закрыть">
 
+        </div>
 
+        <h2>Оставить отзыв</h2>
 
+        <form>
 
+            <input type="text" placeholder="Имя" required>
 
+            <textarea placeholder="Ваш отзыв" required></textarea>
 
+            
+            <button type="submit" onclick="validateForm()">Отправить</button>
 
+        </form>
 
+    </div>
 
+
 
+    <script>
 
+        const buyButtons = document.querySelectorAll('.buy-button');
 
+        const buyForm = document.querySelector('.buy-form');
 
+
 
+        buyButtons.forEach(button => {
 
+            button.addEventListener('click', () => {
 
+                buyForm.style.display = 'block';
 
+            });
 
+        });
 
+
 
+        function closeForm() {
 
+            buyForm.style.display = 'none';
 
+        }
 
+
 
+        function validateForm() {
 
+            const phoneInput = document.getElementById('phone');
 
+            const phone = phoneInput.value.trim();
 
+
 
+            // Проверяем, начинается ли номер с 7, 8 или +7
 
+            if (!/^(7|8|\+7)/.test(phone)) {
 
+                alert('Номер телефона должен начинаться с 7, 8 или +7.');
 
+                phoneInput.focus();
 
+                return false; // Предотвращаем отправку формы
 
+            }
 
+
 
+            // Проверяем, состоит ли номер из 10 или 11 цифр
 
+            if (!/^\d{10,11}$/.test(phone)) {
 
+                alert('Номер телефона должен состоять из 10 или 11 цифр.');
 
+                phoneInput.focus();
 
+                return false; // Предотвращаем отправку формы
 
+            }
 
+
 
+            // Если телефон валиден, отправляем форму
 
+            alert('Заявка отправлена!');
 
+            closeForm();
 
+            return true; // Разрешаем отправку формы
 
+        }
 
+    </script>
 
+</body>
 
+</html>

+ 45 - 0
js/proverka.js
Bestand weergeven 

@@ -0,0 +1,45 @@
 
+const feedbackButton = document.querySelector('.feedback-button');
 
+        const feedbackForm = document.querySelector('.feedback-form');
 
+        const closeForm = document.querySelector('.close-form');
 
+
 
+        feedbackButton.addEventListener('click', () => {
 
+            feedbackForm.style.display = 'block';
 
+        });
 
+
 
+        closeForm.addEventListener('click', () => {
 
+            feedbackForm.style.display = 'none';
 
+        });
 
+
 
+        // Проверка email
 
+        function validateEmail(email) {
 
+            const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 
+            return re.test(email);
 
+        }
 
+
 
+        // Проверка телефона
 
+        function validatePhone(phone) {
 
+            const re = /^\+?\d{10,13}$/; // Допустимые варианты
 
+            return re.test(phone);
 
+        }
 
+
 
+        // Обработка формы
 
+        feedbackForm.querySelector('form').addEventListener('submit', (event) => { 
+    event.preventDefault();// Останавливаем стандартную отправку
 
+
 
+            const emailInput = feedbackForm.querySelector('input[type="email"]');
 
+            const phoneInput = feedbackForm.querySelector('input[type="tel"]');
 
+
 
+            if (!validateEmail(emailInput.value)) {
 
+                alert("Пожалуйста, введите корректный email.");
 
+                return;
 
+            }
 
+
 
+            if (!validatePhone(phoneInput.value)) {
 
+                alert("Пожалуйста, введите корректный номер телефона.");
 
+                return;
 
+            }
 
+
 
+            // Если данные валидны, показываем сообщение и скрываем форму
 
+            alert("Форма отправлена!");
 
+            feedbackForm.style.display = 'none'; 
+        });

+ 409 - 0
obychenie.html
Bestand weergeven 

@@ -0,0 +1,409 @@
 
+<!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;
 
+        }
 
+
 
+        .container {
 
+            max-width: 960px;
 
+            margin: 0 auto;
 
+            padding: 20px;
 
+        }
 
+
 
+        .section {
 
+            background-color: rgba(247, 171, 39, 0.266); /* Полупрозрачный цвет F7AA27 */
 
+            padding: 20px;
 
+            margin-bottom: 20px;
 
+            border-radius: 10px;
 
+        }
 
+
 
+        .section h2 {
 
+            color: #F7AA27;
 
+            font-size: 2em;
 
+            font-weight: bold;
 
+            margin-bottom: 10px;
 
+        }
 
+
 
+        .program {
 
+            margin-bottom: 10px;
 
+        }
 
+
 
+        .program h3 {
 
+            color: #F7AA27;
 
+            font-weight: bold;
 
+            margin-bottom: 5px;
 
+        }
 
+
 
+        .buy-button {
 
+            background-color: #F7AA27;
 
+            color: white;
 
+            padding: 10px 20px;
 
+            border: none;
 
+            border-radius: 5px;
 
+            cursor: pointer;
 
+        }
 
+
 
+        .buy-form {
 
+            display: none;
 
+            position: fixed;
 
+            top: 50%;
 
+            left: 50%;
 
+            transform: translate(-50%, -50%);
 
+            background-color: white;
 
+            padding: 20px;
 
+            border-radius: 10px;
 
+            z-index: 100;
 
+            opacity: 0.9; /* Полупрозрачность формы */
 
+        }
 
+
 
+        .buy-form input {
 
+            width: 100%;
 
+            padding: 10px;
 
+            margin-bottom: 10px;
 
+            border: 1px solid #ccc;
 
+            border-radius: 5px;
 
+        }
 
+
 
+        .buy-form button {
 
+            background-color: #F7AA27;
 
+            color: white;
 
+            padding: 10px 20px;
 
+            border: none;
 
+            border-radius: 5px;
 
+            cursor: pointer;
 
+        }
 
+
 
+        .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; /* Отступ справа от иконок */
 
+        }
 
+
 
+        .close-button {
 
+            position: absolute;
 
+            top: 10px;
 
+            right: 10px;
 
+            cursor: pointer;
 
+        }
 
+
 
+        .close-button::before,
 
+        .close-button::after {
 
+            content: '';
 
+            position: absolute;
 
+            width: 18px;
 
+            height: 2px;
 
+            background-color: black;
 
+            top: 50%;
 
+            transform: translateY(-50%);
 
+        }
 
+
 
+        .close-button::before {
 
+            transform: translateY(-50%) rotate(45deg);
 
+        }
 
+
 
+        .close-button::after {
 
+            transform: translateY(-50%) rotate(-45deg);
 
+        }
 
+
 
+        .buy-form button {
 
+            display: block; /* Кнопка занимает всю ширину формы */
 
+            margin: 20px auto; /* Выравнивание по центру */
 
+        }
 
+
 
+
 
+        .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;
 
+        }
 
+
 
+    </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="container">
 
+            <div class="section">
 
+                <h2>Обучение специалистов</h2>
 
+                <p><strong>Педагог раннего развития</strong></p>
 
+                <p><strong>Педагог по легоконструированию</strong></p>
 
+                <p><strong>Тренер по робототехнике</strong></p>
 
+                <button class="buy-button">Оставить заявку</button>
 
+            </div>
 
+            <div class="section">
 
+                <h2>Программы</h2>
 
+                <div class="program">
 
+                    <p><strong>Легоконструирование - 10 000 рублей</strong><br><br>
 
+                    <button class="buy-button">Купить</button>
 
+                </div>
 
+                <div class="program">
 
+                    <p><strong>Легоконструирование + Набор "Жираф инженерик" - 30 000 рублей</strong><br><br>
 
+                    <button class="buy-button">Купить</button>
 
+                </div>
 
+                <div class="program">
 
+                    <p><strong>Легорисование (схемы) - 2 000 рублей</strong><br><br>
 
+                    <button class="buy-button">Купить</button>
 
+                </div>
 
+                <div class="program">
 
+                    <p><strong>Робототехника 1 курс - 10 000 рублей</strong><br><br>
 
+                    <button class="buy-button">Купить</button>
 
+                </div>
 
+            </div>
 
+            <div class="section">
 
+                <h2>Программы для детских центров и детских садов</h2>
 
+                <p>Ваш партнер в организации деятельности детского центра и организации робототехнического направления.</p>
 
+                <p>Для начинающих и действующих предприниматель важно, чтобы Детский Центр был доходным.</p>
 
+                <p>Как это сделать?</p>
 
+                <p>Как запустить робототехническое направление?</p>
 
+                <p>Хорошая организации бизнес процессов, слаженная работа коллектива "на результат", маркетинг и возможность руководителя иметь свободное время для стратегического планирования и даже отдыха - путь к результату.</p>
 
+                <p>Предлагаем готовые алгоритмы и решения.</p>
 
+                <p>Учись на чужом опыте и чужих ошибках!</p>
 
+                <p>Успехов и процветания!</p>
 
+            </div>
 
+           
+            <div class="section">
 
+                <h2>Программа "Организация робототехники для детей дошкольного и младшего школьного возраста" - комплексная помощь образовательным учреждениям в запуске робототехнического направления (лего+робототехника)</h2>
 
+                <p><strong>35 000 рублей</strong><br>
 
+                <p>План запуска робототехнического направления, чек листы.</p>
 
+                <p>Консультация по выбору оборудования, оптимальная закупка конструкторов, наборов</p>
 
+                <p>Подготовка специалиста по направлению: оценка специалиста, составление программы обучения, подбор необходимого теоретического курса (с получением сертификата), практические занятия и стажировка в нашем Центре</p>
 
+                <p>Программы по легоконструированию и робототехнике в соответствии с требованиями министерства (в электронном виде) — с возможностью менять и вносить коррективы. Программы включают задачи, планы, графики, диагностические критерии и карты, конспекты занятий</p>
 
+                <p>Дополнительные материалы по организации мультстудии и легоквестов</p>
 
+                <button class="buy-button">Купить</button>
 
+            </div>
 
+            <div class="container">
 
+                <h2>Для эффективной работы детских центров</h2>
 
+            </div>
 
+            <div class="section">
 
+                <h2>Модуль 1 «Педагогическая технология» - программы и конспекты занятий с детьми</h2>
 
+                <p><strong>3 000 - 20 000 рублей</strong><br>
 
+                <p>- Программы раннего развития и подготовки к школе «Умный жираф» (3-4 года, 4-5 лет, 5-6 лет, 6-7 лет)</p>
 
+                <p>- Программа по робототехнике и легоконструированию для дошкольников «Жираф-инженерик»</p>
 
+                <p>- Английский язык</p>
 
+                <p>- Творчество</p>
 
+                <p>- Летний клуб</p>
 
+                <p>- Перечень оборудования и материалов для запуска направления</p>
 
+                <button class="buy-button">Купить</button>
 
+            </div>
 
+            <div class="section">
 
+                <h2>Модуль 2 «Социальный предприниматель» - пакет документов для начала работы детского центра</h2>
 
+                <p><strong>100 000 рублей</strong><br>
 
+                <p>- Модуль 1 (педагогическая технология)</p>
 
+                <p>- Комплект документов, в которых подробно описываются процедуры открытия и организации детского центра</p>
 
+                <p>- Стандарты работы сотрудников (управляющая, администратор, педагоги)</p>
 
+                <p>- Разработанный бизнес-план, форма для управленческого учета</p>
 
+                <p>- Отработанная система подбора и обучения персонала</p>
 
+                <p>- Оплата труда сотрудников (на результат)</p>
 
+                <p>- Стандарты успешной работы педагогов, правила для сотрудников</p>
 
+                <button class="buy-button">Купить</button>
 
+            </div>
 
+            <div class="section">
 
+                <h2>Модуль 3 «Консалтинг» - сопровождение в открытии и деятельности в течение первого года</h2>
 
+                <p><strong>200 000 рублей</strong><br>
 
+                <p>- Модуль 1, 2 (полный комплект)</p>
 
+                <p>- Личные консультации и поддержка по телефону ( Одна часовая консультация в месяц, планирование, контрольные точки, результат )</p>
 
+                <p>- Тренинги и обучения</p>
 
+                <p>- Помощь в поиске помещения</p>
 
+                <p>- Помощь в подборе и закупке оборудования и материалов</p>
 
+                <p>- Обучение педагогов и администраторов детских центров (24 часа)</p>
 
+                <p>- Помощь в запуске рекламной кампании</p>
 
+                <p>- Помощь в подборе персонала</p>
 
+                <button class="buy-button">Купить</button>
 
+            </div>
 
+            <div class="section">
 
+                <h2>Франшиза Детского Центра "Центр развития личности "Жираф"</h2>
 
+                <p><strong>200 000/5000 в месяц</strong><br>
 
+                <p>- Модуль 1, 2, 3 (полный комплект)</p>
 
+                <p>- Название, логотип, брендбук, макеты вывесок, дипломы, флайеры</p>
 
+                <p>- Сайт</p>
 
+                <p>- Методическое обслуживание</p>
 
+                <button class="buy-button">Купить</button>
 
+            </div>
 
+            <div class="section">
 
+                <h2>Личная консультация (кандидат педагогических наук Лобзина Т.П.)</h2>
 
+                <p><strong>5 000 рублей</strong><br>
 
+                <p>- Педагогические методики, программы и технологии</p>
 
+                <p>- Организация работы в Детском центре</p>
 
+                <p>- Подбор персонала. Корпоративная культура и взаимодействие</p>
 
+                <p>- Аудит деятельности детского центра</p>
 
+                <p>- Личная эффективость руководителя</p>
 
+                <p>- Стратегия развития детского центра</p>
 
+                <button class="buy-button">Купить</button>
 
+            </div>
 
+            <div class="section">
 
+                <h2>Отдельные комплекты документов</h2>
 
+                <p><strong>1 500 рублей</strong><br>
 
+                <p>- комплект документов для родителей (договор, паспорт семьи, анкета, правила детского центра)</p>
 
+                <p>- правила работы администратора</p>
 
+                <p>- правила для сотрудников</p>
 
+                <p>- должностные инструкции и трудовой договор</p>
 
+                <p>- форма для управленческого учета</p>
 
+                <p>- форма для рассчета зарплаты</p>
 
+                <p>- система "Облачный ДДС" (Движение денежных средств - онлайн)</p>
 
+                <button class="buy-button">Купить</button>
 
+            </div>
 
+            
+        </div>
 
+    </main>
 
+
 
+    <footer class="footer">
 
+        <p>© 2023 Методический центр "Технология"</p>
 
+    </footer>
 
+
 
+    <div class="buy-form">
 
+        <div class="close-form" onclick="closeForm()">
 
+            <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" id="phone" placeholder="Номер телефона" required>
 
+            <button type="submit" onclick="validateForm()">Оставить заявку</button>
 
+        </form>
 
+    </div>
 
+
 
+    <script>
 
+        const buyButtons = document.querySelectorAll('.buy-button');
 
+        const buyForm = document.querySelector('.buy-form');
 
+
 
+        buyButtons.forEach(button => {
 
+            button.addEventListener('click', () => {
 
+                buyForm.style.display = 'block';
 
+            });
 
+        });
 
+
 
+        function closeForm() {
 
+            buyForm.style.display = 'none';
 
+        }
 
+
 
+        function validateForm() {
 
+            const phoneInput = document.getElementById('phone');
 
+            const phone = phoneInput.value.trim();
 
+
 
+            // Проверяем, начинается ли номер с 7, 8 или +7
 
+            if (!/^(7|8|\+7)/.test(phone)) {
 
+                alert('Номер телефона должен начинаться с 7, 8 или +7.');
 
+                phoneInput.focus();
 
+                return false; // Предотвращаем отправку формы
 
+            }
 
+
 
+            // Проверяем, состоит ли номер из 10 или 11 цифр
 
+            if (!/^\d{10,11}$/.test(phone)) {
 
+                alert('Номер телефона должен состоять из 10 или 11 цифр.');
 
+                phoneInput.focus();
 
+                return false; // Предотвращаем отправку формы
 
+            }
 
+
 
+            // Если телефон валиден, отправляем форму
 
+            alert('Заявка отправлена!');
 
+            closeForm();
 
+            return true; // Разрешаем отправку формы
 
+        }
 
+    </script>
 
+</body>
 
+</html>

+ 273 - 0
ped.html
Bestand weergeven 

@@ -0,0 +1,273 @@
 
+<!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;
 
+        }
 
+
 
+        .header {
 
+            background-color: #F7AA27;
 
+            color: white;
 
+            padding: 15px 0;
 
+            display: flex;
 
+            justify-content: space-between;
 
+            align-items: center;
 
+        }
 
+
 
+        .header-logo {
 
+            margin-left: 20px;
 
+        }
 
+
 
+        .header-logo img {
 
+            width: 100px;
 
+            height: auto;
 
+        }
 
+
 
+        .header-info {
 
+            display: flex;
 
+            align-items: center;
 
+        }
 
+
 
+        .header-tech {
 
+            font-size: 2em;
 
+            margin-right: 10px; /* Минимальный отступ */
 
+        }
 
+
 
+        .header-center {
 
+            font-family: 'Tac1', sans-serif;
 
+            font-size: 1.2em;
 
+            margin-right: 180px; /* Большой отступ */
 
+        }
 
+
 
+        .header-location, .header-phone {
 
+            font-size: 1.2em; /* Увеличенный шрифт */
 
+            margin-right: 20px; /* Отступ для телефона */
 
+        }
 
+
 
+        .header-nav {
 
+            position: relative;
 
+            margin-right: 100px;
 
+            font-size: 1.2em
 
+        }
 
+
 
+        .header-nav button {
 
+            background-color: transparent;
 
+            border: none;
 
+            padding: 10px 15px;
 
+            color: white;
 
+            font-size: 1em;
 
+            cursor: pointer;
 
+        }
 
+
 
+        .header-nav ul {
 
+            list-style: none;
 
+            margin: 0;
 
+            padding: 0;
 
+            position: absolute;
 
+            top: 100%;
 
+            right: 0;
 
+            background-color: rgba(255, 255, 255, 0.8); /* Прозрачный белый цвет */
 
+            border-radius: 5px;
 
+            display: none;
 
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 
+            padding: 10px;
 
+            border: 1px solid #F7AA27;
 
+        }
 
+
 
+        .header-nav li {
 
+            padding: 10px;
 
+            border-bottom: 1px solid #F7AA27; /* Цвет разделителя */
 
+            transition: background-color 0.3s ease; /* Добавляем плавный переход */
 
+        }
 
+
 
+        .header-nav li:last-child {
 
+            border-bottom: none;
 
+        }
 
+
 
+        .header-nav li a {
 
+            text-decoration: none;
 
+            color: #F7AA27; /* Цвет текста */
 
+        }
 
+
 
+        .header-nav li:hover {
 
+            background-color: rgba(247, 170, 39, 0.5); /* Прозрачно-рыжий цвет */
 
+        }
 
+
 
+        .header-nav li a:hover {
 
+            color: white; /* Цвет текста при наведении */
 
+        }
 
+
 
+        .header-nav:hover ul {
 
+            display: block;
 
+        }
 
+
 
+        .container {
 
+            background-color: white;
 
+            padding: 20px;
 
+            margin: 20px auto;
 
+            max-width: 960px;
 
+            border-radius: 10px;
 
+            display: flex;
 
+            align-items: center;
 
+        }
 
+
 
+        .footer {
 
+            background-color: #DBAD63;
 
+            color: white;
 
+            text-align: center;
 
+            padding: 15px 0;
 
+        }
 
+
 
+        /* Стили для новых контейнеров */
 
+        .video-container {
 
+            width: 50%; /* Видео занимает половину ширины контейнера */
 
+            margin-right: 20px;
 
+        }
 
+
 
+        .video-container iframe {
 
+            width: 100%;
 
+            height: 300px;
 
+            border-radius: 10px;
 
+        }
 
+
 
+        .text-container {
 
+            width: 50%; /* Текст занимает половину ширины контейнера */
 
+        }
 
+
 
+        .text-container h2 {
 
+            font-size: 1.5em;
 
+            margin-bottom: 10px;
 
+        }
 
+
 
+        .text-container p {
 
+            font-size: 1em;
 
+            line-height: 1.5;
 
+        }
 
+        .buttons-container {
 
+            display: flex;
 
+            justify-content: center;
 
+            margin-bottom: 20px;
 
+        }
 
+
 
+        .buttons-container button {
 
+            background-color: white;
 
+            color: black;
 
+            border: none;
 
+            padding: 10px 20px;
 
+            font-size: 1em;
 
+            cursor: pointer;
 
+            margin: 0 10px;
 
+            border-radius: 5px;
 
+        }
 
+
 
+        .buttons-container button:hover {
 
+            background-color: #F7AA27;
 
+            color: white;
 
+        }
 
+    </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>
 
+        <br><div class="buttons-container">
 
+            <br><button onclick="window.location.href='videos.html'">Родителям</button>
 
+            <br><button onclick="window.location.href='ped.html'">Педагогам</button>
 
+        </div>
 
+
 
+        <div class="container">
 
+            <div class="video-container">
 
+                <iframe src="https://www.youtube.com/embed/W0Fo7nK63as" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen autoplay="1"></iframe> </div>
 
+            <div class="text-container">
 
+                <h2>Коммуникации для педагогов</h2>
 
+                <p>Узнайте секреты эффективной коммуникации с учениками, родителями и коллегами:
 
+
 
+                    Постройте доверительные отношения.
 
+                    Избегайте конфликтов и находите общий язык.
 
+                    Мотивируйте и вдохновляйте.</p>
 
+            </div>
 
+        </div>
 
+
 
+        <div class="container">
 
+            <div class="video-container">
 
+                <iframe src="https://www.youtube.com/embed/YOUR_VIDEO_ID_2" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
+            </div>
 
+            <div class="text-container">
 
+                <h2>Заголовок 2</h2>
 
+                <p>Текст 2.</p>
 
+            </div>
 
+        </div>
 
+
 
+        <div class="container">
 
+            <div class="video-container">
 
+                <iframe src="https://www.youtube.com/embed/YOUR_VIDEO_ID_3" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
+            </div>
 
+            <div class="text-container">
 
+                <h2>Заголовок 3</h2>
 
+                <p>Текст 3.</p>
 
+            </div>
 
+        </div>
 
+
 
+        <div class="container">
 
+            <div class="video-container">
 
+                <iframe src="https://www.youtube.com/embed/YOUR_VIDEO_ID_4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
+            </div>
 
+            <div class="text-container">
 
+                <h2>Заголовок 4</h2>
 
+                <p>Текст 4.</p>
 
+            </div>
 
+        </div>
 
+
 
+        <div class="container">
 
+            <div class="video-container">
 
+                <iframe src="https://www.youtube.com/embed/YOUR_VIDEO_ID_5" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
+            </div>
 
+            <div class="text-container">
 
+                <h2>Заголовок 5</h2>
 
+                <p>Текст 5.</p>
 
+            </div>
 
+        </div>
 
+    </main>
 
+</div>
 
+</main>
 
+
 
+    <footer class="footer">
 
+        <p>© 2023 Методический центр "Технология"</p>
 
+    </footer>
 
+
 
+</body>
 
+</html>

+ 200 - 0
questions.html
Bestand weergeven 

@@ -0,0 +1,200 @@
 
+<!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; /* Отступ справа от иконок */
 
+        }
 
+
 
+       
+        
+        .question-container {
 
+            
+            margin-bottom: 20px;
 
+            border: 2px dashed #F7AA27;
 
+            padding: 10px;
 
+            border-radius: 10px;
 
+            background-color: rgba(255, 255, 255, 0.8); /* Полупрозрачный фон */
 
+            position: relative; /* Для позиционирования значка + */
 
+        }
 
+
 
+        .question-container h3 {
 
+            margin: 0;
 
+        }
 
+
 
+        .question-container .plus-icon {
 
+           
+            position: absolute;
 
+            top: 50%;
 
+            left: 0; /* Смещаем влево */
 
+            transform: translateY(-50%);
 
+            font-size: 20px;
 
+            color: #F7AA27;
 
+            cursor: pointer;
 
+            font-weight: bold;
 
+            margin-left: -20px; /* Выравниваем с левым краем рамки */
 
+        }
 
+
 
+        .answer {
 
+            display: none; /* Скрываем ответ по умолчанию */
 
+            margin-top: 10px;
 
+        }
 
+
 
+        .answer.show {
 
+            display: block;
 
+        }
 
+    </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">
 
+            <h2>Часто задаваемые вопросы</h2>
 
+            <div class="question-container">
 
+                <div class="plus-icon">+</div>
 
+                <h3>Какие курсы и тренинги мы предлагаем?</h3>
 
+                <div class="answer">
 
+                    Ответ: Наш методический центр предлагает широкий спектр курсов и тренингов для педагогов, руководителей образовательных учреждений и других специалистов в сфере образования. Наша специализация - робототехника, наставничество. Вы можете ознакомиться с полным списком курсов и тренингов на нашем сайте в разделе “Обучение”.
 
+                </div>
 
+            </div>
 
+
 
+            <div class="question-container">
 
+                <div class="plus-icon">+</div>
 
+                <h3> Как стать партнером Методического Центра "Технология"?</h3>
 
+                <div class="answer">
 
+                    Ответ: Обратитесь к нам по телефону или электронной почте, чтобы обсудить возможности сотрудничества.
 
+                </div>
 
+            </div>
 
+
 
+            <div class="question-container">
 
+                <div class="plus-icon">+</div>
 
+                <h3>Какова стоимость участия в курсах?</h3>
 
+                <div class="answer">
 
+                    Ответ: Стоимость участия в каждом курсе указана на странице с описанием курса. Также у вас есть возможность приобрести абонемент на несколько курсов.
 
+                </div>
 
+            </div>
 
+
 
+            <div class="question-container">
 
+                <div class="plus-icon">+</div>
 
+                <h3>Какие документы необходимы для записи на курс?</h3>
 
+                <div class="answer">
 
+                    Ответ: Для записи на курс вам необходимо заполнить заявку на нашем сайте. После обработки заявки с вами свяжется наш менеджер для подтверждения записи и уточнения деталей.
 
+                </div>
 
+            </div>
 
+
 
+            <div class="question-container">
 
+                <div class="plus-icon">+</div>
 
+                <h3>Какие преимущества от обучения в Методическом Центре "Технология"?</h3>
 
+                <div class="answer">
 
+                    Ответ: Обучение в Методическом Центре поможет вам:
 
+
 
+                    Повысить свою квалификацию и профессиональный уровень.
 
+                    Ознакомиться с новейшими методиками и технологиями обучения.
 
+                    Наладить контакты с коллегами и обменяться опытом.
 
+                    Получить поддержку и консультацию специалистов.                </div>
 
+            </div>
 
+            <div class="question-container">
 
+                <div class="plus-icon">+</div>
 
+                <h3>Как получить информацию о предстоящих мероприятиях?</h3>
 
+                <div class="answer">
 
+                    Ответ: Следите за новостями на нашем сайте, подписывайтесь на рассылку или вступайте в наши группы в социальных сетях.                </div>
 
+            </div>
 
+            <div class="question-container">
 
+                <div class="plus-icon">+</div>
 
+                <h3>Как получить консультацию специалиста?</h3>
 
+                <div class="answer">
 
+                    Ответ: Вы можете записаться на консультацию через наш сайт, по телефону или электронной почте.   
+                </div>
 
+            </div>
 
+            <div class="question-container">
 
+                <div class="plus-icon">+</div>
 
+                <h3>Что такое Методический Центр?</h3>
 
+                <div class="answer">
 
+                    Ответ: Методический Центр - это организация, предоставляющая помощь и поддержку педагогам в улучшении качества образования. Мы предлагаем разнообразные ресурсы, тренинги, консультации, а также организуем мероприятия и проекты для повышения квалификации учителей.   
+                </div>
 
+            </div>
 
+        </div>
 
+    </main>
 
+
 
+    <footer class="footer">
 
+        <p>© 2023 Методический центр "Технология"</p>
 
+    </footer>
 
+
 
+
 
+    <script>
 
+        const plusIcons = document.querySelectorAll('.plus-icon');
 
+        const answers = document.querySelectorAll('.answer');
 
+
 
+        plusIcons.forEach((icon, index) => {
 
+            icon.addEventListener('click', () => {
 
+                answers[index].classList.toggle('show');
 
+            });
 
+        });
 
+    </script>
 
+</body>
 
+</html>

+ 319 - 0
styles/style.css
Bestand weergeven 

@@ -0,0 +1,319 @@
 
+@import url(../front/front.css);
 
+body {
 
+    background-color: #FFEED4;
 
+    font-family:  'Tac1', sans-serif;
 
+}
 
+
 
+.header {
 
+    background-color: #F7AA27;
 
+    color: white;
 
+    padding: 15px 0;
 
+    display: flex;
 
+    justify-content: space-between;
 
+    align-items: center;
 
+}
 
+
 
+.header-logo {
 
+    margin-left: 20px;
 
+}
 
+
 
+.header-logo img {
 
+    width: 100px;
 
+    height: auto;
 
+}
 
+
 
+.header-info {
 
+    display: flex;
 
+    align-items: center;
 
+}
 
+
 
+.header-tech {
 
+    font-size: 2em;
 
+    margin-right: 10px; /* Минимальный отступ */
 
+}
 
+
 
+.header-center {
 
+    font-family: 'Tac1', sans-serif;
 
+    font-size: 1.2em;
 
+    margin-right: 180px; /* Большой отступ */
 
+}
 
+
 
+.header-location, .header-phone {
 
+    font-size: 1.2em; /* Увеличенный шрифт */
 
+    margin-right: 20px; /* Отступ для телефона */
 
+}
 
+
 
+.header-nav {
 
+    position: relative;
 
+    margin-right: 100px;
 
+    font-size: 1.2em
 
+}
 
+
 
+.header-nav button {
 
+    background-color: transparent;
 
+    border: none;
 
+    padding: 10px 15px;
 
+    color: white;
 
+    font-size: 1em;
 
+    cursor: pointer;
 
+}
 
+
 
+.header-nav ul {
 
+    list-style: none;
 
+    margin: 0;
 
+    padding: 0;
 
+    position: absolute;
 
+    top: 100%;
 
+    right: 0;
 
+    background-color: rgba(255, 255, 255, 0.8); /* Прозрачный белый цвет */
 
+    border-radius: 5px;
 
+    display: none;
 
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 
+    padding: 10px;
 
+    border: 1px solid #F7AA27;
 
+}
 
+
 
+.header-nav li {
 
+    padding: 10px;
 
+    border-bottom: 1px solid #F7AA27; /* Цвет разделителя */
 
+    transition: background-color 0.3s ease; /* Добавляем плавный переход */
 
+}
 
+
 
+.header-nav li:last-child {
 
+    border-bottom: none;
 
+}
 
+
 
+.header-nav li a {
 
+    text-decoration: none;
 
+    color: #F7AA27; /* Цвет текста */
 
+}
 
+
 
+.header-nav li:hover {
 
+    background-color: rgba(247, 170, 39, 0.5); /* Прозрачно-рыжий цвет */
 
+}
 
+
 
+.header-nav li a:hover {
 
+    color: white; /* Цвет текста при наведении */
 
+}
 
+
 
+.header-nav:hover ul {
 
+    display: block;
 
+}
 
+
 
+.container {
 
+    background-color: white;
 
+    padding: 20px;
 
+    margin: 20px auto;
 
+    max-width: 960px;
 
+    border-radius: 10px;
 
+}
 
+
 
+.course {
 
+    display: flex;
 
+    align-items: center;
 
+    margin-bottom: 20px;
 
+    border-radius: 10px;
 
+    padding: 15px;
 
+    background-color: #fff;
 
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 
+}
 
+
 
+.course-image {
 
+    width: 150px;
 
+    height: 100px;
 
+    object-fit: cover;
 
+    border-radius: 10px;
 
+}
 
+
 
+.course-info {
 
+    margin-left: 20px;
 
+}
 
+
 
+.course-title {
 
+    font-size: 1.2em;
 
+    margin-bottom: 5px;
 
+}
 
+
 
+.course-description {
 
+    font-size: 0.9em;
 
+    line-height: 1.5;
 
+    margin-bottom: 10px;
 
+}
 
+
 
+.course-price {
 
+    font-size: 1em;
 
+    font-weight: bold;
 
+    margin-bottom: 5px;
 
+}
 
+
 
+.course-button {
 
+    background-color: #F7AA27;
 
+    color: white;
 
+    padding: 10px 15px;
 
+    border: none;
 
+    border-radius: 5px;
 
+    cursor: pointer;
 
+}
 
+
 
+.reviews {
 
+    margin-bottom: 20px;
 
+    background-color: #fff;
 
+    border-radius: 10px;
 
+    padding: 15px;
 
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 
+    position: relative; /* Для позиционирования стрелок */
 
+}
 
+
 
+.reviews-title {
 
+    font-size: 1.2em;
 
+    margin-bottom: 10px;
 
+}
 
+
 
+.review-item {
 
+    display: flex;
 
+    align-items: center;
 
+    margin-bottom: 20px;
 
+}
 
+
 
+.review-image {
 
+    width: 80px;
 
+    height: 80px;
 
+    border-radius: 50%;
 
+    object-fit: cover;
 
+    margin-right: 20px;
 
+}
 
+
 
+.review-text {
 
+    font-size: 0.9em;
 
+    line-height: 1.5;
 
+}
 
+
 
+.review-author {
 
+    font-weight: bold;
 
+    margin-bottom: 5px;
 
+}
 
+
 
+.reviews-nav {
 
+    position: absolute;
 
+    bottom: 10px;
 
+    right: 10px;
 
+    display: flex;
 
+}
 
+
 
+.reviews-nav button {
 
+    background-color: transparent;
 
+    border: none;
 
+    padding: 10px;
 
+    font-size: 1.5em;
 
+    cursor: pointer;
 
+    color: #F7AA27;
 
+}
 
+
 
+.reviews-nav button:hover {
 
+    color: #EB7817;
 
+}
 
+
 
+.leave-review {
 
+    display: inline-block;
 
+    background-color: #F7AA27;
 
+    color: white;
 
+    padding: 10px 15px;
 
+    border: none;
 
+    border-radius: 5px;
 
+    cursor: pointer;
 
+}
 
+
 
+.footer {
 
+    background-color: #DBAD63;
 
+    color: white;
 
+    padding: 15px 0;
 
+    text-align: center;
 
+    margin-top: 20px;
 
+}
 
+
 
+.close-button {
 
+    position: absolute;
 
+    top: 10px;
 
+    right: 10px;
 
+    cursor: pointer;
 
+}
 
+
 
+
 
+
 
+
 
+
 
+
 
+.close-button::before,
 
+.close-button::after {
 
+    content: '';
 
+    position: absolute;
 
+    width: 18px;
 
+    height: 2px;
 
+    background-color: black;
 
+    top: 50%;
 
+    transform: translateY(-50%);
 
+}
 
+
 
+.close-button::before {
 
+    transform: translateY(-50%) rotate(45deg);
 
+}
 
+
 
+.close-button::after {
 
+    transform: translateY(-50%) rotate(-45deg);
 
+}
 
+
 
+.buy-form button {
 
+    display: block; /* Кнопка занимает всю ширину формы */
 
+    margin: 20px auto; /* Выравнивание по центру */
 
+}
 
+
 
+.buy-button {
 
+    background-color: #F7AA27;
 
+    color: white;
 
+    padding: 10px 20px;
 
+    border: none;
 
+    border-radius: 5px;
 
+    cursor: pointer;
 
+}
 
+
 
+.buy-form {
 
+    display: none;
 
+    position: fixed;
 
+    top: 50%;
 
+    left: 50%;
 
+    transform: translate(-50%, -50%);
 
+    background-color: white;
 
+    padding: 20px;
 
+    border-radius: 10px;
 
+    z-index: 100;
 
+    opacity: 0.9; /* Полупрозрачность формы */
 
+}
 
+
 
+.buy-form input {
 
+    width: 100%;
 
+    padding: 10px;
 
+    margin-bottom: 10px;
 
+    border: 1px solid #ccc;
 
+    border-radius: 5px;
 
+}
 
+
 
+.buy-form button {
 
+    background-color: #F7AA27;
 
+    color: white;
 
+    padding: 10px 20px;
 
+    border: none;
 
+    border-radius: 5px;
 
+    cursor: pointer;
 
+}
 
+
 
+.close-form {
 
+    position: absolute;
 
+    top: 10px;
 
+    right: 10px;
 
+    cursor: pointer;
 
+}
 
+
 
+.close-form img {
 
+    width: 20px;
 
+    height: 20px;
 
+}

+ 273 - 0
videos.html
Bestand weergeven 

@@ -0,0 +1,273 @@
 
+<!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;
 
+        }
 
+
 
+        .header {
 
+            background-color: #F7AA27;
 
+            color: white;
 
+            padding: 15px 0;
 
+            display: flex;
 
+            justify-content: space-between;
 
+            align-items: center;
 
+        }
 
+
 
+        .header-logo {
 
+            margin-left: 20px;
 
+        }
 
+
 
+        .header-logo img {
 
+            width: 100px;
 
+            height: auto;
 
+        }
 
+
 
+        .header-info {
 
+            display: flex;
 
+            align-items: center;
 
+        }
 
+
 
+        .header-tech {
 
+            font-size: 2em;
 
+            margin-right: 10px; /* Минимальный отступ */
 
+        }
 
+
 
+        .header-center {
 
+            font-family: 'Tac1', sans-serif;
 
+            font-size: 1.2em;
 
+            margin-right: 180px; /* Большой отступ */
 
+        }
 
+
 
+        .header-location, .header-phone {
 
+            font-size: 1.2em; /* Увеличенный шрифт */
 
+            margin-right: 20px; /* Отступ для телефона */
 
+        }
 
+
 
+        .header-nav {
 
+            position: relative;
 
+            margin-right: 100px;
 
+            font-size: 1.2em
 
+        }
 
+
 
+        .header-nav button {
 
+            background-color: transparent;
 
+            border: none;
 
+            padding: 10px 15px;
 
+            color: white;
 
+            font-size: 1em;
 
+            cursor: pointer;
 
+        }
 
+
 
+        .header-nav ul {
 
+            list-style: none;
 
+            margin: 0;
 
+            padding: 0;
 
+            position: absolute;
 
+            top: 100%;
 
+            right: 0;
 
+            background-color: rgba(255, 255, 255, 0.8); /* Прозрачный белый цвет */
 
+            border-radius: 5px;
 
+            display: none;
 
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 
+            padding: 10px;
 
+            border: 1px solid #F7AA27;
 
+        }
 
+
 
+        .header-nav li {
 
+            padding: 10px;
 
+            border-bottom: 1px solid #F7AA27; /* Цвет разделителя */
 
+            transition: background-color 0.3s ease; /* Добавляем плавный переход */
 
+        }
 
+
 
+        .header-nav li:last-child {
 
+            border-bottom: none;
 
+        }
 
+
 
+        .header-nav li a {
 
+            text-decoration: none;
 
+            color: #F7AA27; /* Цвет текста */
 
+        }
 
+
 
+        .header-nav li:hover {
 
+            background-color: rgba(247, 170, 39, 0.5); /* Прозрачно-рыжий цвет */
 
+        }
 
+
 
+        .header-nav li a:hover {
 
+            color: white; /* Цвет текста при наведении */
 
+        }
 
+
 
+        .header-nav:hover ul {
 
+            display: block;
 
+        }
 
+
 
+        .container {
 
+            background-color: white;
 
+            padding: 20px;
 
+            margin: 20px auto;
 
+            max-width: 960px;
 
+            border-radius: 10px;
 
+            display: flex;
 
+            align-items: center;
 
+        }
 
+
 
+        .footer {
 
+            background-color: #DBAD63;
 
+            color: white;
 
+            text-align: center;
 
+            padding: 15px 0;
 
+        }
 
+
 
+        /* Стили для новых контейнеров */
 
+        .video-container {
 
+            width: 50%; /* Видео занимает половину ширины контейнера */
 
+            margin-right: 20px;
 
+        }
 
+
 
+        .video-container iframe {
 
+            width: 100%;
 
+            height: 300px;
 
+            border-radius: 10px;
 
+        }
 
+
 
+        .text-container {
 
+            width: 50%; /* Текст занимает половину ширины контейнера */
 
+        }
 
+
 
+        .text-container h2 {
 
+            font-size: 1.5em;
 
+            margin-bottom: 10px;
 
+        }
 
+
 
+        .text-container p {
 
+            font-size: 1em;
 
+            line-height: 1.5;
 
+        }
 
+        .buttons-container {
 
+            display: flex;
 
+            justify-content: center;
 
+            margin-bottom: 20px;
 
+        }
 
+
 
+        .buttons-container button {
 
+            background-color: white;
 
+            color: black;
 
+            border: none;
 
+            padding: 10px 20px;
 
+            font-size: 1em;
 
+            cursor: pointer;
 
+            margin: 0 10px;
 
+            border-radius: 5px;
 
+        }
 
+
 
+        .buttons-container button:hover {
 
+            background-color: #F7AA27;
 
+            color: white;
 
+        }
 
+    </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>
 
+        <br><div class="buttons-container">
 
+            <br><button>Родителям</button>
 
+            <br><button onclick="window.location.href='ped.html'">Педагогам</button>
 
+        </div>
 
+
 
+        <div class="container">
 
+            <div class="video-container">
 
+                <iframe src="https://www.youtube.com/embed/wJlD8iYfyMo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen autoplay="1"></iframe>            </div>
 
+            <div class="text-container">
 
+                <h2>Социальный предприниматель</h2>
 
+                <p>Почему профессиональных спортсменов начинают воспитывать с дошкольного возраста, а программистов и инженеров – только в старших классах? Задав себе однажды этот вопрос, Татьяна Лобзина, руководитель центра развития личности «Жираф», в поисках ответа начала свой путь в сфере социального предпринимательства. </p>
 
+            </div>
 
+        </div>
 
+
 
+        <div class="container">
 
+            <div class="video-container">
 
+                <iframe src="https://www.youtube.com/embed/pl4WBjE9VNA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen autoplay="1"></iframe></iframe>
 
+            </div>
 
+            <div class="text-container">
 
+                <h2>Подготовка к школе ребенка с 5 лет</h2>
 
+                <p>В этом видео вы узнаете о:
 
+
 
+                    Ключевых навыках, которые необходимы ребенку к 5 годам.
 
+                    Как помочь ребенку адаптироваться к школе.
 
+                    Как сделать процесс обучения интересным и эффективным.</p>
 
+            </div>
 
+        </div>
 
+
 
+        <div class="container">
 
+            <div class="video-container">
 
+                <iframe src="https://www.youtube.com/embed/YOUR_VIDEO_ID_3" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
+            </div>
 
+            <div class="text-container">
 
+                <h2>Заголовок 3</h2>
 
+                <p>Текст 3. Nulla facilisi. Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis.</p>
 
+            </div>
 
+        </div>
 
+
 
+        <div class="container">
 
+            <div class="video-container">
 
+                <iframe src="https://www.youtube.com/embed/YOUR_VIDEO_ID_4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
+            </div>
 
+            <div class="text-container">
 
+                <h2>Заголовок 4</h2>
 
+                <p>Текст 4. Donec sed odio dui. Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
 
+            </div>
 
+        </div>
 
+
 
+        <div class="container">
 
+            <div class="video-container">
 
+                <iframe src="https://www.youtube.com/embed/YOUR_VIDEO_ID_5" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
+            </div>
 
+            <div class="text-container">
 
+                <h2>Заголовок 5</h2>
 
+                <p>Текст 5. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper.</p>
 
+            </div>
 
+        </div>
 
+    </main>
 
+</div>
 
+</main>
 
+
 
+    <footer class="footer">
 
+        <p>© 2023 Методический центр "Технология"</p>
 
+    </footer>
 
+
 
+</body>
 
+</html>