1 - Beginner
Travel Site Homepage
Single page for travel site showing tours and packages
- 🌍 Building a static, visually appealing homepage layout.
- 📐 Structuring and organizing content into well-defined sections.
- 🎨 Styling cards with consistent design elements like images, labels, buttons, and descriptions.
- 💬 Designing and implementing a basic contact form.
The navbar contains the logo on the left and links to sections on the right.
The hero section includes a travel-themed background image and a title.
The 'Popular Destinations' section includes a title, subtitle, and destination cards.
Each destination card contains an image, a title, a star rating, a description, and a 'Book Now' button.
The 'Packages' section includes a title, subtitle, and three package cards.
Each package card contains an image, the package type label, duration, start date, a description below, and at the bottom, the price and a 'Book Now' button.
The contact form section includes a title, subtitle, and the contact form
The contact form has inputs for first name, last name, phone number, email, and message, with a 'Send' button at the bottom.
The footer includes the address, phone number, and email on the left, and the logo with social media icons on the right.
- 🌍 Building a static, visually appealing homepage layout.
- 📐 Structuring and organizing content into well-defined sections.
- 🎨 Styling cards with consistent design elements like images, labels, buttons, and descriptions.
- 💬 Designing and implementing a basic contact form.
Add a date picker for selecting travel dates in the contact form.
Enable sorting or filtering options for popular destinations and packages.
Add hover effects to images and buttons.
Save contact form submissions to local storage or connect them to a mock database.
Implement a map view in the footer with pinned travel destinations.
Ensure the page is responsive for mobile screens.
Add a dark mode toggle.
- Click on the 'Download Design' button to get the .fig file.
- Upload the .fig file to your Figma account using these steps. You can now open the design and see what you have to make.
- Export assets from Figma by pressing Ctrl+Shift+E (or Cmd+Shift+E on Mac) while nothing is selected and then clicking the 'Export' button that shows up.
- Implement the design using your preferred language or framework (aim for pixel-perfect accuracy).
- Deploy your solution for free using GitHub Pages, Netlify, or Vercel.
- Submit your solution link here and try to get a perfect score!