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

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

box-sizing: border-box;: Устанавливает модель расчета размеров элементов, включая padding и border в общий размер элемента.
Далее:
Устанавливает фоновый цвет, центрирует содержимое и определяет CSS-переменные для размеров и цветов.



Made in HTML/CSS

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

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

Создает миксин для создания кругов с заданным размером.
Создает стили для элемента с классом four, включая псевдоэлемент :after.


Made in HTML/CSS

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

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

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



Made in HTML/CSS

Проект 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