Requirements

Create a folder to serve as the root folder for the website and name the folder your student number eg$.12345678.$

Create a folder inside the root folder for the website and name the folder images, add all your photos and images related to the privately owned small business to the folder.

Create a folder inside the root folder for the website and name the folder media, add all your videos related to the privately owned small business to the folder.

Create an index.html page that will serve as your site home page, the home page should include the following:

The privately owned small business name must be in the header section.

Add an image below the heading element to display the privately owned small business logo$.$

Navigation bar linking to all pages $($Home$,$ Products, Registration, Contact Us$),$ code the navigation links as an unordered list.

Add a hero image.

The main tag should contain a minimum of three paragraphs, a minimum of $200$ words per chapter, with content related to the privately owned small business.

The privately owned small business contact details in the footer element must have telephone and email links with special characters showing a small phone and envelope and the copyright symbol.

Add a style attribute to text on the page you wish to highlight, e$.$g$.$ special promotion or discount.

Modify the home page to add essential content for a mobile user.

Save the index.html page in the root folder.

Create a products.html page, Save the products.html page in the root folder.

The privately owned small business name must be in the header section.

Add an image below the heading element to display the privately owned small business logo$.$

Navigation bar linking to all pages $($Home$,$ Products, Shopping, Registration, Contact Us$),$ code the navigation links as an unordered list.

The main tag should contain a minimum of six products sold by the privately owned small business with an image depicting the products, a short description for each product, and detailed information about the products in list format.

Include a description list with information related to each product.

Find a website related to the privately owned small business, add a link to the site in the products.html page, external$-$link Class.

Modify the products page to add essential content for a mobile user.

The privately owned small business contact details in the footer element must have telephone and email links with special characters showing a small phone and envelope and the copyright symbol.

Create a contact.html page, and save the contact.html page in the root folder.

The privately owned small business name must be in the header section.

Add an image below the heading element to display the privately owned small business logo$.$

Navigation bar linking to all pages $($Home$,$ Products, Registration, Contact Us$),$ code the navigation links as an unordered list.

Add the business hours for the privately owned small business as an unordered list element containing a class attribute with the value hours.

The main tag should contain the privately owned small business phone number, email address, and street address. The phone number and email address must be linked.

Embed a map to the privately owned small business address, use the map Class.

Modify the contact page to add essential content for a mobile user.

Privately owned small business contact details in the footer element must have telephone and email links with special characters showing a small phone and envelope and the copyright symbol.

Create a folder inside the root folder for the website and name the folder StyleSheet.

Create a styles.css page and save it in the StyleSheet folder.

Change the background color of the body tag

Position the elements

Style the Navigation Using CSS

Make images responsive

Add a declaration to specify the background color and padding, and increase the font size for the main element

Create a style rule for the footer element

Create style rules for ids on the packages page

Create style rules for ids on the contact page

Style the action class

Style the external$-$link class

Style the map class

Create a CSS Reset

Create a Sticky Header

Edit the nav style rule for mobile viewports

Edit the nav ul style rule for mobile viewports

Edit the nav li style rule for mobile viewports

Remove the top border for the nav li style rule

Edit the nav li a Style Rule

Create a style rule for the mobile class

Add a style rule for the tablet$-$desktop class

Add style rules for the tel$-$link class

Style Rule for the hours Class

Modify the style rule for the main element

Add a style rule for the round class

Modify the style rule for the images in the products page to use a single column