North & Main Realty
A guide to making it yours.

5-Minute Setup

1. Extract north-and-main-realty.zip, keep an untouched backup, and open the extracted folder in a plain-text code editor.
2. Open index.html in a browser for a basic preview. No npm installation, build command, database, or framework setup is required.
3. Update the business name, contact details, hours, story, neighborhood profiles, testimonials, and policy wording in index.html.
4. Edit the six sample listings in assets/js/properties.js. Replace illustrative photographs with accurate, authorized images before promoting real properties.
5. Connect a real inquiry workflow before accepting leads. The supplied form validates entries but does not deliver or store them. See Inquiry Form and Lead Delivery.
6. Test the local page, then upload index.html and the complete assets/ folder together to the chosen hosting directory. Test the public HTTPS page before launch.

Package Contents

The updated package contains 26 files: the original 25 website files plus this README. No original website file was changed to add the documentation. This guide uses embedded CSS and system fonts, so it can be read independently without an internet connection.

Template Features

• Dark charcoal and bronze design with a full-width architectural hero and responsive navigation.
• Six sample properties, property-type and price filters, a result count, and a reset/empty state.
• Property-detail modals with descriptions, specifications, features, and inquiry buttons.
• Buyer and seller guidance, four service values, three neighborhood profiles, and three sample testimonials.
• A Featured Home drawn from the same property data as the cards and modals.
• About section, inquiry form, office contact card, eight FAQ answers, and Privacy Policy and Terms modals.
• Local fonts and assets, visible focus styles, a skip link, reduced-motion support, and an automatically updated footer year.

Technology Used

Preserve script order in index.html: Bootstrap bundle, properties.js, then main.js. All three use defer, so they execute in that order after HTML parsing.

Editing the Template

Open the entire extracted project folder in a plain-text code editor and save changes as UTF-8. Search for the filenames, IDs, classes, or exact sample text shown in this guide. Some HTML and CSS are on compact lines; formatting a working copy can make them easier to edit.

Keep a backup before editing. Change source files, save, and reload your browser. Changes made only in browser developer tools are temporary. A basic file preview works for much of the page; use a local HTTP server or your hosted test URL if your browser restricts local SVG symbols or fonts, and always use HTTP/HTTPS when testing a connected form.

Use exact filename capitalization. Hosting file systems can distinguish property-modern-residence.webp from Property-Modern-Residence.webp.

1. Update Business Information

Open / search: index.html and assets/js/main.js → North & Main.

Search for both North & Main and the HTML form North & Main. Replace the name in the header, about section, contact card, footer, page title, meta description, policies, and email-draft subject.

<a href="tel:+13125550148">(312) 555-0148</a>
<a href="mailto:hello@northandmain.example">hello@northandmain.example</a>

The code above shows the supplied examples, not live business contacts. Replace the visible text and link destination together. Search the whole project for old details after editing.

2. Wordmark, Favicon, and Hero

Open / search: index.html → class="brand".

Update both the header and footer wordmarks. Preserve the header link’s accessible label and its #home destination. The current mark is live text; there is no logo image to replace. If you add a local image logo, supply meaningful alt text and explicit dimensions, then review .brand styling.

The favicon is assets/images/favicon.svg. Replace that file or update the rel="icon" link if the filename or format changes.

For the hero, search #home, .hero-copy, and .hero-actions. Edit “Find your place. Make your next move.” and its supporting text. The Explore Properties button links to #properties; the seller button uses data-inquiry="Selling" to preselect the form.

If you replace real-estate-hero.webp with a new filename, update both the image element and its preload link in the page head. See Image Replacement Guide for dimensions and cropping.

3. Colors and Layout

Open / search: assets/css/style.css → :root.

/* Current template palette */
:root {
  --ink: #171c1c;
  --deep: #111616;
  --panel: #1e2423;
  --line: #39413e;
  --cream: #f2eee5;
  --muted: #b9c0b8;
  --bronze: #c8a77c;
  --bs-body-bg: var(--ink);
  --bs-body-color: var(--cream);
  --bs-border-color: var(--line);
}

Adjust the main palette here. Some surfaces, buttons, borders, and status colors use direct values elsewhere; --panel is declared but does not control every panel. Review the complete stylesheet when changing the theme.

Update meta name="theme-color" in index.html to match. The page uses data-bs-theme="dark"; changing only that attribute will not create a finished light theme.

Use .section for the main vertical rhythm, .container for content width, and .btn-bronze / .btn-outline-cream for buttons. Responsive rules appear near the end of the file at 1199, 991, 767, and 380 pixels, plus a wide-screen rule at 1600 pixels. Later rules can override earlier ones.

Check: Inspect normal, hover, focus, selected, and error states. Preserve readable contrast, adequate line height, and comfortable button sizes.

4. Fonts and Typography

Open / search: assets/css/style.css → @font-face.

assets/fonts/manrope.ttf supplies the Manrope family with declared weights 200–800. assets/fonts/cormorant-garamond.ttf supplies the CSS family alias Cormorant with declared weights 300–700.

Body text uses Manrope; headings use Cormorant with Georgia and serif fallbacks. The wordmark also uses Cormorant. To change fonts, add licensed local files, update the @font-face rules and consuming selectors, and update or remove the Cormorant preload in index.html. Use the format matching your replacement file.

Keep font-display: swap and suitable fallback fonts. Retain the font license notices in assets/fonts/ and LICENSES.txt. The README itself uses system fonts and does not depend on these assets.

5. Add, Edit, or Remove Properties

Open / search: assets/js/properties.js → window.NM_PROPERTIES.

This JavaScript array is the single source for property cards, detail modals, and the Featured Home. It is a .js file, not a separate JSON service. The page loads it before main.js.

// One entry inside window.NM_PROPERTIES; retain the surrounding array.
{
  "id": "modern-residence",          // Unique ID used by detail buttons
  "name": "The Oakline Residence",  // Display name and inquiry selection
  "area": "Westhaven",              // Location label
  "type": "House",                  // House, Townhome, or Condo
  "price": 1285000,                  // Number, no currency sign or commas
  "beds": 4,
  "baths": 3.5,
  "sqft": 3240,
  "image": "property-modern-residence.webp", // Filename only
  "alt": "Contemporary limestone and glass residence with landscaped grounds",
  "description": "Clean architectural lines meet comfortable everyday living. Generous glazing brings the garden into view, while connected living spaces open to a sheltered outdoor terrace.",
  "features": [
    "Open living and dining spaces",
    "Garden-facing primary suite",
    "Covered outdoor entertaining",
    "Two-car garage"
  ]
}

Editing an existing listing

Change its values, retain valid JavaScript syntax, and reload the page. Text is escaped by the rendering code, so use plain text rather than HTML markup in descriptions or features.

Adding a listing

1. Duplicate one complete object inside the array, separating objects with commas.
2. Give it a unique ID and fill in every field.
3. Add its WebP photograph to assets/images/.
4. Check its card, filters, detail modal, and inquiry selection.

Removing a listing

Delete its whole object and keep the array syntax valid. Leave at least one listing if you want a Featured Home. Removing the first object changes which property is featured. Remove an unused image only after checking every reference.

Listing order follows array order. There is no sorting control, pagination, saved-property state, or live availability status. To change currency or area units, update the money and specs helpers in main.js, the data, and the filter labels together.

6. Property Filters and Featured Home

Open / search: index.html and assets/js/main.js → #propertyType, #priceRange, renderProperties().

To add a property type, add the corresponding option to #propertyType in index.html and use the same value in the data. The existing exact-match logic supports additional type values. To add or change a price bracket, change its option value/label in #priceRange and its numeric condition inside renderProperties() in main.js.

Choose the Featured Home

const featured = listings[0];

The first entry in window.NM_PROPERTIES is featured. It is currently The Oakline Residence. Move a different object to the start of the array to feature it. The feature uses the same image, price, specifications, and description as the corresponding listing. It does not change when visitors adjust filters.

For a code-based selection independent of array order, replace the line above with a lookup using an existing unique ID, for example:

const featured = listings.find(p => p.id === 'brick-townhome') || listings[0];

This is an optional customization example; it is not a change already made to the template. Check both feature buttons after any edit.

7. Property Details and Inquiry Buttons

Open / search: assets/js/main.js → #propertyModalBody.

View Property buttons populate the Bootstrap modal from the selected listing. The modal uses #propertyModal, #propertyModalBody, and the generated heading #propertyModalTitle. To alter the modal’s layout or labels, edit its template string in main.js, not the empty container in index.html.

Property triggers use data-property with a listing ID. Inquiry triggers use data-inquiry with an exact form option value and can carry data-interest with a property or neighborhood name.

<button type="button" data-inquiry="Buying">
  Start Your Home Search
</button>
<button type="button" data-inquiry="General Question" data-interest="Riverwalk">
  Ask About This Area
</button>

beginInquiry() selects the inquiry type, replaces the optional interest field, scrolls to #inquiry, and focuses the inquiry-type control. Generic buyer/seller buttons clear an earlier property selection; other typed fields are retained. From a property modal, the page waits for the modal to close before moving focus to the form.

Escape closes the modal. Closing without starting an inquiry restores focus to the opening button. Preserve the close button, accessible title, and Bootstrap bundle when editing. No button confirms a showing or sends a lead by itself.

8. Image Replacement Guide

Replace without renaming

1. Export an actual optimized WebP image. Renaming a JPEG extension to .webp does not convert it.
2. Use the same filename and place it in assets/images/.
3. Update its alt text to describe the replacement. Property alt text is in properties.js; other photo alt text is in index.html.
4. Check the hero, cards, modal, and mobile crops. Clear cached images if an old photo remains.

Replace with a new filename

For a property, change its image field in properties.js. For the hero, neighborhood, and office images, update the corresponding src in index.html. The hero filename also appears in a preload link. Use local relative paths and preserve capitalization.

Size, crop, and image quality

Use landscape images around 1536 × 1024 (3:2) for listings, neighborhoods, and the office, and approximately 16:9 for the hero. Inspect the file after compression; a WebP quality setting around 80–85 is a starting point, not a quality guarantee.

The supplied HTML and generated listing markup include explicit dimensions. If replacement dimensions differ, update them in index.html or in the card, modal, and feature image markup in main.js. Display crops are controlled by .hero-image, .property-photo, .area-card, .featured-home, .about-image, and modal image rules. Adjust object-position when the subject needs repositioning.

Keep the hero preload and fetchpriority="high"; retain loading="lazy" for below-the-fold photos. If a different aspect ratio is essential, update both layout rules and dimensions rather than stretching the image.

9. Neighborhoods, About, and Testimonials

Open / search: index.html → #neighborhoods, #about, .stories.

The three neighborhood profiles—Town Center, Riverwalk, and Westhaven—are illustrative. Edit their headings, descriptions, photographs, alt text, and data-interest button values together. These cards are written separately from each property’s area field; changing one does not update the other.

In #about, replace the sample business story and office image as appropriate. Edit the buyer/seller panels in #approach and the four values in .difference to describe your actual services.

The quotes attributed to Alex & Jordan, Morgan T., and Casey & Drew are sample testimonials. Replace them with genuine feedback you have permission to use, or remove the section. No verified review feed or third-party star rating is included.

Keep service claims, locations, and property descriptions accurate. Do not turn the sample quotes into rating metadata or add unsupported professional credentials.

10. Inquiry Form and Lead Delivery

Open / search: index.html: #inquiryForm; assets/js/main.js → form.addEventListener('submit'.

Current validation and fallback

The handler prevents normal form submission, validates fields, marks invalid controls, and focuses the first invalid field. A valid attempt displays #formStatus and builds a mailto: draft with the entered details. The visitor must open the email application, review the draft, and explicitly send it; the page itself sends nothing. No lead database or browser storage is used.

Replace every sample email address and phone number in both HTML and JavaScript before relying on the fallback. Opening the draft with the supplied .example address will not reach a business.

Connecting a delivery service

1. Choose and configure a server-side endpoint or form service capable of receiving the fields above and delivering inquiries to the correct business contact.
2. In main.js, find the submit handler and its comment beginning Connect a server endpoint here. Replace the current valid-submission/demo-status branch with the integration required by your service. Do not merely add an action attribute: the existing handler prevents native submission.
3. Validate inputs again on the server, apply sensible length limits and spam protection, and keep email credentials or private API keys on the server.
4. Handle sending, accepted, and failed states honestly. Show success only after the service confirms acceptance. Keep entered data available when a request fails and avoid duplicate sends.
5. Update the form’s privacy statement, the Privacy Policy, Terms, demo footer notice, and the final FAQ answer to describe the actual processing and retention behavior.
6. Test a real accepted inquiry, invalid input, and a failed response. Confirm actual receipt. Test over HTTPS and configure cross-origin requests only if the service requires them.

No specific response schema is built in. Match the frontend to your chosen endpoint rather than assuming it returns {"success":true}. A delivered inquiry is not a confirmed viewing, appointment, purchase, or sale.

If you remove the form, update dependent JavaScript and all inquiry buttons at the same time; otherwise their required selectors can fail.

11. Address, Hours, and Directions

Open / search: index.html → #contact and .site-footer.

Replace the office address and keep the hours consistent in the contact card and footer. The sample hours are Monday–Friday 9am–6pm, Saturday 10am–3pm, and Sunday by appointment. The page does not calculate whether the office is currently open.

The directions button is a Google Maps search URL with a separately encoded address. Changing the visible address does not change that query. It does not require an API key or an embedded map.

<!-- Current sample destination: replace it with your actual address. -->
<a href="https://www.google.com/maps/search/?api=1&amp;query=120%20North%20Main%20Street%20Suite%20200%20Chicago%20IL%2060601"
   target="_blank" rel="noopener noreferrer">
  Get Directions
</a>

URL-encode spaces and punctuation in the address, and write & for the separator inside an HTML attribute. Test the resulting map location yourself; a search URL does not verify an address. Preserve the new-tab announcement and rel="noopener noreferrer" when using a new tab.

Check every tel: and mailto: link, including the JavaScript fallback. No social links are supplied. Add only real profiles with meaningful labels if you choose to add them.

12. Navigation and Section Links

Open / search: index.html → #mainNav.

When renaming an ID, update every header, footer, and call-to-action link that points to it. Keep IDs unique. The site’s sticky-header offset is set by html { scroll-padding-top:95px; } in style.css; review it if the header height changes.

The mobile button controls #mainNav using Bootstrap collapse. Keep its data-bs-target, aria-controls, and navigation ID synchronized. Custom JavaScript closes the open mobile menu after a navigation link is selected.

For additional inquiry buttons, use the attributes described in Property Details and Inquiry Buttons. A generic href="#inquiry" scrolls to the form but does not select an inquiry type.

13. Frequently Asked Questions

Open / search: index.html → #faqAccordion.

There are eight question panels, #faq0 through #faq7. Edit the question text inside each .accordion-button and its matching .accordion-body.

To add a question, duplicate an entire .accordion-item, give the panel a unique ID, and match the button’s data-bs-target and aria-controls to it. Keep data-bs-parent="#faqAccordion" if only one answer should be open at a time.

The supplied answers explain demo listings, illustrative service areas, unconfirmed viewing requests, and the disconnected form. Revise them when those conditions change. Test each panel with keyboard and pointer input after editing.

14. Privacy Policy and Terms

Open / search: index.html → #privacyModal and #termsModal.

Both footer links and the form’s Privacy Policy link open Bootstrap modals. The title IDs are #privacyTitle and #termsTitle. The supplied sample wording is dated September 27, 2026.

Replace the sample wording and contact address with policies appropriate to the actual business. The current Privacy Policy describes a static demo without a lead database, analytics, advertising pixels, or nonessential cookies. The Terms describe illustrative listings and the absence of real brokerage services through the demo.

Update these descriptions if you add lead processing, analytics, external services, or other functionality. Keep policy wording consistent with the form’s actual behavior and with the FAQ. This guide does not establish legal terms for your business.

Preserve modal IDs, title references, close buttons, and trigger targets. Bootstrap supplies the focus containment and Escape behavior; retain its bundle.

15. SEO and Page Metadata

Open / search: index.html → <head>.

<title>North &amp; Main Realty | A Thoughtful Way Home</title>
<meta name="description" content="Explore distinctive sample homes and a thoughtful approach to buying and selling with North &amp; Main Realty. Premium real estate website demonstration.">
<meta name="theme-color" content="#171c1c">

Replace the page title and description with accurate wording for the real business. They are independent of the visible hero heading. Keep one clear primary heading, useful section headings, descriptive image alt text, and consistent public contact information.

Do not publish fictional listings or sample testimonials as real structured data. The README includes noindex, follow metadata, which discourages indexing but does not restrict access. Omit it from the public upload if the guide should remain private. No search-ranking guarantee is made.

16. Performance and Cache Busting

Open / search: index.html → assets/css/style.css.

Bootstrap, fonts, images, and JavaScript are local. Preserve the hero preload, high hero fetch priority, explicit dimensions, lazy-loaded lower images, and font-display behavior. Review replacement image size and clarity before uploading.

The current CSS and JavaScript URLs have no version suffix. After a change, you can add or increment a query-string version in index.html:

<link rel="stylesheet" href="assets/css/style.css?v=1.0.1">
<script src="assets/vendor/bootstrap/bootstrap.bundle.min.js" defer></script>
<script src="assets/js/properties.js?v=1.0.1" defer></script>
<script src="assets/js/main.js?v=1.0.1" defer></script>

This is an optional example; these version suffixes have not been added to the website. Version properties.js when listing data changes. For a renamed hero image, update its preload as well as its image element. Property image filenames can also be changed in the data to request a fresh asset.

Clear enabled hosting/CDN caches and hard-refresh when verifying an upload. Use the browser network panel to check for missing files. No service worker, custom offline cache, or automated image pipeline is supplied.

17. Responsive and Accessibility Checks

The supplied site was checked in Chromium at widths of 320, 390, 768, and 1440 pixels. Check your customized version again, including tablet portrait/landscape and the browsers your visitors use.

• Check headings, prices, long names, addresses, and button labels for wrapping and overlap.
• Verify there is no page-level horizontal scrolling at phone widths.
• Open and close the mobile menu, follow section links, and test all filter combinations and the empty state.
• Use Tab and Shift+Tab to navigate. Keep the skip link and visible focus indicators.
• Open each modal, check focus stays inside it, press Escape, and confirm focus returns to the correct trigger.
• Check buyer, seller, neighborhood, and property preselection; review required fields and form-error focus.
• Retain descriptive alt text, labels, error descriptions, unique IDs, and modal titles.
• Test text enlargement or browser zoom at 200%, contrast after color changes, and reduced-motion preferences.
• Check real lead delivery and failure handling after connecting a backend.

These features and checks support accessibility; they do not constitute formal accessibility certification or a guarantee for every browser/device.

18. Adding or Removing Content

Static sections: Edit index.html. Update navigation and CTA targets when a section is removed or renamed. Keep heading order sensible and IDs unique.

Properties: Add or remove data objects in properties.js; do not manually duplicate the generated card markup in HTML. The Featured Home is also generated by main.js.

Required JavaScript hooks: The current script expects the filters, result grid/count, empty-state controls, property modal/body, Featured Home container, navigation, inquiry form and fields, form-status element, and footer-year span to exist. Removing only their HTML can stop later behavior. Update the related selectors and event handlers, or add suitable guards, as part of the same change.

Decorative icons: The four difference-section graphics use symbols in assets/images/icons.svg: compass, message, home, and key. There is no separate icon font. Preserve the symbol reference in each <use> element and keep decorative graphics hidden from assistive technology.

Demo notices: Keep notices where content remains illustrative. When the entire website is adapted for a real business, update the corresponding notices in both index.html and generated HTML strings in main.js, together with the FAQ and policies.

19. Hostinger / Shared Hosting Deployment

1. Back up the current site. Identify the correct document root for the domain or subdomain. It is commonly public_html; use the actual configured folder.
2. Upload through File Manager. Upload the ZIP to the chosen folder and extract it, or extract locally and upload the project contents.
3. Choose the correct folder level. For a domain homepage, place index.html and assets/ directly in the document root. Extracting the ZIP may create an extra north-and-main-realty/ folder; move its contents up one level if that is not the intended URL.
4. For a subfolder, keep the project together. A suggested location is public_html/demos/landing-pages/north-and-main-realty/. Keep index.html and assets/ beside each other there. The template uses relative paths.
5. Preserve licenses. Keep LICENSES.txt and the included component/font notices with distributed copies. README.html is buyer documentation and can be omitted from the public upload. Keep a private copy.
6. Resolve competing homepages deliberately. An existing index.php or other default document may take precedence. Do not delete unrelated files to fix this.
7. Open the exact HTTPS URL. Confirm images, fonts, navigation, filters, modals, and FAQs load. Refresh browser/hosting caches after an update.
8. Deploy the inquiry integration separately. Uploading static files does not enable lead delivery. Test the configured service and confirm receipt before launch.

No npm installation or build command is needed. If you publish README.html alongside the page, its View Template link will open index.html in the same directory. If you open the standalone README somewhere else, first place it alongside the extracted template to use that link.

20. Before-Launch Checklist

• Replace the sample business name, address, phone, email, and directions query everywhere.
• Verify office hours, service areas, business claims, and contact methods.
• Replace sample listings with authorized, accurate property data and current prices/specifications.
• Replace illustrative imagery for actual properties, neighborhoods, and office premises.
• Replace sample testimonials with approved genuine feedback, or remove them.
• Review the story, buyer/seller services, neighborhood cards, and Featured Home selection.
• Connect a real inquiry workflow, update privacy wording, and test actual delivery and failures.
• Update title, meta description, favicon, policy wording, and effective dates.
• Keep demo disclosures until the associated illustrative content has been replaced.
• Check every local asset path and all telephone, email, directions, and navigation links.
• Test filters, modals, FAQs, inquiry handoffs, keyboard focus, zoom, and responsive layouts.
• Check the deployed HTTPS page for missing assets and stale cache.
• Keep backups and applicable third-party license notices.

21. Troubleshooting

When asking your seller or developer for help, provide the template name, page URL, browser/device, a screenshot, changed filenames, and steps to reproduce the issue. Do not include hosting passwords or email credentials in page files or screenshots.

22. Licenses and Dependencies

LICENSES.txt contains Bootstrap 5.3.3 and Popper 2.11.8 MIT notices, plus SIL Open Font License notices for Manrope and Cormorant Garamond. Bootstrap’s LICENSE and the font OFL files are also retained beside their assets.

The favicon and interface symbols are original SVG graphics. The eleven photographs were generated for this demonstration and included as local WebP files. There are no remote stock-photo or font dependencies in the landing page.

Retain applicable notices when distributing the assets. Check rights and preserve license information for replacement images, logos, fonts, or other components you add.

The third-party notices do not establish a commercial purchase license for the complete template. Refer to the license supplied by your seller for permitted use, redistribution, resale, and any support terms. This guide grants no additional rights and makes no support, update, or warranty promises.