Contents >

If you have not already downloaded the HTML, CSS and image template files for use with this and your other projects, you can find the instructions at the link below.

Templates Download

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.

In Visual Studio Code, from your websites\templates folder, open the following HTML file: email-signup-form-template.html
From your websites\portfolio\software folder, open the 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.

Adding the <head> link for the Font Awesome icons

Your Sign-up Form will use a Font Awesome 5 icon. So too will a new button-styled hyperlink in the ‘hero’ section of your web page that will link to the Email Sign-up Form.

You need to include a link to the Font Awesome stylesheet CSS file.

In the <head> of the index.html web page, just before the closing </head> tag, copy-and-paste the following comment line and code.

<!-- 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">

The pasted comment and Font Awesome link should now look as follows. fa-icons-copy

When finished, save your index.html web page.

Copying-and-pasting the form HTML

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

In the email-signup-form-template.html file, select and copy the form HTML.
In your index.html web page, scroll down to near the end of the web page, and click on the last empty line 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 form HTML.
When finished, save your index.html web page.

You can now close the email-signup-form-template.html file.

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, from your websites\templates folder, open the following CSS file: email-sign-up-form-template.css
From your websites\portfolio\software\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 form CSS

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

In the email-sign-up-form-template.css file, select and copy the form styles.
In your style.css file, scroll down to the end of the stylesheet and click on the last empty line.
Press the ENTER key a few times to open up some new lines of blank space.
Paste the copied form CSS.
When finished, save your style.css stylesheet.

You can now close the email-sign-up-form-template.css file.

In your web browser, the Email Sign-up Form should now look as shown below.

Updating your web page HTML

In your next two steps you will update the content and HTML of your index.html web page.

Adding a button to the hero block

You will begin by adding a button-styled hyperlink to the ‘hero’ block at the top of the web page that, when clicked/tapped, will take to the user to the Email Sign-up Form at the bottom of the same page. Here are the steps.

In VS Code, open your index.html file.
To the hero block at the top of the page, under the <p> paragraph, add a CTA (Call-to-Action) button that will link to the form.
```
<a class="btn-cta" href="#free-trial">Try it free</a>
```
The ‘hero’ block of your web page should now look as shown below.
Scroll down to the Email Sign-up Form and add the id link anchor of free-trial to its container as shown below.
Save the index.html web page.

Editing the form content and Formspree endpoint

You will now edit the content of the Email Sign-up Form

In the form at the bottom of the index.html web page, edit the <h3> sub-heading and <p> text as follows.

<h3>Start your free trial</h3>
<p>Enjoy unlimited access for 14 days. No credit card required.</p>

Edit the text of the submit button from “Sign Up” to “Try it free” and change the Font Awesome icon.

<button id="btn-submit" type="submit" class="btn-submit">Try it free <i class="fas fa-arrow-right"></i></button>

Update the form’s action value by copying-and-pasting the endpoint value from Formspree. See the example shown below.
You can now save the index.html web page. You have finished updating it.

In your web browser, the Email Sign-up Form should now look as shown below.

Updating your web page CSS

Now you will update the stylesheet for your web page.

At the bottom of your style.css file, copy-and-paste the following CSS selectors and style rules for the Call-To-Action button in the ‘hero’ block of your web page.

/* == CTA button == */
.container-flexbox a.btn-cta {
   display: inline-block;
   text-decoration: none;
   padding: 12px 42px;
   border-style: solid;
   border-width: 4px;
   margin: 32px 0;
   border-radius: 50px;
   font-size: 18px;
   font-weight: bold;
   text-transform: uppercase;
   letter-spacing: 1px;
}

.container-flexbox a.btn-cta:link,
.container-flexbox a.btn-cta:visited {
   color: #5ba745;
   background-color: #fff;
   border-color: #5ba745
}

.container-flexbox a.btn-cta:hover,
.container-flexbox a.btn-cta:active {
   color: #fff;
   background-color: #5ba745;
   border-color: #5ba745
}

For the <h1> heading in the ‘hero’ block, reduce the maximum font-size from 72 to 60 as shown below.
For the form, change its background colour as follows. Also, remove the border styles.
Change the <h3> sub-heading and <p> paragraph text colours to white as shown below. Also, change the colour of the 'Email' label to white and add a new font-size.

Update the styles for the form submit button as follows.

#email-signup-form #btn-submit {
   color: #fff;
   border: solid 2px #fff;
   padding: 12px 22px;
   background-color: #fff;
   letter-spacing: 1px;
   border-radius: 50px;
   color: #5ba745;
}
#email-signup-form #btn-submit:focus,
#email-signup-form #btn-submit:hover {
   color: #fff;
   background-color: #5ba745;
   border: solid 2px #fff
}

Save your style.css file.

View your web page in a browser on desktop/laptop and mobile size screens. The Call-to-Action button should look as below.

And the Email Sign Up form should look as below.

Adding a smooth-scrolling effect

When you click/tap the “TRY IT FREE” button in the hero block, you can see that the page immediately ‘jumps’ to the Email Sign-up Form at the bottom of the web page.

You can add a so-called smooth scrolling effect to your Call-To-Action button as follows.

In your style.css stylesheet, add the following new property and value at the end of the web browser resets. (Note the US-style spelling).
```
html { scroll-behavior: smooth }
```
The complete web browser resets should now look as shown below.
Save the style.css file.

View the result in your web browser for both desktop and mobile screen sizes by clicking/tapping the Call-To-Action button.

Note that this smooth-scrolling effect is not supported by the Apple Safari web browser. It should work in the Google Chrome, Mozilla Firefox, Microsoft Edge and Opera web browsers.

You have now completed this Tutorial.

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

In later Tutorials for this portfolio project you will add a footer and menus.

Upload 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 software sub-folder of your websites/portfolio folder.

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

If you are not already signed in to your GitHub account, sign in now.
On the left of your GitHub home page, click the name of the repository that holds your web pages.
On the next GitHub screen displayed, click the portfolio folder.
GitHub should now display your portfolio folder.
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.
In File/Windows Explorer on your computer, display your portfolio folder and then drag-and-drop the software folder to the GitHub tab in your web browser.
After uploading the software 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 ‘Software Analytics’ 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/software/index.html

or, simply:

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

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

Return to Contents.

Contents >

Software Agency Project: Email Sign Up Form

Introduction

Learning Goals

Contents

Downloading the Templates Folder and Files