Resources Platform Landing Page
Build a modern and colorful resources platform landing page based on the provided design. The page should include a navigation bar, hero section, featured resource cards, trusted brands row, services or categories section, testimonials, highlighted resources section, promotional CTA section, and footer. Use HTML for structure, CSS for styling, and JavaScript for small frontend interactions such as navigation behavior, button effects, sliders, or simple dynamic sections. The final result should focus on bright visual hierarchy, card layouts, clean spacing, and responsive behavior.
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 landing 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 call-to-action button
- Build a hero section with heading, supporting text, buttons, and illustration
- Create featured resource cards below the hero section
- Add a trusted brands or partners row
- Build a categories or services section with icons and short descriptions
- Create a testimonials section with multiple testimonial cards
- Add a highlighted resources section with large featured content card
- Create smaller resource cards below or beside the featured card
- Build a promotional call-to-action section near the bottom
- Create a footer with links and app download buttons
- Add hover and active states for buttons, cards, and links
- Make the layout 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.