Make a band that calls out to people

01 / 05

A place for one line and nothing else

Have you seen the band between lists, or below them, with one big piece of text on it? The bit that calls out to you, saying something like "give it a go".

It is not a place for passing on information; it is a place for slowing the reading down. So the less it holds, the better.

02 / 05

It is built like the band for a list

No new setting turns up. It is built exactly like the base for a list you put together before:

the outer band … a background colour and space above and below
the inner container … a set width, in the middle

All you do is build those two boxes once more.

<div class="message">  <div class="container">    <h2>Let us make something together</h2>  </div></div>

03 / 05

Deepen the colour to stop the eye

Make it a deeper colour than the bands around it and the air changes just there, and the eye stops. On a deep background you put white text.

Be generous with the space above and below too. The less there is around it, the stronger the one line you put there.

.message {  background-color: #1f4f5f;  padding: 72px 0;  color: white;}

04 / 05

Line the contents up in the middle

The words that call out go in the middle with text-align: center;. Aligned left, it starts to look like something to read.

Write it on the band and the heading and the paragraph inside line up together.

.message {  text-align: center;}

05 / 05

Get the strength from the text size

Last, make the heading big. Just raising the font-size makes it the strongest line on the page.

Colour, space, alignment, size — every setting is one you know, and this is how far they get you. Have a go.