Introduction

<div class="sds-snetFrame -noMenu -bgWhite">
    <a href="#frameMain" class="sds-skipNavLink">
        Skip to content
    </a>

    <header class="sds-navTopbar sds-snetFrame__header">
        <div class="sds-navTopbar__container">
            <nav class="sds-navTopbar__inner navbar navbar-expand">
                <a href="#back" class="sds-navTopbar__back">
                    <span class="sds-iconCircle" aria-hidden="true">

                        <span class="sds-icon sds-icon-chevronleft"></span>

                    </span>

                    <span class="sds-textHelper sds-navTopbar__backText">Retour</span>
                </a>
                <a class="sds-navTopbar__logo navbar-brand" href="#">
                    <img src="../../media/logos/logo-bcee.svg" class="img-fluid" alt="">
                </a>
                <div class="sds-navTopbar__centeredContent sds-navTopbar__dropdownWrapper dropdown sds-textHelper">

                    <span>Demande de prêt immobilier</span>

                </div>
                <div class="sds-navTopbar__collapse navbar-collapse" id="sds-navTopbar__collapse">
                    <ul class="sds-navTopbar__content navbar-nav">
                        <li class="sds-navTopbar__item sds-navTopbar__dropdownWrapper dropdown">
                            <button type="button" class="sds-navTopbar__dropdownToggle -avatar dropdown-toggle" data-toggle="dropdown" aria-expanded="false">

                                <div class="sds-avatar centeredBgi sds-navTopbar__userDropdownAvatar">

                                    <img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">

                                </div>
                                <span class="sds-navTopbar__userDropdownLabel sds-textHelper">Jil Schmit</span>
                                <span class="sds-iconCircle" aria-hidden="true">

                                    <span class="sds-icon sds-icon-chevrondown"></span>

                                </span>

                            </button>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </header>

    <div class="sds-snetFrame__inner">
        <div class="sds-snetFrame__fader" aria-hidden="true"></div>

        <main class="sds-snetFrame__main" id="frameMain">
            <!-- panel header content start -->

            <!-- panel header content end -->
            <div class="sds-snetFrame__mainContent">
                <!-- main content start -->

                <div class="container">
                    <div class="row">
                        <div class="col-12 sds-stackXs">
                            <h1 class="h2">Prêt immobilier avec Spuerkeess</h1>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus fringilla lacus vel vulputate consequat.</p>
                        </div>
                        <div class="col-12">
                            <div class="sds-cardStepper">
                                <div class="row row-sm align-items-start align-items-stretch-immediate no-bottom-gutter">

                                    <div class="sds-cardStepper__item sds-stackMd">
                                        <div class="sds-cardStepper__img">
                                            <img class="img-fluid" src="../../media/snet/illustrations/sdsillu-manlookinghouseplanb.svg" alt="">
                                        </div>
                                        <div class="sds-cardStepper__numberWrapper">
                                            <span class="sds-numberCircle -large sds-cardStepper__numberCircle">
                                                1
                                            </span>
                                        </div>
                                        <div class="sds-cardStepper__innerText sds-stackXs text-center">
                                            <div class="h4">Le projet</div>
                                            <p>Vous souhaitez acheter un appartement ou construire une maison ? Racontez-nous votre projet !</p>
                                        </div>
                                    </div>

                                    <div class="sds-cardStepper__item sds-stackMd">
                                        <div class="sds-cardStepper__img">
                                            <img class="img-fluid" src="../../media/snet/illustrations/sdsillu-womanmancoupleb.svg" alt="">
                                        </div>
                                        <div class="sds-cardStepper__numberWrapper">
                                            <span class="sds-numberCircle -large sds-cardStepper__numberCircle">
                                                2
                                            </span>
                                        </div>
                                        <div class="sds-cardStepper__innerText sds-stackXs text-center">
                                            <div class="h4">Informations personnelles</div>
                                            <p>Complétez vos informations personnelles. Vous souhaitez emprunter à deux ? Aucun problème !</p>
                                        </div>
                                    </div>

                                    <div class="sds-cardStepper__item sds-stackMd">
                                        <div class="sds-cardStepper__img">
                                            <img class="img-fluid" src="../../media/snet/illustrations/sdsillu-mancalculatingb.svg" alt="">
                                        </div>
                                        <div class="sds-cardStepper__numberWrapper">
                                            <span class="sds-numberCircle -large sds-cardStepper__numberCircle">
                                                3
                                            </span>
                                        </div>
                                        <div class="sds-cardStepper__innerText sds-stackXs text-center">
                                            <div class="h4">Financement et simulation</div>
                                            <p>Définissez vos plan de financement et simulez votre mensualité.</p>
                                        </div>
                                    </div>

                                    <div class="sds-cardStepper__item sds-stackMd">
                                        <div class="sds-cardStepper__img">
                                            <img class="img-fluid" src="../../media/snet/illustrations/sdsillu-mansendingmessagephoneb.svg" alt="">
                                        </div>
                                        <div class="sds-cardStepper__numberWrapper">
                                            <span class="sds-numberCircle -large sds-cardStepper__numberCircle">
                                                4
                                            </span>
                                        </div>
                                        <div class="sds-cardStepper__innerText sds-stackXs text-center">
                                            <div class="h4">Envoi à un conseiller !</div>
                                            <p>Joignez vos pièces justificatives et envoyez votre demande ! Un conseiller vous contacte sous 24H !</p>
                                        </div>
                                    </div>

                                </div>

                                <div class="sds-cardStepper__action text-center">
                                    <a href="" class="sds-btn -btnPrimary">

                                        <span class="sds-btn__text">C'est parti!</span>

                                    </a>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>

                <!-- main content end -->
            </div>

        </main>
    </div>
</div>
<!-- content such as modals, tooltips, popovers etc should be included here -->