gameSite

Создай элемент div с классом «headerBlcok»

Внутри элемента c классом «headerBlcok» создай еще один div-элемент c классом «content»

Внутри элемента c классом «content» создай элемент «h1» и напиши туда название своего сайта.

Внутри элемента c классом «content» создай элемент «p» и напиши туда о чем твой сайт будет рассказывать.

Выйди из всех div-элементов и на новой строчке создай элемент «hr»

После этого создай элемент «div» и укажи у него класс «mainBlock»

Внутри элемента c классом «mainBlock» создай элемент «div» с классом «mainBlockContent»

Внутри элемента c классом «mainBlockContent» создай элемент «h3» и укажи туда какой-нибудь текст.

Пример:

Какие игры выйдут или вышли в этом году?

Внутри элемента c классом «mainBlockContent» создай элемент «h4» и укажи туда какой-нибудь текст.

Пример:

Ori and the Will of the Wisps

Внутри элемента c классом «mainBlockContent» создай элемент «img» с id «mainImg» и укажи туда какую-нибудь фотографию.

Создай элемент «p» и укажи туда какой-нибудь текст.

Пример:

Здесь представлено описание игры:

Создай элемент «div» и укажи у него класс «textBox»

Внутри элемента «div» с классом «textBox» укажи тег «p».

Напиши в этот тег какой-нибудь текст.

Пример:

Ori and the Will of the Wisps - это продолжение приключенческого платформера Ori and the Blind Forest, события которого разворачиваются в том же мире, что и в оригинальной игре, но в другом лесу - Нибеле.

Выйди из элемента «div» и с классом «textBox»

На новой строчке создай элемент «p» с текстом каким-нибудь текстом

Пример:

Геймплейный трейлер к E3 2018

Вставь какое-нибудь видео.

Для этого перейди на сайт «youtube»

Выбери видео

Нажми на него правой кнопкой мыши

Выбери пункт «Копировать HTML-код»

На новой строчке создай элемент «p» с текстом каким-нибудь текстом.

Пример:

Скриншоты игры:

На новой строчке создай элемент «table»

Внутри элемента «table» создай тег «tr»

Внутри элемента «tr» создай три тега «td»

Внутри каждого элемента «td» создай тег «img» и укажи туда какую-нибудь фотографию

Внутри элемента «table» после закрывающегося тега «tr» создай еще один тег «tr»

Внутри нового элемента «tr» создай три тега «td»

Внутри каждого элемента «td» создай тег «img» и укажи туда какую-нибудь фотографию

Выйди из элемента div с классом «mainBlockContent»

Создай на новой строчке тег div с классом «bottomBlock»

Внутри элемента div с классом «mainBlockContent» создай div с классом «bottomBlockContent»

Внутри элемента div с классом «bottomBlockContent» создай элемент «h3»

С каким-нибудь текстом.

Пример:

Ссылка на официальный сайт игры:

Создай тег «a» и укажи у него атрибут «href»

Внутри этого атрибута укажи ссылку на какой-нибудь сайт

Пример:

https://www.orithegame.com/

Благодаря селектору «*» мы можем задавать всем элементам какие-нибудь CSS-свойства.

Обратись к селектору «*», укажи у него CSS-свойства:

 margin: 0;

   padding: 0;

   font-family

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

Также добавь CSS-свойство «transition: 2s»

Обратись к элементу с id «mainImg» и укажи у него вот такие свойства:

width, margin-top, margin-bottom

Обратись к элементу «img» и укажи у него псевдо класс «hover»

Внутри фигурных скобок указываем CSS-свойство «transform: scale(1.2)»

Обратись к элементу «table» и укажи у него CSS-свойство «margin: 20px auto»

Обратись к элементу «body» и укажи у него CSS-свойство «text-align:center» и «color»

Обратись к элементу с классом «mainLogo» и укажи у него CSS-свойство «color»

Обратись к элементу с классом «headerBlcok» и укажи у него CSS-свойство «background-color»

Обратись к элементу с классом «content» и укажи у него CSS-свойство «padding»

Используй селектор «.content p» и укажи у него CSS-свойство «color»

Обратись к элементу с классом «mainBlock» и укажи у него CSS-свойства:

background-image: url("ссылка на фотографию");

background-size: cover;

   color

Обратись к элементу с классом «textBox» и укажи у него CSS-свойства:

display: inline-block;

width

margin-top

margin-bottom

border

background-color

color

border-radius

Обратись к элементу с классом «mainBlockContent» и укажи у него CSS-свойства:

padding-top

color

Обратись к элементу «h3» и укажи у него CSS-свойство «margin-bottom: 20px»

Обратись к элементу «p» и укажи у него CSS-свойства:

«margin-top»

«margin-bottom»

Обратись к элементу «h4» и укажи у него CSS-свойства:

«margin-bottom»

Обратись к элементу с классом «bottomBlock» и укажи у него CSS-свойства:

border-top

background-color

Обратись к элементу с классом «bottomBlockContent» и укажи у него CSS-свойства:

 padding-top

padding-bottom

Обратись к элементу с «h3», который находится в классе «bottomBlockContent» и укажи у него CSS-свойство:

 color