Responsive Static Webpage Development
Budget: $30 – $250 USD
I will hand over a complete Figma file that already contains the full desktop, tablet and mobile layouts. Your task is to translate those screens into clean, performant HTML, CSS and vanilla JavaScript, keeping every pixel, font, colour and spacing exactly as designed.
Core requirements
• The site must resize fluidly so it looks and behaves the same on large monitors, iPads and small phones.
• Two interactive elements are mandatory: a fully functional contact / data-capture form and an image slider exactly where the design indicates. Feel free to choose the lightest-weight approach, as long as the animation is smooth.
• No SEO work is necessary; the focus is on visual fidelity and speed.
• Final code has to run flawlessly on the latest versions of Google Chrome, Mozilla Firefox and Microsoft Edge.
Deliverables
1. All source files (HTML, CSS, JS) clearly structured.
2. Assets optimised and referenced with relative paths.
3. A short read-me explaining build steps, if any, and how to link the form to a backend later.
I will review by resizing the browser window, checking the form and slider, and loading the pages in the three specified browsers. Once everything matches the Figma design and passes those checks, the project is complete.
figma.com/design/ph0v6ekpLAuLZUG6BtAyxF/Parabank---Home-Page---NEW?node-id=135-267&t=6DonfuLgqUMpFzr0-0
Core requirements
• The site must resize fluidly so it looks and behaves the same on large monitors, iPads and small phones.
• Two interactive elements are mandatory: a fully functional contact / data-capture form and an image slider exactly where the design indicates. Feel free to choose the lightest-weight approach, as long as the animation is smooth.
• No SEO work is necessary; the focus is on visual fidelity and speed.
• Final code has to run flawlessly on the latest versions of Google Chrome, Mozilla Firefox and Microsoft Edge.
Deliverables
1. All source files (HTML, CSS, JS) clearly structured.
2. Assets optimised and referenced with relative paths.
3. A short read-me explaining build steps, if any, and how to link the form to a backend later.
I will review by resizing the browser window, checking the form and slider, and loading the pages in the three specified browsers. Once everything matches the Figma design and passes those checks, the project is complete.
figma.com/design/ph0v6ekpLAuLZUG6BtAyxF/Parabank---Home-Page---NEW?node-id=135-267&t=6DonfuLgqUMpFzr0-0
Related categories:
JavaScript
Website Design
CSS
Animation
HTML
Web Development
Frontend Development
Mobile Development
Figma
Web Design