Двенадцатый урок. Шапка лэндинга

Закрепим предыдущие уроки на верстке простого блока лэндинга. Лэндинг (landing page) — это страница, на которой описывается преимущества какого-то товара или услуги. Структурно лэндинги делаются примерно по одной схеме, где присутствует как минимум большая шапка, описание товара, призыв к действию и какие-то дополнительне блоки, вроде отзывыв клиентов, сравнительные таблицы и т.п.

Сейчас нас интересует не маркетинговая сторона вопроса, а техническая, но перед тем, как что-то верстать я хочу, чтобы вы зашли на сайт Generator for Startup Framework: Create Landing Page где по ссылке внизу (в виде стрелки вниз) перешли непосредственно в режим генератора.

Первое задание этого урока — научиться пользоваться этим генератором. Поскольку верстать мы будем всё сами, то нам вполне достаточно будет только бесплатной версии, где можно размещать блоки визуально. Так же будет доступна кнопка Export, по которой можно сохранить (в виде url-адреса) и заново загрузить настроенную страницу.

Как правило, лэндинги верстаются без общего контейнера, чтобы каждый блок мог быть любым, включая на полную ширину браузера. Таким образом, каждый блок будет обрамляться своим layout-контейнером.

первый блок
второй блок
третий блок
и т.д.
<div class="layout-center-wrap"><div class="layout-wrap">
первый блок
</div></div>

<div class="layout-center-wrap"><div class="layout-wrap">
второй блок
</div></div>

<div class="layout-center-wrap"><div class="layout-wrap">
третий блок
</div></div>

Характерной чертой таких блоков будет, то что их можно произвольно перетусовать между собой, например переместить второй блок под третийи, или поменять оформление не зависимо от других блоков.

Возьмем для верстки такой пример (это один блок):

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

Итак, вначале разметим основной контейнер:

<div class="layout-center-wrap bg-blue800 pad50-tb t-white"><div class="layout-wrap">
блок
</div></div>
блок

Здесь мы у контейнера сразу задали внутренние отступы сверху и снизу (pad50-tb), фон (bg-blue800) и белый цвет текста по-умолчанию (t-white).

Теперь нужно решить, как верстать внутреннее содержимое. Верхний блок «лого + меню» очевидно являются flex-сеткой на две колонки. А нижние блоки текст и кнопки обычные блоки на всю ширину контейнера. Сразу размечаем все блоки:

<div class="layout-center-wrap bg-blue800 pad50-tb t-white"><div class="layout-wrap">

	<div class="flex">
		<div class="w20">Лого</div>
		<div class="w80">Меню</div>
	</div>

	<div class="mar50-t">We have created the product that will help your startup to look even better</div>
	
	<div class="mar20-t">Кнопки</div>

</div></div>
Лого
Меню
We have created the product that will help your startup to look even better
Кнопки

Чтобы блоки между собой не слипались, сразу указываем внешние отступы. Они могу быть как снизу, так и сверху. Немного удобней указывать верхний отступ для текущего блока.

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

<div class="layout-center-wrap bg-blue800 pad50-tb t-white"><div class="layout-wrap">

	<div class="flex flex-vcenter">
		
		<div class="w30 flex flex-vcenter">
			<div class="i-gg-circle t-red t250"></div>
			<div class="w100 t130 bold">Startup</div>
		</div>
		
		<div class="w70 t-right">
			<a class="t-white hover-t-blue300 mar20-r" href="#">Меню</a> 
			<a class="t-white hover-t-blue300 mar20-r" href="#">Меню</a> 
			<a class="t-white hover-t-blue300" href="#">Меню</a> 
		</div>
	</div>

	<div class="mar50-t">We have created the product that will help your startup to look even better</div>
	
	<div class="mar20-t">Кнопки</div>

</div></div>
We have created the product that will help your startup to look even better
Кнопки

Обратите внимание, как задаётся flex-сетка для логотипа и его иконки. Поскольку нам нужно вертикальное выравнивание, то проще всего его сделать через flex (flex-vcenter). Ширина ячейки для иконки должна быть автоматически выбрана исходя из содержания (размера иконки), который мы не знаем. Поэтому для ячейки текста задается максимальное значение ширины (w100), но поскольку ширина ячеек во flex-сетке носит рекомендательный характер, то браузер автоматом подправит её так, чтобы элементы оказались на оптимальном расстоянии.

Для текста «We have created...» нужно сделать центрирование и увеличить шрифт. Центрирование текста, в отличие от блоков, выполняется очень просто, поскольку для этого существуют готовые css-свойства text-align:

.t-right   { text-align: right; }
.t-left    { text-align: left; }
.t-center  { text-align: center; }
.t-justify { text-align: justify; }

Нам нужно центральное:

...	
	<div class="mar50-t t-center t150">We have created the product that will help <br>your startup to look even better</div>
...

Чтобы разместить текст на две строчки согласно макету, я добавил BR для принудительного переноса. Здесь как раз использование BR будет уместным, поскольку это не новый абзац или предложение.

We have created the product that will help
your startup to look even better
Кнопки

Теперь разбираемся с кнопками. Сами по себе кнопки могут быть как кнопками для выполнения какого-то действия, например «Отправить» или просто стилизованными под кнопки ссылки. В подавляющем большинстве случаев, если возле кнопки нет поля для ввода дополнительной информации, например адреса электронной почты, то это обычные ссылки. Если же поля есть, то это говорит о форме ввода. В данном примере очевидно имеются ввиду кнопки-ссылки.

В UniCSS предусмотрен специальный класс button, который позволяет стилизовать любые элементы под кнопки.

<a class="button" href="#">Кнопка? Нет, ссылка!</a>

Кнопка? Нет, ссылка!

Для того, чтобы настроить внешний вид используются все те же классы: bg-XX, t-XX и т.п. В нашем случае нужно задать фон, фон при наведении и чуть уменьшить размер шрифта (90%).

<a class="button bg-blue700 hover-bg-blue600 t90" href="#">Learn More</a> 
<a class="button bg-red700 hover-bg-red600 t90" href="#">Buy Now for $9</a>
Learn More Buy Now for $9

Добавляем эти кнопки и сразу же указываем центральное выравнивание. Кнопки-ссылки можно выравнивать как и текст, поскольку это не блочные, а строчные элементы.

We have created the product that will help
your startup to look even better

Чтобы кнопки между собой не сливались между ними достаточно добавить пробел.

И последний штрих. Мы видим, что внутреннего нижнего отступа в 50px недостаточно. Нужно его увеличить примерно в 2 раза. Сложность в том, что в UniCSS по умолчанию такие отступы для padding и margin не создаются. На реальном проекте мы сможем скомпилировать UniCSS ровно так как нам нужно, но сейчас мы поступим проще: добавим отступ в виде style, а не pad-класса.

<div class="layout-center-wrap bg-blue800 t-white" style="padding: 50px 0 100px 0;"><div class="layout-wrap">
...
We have created the product that will help
your startup to look even better

Не бойтесь использовать style в своей работе. Это очень частая практика, когда нужно по месту подкорректировать вывод блока. Привожу полный html-код:

<div class="layout-center-wrap bg-blue800 t-white" style="padding: 50px 0 100px 0;"><div class="layout-wrap">

	<div class="flex flex-vcenter">
		
		<div class="w30 flex flex-vcenter">
			<div class="i-gg-circle t-red t250"></div>
			<div class="w100 t130 bold">Startup</div>
		</div>
		
		<div class="w70 t-right">
			<a class="t-white hover-t-blue300 mar20-r" href="#">Меню</a> 
			<a class="t-white hover-t-blue300 mar20-r" href="#">Меню</a> 
			<a class="t-white hover-t-blue300" href="#">Меню</a> 
		</div>
	</div>

	<div class="mar50-t t-center t150">We have created the product that will help 
your startup to look even better</div>
	
	<div class="mar20-t t-center">
		<a class="button bg-blue700 hover-bg-blue600 t90" href="#">Learn More</a> 
		<a class="button bg-red700 hover-bg-red600 t90" href="#">Buy Now for $9</a>
	</div>

</div></div>

Задания

Задания доступны только после авторизации.