IntermediateWeb4-8 hours+200 XPMentor reviewed

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.

landing-page
resources
education
html
css
javascript
responsive
ui
cards

This challenge doesn't include downloadable assets

Recreate the design from the Figma file using your own images, icons and resources where needed. You are not required to use the exact same images, copy or placeholder data.

You are expected to

Use your own images, icons and resources when needed
Recreate the design based on the provided Figma file
Respect the brand identity, colours, logo and key visuals
Keep the UI structure, layout flow and key sections consistent

Reviewers focus on

0

Completed

—

Average AI review

New here? Read the Tahaddiyat guide to learn the expected structure and submission flow.

Brand colours

Logo usage

Layout structure

Spacing & alignment

UI architecture

Required functionality

Minor differences in content, images or data are fine, but the overall visual identity and design direction should stay clearly consistent with the challenge.

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

Submission

Submit your solution

Share your work for mentor review and showcase your structure, polish and implementation quality.

2 joined

Log in to submit

You need an account to submit your solution and receive mentor feedback.

Log in to submit

Community Discussions

Questions & Answers

Be the first to ask a question about this challenge.

Loading discussions...