Interactive Design / Final Project

Week 10 - Week 14 (25/04/25 - 23/07/25)
Felice Jolin (0373636)
Interactive Design  / Bachelor of Design (Hons) in Creative Media
Final Project <span id="LIST"></span>

---

TABLE OF CONTENT

Lectures 

Instructions

Tasks

Feedbacks

Reflection 

---

LECTURES

Lectures Week 2-3 

Lectures Week 4-6

Lectures Week 7-10

back to top

---

INSTRUCTIONS

  

Module Information Booklet 

back to top

---

TASKS

Redesign prototype link : Click here to see the prototype 

I start with the navigation bar. I want it to be on top right and when hover becomes orange color. I also added a link of 'index.html' in the logo so when I click, it will go back to home page.  In addition, the placement of logo is fixed on the top left.

 

Fig 1.1 Navigation code 

Next is the home page first section. I wanted the background image to have one black layer with 50% opacity. However, when I try, it's I'm struggling to stack 2 images. I decided to edit the bg picture in Photoshop. I also ade the button have hover effect to orange. I made a command when clicked, it will scroll to #second-section.

Fig 1.2 Homepage first section code 

Fig 1.3 Homepage first section

  

I continue to work on homepage second section. Here, I want the text to be allign left and the image to be allign right also with blue background colour. 

Fig 1.4 Homepage second section code

Fig 1.5 Homepage second section

Moving on to the homepage third section. I would like to have carousel here. The buttons and dots, I would like it to have orange color. And the dot will have animation from transparent to circular color when click to the next button.

Fig 1.6 Homepage third section  code

 

In addition to make the carousel works, java script is needed, below is my <scrpit> code.

 

Fig 1.7 Homepage third section <script>

 

Fig 1.8 Homepage third section result

Next, I proceed to work on the last section which is the contact section for all pages. I would like to have form with 3 column and submit button on the right side that will have hover effect too. Lastly, I place the logo and contact information in a row, so I divide them into left and right classes.

 

Fig 1.9 Last section code

 

Fig 1.10 Last section result

 

I proceed to do the second page, About us first section. I insert the image on the css same as the homepage first section.

Fig 1.11 About us first section

 

 

Fig 1.12 About us first section result

I proceed to do the second page, About us second section. I want the image to be justified left and the text on the right side.

 

Fig 1.13 About us second section result

Fig 1.14 About us first section code

 

 

back to top

---

FEEDBACKS

back to top

---

REFLECTION  

 

back to top