<div class="wrapper">
<div class="content-area">
<img class="logo-image" src="/assets/example-content/mylearning.svg" alt="England Football Logo" />
<img class="mobile-logo" src="/assets/example-content/mobilelearninglogo.svg" alt="England Football Logo" />
<div class="title-text">Welcome to My Learning</div>
<div class="register-text">
Thanks for signing up
</div>
<div class="content-text">
To personalise your platform,<br class="line-break" />
take three minutes to complete the questions below
</div>
<a class="cta cta--questionnaire " id="questionnaire-start-questions" tabindex="0">Start questions</a>
</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.
{
"content": "To personalise your platform,take three minutes to complete the questions below",
"button": "Start questions",
"welcometext": "Welcome to My Learning",
"signuptext": "Thanks for signing up",
"backgroundImage": "/assets/example-content/background.svg",
"mobilebackgroundimage": "/assets/example-content/mobilebackground.svg",
"mylearning": "/assets/example-content/mylearning.svg",
"mylearningmobile": "/assets/example-content/mobilelearninglogo.svg",
"start-questions-cta": {
"copy": "Start questions",
"modifier": "questionnaire",
"id": "questionnaire-start-questions",
"href": "",
"additionalClass": ""
}
}
/* 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;
gap: 1rem;
}
.logo-image {
display: none;
}
.mobile-logo {
display: block;
}
.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;
}
.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;
}
.content-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: 10px;
}
.cta-button {
font-family: 'FS Dillon';
font-size: 16px;
font-weight: 400;
line-height: var(--spacingspacing-scale5);
letter-spacing: 0.02em;
text-align: center;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color: #FFFFFF;
}
.action-btn {
gap: 30px;
width: 314px;
height: 44px;
padding: 12px 64px;
gap: var(--spacingspacing-scale00);
border-radius: 4px;
background: var(--surface-primary-button-surface-primary, red);
cursor: pointer;
border: none;
outline: none;
box-shadow: none;
margin-top: 3%;
}
.line-break{
display: none;
}
@media (min-width: $mq-large) {
.wrapper {
flex-direction: row;
}
.line-break{
display: block;
}
.content-area {
position: relative;
width: auto;
max-width: none;
}
.logo-image {
display: block;
}
.mobile-logo {
display: none;
}
.bg-image {
display: block;
}
.bg-image-mobile {
display: none;
}
.title-text {
font-size: 63.2px;
}
.register-text {
font-size: 26.7px;
}
.content-text {
font-size: 26.7px;
line-height: 36px;
}
}
<div class="wrapper">
<div class="content-area">
<img
class="logo-image"
src="{{mylearning}}"
alt="England Football Logo"
/>
<img
class="mobile-logo"
src="{{mylearningmobile}}"
alt="England Football Logo"
/>
<div class="title-text">{{welcometext}}</div>
<div class="register-text">
{{signuptext}}
</div>
<div class="content-text">
To personalise your platform,<br class="line-break"/>
take three minutes to complete the questions below
</div>
{{render '@cta' start-questions-cta merge="true"}}
</div>
<img src="{{backgroundImage}}" alt="Background Image" class="bg-image">
<img src="{{mobilebackgroundimage}}" alt="Background Image" class="bg-image-mobile">
</div>