PictureSlider

PictureSlider

Опять он тут

Уже профи

Создай элемент «div» и присвой ему класс «container»

Уже профи

Внутри элемента с классом «container» создай два тега «img». Внутри первого из них укажи иконку солнца, а внутри второго иконку птицы.

Укажи у этих элементов id: sun и bird.

PS: если у тебя есть какая-то другая идея для пейзажа, то ты можешь воплотить ее. Необязательно использовать именно такие иконки ;)

Будь креативным человеком - это круто

Уже профи

Внутри элемента с классом «container» создай элемент с классом «water»

Уже профи

Внутри элемента с классом «water» создай два элемента «img». Внутри них укажи картинку какого-нибудь лого и картинку лодки.

PS: установление лого является опциональным, так что можешь не добавлять этот элемент, если не хочешь.

Уже профи

Выйди из класса «container» на новой строчке создай элемент «div» c классом «buttonBox»

Уже профи

Создай две кнопки с названиями: open и close.

У кнопки с названием «open» указываем класс

«greenButton»

У кнопки с названием «close» указываем класс

«redButton»

Дизайн решает

Уже профи

Обращаемся к элементу «body» и указываем у него свойство «background-color»

Что-то новое

Что же такое свойство «position»

Данный элемент устанавливает способ позиционирования элемента на сайте.

Воу, это было сложно! Но на самом деле все намного проще.

Что-то новое

В нашем примере у нас есть коробка - наша картина (элемент «div» с классом «container»)

У нее мы будем задавать position:relative;

Данное свойство не изменяет порядок отображения элементов в браузере. Для нас оно интересно тем, что все элементы с position: absolute буду спауниться именно внутри элемента c position:relative;

Что-то новое

Посмотри на небольшие примеры на следующем слайде.

Нет position: relative у класса «container»

withoutpositionrelative - Replit

You can open this webpage in a new tab.

Copy link

Open in new tab

Есть position: relative у класса «container»

withpositionrelative - Replit

You can open this webpage in a new tab.

Copy link

Open in new tab

Уже профи

Обращаемся к классу «container» и указываем у него свойство:

text-align:center;

height

width

margin:0px auto;

overflow:hidden;

background-color

position: relative;

transition: 2s;

margin-top:

Уже профи

Обращаемся к слектору «*» и указываем у него свойства:

font-family:

margin: 0;

padding: 0;

Уже профи

Обращаемся к классу «buttonBox» и указываем у него свойства:

width: ;

height: ;

margin:0px auto;

text-align:center;

margin-top: ;

Уже профи

Обращаемся к элементу «button» и указываем у него свойства:

border:none;

height: ;

width: ;

font-size: ;

margin-right: ;

border-radius: ;

color: ;

padding: ;

transition: ;

Уже профи

Сделай так, чтобы при наведении мышки на кнопку она меняла цвет фона.

Уже профи

Обращаемся к классу «greenButton» и указываем у него свойство:

background-color

Уже профи

Обращаемся к классу «redButton» и указываем у него свойство:

background-color

Уже профи

Обращаемся к id «sun» и указываем у него свойства:

position: absolute;

top: 0px;

right: 0px;

width: ;

Уже профи

Обращаемся к id «bird» и указываем у него свойства:

position: absolute;

width: 50px;

top: 90px;

left: 100px;

Уже профи

Обращаемся к id «water» и указываем у него свойства:

width: 100%;

height: 200px;

background-color: #3498db;

Уже профи

Обращаемся к id «boat» и указываем у него свойства:

width: 100px;

position: absolute;

top: 200px;

right: 40px;

Что-то новенькое

z-index помогает нам отображать одни элементы поверх других.

Элементы с большим z-индексом отображаются поверх элементов с меньшим z-индексом.

Посмотри примеры на следующих слайдах

У свечки меньше z-индекс чем у маффина, поэтому свечка располагается за ним :)

Уже профи

Обращаемся к id «logo» и указываем у него свойства:

position: absolute;

width: 60px;

top: 280px;

right: 60px;

z-index: 1;

А кто же это?

Уже умеем

Создаем переменную «allBtns» и указываем ей все выбранные элементы «button».

PS: так мы не будем менять значение этой переменной, то мы можем воспользоваться ключевым словом «const» для ее создания :)

Уже умеем

Создаем переменную «container» и указываем ей выбранный элемент с классом «container».

PS: так мы не будем менять значение этой переменной, то мы можем воспользоваться ключевым словом «const» для ее создания :)

Уже умеем

Вызови у первой кнопки слушатель событий с параметрами: «click», function(){}

Уже умеем

Внутри функции слушателя событий укажи конструкцию для смены высоты элемента «container» до 0px

PS: тебе понадобятся вот эти элементы: style, container, height, "0px"

Уже умеем

Вызови у второй кнопки слушатель событий с параметрами: «click», function(){}

В функции этой конструкции укажи конструкцию для смены высоты элемента «container» до 400px

PS: тебе понадобятся вот эти элементы: style, container, height, "400px"