Documentation

This documentation is all written in Dutch.

Client Conversation Summary

Functional Design

Technical Design

Plan

Here's a link to our Trello board.

Testing Plan & Improvement Suggestions

Responsibilities

Designs

You can drag your mouse to look through our designs made in Figma. Please wait for it to fully load first.

Version Control

Click this link to go to our GitHub, which contains all the files of the project. We also have a document about our GitHub page.

Code

Functions & CSS

This function is written in a separate PHP file from the website's pages. It's called on every page with htmlheader(). The reason I made this function is because I would only have to edit this PHP file once to update the styles on each page.

Just like the style function, this function is called on every page with htmlnavbar(). The red text is HTML code, which creates the navigation bar and the buttons.

This CSS code is for styling the navigation bar with a horizontal layout (nav) that has a red background and rounded corners. There’s a hidden button (.nav-button) that will appear on mobile devices, styled with hover effects to change its text color. The main menu (.nav) includes menu items (.nav > li > a) with uppercase text, padding, and hover effects that change the background and text color. Submenus (.nav_sub) are hidden by default but appear as a vertical list when you hover over the parent menu.

About Page

Styling of the About page. The about-left and -right are classes for fields that cover the left side fully and the right side fully, this makes it easier to put information on each side of the screen. The rest of the styling is for the cards with the employees' pictures and names, it puts them in a grid and adds a hover effect.

".about-card img" applies styling to every image that is put in a division with the .about-card class, .about-card h3 and p adds styling for headers and paragraphs that are added into the division.

Test Plan

Final Presentation

In this project me and my team recorded evidence of presenting this project to our client. You can see the video below. [NL]

Reflection