eduGram

eduGram

Начнем с HTML

Я где-то про это слышал(а)

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

Я где-то про это слышал(а)

Создай элемент «p».

Внутри него создай тег «span».

Внутри тега «span» напиши название своей соцсети.

Я где-то про это слышал(а)

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

Я где-то про это слышал(а)

Внутри него создай тег «input» с атрибутами:

type="text", placeholder="Phone nubmer, username or email"

Я где-то про это слышал(а)

После первого элемента «input» в теге «form» создай еще один элемент «input» с атрибутами:

type="password", placeholder="Password"

Я где-то про это слышал(а)

После тега «form» создай тег «div» с классом «btnBox»

Я где-то про это слышал(а)

Создай элемент «button» с классом «eduBtn».

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

Я где-то про это слышал(а)

После этого создаем элемент «br».

Я где-то про это слышал(а)

После «br» создай элемент «div» с классом «orBlock».

Я где-то про это слышал(а)

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

Я где-то про это слышал(а)

После элемента «div» с классом «orBlock» создай элемент «p» с классом «orText». Внутри элемента «p» напиши текст «or»

Я где-то про это слышал(а)

После этого элемента создай еще один тег «div» с классом «line»

Я где-то про это слышал(а)

Выйди из div с классом «orBlock».

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

Я где-то про это слышал(а)

Внутри div с классом «btnBox» создай элемент «button» с классом «eduBtn». Внутри этого элемента создай тег «img» и укажи туда ссылку на картинку какой-нибудь соцсети.

Я где-то про это слышал(а)

Внутри элемента «button» также напиши какой-нибудь текст:

«Log in with Facebook»

Я где-то про это слышал(а)

После элемента «button» создай элемент «br»

Я где-то про это слышал(а)

После этого создай элемент «button» с классом «forgetBtn». Внутри этого элемента напиши текст:

«Forgot password?»

Я где-то про это слышал(а)

Выйди из div c классом «mainBlock».

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

Я где-то про это слышал(а)

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

Внутри этого элемента укажи текст:

«Don't have an account?».

Я где-то про это слышал(а)

После элемента «span» создай элемент «button» с классом «upBtn». Внутри этого элемента напиши текст:

«Sign up»

Приукрасим?

Я где-то про это слышал(а)

Обратись к селектору «*», укажи у него CSS-свойство «font-family». Выбери шрифт с сайта на следующем слайде.

PS: если ты забыл как это сделать, то обзательно задай вопрос ментору.

Google Fonts

You can open this webpage in a new tab.

Copy link

Open in new tab

Я где-то про это слышал(а)

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

«width», «height», «margin: 0px auto», «text-align: center», «border», «margin-top: 20px», «vertical-align: middle»

Я где-то про это слышал(а)

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

«width», «height», «margin: 0px auto», «text-align: center», «border»

Я где-то про это слышал(а)

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

font-family, font-weight: bold, font-size

Я где-то про это слышал(а)

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

font-family, border: none,  background-color, color, width, height,  border-radius, text-align: center

Я где-то про это слышал(а)

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

margin-top

Я где-то про это слышал(а)

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

height, width, background-color, display: inline-block

Я где-то про это слышал(а)

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

display: inline-block

Я где-то про это слышал(а)

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

display: inline-block;

Я где-то про это слышал(а)

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

text-transform: uppercase, font-family, color, font-size

Я где-то про это слышал(а)

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

width, height, font-size, border, border-radius, margin-top

Я где-то про это слышал(а)

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

border: none, background-color, color, margin-top

Я где-то про это слышал(а)

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

border: none, background-color, color, margin-top, font-size

Я где-то про это слышал(а)

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

width,  vertical-align: top