MTD219-Internet Technologies

Refer to the source files for Question 1. Make changes ONLY to the file myStyle.css.

Apply styling to the banner items (APPLY NOW!, PROGRAMMES, VIEW EVENTS) shown in Figure 1.

(a) Apply the following styling to the banner items (APPLY NOW!, PROGRAMMES, VIEW EVENTS) shown in Figure 2.

1) Set font color to #ffffff

2) Set all paddings to 8px

3) Set border radius to 5px

4) Set width to 120px

5) Align text to center

6) Set cursor to pointer

7) Set items to 15px apart

(b) Apply the following background color to the respective banner items.

1) Set background color of APPLY NOW! to #cf3025

2) Set background color of PROGRAMMES to #0f0cb3

3) Set background color of VIEW EVENTS to #303030

(c) Apply the following styling to the banner items when being hovered over shown in Figure 3.

1) Set the background color to #ffffff

2) Set font color to #000000

Question 2 Refer to the source files for Question 2. Make changes ONLY to the file myStyle.css and myScript.js.

Apply hyperlinks to the banner items (APPLY NOW!, PROGRAMMES, VIEW EVENTS)

(a) Apply hyperlinks to the menu items so that the respective links navigate the user to the respective websites in a new window or tab. 

(b) Apply hyperlink to the “Multiple Pathways at SUSS” image so that the link navigate the user to the targeted webpage in a new window or tab.

(c) Set cursor to pointer when user hover over the “Multiple Pathways at SUSS” image.

Refer to the source files for Question 3. Make changes ONLY to the file myScript.js. 

Develop a dynamic web page which uses client-side scripting to change the web content when user interact with the circle icons shown in Figure 4.

(a) Apply the following styling to the circle icons when the webpage is launched.

1) Set the color of 1st circle icon from the left to #cf3025 as default when the webpage is launched.

(b) Apply the following styling to the circle icons when user clicks on one of the circle icon.

1) Set the color of circle icon to #cf3025 when user clicks on the respective circle icon.

2) Set the color of the other 3 circle icons to #bbb.

(c) Develop a dynamic web content to show the respective image and areas shown in Figures 5-8. Refer to the respective image and content in Table 1.