Smoothies Project:
Footer

Introduction

In this task you will use template content to add a footer to the single-web page ‘Smoothies’ project you created earlier and to which you then added an email sign-up form.

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

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

Learning Goals

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

• Copy selected HTML with text content from a template file to a sample web page.
• Copy selected CSS from a template file to a sample stylesheet.
• Edit the copied HTML and CSS as required.

Working with your two HTML files

You will begin by working with two HTML files:

• The template file you will copy from and
• The web page you will copy to.

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.
   footer-template.html

   footer-template-2.html
2. From your websites\portfolio\smoothies folder, open your web page named index.html. If you have any other files open in Visual Studio, you may wish to close them. This will help you to focus only on the two HTML files you will be working with.

Copying-and-pasting the footer HTML

Your next step is to copy content from the HTML template file into your index.html web page.

1. In the footer template file, select and copy the footer.
2. In your index.html web page, scroll down to near the end of the web page, to just before the closing </body> tag.
3. Press the ENTER key a few times to open up some new lines of blank space, and paste the copied footer content.
4. When finished, save your index.html web page.

You can now close both the footer template file and your saved index.html web page.

NOTE: You could create the footer block of the web page with a pair of opening and closing <div> ... </div> tags. However, the more modern HTML5 way is to use the <footer> ... </footer> tags.

Working with your two CSS files

Your next task is to work with two CSS files:

• The template CSS file you will copy from and
• The stylesheet you will copy to.

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\smoothies\assets\css folder, open your stylesheet named style.css. If you have any other files open in Visual Studio, you may wish to close them. This will help you to focus only on the two CSS files you will be working with.

Copying-and-pasting the footer CSS

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

1. In your footer template CSS file, select and copy the footer.
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 index.html file.

1. In VS Code, open your index.html web page and scroll down to the footer.
2. As required, edit or remove the email address and social media hyperlinks in the footer that are copied from the template file.
3. Edit the hyperlinks to the three other web pages on your personal website as shown below.
   • Edit the link to your website Home page as follows:

       <a href="../../index.html">Home</a>
     

   • Edit the link to your website Portfolio page as follows:

       <a href="../index.html">Portfolio</a>
     

   • Edit the link to your website Privacy page as follows:

       <a href="../../privacy.html">Privacy</a>
     

     If you have choosen the footer-template-2.html, edit the privacy link as follows:

       <a class="privacy-legal" href="../../privacy.html">Privacy & Legal</a>
     

   • And if your footer has a link to your website Contact Form page, edit it as follows:

       <a href="../../contact/index.html">Contact</a>
     

4. Save your index.html web page.

You are now finished working with this HTML file and can close it in Visual Studio Code.

Editing the footer background colour

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

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.
3. Change the value from the dark grey of #2c3e50 to the deep pink of #d1274b.

Editing the footer fonts

If you have chosen the footer-template.html and footer-template.css template files for your footer, you will need to make some updates to the font styles.

1. The ‘Neucha’ font is difficult to read at a small font-size. Update the size of the font and add a letter-spacing style rule as follows for both the <h4> sub-heading and the <p> paragraph text.
2. Increase the spacing at the right of Font awesome icons as follows.
3. When finished, save your style.css stylesheet.

If you have chosen the footer-template-2.html and footer-template-2.css template files for your footer, you will need to make some updates to the font styles.

1. Change the colour of the .container-footer h5 text from grey (#8d9093) to white (#fff).
2. Change the font-family of the row of three hyperlinks from the web page default of Neucha to an easier-to-read value of sans-serif.
3. When finished, save your index.html and style.css files.

You have now completed this Tutorial.

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

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

In later a Tutorial for this portfolio project you will add desktop/laptop and mobile menus.

Uploading your project to GitHub

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

So the easiest option is simply to upload the entire smoothies 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.
4. GitHub should now display your portfolio folder.
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.
6. In File/Windows Explorer on your computer, display your portfolio folder and then drag-and-drop the smoothies folder to the GitHub tab in your web browser.
7. After uploading the smoothies 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.

Your updated ‘Smoothies’ project web page 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/smoothies/index.html

or, simply:

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

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

Return to Contents.