Concept build · Dubai
Leyl Car rental website design for Dubai, a concept build
Leyl is a fictional self-drive car rental firm in Dubai that delivers daily, weekly and monthly cars to the door from 7 am to midnight. We made up the firm, its fleet and its prices, then designed and built its whole homepage as working code. The quote card adds up a real total as you change the class, dates or area, and the fleet rail, price table, delivery zone map and monthly plan calculator are just as live.
A concept build: Leyl is a fictional brand we created to show how we design and build a car rental website for Dubai. It is not a client and not a real company; our client work is on the work page.
The complete homepage, live
Both frames run the real site. Scroll inside them, try the instant quote that adds up the car, delivery, full cover and the no-deposit option in dirhams, with the tax and the card deposit shown, or open it in a new tab.
How we designed a car rental website for Dubai
The total, in the hero
Someone renting in Dubai usually has three or four firms open in other tabs and wants the full cost before writing to any of them. So the hero carries a working quote card: pick a class, areas, dates and handover, and it shows the total in AED with VAT, delivery, cover and the deposit held on the card. A rate ladder beside it marks whether the daily, weekly or monthly price applies to the chosen dates.
Night ink and one amber
The name means night, and the firm delivers until midnight, so the page is built from deep night-ink colour blocks, warm sand and paper, with a single signal-amber accent for prices and buttons. Headlines are set in condensed Archivo to read like road signs, and the photographs show Dubai at blue hour. The header and footer pair the Latin wordmark with ليل in Arabic script.
Dubai's rules in plain words
Renters here ask the same questions every time: does my licence work, when do I get my deposit back, what is the excess, and how are Salik tolls and fines charged. Each has its own section, with separate document lists for residents and visitors, a side-by-side cover table and a worked Salik example. The insurer, the policy wording and the trade licence are left as marked gaps for a real firm's details.
Cars by class, one price switch
Rental firms in the city rarely promise an exact car, so the fleet shows nine car types by class with "or similar" wording and no real makes or models. The fleet rail and the full price table share one Day, Week and Month switch, so the numbers on the page always match.
What the homepage includes
- Hero and instant quote
- Fleet by class
- Prices in full
- Delivery zones
- What you need to rent
- Deposit and cover
- Salik and fines
- Monthly plans
- How a rental goes
- FAQ
- Call to action
Features and interactions
- Instant quote that adds up the car, delivery, full cover and the no-deposit option in dirhams, with the tax and the card deposit shown
- Rate ladder that marks whether the daily, weekly or monthly band applies to the chosen dates
- Fleet rail of nine cars with class filters, drag on desktop, arrow-key and button scrolling, and a Day, Week and Month switch shared with the price table
- Stylised delivery zone map drawn in SVG that highlights each zone as you hover, focus or pick it, with a text description for screen readers
- Monthly plan calculator with 3, 6 and 12 month terms that shows the monthly price and the saving
- Slim booking bar on phones that keeps the current quote one tap away once the quote card scrolls out of view
- Moving headings, photo wipes and prices that count up, none of which run when a device asks for reduced motion
The whole page, top to bottom
Palette and type
- Night ink #0E1A2B
- Signal amber #E8A33D
- Warm sand #E9DCC4
- Paper #F6F1E7
- Deep night #08111D
Type: Archivo, Instrument Sans, IBM Plex Sans Arabic.
Languages: English.
How it is built
- Hand-built HTML, CSS and JavaScript, no framework
- GSAP 3.15.0 with ScrollTrigger, SplitText and Flip
- Lenis 1.3.26 smooth scrolling
- Photographs generated with Higgsfield (Nano Banana Pro), served as WebP, with AVIF for the hero
- Archivo, Instrument Sans and IBM Plex Sans Arabic from Google Fonts
- Homepage weight about 590 KB on desktop and about 520 KB on a phone, measured on our machine on 27 Oct 2026
Need a car rental website like this?
We design and build sites like this one for real businesses, with your brand, your photographs, your prices and the forms wired to your team. See what goes into car rental websites, our web development service, our website prices and how we work with businesses in the UAE, or browse every concept build.
Questions
What should a car rental website in Dubai include?
Renters look first for the price with VAT included, the deposit, the cover and excess, and whether the car can be delivered to them. They also expect clear answers on which licences are accepted for residents and visitors, how Salik tolls and fines are charged, and when the deposit is released. A fleet shown by class with seats, bags and daily, weekly and monthly prices helps them choose quickly.
Should a car rental website show an instant quote or ask for an enquiry?
An instant quote, wherever the prices allow it. A renter who can see a total has less reason to leave and ask elsewhere. The quote should add up the car, delivery, extra cover and VAT, and show the deposit separately. After that, the booking step needs little more than a name, a mobile number and where the car should go.
How should a Dubai car rental website explain Salik, fines and the deposit?
In plain numbers, before the booking. Say how each Salik toll gate passage is charged, whether an admin fee is added and how traffic fines are passed on, with one worked example. For the deposit, give the amount for each car class, how it is held on the card and how many days after return it is released.
More concept builds
Websites
Want yours built like this?
Tell us about your business. We'll plan the pages, the bookings or enquiries, and the launch.
Every rupee you spend with us has to earn its keep.
