Homepage

<nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container-fluid container-lg">
        <a class="navbar-brand fw-bold" href="#">MBSKCO</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#primaryNavigation" aria-controls="primaryNavigation" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="primaryNavigation">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">

                <li class="nav-item">
                    <a class="nav-link" href="#">Get Involved</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Our Initiatives</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Community</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">News &amp; Events</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About Us</a>
                </li>

            </ul>
            <form class="d-flex" role="search">
                <input class="form-control me-1" type="search" placeholder="Search" aria-label="Search" />
                <button class="btn btn-primary" type="submit" aria-label="Search">
                    <span class="icon mdi mdi-magnify"></span>
                </button>
            </form>
        </div>
    </div>
</nav><img src="../../images/undraw_launching_szjw.svg" alt="Inspiring Illustration" class="position-absolute z-n1" style="opacity: 0.05; left: 5vw;">
<div class="hero py-5">
    <div class="container-fluid container-lg">
        <div class="row align-items-center justify-content-between">
            <div class="col-12 col-md-8 col-lg-7 col-xl-5 offset-md-1">
                <figure>
                    <blockquote class="blockquote position-relative">
                        <h1 class="lh-1 fw-bold pb-3"><span class="d-inline-block position-absolute" style="left:-50px;top:-30px;font-size:400%;opacity:0.1;">&ldquo;</span>My humanity is bound up in yours, for we can only be human together.&rdquo;</h1>
                    </blockquote>
                    <figcaption class="blockquote-footer">
                        <cite title="Source Title">Desmond Tutu</cite>
                    </figcaption>
                </figure>
            </div>
            <div class="col-auto me-5 pe-5">
                <button class="btn btn-lg btn-primary">Our Initiatives</button>
                <button class="btn btn-lg btn-secondary">Latest News</button>
            </div>
        </div>
    </div>
</div>
<div class="spotlight py-5 mb-5">
    <div class="container-fluid container-lg">
        <div class="row align-items-center">
            <div class="col-12 col-md-3 col-lg-4 col-xl-5">
                <div class="position-relative">
                    <img src="https://placehold.co/600x700.png" alt="Spotlight" class="img-fluid rounded-5" />
                    <img src="https://placehold.co/250x180.png" alt="Spotlight" class="img-fluid rounded-5 position-absolute top-0 start-0 translate-middle ms-5 mt-5 shadow-lg" />
                    <img src="https://placehold.co/300x250.png" alt="Spotlight" class="img-fluid rounded-5 position-absolute top-100 start-100 translate-middle me-5 mb-5 shadow" />
                </div>
            </div>
            <div class="col-12 col-md-8 col-lg-7 col-xl-6 offset-md-1 pb-5">
                <h2 class="h1 lh-1 fw-bold">Building collective action across the state for our youth of colors success</h2>
                <h3 class="h5 mb-3">MBSK Colorado is a non-profit organization dedicated to disrupting and dismantling the cumulative adverse childhood and young adulthood experiences that affect Colorado's Black and Brown communities intergenerationally.</h3>
                <button class="btn btn-outline-primary">Meet Our Team</button>
                <button class="btn btn-outline-secondary">Get Involved</button>
            </div>
        </div>
    </div>
</div>
<div class="spotlight spotlight--cluster py-5 position-relative">
    <img src="../../images/undraw_into-the-night_nd84.svg" alt="Inspiring Illustration" class="position-absolute z-n1" style="opacity: 0.05; right: 8vw; top: -5%">
    <div class="container-fluid container-lg pt-5">
        <div class="row align-items-center pt-5">
            <div class="col-12 col-md-3 col-lg-4 col-xl-6">
                <h2 class="h1 lh-1 fw-bold">Five strategic areas that fit Colorado's unique needs</h2>
                <h3 class="h5 mb-3">MBSK Colorado has five strategic areas that fit Colorado's unique needs. Doing this addresses the Colorado Paradox and Losing Ground report. It aligns us back to Obama's challenge goals with major initiatives /agenda items in Colorado's Black and Brown community, the recommendations given by the Gaining Ground Report.</h3>
                <button class="btn btn-outline-primary">Learn More</button>

            </div>
            <div class="col-12 col-md-8 col-lg-7 col-xl-6 pb-5">
                <div class="row g-3 align-items-start justify-content-center">
                    <div class="col-4">
                        <div>
                            <img src="https://placehold.co/200x200" alt="pillar 1" class="rounded-5 bg-light shadow-sm" />
                        </div>
                    </div>
                    <div class="col-4">
                        <div>
                            <img src="https://placehold.co/200x200" alt="pillar 1" class="rounded-5 bg-light shadow-sm" />
                        </div>
                    </div>
                    <div class="col-4">
                        <div>
                            <img src="https://placehold.co/200x200" alt="pillar 1" class="rounded-5 bg-light shadow-sm" />
                        </div>
                    </div>
                    <div class="col-4">
                        <div>
                            <img src="https://placehold.co/200x200" alt="pillar 1" class="rounded-5 bg-light shadow-sm" />
                        </div>
                    </div>
                    <div class="col-4">
                        <div>
                            <img src="https://placehold.co/200x200" alt="pillar 1" class="rounded-5 bg-light shadow-sm" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>