Split-Screen Hero
A diagonal green overlay over a produce photo carries the headline and a contact button, while the company seal sits on the wooden board on the right.
Fig. 01
Desktop · Laptop · Tablet · Phone
- 01Role
- Sole Developer
- + Web design
- 02Duration
- Feb 2025
- About 2 days
- 03Team
- 1 Person
- Solo project
- 04Status
- Live
- In production
Project Purpose
Why it exists
El Araba El Khadraa is a Dubai-based foodstuff trading company that sources fresh fruit and vegetables from Egypt, Turkey, India and other agricultural regions and sells them locally and abroad. It needed a first web presence: a single, fast page that explains who the company is, what it trades and how to reach it.
The site is deliberately framework-free — plain HTML, CSS and a little JavaScript — so it loads instantly, costs nothing to host and is easy for the company to keep running. The design carries the brand’s green and the produce photography through every section, with the sections animating in as the visitor scrolls.
Tools & Technologies
What it's built with
- 01HTML5
- 02CSS3
- 03JavaScript
- 04Git
Features
What it does best
04
Core Features
Quality vs. Price Mission
The mission section pairs two opposing arrows — quality and price — to show the balance the company promises, over a cargo-ship photo.
Scroll-Triggered Animation
An IntersectionObserver reveals each section’s animated parts when it comes into view and hides them again when it leaves, with no animation library.
Sourcing Map
The company logo sits at the centre with arrows out to round photos of China, India, Egypt, Turkey and Africa, showing where products come from.
More Features
Beyond the essentials
Responsive at Four Breakpoints
Layouts, type sizes and the decorative shapes are re-tuned at four media-query breakpoints, from large desktops down to small phones.
One-Tap Contact
The contact button smooth-scrolls to the footer, where address, phone and email are tap-to-call and tap-to-mail links.
Installable Icons & Metadata
A web app manifest with 192 and 512 px icons, an Apple touch icon, and full description and Open Graph metadata for search and link previews.
App Screens
Inside the product
Landing
Landing
Hero & Brand Introduction
The first screen sets the tone: the headline “Elevating Food Trade, Connecting the World”, a short company intro and the contact button, over a green-tinted split of produce photography.
- CSS clip-path
- WebP images
- Smooth scroll
Mission
Mission
A Balanced Approach to Excellence
The mission statement beside a container-ship photo cut by a diagonal edge, with quality and price arrows that animate in as the section enters view.
- IntersectionObserver
- Diagonal layout
- Animated arrows
Vision
Vision
Pioneering Global Food Trade
The vision statement and four goals — supply chain, market expansion, innovation and customer focus — framed by eucalyptus leaves that slide in from both sides.
- Decorative leaves
- Goals list
- Reveal on scroll
Products
Products
Products & Sourcing
What the company trades and where it comes from: four product principles beside a market-shelf photo, and the sourcing map with arrows from the logo out to each producing region.
- Sourcing map
- Lazy-loaded images
- Responsive grid
Contact
Contact
Contact Footer
The seal logo with the Dubai office address, tap-to-call phone and tap-to-mail email, a tomato garnish in the corner and the designer credit.
- tel & mailto links
- SVG icon sprite
- Dark footer
Problems & How We Solved Them
Hard problems, solved
The problem
Scroll animations without a library
The solution
Rather than pulling in an animation package, a single IntersectionObserver watches the mission, vision and products sections and toggles a hidden class on their animated parts. It also handles reloading mid-page, so sections that are already in view never stay stuck hidden.
The problem
Photo-heavy page that still loads fast
The solution
All photography is served as WebP, below-the-fold country photos are lazy-loaded, and the layout uses plain CSS with no framework, so the whole page ships as a few small files.
The problem
Diagonal, layered layouts that survive small screens
The solution
The slanted section edges, overlapping arrows and decorative leaves were designed on desktop first, then re-tuned at four media-query breakpoints so text never collides with the artwork on tablets and phones.
Outcomes
The results, by the numbers
0
Page, fully static
0
Responsive breakpoints
0
Sourcing regions shown
0
Days from start to launch