Проект: Стильные часы. ФИНАЛ

Часть 3: - JavaScript использует Vue.js для динамического обновления времени и даты каждую секунду, а также добавляет необходимые нули к числовым значениям для правильного отображения.

Таким образом, у нас получается готовый проект: стильные часы, которые динамически обновляют и время и дату

Made in HTML/CSS

2 проект: Слайдер.

1 часть: html:
Разберем подробнее:

1. <div class="container">: Обертывающий блок для всего слайдера.
2. <div class="slider">: Блок, который содержит сами карточки.
3. <div class="card">: Каждая карточка содержит изображение и заголовок.
4. <img src="ссылка на изображение" alt="" />: Здесь будет изображение
5. <h1>Made in HTML/CSS</h1>: Заголовок внутри карточки.

В итоге, это карточки с изображениями и текстом, которые можно использовать в слайдере.

Made in HTML/CSS

Проект 3: Текст с анимацией без JavaScript

Первая часть: HTML

Рассмотрим подробнее процесс работы с анимационным текстом в HTML.

Это довольно простая задача: достаточно объявить нужный тег, например <p> (или любой другой заголовочный тег, такой как h1, h2 и так далее).

Затем мы можем добавить к этому тегу класс и заполнить его содержимым. В данном примере внутри тега будет находиться название нашего канала.

Made in HTML/CSS

Проект 3: Текст с анимацией без JavaScript

Вторая часть: css

Рассмотрим подробнее:

Данный CSS-код применяет стиль к элементам с классом .text, создавая анимированный текст с эффектом вращающегося фона. Основные характеристики:

- Жирный шрифт, размер 5vw, цвет текста с обводкой.
- Использование background-clip: text для отображения фона только в области текста.
- Псевдоэлементы :before и :after создают яркий фон с радиусами закругления и смешанным режимом.
- Анимация вращения (360 градусов) придаёт динамичность.

В результате получается стильный текст с эффектом вращающегося фона.

Made in HTML/CSS

Проект 4: Поисковая панель

Первая часть: html

Рассмотрим подробнее:

1. Контейнер (<div class="wrap">): Оборачивает весь элемент для стилизации.

2. Поисковая панель (<div class="search">): Содержит поле ввода и кнопку.
- Поле ввода (<input class="searchTerm">): Позволяет пользователю ввести запрос с текстом-подсказкой.
- Кнопка (<button class="searchButton">): Отправляет запрос, содержит иконку лупы из Font Awesome.

Made in HTML/CSS

Проект 4: Поисковая панель

Вторая часть: css

Рассмотрим подробнее:

1. Импорт шрифта: Подключает шрифт Open Sans из Google Fonts.
2. Общее оформление: Устанавливает светло-серый фон для страницы и применяет шрифт к тексту.
3. Поисковая панель:
- .search: Задает размеры и флекс-выравнивание.
- .searchTerm: Стили для поля ввода (рамка, padding, цвет текста при фокусе).
- .searchButton: Стили для кнопки (размер, цвет фона, закругленные углы).
4. Центрирование: .wrap ограничивает ширину и размещает элемент по центру экрана.


Made in HTML/CSS

Проект 5: Форма авторизации

HTML - 1 часть

1. Основной контейнер:
- Вся форма обернута в главный контейнер, который служит основным каркасом интерфейса.

2. Форма входа:
- Включает приветственный заголовок с текстом "С возвращением".
- Содержит два поля для ввода: одно для ввода почты, другое — для пароля. Каждое поле имеет соответствующий текстовый ярлык.
- Есть текст для пользователей, которые забыли пароль, предлагающий восстановление.
- Включает две кнопки: одна для входа с введенными данными, другая — для входа через Telegram.

3. Субконтейнер:
- Этот раздел позволяет пользователям переключаться между формами входа и регистрации.
- Содержит текстовые блоки с подсказками для тех, кто впервые на сайте, и для тех, у кого уже есть аккаунт.

Made in HTML/CSS

Проект 5: Форма авторизации

HTML - 2 часть

1. Форма регистрации:
- Включает заголовок с просьбой заполнить необходимые данные.
- Содержит три поля для ввода: имя, почта и пароль, каждое с соответствующим текстовым ярлыком.
- Также есть две кнопки: одна для регистрации с введенными данными, другая — для регистрации через Telegram.

Made in HTML/CSS

Проект 5: Форма авторизации

CSS - 1 часть

Описание:

Эта часть включает общие стили для всех элементов, тела документа и входных элементов (input, button). Это базовые стили, для дальнейшего украшения.

Made in HTML/CSS