Your Hero Gallery Portfolio Project

Introduction

In this portfolio project you will use the Lunevedy app and custom CSS styles to design and create eight web page hero blocks.

For further inspiration, check out personalsit.es.

Project folders and files

Your first task is to download the zip file you need for this project.

1. Download the following zip file:   project-hero.zip
2. Unzip this file into your portfolio folder, where it will create a new folder named project-hero.

All the text you need for this portfolio project is in the file below. Only <p> tags have been used for basic formatting.

text.html

You do not need to download this file. You can simply copy-and-paste from it.

In creating the gallery of eight hero blocks, you will use the Hero Block layout options within the Lunevedy app.

Working with the index.html and custom.css files

In VS Code, open the index.html web page and custom.css stylesheet you downloaded for this project.

The #hero-1 block

Your finished hero block should look as shown below.

Working with the index.html file

Follow these steps:

1. On the home page of Lunevedy, choose the Hero block 1 layout.
2. On the Layout menu, choose the following options.
3. On the Text menu, choose the following option.
4. On the Illustration menu, choose the following option.
5. Click the HTML button near the bottom-right of the screen.
6. Switch to VS Code, display the index.html web page, and paste the copied HTML. See below.
7. Update the <h1> main heading with the relevant words from the text.html file.

When finished, save your index.html file.

Adding the wavy line effect

Follow these steps:

1. Open the Wavy Lines Generator web page.
2. Click the Top option, and edit the shape of the wavy line as required.
3. Lower down the screen, in the HTML OUTPUT box, select the generated code and copy it.
4. In VS Code, in the index.html file, paste the generated code directly under the closing </header> tag.
   
5. Edit this code as follows.

When finished, save your index.html file.

Working with the custom.css file

Follow the steps below:

1. Return to the Lunevedy app, and click the CSS button at the bottom-right of the screen.
2. In VS Code, in the custom.css file, paste in copied style rule for background-color.

When finished, save your custom.css file.

✅   All done. Your first hero block is now complete.

Creating the hero block wrappers

In your index.html file, after the end of the first hero block, enter the following <div> tag pairs and their unique id values:

<div id="hero-2">
   </div>

   <div id="hero-3">
   </div>

   <div id="hero-4">
   </div>

   <div id="hero-5">
   </div>

   <div id="hero-6">
   </div>

   <div id="hero-7">
   </div>

   <div id="hero-8">
   </div>

The body of your index.html file should now look as shown below.

Enclose your first hero block within an opening and closing pair of <div> tags with an id of hero-1. See below.

Save your index.html file and display your custom.css stylesheet.

Enter the following CSS style rule that will add some vertical spacing between the <div> wrappers.

#hero-3, #hero-4, #hero-5, #hero-6, #hero-7, #hero-8 { margin-top: 80px }

Next, edit the style rule for the first hero block as follows.

Save your custom.css file.

Display the index.html web page in your browser and check it still displays correctly.

The #hero-2 block

Your finished hero block should look as shown below.

Working with the index.html file

Follow these steps:

1. On the home page of Lunevedy, choose the Hero block 3 layout.
2. On the Layout menu, choose the following options.
3. On the Illustrations menu, choose the following option.
4. On the Buttons menu, in the BUTTON 1 tab, choose the following options.
5. On the Buttons menu, in the BUTTON 2 tab, choose the following options.
6. Click the HTML button near the bottom-right of the screen.
7. Switch to VS Code, display the index.html web page, and paste the copied HTML inside the <div> tag pair with an id of hero-2.
8. Update the pasted content with the relevant words from the text.html file and the downloaded bike-tours.jpg image.

When finished, save your index.html file.

Working with the custom.css file

Follow these steps:

1. Return to the Lunevedy app, and click the CSS button at the bottom-right of the screen.
2. In VS Code, in the custom.css file, paste in copied style rules. Prefix each rule with #hero-2 as shown below.

When finished, save your custom.css file.

Adding the Font Awesome icons

Your next task is to add two new icons to your #hero-2 block. Follow these steps:

1. In a new browser tab, go to the Font Awesome website and click the Icons option at the top of the screen.
2. In the Search box, enter the word 'map' (without the quotes) and click the location-dot icon.
3. In the dialog box now displayed, select the icon’s HTML code.
4. In VS Code, in your index.html file, update the current icon with the new one you have copied from Font Awesome.
5. Repeat the above steps for the 'person biking' icon. In your index.html file your two buttons should now look as shown below.

When finished, save your index.html file.

Adding a Google Font

Your final task is to add a Google font to the main heading in your #hero-2 block. Here are the steps:

1. In a new browser tab, choose the Bebas Neue font in Google Fonts.
2. At the right of the screen, click Remove all to remove any previously selected fonts.
3. Scroll down the screen and click the Select Regular 400 option. (This is the only version available for this font family.)
4. From the two boxes of code at the lower-right of the screen, copy the first.
5. Switch to the index.html file in VS Code, and paste the font code in the <head> of the web page.
6. Display the custom.css file and add the new style rule below.

   #hero-2 header.theme-dark h1 {
         font-family: 'Bebas Neue', sans-serif;
         font-weight: 400;
         letter-spacing: 4px;
         font-size: calc(72px + (132 - 72) * ((100vw - 320px)/ (1600 - 320)));
      }

Save your index.html and custom.css files.

✅   All done. Your #hero-2 block is now complete.

The #hero-3 block

Your finished hero block should look similar to that shown below.

Working with the index.html file

Follow these steps:

1. On the home page of Lunevedy, choose the Hero block 3 layout.
2. On the Layout menu, choose the following options.
3. Click the HTML button near the bottom-right of the screen.   (Note that the CSS button is not enabled because you have not updated any default colours.)
4. Switch to VS Code, display the index.html web page, and paste the copied HTML inside the <div> tag pair with an id of hero-3.
5. Update the pasted content with the relevant words from the text.html file and the downloaded music.jpg image.

When finished, save your index.html file.

Adding a duotone effect to the hero image

The duotone effect is the use of two (a duo) contrasting colors to create a dramatic and visually pleasing effect in graphic design. See the examples below.

In the steps below you will apply a duotone effect to the hero background image.

1. In a new browser tab, open the Duotones web page.
2. Click the Camera icon to upload your music.jpg image.
3. Click the Color Swatch icon to apply a duotone effect of your choice.   Choose one of the darker options, as your white text must be readable against this image background.
4. Click the image to download it and copy it to your portfolio/project-hero/assets/img folder.   The image will have a new file name of duotone.jpg. Update your index.html file accordingly and save the file.

Adding a Google Font

Your final task is to add a Google font to the main heading in your #hero-3 block. Here are the steps:

1. In a new browser tab, choose the Abril Fatface font in Google Fonts.
2. At the right of the screen, click Remove all to remove any previously selected fonts.
3. Scroll down the screen and click the Select Regular 400 option. (This is the only version available for this font family.)
4. From the two boxes of code at the lower-right of the screen, copy the first.
5. Switch to the index.html file in VS Code, and paste the font code in the <head> of the web page.   Of the three pasted lines, the first two are unnecessary. You can delete them.
6. Display the custom.css file and add the new style rule below.

   #hero-3 header.theme-dark h1 {
          font-family: 'Abril Fatface', serif;
          font-size: calc(48px + (100 - 48) * ((100vw - 320px)/ (1600 - 320)));
      }

Save your index.html and custom.css files.

✅   All done. Your #hero-3 block is now complete.

The #hero-4 block

Your finished hero block should look as shown below.

Working with the index.html file

Follow these steps:

1. On the home page of Lunevedy, choose the Hero block 2 layout.
2. On the Layout menu, choose the following options
3. On the Buttons menu, in the BUTTON 1 tab, choose the following options.
4. On the Buttons menu, in the BUTTON 2 tab, choose the following options.
5. Click the HTML button near the bottom-right of the screen.
6. Switch to VS Code, display the index.html web page, and paste the copied HTML inside the <div> tag pair with an id of hero-4.
7. Update the pasted content with the relevant words from the text.html file and the downloaded fashion.jpg image. See below. Note that the 'fade-in' effect is applied only to the second line of the <h1> main heading.

   <h1>Look great.<br><span class="reveal-fade-in-header">Feel fantastic.</span></h1>  

When finished, save your index.html file.

Working with the custom.css file

Follow these steps:

1. Return to the Lunevedy app and click the CSS button at the bottom-right of the screen.
2. In VS Code, in the custom.css stylesheet, paste in the copied styles.
3. Prefix all the style rules for this hero block with #hero-4, followed by one space. See below.

When finished, save your custom.css file.

Adding the Font Awesome icon

Your next task is to add a icon to your #hero-4 block. Follow these steps:

1. In a new browser tab, go to the Font Awesome website and click the Icons option at the top of the screen.
2. In the Search box, enter the word 'chevron' (without the quotes) and click the chevron-right icon.
3. In the dialog box now displayed, select the icon’s HTML code.
4. In VS Code, in your index.html file, replace both button icons with the one you have copied from Font Awesome.

When finished, save your index.html file.

Adding a Google Font

Your final task is to add a Google font to the main heading in your #hero-4 block. Here are the steps:

1. In a new browser tab, choose the Prata font in Google Fonts.
2. At the right of the screen, click Remove all to remove any previously selected fonts.
3. Scroll down the screen and click the Select Regular 400 option. (This is the only version available for this font family.)
4. From the two boxes of code at the lower-right of the screen, copy the first.
5. Switch to the index.html file in VS Code, and paste the font code in the <head> of the web page.   Of the three pasted lines, the first two are unnecessary. You can delete them.   Your list of fonts used so far in this project should now look as shown below.
6. Display the custom.css file and add the new style rule below.

   #hero-4 header.theme-light h1 {
         font-family: 'Prata', serif;
         font-weight: 400;
         line-height: 1.2
      }

Save your index.html and custom.css files.

✅   All done. Your #hero-4 block is now complete.

The #hero-5 block

Your finished hero block should look as shown below.

Working with the index.html file

Follow these steps:

1. On the home page of Lunevedy, choose the Hero block 2 layout.
2. On the Layout menu, choose the following options.
3. On the Text menu, choose the following options.
4. On the Buttons menu, in the BUTTON 1 tab, choose the following options.
5. On the Buttons menu, in the BUTTON 2 tab, choose the following options.
6. Click the HTML button near the bottom-right of the screen.
7. Switch to VS Code, display the index.html web page, and paste the copied HTML inside the <div> tag pair with an id of hero-5.
8. Update the pasted content with the relevant words from the text.html file and the downloaded ui-designer.jpg image. See below.

When finished, save your index.html file.

Working with the custom.css file

Follow these steps:

1. Return to the Lunevedy app and click the CSS button at the bottom-right of the screen.
2. In VS Code, in the custom.css stylesheet, paste in the copied styles.
3. Prefix all the style rules for this hero block with #hero-5, followed by one space. See below.

When finished, save your custom.css file.

Adding the Font Awesome icons

Your next task is to add two new icons to your #hero-2 block. Follow these steps:

1. In a new browser tab, go to the Font Awesome website and click the Icons option at the top of the screen.
2. In the Search box, enter the word 'folder open' (without the quotes) and click the folder-open icon.
3. In the dialog box now displayed, select the icon’s HTML code.
4. In VS Code, in your index.html file, update the current icon with the new one you have copied from Font Awesome.
5. Repeat the above steps for the 'envelope' icon. In your index.html file your two buttons should now look as shown below.

When finished, save your index.html file.

Adding the two Google Fonts

Your final task is to add two Google font to your #hero-5 block. Here are the steps:

1. In a new browser tab, choose the Barlow Condensed font in Google Fonts.
2. At the right of the screen, click Remove all to remove any previously selected fonts.
3. Scroll down the screen and click the Select SemiBold 600 option.
4. At the top of the screen click the Fonts option, search for the font named Zilla Slab, and select it..
5. Scroll down the screen and click the Select Regular 400 option.
6. From the two boxes of code at the lower-right of the screen, copy the first.
7. Switch to the index.html file in VS Code, and paste the font code in the <head> of the web page.   Of the three pasted lines, the first two are unnecessary. You can delete them.
8. Display the custom.css file and add the new styles rule below.

   #hero-5 header .badge {
         text-decoration: underline;
         text-decoration-thickness: 2px;
         text-underline-offset: 7px;
         text-decoration-color: var(--green-400);
         text-decoration-style: wavy;
      }
   
      #hero-5 header.theme-dark h1 {
         font-family: 'Barlow Condensed', sans-serif;
         font-weight: 600;
         letter-spacing: 4px;
         font-size: calc(48px + (100 - 48) * ((100vw - 320px)/ (1600 - 320)));
      }
   
      #hero-5 header.theme-dark h2 {
         font-family: 'Zilla Slab', serif;
         font-weight: 400;
      }

Save your index.html and custom.css files.

✅   All done. Your #hero-5 block is now complete.

The #hero-6 block

Your finished hero block should look as shown below.

Working with the index.html file

Follow these steps:

1. On the home page of Lunevedy, choose the Hero block 2 layout.
2. On the Layout menu, choose the following options.
3. On the Text menu, choose the following options.
4. On the Buttons menu, in the BUTTON 1 tab, choose the following options.
5. On the Buttons menu, in the BUTTON 2 tab, choose the following options.
6. Click the HTML button near the bottom-right of the screen.
7. Switch to VS Code, display the index.html web page, and paste the copied HTML inside the <div> tag pair with an id of hero-6.
8. Update the pasted content with the relevant words from the text.html file and the downloaded hair.png image.
9. In the two buttons, replace the icons with the same chevron-right icon you used in #hero-4. See below.

When finished, save your index.html file.

Working with the custom.css file

Follow these steps:

1. Return to the Lunevedy app and click the CSS button at the bottom-right of the screen.
2. In VS Code, in the custom.css stylesheet, paste in the copied styles.
3. Prefix all the style rules for this hero block with #hero-6, followed by one space.

When finished, save your custom.css file.

Adding a Google Font

Your final task is to add a Google font to the main heading in your #hero-6 block. Here are the steps:

1. In a new browser tab, choose the Playfair Display font in Google Fonts.
2. At the right of the screen, click Remove all to remove any previously selected fonts.
3. Scroll down the screen and click the Select Regular 400 option.
4. From the two boxes of code at the lower-right of the screen, copy the first.
5. Switch to the index.html file in VS Code, and paste the font code in the <head> of the web page.
6. Open the custom.css file and add the new style rule below.
7. Add the following new style rules.

   #hero-6 header.theme-light h1 {
          font-family: 'Playfair Display', serif;
          letter-spacing: -4px;
          font-weight: 400;
          font-size: calc(60px + (98 - 60) * ((100vw - 320px) / (1600 - 320)));
      }

Save your index.html and custom.css files.

✅   All done. Your #hero-6 block is now complete.

The #hero-7 block

Your finished hero block should look as shown below.

Working with the index.html file

Follow these steps:

1. On the home page of Lunevedy, choose the Hero block 2 layout.
2. On the Layout menu, choose the following options.
3. On the Buttons menu, in the BUTTON 1 tab, choose the following options.
4. On the Buttons menu, in the BUTTON 2 tab, choose the following options.
5. Click the HTML button near the bottom-right of the screen.
6. Switch to VS Code, display the index.html web page, and paste the copied HTML inside the <div> tag pair with an id of hero-7.
7. Update the hero block with the relevant words from the text.html file and the downloaded javascript.png image. See below.

When finished, save your index.html file.

Working with the custom.css file

Follow these steps:

1. Return to the Lunevedy app and click the CSS button at the bottom-right of the screen.
2. In VS Code, in the custom.css stylesheet, paste in the copied styles.
3. Prefix all the style rules for this hero block with #hero-7, followed by one space. See below.

When finished, save your custom.css file.

Adding the Font Awesome icons

Your next task is to add a icon to the first of the two buttons in your #hero-7 block. Follow these steps:

1. In a new browser tab, go to the Font Awesome website and click the Icons option at the top of the screen.
2. In the Search box, enter the word 'download' (without the quotes) and click the download icon.
3. In the dialog box now displayed, select the icon’s HTML code.
4. In VS Code, in your index.html file, update the icon in the first button with the new one you have copied from Font Awesome.

When finished, save your index.html file.

Adding a Google Font

Your final task is to add a Google font to the <h1> main heading and <h2> sub-heading in your #hero-7 block. Here are the steps:

1. In a new browser tab, choose the Inter font in Google Fonts.
2. At the right of the screen, click Remove all to remove any previously selected fonts.
3. Scroll down the screen and click the Select Light 300 and Select Regular 400 options.
4. From the two boxes of code at the lower-right of the screen, copy the first.
5. Switch to the index.html file in VS Code, and paste the font code in the <head> of the web page.   Of the three pasted lines, the first two are unnecessary. You can delete them.
6. Open the custom.css file and add the new style rules below.

   #hero-7 header.theme-light h1 {
          font-family: 'Inter', sans-serif;
          font-weight: 300;
      }
   
      #hero-7 header.theme-light h2 {
          font-family: 'Inter', sans-serif;
          font-weight: 400;
          line-height: 1.4;
      }

Save your index.html and custom.css files.

✅   All done. Your #hero-7 block is now complete.

The #hero-8 block

Your finished hero block should look as shown below.

Working with the index.html file

Follow these steps:

1. On the home page of Lunevedy, choose the Hero block 2 layout.
2. On the Text menu, choose the following options.
3. On the Buttons menu, choose the following options.
4. Click the HTML button near the bottom-right of the screen.
5. Switch to VS Code, display the index.html web page, and paste the copied HTML inside the <div> tag pair with an id of hero-8.
6. Update the hero block with the relevant words from the text.html file and the downloaded analytics.png image. See below.

When finished, save your index.html file.

Working with the custom.css file

Follow these steps:

1. Return to the Lunevedy app and click the CSS button at the bottom-right of the screen.
2. In VS Code, in the custom.css stylesheet, paste in the copied styles.
3. Prefix all the style rules for this hero block with #hero-8, followed by one space. See below.

When finished, save your custom.css file.

Adding a Google Font

Your final task is to add a Google font to the <h1> main heading and <h2> sub-heading in your #hero-8 block. Here are the steps:

1. In a new browser tab, choose the Lato font in Google Fonts.
2. At the right of the screen, click Remove all to remove any previously selected fonts.
3. Scroll down the screen and click the Select Regular 400 and Select Black 900 options.
4. From the two boxes of code at the lower-right of the screen, copy the first.
5. Switch to the index.html file in VS Code, and paste the font code in the <head> of the web page.   Of the three pasted lines, the first two are unnecessary. You can delete them.
6. Open the custom.css file and add the new style rules below.

   #hero-8 header.theme-light h1 {
          font-family: 'Lato', sans-serif;
          font-weight: 900;
      }
   
      #hero-8 header.theme-light h2 {
          font-family: 'Lato', sans-serif;
          font-weight: 400;
          line-height: 1.4;
      }

Save your index.html and custom.css files.

✅   All done. Your #hero-8 block is now complete.

Uploading your project folder to GitHub

After finishing your project, you are now ready to upload them to your account on GitHub.

1. 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.
2. 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
3. On the next GitHub screen displayed, click the portfolio folder.
4. With your portfolio folder displayed on GitHub, click Add file button.
5. From the dropdown list displayed, choose the option Upload files.
6. In File Explorer (Windows 10) or Finder (Apple Mac), drag-and-drop your 📁 project-hero folder to upload it to the portfolio folder within your repository on GitHub.
7. 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.
8. Finally, click the green Commit changes button to upload your files.

Your portfolio project web page is now published on GitHub at a web address similar to the following:

https://username.github.io/portfolio/project-hero/index.html

or simply:

https://username.github.io/portfolio/project-hero

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