Figma to WordPress Templates Needed

Заказчик: AI | Опубликовано: 10.10.2025
Бюджет: 30 $

Here’s one of our Figma. It includes desktop, tablet, and mobile versions of the landing page: https://www.figma.com/design/STIKtpRDOhZE6LKPHt6xG3/Referral?node-id=0-1&p=f&t=aZ94aWt9z3GcDY3W-0 Please make sure to: Preview the presentation mode to see all hover and animation effects. Check the navigation bar, which includes buttons and a burger menu for smaller screen sizes. Note that everything must be pixel-perfect and built using only HTML, CSS, JS, and PHP (no plugins or page builders). Could you please confirm: You can build it exactly as shown in Figma (with responsive behavior). How long would it take you to complete one full landing page like this? Whether you can deliver the code as reusable template files for WordPress integration. Budget is 40. Bid must be writen for 10mins because you must review Figma first and make your decision. Please don't bid quickly. Please don't waste my time. Build the landing pages provided in Figma as hard-coded templates using only plain HTML, CSS, JavaScript, and PHP for WordPress integration. Do not use any WordPress plugins to create the page layouts. Deliverables Scope Implement the pages exactly as shown in the Figma files. Deliver static/hard-coded page templates (HTML/CSS/JS) plus the minimal PHP snippets needed to integrate them into a WordPress theme. Do not upload the pages to the hosting environment and do not perform any future updates — your responsibility is to build and hand over the pages. Design & Behavior Requirements Pixel-perfect implementation — spacing, sizes, fonts, and alignment must match Figma. Buttons: match Figma exactly: Reproduce hover and click states precisely. If font rendering causes vertical offset, you may wrap button text in a div and apply a 2px top padding (or equivalent technique) so the text visually centers — ensure this matches the Figma look. Padding & Margins: follow Figma values closely across all components. Interactions: any JS interactions shown in Figma (hover effects, clicks, simple animations) must work and match the prototypes. Templates & Reuse We provided template examples as sections used across pages. You may implement those sections as reusable components in your code (partial HTML files, modular CSS classes, or PHP partials) so they can be reused between pages. Deliverables Folder with page templates: /*.html, /*.css, /*.js. PHP snippets/partials to integrate templates into a WordPress theme (for example: template-landing.php, partial-hero.php, etc.). A short README describing: How to place the files into a WordPress theme (where to drop the PHP snippets and how to include them). Any build steps (if you used a small build step, e.g., for assets) — ideally none. Notes about fonts, assets, and any important implementation details (e.g., the button vertical-centering technique used). Implementation notes (developer hints) Use semantic HTML and well-organized, component-based CSS (BEM or similar) to keep styles maintainable. Keep JavaScript minimal and specific to the interactions shown in Figma. Embed or reference the exact fonts used in Figma (include fallback fonts). Include image/asset files exactly as provided (or exported from Figma if necessary). Test pages at common viewport widths to ensure pixel accuracy across breakpoints that Figma shows.