Contents  >

Travel Agency Project:
Footer

Introduction

In this task you will use template content to add a footer to the web pages of the ‘Travel Agency’ project you created earlier and to which you then added a contact form page.

You can display a finished version of the project web pages by clicking the image below.

Web Design Project: Travel Agency 2n2l.com Brendan Munnelly

You can view the alternative version with the centred footer here.

Learning Goals

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

Contents

Introduction

Working with your five HTML files

Adding the <head> link for the Font Awesome icons

Copying-and-pasting the footer HTML

Working with your two CSS files

Copying-and-pasting the footer CSS

Editing the footer hyperlinks

Editing the footer background colour

Editing the footer fonts

Uploading your project to GitHub

Working with your five HTML files

You will begin by working with four HTML files:

Start Visual Studio Code.

  1. From your websites\templates folder, open one of the following two HTML files. You can choose whichever footer version you like better.
    Sample image footer-template.html
    Sample image footer-template-2.html
  2. From your websites\portfolio\travel folder, open your web pages named index.html, destinations.html, about-us.html and contact-us.html. fa-icons-copy If you have any other files open in Visual Studio Code, you may wish to close them. fa-icons-copy This will help you to focus only on the five HTML files you will be working with.

Add the <head> link for the Font Awesome icons

Your footer will use Font Awesome 5 icons. Of the four web pages in this project, the contact-us.html web page already contains the link to the Font Awesome CSS file.

So you need to add this link to the <head> of the three other web pages in your ‘Travel Agency’ project.

  1. In your index.html, destinations.html and about-us.html web pages, copy-and-paste the following comment line and code, just before the closing </head> tag. 
    <!-- Link to icons for Font Awesome 5 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous">
  2. When finished, save your When finished, save your index.html, destinations.html and about-us.html web pages.

Your next step is to copy content from the footer template file into your four web pages.

  1. In the footer template file, select and copy the footer. fa-icons-copy
  2. In your index.html, destinations.html, about-us.html and contact-us.html web pages:
    • Scroll down to near the end of the web page, to just before the closing </body> tag.
    • Press the ENTER key a few times to open up some new lines of blank space.
    • Paste the copied footer content.
  3. When finished, save your index.html, destinations.html, about-us.html and contact-us.html web pages.

You can now close both the template footer HTML file and your four saved web pages.

Working with your two CSS files

Your next task is to work with two CSS files:

In Visual Studio Code:

  1. From your websites\templates folder, open one of the following two CSS files. Choose whichever one is for the footer template file you choose earlier.
    • footer-template.css
    -or-
    • footer-template-2.css
  2. From your websites\portfolio\travel\assets\css folder, open your stylesheet named style.css. fa-icons-copy If you have any other files open in Visual Studio Code, you may wish to close them. fa-icons-copy This will help you to focus only on the two CSS files you will be working with.

Your next step is to copy content from the footer template CSS file into your style.css file.

  1. In your footer template CSS file, select and copy the footer. fa-icons-copy
  2. Switch to your style.css file, and, at the bottom, paste the copied footer styles.
  3. When finished, save your style.css stylesheet.

You can now close both the template footer CSS file and your saved style.css stylesheet.

Editing the footer hyperlinks

Your next step is to edit the pasted content in your four web pages.

  1. In VS Code, open your index.html, destinations.html, about-us.html and contact-us.html web pages.
  2. In the case of each page, scroll down to the footer.
  3. As required, edit or remove the email address and social media hyperlinks in the footer that are copied from the template file.
  4. Edit the hyperlinks to the three other web pages on your personal website as shown below.
  6. When finished, save your index.html, destinations.html, about-us.html and contact-us.html web pages.

You are now finished working with these HTML files and you can close them in Visual Studio Code.

You need to change the background colour of your footer so that it matches the rest of your project web pages.

  1. In VS Code, open your style.css stylesheet.
  2. Scroll down to the .container-footer selector. This contains the value for the footer background-color. fa-icons-copy
  3. Change the value from the dark grey of #2c3e50 to the slightly lighter grey of #044d6c used for the text on the web pages.   If you have chosen the footer-template-2.html and footer-template-2.css template files, you may want to change the colour of the .container-footer h5 text from grey (#8d9093) to the lighter <body> background colour of #eff8f5.
  4. When finished, save your style.css stylesheet.

Whichever of the two footer options you have chosen, you will need to make a few updates to the font-related styles in the linked stylesheet.

If you have chosen the footer-template.html option, follow these steps:

  1. In the style.css file, add a new font-family style rule for the entire footer. fa-icons-copy
  2. Save your style.css stylesheet.

If you have chosen the footer-template-2.html option, follow these steps:

  1. In the style.css file, add a new font-family style rule for the entire footer. fa-icons-copy
  2. Save your style.css stylesheet.

You can display a finished version of the project web pages by clicking the image below.

Web Design Project: Travel Agency 2n2l.com Brendan Munnelly

You can view the alternative version with the centred footer here.

Uploading your project to GitHub

The final step is to upload your project to GitHub.

All the files you have updated for this project are in the travel sub-folder of your websites/portfolio folder.

So the easiest option is simply to upload the entire travel sub-folder to your account on GitHub.

  1. If you are not already signed in to your GitHub account, sign in now.
  2. On the left of your GitHub home page, click the name of the repository that holds your web pages.
  3. On the next GitHub screen displayed, click the portfolio folder. GitHub Upload
  4. GitHub should now display your portfolio folder. github-upload-portfolio
  5. With the portfolio folder displayed on your GitHub screen, click the Add file button and, from the dropdown list displayed, choose the option Upload files. Project Animation Google Fonts
  6. In File/Windows Explorer on your computer, display your portfolio folder and then drag-and-drop the travel folder to the GitHub tab in your web browser. github-upload-drag-drop
  7. After uploading the travel folder, scroll down to the bottom of the GitHub screen, enter a short message in the Commit changes box, click the Commit changes button, and wait for the upload to complete. github-upload-progress

Your updated ‘Travel Agency’ project is now published on GitHub at a web address similar to the following, where username is the username you have chosen for your GitHub account:

https://username.github.io/portfolio/travel/index.html

or, simply:

https://username.github.io/portfolio/travel

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



Return to Contents.