Разрабатываем лэндинг на html, css и JavaScript. Часть 4.

В прошлых уроках мы узнали что такое HTML и CSS и начали верстать одностраничный лэндинг. Мы создали главный экран, и блок с тремя преимуществами. Сегодня продолжим работу, сделав еще один несложный блок. Предыдущие уроки вы можете прочитать здесь:

Создаем лендинг - урок 1
Создаем лендинг - урок 2
Создаем лендинг - урок 3

Исходный код того что мы сделали ранее: Скачать исходники

При создании лэндинга чаще всего чередуют светлые и тёмные блоки с информацией. Наш лэндинг про видеокурс заработка на трейдинге начинается с тёмно-синего первого экрана, далее идёт светлый блок с тремя преимуществами. Следовательно, цвет третьего блока должен быть снова более-менее тёмный. Давайте напишем в нем краткую информацию о видеокурсе, и сделаем кнопочку, чтобы пользователь мог сразу купить видеокурс, прочитав его описание.

Создадим сперва div с классом fon, добавим к нему подходящую фоновую картинку и растянем его на 100%. А внутрь поместим еще один div с ограничением по ширине max-width: 900px;. Это нужно для того, чтобы фоновая картинка растягивалась на всю ширину монитора, а текст не на всю (слишком растянутый текст трудно читать).

Ниже представлен кусочки HTML и CSS кода для нового блока

HTML код

<div class="fon">
    <div class="maintext">
        Как именно можно зарабатывать на криптовалюте? Важно правильно анализировать рынок, получая информацию в автоматическом режиме. Мы научим вас мониторить валютные пары с помощью специальных программ, что позволит предсказывать памп, и играть на разнице курсов, совершая обмен в подходящий момент. Купив наш видеокурс, и вникнув в суть автоматизированного трейдинга, вы сможете работать всего несколько часов в день, получая при этом хорошие деньги.
        <br>
        <a href="#" class="mybutton">ЗАКАЗАТЬ ВИДЕОКУРС</a>
    </div>
</div>

CSS код

.fon {
  width: 100%; /* Ширина блока с фоном */
  text-align: center; /* Выравнивать внутренний текст по середине */
  background: url(../img/fon2.jpg);  /* Фоновая картинка */
  background-size: cover;  /* Растянуть фоновую картинку */
  background-position: center;  /* Центрировать фон */
}

.maintext {
  width: 100%; /* Ширина */
  max-width: 900px; /* Ограничение ширины */
  margin: 0 auto; /* Центрирование */
  height: 380px;  /* Высота */
  color: white;  /* Белый цвет шрифта */
  text-align: center;  /* Центрировать текст внутри блока */
  padding-top: 120px;  /* Отступ сверху */
  text-align: justify; /* Выравнивание текста по ширине  */
  font-size: 110%; /* Чуть увеличим размер шрифта */
  padding-right: 30px; /* Внутренний отступ справа */
  padding-left: 30px; /* Внутренний отступ слева */
}

Прочитайте комментарии к свойствам CSS чтобы понять их предназначение. В итоге получится еще один блок с синей фоновой картинкой, которую мы заранее поместили в папку img. В этом блоке будет текст, раскрывающий тему продаваемого видеокурса, и кнопка для заказа, класс у которой точно такой же как и у кнопки в первом экране, что позволяет не писать для новой кнопки снова все CSS свойства.

Исходники с добавленным блоком качать здесь

Вот скриншот того что у меня получилось:

Уже более-менее похоже на лэндинг, но не хватает меню, контактов, формы обратной связи и отзывов. Ждите в ближайшее время следующие уроки, в которых мы с вами всё это реализуем.

Данный материал подготовлен @pythono.