вернуться на разводящую

Компоненты, используемые в вёрстке

Модалки

modal-team link

modal-team link

modal-certificate link

modal-offline link

modal-online link

Форма заявки консалтинг

Форма заявки на покупку ПО

Форма заявки на курс

Заявка отправлена

Галерея сертификатов

Выездное обучение

Кнопки

+link({isLink: true, text: "обучаем"}).link--green.link--extra-large.link--underline
обучаем
+button({isLink: false, text: "все кейсы"}).button--border-gray.button--bold

+button({isLink: false, iconName: "arrow-left", iconWidth: 14, iconHeight: 24}).button--small.button--border-gray

+button({isLink: false, iconName: "arrow-right", iconWidth: 14, iconHeight: 24}).button--small.button--border-gray

+button({isLink: false, iconName: "arrow-left", iconWidth: 14, iconHeight: 24, disabled: true}).button--small.button--border-gray

+link({isLink: true, text: "Узнать подробнее"}).link--green.link--small

+link({isLink: true, text: "Состав коллекции"}).link--green.link--small

Узнать подробнееСостав коллекции
+button({isLink: false, text: "Купить"}).button--green
+button({isLink: false, text: "Подробнее"}).button--border-green
+button({isLink: false, text: "Free demo", iconName: "arrow-down", iconWidth: 24, iconHeight: 24}).button--border-green
+link({isLink: true, text: "Скачать", iconName: "arrow-top-right", iconWidth: 24, iconHeight: 24}).link--green.link--medium
Скачать
+button({isLink: false, text: "все сертификаты",}).button--white.button--bold

+button({isLink: false, iconName: "arrow-left", iconWidth: 14, iconHeight: 24}).button--small.button--white

+button({isLink: false, iconName: "arrow-right", iconWidth: 14, iconHeight: 24}).button--small.button--white

+button({isLink: false, text: "Оформить подписку"}).button--green-alt
+button({isLink: true, text: "Скачать программу"}).button--border-green-alt
Скачать программу
+link({isLink: true, text: "Подробнее"}).link--white.link--large
Подробнее
+link({isLink: true, text: "Подробнее"}).link--green.link--large
Подробнее

Карточки - клиенты

+card-logo({image: "logo-1", width: "225", height: "115", altText: "СтройДом"})

+card-logo({image: "logo-2", width: "186", height: "115", altText: "М-Строй"})

+card-logo({image: "logo-3", width: "154", height: "114", altText: "РеСтро Инжиниринг"})

+card-logo({image: "logo-4", width: "180", height: "95", altText: "SetlCity"})

Карточка новостей

+news-card({href: "#", title: "Проверки...", previewText: "Почему-то немногие в курсе...", date: "20.09.2021", datetime: "2021-09-20", text: "Читать полностью"})

+news-card({href: "#", title: "Проверки...", previewText: "Почему-то немногие в курсе...", date: "20.09.2021", datetime: "2021-09-20", text: "Читать полностью", backgroundImg: {folder: "content", name: "bim360", format: "jpg", width: "350", height: "469", alt: "bim360"}})

+news-card({href: "#", title: "Проверки...", previewText: "Почему-то немногие в курсе...", date: "20.09.2021", datetime: "2021-09-20", text: "Читать полностью", img: {folder: "content", name: "cylinders", format: "jpg", width: "350", height: "170", alt: "cylinders"}})

Карточка продукты AUTODESK

+autodesk-collection-card({title: "Коллекция для проектирования...", price: "145 000", subscribe: {href: "#", text: "Оформить подписку"}, more: {href: "#", text: "Подробнее"}, img: {folder: "content", name: "design", format: "jpg", width: "478", height: "132", alt: "design"}})
design

Коллекция для проектирования и строительства промышленных и гражданских объектов

145 000 ₽/год

Карточка с текстом на обратной стороне картинки

+autodesk-collection-card({title: "Коллекция для проектирования...", price: "145 000", text: "Autodesk Autocad – одно из передовых...", subscribe: {href: "#", text: "Оформить подписку"}, more: {href: "#", text: "Подробнее"}, img: {folder: "content", name: "design", format: "jpg", width: "478", height: "132", alt: "design"}, flip: true}).autodesk-collection-card--flip
revit

Autodesk Revit

Autodesk Revit

Autodesk Autocad – одно из передовых специализированных программных решений, которое используется многими инженерами и архитекторами как основной инструмент которыйиспользуетсямногимиинженерами

Карточка из блока каталог ПО

+software-catalog-card({href: "#", title: "Autodesk", img: {folder: "content", name: "autodesk2", format: "png", width: "286", height: "92", alt: "autodesk"}, numberProducts: "13 продуктов", text: "Подробнее"})

Список с точками

+list-block({content: { subtitle: "Анализ", description: "Аналитика, прототипирование ..."}})

  1. Анализ

    Аналитика, прототипирование и формирование требований к ПО, поиск решений BIM‑задач

  2. Формирование технического задания

    Этап формализации требований на основе проведенной аналитики

Кастомный селекст

+custom-select({ class: "custom-select", id: "course-name", name: "course-name", label: "Название курса", placeholder: "Выберите вариант", ariaLabel: "Выберите вариант", error: "Заполните поле для отправки", dataValidate: "select", required: "true", options: [{ value: "social-network", text: "Из социальных сетей (ВКонтакте, Facebook)",},{ value: "search-engines", text: "Из поисковых систем (Яндекс, Google)",},{ value: "advertisement", text: "Из рекламы",},})

selectMultiple: "true" - устанавливает multiple выбор селекту; selectInsert: "true" - отвечает за вставку выбранных опций в кнопку; ariaSelected: "true" - если нужно что бы один из пунктов был выбран по умолчанию.

Откуда вы узнали о насЗаполните поле для отправкиВведите ваш ответ
  • Из социальных сетей (ВКонтакте, Facebook)
  • Из поисковых систем (Яндекс, Google)
  • Из рекламы

Кастомный input/textarea

+custom-input({ inputId: "registration-name", inputName: "name", inputType: "text", inputLabel: "ФИО", inputPlaceholder: "Введите свои данные", inputError: "Заполните поле для отправки", inputRequired: true,})

class: "custom-input--required" - устанавливает зеленую звездочку; isTextarea: true - если нужна textarea.

Заполните поле для отправки
Заполните поле для отправки

Название компонента или группы компонентов

Класс компонента \ модификаторы

При необходимости, подсказки \ предупреждение \ важная информация

Компонент