Skip to content

Releases: K1rk3y/CITS3403_Project

HomePage Implementation

19 May 07:03
af253f5
Compare
Choose a tag to compare
Pre-release

Description: The HomePage serves as the gateway to our platform, introducing visitors to our website. It is designed to build trust and credibility through engaging testimonials and success stories. Additionally, the page encourages visitors to interact with our content and services by offering a user-friendly experience that highlights how they can benefit from our offerings
Design Justification:

I’ve reorganized the frontend into distinctive sections, each designed for a specific purpose. This setup improves user experience by making navigation clearer and simplifies future updates and scaling of our platform. Now, users can find what they need more easily and intuitively.

Key Features
Navigation Bar

A responsive navigation bar with links to Home, Requests, Discussion, About, and Contact pages.
A hamburger menu icon for mobile devices to toggle the navigation links.
Header Section

A full-screen background image with a main title and a call-to-action button.
How It Works Section

A step-by-step guide with links to each step, styled for clarity and accessibility.
Top Sellers Section

A section showcasing top sellers with a background image and placeholder for future content.
Benefits Section

An explanation of how the service benefits buyers, with a flexible layout for images and text.
Footer

Contact information and copyright details, styled to match the overall design.

Maintaining Responsiveness:
1.CSS Media Queries: Utilized media queries to adjust the layout and styles for different screen sizes.

2.Flexible Layouts: Used CSS Flexbox to create flexible and adaptive layouts

3.JavaScript for Menu Toggle

4.Responsive Typography

Used relative units (e.g., vmin, vw, vh) for font sizes to ensure text scales appropriately with screen size.

5.Responsive Images

Ensured images scale correctly with the screen size, maintaining aspect ratio and fitting within their containers.

Further CSS for Styling and Responsiveness
Screenshot 2024-05-19 145716
Screenshot 2024-05-19 145804
Screenshot 2024-05-19 145903