---

`styles.css` (full upgraded stylesheet)

/* -----------------------------------------------------------
   GLOBAL RESET & BASE
----------------------------------------------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #ffffff;
    color: #333333;
    line-height: 1.6;
}

/* Color Palette */
:root {
    --purple: #4b0082;
    --gold: #ffc800;
    --white: #ffffff;
    --gray-light: #f5f5f5;
}

/* -----------------------------------------------------------
   HEADER & NAVIGATION
----------------------------------------------------------- */
.site-header {
    background-color: var(--purple);
    color: var(--white);
    padding: 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.logo-area {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.logo-placeholder {
    width: 60px;
    height: 60px;
    border: 2px dashed var(--gold);
    border-radius: 8px;
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    text-align: center;
}

.site-title {
    font-size: 1.3rem;
    font-weight: bold;
}

/* Desktop Navigation */
.main-nav {
    display: flex;
    gap: 0.75rem;
}

.nav-button {
    background-color: var(--gold);
    color: var(--purple);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    border: 2px solid var(--gold);
    transition: 0.25s ease;
}

.nav-button:hover {
    background-color: transparent;
    color: var(--gold);
}

/* -----------------------------------------------------------
   MOBILE MENU
----------------------------------------------------------- */
.menu-toggle {
    display: none;
}

.menu-icon {
    display: none;
    font-size: 2rem;
    color: var(--gold);
    cursor: pointer;
}

/* Mobile Behavior */
@media (max-width: 768px) {

    .menu-icon {
        display: block;
    }

    .main-nav {
        width: 100%;
        flex-direction: column;
        display: none;
        margin-top: 1rem;
    }

    .main-nav a {
        width: 100%;
        text-align: center;
        padding: 0.75rem;
    }

    .menu-toggle:checked ~ .main-nav {
        display: flex;
    }
}

/* -----------------------------------------------------------
   DARK MODE (visual styling only; body.dark can be toggled later)
----------------------------------------------------------- */
.darkmode-toggle {
    margin-left: 1rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--gold);
    font-weight: bold;
    font-size: 0.9rem;
}

#dark-toggle {
    width: 18px;
    height: 18px;
}

/* When you add JS later, you can toggle .dark on body */
body.dark {
    --purple: #1e1e2f;
    --gold: #ffdd55;
    --white: #eaeaea;
    --gray-light: #2a2a3a;
    background-color: #12121c;
    color: var(--white);
}

/* -----------------------------------------------------------
   HERO SECTION
----------------------------------------------------------- */
.hero {
    background-color: var(--purple);
    color: var(--white);
    padding: 3rem 1.5rem;
    text-align: center;
}

.hero-content {
    max-width: 900px;
    margin: auto;
}

.hero h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

/* -----------------------------------------------------------
   MAIN CONTENT SECTIONS
----------------------------------------------------------- */
.main-content {
    padding: 2.5rem 1.5rem;
}

.content-section {
    max-width: 1100px;
    margin: 0 auto 3rem auto;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: center;
}

.content-section.reverse {
    flex-direction: row-reverse;
}

.content-text {
    flex: 1 1 350px;
}

.content-text h2 {
    color: var(--purple);
    margin-bottom: 0.5rem;
    font-size: 1.4rem;
}

.content-text p {
    font-size: 0.95rem;
}

/* Image Placeholder */
.image-placeholder {
    flex: 1 1 350px;
    min-height: 200px;
    border: 2px dashed var(--purple);
    border-radius: 8px;
    color: var(--purple);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    font-size: 1rem;
    text-align: center;
}

/* -----------------------------------------------------------
   GALLERY GRID
----------------------------------------------------------- */
.gallery-grid {
    max-width: 1100px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

.gallery-grid .image-placeholder {
    height: 180px;
    transition: 0.25s ease;
}

.gallery-grid .image-placeholder:hover {
    background-color: var(--purple);
    color: var(--gold);
    border-color: var(--gold);
}

/* -----------------------------------------------------------
   CONTACT FORM
----------------------------------------------------------- */
form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

form label {
    font-weight: bold;
    color: var(--purple);
}

form input,
form textarea {
    padding: 0.75rem;
    border: 2px solid var(--purple);
    border-radius: 6px;
    font-size: 1rem;
}

form input:focus,
form textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(255, 200, 0, 0.3);
}

form button {
    cursor: pointer;
}

/* -----------------------------------------------------------
   BOARD MEMBERS
----------------------------------------------------------- */
.board-card {
    background-color: var(--gray-light);
    padding: 1.5rem;
    border-radius: 8px;
    text-align: center;
}

.board-card .image-placeholder {
    height: 180px;
    margin-bottom: 1rem;
}

/* -----------------------------------------------------------
   SLIDESHOW (static first slide; JS can enhance later)
----------------------------------------------------------- */
.slideshow {
    max-width: 1100px;
    margin: 2rem auto;
    position: relative;
}

.slide {
    display: none;
}

.slide:first-child {
    display: block;
}

/* Slide Placeholder Styling */
.slideshow .image-placeholder {
    height: 260px;
    border-width: 3px;
    font-size: 1.2rem;
}

/* Dots */
.slideshow-controls {
    text-align: center;
    margin-top: 1rem;
}

.slideshow-controls .dot {
    height: 14px;
    width: 14px;
    margin: 0 6px;
    background-color: var(--purple);
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.3s ease;
    border: 2px solid var(--gold);
}

.slideshow-controls .dot:hover {
    background-color: var(--gold);
}

/* -----------------------------------------------------------
   FLOATING DONATE BUTTON
----------------------------------------------------------- */
.floating-donate {
    position: fixed;
    bottom: 25px;
    right: 25px;
    background-color: var(--gold);
    color: var(--purple);
    padding: 0.9rem 1.4rem;
    border-radius: 50px;
    font-weight: bold;
    text-decoration: none;
    border: 2px solid var(--purple);
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    transition: 0.25s ease;
    z-index: 999;
}

.floating-donate:hover {
    background-color: var(--purple);
    color: var(--gold);
    border-color: var(--gold);
}

/* -----------------------------------------------------------
   SOCIAL ICONS
----------------------------------------------------------- */
.site-footer {
    background-color: var(--purple);
    color: var(--gold);
    text-align: center;
    padding: 2rem 1rem;
}

.contact-details p {
    margin-bottom: 0.25rem;
}

.phone-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--white);
}

.phone-number {
    background-color: var(--gold);
    color: var(--purple);
    padding: 0.4rem 1rem;
    border-radius: 4px;
    font-weight: bold;
    display: inline-block;
    margin-top: 0.5rem;
}

.social-icons {
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.social-icon {
    background-color: var(--gold);
    color: var(--purple);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    border: 2px solid var(--purple);
    transition: 0.25s ease;
}

.social-icon:hover {
    background-color: var(--purple);
    color: var(--gold);
    border-color: var(--gold);
}

/* -----------------------------------------------------------
   MOBILE MENU POLISH
----------------------------------------------------------- */
@media (max-width: 768px) {
    .main-nav a {
        border-bottom: 1px solid rgba(255,255,255,0.2);
    }

    .main-nav a:last-child {
        border-bottom: none;
    }

    .main-nav {
        background-color: var(--purple);
        padding-bottom: 0.5rem;
    }
}

/* -----------------------------------------------------------
   GLOBAL TRANSITIONS
----------------------------------------------------------- */
a, button, .nav-button, .floating-donate, .social-icon {
    transition: 0.25s ease;
}


---

`index.html` (Home page with slideshow and floating donate button)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pi Gamma Gamma Foundation - Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<header class="site-header">
    <div class="logo-area">
        <div class="logo-placeholder">LOGO / CREST</div>
        <div class="site-title">Pi Gamma Gamma Foundation</div>
    </div>

    <!-- Mobile Menu Toggle -->
    <input type="checkbox" id="menu-toggle" class="menu-toggle">
    <label for="menu-toggle" class="menu-icon">&#9776;</label>

    <nav class="main-nav">
        <a href="index.html" class="nav-button">Home</a>
        <a href="about.html" class="nav-button">About Us</a>
        <a href="programs.html" class="nav-button">Programs</a>
        <a href="donate.html" class="nav-button">Donate</a>
        <a href="gallery.html" class="nav-button">Gallery</a>
        <a href="board.html" class="nav-button">Board Members</a>
        <a href="contact.html" class="nav-button">Contact</a>
    </nav>

    <!-- Dark Mode Toggle (visual only for now) -->
    <div class="darkmode-toggle">
        <input type="checkbox" id="dark-toggle">
        <label for="dark-toggle">Dark Mode</label>
    </div>
</header>

<section class="hero">
    <div class="hero-content">
        <h1>Welcome to the Pi Gamma Gamma Foundation</h1>
        <p>
            On behalf of the Foundation, thank you for visiting our site. We are committed to uplifting
            our communities through service, education, and outreach, upholding the principles of true uplift
            since our founding in 2008.
        </p>
    </div>
</section>

<!-- Slideshow Section -->
<section class="slideshow">
    <div class="slide">
        <div class="image-placeholder">Slide 1 Image (Community Service)</div>
    </div>
    <div class="slide">
        <div class="image-placeholder">Slide 2 Image (Youth Programs)</div>
    </div>
    <div class="slide">
        <div class="image-placeholder">Slide 3 Image (Scholarship Recipients)</div>
    </div>

    <div class="slideshow-controls">
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
    </div>
</section>

<main class="main-content">
    <section class="content-section">
        <div class="content-text">
            <h2>Our Mission</h2>
            <p>
                The Pi Gamma Gamma Foundation focuses on programs that create meaningful and lasting impact
                in our community. Through scholarships, mentoring, and service initiatives, we empower individuals
                to lead, serve, and uplift others.
            </p>
        </div>
        <div class="image-placeholder">
            Image Placeholder (Mission / Outreach)
        </div>
    </section>

    <section class="content-section reverse">
        <div class="image-placeholder">
            Image Placeholder (Events / Partnerships)
        </div>
        <div class="content-text">
            <h2>Community Impact</h2>
            <p>
                We partner with local organizations, schools, and leaders to deliver programs that support youth,
                strengthen families, and build stronger neighborhoods across our region.
            </p>
        </div>
    </section>
</main>

<footer class="site-footer">
    <div class="contact-details">
        <p>506 Mable Mason Cove</p>
        <p>La Vergne, TN 37086</p>
        <p class="phone-label">Phone</p>
        <p class="phone-number">(615) 496-0030</p>
    </div>
    <div class="social-icons">
        <a href="#" class="social-icon">Facebook</a>
        <a href="#" class="social-icon">Instagram</a>
        <a href="#" class="social-icon">Twitter</a>
        <a href="#" class="social-icon">YouTube</a>
    </div>
</footer>

<!-- Floating Donate Button -->
<a href="donate.html" class="floating-donate">
    Donate
</a>

</body>
</html>


---

`about.html`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>About Us - Pi Gamma Gamma Foundation</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<header class="site-header">
    <div class="logo-area">
        <div class="logo-placeholder">LOGO / CREST</div>
        <div class="site-title">Pi Gamma Gamma Foundation</div>
    </div>

    <input type="checkbox" id="menu-toggle" class="menu-toggle">
    <label for="menu-toggle" class="menu-icon">&#9776;</label>

    <nav class="main-nav">
        <a href="index.html" class="nav-button">Home</a>
        <a href="about.html" class="nav-button">About Us</a>
        <a href="programs.html" class="nav-button">Programs</a>
        <a href="donate.html" class="nav-button">Donate</a>
        <a href="gallery.html" class="nav-button">Gallery</a>
        <a href="board.html" class="nav-button">Board Members</a>
        <a href="contact.html" class="nav-button">Contact</a>
    </nav>

    <div class="darkmode-toggle">
        <input type="checkbox" id="dark-toggle">
        <label for="dark-toggle">Dark Mode</label>
    </div>
</header>

<section class="hero">
    <div class="hero-content">
        <h1>About Us</h1>
        <p>
            The Pi Gamma Gamma Foundation was established in 2008 with a mission to uplift and empower
            communities through service, education, and outreach. Rooted in the principles of true uplift,
            our foundation is committed to creating lasting impact and fostering leadership, unity, and growth.
        </p>
    </div>
</section>

<main class="main-content">
    <section class="content-section">
        <div class="content-text">
            <h2>Our History</h2>
            <p>
                Since our founding, we have launched numerous initiatives focused on youth development,
                scholarship support, and community engagement. Our members and volunteers have worked
                tirelessly to build programs that reflect our values and serve the evolving needs of our
                neighborhoods.
            </p>
        </div>
        <div class="image-placeholder">
            Image Placeholder (Historical Photos / Timeline)
        </div>
    </section>

    <section class="content-section reverse">
        <div class="image-placeholder">
            Image Placeholder (Leadership / Volunteers)
        </div>
        <div class="content-text">
            <h2>Our Vision</h2>
            <p>
                We envision a future where every individual has access to opportunity, support, and
                encouragement. Through strategic partnerships and grassroots efforts, we aim to be a
                catalyst for change and a beacon of hope in the communities we serve.
            </p>
        </div>
    </section>
</main>

<footer class="site-footer">
    <div class="contact-details">
        <p>506 Mable Mason Cove</p>
        <p>La Vergne, TN 37086</p>
        <p class="phone-label">Phone</p>
        <p class="phone-number">(615) 496-0030</p>
    </div>
    <div class="social-icons">
        <a href="#" class="social-icon">Facebook</a>
        <a href="#" class="social-icon">Instagram</a>
        <a href="#" class="social-icon">Twitter</a>
        <a href="#" class="social-icon">YouTube</a>
    </div>
</footer>

<a href="donate.html" class="floating-donate">
    Donate
</a>

</body>
</html>


---

`programs.html`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Programs - Pi Gamma Gamma Foundation</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<header class="site-header">
    <div class="logo-area">
        <div class="logo-placeholder">LOGO / CREST</div>
        <div class="site-title">Pi Gamma Gamma Foundation</div>
    </div>

    <input type="checkbox" id="menu-toggle" class="menu-toggle">
    <label for="menu-toggle" class="menu-icon">&#9776;</label>

    <nav class="main-nav">
        <a href="index.html" class="nav-button">Home</a>
        <a href="about.html" class="nav-button">About Us</a>
        <a href="programs.html" class="nav-button">Programs</a>
        <a href="donate.html" class="nav-button">Donate</a>
        <a href="gallery.html" class="nav-button">Gallery</a>
        <a href="board.html" class="nav-button">Board Members</a>
        <a href="contact.html" class="nav-button">Contact</a>
    </nav>

    <div class="darkmode-toggle">
        <input type="checkbox" id="dark-toggle">
        <label for="dark-toggle">Dark Mode</label>
    </div>
</header>

<section class="hero">
    <div class="hero-content">
        <h1>Our Programs</h1>
        <p>
            The Pi Gamma Gamma Foundation proudly supports initiatives that uplift youth, families, and underserved communities.
            Our programs focus on education, mentorship, service, and leadership development.
        </p>
    </div>
</section>

<main class="main-content">

    <section class="content-section">
        <div class="content-text">
            <h2>Scholarship Program</h2>
            <p>
                Each year, we award scholarships to deserving high school seniors who demonstrate academic excellence,
                leadership, and a commitment to community service.
            </p>
        </div>
        <div class="image-placeholder">
            Image Placeholder (Scholarship Recipients)
        </div>
    </section>

    <section class="content-section reverse">
        <div class="image-placeholder">
            Image Placeholder (Mentorship Sessions)
        </div>
        <div class="content-text">
            <h2>Mentorship & Youth Development</h2>
            <p>
                Our mentorship program pairs students with positive role models who provide guidance, encouragement,
                and support as they navigate academic and personal challenges.
            </p>
        </div>
    </section>

    <section class="content-section">
        <div class="content-text">
            <h2>Community Service Initiatives</h2>
            <p>
                From food drives to neighborhood cleanups, we organize service projects that strengthen our community
                and promote unity, compassion, and civic responsibility.
            </p>
        </div>
        <div class="image-placeholder">
            Image Placeholder (Service Projects)
        </div>
    </section>

</main>

<footer class="site-footer">
    <div class="contact-details">
        <p>506 Mable Mason Cove</p>
        <p>La Vergne, TN 37086</p>
        <p class="phone-label">Phone</p>
        <p class="phone-number">(615) 496-0030</p>
    </div>
    <div class="social-icons">
        <a href="#" class="social-icon">Facebook</a>
        <a href="#" class="social-icon">Instagram</a>
        <a href="#" class="social-icon">Twitter</a>
        <a href="#" class="social-icon">YouTube</a>
    </div>
</footer>

<a href="donate.html" class="floating-donate">
    Donate
</a>

</body>
</html>


---

`donate.html`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Donate - Pi Gamma Gamma Foundation</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<header class="site-header">
    <div class="logo-area">
        <div class="logo-placeholder">LOGO / CREST</div>
        <div class="site-title">Pi Gamma Gamma Foundation</div>
    </div>

    <input type="checkbox" id="menu-toggle" class="menu-toggle">
    <label for="menu-toggle" class="menu-icon">&#9776;</label>

    <nav class="main-nav">
        <a href="index.html" class="nav-button">Home</a>
        <a href="about.html" class="nav-button">About Us</a>
        <a href="programs.html" class="nav-button">Programs</a>
        <a href="donate.html" class="nav-button">Donate</a>
        <a href="gallery.html" class="nav-button">Gallery</a>
        <a href="board.html" class="nav-button">Board Members</a>
        <a href="contact.html" class="nav-button">Contact</a>
    </nav>

    <div class="darkmode-toggle">
        <input type="checkbox" id="dark-toggle">
        <label for="dark-toggle">Dark Mode</label>
    </div>
</header>

<section class="hero">
    <div class="hero-content">
        <h1>Support Our Mission</h1>
        <p>
            Your generosity helps us provide scholarships, mentorship, and community programs that uplift and empower
            individuals and families. Every contribution makes a meaningful difference.
        </p>
    </div>
</section>

<main class="main-content">

    <section class="content-section">
        <div class="content-text">
            <h2>Why Donate?</h2>
            <p>
                Donations directly support our youth programs, scholarships, and community outreach efforts.
                Your gift helps us expand our impact and continue serving those who need it most.
            </p>
        </div>
        <div class="image-placeholder">
            Image Placeholder (Donation Impact)
        </div>
    </section>

    <section class="content-section reverse">
        <div class="image-placeholder">
            Image Placeholder (Online Giving)
        </div>
        <div class="content-text">
            <h2>Ways to Give</h2>
            <ul>
                <li>One-time online donation</li>
                <li>Monthly recurring support</li>
                <li>Corporate sponsorships</li>
                <li>In-kind contributions</li>
                <li>Event-based giving</li>
            </ul>
        </div>
    </section>

    <section class="content-section">
        <div class="content-text">
            <h2>Make a Donation</h2>
            <p>
                You can donate securely online using the button below. 
                <strong>All contributions are tax-deductible.</strong>
            </p>

            <!-- Replace # with your real donation link -->
            <a href="#" class="nav-button" style="margin-top: 1rem; display: inline-block;">
                Donate Now
            </a>
        </div>

        <div class="image-placeholder">
            Image Placeholder (Secure Payment)
        </div>
    </section>

</main>

<footer class="site-footer">
    <div class="contact-details">
        <p>506 Mable Mason Cove</p>
        <p>La Vergne, TN 37086</p>
        <p class="phone-label">Phone</p>
        <p class="phone-number">(615) 496-0030</p>
    </div>
    <div class="social-icons">
        <a href="#" class="social-icon">Facebook</a>
        <a href="#" class="social-icon">Instagram</a>
        <a href="#" class="social-icon">Twitter</a>
        <a href="#" class="social-icon">YouTube</a>
    </div>
</footer>

<a href="donate.html" class="floating-donate">
    Donate
</a>

</body>
</html>


---

`gallery.html`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Gallery - Pi Gamma Gamma Foundation</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<header class="site-header">
    <div class="logo-area">
        <div class="logo-placeholder">LOGO / CREST</div>
        <div class="site-title">Pi Gamma Gamma Foundation</div>
    </div>

    <input type="checkbox" id="menu-toggle" class="menu-toggle">
    <label for="menu-toggle" class="menu-icon">&#9776;</label>

    <nav class="main-nav">
        <a href="index.html" class="nav-button">Home</a>
        <a href="about.html" class="nav-button">About Us</a>
        <a href="programs.html" class="nav-button">Programs</a>
        <a href="donate.html" class="nav-button">Donate</a>
        <a href="gallery.html" class="nav-button">Gallery</a>
        <a href="board.html" class="nav-button">Board Members</a>
        <a href="contact.html" class="nav-button">Contact</a>
    </nav>

    <div class="darkmode-toggle">
        <input type="checkbox" id="dark-toggle">
        <label for="dark-toggle">Dark Mode</label>
    </div>
</header>

<section class="hero">
    <div class="hero-content">
        <h1>Photo Gallery</h1>
        <p>Moments of service, leadership, and community impact.</p>
    </div>
</section>

<main class="main-content">
    <section class="gallery-grid">

        <div class="image-placeholder">Event Photo 1</div>
        <div class="image-placeholder">Event Photo 2</div>
        <div class="image-placeholder">Event Photo 3</div>
        <div class="image-placeholder">Event Photo 4</div>
        <div class="image-placeholder">Event Photo 5</div>
        <div class="image-placeholder">Event Photo 6</div>

    </section>
</main>

<footer class="site-footer">
    <div class="contact-details">
        <p>506 Mable Mason Cove</p>
        <p>La Vergne, TN 37086</p>
        <p class="phone-label">Phone</p>
        <p class="phone-number">(615) 496-0030</p>
    </div>
    <div class="social-icons">
        <a href="#" class="social-icon">Facebook</a>
        <a href="#" class="social-icon">Instagram</a>
        <a href="#" class="social-icon">Twitter</a>
        <a href="#" class="social-icon">YouTube</a>
    </div>
</footer>

<a href="donate.html" class="floating-donate">
    Donate
</a>

</body>
</html>


---

`board.html`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Board Members - Pi Gamma Gamma Foundation</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<header class="site-header">
    <div class="logo-area">
        <div class="logo-placeholder">LOGO / CREST</div>
        <div class="site-title">Pi Gamma Gamma Foundation</div>
    </div>

    <input type="checkbox" id="menu-toggle" class="menu-toggle">
    <label for="menu-toggle" class="menu-icon">&#9776;</label>

    <nav class="main-nav">
        <a href="index.html" class="nav-button">Home</a>
        <a href="about.html" class="nav-button">About Us</a>
        <a href="programs.html" class="nav-button">Programs</a>
        <a href="donate.html" class="nav-button">Donate</a>
        <a href="gallery.html" class="nav-button">Gallery</a>
        <a href="board.html" class="nav-button">Board Members</a>
        <a href="contact.html" class="nav-button">Contact</a>
    </nav>

    <div class="darkmode-toggle">
        <input type="checkbox" id="dark-toggle">
        <label for="dark-toggle">Dark Mode</label>
    </div>
</header>

<section class="hero">
    <div class="hero-content">
        <h1>Board of Directors</h1>
        <p>Leaders committed to service, integrity, and community uplift.</p>
    </div>
</section>

<main class="main-content">

    <section class="content-section">
        <div class="image-placeholder">Headshot Placeholder</div>
        <div class="content-text">
            <h2>Chairman</h2>
            <p>Short bio or leadership statement goes here.</p>
        </div>
    </section>

    <section class="content-section reverse">
        <div class="image-placeholder">Headshot Placeholder</div>
        <div class="content-text">
            <h2>Vice Chairman</h2>
            <p>Short bio or leadership statement goes here.</p>
        </div>
    </section>

    <section class="content-section">
        <div class="image-placeholder">Headshot Placeholder</div>
        <div class="content-text">
            <h2>Treasurer</h2>
            <p>Short bio or leadership statement goes here.</p>
        </div>
    </section>

    <section class="content-section reverse">
        <div class="image-placeholder">Headshot Placeholder</div>
        <div class="content-text">
            <h2>Secretary</h2>
            <p>Short bio or leadership statement goes here.</p>
        </div>
    </section>

</main>

<footer class="site-footer">
    <div class="contact-details">
        <p>506 Mable Mason Cove</p>
        <p>La Vergne, TN 37086</p>
        <p class="phone-label">Phone</p>
        <p class="phone-number">(615) 496-0030</p>
    </div>
    <div class="social-icons">
        <a href="#" class="social-icon">Facebook</a>
        <a href="#" class="social-icon">Instagram</a>
        <a href="#" class="social-icon">Twitter</a>
        <a href="#" class="social-icon">YouTube</a>
    </div>
</footer>

<a href="donate.html" class="floating-donate">
    Donate
</a>

</body>
</html>


---

`contact.html`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Contact Us - Pi Gamma Gamma Foundation</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<header class="site-header">
    <div class="logo-area">
        <div class="logo-placeholder">LOGO / CREST</div>
        <div class="site-title">Pi Gamma Gamma Foundation</div>
    </div>

    <input type="checkbox" id="menu-toggle" class="menu-toggle">
    <label for="menu-toggle" class="menu-icon">&#9776;</label>

    <nav class="main-nav">
        <a href="index.html" class="nav-button">Home</a>
        <a href="about.html" class="nav-button">About Us</a>
        <a href="programs.html" class="nav-button">Programs</a>
        <a href="donate.html" class="nav-button">Donate</a>
        <a href="gallery.html" class="nav-button">Gallery</a>
        <a href="board.html" class="nav-button">Board Members</a>
        <a href="contact.html" class="nav-button">Contact</a>
    </nav>

    <div class="darkmode-toggle">
        <input type="checkbox" id="dark-toggle">
        <label for="dark-toggle">Dark Mode</label>
    </div>
</header>

<section class="hero">
    <div class="hero-content">
        <h1>Contact Us</h1>
        <p>We welcome your questions, feedback, and partnership inquiries.</p>
    </div>
</section>

<main class="main-content">

    <section class="content-section">
        <div class="content-text">
            <h2>Send a Message</h2>
            <form>
                <label>Name</label>
                <input type="text" placeholder="Your Name" required>

                <label>Email</label>
                <input type="email" placeholder="Your Email" required>

                <label>Message</label>
                <textarea placeholder="Your Message" rows="6" required></textarea>

                <button type="submit" class="nav-button" style="margin-top: 1rem;">
                    Submit
                </button>
            </form>
        </div>

        <div class="image-placeholder">
            Image Placeholder (Contact / Outreach)
        </div>
    </section>

</main>

<footer class="site-footer">
    <div class="contact-details">
        <p>506 Mable Mason Cove</p>
        <p>La Vergne, TN 37086</p>
        <p class="phone-label">Phone</p>
        <p class="phone-number">(615) 496-0030</p>
    </div>
    <div class="social-icons">
        <a href="#" class="social-icon">Facebook</a>
        <a href="#" class="social-icon">Instagram</a>
        <a href="#" class="social-icon">Twitter</a>
        <a href="#" class="social-icon">YouTube</a>
    </div>
</footer>

<a href="donate.html" class="floating-donate">
    Donate
</a>

</body>
</html>


---