Compliance Theme — Pixel-Perfect Figma → HTML/CSS

This repository contains a pixel-focused static implementation of a Figma hero + features layout

🌐 Live Demo 👉 Click here to view the live site

Files you already have

• index.html — Static HTML for the hero & features sections (pixel-focused).
• style.css — Full stylesheet, responsive rules and variables.
• assests/ — Place exported images and SVGs from Figma here (replace placeholders).

Quick goals

• Keep typography, spacing, and asset sizes identical to the Figma file (pixel-perfect).
• Make the layout fully fluid & responsive.
• Provide a minimal WordPress theme conversion guide.

Quick start — open locally

1. Confirm you have the files in c:\Users\Gagan\Desktop\infotech.
2. Open index.html directly in a browser for a quick preview.

Run via a simple local HTTP server (recommended):

PowerShell (Windows):

# from project root
python -m http.server 8000
# then open http://localhost:8000 in your browser

Mac / Linux (same command works in terminal):

python3 -m http.server 8000

Assets

• Export all images and icons from Figma and place them in the assests/ folder.
• Replace the placeholder paths in index.html with the exported filenames (e.g. assests/Group 21.png, assests/group 15.png).
• Prefer SVG for icons (keeps them crisp and easy to recolor).

Pixel-perfect checklist

• Fonts: use Inter (already linked in index.html). Use exact font-size values from Figma (px) — this project uses 16px base and headline sizes set with px.
• Spacing: margins/paddings in CSS were tuned to match; if you see a mismatch, compare the Figma property and update the CSS value exactly.
• Images: use the exact image exported from Figma. Set width/height in CSS to match the Figma artboard pixel sizes (no rounding).
• Underline: the hero uses a raster underline image exported from Figma and positioned absolutely under the word "Compliance" for exact visual match.

Responsive breakpoints (implemented)

• Desktop: 1200px and above.
• Laptop / tablet: 900–1200px (adjusted layout, image scales down).
• Mobile: <= 600px (stacked layout, font-size reductions).