Сайтодел | GitHub, Верстка, Сайты, Вайбкодинг
25.4K subscribers
1.34K photos
105 videos
28 files
2.39K links
FullStack-материалы от Senior-разработчика для WEB-специалистов

Сотрудничество: @CodingLead

РКН: shorturl.at/qinly
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
💾 Loader – спиннер в виде капли, которая пульсирует и распадается на части. У каждого элемента есть падающая тень.

Сайтодел | #сниппет #css
🖥 Ecommerce App – дизайн приложения для интернет-магазина. Здесь есть два типа карточек: заполненные градиентом и прозрачные с круглым фоном для товара.

Сайтодел | #макет #figma
🐙 Cronicle – планировщик задач, который отслеживает статистику, автоматизирует обработку данных и рассылает оповещения. Проект написан на Node.js.

Сайтодел | #репозиторий #github
This media is not supported in your browser
VIEW IN TELEGRAM
💾 Image Grids Animation – анимация для картинок в виде сетки из скругленных рамок. Шаблон подстраивается под ширину каждого изображения.

Сайтодел | #сниппет #css
🐙 Transformers.js – библиотека, которая помогает обрабатывать естественный язык, генерировать и переводить тексты, классифицировать изображения, а также распознавать речь.

Сайтодел | #репозиторий #github
🖥 Furniture Store Website – минималистичный дизайн сайта мебельного магазина, выполненный в нежных оттенках бежевого, серого и темно-зеленого.

Сайтодел | #макет #figma
This media is not supported in your browser
VIEW IN TELEGRAM
💾 Tile Hover Multi-Button – варианты выпадающего меню для карточек. Можно менять цвет фона, иконок и количество элементов в левом верхнем углу.

Сайтодел | #сниппет #css
🖥 Velvety – дизайн сайта для магазина косметических средств. Выполнен в теплых оттенках оливкового и темно-зеленого. В заголовках используется шрифт с засечками.

Сайтодел | #макет #figma
This media is not supported in your browser
VIEW IN TELEGRAM
💾 Atom Preloader – сложный лоадер в форме атома с элементами, которые вращаются в разные стороны. Кольца крутятся как в одной плоскости, так и по собственной оси.

Сайтодел | #сниппет #css
🎨 Цветовая палитра макета "Ice Cream Landing Page"

HEX | RGB
#F094DF | rgb(240,148,223)
#A10520
| rgb(161,5,32)
#400404 | rgb(64,4,4)

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

Сайтодел | #палитра
This media is not supported in your browser
VIEW IN TELEGRAM
💾 Portfolio Page – сайт-портфолио с анимированными элементами и ссылками на примеры работ. При наведении курсора на круглую картинку она становится цветной.

Сайтодел | #сниппет #css
✍️ Plus Jakarta Sans – геометрический шрифт без засечек, вдохновленный гарнитурами Neuzeit Grotesk, Futura и гротесками без засечек 1930х гг. Пример можно увидеть в дизайне "Meditation App"

Сайтодел | #шрифт
This media is not supported in your browser
VIEW IN TELEGRAM
💾 Neumorphic Liquid Slider – слайдер для погоды с анимированной шкалой. В зависимости от температуры меняется число градусов и цвет "воды".

Сайтодел | #сниппет #css
🎨 Цветовая палитра макета "Frosted Glass Button"

HEX | RGB
#E4FBBF | rgb(228,251,191)
#F8B2DA
| rgb(248,178,218)
#649EFF | rgb(100,158,255)

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

Сайтодел | #палитра
This media is not supported in your browser
VIEW IN TELEGRAM
💾 Product Сard – анимированная карточка с выплывающим меню и подсветкой кнопки "корзина". В активном состоянии карточка визуально приближается к пользователю.

Сайтодел | #сниппет #css
🎨 Цветовая палитра макета "Ice Cream Landing Page"

HEX | RGB
#F094DF | rgb(240,148,223)
#A10520
| rgb(161,5,32)
#400404 | rgb(64,4,4)

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

Сайтодел | #палитра
✍️ Varela Round – шрифт со скругленными элементами букв, который подходит для экранных текстов и мелких заголовков. Пример использования можно посмотреть в сниппете Clean Toast Notification

Сайтодел | #шрифт
This media is not supported in your browser
VIEW IN TELEGRAM
💾 Claymorphic SVG Button – кнопка в трендовом стиле клейморфизм. Ее можно использовать в модальных окнах, в составе меню или отдельно.

Сайтодел | #сниппет #css
This media is not supported in your browser
VIEW IN TELEGRAM
💾 Loader – спиннер в виде капли, которая пульсирует и распадается на части. У каждого элемента есть падающая тень.

Сайтодел | #сниппет #css
🐙 Academic Pages – готовый шаблон GitHub Pages для научных сайтов, в который можно подгружать PDF-файлы. Подходит для размещения публикаций, постов, портфолио, лекций и резюме.

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