Bootstrap Bilingual Pixel Perfect Site
Budget: $30 – $250 USD
I need the front end of the site in this Figma prototype built exactly as shown, with no visual or structural alterations: https://www.figma.com/proto/hWR3rZRPA4w59RhJYP241b/UI-UX-Website-Leadernace?page-id=2%3A3&node-id=25-522&starting-point-node-id=25%3A450&scaling=scale-down&content-scaling=fixed&t=mCcS7VDRjNB7nyJr-1&show-proto-sidebar=1
Stack
• Pure HTML5 and CSS3, organised with Bootstrap (feel free to use Bootstrap 5 utilities and components where they match the mock-ups).
• No React, Vue or Angular; keep it lightweight and framework-free.
Language requirements
The Figma screens are in Arabic and the final markup must render right-to-left flawlessly. At the same time, every text node must be wrapped or structured so the back-end can swap in English content later without changing the layout. One responsive codebase is enough; just make sure classes, data-attribs or helper functions are in place for future locale switching.
Animations to reproduce exactly
• Hover effects
• Page transitions
• Loading animations
Keep the CSS for these effects modular so I can tweak timing or easing if needed.
Scope and deliverables
– Pixel-perfect desktop and mobile breakpoints that match the prototype down to spacing and typography.
– Clean, commented code and a brief README explaining where language toggling hooks and animation files live.
– All assets optimised and organised in a logical folder structure.
Acceptance
I will overlay your build on the Figma frames in Chrome DevTools. Anything off by more than 2 px or any missing animation will be flagged for revision.
Stack
• Pure HTML5 and CSS3, organised with Bootstrap (feel free to use Bootstrap 5 utilities and components where they match the mock-ups).
• No React, Vue or Angular; keep it lightweight and framework-free.
Language requirements
The Figma screens are in Arabic and the final markup must render right-to-left flawlessly. At the same time, every text node must be wrapped or structured so the back-end can swap in English content later without changing the layout. One responsive codebase is enough; just make sure classes, data-attribs or helper functions are in place for future locale switching.
Animations to reproduce exactly
• Hover effects
• Page transitions
• Loading animations
Keep the CSS for these effects modular so I can tweak timing or easing if needed.
Scope and deliverables
– Pixel-perfect desktop and mobile breakpoints that match the prototype down to spacing and typography.
– Clean, commented code and a brief README explaining where language toggling hooks and animation files live.
– All assets optimised and organised in a logical folder structure.
Acceptance
I will overlay your build on the Figma frames in Chrome DevTools. Anything off by more than 2 px or any missing animation will be flagged for revision.