<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>CALHN | California Housing Network</title>

    <style>

        :root {

            --primary-blue: #13526d;

            --accent-gold: #df9f32;

            --dark-gray: #333333;

            --light-bg: #f8f9fa;

            --white: #ffffff;

        }

        * {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

        }

        body {

            color: var(--dark-gray);

            line-height: 1.6;

            background-color: var(--white);

        }

        /* Header & Navigation */

        header {

            background: var(--white);

            box-shadow: 0 2px 10px rgba(0,0,0,0.08);

            position: sticky;

            top: 0;

            z-index: 1000;

        }

        .nav-container {

            max-width: 1200px;

            margin: 0 auto;

            padding: 15px 20px;

            display: flex;

            justify-content: space-between;

            align-items: center;

        }

        .logo-area {

            display: flex;

            align-items: center;

            gap: 15px;

            text-decoration: none;

        }

        .logo-area img {

            height: 60px;

            width: auto;

        }

        .logo-text {

            font-size: 1.5rem;

            font-weight: 800;

            color: var(--primary-blue);

            letter-spacing: 1px;

        }

        .logo-text span {

            color: var(--accent-gold);

        }

        nav ul {

            list-style: none;

            display: flex;

            gap: 25px;

        }

        nav a {

            text-decoration: none;

            color: var(--dark-gray);

            font-weight: 600;

            transition: color 0.3s;

        }

        nav a:hover {

            color: var(--primary-blue);

        }

        .btn-nav {

            background-color: var(--accent-gold);

            color: var(--white) !important;

            padding: 10px 20px;

            border-radius: 5px;

            transition: opacity 0.3s;

        }

        .btn-nav:hover {

            opacity: 0.9;

        }

        /* Hero Section */

        .hero {

            background: linear-gradient(rgba(19, 82, 109, 0.88), rgba(19, 82, 109, 0.88)),

                        url('https://images.unsplash.com/photo-1560518883-ce09059eeffa?ixlib=rb-4.0.3&auto=format&fit=crop&w=1600&q=80') center/cover no-repeat;

            color: var(--white);

            text-align: center;

            padding: 100px 20px;

        }

        .hero-content {

            max-width: 800px;

            margin: 0 auto;

        }

        .hero h1 {

            font-size: 2.8rem;

            margin-bottom: 20px;

            line-height: 1.2;

        }

        .hero p {

            font-size: 1.2rem;

            margin-bottom: 35px;

            opacity: 0.95;

        }

        .btn-primary {

            background-color: var(--accent-gold);

            color: var(--white);

            padding: 14px 32px;

            font-size: 1.1rem;

            font-weight: bold;

            text-decoration: none;

            border-radius: 5px;

            display: inline-block;

            transition: transform 0.2s, background-color 0.2s;

        }

        .btn-primary:hover {

            background-color: #c98b27;

            transform: translateY(-2px);

        }

        /* Services Section */

        .services {

            max-width: 1200px;

            margin: 80px auto;

            padding: 0 20px;

            text-align: center;

        }

        .section-title {

            font-size: 2.2rem;

            color: var(--primary-blue);

            margin-bottom: 10px;

        }

        .section-subtitle {

            color: #666;

            margin-bottom: 50px;

        }

        .grid {

            display: grid;

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

            gap: 30px;

        }

        .card {

            background: var(--light-bg);

            padding: 40px 30px;

            border-radius: 8px;

            border-top: 4px solid var(--accent-gold);

            box-shadow: 0 4px 12px rgba(0,0,0,0.05);

            transition: transform 0.3s;

        }

        .card:hover {

            transform: translateY(-5px);

        }

        .card h3 {

            color: var(--primary-blue);

            margin-bottom: 15px;

            font-size: 1.4rem;

        }

        /* About Section */

        .about {

            background-color: var(--light-bg);

            padding: 80px 20px;

        }

        .about-container {

            max-width: 1000px;

            margin: 0 auto;

            text-align: center;

        }

        /* Contact Section */

        .contact {

            max-width: 700px;

            margin: 80px auto;

            padding: 0 20px;

            text-align: center;

        }

        .contact-form {

            display: flex;

            flex-direction: column;

            gap: 15px;

            margin-top: 30px;

        }

        .contact-form input,

        .contact-form textarea {

            padding: 14px;

            border: 1px solid #ccc;

            border-radius: 5px;

            font-size: 1rem;

            width: 100%;

        }

        .contact-form button {

            background-color: var(--primary-blue);

            color: var(--white);

            border: none;

            padding: 15px;

            font-size: 1.1rem;

            font-weight: bold;

            border-radius: 5px;

            cursor: pointer;

            transition: background 0.3s;

        }

        .contact-form button:hover {

            background-color: #0d3b4f;

        }

        /* Footer */

        footer {

            background-color: var(--primary-blue);

            color: var(--white);

            text-align: center;

            padding: 30px 20px;

            margin-top: 60px;

        }

        @media (max-width: 768px) {

            .nav-container {

                flex-direction: column;

                gap: 15px;

            }

            nav ul {

                flex-wrap: wrap;

                justify-content: center;

                gap: 15px;

            }

            .hero h1 {

                font-size: 2rem;

            }

        }

    </style>

</head>

<body>

    <!-- Header -->

    <header>

        <div class="nav-container">

            <a href="#" class="logo-area">

                <!-- Replace 'logo.jpg' with the path to your uploaded logo image on GoDaddy -->

                <img src="logo.jpg" alt="CALHN Logo" onerror="this.style.display='none'">

                <div class="logo-text">CAL<span>HN</span></div>

            </a>

            <nav>

                <ul>

                    <li><a href="#services">Services</a></li>

                    <li><a href="#about">About Us</a></li>

                    <li><a href="#resources">Resources</a></li>

                    <li><a href="#contact" class="btn-nav">Contact Us</a></li>

                </ul>

            </nav>

        </div>

    </header>

    <!-- Hero Banner -->

    <section class="hero">

        <div class="hero-content">

            <h1>Connecting Communities Across California</h1>

            <p>Your trusted resource for housing solutions, property networking, and community development throughout the state of California.</p>

            <a href="#contact" class="btn-primary">Get Connected Today</a>

        </div>

    </section>

    <!-- Services Section -->

    <section id="services" class="services">

        <h2 class="section-title">What We Offer</h2>

        <p class="section-subtitle">Supporting residents, housing providers, and community partners</p>

        <div class="grid">

            <div class="card">

                <h3>Housing Resources</h3>

                <p>Connecting individuals and families with accessible, sustainable housing options across California communities.</p>

            </div>

            <div class="card">

                <h3>Provider Network</h3>

                <p>Building partnerships with property owners, developers, and housing authorities to expand housing availability.</p>

            </div>

            <div class="card">

                <h3>Community Advocacy</h3>

                <p>Providing guidance, education, and support to navigate California's evolving housing landscape.</p>

            </div>

        </div>

    </section>

    <!-- About Section -->

    <section id="about" class="about">

        <div class="about-container">

            <h2 class="section-title">About California Housing Network</h2>

            <p style="margin-top: 20px; font-size: 1.1rem;">

                At <strong>CALHN</strong>, our mission is to bridge the gap between housing resources and the people who need them. By fostering collaboration among local organizations, property managers, and residents, we help build stronger, more stable neighborhoods across California.

            </p>

        </div>

    </section>

    <!-- Contact Section -->

    <section id="contact" class="contact">

        <h2 class="section-title">Get In Touch</h2>

        <p class="section-subtitle">Have questions or want to join our network? Send us a message below.</p>

        <form class="contact-form" action="mailto:info@yourdomain.com" method="post" enctype="text/plain">

            <input type="text" name="name" placeholder="Your Name" required>

            <input type="email" name="email" placeholder="Your Email Address" required>

            <input type="tel" name="phone" placeholder="Your Phone Number">

            <textarea name="message" rows="5" placeholder="How can we help you?" required></textarea>

            <button type="submit">Send Message</button>

        </form>

    </section>

    <!-- Footer -->

    <footer>

        <p>&copy; 2026 CALHN - California Housing Network. All Rights Reserved.</p>

    </footer>

</body>

</html>