A 5-page marketing website for Genomics Luxury Homes, a real estate business operating across Lagos, Abuja, Ibadan, Osogbo, Benue, Ondo, and Port-Harcourt, Nigeria.
Built with plain HTML, CSS, and JavaScript — no build tools, frameworks, or install steps required.
- Unzip the folder.
- Double-click
index.htmlto open the site in your browser.
That's it — every page works locally, no server required. To view it at a proper local address (recommended for testing the map and forms), you can also run a simple local server:
cd glh
python3 -m http.server 8000Then visit http://localhost:8000 in your browser.
glh/
├── index.html Home page
├── about.html About page
├── services.html Services page
├── listings.html Property listings page
├── contact.html Contact page
├── css/
│ └── style.css All site styling (shared across pages)
├── js/
│ └── script.js All site interactivity (shared across pages)
├── images/
│ └── logo.png Your business logo
└── README.md This file
Each HTML page is self-contained and links to the shared css/style.css and js/script.js files, so any style or script change updates every page at once.
| Page | Purpose |
|---|---|
Home (index.html) |
Hero with headline + CTA, trust strip, 3 key benefits, services preview, testimonials, about preview, final CTA |
About (about.html) |
Company story, mission, what makes the business different, timeline, stats, CTA |
Services (services.html) |
Full service grid (6 services), how-it-works process, FAQ accordion, CTA |
Listings (listings.html) |
Filterable property grid (by city or land-only) with sample houses and land |
Contact (contact.html) |
Contact form, business contact details, embedded map, social links |
- Colors — warm stone background, deep venetian red and brass gold drawn from the logo, near-black charcoal for dark sections.
- Typography — Fraunces (serif) for headlines, Manrope (sans-serif) for body text, Space Mono for labels and data.
- Signature element — a diamond "cut corner" notch used on cards, image frames, and buttons, echoing the diamond house shape in the logo.
- Responsive — the layout adapts down to mobile screens, including a slide-out mobile navigation menu.
- Sticky header with active-page highlighting and a mobile hamburger menu
- Scroll-triggered reveal animations (respects "reduce motion" accessibility settings)
- Working FAQ accordion on the Services page
- Working city/land filter on the Listings page
- Contact form with client-side validation and a success message
- SEO-ready: unique meta titles/descriptions per page, semantic HTML, descriptive image alt text
- Embedded Google Map on the Contact page
- Social links (Instagram, Facebook, WhatsApp, LinkedIn) in the header and footer
The site is fully designed and functional, but a few placeholder details need to be replaced with your real information before going live:
- Contact details — replace the placeholder phone number (
+234 800 000 0000), email (hello@genomicsluxuryhomes.com), and office address across all 5 pages. - Contact form submission — the form currently validates input and shows a success message, but does not send data anywhere yet. Connect it to an email service such as Formspree or Web3Forms, or to your own backend, so submissions reach your inbox.
- Social media links — update the placeholder Instagram/Facebook/LinkedIn/WhatsApp URLs to your real accounts.
- Property listings — swap the sample listings and photos on the Listings page for your actual available properties.
- Testimonials — replace the sample client quotes with real reviews once available.
- Map location — update the embedded map on the Contact page to your exact office address.
- Domain & hosting — the site is ready to upload to any static hosting provider (e.g. Netlify, Vercel, GitHub Pages, or standard cPanel hosting).
- To change colors, fonts, or spacing: edit the design tokens at the top of
css/style.css(the:rootsection) — most values cascade from there. - To add a new listing: copy an existing
<article class="listing-card">block inlistings.htmland update its image, price, location, and specs. - To add a new FAQ: copy an existing
.faq-itemblock inservices.html. - To update navigation links: the header and footer markup is repeated at the top and bottom of each HTML file — update all 5 files when changing a link site-wide.
- Images: Unsplash (free to use)
- Fonts: Google Fonts — Fraunces, Manrope, Space Mono