Alerts

    <div class="has-bg-grey-100 h-50">
    <nav class="nav">
    <div class="nav-left">
        <img class="nav-brand" src="/images/play/hero/logo.png" alt="" />
    </div>
    <div class="nav-responsive">
        <div class="nav-center">
            <a class="nav-item is-active">Visit</a>
            <a class="nav-item">Activities</a>
            <a class="nav-item">Learn</a>
            <a class="nav-item">Donate</a>
        </div>
    </div>
    </nav>
    <div class="alert is-block is-warning m-0 m-auto m-t-16 p-r-20 w-fitcontent">
        <span class="d-icon d-warning"></span>
        <div>
            <h5 class="m-b-0">Masks are required for everyone, regardless of location or vaccination status.</h5>
        </div>
    </div>
    </div>
  

  <div class="has-bg-grey-100 h-50">
   <nav class="nav">
    <div class="nav-left">
        <img class="nav-brand" src="/images/play/hero/logo.png" alt="" />
    </div>
    <div class="nav-responsive">
        <div class="nav-center">
            <a class="nav-item is-active">Visit</a>
            <a class="nav-item">Activities</a>
            <a class="nav-item">Learn</a>
            <a class="nav-item">Donate</a>
        </div>
    </div>
    </nav>
    <div class="alert is-block is-info m-0 m-auto m-t-16 p-r-20 w-fitcontent">
        <span class="d-icon d-information-circle"></span>
        <div>
            <h5 class="m-b-0">Masks are required for everyone, regardless of location or vaccination status.</h5>
            <p>Additional details are available at www.nps.gov/coronavirus. Before visiting</p>
            <p>please check the park website to determine its operating status. Please recreate responsibly.</p>
        </div>
    </div>
    </div>

    <div class="has-bg-grey-100 h-50">
    <nav class="nav">
    <div class="nav-left">
        <img class="nav-brand" src="/images/play/hero/logo.png" alt="" />
    </div>
    <div class="nav-responsive">
        <div class="nav-center">
            <a class="nav-item is-active">Visit</a>
            <a class="nav-item">Activities</a>
            <a class="nav-item">Learn</a>
            <a class="nav-item">Donate</a>
        </div>
    </div>
    </nav>
    <div class="alert is-inline has-bg-status-danger align-items-center">
        <p class="is-bold is-white flex-auto">Masks are required for everyone, regardless of location or vaccination status</p>
        <span class="link m-l-auto p-0 ">
            <span class="d-icon d-close is-sub is-white"></span>
        </span>
    </div>
    </div>

   <div class="has-bg-grey-100 h-50" style="position: relative;">
    <nav class="nav">
    <div class="nav-left">
        <img class="nav-brand" src="/images/play/hero/logo.png" alt="" />
    </div>
    <div class="nav-responsive">
        <div class="nav-center">
            <a class="nav-item is-active">Visit</a>
            <a class="nav-item">Activities</a>
            <a class="nav-item">Learn</a>
            <a class="nav-item">Donate</a>
        </div>
    </div>
    </nav>
    <div class="position-absolute top-9 w-full">
    <div class="alert is-warning m-0 m-auto">
    <span class="d-icon d-warning"></span>
    <div>
        <h5>Masks are required for everyone, regardless of location or vaccination status</h5>
    </div>
    <span class="link close is-secondary"
        ><span class="d-icon d-close is-sub"></span
    ></span>
</div>
</div>
</div>

    <div class="has-bg-grey-100 h-50 position-relative">
    <nav class="nav">
    <div class="nav-left">
        <img class="nav-brand" src="/images/play/hero/logo.png" alt="" />
    </div>
    <div class="nav-responsive">
        <div class="nav-center">
            <a class="nav-item is-active">Visit</a>
            <a class="nav-item">Activities</a>
            <a class="nav-item">Learn</a>
            <a class="nav-item">Donate</a>
        </div>
    </div>
    </nav>
    <div class="w-full position-absolute top-9">
    <div class="alert is-info m-0 m-auto" style="width: 80%">
    <span class="d-icon d-information-circle"></span>
    <div>
        <h5>Masks are required for everyone, regardless of location or vaccination status</h5>
        <p>Additional details are available at www.nps.gov/coronavirus. Before visiting, please check the park website to determine its operating status. Please recreate responsibly.</p>
    </div>
    <span class="link close is-secondary"
        ><span class="d-icon d-close is-sub"></span
    ></span>
</div>
</div>
</div>

    <div class="box has-bg-grey-800 br-6 flex space-between p-x-20 p-y-20 align-items-center position-fixed bottom-2 right-6 h-5">
        <p class="is-white"> Membership application sent! </p>
        <div>
            <button class="button is-text is-white min-w-14"> Undo </button>
            <i class="d-icon d-close is-default is-grey-100"></i>
        </div>
    </div>

    <div class="box has-bg-grey-800 br-6 p-x-12 p-y-8 m-0 m-auto position-fixed min-h-16 bottom-2 left-6">
        <div class="flex space-between align-items-center">
            <p class="is-white is-bold"> Membership application sent! </p>
            <div>
                <button class="button is-text is-white min-w-14"> Undo </button>
                <i class="d-icon d-close is-default is-grey-100"></i>
            </div>
        </div>
        <p class="is-white font-12">You will recieve your I.D. Card through USPS. Please allow 3-5 Business Days.</p>
    </div>