England Football

Thankyou 

<div class="wrapper">
    <div class="content-area">
        <div class="image-area">
            <img class="ball-image" src="/assets/example-content/ball-icon.svg" alt="Football Logo" />
            <img class="line-image" src="/assets/example-content/loading-bar.svg" alt="Underline" />
        </div>
        <div class="title-text">Thank you!</div>
        <div class="info-text">
            Using the answers you provided
        </div>
        <div class="info-text">
            we are setting up your personalised dashboard
        </div>
    </div>

    <img src="/assets/example-content/background.svg" alt="Background Image" class="bg-image">
    <img src="/assets/example-content/mobilebackground.svg" alt="Background Image" class="bg-image-mobile">
</div>

No notes defined.

{
  "content1": "Using the answers you provided",
  "content2": "we are setting up your personalised dashboard",
  "thankyoutext": "Thank you!",
  "backgroundImage": "/assets/example-content/background.svg",
  "mobilebackgroundimage": "/assets/example-content/mobilebackground.svg",
  "ballicon": "/assets/example-content/ball-icon.svg",
  "loadingbar": "/assets/example-content/loading-bar.svg"
}
  • Content: 
    /* stylelint-disable */
.wrapper {
  display: flex;
  justify-content: center;  
  align-items: center;  
  height: 100vh;  
  position: relative; 
  flex-direction: column;
  overflow: hidden;
}

.content-area {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center; 
  align-items: center;  
  text-align: center; 
  z-index: 10;
  width: 90%;
  max-width: 400px;
}

.ball-image,.line-image {
  display: block;
}

.image-area {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1.5rem;
}

.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;  
  height: 100%;  
  object-fit: cover;  
  object-position: center;
}

.bg-image-mobile {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.title-text {
  font-family: FS Dillon;
  font-size: 37.3px;
  font-weight: 700;
  line-height: var(--fontHeadlineLLineHeight);
  letter-spacing: 0.0022em;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #FFFFFF;
  margin: 1rem;
}

.register-text {
  font-family: FS Dillon;
  font-size: 21.6px;
  font-weight: 700;
  line-height: var(--fontHeadlineXSLineHeight);
  letter-spacing: 0.0011em;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #FFFFFF;
}

.info-text {
  font-family: FS Dillon;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.0027em;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #AEBDE6;
  padding: 0.75rem;
}

@media (min-width: $mq-large) {
  .wrapper {
    flex-direction: row;
  }

  .content-area {
    position: relative;
    width: auto;
    max-width: none;
  }

  .image-area {
    gap: 1.5rem;
    margin: 2rem;
  }

  .bg-image {
    display: block;
  }

  .bg-image-mobile {
    display: none;
  }

  .title-text {
    font-size: 63.2px;
  }

  .register-text {
    font-size: 26.7px;
  }

  .info-text {
    font-size: 26.7px;
  }
}
  • URL: /components/raw/thankyou/ThankYou.scss
  • Filesystem Path: src/library/modules/Questionnaire/ThankYou/ThankYou.scss
  • Size: 2.1 KB 
<div class="wrapper">
    <div class="content-area">
        <div class="image-area">
        <img 
        class="ball-image" 
        src="{{ballicon}}" 
        alt="Football Logo" 
        /> 
        <img 
        class="line-image" 
        src="{{loadingbar}}" 
        alt="Underline" 
        />
        </div>
        <div class="title-text">{{thankyoutext}}</div>
        <div class="info-text">
            {{content1}}
        </div>
        <div class="info-text">
            {{content2}}
        </div>
    </div>
   
    <img src="{{backgroundImage}}" alt="Background Image" class="bg-image">
    <img src="{{mobilebackgroundimage}}" alt="Background Image" class="bg-image-mobile">
</div>