✅ Этот репозиторий представляет собой сборник более 100 проектов для веб-разработки, включая готовые коды для создания лендингов, пользовательских интерфейсов и веб-приложений.

😸 Репозиторий: https://github.com/solygambas/html-css-javascript-projects?tab=readme-ov-file

@code_ready | #github

✅ Адаптивное модальное окно

Часто возникает задача создания модального окна? Данный скрипт является примером его реализации, с применением адаптивности.

Окно закрывается как при нажатии на крестик в верхнем правом углу,так и при нажатии на любую точку вне окна

😸 Готовый код для этого примера, я оставлю в моем репозитории на GitHub

@code_ready | #обучение #github

✅ Адаптивные таблицы

Пользователи сайта могут иметь разную ширину экрана, так как же дать всем удобный доступ к информации из таблицы?

Для таких случаев используют адаптивное изменение таблицы, при маленьком экране она становится вертикальной, при широком горизонтальной

😸 Готовый код для этого примера, я оставлю в моем репозитории на GitHub

👉 @code_ready | #github

✅ Эффект размытия фона при наведении

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

Это позволяет сфокусировать внимание пользователя на картинке и сделать ее более выделенной.

😸 Готовый код для реализации этой анимации, я оставлю в моем репозитории на GitHub

👉 @code_ready | #github

✅ Форма обратной связи

Формы обратной связи позволяют пользователям связаться с владельцем сайта, не покидая текущую страницу.

Окно закрывается как при нажатии на крестик в верхнем правом углу, так и при нажатии на любую точку вне окна.

Форма содержит поля для имени, электронной почты и сообщения, и может быть отправлена на указанный email-адрес.

😸 Готовый код для реализации этой анимации, я оставлю в моем репозитории на GitHub

👉 @code_ready | #github

✅ Адаптивное меню с анимацией "бургер"

Пользователи сайта могут иметь разную ширину экрана, так как же дать всем удобный доступ к меню сайта?

Для таких случаев используют анимацию бургер, она сворачивает все меню в 1 значок, который при нажатии разворачивает его вертикально

В меню так же реализовано изменение цвета при наведении

😸 Готовый код для этого примера, я оставлю в моем репозитории на GitHub

👉 @code_ready | #github

✅ Интерфейс выбора файлов

Пользователь может загрузить файл, перетащив его на выделенную область на сайте либо выбрать файл через стандартный диалог открытия файла операционной системы.

😸 Готовый код для реализации этой анимации, я оставлю в моем репозитории на GitHub

➡️ @code_ready | #github

✅ Готовый макет 2rism

Оставляю уже готовый макет с кодом:
Github (без адаптива) 😸

• Сложность: Лёгкий
• Язык: Английский
• Адаптив: Нет

Ссылка на макет — Figma 👩‍💻

➡️ @code_ready | #github