Single-column Hero Blocks

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:

• hero-single.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... (Chrome) or Save Page As... (Firefox) from the context menu displayed.   Save the web page in your websites folder with the name hero-single.html
• You can close the browser tab containing the hero-single.html web page.
• hero-single.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... (Chrome) or Save Page As... (Firefox).   Save the hero-single.css stylesheet file to your websites folder.
• You can close the browser tab containing the hero-single.css 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.

• In VS Code, open the hero-single.html web page and hero-single.css stylesheet.
• In your browser, display the hero-single.html web page. You can see that it contains an h1 main heading, an h2 sub-heading, and two hyperlinks styled as buttons.
• In VS Code, you can see that the first sample hero block is inside a container with a class name of hero-1.   Inside this container, the two buttons are each located inside an item-col-2 child column of their container named container-btn. In the hero-single.css stylesheet, the buttons are styled so that, on desktop screens, they are displayed side-by-side. On mobile screens, they are stacked vertically, one above the other.

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.
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.
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:

• slide-in-top
• slide-in-left

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.
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.
4. At the right of the screen, click the {*} icon to display the CSS code that Animista has created for you.
5. With the Autoprefixer option selected, click the Copy Class button.
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.
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.
5. At the right of the screen, click the {*} icon to display the CSS code that Animista has created for you.
6. With the Autoprefixer option selected, click the Copy Class button.
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.
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.
2. Add the slide-in-left class to your <h1> heading and <h2> sub-heading within the hero-2 block container as shown below.

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.