Editing the site — Findit HTML

Open it

Double-click index.html — the site opens in your browser and every link works, straight from the folder. To see it exactly as a host serves it (and to test the forms), run a small local server from the folder:

npx serve .

Then edit the files in a code editor and reload the browser to see the change.

What is where

index.html, about.html, property.html, agent.html, blog.html, contact.html, add-property.html
404.html                 shown for addresses that don't exist
style-guide.html         every component with its name (noindex; delete it if you don't want it)
property/*.html          one page per property
agent/*.html             one page per agent
blog/*.html              one page per post
legal/*.html             Terms of Service and Privacy Policy
filter/type/*.html       the Properties page for "for sale" and "for rent"
filter/location/*.html   … for one location
filter/property-category/*.html   … for one category
success/*.html           the two "thank you" pages (noindex)
assets/css/style.css     the stylesheet (generated — see design.md)
assets/js/main.js        the site's scripts (don't edit)
assets/js/config.js      your settings: form endpoint
assets/images/           photos and the logo
assets/icons/            interface icons
assets/fonts/            Manrope
icon.svg, apple-icon.png, opengraph-image.png
sitemap.xml, robots.txt
src/css/style.css        the stylesheet's source: colours, breakpoints, fonts

Text

Find the words on the page and change them in the HTML. Keep the tags and classes around them — they carry the layout. A heading looks like this:

<h1 class="text-[34px] md:text-[42px] lg:text-[54px] leading-[1.2] font-medium">Your headline</h1>

Change Your headline, leave the class.

Some words appear twice on purpose: buttons animate by sliding a second copy into view (<span>Contact us</span><span aria-hidden="true">Contact us</span>). Change both.

Text that repeats on every page

The header, footer, contact details and the site’s name are copied into every page. Change them once for all files with your editor’s Find in Files / Replace in Files (VS Code: Ctrl/Cmd + Shift + H):

Replace	With
`https://findit-html-marcframe.vercel.app`	your domain, e.g. `https://www.yourrealty.com` (canonical links, share cards, `sitemap.xml`, `robots.txt`)
`info@example.com`	your email (in `mailto:` links and as text)
`(123) 456-7890` and `tel:1234567890`	your phone, as shown and as dialled
`(987) 654-3210` and `tel:9876543210`	your second phone, or remove the line
`123 Main Street, Suite 456, Cityville, ST 78901`	your address
`https://facebook.com`, `https://instagram.com`, `https://youtube.com`	your social profiles
`\| Findit` in `<title>` and share tags	`\| Your Agency`

Include the .html, .xml and .txt files. Review each change before replacing all — “Findit” also appears in text you may want to rewrite rather than replace (the copyright line, the About page, the legal texts).

Page titles and descriptions

Each page’s <head> holds what search engines and share cards show:

<title>About us | Findit</title>
<meta name="description" content="…" />
<link rel="canonical" href="https://yourdomain.com/about.html" />
<meta property="og:title" content="About us | Findit" />
<meta property="og:description" content="…" />
<meta property="og:url" content="https://yourdomain.com/about.html" />
<meta property="og:image" content="https://yourdomain.com/opengraph-image.png" />
<meta name="twitter:title" content="About us | Findit" />
<meta name="twitter:description" content="…" />
<meta name="twitter:image" content="https://yourdomain.com/opengraph-image.png" />

Keep the title, the og: and the twitter: versions the same, and the canonical and og:url equal to the page’s own address. A description of 80–160 characters shows in full in search results; a title of up to 60 characters too (drop the | Findit suffix when a title is longer). Property, agent and post pages use their own photo as og:image and twitter:image: https://yourdomain.com/assets/images/<file>.

Images

assets/images/ holds every photo. The easiest change: replace a file with yours under the same name and the same proportions — every page that shows it updates. The download ships with grey placeholders that state the size each image was designed for (for example 1024 × 644).

To use a new file instead, change the src: <img src="assets/images/my-photo.jpg" …>. In pages inside a folder (property/…, blog/…) the path starts with ../: src="../assets/images/my-photo.jpg"; in filter/… pages it starts with ../../.

Use .jpg for photos (around 1400 px wide for property and post photos, 1200 px for cards, 800 px for portraits) and keep files small — compress them with Squoosh or TinyPNG. Write an alt text for images that carry meaning; leave alt="" for decorative ones.

The video on the home page

In index.html, find <video and change its src to your own file (put an MP4 in assets/ and use src="assets/tour.mp4") or to another link, and poster to the picture shown before it plays. The demo plays a clip from Pexels; nothing is downloaded until a visitor presses play. To remove the video, delete the whole <button data-hero-video …> element that contains it.

Links

Pages link to each other as about.html, property.html, property/<slug>.html; from inside a folder, add ../ (../contact.html; ../../contact.html in filter/…). Keep the .html — it’s what lets the site work from any host and from disk.

Adding a property

A property is a page plus a card wherever it should be listed. The card is the same block copied into several files, so this takes a few minutes — for listings that change every week, see Editing without touching HTML.

The page. Copy an existing one, e.g. property/balcony-apartment.html → property/harbor-view-loft.html. Use lower-case words joined by - for the file name; it becomes the address. Edit the title, address, price, details, utilities, description, photos, the agent’s card and the <head> (title, description, canonical, og:url and og:image / twitter:image). Keep the reference and the name in the tour form up to date: they are the value of its two pre-filled fields (name="propertyId" and name="propertyName").
The cards. Copy the card of any property, paste it after the last one, and change its link, photo, name, price and details in each list that should show it:
- property.html — the full list;
- filter/type/sell.html or rent.html — the type it is for;
- filter/location/<location>.html and filter/property-category/<category>.html — its location and category;
- agent/<agent>.html — its agent’s page;
- index.html and agent.html — the tabs of “Latest properties” (each card carries data-tab-item with its category; the tab shows six at a time).
Elsewhere. The home page’s Featured section shows five properties; the “More” and “Related” blocks at the end of a property page show two from the same location and up to four from the same category. Update them if the new property should appear there.

The sitemap. Add a line to sitemap.xml:

<url><loc>https://yourdomain.com/property/harbor-view-loft.html</loc></url>

To remove a property, do the reverse: delete the page, its cards, any link to it, and its line in sitemap.xml. Search the folder for the file name to catch any link left behind.

A filter page without a single card (like the fallback “No Location” and “Uncategory” pages) should stay noindex and out of sitemap.xml, as it is in the download; once you list a property there, remove its <meta name="robots"> line and add it to the sitemap.

Adding an agent, a post or a location

Agent: copy agent/steve-parker.html, edit the text, photo, phone numbers and the property cards it lists, then add a card to agent.html, the agent card on each of their property pages, and a line to sitemap.xml.
Post: copy a page in blog/, edit it, then copy the last card in blog.html, update the “More” block of related posts if you like, and add a line to sitemap.xml. The home page shows the first three posts.
Location or category: copy a page in filter/location/ or filter/property-category/, change the title, description, canonical, og:url, its heading and the cards it lists; add the chip to the filter panel in property.html and in every filter page, and a radio button to the location or category question in add-property.html; add the line to sitemap.xml.

Adding a page

Copy add-property.html or contact.html — their menus mark no item as the current page, which is what a new page needs — and rename it, e.g. pricing.html.
Replace the sections inside <main> with the ones you want. Every section in the template is a block you can copy from its page (or from style-guide.html) and paste between <main> and </main>.
Update the <head> (title, description, canonical, og:url).
Link to it: add the link to the header menu and/or the footer — in every page (find and replace in files helps) — and add it to sitemap.xml.

Removing a page

Delete the file, remove its links from the header and footer of every page, and its line from sitemap.xml. Search the folder for the file name to catch any link left behind.

The style guide

style-guide.html shows every component with its name — handy for copying a button or a card. It’s hidden from search engines. Delete it before publishing if you don’t want it online.