INTERACTIVE DESIGN FINAL PROJECT
17.06.2025-22.07.2025/ Week 9 - Week 14
Christopher Jayson Tan/ 0378500
Interactive Design / Bachelors of Design (Hons) in Creative Media /
Taylor's University
Final Project
TABLE OF CONTENTS
1. INSTRUCTIONS
2. FINAL PROJECT
3. REFLECTION
INSTRUCTIONS
FINAL PROJECT
Mr. Shamsul instructed us to create 5 separate pages and because of that i decided to create a home page, legacy page, mission page, investor hub page and contact page. I left out the Structure page as i decided to lean more on creating a new page.
Navigation & Footer
I start things off by creating the navigation bar. This is quite tricky in my opinion because i have to create a drop down bar for one of them and I'm quite rusty as it.
I created the navigation bar using the <nav> element which groups all my site links. I wrapped it inside a <header> tag because it's the top section of my website. I added two images inside the header for branding: one is the company logo, and the other is a flag to represent language or region.
Inside the nav, I used multiple <a> tags as clickable links for different pages like HOME, INVESTOR HUB, etc. I didn’t put the href for some of them yet because I haven’t linked the pages, or they’re placeholders for now.
I also used a <div class="dropdown"> to make a dropdown for “ABOUT US.” Inside it, there’s another <div class="dropdown-content"> which only appears when hovered thanks to the CSS. That’s where I placed sub-links like “Missions” and “Legacy.”
At the end, I added a button for “CONTACT US” that’s styled differently to make it stand out. The button is placed inside an anchor <a> tag so that it can link to another page.
Figure 2.4 Footer CSS, Week 10
I styled .footer-top with a dark blue background and white text to make it stand out from the rest of the page. I used display: flex again for .footeredit to arrange the left and right content side by side.
The .footerbutton is green with white text and has a hover effect to show users it’s clickable. I also styled the links on the right side so they turn grey on hover.
Finally, I made .footer (the bottom-most footer) completely black with centered white text, keeping it clean and simple.
Home Page
This part is the first thing users see after the navigation bar. I created a full-height section using <div class="main">. Inside it, I added a .text-overlay div to place the actual content on top of the background image.
Inside .text-overlay, I made 4 sections—each with a <h1> and a <p>. There are for parts: Legacy, Milestones, Prospectus, and Information. The Legacy has an anchor tag wrapped around it because it is linked to other page.
For the background, I used a combination of a dark transparent overlay (rgba(0,0,0,0.5)) and a background image. This helps the white text stand out without being hard to read.
The .text-overlay is absolutely positioned near the center-left of the screen. Each .section has a hover effect that slightly shifts it to the right and changes its color, just to make it feel more interactive and modern.
This section is more visual. I placed a YouTube video on the left and two image blocks on the right. To organize the layout, I used a <div class="centerimage"> and placed everything inside it.
The video is embedded using an <iframe>, and it's wrapped in its own <div>.
The right side is a <div class="rightcenter"> with two more inner <div>s—each with a title and an image (CSR and RUPS).
I used display: flex on .centerimage so the video and the two image blocks are side-by-side. I gave it a big gap to separate them cleanly.
I also added a hover effect on .rups images to make them darken slightly. This gives feedback to users that they can interact or click it.
This part is a news showcase. First, I used an <hr> line for decoration and a section title.
Then, I made a .row container that holds 4 .col cards side-by-side. Each card has:
- An image (newsimg)
- A date styled using <h5 class="tanggal">
- A news title
- A green “Read More” link
I also added a “SEE MORE” button at the bottom to encourage users to check out more articles.
.row is a flex container to place all 4 columns in one row. I spaced them using gap, and inside each .col, the content is vertically stacked.
The image gets a hover effect (darker), and the “Read More” text turns a different green when hovered. The .newsbutton at the bottom is styled to match the site’s dark blue theme.
Contact Page
This whole section is wrapped in a <div class="dropdown1"> which holds both the button and the hidden dropdown options. The button itself has the class .dropdown-button and shows the label "Select Contact Purpose" with a down arrow using the Unicode symbol ▾.
When this button is clicked, it triggers the toggleDropdown() function (probably from a JavaScript file), which shows or hides the actual dropdown. The dropdown options are inside <div id="dropdown-menu" class="dropdown-menu">. Each individual option is a simple <div> that runs the selectOption(this) function when clicked.
This setup gives you a clean, interactive dropdown without using the standard <select> element.
Figure 2.12 Contact page CSS, Week 11
I styled .dropdown1 to be centered and spaced nicely with a margin-bottom, so it sits comfortably above the form.
The .dropdown-button looks like a regular button but with a wider layout using width: 100% and a bit of padding for clickability. I added border-radius: 5px to soften the edges and background-color: white so it matches the input fields below.
When the button is hovered, the cursor: pointer makes it clear it’s clickable, and it slightly darkens on hover just to give feedback.
The .dropdown-menu is hidden by default (usually using display: none or opacity: 0; pointer-events: none), and it appears when toggleDropdown() is triggered. I gave it a white background, some subtle shadow (box-shadow) to lift it visually, and stacked the items vertically.
Each option inside has padding so it doesn’t feel cramped, and when hovered, it changes background color to show which one you’re about to select.
Figure 2.13 Contact page code 2, Week 11
This is the main structure of the Contact Us section. I wrapped everything in a <div> with the class contact just so I can style the whole section easily later on. Then there's the heading at the top using <h1> to clearly show that this is the contact part of the page.
Inside the <form>, I added the basic input fields: name, email, and subject, each has a placeholder so users know what to type. I also made all of them required so people can't leave them empty.
For the actual message, I used a <textarea> since messages are usually longer than a few words. Then there's a simple Submit button at the bottom with the class submit, which I’ll style later in CSS.
So overall, this is just a clean and simple form setup where users can send us their details and message.
The text is centered using text-align: center, and I added some padding so the content doesn’t stick to the edges.
The .title is styled to be bigger and darker using font-size: 36px and a deep blue color so it clearly stands out as the section header.
For the form layout, I used display: flex with flex-direction: column and added a gap so the fields are spaced out evenly. All the input and textarea elements were made full width with some padding and border-radius to keep them clean and modern.
Then for the .submit button, I went with a dark blue background and white text to match the title. I added cursor: pointer to show it’s clickable, and on .submit:hover, the background darkens just slightly, that small hover effect helps give feedback when you interact with the button.
For this next part, DeepSeek helped me massively because i have no clue on how to actually make it because it's quite complex. There was no materials as well for this part during class and because of that i used AI.
Figure 2.15 Contact page script 1, Week 11
The function toggleDropdown() is triggered when the user clicks the button. It basically just adds or removes the .show class on the #dropdown-menu, which either makes the menu appear or disappear depending on the current state.
Then, when a user clicks on one of the dropdown options like "Investor Relation", the selectOption(this) function runs. What it does is update the text inside .dropdown-button to match whatever option was clicked, so the user knows what they've selected. It also sets a hidden value using document.getElementById("selected-option").value = ..., which is helpful for passing the selected purpose through the form. After that, it calls toggleDropdown() again to close the dropdown.
Finally, there’s a small event listener for clicks on the whole window. If the user clicks anywhere outside the .dropdown-button, this code checks if the menu is open (by checking if it has .show). If it is, it removes the class, closing the dropdown. This just makes sure the menu doesn’t stay open awkwardly when you're not using it.
Legacy Page
The legacy part is very straightforward as it only has text. i styled the h1 in the source code because i feel like it is simpler. The codes were also given class so that i can style them easily and add a background image.
Figure 2.19 Legacy page CSS, Week 11
So for the .legacy section, the most important part is that it's using a background image combined with a dark transparent overlay using rgba(0, 0, 0, 0.5) and background-blend-mode: darken to make the text more readable. The height: 700px makes sure the section fills up a big chunk of the screen, and background-attachment: fixed creates that parallax-like scroll effect. The display: flex part is what centers the .text content both vertically and horizontally inside the background area.
Then in .text, max-width: 1200px just keeps the paragraph from stretching too wide, and margin-top: -80px pulls it up a bit so it aligns nicely with the background. The color: white makes sure the text contrasts clearly against the dark background. For the inner elements, .text p uses font-size: 22px and font-weight: 200 to give it a clean, modern look that's easy to read, while .text h1 is styled with a big 50px size and letter spacing to make the headline feel bold and important.
Mission Page
So first, everything is wrapped in a <div class="overlay">. This basically acts like the background container, it puts a full-size image behind everything and adds a dark overlay so the text is easier to read.
Then inside that, there's a <div class="content-wrapper">, which just keeps all the text centered and spaced out nicely with padding.
Each section (like "Mission", "Vision", and "Company Values") is placed inside a <div class="section">. The heading is done using <h1>, and the description goes in a <p>.
When it gets to the values part, there's a class called .values, and inside that there's a grid layout using <div class="value-columns">. That’s what splits the values into two columns. Each individual value (like “Integrity”, “Compassion”, etc.) is placed in its own <div class="column">, with an <h2> for the title and a <p> underneath to explain it.
Figure 2.21 Mission page CSS, Week 11
The .overlay class is the main background. It uses an image (kumpulan.png) and covers the whole section. background-attachment: fixed; makes the image stay still while scrolling. Then there's ::before, which adds a dark transparent layer (using rgba(0, 0, 0, 0.6)) on top of the image to help the white text pop out more.
.content-wrapper puts all the content above the dark layer by giving it a higher z-index: 1 and positions everything centered with some nice padding.
Each .section sets the spacing for the Mission, Vision, and Values blocks. The h1 inside has a larger font size (36px) and font-weight: 700 to make the headings stand out.
For the company values part, .value-columns uses a CSS grid to split things into 2 columns with some spacing in between (gap: 30px), while .column styles each individual value block, it gives padding, rounded corners, and centers the text. The headings inside .column are bold and slightly smaller (25px), and the paragraph is kept readable with a lighter font weight and decent line height.
Investor Hub Page
Figure 2.21 Investor Hub page code 1, Week 11
The entire layout is wrapped in a <div> with the class .layout, which likely acts as the main container. Inside it, there’s another wrapper called .button-wrapper that holds two sets of buttons.
The first group, inside .button-row, contains four box-styled buttons:
"Why Invest In Dharma Polimetal?", "Company Performance", "Annual Report", and "Shareholder Information". Each of these buttons uses the class .box-button, which is what gives them their visual style.
The second group also uses .button-row but adds an extra class .center-row, which probably adjusts its alignment or spacing since it has only three buttons: "Dividend Information", "Presentation", and "Prospectus". These buttons are also using .box-button for styling.
This structure splits the buttons into two clear rows using consistent class names which makes it easy to style and organize with CSS.
The .layout class is used to center everything on the screen. It uses display: flex to enable Flexbox, justify-content: center to center items horizontally, and align-items: center to center them vertically. The height: 100vh makes sure it takes up the full height of the screen.
Inside it, .button-wrapper stacks the rows of buttons vertically using flex-direction: column. The gap: 30px adds vertical spacing between the rows.
Each .button-row lays out the buttons side by side. It also uses Flexbox to arrange them horizontally, justify-content: center to center the row, and gap: 30px to keep spacing between buttons. The flex-wrap: wrap lets the buttons move to the next line if the screen is too narrow.
The .center-row is just a helper class that re-applies centering specifically for the second row of buttons.
Then, .box-button is the main style for each button. The text is white, bold, and centered with text-align: center and Flexbox centering (justify-content and align-items). The cursor: pointer makes it look clickable, and transition: color 0.3s adds a smooth effect if the color changes on hover. It has a fixed size (width: 140px, height: 60px) and some padding inside. The corners are rounded with border-radius: 8px, and the black background comes from background-color: #000.
Figure 2.23 Investor Hub page code 2, Week 11
This HTML section is placed inside a <div> with the class isi, which acts as the container for the content titled "Why Us?". It starts with a main heading using <h1>, followed by a tagline in <h2>, and a descriptive paragraph in <h4> that outlines Dharma Group’s commitment to quality and sustainability through excellent people and processes.
The content is broken down into six subsections, each wrapped in a <div> with the class column. These columns represent different strengths of the company. Each column begins with a <h4> for the title, followed by a paragraph or a list of supporting points. The first column talks about Dharma Group’s integrated supply chain and innovative manufacturing supported by advanced facilities and skilled workers. The second one highlights their long-term partnerships with international clients and their strong reputation in the industry. The third emphasizes their solid financial track record. The fourth explains their clear vision for sustainable growth and innovation. The fifth discusses their use of technology and focus on talent development, including R&D and collaborations with global partners. Finally, the sixth column focuses on leadership, stating that the company is led by experienced professionals with a long-term vision.
The structure is meant to be informative and persuasive, helping users understand the key reasons why Dharma Group is a strong choice in the automotive industry.
Figure 2.24 Investor Hub page CSS 2, Week 11
The .isi class acts as the container for the whole section. It adds padding around the content, sets the background to white, and uses the custom 'Arson Pro' font. The line height is set to 32px to give enough breathing room between lines of text, and the default text color is black for readability.
The <h1> inside .isi is styled to be large (50px), bold-looking with added letter spacing, and centered to grab attention as the section's main title. The <h2> is slightly smaller at 28px, still centered, and has a lighter font weight to serve as a tagline. There's also spacing under it to separate it visually from the content.
The <h4> tags are used for subheadings in each column, styled at 20px with a medium weight and slight margin underneath to make each title readable and distinct. Each .column class wraps the content of a point and limits the width to 1100px so it doesn’t stretch too far. It’s centered horizontally and spaced out below each section with margin-bottom.
Responsive Codes
I added some responsive codes so that it works in different devices. I used Deepseek and ChatGPT for this part as well because i have no clue on how it works. I experimented several different times for each of the page to make sure it mostly works in most devices.
Figure 2.25 Some of the responsive codes i added in different pages, Week 12
Odd "problems" I Can't Fix:
One odd thing that i cannot fix at all is the "About Us" where it cannot be pressed if you are using a phone/tablet but instead you have to hold it down and then it will reveal the dropdown bar. I tried fixing this for hours but it does not change anything, I even tried asking Chatgpt and Deepseek but it doesn't seem to work.
Another thing is the responsiveness. Some of the elements/objects are a bit weird on different devices (specifically tablets/iPads) and although I have managed to fix a majority, there are still a couple of them. I spend days trying to fix them, using AI and experimented with different methods, but I cannot seem to find the solution. In the end I just let it go because I have run into a wall that I can't jump over.
Submission:
A live URL to the fully functional website. A brief report (800–1,000 words) documenting the development process, any challenges faced, and how they were overcome in your E-Portfolio, and upload the final project main folder into Google Drive and include the link in your e-portfolio (set the access to public).
Live URL : https://finaliseddharmawebsiteremake.netlify.app/
Google Drive : https://drive.google.com/drive/folders/105Faihs38uR07agoybGDcVeXRcHnYhI4
REFLECTION
This is by far the hardest assignment I've ever faced. Coding has never been my passion from the very beginning because it relies heavily on memorization, so doing this assignment was actually not fun/enjoyable. I did learn a few things here and there, as well as being able to see a side of website creation in a way I've never seen before. My lecturer, Mr. Shamsul, is also very helpful throughout this coding journey because without his lessons, I might as well just jump off the building because of how difficult this module is. AI such as DeepSeek and ChatGPT also played a big part, as it helped me understand some of the parts and codes, However, I didn't want to rely on them that much as it would be unfair, so i only used them when it is very necessary (when I am stuck). Overall, there are always pros and cons to everything, and this one was no exception. Though it was really hard and I did have a hard time, it did show me a side of what coding actually is and how it fundamentally works, which is cool.
Comments
Post a Comment