МТП /001

HTML + CSS / тестовый стенд

Мой
тестовый
проект.

Одна HTML-страница, немного магии CSS и ноль серьёзных обязательств. Здесь можно крутить, нажимать и проверять идеи.

Открыть песочницу v0.0.1 / просто работает
CSS Variables✦Grid✦Flexbox✦Transforms✦Animations✦Zero Dependencies

01 / Раскладка и движение

CSS показывает,
что умеет.

Четыре маленьких эксперимента без фреймворков. Наведи курсор на карточки, а кнопки под сценами — нажми.

Flexbox

justify-content: space-between
alignitemscenter

Распределяет элементы по оси, выравнивает их и бережёт нервы верстальщика.

Grid

grid-template-columns

Строит сетки и мозаики: строки, колонки и объединённые области задаются прямо в стилях.

Transform

rotate() + rotateY()

Повороты и перспектива меняют фигуру без единой картинки.

Animation

@keyframes spin

Ключевые кадры заставляют спутник двигаться по орбите бесконечно.

02 / Всякая фигня

Мелочи,
которые
оживляют.

background-clip: text

Градиентный текст

Без картинки.

Градиент становится фоном букв при помощи пары CSS-свойств.

:hover + :focus

Подсказка

Привет! Я появляюсь при наведении и фокусе с клавиатуры.

Работает и мышью, и клавишей Tab — без дополнительного JavaScript.

CSS custom properties

Живые переменные

border-radius: 28px

03 / Коротко о главном

Что тут вообще происходит?

Это готовый сайт?

Нет, это статическая заглушка и одновременно маленькая CSS-песочница. Её удобно использовать как временную страницу или основу для экспериментов.

Нужны библиотеки и картинки?

Нет. Вся графика собрана из обычных блоков, градиентов, псевдоэлементов и одной встроенной SVG-стрелки. Внешних запросов у страницы нет.

Можно поменять содержимое?

Конечно. Заголовки, тексты, цвета и отступы находятся в одном HTML-файле. Основная палитра вынесена в CSS-переменные в начале блока стилей.

А на телефоне работает?

Да. Сетка перестраивается в одну колонку, размеры заголовков меняются через clamp(), а анимации отключаются при системной настройке reduced motion.