Your Hero Gallery Portfolio Project

A gallery of web page hero blocks

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.

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

All the text you need for this web page 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.

Using Hero Block option with the Lunadoge app, create the followiung eight hero blocks.

#hero-1

Link: Wavy Lines

Hero image

#hero-2

Font: Bebas Neue

Hero image

#hero-3

Link: Duo Tones

Font: Abril Fatface

Hero image

#hero-4

Font: Prata

Hero image

#hero-5

Font: Barlow Condensed and Zilla Slab

Hero image

#hero-6

Font: Playfair Display

Hero image

#hero-7

Font: Inter

Hero image

#hero-8

Font: Outfit

Hero image

Uploading your files to GitHub

After finishing your web page and stylesheet, 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, near the right of the screen, you can see a button named Add file. Click on it.
  4. From the dropdown list displayed, choose the option Upload files.
  5. 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.
  6. 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.
  7. 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.