Loading image 1...
MalioboroRun2022
Responsive Event Registration Page built with Tailwind CSS
Malioboro Run 2022
Malioboro Run 2022
Responsive Event Registration Page built with Tailwind CSS
Responsive Event Registration Page built with Tailwind CSS
Developed a visually engaging, single-page website for the Malioboro Run 2022 event. The goal was to provide essential event information, showcase the unique running experience through Yogyakarta (Jogja), and drive participant registration. The site is fully responsive and optimized for speed and clarity.
The Problem
The primary challenge was designing a clean, user-friendly interface that could quickly convey the excitement of the event while incorporating event details (rules, routes, FAQ) and multiple external sponsor/partner logos without appearing cluttered.
Used *Tailwind CSS* for rapid, utility-first styling to achieve a modern, minimal aesthetic. Leveraged a *Dark/Overlay Hero* section for high visual impact and utilized a *sticky navigation* bar with clear CTAs (Daftar Sekarang) to maximize registration conversions. Core functionality was implemented using *vanilla JavaScript*.
VisualJourney
Project Showcase
Loading image 1...
Screenshot 1
Project visualization and interface design
TechStack
HTML5
Structure
CSS3
Styling
JavaScript (Vanilla)
Interactivity
Tailwind CSS
Styling
Figma
Design/Prototyping
KeyFeatures
High-Impact Hero Section
Dominant hero image of the Malioboro street with a clear, localized value proposition: "Menikmati wisata kota khas Jogja dengan berlari" (Enjoy Jogja’s distinct city tourism by running).
Structured Navigation Links
Clear navigation bar for routes, terms, FAQ, and registration (Daftar Medali).
Sponsor & Partner Showcase
Dedicated section to display the main sponsor (BPD DIY) and other official partners (Isotonic, Mineral Water, Media Partner).
Visual Storytelling
Gallery thumbnails near the main description to visually summarize the atmosphere of the run.
Registration CTA
Prominent "DAFTAR SEKARANG" (Register Now) button in the header for immediate conversion.
Dynamic Event Countdown
A prominent, real-time countdown timer in the hero section displaying the days, hours, and minutes remaining until the Malioboro Run begins, fostering urgency and excitement.
OurProcess
A detailed look at how we brought this project from concept to reality through our proven methodology.
Design & Wireframing
Quickly sketched the single-page layout in *Figma*, prioritizing the hero section and CTA placement.
Styling & Development
Built the HTML structure and applied utility classes using *Tailwind CSS* for rapid styling of all components (nav, hero, gallery, footer).
Integration & Polish
Implemented minor JavaScript for menu/scrolling and ensured full responsiveness across mobile views.
Deployment
Final testing and deployment to a static hosting service like Vercel.
Achieved high PageSpeed scores due to static hosting and minimal JavaScript framework usage
Created a clear content hierarchy despite the single-page format
Successfully showcased the main sponsor (BANK BPD DIY) and official partners prominently
Implemented a modern, responsive layout optimized for mobile event registration
The website was essential in generating buzz and sign-ups. The clean layout made it easy for participants to find all the necessary information quickly.