<div id="holdingScreen" class="holdingpage__wrapper holding-screen">
    <div class="holdingpageDialog">
        <div class="logo-section">
            <img src="/assets/example-content/my-learning-logo.svg" class="promo-background" alt="">
        </div>
        <div class="content-section">
            <p>Thank you for visiting.<br /> The LXP Beta testing window is now closed.</p>
        </div>
    </div>
</div>

No notes defined.

{
  "mylearninglogin": "/assets/example-content/my-learning-logo.svg",
  "holdingscreen_message": "Thank you for visiting.<br/>  The LXP Beta testing window is now closed."
}
  • Content:
    /* stylelint-disable*/
    .holdingpage__wrapper{
        //height: 57rem;
        height: 100vh;
        display:flex;
        align-items: center;
        justify-content: center;
        transition: height 0.8s cubic-bezier(0.83, 0, 0.17, 1);
        overflow: hidden;
    }
    .holding-screen{
        background-image: url(/assets/example-content/loginbackground-mobile.png);
        background-repeat: no-repeat;
        background-size: cover;
        //background-position-y: 12%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .holdingpageDialog{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap:0.8rem;
        height: auto;
        width: auto;
        padding: 2rem 3.2rem;
        border-radius: 8px;
        background: $white;
        box-shadow: 0px 162px 45px 0px rgba(0, 0, 0, 0.00), 0px 104px 41px 0px rgba(0, 0, 0, 0.01), 0px 58px 35px 0px rgba(0, 0, 0, 0.05), 0px 26px 26px 0px rgba(0, 0, 0, 0.09), 0px 6px 14px 0px rgba(0, 0, 0, 0.10);
        
        .logo-section{
          padding: 0.8rem 0;
        }
        .content-section{
          color: #4F6074;
          text-align: center;
          font-family: "FS Dillon";
          font-size: 2.16rem;
          font-style: normal;
          font-weight: 700;
          line-height: 2.4rem; 
          letter-spacing: 0.023px;
        }
      
        .cta-section{
          display:flex;
          align-items: center;
          justify-content: center;
          height: 7.6rem;
          width: 100%;
          
          .cta-login{
            display: flex;
            padding:  1.2rem;
            justify-content: center;
            align-items: center;
            border-radius: 4px;
            background-color: #DD221A;
            border: 2px solid #DD221A;
            font-family: "FS Dillon";
            font-size: 1.6rem;
            font-style: normal;
            font-weight: 400;
            line-height: 2rem; 
            letter-spacing: .032rem;
            color: $white;
            width: 100%;
            cursor: pointer;
            text-decoration: none !important;
          }
      
          .cta-login:hover{
            background-color: #1E438E;
            border: 2px solid #00539F;
          }
        }
      }
    
      //@media screen and (min-width: $mq-large) {
        @media screen and (min-width: 1024px) {
            .holding-screen{
                background-image: url(/assets/example-content/loginbackground.png);
                //background-position-y: 12%;
            }
            .holdingpageDialog{
              min-width: 49rem;      
              .cta-section{
                width: 100%;
              }
            }
        }
    
        //Tablet view
        @media only screen and (min-width: 767px) and (max-width: 1023px) {
          .holding-screen {
            background-image: url('/assets/example-content/B2C-holdingscreenBg.png');
          }
        }
  • URL: /components/raw/holdingpage/holdingpage.scss
  • Filesystem Path: src/library/modules/holdingpage/holdingpage.scss
  • Size: 2.6 KB
<div id="holdingScreen" class="holdingpage__wrapper holding-screen">
        <div class="holdingpageDialog">
            <div class="logo-section">
                 <img src="{{mylearninglogin}}" class="promo-background" alt="">
            </div>
            <div class="content-section">
                <p>{{{holdingscreen_message}}}</p>
            </div>
        </div>
</div>