Hero Blocks with Text | Web Design & Development Tutorials

Learning Goals

Style the layout and appearance of a text-only hero block in a sample web page.
Animate text headlines so that they slide in from the top or left of a sample web page.

About hero blocks

Research has shown that a typical web user will form an opinion about a web page in just 50 milliseconds after the page loads on their screen.

If users like what they see, they will continue to read the page – and maybe purchase a product or service.
If they don't like what they see, they will exit the web page and go to another. And your website will have lost a potential customer.

So-called hero blocks (sometimes known as jumbotrons) are large and typically rectangular areas at the very top of a web page. They are the first item seen by users, and are intended to capture their attention and engage their interest in the web page.

Because they fill most of the top of the user's screen, hero blocks are often referred to as displaying above the fold. This term comes from the era when newspapers were printed on large sheets of paper. And, when placed in shops, they were folded in half so that only the top half of the paper was visible to customers. For this reason, newspapers printed their most attention-grabbing headlines and images above the fold.

On mobile, tablet, laptop and desktop screens, above the fold content is what the users can see without needing to scroll down the web page.

In the next two Tutorials, you will learn how to create hero blocks with background images and background videos. However, not every hero block needs to use images or videos. See the examples below.

In this Tutorial, you will create an above-the-fold hero block with animated text and a coloured background gradient.

Downloading your sample files

In this Tutorial, you will work with the following two files: a web page and a stylesheet:

hero-text.html: Click this link to open the web page in a new tab of your web browser. Right-click anywhere in the web page and choose Save as... (Brave or Chrome) or Save Page As... (Firefox) from the context menu displayed. Save the web page in your websites/exercises folder with the name hero-text.html
hero-text.css: Click this link to open the stylesheet file in a new tab of your web browser. Right-click anywhere in the browser window, and from the context menu, choose Save as... (Brave or Chrome) or Save Page As... (Firefox). Save the hero-text.css stylesheet file to your websites/exercises/assets/css folder.

You have now saved the two files you need for this Tutorial.

Inspecting the hero content and styles

In VS Code, open the hero-text.html web page and hero-text.css stylesheet.

You can see that the web page contains a <header>.

Inside this is a <div> child element with a class of .hero-text-container.

And this contains a <h1> main heading and an <h2> sub-heading

In your web browser, view the hero-text.html web page at different screen sizes.

Hero block width and height

By default, both the <header> and the child <div> are 100% wide, so they fill the full width of the viewport.

You can see that most but not all of the viewport height is filled by the hero block.

Here are the typical minimum height values you will want for your hero block:

Spacing around `<h1>` and `<h2>` headings

The horizontal (left and right) spacing around the <h1> and <h2> text is set by padding values on the <header> parent container. See the areas in red below.

Typically, the following padding values work equally well for viewports of all sizes.

The bottom padding value of 4% is added to balance the vertical space filled by the extra large h1 heading.

Alignment of `<h1>` and `<h2>` headings

Text within a hero block is most commonly centre-aligned. You achieve this by adding a text-align: center style rule to the header container.

To align the hero block text at the left, simply remove this style rule.

Below are some examples of hero blocks with centre and left-aligned text.

Vertical spacing between `<h1>` and `<h2>` headings

In the hero-text.css stylesheet, you can see that only the h1 class has any spacing assigned to it: a margin-bottom of 24px.

This ‘pushes down’ the h2 sub-heading from under the h1 main heading.

A value of 24px or similar should work well for all viewport sizes.

The equal vertical spacing above and below the text elements (above <h1> and below <h2>) is created with CSS flexbox styles. See the areas in red below.

Creating an extra large `<h1>` heading

To make the <h1> text bigger than is possible with the fluid font size scale in the CSS custom properties, use the CSS calc() function with a multiplier value such as 1.5.

Updating the hero background with a linear gradient

Currently, the <header> has a style rule in the CSS of background-color: gray.

Replace this with a linear gradient of two colours. You need to use the CSS background-image property instead of the background-color property.

For example:

/* Purple to orange */  
background-image: linear-gradient(90deg,#ff00cc,#333399);

/* Dark blue */ 
background-image: linear-gradient(90deg,#07092f,#165cc0);

Animation in web pages

You can add an on-load animation to a web page using only HTML and CSS. No JavaScript is required.

In practice, animating an element in a web page means changing one or more of the style rules (CSS properties) that control how it is displayed. Here are some CSS rules you can animate:

color and background-color
width and height
transform, scale and zoom

To use CSS animation, you must specify a @keyframes that contains the ‘before’ and ‘after’ styles. More complex animations may have a whole series of intermediate style changes.

A simple keyframe looks like the following:

@keyframes bg-change {
    0%   { background-color: red }
    100% { background-color: yellow }
}

Now here is the HTML element you want to animate.

<!-- The element to be animated -->
<div class="change-background-color">Change Me</div>

And here are its current CSS property in its linked stylesheet.

/* Element class */
.change-background-color {
    background-color: red;  
}

In the stylesheet, add the following two new style rules to the class.

/* Element class */ 
.change-background-color {
    background-color: red;
    animation-name: bg-change;
    animation-duration: 4s
}

animation-name: This connects the element to its @keyframe. You are free to choose this. For example, you could have named your animation change-bg, new-background or whatever.
animation-duration: This is needed for the animation to work. The default value is 0s. In this simple example, the time chosen is 4s.

Other style rules you could add to the .change-background-color class include animation-delay (in seconds) and animation-iteration-count (the number of times the animation should run).

The animation speed curve

The so-called speed curve of an animation is controlled by its animation-timing-function CSS property. The possible values are:

ease: Start slow, speed up, and then end slowly. (This is default.)
linear: Same speed from start to finish
ease-in: Start slow and speed up.
ease-out: Start fast and end slowly.
cubic-bezier(n,n,n,n): Uses mathematical equation with your entered values.

Animation values may be combined and written in CSS shorthand, beginning with the property name animation. For example:

/* Element class */ 
.change-background-color {
    background-color: red;
    animation: bg-change 4s ease-in
}

Animating elements in CSS often requires complex, easy-to-mistype code. For this reason, frontend developers rely on visual code generators such as the following:

Animating your hero block

In this task, you will animate the <h1> heading and <h2> sub-heading in your sample hero-text web page using the Animista.net visual code generator.

Follow these steps to create a slide-in-top class and @keyframe.

Go to this web page. Animista and click the Try me button.
Across the top of the screen you can see a navigation menu bar of main options (BASIC, ENTRANCES, EXITS, TEXT ...). For each of these main options, you can choose from a range of sub-options displayed as white text inside black circles on a draggable sub-menu. Many of these sub-options also have sub-options of their own.
In the main top menu, click the ENTRANCES option. Next, click the red circle containing the SLIDE-IN sub-option. Finally, click sub-sub-option named slide-in-top.
At the right of the screen, click the {*} icon to display the CSS code that Animista has created for you.
Deselect the Autoprefixer option and click the Copy Class button.

Paste the code into your hero-text.css file at the end of your stylesheet.

.slide-in-top {
    animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;  
}

Return to the Animista screen, and click the Copy Keyframes button.

Paste that code into your hero-text.css file at the end of the stylesheet.

/* ----------------------------------------------
* Generated by Animista on 2020-4-8 10:45:15
* Licensed under FreeBSD License.
* See http://animista.net/license for more info. 
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

/*
* ----------------------------------------
* animation slide-in-top
* ----------------------------------------
*/

@keyframes slide-in-top {
    0% {
        transform: translateY(-1000px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

You have now finished creating the slide-in-top class.

When you apply this class to a heading or element in a web page, you may find that the animated element moves down a little too quickly. In the hero-text.css stylesheet, increase the time taken for the sliding animation from 0.5s to 1s as shown below.
```
.slide-in-top {
    animation: slide-in-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;  
}
```

Next, follow these steps to create a slide-in-left class and @keyframe.

Return to the main Animista web page.
In the menu across the top of the web page, click the ENTRANCES option.
Next, click the red circle containing the SLIDE-IN sub-option.
Finally, click sub-sub-option named slide-in-left.
At the right of the screen, click the {*} icon to display the CSS code that Animista has created for you.
Deselect the Autoprefixer option and click the Copy Class button.

Paste the code into your hero-text.css file at the end of your stylesheet.

.slide-in-left {
      animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;  
}

Return to the Animista screen, and click the Copy Keyframes button.

Paste that code into your hero-text.css file at the end of the stylesheet.

/* ----------------------------------------------
 * Generated by Animista on 2020-4-8 10:45:15
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */


/*
 * ----------------------------------------
 * animation slide-in-left
 * ----------------------------------------
 */
@keyframes slide-in-left {
    0% {
        transform: translateX(-1000px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

You have now finished creating the slide-in-left class.

Applying the animated text classes

You will now apply the two new animated text classes in your stylesheet to your web page.

In your hero-text.html file, add the slide-in-top class to your <h1> heading as shown below.
Add the slide-in-left class to your <h2> sub-heading as shown below.

All done.

Updating your website home page

Now that you have updated and styled a new web page, let’s add a hyperlink to it on the ‘home page’ of your web site. Follow the steps below:

In VS Code, open this HTML file in your ‘main’ websites folder: index.html
Copy-and-paste the following new line to your web page at end of current list of web pages.
```
<p><a href="exercises/hero-text.html">Hero block with animated text</a></p> 
```

Save your index.html web page and view the result in your browser.

✅ That’s it. You have now successfully completed this Tutorial.

Uploading your files to Github

You are now ready to upload your work to your account on Github.

Open a new tab in your web browser and go to Github.com. If you are not already signed in to your Github account, sign in now.
On your Github home page, click the ‘repo’ that holds your web pages. Its name will look as follows, where username is your chosen username on Github. username.github.io
On the next Github screen displayed, near the right of the screen, you can see a button named Add file. Click on it.
From the dropdown list displayed, choose the option Upload files.
In File Explorer (Windows 10) or Finder (Apple Mac), drag-and-drop your index.html file and your 📁 exercises sub-folder to upload them to your repository on Github.
Scroll down to the bottom of the Github screen, and accept or edit the short message (Add files via upload) in the Commit changes box.
Finally, click the green Commit changes button to upload your files.