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

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

РКН: shorturl.at/qinly
Download Telegram
🎨 Цветовая палитра макета "Travalizer":

HEX | RGB
#F5DBC4 | rgb(245,219,196)
#FDC858 | rgb(253,200,88)
#345B3E | rgb(52,91,62)

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

Сайтодел | #палитра
This media is not supported in your browser
VIEW IN TELEGRAM
💾 Vertical Timeline – инструмент для создания анимированной хронологии событий. Карточки с информацией появляются при прокручивании страницы вниз.

Сайтодел | #макет #figma
✍️ Inter – это семейство шрифтов, разработанное специально для компьютеров. Его особенность - слегка удлиненные по вертикали буквы и настройка знаков препинания в зависимости от формы окружающих глифов. Пример есть тут: "Checkbox Group"

Сайтодел | #шрифт
🖥 Google Material You UI Kit – дизайн мобильного интерфейса в нежно-зеленых тонах. Его можно использовать для создания различных мобильных приложений.

Сайтодел | #макет #figma
This media is not supported in your browser
VIEW IN TELEGRAM
💾 Reactive CSS Transitions – сетка из CSS-элементов, которые меняют цвет при нажатии. Этот эффект подойдет для функционала приложения, а также для игр.

Сайтодел | #макет #figma
✍️ Quicksand – это закругленный шрифт без засечек, в основе которого лежат геометрические фигуры. Изначально шрифт был предназначен для заголовков и коротких надписей, но его можно использовать и в текстах. Пример шрифта в посте "Confetti Button"

Сайтодел | #шрифт
This media is not supported in your browser
VIEW IN TELEGRAM
💾 CSS Neumorphism Gradient Loader – анимированный лоадер с разноцветным градиентом. Имеет плавный переход цветов, благодаря чему выглядит эффектно.

Сайтодел | #сниппет #css
🖥 Hair Care Product Landing Page – дизайн лендинга для косметических средств. Выполнен в теплых, натуральных тонах, что намекает на натуральный состав продукта.

Сайтодел | #макет #figma
This media is not supported in your browser
VIEW IN TELEGRAM
💾 Dark Mode Toggle Button – кнопка для переключения светлой и темной тем, выполненная на CSS. Подойдет для мобильного приложения.

Сайтодел | #сниппет #css
🐙 Locomotive Scroll – библиотека JavaScript для создания плавной прокрутки. Она может анимировать отдельные свойства DOM-объектов или применять обработчик onscroll.

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

Сайтодел | #сниппет #css
This media is not supported in your browser
VIEW IN TELEGRAM
💾 Expanding Button – анимированная кнопка с выпадающим меню. При повторном нажатии возвращается к исходному состоянию.

Сайтодел | #сниппет #css
🎨 Цветовая палитра макета "Google Material You UI Kit":

HEX | RGB
#EDEFE2 | rgb(232,239,226)
#DBEA8D | rgb(219,234,141)
#7D825B | rgb(125,130,91)

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

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

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

Сайтодел | #сниппет #css
🖥 Furniture App Prototype – дизайн мобильного приложения для магазина мебели. Бежевые и светло-коричневые оттенки создают впечатление легкости и уюта.

Сайтодел | #макет #figma
This media is not supported in your browser
VIEW IN TELEGRAM
💾 404 Page – интерактивная страница ошибки с анимированными элементами и подвижной круглой рамкой. Контраст создается за счет темного фона и крупной цифры.

Сайтодел | #сниппет #css
🐙 Github Elements – коллекция веб-компонентов, которые работают в современных браузерах, а также могут использоваться с любыми библиотеками и фреймворками JavaScript.

Сайтодел | #репозиторий #github
This media is not supported in your browser
VIEW IN TELEGRAM
💾 Holiday Feature Folding Cards – набор карточек, в которые можно поместить видео и тексты. Каждая карточка плавно раскрывается и имеет возможность перехода на страницу с детальным описанием.

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

HEX | RGB
#E5C7A3 | rgb(229,199,163)
#136B43 | rgb(19,107,67)
#5C3727 | rgb(92,55,39)

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

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