Производство
Робототехника, ЧПУ, машиностроение и слесарные работы — современное производство и точная инженерия.
4 специальности
- Мехатроника и робототехника
- Технология машиностроения
- Оператор-наладчик ЧПУ
- Мастер слесарных работ
2026 / Дизайн · Разработка
КРМК
Сайт для абитуриентов Казанского радиомеханического колледжа: видео на первом экране, направления, тест на профессию и форма заявки.
10
специальностей
О проекте
Колледж, который называет себя технопарком
Казанский радиомеханический колледж открылся в 1967 году как техническое училище № 51 при производственном объединении «Радиоприбор». Сегодня он называет себя технопарком цифровой трансформации: здесь учат производству, радиоэлектронике, IT и креативным профессиям.
Для абитуриентов мы сделали одну длинную страницу, которая ведёт от первого впечатления к заявке: видео на первом экране, четыре направления, десять специальностей, тест для тех, кто ещё не выбрал, причины поступать и контакты приёмной комиссии. Страница говорит с абитуриентом на «ты» и коротко.
- направления, у каждого свой цвет из знака колледжа
- 4
- специальностей в одном списке
- 10
- вопросов в тесте на профессию
- 10
- библиотек и шагов сборки: чистые HTML, CSS и JavaScript
- 0
Порядок страницы
- 01Видео на первом экране
- 02О колледже
- 03Направления
- 04Специальности
- 05Тест на профессию
- 06Почему КРМК
- 07Люди колледжа
- 08Приём 2026
- 09Контакты и карта
Первый экран
Первый экран — видео о колледже
Страница открывается видео: вывеска колледжа, мастерская с экспертами и конкурсантами, пайка платы, сцена. Поверх — заголовок «Технопарк цифровой трансформации», подзаголовок о том, кого здесь готовят и как поступить, и две кнопки: выбрать специальность или узнать больше.
Кадры из фонового видео
Вывеска колледжа 
Мастерская 
Пайка платы 
Сцена
О колледже
Фото здания раскрывается на весь экран
Второй блок держит экран, пока вы прокручиваете: фото здания растёт из карточки со скруглёнными углами до краёв окна, а заголовок «Не просто колледж — технопарк» переезжает в центр и становится белым. Ниже — тот же приём, собранный по коду сайта.
Прокрутите медленно — фото раскроется
01 — О колледже
Не просто колледж —
технопарк
Соединяем инженерию, IT и креативные индустрии под одной крышей.
Направления
Четыре области под одной крышей
Десять специальностей разложены по четырём направлениям, и у каждого свой цвет из знака колледжа: производство — зелёный, радиоэлектроника — красный, IT — фиолетовый, креативная экономика — жёлтый. Вкладки следят за прокруткой, а нажатие на вкладку приводит к нужной карточке.
02 — Направления
Каждая программа КРМК относится к одному из четырёх направлений. Скролли и узнавай — или нажми плашку.
Радиоэлектроника
Монтаж и ремонт электронных приборов, контроль качества и сборка радиоэлектронной аппаратуры.
3 специальности
- Монтаж и ремонт электроники
- Управление качеством
- Монтажник РЭА
Информационные технологии
Компьютерные системы, программирование и цифровая инфраструктура. Профессии, востребованные сегодня и завтра.
1 специальность
- Компьютерные системы и комплексы
Креативная экономика
Дизайн, event-менеджмент и социально-культурная деятельность. Творчество как профессия и продукт.
2 специальности
- Дизайн (по отраслям)
- Социально-культурная деятельность
Специальности
Заявка открывается с выбранной специальностью
Специальности собраны в аккордеон: одновременно открыта только одна строка, цветная метка показывает направление. Внутри — чем занимается специалист и кем он сможет работать, а кнопка «Подать заявление» открывает заявку, где эта специальность уже выбрана.
03 — Специальности
10 программ обучения
- Производство
- О профессии
- Проектирование, программирование и обслуживание роботов, мехатронных систем и автоматизированных производств.
- Кем работать
- Инженер-робототехник, наладчик мехатроники, специалист АСУТП
Тест на профессию
10 вопросов — одна специальность
Кто ещё не выбрал, проходит тест. Каждый ответ добавляет баллы одной или нескольким специальностям, и после десятого вопроса побеждает та, что набрала больше всех. Здесь те же вопросы и те же веса ответов, что в коде сайта, а цветные фигуры показывают, как складывается счёт.
Тест на профессию
Не знаешь, что выбрать?
Мы подскажем.
10 вопросов — и узнаешь, какая из 10 специальностей КРМК подходит тебе больше всего.
Счёт специальностей
Вопрос 1 из 10
Что тебе ближе всего?
Результат переносится в заявку: «Оставить заявку» откроет форму выше с этой специальностью.
Приём 2026
Причины, приём и дорога до колледжа
Ближе к концу страница отвечает на вопросы, от которых зависит решение: пять причин поступать, три экрана приёма, которые уходят вверх шторкой при прокрутке, и контакты приёмной комиссии с картой.
04 — Почему КРМК
5 причин выбрать нас
- 01
Без ЕГЭ и ГИА
Поступление по среднему баллу аттестата. Просто и предсказуемо.
- 02
Бюджетные места
Обучение за счёт государства — реальная экономия на старте.
- 03
Стипендии
Поддержка студентов — стипендия каждый месяц.
- 04
Отсрочка от армии
На время обучения служба в армии откладывается.
- 05
В ВУЗ — без ЕГЭ
Поступление в вузы по упрощённой схеме после колледжа.
Экраны приёма — прокрутите страницу
01 — Приём 2026
Начни обучение
осенью 2026
Приёмная комиссия открыта. Поступление без ЕГЭ.
02 — Мастерские
Учись на
современном оборудовании
Станки с ЧПУ, паяльные линии и цифровая студия — как на реальном производстве.
03 — Сообщество
Стань частью
технопарка
Студенты, преподаватели-практики и партнёры индустрии — общий путь в профессию.
Тексты панелей — с сайта, первый сокращён; фотографии за ними здесь заменены цветом.
Контакты приёмной комиссии на сайте
- Адрес
- г. Казань, ул. Красного Пожарника, 1а
- Телефон
- +7 (843) 297-00-62
- postupi-vkrmk@yandex.ru
Телефон
Та же история в кармане
На телефоне навигация прячется в меню, направления идут карточками одна под другой, строка специальности раскрывается на всю ширину, тест открывается карточкой поверх страницы, а причины выстраиваются в колонку.
Первый экран
Меню
Направления
Специальность
Тест
Пять причин
Итог
Что вошло в сайт
Сайт работает на GitHub Pages, без сборки и сторонних библиотек.
- Одностраничный сайт для абитуриентов на HTML, CSS и JavaScript
- Первый экран с видео о колледже
- Фото здания, которое раскрывается при прокрутке
- Доска четырёх направлений с вкладками, которые следят за прокруткой
- Список 10 специальностей и интерфейс формы заявки с выбранной специальностью
- Тест на профессию из 10 вопросов
- Пять причин, экраны приёма и контакты с картой
- Мобильная версия со своим меню