Сайтодел | GitHub, Верстка, Сайты, Вайбкодинг

🎨 Цветовая палитра макета "Sleep Time App"

HEX | RGB
#F1F56E | rgb(241,245,110)
#5BCDF3 | rgb(91,205,243)
#9993D1 | rgb(153,147,209)

⚠️ Цвет копируется одним кликом!

Сайтодел | #палитра

🐙 Brainwave – репозиторий проекта по созданию сайта. Здесь есть сниппеты кода, ссылка на видеоурок и описание фич готового продукта.

Сайтодел | #репозиторий #github

🖥 Parallax Effect – дизайн для слайдера. Здесь представлены приглушенные оттенки, зернистый фон и мягкие градиенты. Контраст создан за счет крупных заголовков и небольших кусков текста.

Сайтодел | #макет #figma

🖥 Ice Cream Landing Page – дизайн лендинга для магазина мороженого. Здесь использованы сочные, "ягодные" оттенки красного и фиолетового.

Сайтодел | #макет #figma

💾 Wooden Toggles – реалистичные объемные переключатели, стилизованные под дерево. При нажатии цвет переключается плавно.

Сайтодел | #сниппет #css

💾 3D Cards – карточки в стиле журнала National Geographic. При наведении курсора карточка поворачивается в сторону от пользователя.

Сайтодел | #сниппет #css

💾 Motion Blurred Number – счетчик цены с заданными точками на "круглых" числах. Ползунок можно перетаскивать, а можно и кликать на любую точку шкалы.

Сайтодел | #сниппет #css

💾 Bokeh Background – объемный многослойный фон, который двигается вслед за курсором и меняет цвет при нажатии на экран.

Сайтодел | #сниппет #css

✍️ REM – шрифт без засечек, который подходит для экранов устройств и брендинга продуктов. Пример можно посмотреть в сниппете "45 CSS Only Buttons"

Сайтодел | #шрифт

💾 80s Music Facts – страница с плеером и анимированными карточками. Если навести курсор на фото, оно приблизится с небольшим поворотом вправо.

Сайтодел | #сниппет #css

💾 CSS-Only Shimmering Neon Text – эффект для текста с анимированной подсветкой и цветовым градиентом, написанный на чистом CSS.

Сайтодел | #сниппет #css

🖥 Glass Flowers 3D Assets – набор PNG-изображений стеклянных цветов. Есть три варианта картинок: золотые, сине-розовые (с фильтром) и черно-белые.

Сайтодел | #макет #figma

✍️ REM – шрифт без засечек, который подходит для экранов устройств и брендинга продуктов. Пример можно посмотреть в сниппете "45 CSS Only Buttons"

Сайтодел | #шрифт

💾 CSS Scroll-Driven Animations – слайдер с четырьмя видами анимации скролла. Перелистывать слайды можно по вертикали, по горизонтали, а также с эффектами зума или плавного переключения.

Сайтодел | #сниппет #css

🐙 DevFind – платформа для веб-разработчиков в виде поисковика со ссылками на портфолио и Github-профили. Можно искать разработчиков по имени, навыкам и стране проживания.

Сайтодел | #репозиторий #github

💾 Price Range Slider – слайдер для цен с градиентом, который адаптируется под выбранную длину. При движении ярлык с ценой покачивается как реальный предмет.

Сайтодел | #сниппет #css

🖥 Colour Palettes/ Moodboards – набор цветовых палитр, однотонных цветных карточек и фоновых изображений с готовыми текстурными фильтрами.

Сайтодел | #макет #figma

🐙 OpenLayers – высокопроизводительная библиотека для создания интерактивных географических карт. Библиотека написана на JavaScript и имеет открытый исходный код.

Сайтодел | #репозиторий #github

💾 ScrollTrigger Image Zoom – анимация скролла страницы. Прокрутка создает необычный эффект зума в середину страницы, а потом переходит в перелистывание слайдов.

Сайтодел | #сниппет #css

💾 React Range Sliders – графики и шкалы, на которых можно перемещать отметки вручную. Числовые данные при этом меняются автоматически.

Сайтодел | #сниппет #css