Profile Settings Page
Build a clean and modern profile settings page based on the provided design. The interface should include a top navigation bar, profile avatar section, settings sidebar, editable form fields, image upload area, and toggle switches for notifications. Use HTML for structure, CSS for styling, and JavaScript for interactivity such as switching tabs, toggling notification settings, and handling image preview selection on the frontend. The final result should focus on a soft modern UI, clean spacing, form alignment, responsive behavior, and polished interactions.
Attention
This challenge does NOT include downloadable assets.
You are expected to:
- Use your own images, icons, and resources when needed
- Recreate the design based on the provided Figma file
- Respect the main brand identity, colors, logo, and key visual elements
- Keep the overall UI structure, layout flow, and important sections consistent with the design
You are NOT required to use the exact same images, text content, or placeholder data from the original design.
Your focus should be on:
- Brand colors
- Logo usage
- Layout structure
- Spacing and alignment
- UI architecture
- Required functionality
Minor differences in content, images, or displayed data are acceptable, but the overall visual identity and core design direction should remain clearly consistent with the challenge.
Project Requirements
- Build the full settings page based on the provided design
- Use semantic HTML5 structure
- Style the full interface using CSS
- Use JavaScript for frontend interactions
- Create a top navigation bar with logo, links, and action icons
- Build a left sidebar with settings categories
- Highlight the active settings item
- Create a profile avatar section on the left
- Add a main content card for general settings
- Create form fields for name, email address, and phone number
- Add an upload image area for profile picture
- Use JavaScript to preview the selected profile image on the page
- Create toggle switches for push notifications and email notifications
- Allow toggles to switch on and off using JavaScript
- Add a premium upgrade button in the sidebar
- Use hover and active states for buttons, links, and toggles
- Make the page responsive for tablet and mobile devices
- Keep code clean and organized across HTML, CSS, and JavaScript files
Ready to submit your solution?
Upload your project for mentor review and showcase your structure, polish, and implementation quality.
Login Required
You need to be logged in to submit your solution for this challenge.