The layout design uses a combination of CSS grid and flexbox to get structure and responsiveness. Eg: Using Two-column grid setup (grid-template-columns: 1fr 1fr) to organize content like volunteering and interests. ALso flexbox is used for the profile header and user info areas.
Adding interactive visual elements using gradient backgrounds, subtle hover effects like transform: scale(1.05), and background images for SDG interest items to make user engagement more dynamic and visually appealing.
Accessibility
Used high contrast colors like white text on orange background to ensure content is easy to read for everyone.
Followed best practices by using semantic HTML, including correct heading levels like h1 and h2, and meaningful class names.
Used Clickable images which will direct the user to the respective pages for further information and understanding about the UN Goals and Support.
Link to the validation page
Link to the User Profile page
Sitemap Page
Technical Description
SVG Implementation: Used an inline SVG with a viewBox="0 0 1400 750" to create a scalable and interactive sitemap.
Clickable SVG Elements: Each page is represented by clickable "a" tags wrapping "rect" and "text" elements within the SVG.
Hierarchical Navigation Structure: The layout uses a tree-like structure with the main "ASDY Splash page" node at the top, branching down to primary pages, and further subdividing into "Content Pages" and "Page Editors."
Accessibility
Responsive Design: The .svg-wrapper uses percentage-based widths with max-width: 1200px to ensure viewing across devices.
Interactive Animations: CSS transitions on .movable-button elements create smooth hover effects with "transform: translateY(-2px)" and "filter: drop-shadow()" for visual depth and user feedback.
Link to the validation page
Link to the Sitemap page
Content Page
Technical Description
Multiple "section" elements with semantic IDs organize content logically
Grid-based layouts using CSS Grid for responsive card arrangements
Anchor links with meaningful IDs allow keyboard navigation through page sections
CSS transitions and hover effects provide visual feedback for user interactions
Responsive design ensures content remains accessible across different devices and zoom levels
Link to the validation page
Link to the Content page
Challenges and Lessons Learned
Challenges
User profile
Maintaining proper alignment of form containers and ensuring consistent spacing between form elements while creating the user profile contact form
Making SDG images clickable as interactive elements while ensuring they fit properly within their designated containers without overflow or distortion
Structuring the calendar layout with precise rows and columns arrangement to display availability data in a clear, organized tabular format
Sitemap
Ensuring all SVG rectangle elements remained within the visible container boundaries
Creating a smooth vertical hover effect that moves elements upward without causing unwanted rotation or skewing
Drawing connecting lines between rectangles with precise positioning and accurate lengths
Lessons Learned
User Profile
Resolved form alignment issues by implementing CSS Grid with defined column ratios (grid-template-columns: 1fr 1fr) and consistent gap spacing between form elements
Fixed SDG image container problems by using background-image properties with background-size: cover and increased the padding
Structured the calendar using HTML table elements with proper thead and tbody sections, applying border-collapse: collapse for clean row/column presentation
Sitemap
Measured all rectangle positions and added sufficient padding to set the viewBox to 1400x750 pixels
Used CSS overflow properties to enable horizontal scrolling on mobile when content exceeds container width
Applied only translateY(-2px) to move elements straight up without rotation
Implemented transition: all 0.3s ease to make the movement gradual and controlled
Compliance
Content follows and aligns the university guidelines.