All Tutorials  >

Single-column Hero Blocks

Learning Goals

At the end of this Tutorial you will be able to:

You can view a finished version of the sample web page you will update in this Tutorial by clicking the link below. The finished sample will open in a new tab of your web browser.

Sample image hero-single.html

Contents

About hero blocks

Working with your sample files

Hero block: sample one

Hero block: sample two

Hero block: sample three

Hero block: sample four

Hero block: sample five

Animating text

Uploading your files to GitHub

About hero blocks

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.

Working with your sample files

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

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

Hero block: sample one

In this section, you will update the styles of the hero-1 block within your sample files.

Update the hero-1 background-color

Your first task is to update the background colour of the hero-1 container.

  1. In VS Code, in the hero-single.css stylesheet, around line 33, replace the current background-color property and value with the following:
    hero-1  {
      ...
      background-image: linear-gradient(90deg, #ff00cc, #333399);
    }
    Note: The three dots ... simply refers to all the other styles for the CSS selector.
  2. Save the stylesheet and view the effect on the web page in your web browser.

Update the hero-1 font-family

Your second task is to add a Google Font for all the text within the hero-1 container. The Google Font named Open Sans has already been added to the web page and is available to your CSS file.

  1. In VS Code, display the hero-single.css stylesheet.
  2. Update the following properties and values:
    .hero-1 h1 { 
       ...
       font-family: 'Open Sans', sans-serif;
    }
    .hero-1 h2 { 
       ...
       font-family: 'Open Sans', sans-serif;
    }
    .hero-1 .container-btn a.btn-primary,
    .hero-1 .container-btn a.btn-secondary {
       ...
       font-family: 'Open Sans', sans-serif;
    }
  3. Save the stylesheet and view the effect on the web page in your web browser.

Update the hero-1 button styles

Next, you will update the styles that control the passive and interactive states of the two hyperlinks styled as buttons within the btn-container of the hero-1 block container.

  1. In VS Code, in the hero-single.css stylesheet, update the following properties and values for the btn-primary (solid) button:
    .hero-1 a.btn-primary:link, 
    .hero-1 a.btn-primary:visited {
        color: #fff;
        border: solid 2px red;
        background-color: red;
        transition: all 0.2s linear;
    }
    .hero-1 a.btn-primary:focus,
    .hero-1 a.btn-primary:hover,
    .hero-1 a.btn-primary:active {
        background-color: green;
        border: solid 2px green;
    }
  2. Update the following properties and values for the btn-secondary (transparent or ‘ghost’) button:
    .hero-1 a.btn-secondary:link, 
    .hero-1 a.btn-secondary:visited {
        color: #fff;
        border: solid 2px #fff;
        transition: all 0.2s linear;
    }
    .hero-1 a.btn-secondary:focus,
    .hero-1 a.btn-secondary:hover,
    .hero-1 a.btn-secondary:active {
        color: lightblue;
        border: solid 2px lightblue;
    }
  3. At the bottom of the stylesheet, add the following new CSS selectors and style rules:
    /* === GLOBAL BUTTON STYLES === */
    
    /* Button shapes */
    a.btn-soft { border-radius: 5px }
    a.btn-rounded { border-radius: 40px }
    
  4. Save the hero-single.css stylesheet.
  5. In the hero-single.html web page, add the btn-soft class to each of your two buttons. Project Hero Blocks
  6. Save and view your web page.

Add icons to hero-1 from Font Awesome

In the final update to the hero-1 block, you will add two icons from Font Awesome. The link to the Font Awesome stylesheet is included in the hero-single.html web page, and is so available to your CSS file.

  1. In VS Code, in the hero-single.html web page, add the following Font Awesome icons to your two buttons, at the left of the text within the hyperlink   <i class="fas fa-user"></i>
    <i class="far fa-arrow-alt-circle-down"></i>   Leave a single, blank space immediately after each icon. Project Hero Blocks
  2. Save your web page.
  3. Display your stylesheet and, at the very bottom, add the following.
       /* Icon spacing inside buttons */
       a.btn-primary i, a.btn-secondary i { margin-right: 12px }
    
  4. Save you stylesheet and view the effect on your web page.

Hero block: sample two

In this section, you will update the styles of the hero-2 block within your sample files.

This second hero block has a similar structure to hero-1 block. The only difference is that both buttons have the same class of btn-primary.

Update the hero-2 background-color

Your first task is to update the background colour of the hero-2 container.

  1. In VS Code, in the hero-single.css stylesheet, replace the current background-color property and value for the hero-2 block with the following:
    hero-2  {
      ...
      background-color: #1f364d;
    }
  2. Save the stylesheet and view the effect on the web page in your web browser.

Update the hero-2 font-family

Your next task is to add Google Fonts for the text within the hero-2 container. The Google Fonts named Libre Baskerville and Open Sans have already been added to the web page and are available to your CSS file.

  1. In VS Code, display the hero-single.css stylesheet.
  2. Update the following properties and values:
    .hero-2 h1 { 
       ...
       font-family: 'Libre Baskerville', sans-serif;
    }
    .hero-2 h2 { 
       ...
       font-family: 'Open Sans', sans-serif;
    }
    .hero-2 .container-btn a.btn-primary {
       ...
       font-family: 'Open Sans', sans-serif;
    }
  3. Save the stylesheet and view the effect on the web page in your web browser.

Update the hero-2 button styles

Next, you will update the styles of the two buttons within the hero-2 block. Both have a class of btn-primary.

  1. In VS Code, in the hero-single.css stylesheet, update the following properties and values for the btn-primary (solid) button:
    .hero-2 a.btn-primary:link, 
    .hero-2 a.btn-primary:visited {
        color: #1f364d;
        border: solid 2px #11ece5;
        background-color: #11ece5;
        transition: all 0.2s linear;
    }
    .hero-2 a.btn-primary:focus,
    .hero-2 a.btn-primary:hover,
    .hero-2 a.btn-primary:active {
        background-color: hotpink;
        border: solid 2px hotpink;
    }
  2. Save the hero-single.css stylesheet.
  3. In the hero-single.html web page, add the btn-soft class to each of your two buttons.
  4. Save and view your web page.

Add icons to hero-2 from Font Awesome

In the final update to the hero-2 block, you will add two icons from Font Awesome.

  1. In VS Code, in the hero-single.html web page, add the following Font Awesome icons to your two buttons, at the left of the text within the hyperlink tags:   <i class="fas fa-palette"></i>
    <i class="far fa-envelope"></i>   Leave a single, blank space immediately after each icon.
  2. Save and view your web page.

Hero block: sample three

In this section, you will update the styles of the hero-3 block within your sample files.

This hero block has only one button rather than two. The single button has a class of btn-primary.

Update the hero-3 background-color

Your first task is to update the background colour of the hero-3 container.

  1. In VS Code, in the hero-single.css stylesheet, replace the current background-color property and value for the hero-3 block with the following:
    hero-3 {
      ...
      background-color: #fabbb6;
    }
  2. Save the stylesheet and view the effect on the web page in your web browser.

Update the hero-3 font-family

Your next task is to add Google Fonts for the text within the hero-3 container. The Google Fonts named Fjalla One and Open Sans have already been added to the web page and are available to your CSS file.

  1. In VS Code, display the hero-single.css stylesheet.
  2. Update the following properties and values:
    .hero-3 h1 { 
       ...
       font-family: 'Fjalla One', sans-serif;
    }
    .hero-3 h2 { 
       ...
       font-family: 'Open Sans', sans-serif;
    }
    .hero-3 .container-btn a.btn-primary {
       ...
       font-family: 'Open Sans', sans-serif;
    }
  3. Save the stylesheet and view the effect on the web page in your web browser.

Update the hero-3 button styles

Next, you will update the styles of the button within the hero-3 block. It has a class of btn-primary.

  1. In VS Code, in the hero-single.css stylesheet, update the following properties and values for the 'all-states' values of the buttons:
    .hero-3 .container-btn a.btn-primary {
        padding: 0 0 6px 0;
    }
  2. Update the following properties and values for the btn-primary button:
    .hero-3 a.btn-primary:link, 
    .hero-3 a.btn-primary:visited {
        color: #000;
        border-bottom: solid 2px #000;
        transition: all 0.2s linear;
    }
    .hero-3 a.btn-primary:focus,
    .hero-3 a.btn-primary:hover,
    .hero-3 a.btn-primary:active {
        color: red;
        border-bottom: solid 2px red;
    }
  3. Save the hero-single.css stylesheet.
  4. In the hero-single.html web page, add the btn-soft class to each of your two buttons.
  5. Save and view your web page.

Add icons to hero-3 from Font Awesome

In the final update to the hero-3 block, you will add two icons from Font Awesome.

  1. In VS Code, in the hero-single.html web page, add the following Font Awesome icon to the button, at the left of the text within the hyperlink tags: <i class="far fa-envelope"></i>   Leave a single, blank space immediately after the icon.
  2. Save and view your web page.

Hero block: sample four

In this section, you will update the styles of the hero-4 block within your sample files.

This hero block has two buttons, each with a class of btn-primary.

Unlike previous hero blocks, the content of this block is left-aligned rather than centre-aligned.

Update the hero-4 background-color

Your first task is to update the background colour of the hero-4 container.

  1. In VS Code, in the hero-single.css stylesheet, replace the current background-color property and value for the hero-4 block with the following:
    hero-4  {
       ...
       background-color: #3c1c78;
    }
  2. Save the stylesheet and view the effect on the web page in your web browser.

Update the hero-4 font-family

Your next task is to add Google Fonts for the text within the hero-4 container. The Google Fonts named Roboto Slab and Roboto have already been added to the web page and are available to your CSS file.

  1. In VS Code, display the hero-single.css stylesheet.
  2. Update the following properties and values:
    .hero-4 h1 { 
       ...
       font-family: 'Roboto Slab', sans-serif;
    }
    .hero-4 h2 { 
       ...
       font-family: 'Roboto', sans-serif;
    }
    .hero-4 .container-btn a.btn-primary {
       ...
       font-family: 'Roboto', sans-serif;
    }
  3. Save the stylesheet and view the effect on the web page in your web browser.

Update the hero-4 button styles

Next, you will update the styles of the two buttons within the hero-2 block. Both have a class of btn-primary.

  1. In VS Code, in the hero-single.css stylesheet, update the following properties and values for the btn-primary (solid) button:
    .hero-4 a.btn-primary:link, 
    .hero-4 a.btn-primary:visited {
        color: #fff;
        border: solid 2px red;
        background-color: red;
        transition: all 0.2s linear;
    }
    .hero-4 a.btn-primary:focus,
    .hero-4 a.btn-primary:hover,
    .hero-4 a.btn-primary:active {
        background-color: green;
        border: solid 2px green;
    }
    /* Button alignment within their containers */
    .hero-4 .container-btn .item-col-2:first-child { text-align: left }
    
  2. Save the hero-single.css stylesheet.
  3. In the hero-single.html web page, add the btn-rounded class to each of your two buttons.
  4. Save and view your web page.

Add icons to hero-4 from Font Awesome

In the final update to the hero-4 block, you will add two icons from Font Awesome.

  1. In VS Code, in the hero-single.html web page, add the following Font Awesome icons to your two buttons, at the left of the text within the hyperlink tags:   <i class="fas fa-palette"></i>
    <i class="far fa-envelope"></i>   Leave a single, blank space immediately after each icon.
  2. Save and view your web page.

Hero block: sample five

In this section, you will update the styles of the hero-5 block within your sample files.

This hero block has only a main heading but no sub-heading, and is left-aligned. It has one button, with a class of btn-primary.

Update the hero-5 background-color

Your first task is to update the background colour of the hero-5 container.

  1. In VS Code, in the hero-single.css stylesheet, replace the current background-color property and value for the hero-5 block with the following:
    hero-5  {
      ...
      background-color: #fbf5eb;
    }
  2. Save the stylesheet and view the effect on the web page in your web browser.

Update the hero-5 font-family

Your next task is to add Google Fonts for the text within the hero-5 container. The Google Fonts named Roboto Slab and Roboto have already been added to the web page and are available to your CSS file.

  1. In VS Code, display the hero-single.css stylesheet.
  2. Update the following properties and values:
    .hero-5 h1 { 
       ...
       font-family: 'Libre Baskerville', sans-serif;
    }
    .hero-5 .container-btn a.btn-primary {
       ...
       font-family: 'Open Sans', sans-serif;
    }
  3. Save the stylesheet and view the effect on the web page in your web browser.

Update the hero-5 button styles

Next, you will update the styles of the two buttons within the hero-5 block. Both have a class of btn-primary.

  1. In VS Code, in the hero-single.css stylesheet, update the following properties and values for the 'all-states' values of the buttons:
    .hero-5 .container-btn a.btn-primary {
       ...
       padding: 0 0 12px 0;
    }
  2. Update the following properties and values for the btn-primary button:
    .hero-5 a.btn-primary:link, 
    .hero-5 a.btn-primary:visited {
        color: #000;
        border-bottom: dashed 2px #000;
        transition: all 0.2s linear;
    }
    .hero-5 a.btn-primary:focus,
    .hero-5 a.btn-primary:hover,
    .hero-5 a.btn-primary:active {
        color: #000;
        border-bottom: dashed 2px red;
    }
  3. Save the hero-single.css stylesheet.
  4. In the hero-single.html web page, add the btn-soft class to each of your two buttons.
  5. Save and view your web page.

Add icons to hero-5 from Font Awesome

In this next update to the hero-5 block, you will add two icons from Font Awesome.

  1. In VS Code, in the hero-single.html web page, add the following Font Awesome icons to your two buttons, at the left of the text within the hyperlink tags:   <i class="fas fa-palette"></i>
    <i class="far fa-envelope"></i>   Leave a single, blank space immediately after each icon.
  2. Save and view your web page.

Adding span tags to the hero-5 block

In the final update to the hero-5 block, you will add two <span> tags with colour classes.

  1. At the bottom of the hero-single.css stylesheet, add the following new CSS selectors and style rules:
    /* === GLOBAL TEXT COLOUR STYLES === */
    .text-red { color: red }
    .text-darkgray { color: #888 }
    
    Save your stylesheet.
  2. In the hero-single.html web page, in the text of the <h1> heading, enclose the words "digital designer" and "graphic artist" inside a span tag with a class name of text-red.   Enclose the ampersand "&" inside a span tag with a class name of text-darkgray.
  3. Save and view your web page.

Animating text

In the final step below, you will animate the text headlines for the hero-1 and hero-2 blocks so that they slide in from the top (hero-1) and from the left (hero-2) of the web page.

To generate the CSS code required for the animation effect, you will use the Animista website created by Ana Travas.

You will create the following two new classes in your hero-single.css stylesheet:

You can then apply these classes to elements in your linked hero-single.html web page.

Creating the slide-in-top CSS class

Follow these steps to create the slide-in-top class in your hero-single.css stylesheet.

  1. Go to this web page.  Animista  and click the Try me button.
  2. 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. Project Hero Blocks
  3. 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. Project Hero Blocks
  4. At the right of the screen, click the {*} icon to display the CSS code that Animista has created for you. Project Hero Blocks
  5. With the Autoprefixer option selected, click the Copy Class button. Project Hero Blocks
  6. Paste the code into your hero-single.css file at the end of your stylesheet.
    .slide-in-top {
       -webkit-animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;  
               animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;  
    }
  7. Return to the Animista screen, and click the Copy Keyframes button. Project Hero Blocks
  8. Paste that code into your hero-single.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
     * ----------------------------------------
     */
    
     @-webkit-keyframes slide-in-top {
        0% {
          -webkit-transform: translateY(-1000px);
                  transform: translateY(-1000px);
          opacity: 0;
        }
        100% {
          -webkit-transform: translateY(0);
                  transform: translateY(0);
          opacity: 1;
        }
      }
       @keyframes slide-in-top {
        0% {
          -webkit-transform: translateY(-1000px);
                  transform: translateY(-1000px);
          opacity: 0;
        }
        100% {
          -webkit-transform: translateY(0);
                  transform: translateY(0);
          opacity: 1;
        }
      }
    
    You have now finished creating the slide-in-top class.
  9. 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-single.css stylesheet, increase the time taken for the sliding animation from 0.5s to 1s as shown below.
    .slide-in-top {
       -webkit-animation: slide-in-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;  
               animation: slide-in-top 1a cubic-bezier(0.250, 0.460, 0.450, 0.940) both;  
    }

Creating the slide-in-left CSS class

Follow these steps to create the slide-in-left class in your hero-single.css stylesheet.

  1. Return to the main Animista web page.
  2. In the menu across the top of the web page, click the ENTRANCES option.
  3. Next, click the red circle containing the SLIDE-IN sub-option.
  4. Finally, click sub-sub-option named slide-in-left. Project Hero Blocks
  5. At the right of the screen, click the {*} icon to display the CSS code that Animista has created for you. Project Hero Blocks
  6. With the Autoprefixer option selected, click the Copy Class button. Project Hero Blocks
  7. Paste the code into your hero-single.css file at the end of your stylesheet.
    .slide-in-left {
       -webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;  
               animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;  
    }
    
  8. Return to the Animista screen, and click the Copy Keyframes button. Project Hero Blocks
  9. Paste that code into your hero-single.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
     * ----------------------------------------
     */
    @-webkit-keyframes slide-in-left {
      0% {
        -webkit-transform: translateX(-1000px);
                transform: translateX(-1000px);
        opacity: 0;
      }
      100% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
        opacity: 1;
      }
    }
    @-webkit-keyframes slide-in-left {
      0% {
        -webkit-transform: translateX(-1000px);
                transform: translateX(-1000px);
        opacity: 0;
      }
      100% {
        -webkit-transform: translateX(0);
                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.

  1. In your hero-single.html file, add the slide-in-top class to your <h1> heading and <h2> sub-heading within the hero-1 block container as shown below. Project Hero Blocks
  2. Add the slide-in-left class to your <h1> heading and <h2> sub-heading within the hero-2 block container as shown below. Project Hero Blocks

That’s it. You have now successfully updated the sample file of hero blocks.

Click hero-single.html to view a finished sample of this web page in a new tab of your web browser.

Uploading your files to GitHub

Upload the following web page and stylesheet to your account on GitHub:

hero-single.html
hero-single.css

Your web page will be published at web addresses similar to the following:

https://username.github.io/hero-single.html

It may take a few minutes for your uploaded files to appear on GitHub.



Return to Contents.