Hero Blocks Portfolio Project | Web Design & Development Tutorials

Introduction

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

For further inspiration, check out randomportfolios.com and personalsit.es.

Project folders and files

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

Download the following zip file: project-hero.zip
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 Lunadoge.

Working with the index.html and custom.css files

To get started, use VS Code to open the index.html web page and custom.css stylesheet you downloaded for this project.

The index.html file contains links to the two stylesheets you need (lunadoge.min.css and custom.css) , to the various Google Fonts used, and to the Font Awesome icon set.

As a first step, at the top of the custom.css stylesheet, enter the following to insert some space between each of the hero blocks you will create.

 header { margin-bottom: 48px }

The #hero-1 block

Your finished hero block should look as shown below.

Follow these steps:

In the Lunadoge app, choose the Hero Block layout and, from the Header Type menu, select the Text Only option.
At the top-right of the screen, click the Copy HTML button.
In VS Code, display the index.html web page and paste in the copied HTML directly after the opening <body> tag.
Enclose the pasted hero block within a div tag with a unique id of hero-1 as shown below.
Update the hero block with text from the downloaded text.html file.
Open the Wavy Lines Generator web page.
Edit the shape of the wavy line as required, click the Top option, and copy the generated code.
In VS Code, in the index.html file, paste the generated code directly under the closing </header> tag.
Save your index.html and custom.css files.

The #hero-2 Block

Your finished hero block should look as shown below.

Follow these steps:

In the Lunadoge app, choose the Hero Block layout and, from the Header Type menu, select the Background Image (Full Width) option.
At the top-right of the screen, click the Copy HTML button.
In VS Code, display the index.html web page and paste in the copied HTML directly after the closing </div> tag of the previous hero block.
Enclose the new pasted hero block within a div tag with a unique id of hero-2.
Update the hero block with text from the downloaded text.html file.
Update the hero block with the bike-tours.jpg image.
Update the hero block with two new Font Awesome icons: <i class="fa-solid fa-location-dot"></i> <i class="fa-solid fa-person-biking"></i>
Return to the Lunadoge app. On the Buttons menu, for both the Primary and Secondary buttons, set the Background and Border colours to a medium Green.
On the Text menu, choose Animation and select Fade-in.
At the top-right of the screen, click the Copy CSS button. You are now finished with Lunadoge for this project.
In VS Code, in the custom.css stylesheet, paste the copied style rules. They should look as shown below.
Prefix all the style rules for this hero block with #hero-2, followed by one space. See below.

Add the following styles for the h1 heading:

#hero-2 header.hero-block h1 {
   font-family: 'Bebas Neue', sans-serif;
   text-transform: uppercase;
   letter-spacing: 4px;
font-size: calc(60px + (120 - 60) * ((100vw - 320px)/ (1600 - 320)));
}

Finished! Save your index.html and custom.css files.

The #hero-3 Block

Your finished hero block should look as shown below.

Follow these steps:

In the Lunadoge app, choose the Hero Block layout and, from the Header Type menu, select the Background Image (Full Width) option.
At the top-right of the screen, click the Copy HTML button.
In VS Code, display the index.html web page and paste in the copied HTML directly after the closing </div> tag of the previous hero block.
Enclose the new pasted hero block within a div tag with a unique id of hero-3.
Update the hero block with text from the downloaded text.html file.
Update the hero block with the music.jpg image.
Open the Duotones web page.
Click the Upload icon, upload the music.jpg image, and apply a duotone effect of your choice, and then click the download it to your portfolio/assets/img folder. The image will have a new file name of duotone.jpg. Update your index.html file accordingly.

In VS Code, in the custom.css stylesheet, paste in these style rules.

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

Finished! Save your index.html and custom.css files.

The #hero-4 Block

Your finished hero block should look as shown below.

Follow these steps:

In the Lunadoge app, choose the Hero Block layout and, from the Header Type menu, select the Full image left, text right option.
On the Colours menu, set both the Heading and Sub-heading to black. And set the Background to the first On Trend colour. On the Buttons menu, for the Secondary button, set both the Text and Border to Black. For both buttons, set the Button Style to Soft, and the Buttons Icon to At Right.
At the top-right of the screen, click the Copy HTML button.
In VS Code, display the index.html web page and paste in the copied HTML directly after the closing </div> tag of the previous hero block.
Enclose the new pasted hero block within a div tag with a unique id of hero-4.
Update the hero block with text from the downloaded text.html file.
Update the hero block with the fashion.jpg image.
Return to the Lunadoge app and click the Copy CSS button. You are now finished with Lunadoge for this project.
In VS Code, in the custom.css stylesheet, paste in the copied styles.
Prefix all the style rules for this hero block with #hero-4, followed by one space.

Add the following new styles.

#hero-4 header.hero-block h1 { 
font-family: 'Prata', serif;
   font-weight: 400;
   letter-spacing: -4px;
   line-height: 1.2
}

#hero-4 .hero-block.bg-img-left .hero-text-container h2 {
   font-size: calc(28px + (32 - 28) * ((100vw - 320px)/ (1600 - 320)));
   color: var(--gray-700);
}

In VS Code, in the index.html web page, update the <h1> tag as follows.

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

Replace both icons with the one below.
```
<i class="fas fa-chevron-right"></i>
```
Finished! Save your index.html and custom.css files.

The #hero-5 Block

Your finished hero block should look as shown below.

Follow these steps:

In the Lunadoge app, choose the Hero Block layout and, from the Header Type menu, select the Text left, full image right option.
On the Text menu, set the Upper Label to Yes.
On the Colours menu, set the Background to Black. Set the Heading to a medium Green. On the Buttons menu, for the Primary button, set both the Background and Border to a medium Green. Set the Text to Black. For both buttons, set the Button Style to Soft.
At the top-right of the screen, click the Copy HTML button.
In VS Code, display the index.html web page and paste in the copied HTML directly after the closing </div> tag of the previous hero block.
Enclose the new pasted hero block within a div tag with a unique id of hero-5.
Update the hero block with text from the downloaded text.html file.
Update the hero block with the ui-designer.jpg image.
Return to the Lunadoge app and click the Copy CSS button. You are now finished with Lunadoge for this project.
In VS Code, in the custom.css stylesheet, paste in the copied styles.
Prefix all the style rules for this hero block with #hero-5, followed by one space.

Add the following new styles.

#hero-5 header.hero-block .upper-label { 
   text-decoration: underline;
   text-decoration-thickness: 2px;
   text-underline-offset: 7px;
   text-decoration-color: #64f4ac;
   text-decoration-style: wavy;
}

#hero-5 .hero-block.bg-img-right .hero-text-container h1 { 
   font-family: 'Barlow Condensed', serif;
   font-weight: 400;
   line-height: 1.2;
   color: #64f4ac;
   letter-spacing: 4px;
   font-size: calc(60px + (84 - 60) * ((100vw - 320px) / (1600 - 320)));
}

#hero-5 .hero-block.bg-img-right .hero-text-container h2 {
   font-size: calc(22px + (32 - 22) * ((100vw - 320px)/ (1600 - 320)));
   font-family: 'Zilla Slab', sans-serif;
   line-height: 1.5;
   letter-spacing: 0;
}

In the index.html file, update the two icons as follows: <i class="far fa-folder-open"></i> <i class="far fa-envelope"></i>
Finished! Save your index.html and custom.css files.

Font: Barlow Condensed and Zilla Slab

The #hero-6 Block

Your finished hero block should look as shown below.

Follow these steps:

In the Lunadoge app, choose the Hero Block layout and, from the Header Type menu, select the Transparent image left, text right option.
On the Text menu, set the Upper Label to Yes.
On the Colours menu, set the Background to the second On Trend colour. Set the Heading and Sub-headingto Black. On the Buttons menu, for the Primary button, set both the Background and Border to a dark Pink. For the Secondary button, set both the Text and Border to a dark Pink. For both buttons, set the Button Style to Soft and Buttons Icon to At Right.
At the top-right of the screen, click the Copy HTML button.
In VS Code, display the index.html web page and paste in the copied HTML directly after the closing </div> tag of the previous hero block.
Enclose the new pasted hero block within a div tag with a unique id of hero-6.
Update the hero block with text from the downloaded text.html file.
Update the hero block with the hair.png image.
Return to the Lunadoge app. On the Buttons menu, for both the Primary and Secondary buttons, set the Background and Border colours to a medium red.
At the top-right of the screen, click the Copy CSS button. You are now finished with Lunadoge for this project.
In VS Code, in the custom.css stylesheet, paste in the copied styles.
Prefix all the style rules for this hero block with #hero-6, followed by one space.
Add the following new style rules.

#hero-6 header.hero-block .upper-label { word-spacing: normal } 
#hero-6 header.hero-block .upper-label span { 
   text-transform: none;
   letter-spacing: 0;
   background-color: var(--purple-400);
   color: #fff;
   display: inline-block;
   padding: 4px 18px 6px 18px;
   border-radius: 50px;
   font-weight: normal;
}

#hero-6 .hero-block.bg-img-left .hero-text-container h1 { 
   font-family: 'Playfair Display', serif;
   font-weight: 500;
   line-height: 1.2;
   color: var(--ontrend-900);
   letter-spacing: -6px;
   font-size: calc(60px + (98 - 60) * ((100vw - 320px) / (1600 - 320)));
}

#hero-6 .hero-block.bg-img-left .hero-text-container h2 {
   font-size: calc(22px + (32 - 22) * ((100vw - 320px)/ (1600 - 320)));
   font-family: 'Playfair Display', serif;
   line-height: 1.5;
   letter-spacing: -1px;
   color: var(--ontrend-800);
   font-weight: 500;
}

In the index.html web page, update the Upper Label as follows.

<div class="upper-label"><span><b>10%</b> off all week</span></div>

Also in the index.html file, replace both icons with the one below.
```
<i class="fas fa-chevron-right"></i>
```
Finished! Save your index.html and custom.css files.

The #hero-7 Block

Your finished hero block should look as shown below.

Follow these steps:

In the Lunadoge app, choose the Hero Block layout and, from the Header Type menu, select the Regular image left, text right option.
On the Colours menu, set the Background to a dark On Trend colour. Set the Sub-heading to a light Blue. On the Buttons menu, for the Primary button, set both the Background and Border to a medium Blue. For the Secondary button, set both the Text and Border to a light Blue. For both buttons, set the Button Style to Soft and Buttons Icon to At Right.
At the top-right of the screen, click the Copy HTML button.
In VS Code, display the index.html web page and paste in the copied HTML directly after the closing </div> tag of the previous hero block.
Enclose the new pasted hero block within a div tag with a unique id of hero-7.
Update the hero block with text from the downloaded text.html file.
Update the hero block with the javascript.png image.
Return to the Lunadoge app and click the Copy CSS button. You are now finished with Lunadoge for this project.
In VS Code, in the custom.css stylesheet, paste in the copied styles.
Prefix all the style rules for this hero block with #hero-7, followed by one space.

Add the following styles.

#hero-7 header.hero-block h1 { 
   color: var(--gray-100); 
   font-weight: 500; 
   font-family: 'Inter', sans-serif
}

#hero-7 .hero-block.hero-half .hero-text-container h2 { 
   color: var(--blue-100); line-height: 1.6;
   font-size: calc(20px + (26 - 20) * ((100vw - 320px) / (1600 - 320)));
}

In the index.html file, add the two new icons below.

<i class="fas fa-download"></i>
<i class="fas fa-arrow-right"></i>

Finished! Save your index.html and custom.css files.

The #hero-8 Block

Your finished hero block should look as shown below.

Follow these steps:

In the Lunadoge app, choose the Hero Block layout and, from the Header Type menu, select the Text left, regular image right option.
On the Colours menu, set the Background to a White. Set the Sub-heading to a light Blue. On the Buttons menu, set Buttons to One. For the Primary button, set both the Background and Border to a medium Green. Set the Button Style to Rounded and Buttons Icon to At Right.
In VS Code, display the index.html web page and paste in the copied HTML directly after the closing </div> tag of the previous hero block.
Enclose the new pasted hero block within a div tag with a unique id of hero-8.
Update the hero block with text from the downloaded text.html file.
Update the hero block with the analytics.png image.
Return to the Lunadoge app and click the Copy CSS button. You are now finished with Lunadoge for this project.
In VS Code, in the custom.css stylesheet, paste in the copied styles.
Prefix all the style rules for this hero block with #hero-8, followed by one space.

Add the following new styles.

#hero-8 h1, #hero8 h2 { font-family: 'Outfit', sans-serif }
#hero-8 header.hero-block { background-color: var(--white-000) }
#hero-8 .hero-block.hero-half .hero-text-container h1 { color: var(--black-000); letter-spacing: 0 }
#hero-8 header.hero-block h1 span { color: #5ba745 }
#hero-8 header.hero-block h2 { color: var(--black-000) }

In the index.html file, update the <h1> tag as follows.

<h1>Putting the tricks into <span>web analytics</span></h1>

Save your index.html and custom.css files.

Font: Outfit

Uploading your files to GitHub

After finishing your web page and stylesheet, you are now ready to upload them 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 new 📁 project-hero folder to upload it to the 📁 portfolio folder on your GitHub repository.
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.

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.

Your Hero Gallery Portfolio Project

A gallery of web page hero blocks

Introduction

Project folders and files

Working with the index.html and custom.css files

The #hero-1 block

The #hero-2 Block

The #hero-3 Block

The #hero-4 Block

The #hero-5 Block

The #hero-6 Block

The #hero-7 Block

The #hero-8 Block

Uploading your files to GitHub