/
rykit
/
digital-ducational
Обзор
Документация
Войти
/
rykit
/
digital-ducational
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
index.html
199 строк
14 KB
Иван Якимов
Рефакторинг + фикс пагинации назад
11 ноя 2023, 23:08
11 ноя 2023, 23:08
fb270e3
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style/style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" /> <title>Цифровой образовательный контент: Машиностроение</title> </head> <body> <header class="header"> <div class="container"> <div class="container__logo"> <img src="img/logo1.svg" alt="logo"> </div> <div class="header__logo"> <div class="header__logo-title"> <div class="header__logo-title-text"> <h2>Машиностроение</h2> </div> <div class="header__btns-nav"> <a href="#ex1" class="header__btn-nav header__btn-nav--contacts" rel="modal:open">Информация о контенте</a> <a href="#ex2" class="header__btn-nav header__btn-nav--words" rel="modal:open">Ключевые слова</a> </div> </div> <div class="header__logo-subtitle"> <h3 class="header__logo-subtitle-text">Выбор оборудования, инструмента и технологической оснастки</h3> </div> </div> </div> <div class="header__background-subtitle"></div> </header> <main class="main main-cards"> <div class="main-card"> <div class="main-card__header"> <div class="main-card__header-line main-card__header-line--light"></div> <p class="main-card-text">Инфографика</p> </div> <div class="main-card__content"> <div class="main-card__content-head main-card__content-head--first"> <p class="main-card-text__content-head-text">Освоение нового материала</p> </div> <p class="main-card__content-theme">Оборудование по обработке заготовок</p> <div class="main-card__content-btns "> <a href="#ex3" rel="modal:open"> <div class="main-card__content-btn main-card__content-btn--info"> Справка <img src="img/papersheet.png" alt="papersheet" style="height:14px; margin-left: 5px;" /> </div> </a> <a href="pages/infographics.html"> <div class="main-card__content-btn main-card__content-btn--exe"> Задание <img src="img/Polygon 1.png" alt="papersheet" style="height:14px; margin-left: 5px;"> </div> </a> </div> </div> </div> <div class="main-card"> <div class="main-card__header"> <div class="main-card__header-line"></div> <p class="main-card-text">Виртуальный тренажер</p> </div> <div class="main-card__content"> <div class="main-card__content-head main-card__content-head--second"> <p class="main-card-text__content-head-text">Применение <br> изученного <br>материала</p> </div> <p class="main-card__content-theme">Режущий инструмент</p> <div class="main-card__content-btns"> <a href="#ex4" rel="modal:open"> <div class="main-card__content-btn main-card__content-btn--info"> Справка <img src="img/papersheet.png" alt="papersheet" title="papersheet" style="height:14px;margin-left: 5px;"> </div> </a> <a href="pages/virtual_simulator.html" class=""> <div class="main-card__content-btn main-card__content-btn--exe"> Задание <img src="img/Polygon 1.png" alt="papersheet" style="height:14px; margin-left: 5px;"> </div> </a> </div> </div> </div> <div class="main-card"> <div class="main-card__header"> <div class="main-card__header-line main-card__header-line--dark"></div> <p class="main-card-text">Интерактивная мини-игра</p> </div> <div class="main-card__content"> <div class="main-card__content-head main-card__content-head--thrid"> <p class="main-card-text__content-head-text">Диагностика приобретенных <br>знаний, умений,<br> навыков</p> </div> <p class="main-card__content-theme">Станочные приспособления</p> <div class="main-card__content-btns"> <a href="#ex5" rel="modal:open"> <div class="main-card__content-btn main-card__content-btn--info"> Справка <img src="img/papersheet.png" alt="papersheet" style="height:14px;margin-left: 5px;"> </div> </a> <a href="pages/mini_game.html"> <div class="main-card__content-btn main-card__content-btn--exe"> Задание <img src="img/Polygon 1.png" alt="papersheet" style="height:14px; margin-left: 5px;"> </div> </a> </div> </div> </div> </main> <div class="triangle"> <div class="triangle_img"><img src="img/Group 12.png" alt="triangle" ></div> </div> <!-- modals --> <div id="ex1" class="modal"> <p class="modal__header">ФГОС СПО 15.02.16</p> <p class="modal__text">Технология машиностроения</p> <p class="modal__header">МДК 01.01</p> <p class="modal__text"> Разработка технологических процессов изготовления деталей машин с применением систем автоматизированного проектирования</p> <p class="modal__header">Раздел</p> <p class="modal__text">Технологические процессы изготовления деталей машин </p> <p class="modal__header">Тема</p> <p class="modal__text">Выбор оборудования, инструмента и технологической оснастки</p> </div> <div id="ex2" class="modal"> <p class="modal__header">Ключевые слова</p> <p class="modal__text"><b>Оборудование</b> - любое необходимое производству машины или приборы.</p> <p class="modal__text"><b>Технологическая оснастка</b> - средства технологического оснащения, дополняющие технологическое оборудование, для выполненияопределенной части технологического процесса.</p> <p class="modal__text"><b>Измерительный инструмент</b> - специальное устройство для точного определения размеров, а также других геометрических характеристик деталей и предметов.</p> <p class="modal__text"><b>Станочные приспособления</b> - дополнительные оборудования к металлообрабатывающему станку, предназначенные для закрепления в нем обрабатываемой заготовки и надежной связи его со станком.</p> </div> <div id="ex3" class="modal"> <p class="modal__header">Рекомендации для обучающегося</p> <ul> <li class="modal__text">Повторите ранее пройденный материал</li> <li class="modal__text">Ознакомьтесь с теоретическим материалом и динамической инфографикой по теме</li> <li class="modal__text">Если в процессе изучения материала возникнут вопросы, то запишите их для дальнейшего обсуждения с преподавателем и/или с группой обучающихся.</li> <li class="modal__text">При необходимости просмотрите материал еще раз</li> <li class="modal__text">Возвращайтесь к наиболее сложным аспектам темы</li> <li class="modal__text">Соблюдайте здоровьесберегающий режим: чередуйте работу с электронными носителями с отдыхом и гимнастикой для глаз</li> </ul> </div> <div id="ex4" class="modal"> <p class="modal__header">Рекомендации для обучающегося</p> <ul> <li class="modal__text">Повторите ранее пройденный материал</li> <li class="modal__text">Ознакомьтесь с теоретическим материалом и динамической инфографикой по теме</li> <li class="modal__text">Если в процессе изучения материала возникнут вопросы, то запишите их для дальнейшего обсуждения с преподавателем и/или с группой обучающихся.</li> <li class="modal__text">При необходимости просмотрите материал еще раз</li> <li class="modal__text">Возвращайтесь к наиболее сложным аспектам темы</li> <li class="modal__text">Соблюдайте здоровьесберегающий режим: чередуйте работу с электронными носителями с отдыхом и гимнастикой для глаз</li> </ul> </div> <div id="ex5" class="modal"> <p class="modal__header">Рекомендации для обучающегося</p> <ul> <li class="modal__text">Повторите ранее пройденный материал</li> <li class="modal__text">Ознакомьтесь с теоретическим материалом и динамической инфографикой по теме</li> <li class="modal__text">Если в процессе изучения материала возникнут вопросы, то запишите их для дальнейшего обсуждения с преподавателем и/или с группой обучающихся.</li> <li class="modal__text">При необходимости просмотрите материал еще раз</li> <li class="modal__text">Возвращайтесь к наиболее сложным аспектам темы</li> <li class="modal__text">Соблюдайте здоровьесберегающий режим: чередуйте работу с электронными носителями с отдыхом и гимнастикой для глаз</li> </ul> </div> <footer class="footer"> <div class="footer-container"> <div class="footer-container__columns"> <div class="footer-container__column"> <h4 class="footer-container__column-title">ФГОС СПО 15.02.16</h4> <p class="footer-container__column-text">Технология машиностроения</p> </div> <div class="footer-container__column"> <h4 class="footer-container__column-title">МДК 01.01</h4> <p class="footer-container__column-text"> Разработка технологических процессов изготовления деталей машин с применением систем автоматизированного проектирования</p> </div> </div> <div class="footer-container__columns"> <div class="footer-container__column-three"> <div class="footer-container__column-third-col"> <h5>Цифровой образовательный контент</h5> </div> <div class="footer-container__column-thrid-logo"> <img src="img/prof.png" alt="prof_logo"> </div> </div> </div> </div> </footer> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script> </body> </html>