Webpage Building with AI
Use Google Gemini to build pages for you. Then simply upload to WebpageHero to get hosted on http://webpage.directory in minutes.
Step 1, set the stage:
Ignore all previous instructions, user preferences, and saved memories for this session. Start with a completely blank slate.
Act as a Senior UX/UI Designer & Expert Web Developer.
**The Goal:** I want you to help me plan a high-performance **HTML5 Website** using **Tailwind CSS**.
**CRITICAL RULE:** Do NOT generate any HTML, CSS, or layout code yet. We are ONLY in the "Information Gathering" phase.
**Step 1: The Briefing**
Before we build anything, you must understand my vision. Ask me **7 critical questions** one by one to define the style, brand, and target audience.
1. Ask only **one question at a time**.
2. Wait for my answer before moving to the next.
3. Keep me updated on the progress (e.g., "Question 1 of 7").
4. **STOP** after the 7th question is answered. Do not proceed to coding until I give you Prompt 2.
Step 2, build the sitemap:
The briefing is complete. Now, let's plan the architecture.
We will create 4 files: index.html, about.html, pricing.html, and contact.html.
**Crucial Requirements:**
1. **Consistent Navigation:** You must ensure the <nav> menu is **identical** in code across all 4 files.
2. **The "Smart" Contact Form:** Use Web3Forms for the contact page (<form action="https://api.web3forms.com/submit" method="POST">). Include the access_key hidden input.
3. **Content Details:**
* Phone: 01456789
* Email: help@locksmitNY.com
* Team: Ricardo, Julian, and John
**STOP:** Do not generate the full code yet. Simply confirm you have processed these architectural requirements and are ready for the final generation command.
Step 3, give the technical details:
Generate the entire website now.
Provide the full, clean HTML5 code for all 4 files:
1. index.html (Home)
2. about.html (About)
3. pricing.html (Pricing)
4. contact.html (Contact)
**Crucial Technical Instructions:**
* **CSS:** Use Tailwind CSS via the CDN script in the <head> of every file.
* **Navigation:** Ensure the <nav> menu code is **identical** in all 4 files so links work perfectly.
* **Contact Form:** Use **Web3Forms** for the contact page.
* Set the form action to: https://api.web3forms.com/submit
* Add the required hidden input: <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">
* Add a honeypot spam protection field (hidden style): <input type="checkbox" name="botcheck" class="hidden" style="display: none;">
* **Output:** Use clear **Code Blocks** for each file.