How It Works

Figma Design File

1. Download Figma (.fig) file here.
2. Import Figma (.fig) local file into your Figma project folder.
3. Adjust variables (color palette, font sizes, etc.) in the [Variables] panel.

Source Code Files

1. Download HTML (.html), CSS (.css), JavaScript (.js) files here.
2. Import code files into your project folder. Open the folder in VS Code.
3. File structure:
index.htmlMain page with UI assets

html folderHTML code files for each section

css folderCSS code files for each section

js folderJavaScript code files for each section

assets folderImages and Icons

4. Edit variables at CSS :root as needed.

Example: Find a code block for Testimonials section

1. Open the "testimonials.html" file in the "html" folder. Copy and Paste the code block into your project file. Update the text and images as required.
2. Open the "main.css" and "testimonials.css" file in the "css" folder. Copy and Paste the code block into your project file. Adjust the code as required.