gameSite

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