No notes defined.

<aside id="lead-gen" class="lead-gen  lead-gen--prospectus">
    <div class="lead-gen__bg">
        <h2 id="lead-gen__heading" class="h1">Order your prospectus</h2>
        <p class="lead-gen__body">Get an in-depth look at all the courses we offer and explore the benefits of undergraduate study.</p>
        <ul class="list--unstyled">
            <li><a id="lead-gen__yes-btn" class="lead-gen__yes  button" href="#" data-modal-trigger="lead-gen-modal">Get your copy now</a></li>
            <li><a id="lead-gen__no-btn" class="lead-gen__no" href="#">No thanks, I'll keep reading.</a></li>
        </ul>
    </div>
</aside>

<div id="lead-gen-modal" class="modal  modal-slide" aria-hidden="true" data-modal="lead-gen-modal">
    <div class="modal__overlay">
        <div class="modal__container" role="dialog">
            <header class="modal__header">
                <h3></h3>
                <button class="modal__close" aria-label="Close modal" data-modal-close="" type="button" />
            </header>
            <div class="modal__content">
                <div>
                    <div>
                        <div>
                            <h3 class="h4 card__title">Order your prospectus</h3>
                            <!-- Begin form-->

                            <!-- End form -->
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<aside id="lead-gen" class="lead-gen  lead-gen--prospectus">
    <div class="lead-gen__bg">
        <h2 id="lead-gen__heading" class="h1">Order your prospectus</h2>
        <p class="lead-gen__body">Get an in-depth look at all the courses we offer and explore the benefits of undergraduate study.</p>
        <ul class="list--unstyled">
            <li><a id="lead-gen__yes-btn" class="lead-gen__yes  button" href="#" data-modal-trigger="lead-gen-modal">Get your copy now</a></li>
            <li><a id="lead-gen__no-btn" class="lead-gen__no" href="#">No thanks, I'll keep reading.</a></li>
        </ul>
    </div>
</aside>

<div id="lead-gen-modal" class="modal  modal-slide" aria-hidden="true" data-modal="lead-gen-modal">
    <div class="modal__overlay">
        <div class="modal__container" role="dialog">
            <header class="modal__header">
                <h3></h3>
                <button class="modal__close" aria-label="Close modal" data-modal-close="" type="button" />
            </header>
            <div class="modal__content">
                <div>
                    <div>
                        <div>
                            <h3 class="h4 card__title">Order your prospectus</h3>
                            <!-- Begin form-->

                            <!-- End form -->
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
  • Content:
    .lead-gen {
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 9997;
        right: 0;
        color: #FFF;
        background-size:  cover;
        background-color:  #333;
        text-align: center;
    
        &__bg {
            background: rgba(0,0,0,0.7);
            padding: $spacing-lg; 
        }
    
        &__no {
            color: #FFF;
    
            &:hover {
                color: inherit;
                text-decoration: none;
            }
        }
    
        &--prospectus {
            background: url(//www.staffs.ac.uk/image-library/cta-image-banners/lead-gen-banner-bg.jpg) top center no-repeat;
        }
    }
  • URL: /components/raw/lead-generation/_lead-generation.scss
  • Filesystem Path: src\components\lead-generation\_lead-generation.scss
  • Size: 589 Bytes