<div class="main-area">
<div class="form-area">
<div class="question-panel">
<div class="question-index">
<svg class="icon-style" width="16" height="2" viewBox="0 0 16 2" fill="none" xmlns="http://www.w3.org/2000/svg">
<line y1="1" x2="16" y2="1" stroke="white" stroke-opacity="0.3" stroke-width="2" />
</svg>
Question 1 / 10
</div>
<div class="country-info">
What's your country of birth?
</div>
<div class="dropdown-descriptions">
Select from dropdown list of countries
</div>
</div>
<div class="input-panel">
<div class="form-container">
<div class="community-team-input">
<input type="text" id="community-input" class="community-input" placeholder="Enter town name" />
</div>
<a class="cta cta--dropdown " id="dropdown-Next" tabindex="0">Next</a>
</div>
</div>
</div>
<img class="desktop-bg" src="/assets/example-content/background.svg" alt="Background Image" />
<img src="/assets/example-content/mobilebackground.svg" alt="Background Image" class="bg-image-mobile">
</div>
No notes defined.
{
"questionNumber": "Question 1 / 10",
"question": "What's your country of birth?",
"dropdownLabel": "Select from dropdown list of countries ",
"nextButtonText": "Next",
"nextButtonDisabledStyle": "cursor: default; opacity: 0.6;",
"nextButtonDisabled": true,
"backgroundImage": "/assets/example-content/background.svg",
"mobilebackgroundimage": "/assets/example-content/mobilebackground.svg",
"Next-cta": {
"copy": "Next",
"modifier": "dropdown",
"id": "dropdown-Next",
"href": "",
"additionalClass": ""
}
}
/* stylelint-disable */
.main-area {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
position: relative;
overflow: hidden;
}
.form-area {
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
z-index: 10;
width: 80%;
}
.desktop-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.bg-image-mobile {
display: none;
}
.question-panel {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
text-align: left;
color: #ffffff;
width: 50%;
}
.question-index {
font-family: 'FS Dillon';
font-size: 15px;
font-weight: 700;
line-height: 20px;
color: #aebde6;
margin-bottom: 2%;
display: flex;
align-items: center;
gap: 8px;
}
.icon-img {
position: absolute;
left: -30px;
width: 20px;
height: 20px;
object-fit: contain;
}
.country-info {
font-family: 'FS Dillon';
font-size: 47.4px;
font-weight: 700;
line-height: 52px;
color: white;
}
.dropdown-descriptions {
font-family: 'FS Dillon';
font-weight: 400;
color: #aebde6;
margin-top: 3%;
font-size: 26.7px;
line-height: 36px;
}
.input-panel {
display: flex;
flex-direction: column;
justify-content: flex-start;
width: 35%;
}
input:hover,
input:focus,
input:hover:focus {
border-color: #FFFFFF;
background-color: #E9EBF1;
cursor:pointer ;
}
.form-container {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
margin-top: 8%;
gap: 24px;
}
@media (max-width: 709px) {
.form-area {
flex-direction: column;
align-items: center;
width: 90%;
}
.question-panel, .input-panel {
width: 100%;
text-align: center;
}
.dropdown-descriptions {
font-size: 18px;
line-height: 24px;
}
.question-index {
font-size: 11.26px;
line-height: 16px;
color: #E9EBF1;
}
.desktop-bg {
display: none;
}
.bg-image-mobile {
display: block;
width: 100%;
height: auto;
}
.country-info {
font-size: 31.1px;
text-align: left;
line-height: 40px;
}
.form-container {
margin-top: 5%;
}
.icon-img {
display: none;
}
}
@media (min-width: 710px) and (max-width: 1023px) {
.form-area {
flex-direction: row;
align-items: center;
gap: 3rem;
}
.question-panel, .input-panel {
width: 50%;
}
.country-info {
font-size: 40px;
}
.dropdown-descriptions {
font-size: 24px;
}
.question-index {
font-size: 14px;
}
}
@media (min-width: 1024px) and (max-width: 1440px) {
.country-info {
font-size: 47.4px;
width: 70%;
}
.dropdown-descriptions {
font-size: 26.7px;
}
.question-index {
font-size: 15px;
line-height: 20px;
}
.bg-image-mobile {
display: none;
}
}
<div class="main-area">
<div class="form-area">
<div class="question-panel">
<div class="question-index">
<svg class="icon-style" width="16" height="2" viewBox="0 0 16 2" fill="none" xmlns="http://www.w3.org/2000/svg">
<line y1="1" x2="16" y2="1" stroke="white" stroke-opacity="0.3" stroke-width="2"/>
</svg>
{{questionNumber}}
</div>
<div class="country-info">
{{question}}
</div>
<div class="dropdown-descriptions">
{{dropdownLabel}}
</div>
</div>
<div class="input-panel">
<div class="form-container">
{{render '@input-container' }}
{{render '@cta' Next-cta merge="true" id="nextButton" disabled="true"}}
</div>
</div>
</div>
<img class="desktop-bg" src="{{backgroundImage}}" alt="Background Image" />
<img src="{{mobilebackgroundimage}}" alt="Background Image" class="bg-image-mobile">
</div>