CS2033 Computer Science

Overall Requirements

 You must write your own code (No Kompozer or Dreamweaver, etc.)

 You cannot use Bootstrap for the basis of the site nor any downloadedtheme, template, or module

 The website must be a single, scrolling page format

 Include the following sections (i.e. use a <section> tag for each):

o Top

o About

o Slogan

o Products/Services *Depending on the topic assigned to you

o Account

o References

 Add comments in your code between sections/modules.

 Only use your own photos or copyright-free pictures from online. See theReferences section below for more details (same policy as Assignment 1).

 Keep track of the URLs of any images you take from these sites so that youcan easily reference them without having to re-find them later

Folder Structure

 Name the project’s root folder “exam”

 Home page must be named “index.html”

 Within root folder, add subfolders:

o “css” to contain CSS files

o “images” to contain all images

o “js” to contain JavaScript files

Meta Requirements

 Set the page title to be formatted as: CompanyName – SectionName (see

the “ScrollFire Page Title” explanation below)

 Add links to external CSS and JavaScript files within the head. Do not useany inline or internal CSS or JavaScript (except JavaScript event listeners).Top – Requirements

 The top section must contain an image:

o Find a picture that relates to your assigned topic

o Using Affinity Photo or Adobe Photoshop, apply a mask on one portion of the image so that it remains coloured, and convert the restof the image to black and white, as was done in Lab 3 Exercise 3.

o You will need to include this .afphoto or .psd file used to create thiseffect. Save it in your “images” subfolder.

 Apply “enhanced parallax” to this top picture using the technique explainedin lecture 10 and done in Lab 9 Exercise 1. Use m and b values that makethe parallax effect look seamless and clean.

 Add a COVID-19 statement at the very top of the site, placed above (in frontof) the banner picture:

o Create a short COVID-19 statement that explains how this company isimpacted by COVID (i.e. closing the store, working at reducedcapacity, switching production to create masks, etc.).

o This message must be displayed within a yellow div at the very top ofthe site, such that it overlaps the banner picture.

o On the right side of this yellow div, include an ‘x’ and use JavaScriptthat removes/hides this yellow COVID statement box when the ‘x’ isclicked.

 Near the bottom of the top picture, create a CSS title banner:

o This banner must have a width of 80% and be centered horizontally

o The banner must be above (in front of) the picture

o The name of your company must be clearly displayed in this banner

o When you scroll down past the position in which the banner’s topwould be above the browser window, you must use JavaScript andCSS to hold the banner at the top, fixed in that position.

 Note: for this website, no navigational links are required!

About – Requirements

 Write a summary of the company structure and what you do (5-6 sentences)

o If your assigned topic includes a city/country, then include a blurb inthis summary about your company’s geographical location and how itaffects the business (i.e. a canoe retailer in Newfoundland vsSaskatchewan will have much different successes based on location)

 Include two pictures that are relevant to the company

Slogan – Requirements

 Create a short, catchy slogan that relates to this company

 Use Affinity Photo or Adobe Photoshop to create a graphic with this slogan

 You must also include at least one shape along with the slogan text

 Create a clipping mask of the text and shape(s) with an appropriatebackground image, as was done in Lab 2 Exercise 2