<!DOCTYPE html>

<head>

<title>Andrew Brown Sales | Powered by Brown Equity Group LLC</title>

<style>

/* =============================================

CSS VARIABLES — easy to customize colors/fonts

============================================= */

:root {

--bg: #0d0d0d;

--bg2: #141414;

--bg3: #1a1a1a;

--card: #1e1e1e;

--border: #2a2a2a;

--gold: #c9a84c;

--gold-light:#e2c47a;

--text: #e8e4dc;

--muted: #888;

--white: #ffffff;

--nav-h: 70px;

--font-head: 'Playfair Display', serif;

--font-body: 'Barlow', sans-serif;

}

/* =============================================

RESET & BASE

============================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {

background: var(--bg);

color: var(--text);

font-family: var(--font-body);

font-weight: 300;

line-height: 1.7;

min-height: 100vh;

}

a { color: inherit; text-decoration: none; }

img { display: block; max-width: 100%; }

/* =============================================

NAVIGATION

============================================= */

nav {

position: fixed;

top: 0; left: 0; right: 0;

height: var(--nav-h);

background: rgba(13,13,13,0.96);

backdrop-filter: blur(12px);

border-bottom: 1px solid var(--border);

display: flex;

align-items: center;

justify-content: space-between;

padding: 0 40px;

z-index: 1000;

}

.nav-logo {

font-family: var(--font-head);

font-size: 1.4rem;

font-weight: 700;

color: var(--gold);

letter-spacing: 0.04em;

}

.nav-logo span {

display: block;

font-family: var(--font-body);

font-size: 0.65rem;

font-weight: 400;

color: var(--muted);

letter-spacing: 0.12em;

text-transform: uppercase;

}

.nav-links {

display: flex;

gap: 36px;

list-style: none;

}

.nav-links li a {

font-size: 0.8rem;

font-weight: 500;

letter-spacing: 0.12em;

text-transform: uppercase;

color: var(--muted);

transition: color 0.25s;

cursor: pointer;

}

.nav-links li a:hover,

.nav-links li a.active { color: var(--gold); }

/* Hamburger (mobile) */

.hamburger {

display: none;

flex-direction: column;

gap: 5px;

cursor: pointer;

background: none;

border: none;

padding: 4px;

}

.hamburger span {

display: block;

width: 24px;

height: 2px;

background: var(--text);

transition: all 0.3s;

}

.mobile-menu {

display: none;

position: fixed;

top: var(--nav-h);

left: 0; right: 0;

background: rgba(13,13,13,0.98);

border-bottom: 1px solid var(--border);

padding: 24px 40px;

flex-direction: column;

gap: 20px;

z-index: 999;

}

.mobile-menu a {

font-size: 0.85rem;

letter-spacing: 0.12em;

text-transform: uppercase;

color: var(--muted);

cursor: pointer;

}

.mobile-menu a:hover { color: var(--gold); }

.mobile-menu.open { display: flex; }

/* =============================================

PAGES (tab system)

============================================= */

.page {

display: none;

min-height: 100vh;

padding-top: var(--nav-h);

}

.page.active { display: block; }

/* =============================================

HERO / HOME PAGE

============================================= */

.hero {

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

padding: 80px 24px 60px;

text-align: center;

}

.hero-title {

font-family: var(--font-head);

font-size: clamp(4rem, 12vw, 9rem);

font-weight: 900;

line-height: 1;

letter-spacing: -0.02em;

color: var(--white);

position: relative;

}

.hero-title span { color: var(--gold); }

/* ---- Photo Slideshow ---- */

.slideshow-wrap {

width: 100%;

max-width: 900px;

margin: 40px auto 0;

position: relative;

aspect-ratio: 16/9;

border-radius: 4px;

overflow: hidden;

border: 1px solid var(--border);

background: var(--bg3);

}

.slideshow-wrap .slide {

position: absolute;

inset: 0;

opacity: 0;

transition: opacity 1s ease;

display: flex;

align-items: center;

justify-content: center;

}

.slideshow-wrap .slide.active { opacity: 1; }

.slideshow-wrap .slide img {

width: 100%;

height: 100%;

object-fit: cover;

}

/* Placeholder slide (shows until real photos are added) */

.slide-placeholder {

width: 100%;

height: 100%;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

background: var(--bg3);

color: var(--muted);

font-size: 0.85rem;

letter-spacing: 0.1em;

text-transform: uppercase;

}

.slide-placeholder .icon { font-size: 2.5rem; margin-bottom: 12px; opacity: 0.3; }

.slide-dots {

display: flex;

gap: 8px;

margin-top: 14px;

justify-content: center;

}

.dot {

width: 7px; height: 7px;

border-radius: 50%;

background: var(--border);

cursor: pointer;

transition: background 0.3s;

}

.dot.active { background: var(--gold); }

/* ---- Quote ---- */

.hero-quote {

margin: 50px auto 0;

max-width: 620px;

padding: 0 24px;

font-size: 1.05rem;

font-style: italic;

color: var(--muted);

line-height: 1.8;

position: relative;

}

.hero-quote::before {

content: '\201C';

font-family: var(--font-head);

font-size: 4rem;

color: var(--gold);

opacity: 0.4;

position: absolute;

top: -20px;

left: 12px;

line-height: 1;

}

/* ---- CTA Buttons ---- */

.cta-section {

margin: 50px auto 0;

max-width: 700px;

padding: 0 24px;

display: flex;

flex-direction: column;

align-items: center;

gap: 16px;

}

.cta-row {

display: flex;

gap: 16px;

width: 100%;

}

.btn {

display: inline-flex;

align-items: center;

justify-content: center;

gap: 10px;

padding: 16px 28px;

font-family: var(--font-body);

font-size: 0.8rem;

font-weight: 600;

letter-spacing: 0.12em;

text-transform: uppercase;

border-radius: 3px;

cursor: pointer;

transition: all 0.25s;

border: none;

text-decoration: none;

}

.btn-primary {

background: var(--gold);

color: #000;

flex: 1;

}

.btn-primary:hover {

background: var(--gold-light);

transform: translateY(-2px);

}

.btn-outline {

background: transparent;

color: var(--gold);

border: 1px solid var(--gold);

width: 100%;

}

.btn-outline:hover {

background: var(--gold);

color: #000;

transform: translateY(-2px);

}

/* ---- Google Reviews ---- */

.reviews-section {

margin: 70px auto 0;

max-width: 1050px;

padding: 0 24px;

}

.section-label {

text-align: center;

font-size: 0.72rem;

letter-spacing: 0.2em;

text-transform: uppercase;

color: var(--gold);

margin-bottom: 10px;

}

.section-title {

text-align: center;

font-family: var(--font-head);

font-size: clamp(1.8rem, 4vw, 2.8rem);

font-weight: 700;

margin-bottom: 40px;

}

.reviews-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

gap: 20px;

}

.review-card {

background: var(--card);

border: 1px solid var(--border);

border-radius: 4px;

padding: 28px;

position: relative;

}

.stars { color: #fbbf24; font-size: 1rem; letter-spacing: 2px; margin-bottom: 14px; }

.review-text {

font-size: 0.92rem;

color: var(--text);

line-height: 1.8;

margin-bottom: 20px;

/* ---- EDIT REVIEWS HERE ---- */

}

.reviewer-name {

font-size: 0.78rem;

font-weight: 600;

letter-spacing: 0.08em;

text-transform: uppercase;

color: var(--gold);

}

.google-badge {

position: absolute;

top: 20px; right: 20px;

font-size: 0.65rem;

letter-spacing: 0.1em;

text-transform: uppercase;

color: var(--muted);

}

/* ---- Thousands Quote ---- */

.thousands-section {

margin: 80px auto;

text-align: center;

padding: 0 24px;

}

.thousands-text {

font-family: var(--font-head);

font-size: clamp(1.5rem, 4vw, 2.5rem);

font-weight: 700;

color: var(--gold);

}

/* =============================================

WHO I AM PAGE

============================================= */

.page-inner {

max-width: 800px;

margin: 0 auto;

padding: 80px 24px;

}

.page-inner .section-label { text-align: left; }

.page-inner .section-title { text-align: left; margin-bottom: 30px; }

.bio-text p {

font-size: 1.02rem;

color: #ccc;

line-height: 1.9;

margin-bottom: 20px;

}

/* ---- EDIT YOUR BIO BELOW inside the HTML ---- */

.divider {

border: none;

border-top: 1px solid var(--border);

margin: 50px 0;

}

.value-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

gap: 20px;

margin-top: 30px;

}

.value-card {

background: var(--card);

border: 1px solid var(--border);

border-radius: 4px;

padding: 24px;

text-align: center;

}

.value-icon { font-size: 1.8rem; margin-bottom: 10px; }

.value-title {

font-weight: 600;

font-size: 0.85rem;

letter-spacing: 0.1em;

text-transform: uppercase;

color: var(--gold);

}

/* =============================================

CLIENTS PAGE

============================================= */

.map-section {

max-width: 1000px;

margin: 0 auto;

padding: 60px 24px 40px;

}

.map-placeholder {

width: 100%;

aspect-ratio: 16/7;

background: var(--bg3);

border: 1px dashed var(--border);

border-radius: 4px;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

color: var(--muted);

font-size: 0.85rem;

letter-spacing: 0.1em;

text-transform: uppercase;

}

.map-placeholder .icon { font-size: 2.5rem; margin-bottom: 12px; opacity: 0.3; }

/* ---- Client Photo Grid ---- */

.photo-grid-section {

max-width: 1200px;

margin: 0 auto;

padding: 0 24px 80px;

}

.photo-grid {

display: grid;

grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));

gap: 8px;

margin-top: 30px;

}

.photo-grid-item {

aspect-ratio: 1;

background: var(--bg3);

border: 1px solid var(--border);

border-radius: 3px;

overflow: hidden;

position: relative;

}

.photo-grid-item img {

width: 100%; height: 100%;

object-fit: cover;

transition: transform 0.4s;

}

.photo-grid-item:hover img { transform: scale(1.06); }

/* Empty placeholders (remove once photos are added) */

.photo-ph {

width: 100%; height: 100%;

background: var(--bg3);

display: flex;

align-items: center;

justify-content: center;

color: var(--border);

font-size: 1.4rem;

}

/* =============================================

TESTIMONIALS PAGE

============================================= */

.testimonials-inner {

max-width: 900px;

margin: 0 auto;

padding: 60px 24px 80px;

}

.testimonial-list {

display: flex;

flex-direction: column;

gap: 20px;

margin-top: 30px;

}

.testimonial-item {

background: var(--card);

border: 1px solid var(--border);

border-radius: 4px;

padding: 28px 32px;

}

.testimonial-item .stars { margin-bottom: 10px; }

.testimonial-item .review-text { margin-bottom: 14px; }

.testimonial-item .reviewer-name { color: var(--gold); }

/* =============================================

CONTACT PAGE

============================================= */

.contact-inner {

max-width: 700px;

margin: 0 auto;

padding: 60px 24px 80px;

}

.contact-block {

background: var(--card);

border: 1px solid var(--border);

border-radius: 4px;

padding: 36px;

margin-bottom: 24px;

}

.contact-block h3 {

font-family: var(--font-head);

font-size: 1.2rem;

font-weight: 700;

color: var(--gold);

margin-bottom: 20px;

}

.contact-line {

display: flex;

align-items: flex-start;

gap: 14px;

margin-bottom: 14px;

font-size: 0.95rem;

}

.contact-icon { font-size: 1.1rem; min-width: 24px; color: var(--gold); margin-top: 2px; }

.appt-note {

font-size: 0.82rem;

color: var(--muted);

letter-spacing: 0.06em;

margin-top: 20px;

padding-top: 20px;

border-top: 1px solid var(--border);

text-transform: uppercase;

}

/* Appointment Form */

.appt-block {

background: var(--card);

border: 1px solid var(--border);

border-radius: 4px;

padding: 36px;

}

.appt-block h3 {

font-family: var(--font-head);

font-size: 1.2rem;

font-weight: 700;

color: var(--white);

margin-bottom: 6px;

}

.appt-block p {

font-size: 0.85rem;

color: var(--muted);

margin-bottom: 24px;

}

.form-group { margin-bottom: 16px; }

.form-group label {

display: block;

font-size: 0.72rem;

letter-spacing: 0.12em;

text-transform: uppercase;

color: var(--muted);

margin-bottom: 6px;

}

.form-group input,

.form-group textarea,

.form-group select {

width: 100%;

background: var(--bg3);

border: 1px solid var(--border);

border-radius: 3px;

padding: 12px 14px;

color: var(--text);

font-family: var(--font-body);

font-size: 0.9rem;

outline: none;

transition: border-color 0.25s;

}

.form-group input:focus,

.form-group textarea:focus,

.form-group select:focus { border-color: var(--gold); }

.form-group textarea { resize: vertical; min-height: 100px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.form-submit-msg {

display: none;

text-align: center;

padding: 20px;

color: var(--gold);

font-size: 0.95rem;

}

/* =============================================

FOOTER

============================================= */

footer {

border-top: 1px solid var(--border);

text-align: center;

padding: 30px 24px;

font-size: 0.75rem;

color: var(--muted);

letter-spacing: 0.08em;

}

footer a { color: var(--gold); }

/* =============================================

RESPONSIVE

============================================= */

@media (max-width: 680px) {

nav { padding: 0 20px; }

.nav-links { display: none; }

.hamburger { display: flex; }

.cta-row { flex-direction: column; }

.form-row { grid-template-columns: 1fr; }

.hero-title { font-size: clamp(3rem, 18vw, 5rem); }

}

</style>

</head>

<body>

<!-- =============================================

NAVIGATION

============================================= -->

<nav>

Andrew Brown Sales

<span>Powered by Brown Equity Group LLC</span>

</div>

<li><a onclick="showPage('clients')" id="nav-clients">Clients</a></li>

<li><a onclick="showPage('testimonials')" id="nav-testimonials">Testimonials</a></li>

<li><a onclick="showPage('contact')" id="nav-contact">Contact</a></li>

</ul>

</button>

</nav>

<a onclick="showPage('clients')">Clients</a>

<a onclick="showPage('testimonials')">Testimonials</a>

<a onclick="showPage('contact')">Contact</a>

</div>

<!-- =============================================

HOME PAGE

============================================= -->

<h1 class="hero-title"><span>AB</span> Sales</h1>

<!-- =============================================

SLIDESHOW

HOW TO ADD PHOTOS:

Replace each <div class="slide-placeholder">...</div> with:

============================================= -->

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<!-- =============================================

QUOTE — edit text between the <p> tags

============================================= -->

<p>A Christian man dedicated to integrity and making every customer satisfied.</p>

</div>

<!-- =============================================

CTA BUTTONS — links already set

============================================= -->

🚘 New Inventory

</a>

🔑 Used Inventory

</a>

</div>

💳 Apply for Financing

</a>

</div>

</div>

<!-- =============================================

GOOGLE REVIEWS

HOW TO EDIT: Replace the text inside each

.review-text <p> and .reviewer-name below

============================================= -->

<div class="section-label">Google Reviews</div>

<h2 class="section-title">What Clients Are Saying</h2>

<div class="google-badge">Google ★</div>

Bought two cars from Andrew! Great experience smooth and easy. Honest and straight forward

</p>

</div>

<div class="reviewer-name">— Stacy Esposito, Johnstown CO</div>

</div>

<div class="google-badge">Google ★</div>

Purchased a Bronco remotely from AZ. Andrew Brown gave me exemplary service, and was a master of detail. I would not hesitate to buy from him again.

</p>

</div>

<div class="reviewer-name">— Bob Wilson, Scottsdale AZ</div>

</div>

<div class="google-badge">Google ★</div>

Andrew made the process smooth and stress-free. He let me take the vehicle for a test drive and went above and beyond to make sure it met all my needs. He's incredibly friendly, helpful, and a pleasure to work with! Andrew communicated clearly every step of the way. I highly recommend working with him if you're looking to purchase a vehicle. :)

</p>

</div>

<div class="reviewer-name">— Bianca Molina, Center CO</div>

</div>

<p class="thousands-text">Thousands of Happy Clients</p>

</div>

 |  <a href="tel:7204489044">720-448-9044</a>

 |  <a href="mailto:[email protected]">[email protected]</a>

</footer>

</div>

<!-- =============================================

WHO I AM PAGE

============================================= -->

<div class="section-label">Andrew Brown</div>

<!-- =============================================

BIO — edit the paragraphs below

============================================= -->

<p>

With thousands of happy clients across the country, I've built my career on a simple principle: every customer deserves to be treated with honesty, respect, and genuine care. Client satisfaction isn't just a goal for me — it's a calling.

</p>

<p>

As a Christian man, I believe integrity is the foundation of every relationship, and that extends to every handshake and every deal I make. You'll never feel pressured or misled when you work with me. My word is my bond.

</p>

<p>

I specialize in helping families and individuals find the right vehicle for their life — new or used — and navigating the financing process so it feels simple and stress-free. Whether you're in Colorado or across the country, I'm here to serve you.

</p>

<p>

Based in Longmont, CO and operating out of Mike Maroone Ford, I'm proud to be a part of a community I love. I look forward to earning your trust and adding you to the AB Sales family.

</p>

</div>

<div class="section-label">My Values</div>

<div class="value-title">Faith-Driven</div>

</div>

<div class="value-title">Integrity First</div>

</div>

<div class="value-title">Client Satisfaction</div>

</div>

<div class="value-title">Nationwide Service</div>

</div>

</footer>

</div>

<!-- =============================================

CLIENTS PAGE

============================================= -->

<div class="section-label">Nationwide</div>

<h2 class="section-title" style="text-align:center;">Clients Across the USA</h2>

<!-- =============================================

MAP IMAGE

Replace the placeholder div with:

============================================= -->

USA Client Map — Add your map image here

</div>

<div class="section-label" style="text-align:center;">Happy Clients</div>

<h2 class="section-title" style="text-align:center;">The AB Sales Family</h2>

<!-- =============================================

CLIENT PHOTO GRID

HOW TO ADD PHOTOS:

Copy this block for each photo:

</div>

Remove the placeholder divs once you add real photos.

Currently showing 20 placeholder slots.

============================================= -->

</div>

</footer>

</div>

<!-- =============================================

TESTIMONIALS PAGE

============================================= -->

<div class="section-label">Google Reviews</div>

<h2 class="section-title">Testimonials</h2>

<!-- =============================================

TESTIMONIALS LIST

HOW TO ADD MORE:

Copy one .testimonial-item block and paste below.

Edit the review text and reviewer name.

============================================= -->

<p> Your Google reviews will appear here. Add as many as you like by copying this block.</p>

</div>

<div class="reviewer-name">— Client Name</div>

</div>

<p> Another happy client review goes here.</p>

</div>

<div class="reviewer-name">— Client Name</div>

</div>

<p> Add more reviews by duplicating this block.</p>

</div>

<div class="reviewer-name">— Client Name</div>

</div>

</div>

</footer>

</div>

<!-- =============================================

CONTACT PAGE

============================================= -->

<div class="section-label">Get in Touch</div>

<h2 class="section-title" style="font-family:var(--font-head);font-size:2.2rem;font-weight:700;margin-bottom:30px;">Contact Andrew</h2>

<h3>Andrew Brown</h3>

</div>

<div><a href="mailto:[email protected]">[email protected]</a></div>

</div>

<div>235 Alpine Street, Longmont CO 80501</div>

</div>

⚠️   I work by appointment only. Please schedule below.

</div>

<h3>Schedule an Appointment</h3>

<p>Fill out the form and I'll reach out to confirm your time.</p>

<label for="fname">First Name</label>

</div>

</div>

<label for="email">Your Email</label>

</div>

<label for="phone">Phone Number</label>

</div>

<label for="interest">I'm Interested In</label>

<option value="">Select one...</option>

<option>New Inventory</option>

<option>Used Inventory</option>

<option>Financing / Credit Application</option>

<option>General Question</option>

</select>

</div>

<label for="preferred">Preferred Date & Time</label>

</div>

<label for="message">Message (optional)</label>

</div>

Send Appointment Request

</button>

</div>

✅ Thank you! Your request has been sent to Andrew. He'll be in touch shortly.

</div>

</footer>

</div>

<!-- =============================================

JAVASCRIPT

============================================= -->

// ---------- Year ----------

const y = new Date().getFullYear();

document.getElementById('year').textContent = y;

document.querySelectorAll('.yr').forEach(el => el.textContent = y);

// ---------- Tab navigation ----------

function showPage(id) {

document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));

document.querySelectorAll('.nav-links a').forEach(a => a.classList.remove('active'));

document.getElementById('page-' + id).classList.add('active');

const navEl = document.getElementById('nav-' + id);

if (navEl) navEl.classList.add('active');

// close mobile menu

document.getElementById('mobileMenu').classList.remove('open');

window.scrollTo(0, 0);

}

// ---------- Mobile menu ----------

function toggleMobileMenu() {

document.getElementById('mobileMenu').classList.toggle('open');

}

// ---------- Slideshow ----------

const slides = document.querySelectorAll('.slide');

const dotsContainer = document.getElementById('slideDots');

let current = 0;

// Build dots

slides.forEach((_, i) => {

const d = document.createElement('div');

d.className = 'dot' + (i === 0 ? ' active' : '');

d.onclick = () => goTo(i);

dotsContainer.appendChild(d);

});

function goTo(n) {

slides[current].classList.remove('active');

dotsContainer.children[current].classList.remove('active');

current = (n + slides.length) % slides.length;

slides[current].classList.add('active');

dotsContainer.children[current].classList.add('active');

}

// Auto-advance every 4 seconds

setInterval(() => goTo(current + 1), 4000);

// ---------- Client photo grid placeholders ----------

// Remove this block once you add real photos to the grid

const grid = document.getElementById('clientPhotoGrid');

for (let i = 1; i <= 40; i++) {

const item = document.createElement('div');

item.className = 'photo-grid-item';

item.innerHTML = `<div class="photo-ph">📷</div>`;

grid.appendChild(item);

}

// ---------- Appointment email (mailto fallback) ----------

function sendAppointmentEmail() {

const fname = document.getElementById('fname').value.trim();

const lname = document.getElementById('lname').value.trim();

const email = document.getElementById('email').value.trim();

const phone = document.getElementById('phone').value.trim();

const interest = document.getElementById('interest').value;

const preferred= document.getElementById('preferred').value.trim();

const message = document.getElementById('message').value.trim();

if (!fname || !lname || !email) {

alert('Please fill in your first name, last name, and email.');

return;

}

const subject = encodeURIComponent('Appointment Request – ' + fname + ' ' + lname);

const body = encodeURIComponent(

'Name: ' + fname + ' ' + lname + '\n' +

'Email: ' + email + '\n' +

'Phone: ' + phone + '\n' +

'Interested In: ' + interest + '\n' +

'Preferred Time: ' + preferred + '\n\n' +

'Message:\n' + message

);

// Opens the user's default email client pre-filled

window.location.href = 'mailto:[email protected]?subject=' + subject + '&body=' + body;

// Show confirmation message

document.getElementById('apptForm').style.display = 'none';

document.getElementById('submitMsg').style.display = 'block';

}

</script>

</body>

</html>