Навигация

Примеры интерфейсов на HTML и CSS

Примеры интерфейсов на HTML и CSS: справочные материалы, пошаговые уроки, рабочие примеры и практика на русском языке.

140 материаловВсегда актуальные данные

Адаптивная навигация

Адаптивная навигация: готовый адаптивный пример на HTML и CSS, структура компонента, код, проверка доступности и советы по переносу.

Читать Пример

Адаптивная таблица

Адаптивная таблица: готовый адаптивный пример на HTML и CSS, структура компонента, код, проверка доступности и советы по переносу.

Читать Пример

адаптивное меню: пример без JavaScript

адаптивное меню: пример без JavaScript: готовый адаптивный пример на HTML и CSS, структура компонента, код, проверка доступности и советы по…

Читать Пример

адаптивное меню: пример на семантическом HTML

адаптивное меню: пример на семантическом HTML: готовый адаптивный пример на HTML и CSS, структура компонента, код, проверка доступности и…

Читать Пример

адаптивное меню: пример на CSS Grid

адаптивное меню: пример на CSS Grid: готовый адаптивный пример на HTML и CSS, структура компонента, код, проверка доступности и советы по…

Читать Пример

адаптивное меню: пример на Flexbox

адаптивное меню: пример на Flexbox: готовый адаптивный пример на HTML и CSS, структура компонента, код, проверка доступности и советы по…

Читать Пример

адаптивное меню: пример с адаптивной версткой

адаптивное меню: пример с адаптивной версткой: готовый адаптивный пример на HTML и CSS, структура компонента, код, проверка доступности и…

Читать Пример

адаптивное меню: пример с доступным управлением

адаптивное меню: пример с доступным управлением: готовый адаптивный пример на HTML и CSS, структура компонента, код, проверка доступности и…

Читать Пример

адаптивное меню: пример с минимальным JavaScript

адаптивное меню: пример с минимальным JavaScript: готовый адаптивный пример на HTML и CSS, структура компонента, код, проверка доступности и…

Читать Пример

Вкладки

Вкладки: готовый адаптивный пример на HTML и CSS, структура компонента, код, проверка доступности и советы по переносу.

Читать Пример

вкладки: пример без JavaScript

вкладки: пример без JavaScript: готовый адаптивный пример на HTML и CSS, структура компонента, код, проверка доступности и советы по…

Читать Пример

вкладки: пример на семантическом HTML

вкладки: пример на семантическом HTML: готовый адаптивный пример на HTML и CSS, структура компонента, код, проверка доступности и советы по…

Читать Пример

вкладки: пример на CSS Grid

вкладки: пример на CSS Grid: готовый адаптивный пример на HTML и CSS, структура компонента, код, проверка доступности и советы по переносу.

Читать Пример

вкладки: пример на Flexbox

вкладки: пример на Flexbox: готовый адаптивный пример на HTML и CSS, структура компонента, код, проверка доступности и советы по переносу.

Читать Пример

вкладки: пример с адаптивной версткой

вкладки: пример с адаптивной версткой: готовый адаптивный пример на HTML и CSS, структура компонента, код, проверка доступности и советы по…

Читать Пример

вкладки: пример с доступным управлением

вкладки: пример с доступным управлением: готовый адаптивный пример на HTML и CSS, структура компонента, код, проверка доступности и советы…

Читать Пример

вкладки: пример с минимальным JavaScript

вкладки: пример с минимальным JavaScript: готовый адаптивный пример на HTML и CSS, структура компонента, код, проверка доступности и советы…

Читать Пример

Карточка пользователя

Карточка пользователя: готовый адаптивный пример на HTML и CSS, структура компонента, код, проверка доступности и советы по переносу.

Читать Пример

Карточка товара

Карточка товара: готовый адаптивный пример на HTML и CSS, структура компонента, код, проверка доступности и советы по переносу.

Читать Пример

карточка товара: пример без JavaScript

карточка товара: пример без JavaScript: готовый адаптивный пример на HTML и CSS, структура компонента, код, проверка доступности и советы по…

Читать Пример

карточка товара: пример на семантическом HTML

карточка товара: пример на семантическом HTML: готовый адаптивный пример на HTML и CSS, структура компонента, код, проверка доступности и…

Читать Пример

карточка товара: пример на CSS Grid

карточка товара: пример на CSS Grid: готовый адаптивный пример на HTML и CSS, структура компонента, код, проверка доступности и советы по…

Читать Пример

карточка товара: пример на Flexbox

карточка товара: пример на Flexbox: готовый адаптивный пример на HTML и CSS, структура компонента, код, проверка доступности и советы по…

Читать Пример

карточка товара: пример с адаптивной версткой

карточка товара: пример с адаптивной версткой: готовый адаптивный пример на HTML и CSS, структура компонента, код, проверка доступности и…

Читать

Полный каталог

Все материалы раздела

К

карточка товара: пример с доступным управлением карточка товара: пример с минимальным JavaScript

Л

лендинг: пример без JavaScript лендинг: пример на семантическом HTML лендинг: пример на CSS Grid лендинг: пример на Flexbox лендинг: пример с адаптивной версткой лендинг: пример с доступным управлением лендинг: пример с минимальным JavaScript

М

Модальное окно модальное окно: пример без JavaScript модальное окно: пример на семантическом HTML модальное окно: пример на CSS Grid модальное окно: пример на Flexbox модальное окно: пример с адаптивной версткой модальное окно: пример с доступным управлением модальное окно: пример с минимальным JavaScript

П

профиль пользователя: пример без JavaScript профиль пользователя: пример на семантическом HTML профиль пользователя: пример на CSS Grid профиль пользователя: пример на Flexbox профиль пользователя: пример с адаптивной версткой профиль пользователя: пример с доступным управлением профиль пользователя: пример с минимальным JavaScript

Т

таблица данных: пример без JavaScript таблица данных: пример на семантическом HTML таблица данных: пример на CSS Grid таблица данных: пример на Flexbox таблица данных: пример с адаптивной версткой таблица данных: пример с доступным управлением таблица данных: пример с минимальным JavaScript Тарифная таблица тарифные планы: пример без JavaScript тарифные планы: пример на семантическом HTML тарифные планы: пример на CSS Grid тарифные планы: пример на Flexbox тарифные планы: пример с адаптивной версткой тарифные планы: пример с доступным управлением тарифные планы: пример с минимальным JavaScript

Ф

Форма обратной связи форма обратной связи: пример без JavaScript форма обратной связи: пример на семантическом HTML форма обратной связи: пример на CSS Grid форма обратной связи: пример на Flexbox форма обратной связи: пример с адаптивной версткой форма обратной связи: пример с доступным управлением форма обратной связи: пример с минимальным JavaScript Форма регистрации форма регистрации: пример без JavaScript форма регистрации: пример на семантическом HTML форма регистрации: пример на CSS Grid форма регистрации: пример на Flexbox форма регистрации: пример с адаптивной версткой форма регистрации: пример с доступным управлением форма регистрации: пример с минимальным JavaScript

Х

Хлебные крошки хлебные крошки: пример без JavaScript хлебные крошки: пример на семантическом HTML хлебные крошки: пример на CSS Grid хлебные крошки: пример на Flexbox хлебные крошки: пример с адаптивной версткой хлебные крошки: пример с доступным управлением хлебные крошки: пример с минимальным JavaScript

C

CSS Grid-галерея

F

FAQ-аккордеон FAQ-аккордеон: пример без JavaScript FAQ-аккордеон: пример на семантическом HTML FAQ-аккордеон: пример на CSS Grid FAQ-аккордеон: пример на Flexbox FAQ-аккордеон: пример с адаптивной версткой FAQ-аккордеон: пример с доступным управлением FAQ-аккордеон: пример с минимальным JavaScript footer: пример на семантическом HTML footer: пример на CSS Grid footer: пример на Flexbox footer: пример с адаптивной версткой footer: пример с доступным управлением

G

Grid-галерея: пример без JavaScript Grid-галерея: пример на семантическом HTML Grid-галерея: пример на CSS Grid Grid-галерея: пример на Flexbox Grid-галерея: пример с адаптивной версткой Grid-галерея: пример с доступным управлением Grid-галерея: пример с минимальным JavaScript

H

Hero-блок hero-блок: пример без JavaScript hero-блок: пример на семантическом HTML hero-блок: пример на CSS Grid hero-блок: пример на Flexbox hero-блок: пример с адаптивной версткой hero-блок: пример с доступным управлением hero-блок: пример с минимальным JavaScript

L

Loader loader: пример без JavaScript loader: пример на семантическом HTML loader: пример на CSS Grid loader: пример на Flexbox loader: пример с адаптивной версткой loader: пример с доступным управлением loader: пример с минимальным JavaScript

T

Timeline timeline: пример без JavaScript timeline: пример на семантическом HTML timeline: пример на CSS Grid timeline: пример на Flexbox timeline: пример с адаптивной версткой timeline: пример с доступным управлением timeline: пример с минимальным JavaScript Tooltip tooltip: пример без JavaScript tooltip: пример на семантическом HTML tooltip: пример на CSS Grid tooltip: пример на Flexbox tooltip: пример с адаптивной версткой tooltip: пример с доступным управлением tooltip: пример с минимальным JavaScript