Проект 10: Стилизованная ошибка 404

CSS: 4 часть
Подробнее:

Стили для элемента с классом head, включая псевдоэлементы :after и :before.



Made in HTML/CSS

Проект 10: Стилизованная ошибка 404

CSS: 5 часть
Подробнее:

Стили для элемента с классом ear, включая анимацию для правого и левого уха.


Made in HTML/CSS

Проект 10: Стилизованная ошибка 404

CSS: 6 часть
Подробнее:

Стили для элемента с классом eye, включая анимацию для глаз.


Made in HTML/CSS

Проект 10: Стилизованная ошибка 404

CSS: 7 часть
Подробнее:

Определяет анимации для движения головы, ушей и глаз.


Made in HTML/CSS

Проект 10: Стилизованная ошибка 404

Результат:

Made in HTML/CSS

Проект 11: Прикольный свайпер

HTML
Подробнее:

Создает слайдер с использованием библиотеки Swiper.

Внутри контейнера .swiper находится обертка .swiper-wrapper, содержащая несколько слайдов .swiper-slide, каждый из которых содержит изображение.

Также присутствуют кнопки навигации для перехода к следующему и предыдущему слайду.



Made in HTML/CSS

Проект 11: Прикольный свайпер

CSS: 1 часть
Подробнее:

Эта часть кода импортирует стили Swiper из CDN и использует слой base для организации стилей.


Made in HTML/CSS

Проект 11: Прикольный свайпер

CSS: 2 часть
Подробнее:

Эта часть кода стилизует основной контейнер слайдера и его обертку.

Основные стили включают:
Установка ширины и высоты контейнера слайдера.
Стилизация обертки слайдера для отображения элементов в виде flex-контейнера и центрирования их по вертикали.


Made in HTML/CSS

Проект 11: Прикольный свайпер

CSS: 3 часть
Подробнее:

Эта часть кода стилизует слайды и их содержимое.

Основные стили включают:
Установка начального масштаба и анимации для слайдов.
Стилизация активного слайда, предыдущего и следующего слайдов.
Стилизация изображений внутри слайдов, включая их размеры, объектное покрытие и закругленные углы.


Made in HTML/CSS

Проект 11: Прикольный свайпер

CSS: 4 часть
Подробнее:

Эта часть кода стилизует кнопки навигации слайдера.

Основные стили включают:
Установка размеров, цвета фона и закругленных углов для кнопок.
Позиционирование кнопок "предыдущий" и "следующий".
Стилизация состояния наведения курсора на кнопки.
Стилизация псевдоэлемента ::after для отображения иконок или текста внутри кнопок.


Made in HTML/CSS

Проект 11: Прикольный свайпер

CSS: 5 часть
Подробнее:

Эта часть кода сбрасывает стили для всех элементов и стилизует body.

Основные стили включают:
Сброс отступов и полей для всех элементов.
Установка box-sizing на border-box для всех элементов.
Стилизация body для центрирования контента и установки минимальной высоты и фона.


Made in HTML/CSS

Проект 11: Прикольный свайпер

JS:
Подробнее:

Этот JavaScript-код инициализирует слайдер Swiper и добавляет функциональность для динамического расчета высоты слайдов.

Основные части включают:

Инициализация Swiper с настройками, такими как количество видимых слайдов, центрирование, бесконечный цикл и навигация.

Функция calculateHeight, которая рассчитывает высоту слайдов на основе их ширины, сохраняя пропорции 16:9.
Обработчики событий для вызова calculateHeight при загрузке страницы и изменении размера окна.


Made in HTML/CSS

Проект 11: Прикольный свайпер

Результат:

Made in HTML/CSS

Проект 12: Анимация взаимодействия со стеком

CSS - 1 часть
Подробнее:

@import: Импортирует шрифт Poppins из Google Fonts.

body: Задает базовые стили для тела документа, включая отступы, шрифт и фон.


Made in HTML/CSS

Проект 12: Анимация взаимодействия со стеком

CSS - 2 часть
Подробнее:

.container: Задает стили для основного контейнера, включая его позиционирование, максимальную ширину, отступы, минимальную высоту и выравнивание.

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


Made in HTML/CSS

Проект 12: Анимация взаимодействия со стеком

CSS - 3 часть
Подробнее:

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

.park_sec.active: Убирает трансформацию для активных секций.

.park_sec1, .park_sec2, .park_sec3: Задает уникальные стили для каждой секции парка, включая z-index и трансформации.


Made in HTML/CSS

Проект 12: Анимация взаимодействия со стеком

CSS - 4 часть
Подробнее:

.park_inside: Задает стили для внутреннего контейнера секций парка, включая его позиционирование и выравнивание.

.content_sec: Задает стили для контейнера контента, включая его позиционирование и отступы.

.img: Задает стили для изображений, включая их размеры, фон и скругление углов.

.content_sec h2: Задает стили для заголовков, включая их позиционирование, отступы, размер шрифта и жирность.

.content_sec span, .park_sec span: Задает стили для текста, включая их позиционирование, цвет и размер шрифта.


Made in HTML/CSS

Проект 12: Анимация взаимодействия со стеком

CSS - 5 часть
Подробнее:

.btn_grp: Задает стили для контейнера кнопки, включая его позиционирование и выравнивание.

.btn: Задает стили для кнопки, включая её позиционирование, отступы, фон, скругление углов, границы, модель бокса, тень, размер шрифта, жирность и курсор.

.btn::after: Задает стили для псевдоэлемента после кнопки, включая его позиционирование, содержимое, границы, размеры, позицию, трансформацию и анимацию.

.btn.active::after: Изменяет трансформацию и позицию псевдоэлемента для активной кнопки.


Made in HTML/CSS

Проект 12: Анимация взаимодействия со стеком

Результат:

Made in HTML/CSS