Mobile Page Design

This design aims to look exactly like the provided design specifications, ensuring a usable and snappy experience for users on mobile devices. It is highly responsive across different viewport, including desktop, iPad, tablets, and phones. Additionally, the page includes some interactive elements, such as confetti animation and modals, to enhance the user experience.

Design Prototype & Spec: https://www.figma.com/file/9rss1i3NzevnGg4LU2jJ9f/Work-Samples?node-id=0%3A1&t=QZX96peLgCOMzQdl-0 (Only work on Screen 5, 8, 9, 10 and 11)

Technologies Used

• HTML
• CSS
• Vanilla JavaScript

Github Repository

The source code for this mobile page design can be found on GitHub. You can access the repository using the following URL: https://github.com/cindyeme/Eden-worksample-2

Solution URL

The deployed solution for this mobile page design can be accessed via the following URL: https://cynthia-eden-sample-2.netlify.app

Features

1. Pixel-perfect Design: The mobile page is designed to match the provided design specifications precisely, ensuring visual consistency.

2. Responsive Layout: The page layout is fluid and adjusts seamlessly to different screen sizes, providing an optimal user experience on various devices.

3. Usability and Snappy Experience: The page is optimized for performance, ensuring a smooth and snappy user experience, even on mobile devices with limited resources.

4. Confetti Animation: On Screen 8, there is a confetti animation that gradually appears and disappears during page load. You can view an example of how the confetti appears here.

5. Modal Display for Food Delivery Component: When you click "View Status" on the Food Delivery Component in Screen 9, the modal on Screen 10 will appear, displaying relevant information.

6. Modal Display for Home Cleaning Component: Similarly, when you click "View Status" on the Home Cleaning Component in Screen 9, the modal on Screen 11 will show up, providing relevant details.

7. Smooth Modal Transition: A visually appealing transition effect (of the developer's choice) is implemented for the modals, enhancing the way they appear on the user's screen

Instructions for Testing

To test the mobile page design locally, follow these steps:

1. Clone the GitHub repository to your local machine using the provided GitHub Repository URL.

git clone https://github.com/cindyeme/Eden-worksample-2.git

2. Open the index.html file in a modern web browser.
3. Interact with the page elements, such as clicking on the "View Status" buttons to trigger the modals and observe the confetti animation on Screen 8.
4. Verify that the page looks, feels, and responds as per the provided design specifications and features listed above.

Feel free to explore and provide feedback on the mobile page design.

Happy testing! 😊