<div class="registration-self-steps-container">
<div class="registration-self-steps-container__steps">
<div class="registration-self-steps-container__steps__step-count registration_hide">Step <span class="registration-self-steps-container__step-count-current">01</span> / <span class="registration-self-steps-container__total-steps">08</span></div>
<div class="registration-self-welcome registration_hide">
<div class="header">
<h1>Welcome</h1>
</div>
<div class="welcome">
<div class="title">
<div class="registration-form-title">
We need some more details from you before upgrading to an England Supporters Travel Club member.
</div>
</div>
<div class="sub-title">
<div class="registration-form-sub-title">
If you are intending on purchasing a junior membership along with your own, please ensure your junior is registered to your account before proceeding by clicking ‘Register Junior’ below.
</div>
</div>
<div class="registration-cta">
<div class="next-to-step-1">
<a href="/" class="cta cta--r-primary ">
<p>COMPLETE ESTC UPGRADE</p>
</a>
</div>
<div class="register-junior">
<a href="/" class="cta cta--r-primary ">
<p>REGISTER JUNIOR</p>
</a>
</div>
<div class="exit-to-fa-com">
<a href="/" class="cta cta--r-secondary ">
<p>EXIT TO THEFA.COM</p>
</a>
</div>
</div>
</div>
</div>
<div class="registration-privacy-policy registration_hide">
<div class="registration-privacy-policy__title">
<div class="registration-form-title">
Hi Luke! First of all, please confirm that you have read and agreed to our privacy policy
</div>
</div>
<div class="registration-privacy-policy__checkbox">
<label class="checkbox checkbox--secondary">
<span class="label">I have read and agree to The FA’s Privacy Policy, I have read and agree to The FA’s Privacy PolicyI have read and agree to The FA’s Privacy PolicyI have read and agree to The FA’s Privacy Policy</span>
<input type="checkbox" name="faPolicy1">
<span class="checkmark-container">
<span class="checkmark"></span>
</span>
</label>
</div>
<div class="registration-privacy-policy__next">
<a href="/" class="cta cta--r-disabled ">
<p>NEXT</p>
</a>
</div>
</div>
<div class="registration-personal-details registration_hide">
<div class="registration-personal-details__title">
<div class="registration-form-title">
Now tell us a bit about yourself!
</div>
</div>
<div class="registration-personal-details__sub-title">
<div class="registration-form-sub-title">
Please fill in all fields
</div>
</div>
<div class="registration-error registration-server-error registration_hide" role="alert">
<span class="registration-error-message">sitecore api error</span>
</div>
<div class="registration-personal-details__fields">
<div class="registration-personal-details__first-name">
<div class="registration-text-input-container">
<label class="registration-text-input-container__label" for=firstName>
First name
</label>
<input class="registration-text-input-container__text-input" type="text" disabled name="firstName" id="firstName" autocomplete="given-name" placeholder="First name" />
<div class="registration-error registration_hide" role="alert">
<span class="registration-error-message registration_hide" id="invalid-b2c-contact-number">invalid-b2c-contact-number</span>
<span class="registration-error-message registration_hide" id="invalid-input-required">Requird</span>
<span class="registration-error-message registration_hide" id="invalid-input-length">invalid-length</span>
<span class="registration-error-message registration_hide" id="invalid-input-alphabets-only">alphabets-only</span>
<span class="registration-error-message registration_hide" id="invalid-input-alphanumeric">alpha numeric</span>
<span class="registration-error-message registration_hide" id="invalid-character-length">length-should-be-9characters</span>
</div>
</div>
</div>
<div class="registration-personal-details__surname">
<div class="registration-text-input-container">
<label class="registration-text-input-container__label" for=surname>
Surname
</label>
<input class="registration-text-input-container__text-input" type="text" disabled name="surname" id="surname" autocomplete="family-name" placeholder="Surname" />
<div class="registration-error registration_hide" role="alert">
<span class="registration-error-message registration_hide" id="invalid-b2c-contact-number">invalid-b2c-contact-number</span>
<span class="registration-error-message registration_hide" id="invalid-input-required">Requird</span>
<span class="registration-error-message registration_hide" id="invalid-input-length">invalid-length</span>
<span class="registration-error-message registration_hide" id="invalid-input-alphabets-only">alphabets-only</span>
<span class="registration-error-message registration_hide" id="invalid-input-alphanumeric">alpha numeric</span>
<span class="registration-error-message registration_hide" id="invalid-character-length">length-should-be-9characters</span>
</div>
</div>
</div>
<div class="registration-personal-details__contact-number">
<div class="registration-text-input-container">
<label class="registration-text-input-container__label" for=contactNumber>
Contact Numbe
</label>
<input class="registration-text-input-container__text-input" type="tel" name="contactNumber" id="contactNumber" autocomplete="tel" placeholder="Contact Numbe" />
<div class="registration-error registration_hide" role="alert">
<span class="registration-error-message registration_hide" id="invalid-b2c-contact-number">invalid-b2c-contact-number</span>
<span class="registration-error-message registration_hide" id="invalid-input-required">Requird</span>
<span class="registration-error-message registration_hide" id="invalid-input-length">invalid-length</span>
<span class="registration-error-message registration_hide" id="invalid-input-alphabets-only">alphabets-only</span>
<span class="registration-error-message registration_hide" id="invalid-input-alphanumeric">alpha numeric</span>
<span class="registration-error-message registration_hide" id="invalid-character-length">length-should-be-9characters</span>
</div>
</div>
</div>
</div>
<div class="registration-personal-details__next-to-photo-upload">
<a href="/" class="cta cta--r-disabled ">
<p>NEXT</p>
</a>
</div>
</div>
<div class="registration-upload-passport registration_hide">
<div class="title">
<div class="registration-form-title">
Please upload a photo of your passport photo page
</div>
</div>
<div class="sub-title">
<div class="registration-form-sub-title">
This should be a JPEG format and no larger than 1.5MB file size. Please ensure that the scan has no reflections and that all information is clearly readable.
</div>
</div>
<div class="registration-error registration-server-error registration_hide" role="alert">
<span class="registration-error-message">sitecore api error</span>
</div>
<div class="registration-upload-passport__image-container">
<img data-allowedSize="5" data-placeholderImage="/assets/example-content/passport.svg" alt="registration passport" class="img" src="/assets/example-content/passport.svg" id="registration-upload-passport__img" loading="lazy" />
</div>
<div class="cta">
<div class="registration-upload-passport__upload-passport-photo">
<a href="/" class="cta cta--r-primary ">
<p>UPLOAD FROM FILES</p>
</a>
</div>
<div class="registration-upload-passport__take-passport-photo-click" data-take-photo="Take photo" data-take-photo-error="Your devices camera is not supported. Please upload a picture of your passport.">
<a href="/" class="cta cta--r-secondary ">
<p>TAKE PHOTO</p>
</a>
</div>
</div>
</div>
<div class="registration-passport-details registration_hide">
<div class="title">
<div class="registration-form-title">
Passport uploaded successfully
</div>
</div>
<div class="sub-title">
<div class="registration-form-sub-title">
Please enter your passport information below
</div>
</div>
<div class="registration-error registration-server-error registration_hide" role="alert">
<span class="registration-error-message">sitecore api error</span>
</div>
<div class="passport">
<img src="/assets/example-content/rectangleGuideline.svg" alt="rectangleGuideline" loading="lazy">
</div>
<div class="form-fields">
<div class="place-of-birth">
<div class="registration-text-input-container">
<label class="registration-text-input-container__label" for=placeOfBirth>
Place of birth
</label>
<input class="registration-text-input-container__text-input" type="text" name="placeOfBirth" id="placeOfBirth" autocomplete="address-level1" placeholder="Place of birth (City or town)" />
<div class="registration-error registration_hide" role="alert">
<span class="registration-error-message registration_hide" id="invalid-b2c-contact-number">invalid-b2c-contact-number</span>
<span class="registration-error-message registration_hide" id="invalid-input-required">Requird</span>
<span class="registration-error-message registration_hide" id="invalid-input-length">invalid-length</span>
<span class="registration-error-message registration_hide" id="invalid-input-alphabets-only">alphabets-only</span>
<span class="registration-error-message registration_hide" id="invalid-input-alphanumeric">alpha numeric</span>
<span class="registration-error-message registration_hide" id="invalid-character-length">length-should-be-9characters</span>
</div>
</div>
</div>
<div class="passport-number">
<div class="registration-text-input-container">
<label class="registration-text-input-container__label" for=passportNumber>
Passport number
</label>
<input class="registration-text-input-container__text-input" type="text" name="passportNumber" id="passportNumber" autocomplete="off" placeholder="Passport number" />
<div class="registration-error registration_hide" role="alert">
<span class="registration-error-message registration_hide" id="invalid-b2c-contact-number">invalid-b2c-contact-number</span>
<span class="registration-error-message registration_hide" id="invalid-input-required">Requird</span>
<span class="registration-error-message registration_hide" id="invalid-input-length">invalid-length</span>
<span class="registration-error-message registration_hide" id="invalid-input-alphabets-only">alphabets-only</span>
<span class="registration-error-message registration_hide" id="invalid-input-alphanumeric">alpha numeric</span>
<span class="registration-error-message registration_hide" id="invalid-character-length">length-should-be-9characters</span>
</div>
</div>
</div>
<div class="passport-expiry untouched-element">
<div class="registration-text-input-container">
<label class="registration-text-input-container__label" for=passportExpiry>
Passport Expiry
</label>
<input class="registration-text-input-container__text-input" type="date" max='2024-12-31' name="passportExpiry" id="passportExpiry" autocomplete="bday" placeholder="Passport Expiry" />
<div class="registration-error registration_hide" role="alert">
<span class="registration-error-message registration_hide" id="invalid-b2c-contact-number">invalid-b2c-contact-number</span>
<span class="registration-error-message registration_hide" id="invalid-input-required">Requird</span>
<span class="registration-error-message registration_hide" id="invalid-input-length">invalid-length</span>
<span class="registration-error-message registration_hide" id="invalid-input-alphabets-only">alphabets-only</span>
<span class="registration-error-message registration_hide" id="invalid-input-alphanumeric">alpha numeric</span>
<span class="registration-error-message registration_hide" id="invalid-character-length">length-should-be-9characters</span>
</div>
</div>
</div>
<div class="nationality untouched-element">
<div class="registration-custom-select registration-text-input-container">
<label class="registration-text-input-container__label registration-custom-select__label" for="nationality">
Nationality
</label>
<select name=nationality id=nationality aria-label=Nationality>
<option disabled selected value="select">Nationality</option>
<option value="Pakistan">Saab</option>
<option value="Srilanka">Mercedes</option>
<option value="Nepal">Audi</option>
</select>
<div class="registration-error registration_hide" role="alert">
<span class="registration-error-message registration_hide" id="invalid-b2c-contact-number">invalid-b2c-contact-number</span>
<span class="registration-error-message registration_hide" id="invalid-input-required">Requird</span>
<span class="registration-error-message registration_hide" id="invalid-input-length">invalid-length</span>
<span class="registration-error-message registration_hide" id="invalid-input-alphabets-only">alphabets-only</span>
<span class="registration-error-message registration_hide" id="invalid-input-alphanumeric">alpha numeric</span>
<span class="registration-error-message registration_hide" id="invalid-character-length">length-should-be-9characters</span>
</div>
</div>
</div>
<div class="cta">
<div class="next-to-step-5">
<a href="/" class="cta cta--r-disabled " id="nextBtn">
<p>NEXT</p>
</a>
</div>
<div class="next-to-step-3">
<a href="/" class="cta cta--r-secondary " id="uploadNewPhoto">
<p>UPLOAD NEW PHOTO (OPTIONAL)</p>
</a>
</div>
</div>
</div>
</div>
<div class="registration-upload-profile registration_hide">
<div class="title">
<div class="registration-form-title">
Please upload a profile photo
</div>
</div>
<div class="sub-title">
<div class="registration-form-sub-title" data-instruction1="This should be a JPEG format and no larger than 1.5MB file size. Please ensure that the scan has no reflections and that all information is clearly readable." data-instruction2="Please resize and edit until you’re happy" data-instruction3="title 3">
This should be a JPEG format and no larger than 1.5MB file size. Please ensure that the scan has no reflections and that all information is clearly readable.
</div>
</div>
<div class="registration-error registration-server-error registration_hide" role="alert">
<span class="registration-error-message">sitecore api error</span>
</div>
<div class="registration-upload-profile__image-container">
<img data-allowedSize="5" data-placeholderImage="/assets/example-content/account_box.svg" alt="registration passport" class="registration-upload-profile__img" src="/assets/example-content/account_box.svg" id="rregistration-upload-profile__img" loading="lazy" />
</div>
<div class="cta registration-image-upload-btn-container">
<div class="registration-upload-profile__upload-profile-photo">
<a href="/" class="cta cta--r-primary " id="btnUploadPhoto">
<p>UPLOAD FROM FILES</p>
</a>
</div>
<div class="registration-upload-profile__take-profile-photo-click" data-take-photo="Take photo" data-take-photo-error="Your devices camera is not supported. Please upload your profile picture.">
<a href="/" class="cta cta--r-secondary " id="btnTakePhoto">
<p>TAKE PHOTO</p>
</a>
</div>
</div>
<div class="cta registration-image-crop-btn-container registration_hide">
<div class="registration-image-crop-zoom-container">
<span class="registration-image-crop-zoom-label">ZOOM</span>
<div id="cropme-slider"></div>
</div>
<div class="registration-image-crop-rotate-container">
<span class="registration-image-crop-rotate-label">ROTATE</span>
<div id="cropme-rotation-slider"></div>
</div>
<div class="registration-upload-profile__next_btn">
<a href="/" class="cta cta--r-primary " id="nextBtn">
<p>NEXT</p>
</a>
</div>
<div class="registration-upload-profile__take-new-photo">
<a href="/" class="cta cta--r-secondary " id="uploadNewPhoto">
<p>UPLOAD NEW PHOTO (OPTIONAL)</p>
</a>
</div>
</div>
</div>
<div class="registration-add-junior-option registration_hide">
<div class="registration-add-junior-option__title">
<div class="registration-form-title">
Are you planning on signing up junior members as part of this payment?
</div>
</div>
<div class="sub-title">
<div class="registration-form-sub-title">
This image doesn’t meet our standards. Please resubmit or retake a photo that meets our guidelines
</div>
</div>
<div class="registration-error registration-server-error registration_hide" role="alert">
<span class="registration-error-message">sitecore api error</span>
</div>
<div class="registration-add-junior-option__yes">
<a href="/" class="cta cta--r-primary ">
<p>Yes, I will be adding junior members</p>
</a>
</div>
<div class="registration-add-junior-option__no">
<a href="/" class="cta cta--r-secondary ">
<p>No, I will only sign myself up</p>
</a>
</div>
</div>
<div class="registration-junior-flow registration_skip registration_hide">
<div class="registration-select-junior registration_hide" data-junior="true">
<div class="registration-personal-details__title">
<div class="registration-form-title">
Who will be joining?
</div>
</div>
<div class="registration-personal-details__sub-title">
<div class="registration-form-sub-title">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do abore et dolore magna aliqexercitation commodo consequat.
</div>
</div>
<div class="registration-error registration-server-error registration_hide" role="alert">
<span class="registration-error-message">sitecore api error</span>
</div>
<div class="registration-select-junior_list-container">
<div class="registration-select-junior__selectAll-container">
<a href="/" class="registration-select-junior__selectAll">Select all</a>
</div>
<div class="registration-select-junior_list">
<label class="checkbox checkbox--primary">
<span class="label">Will Young</span>
<input type="checkbox" data-fan="67890" name="junior1" data-name="Ram" data-individual-id="RAMA">
<span class="checkmark-container">
<span class="checkmark"></span>
</span>
</label>
<label class="checkbox checkbox--primary">
<span class="label">Gareth Gates</span>
<input type="checkbox" data-fan="98765" name="junior2" data-name="Ravan" data-individual-id="RAVANA">
<span class="checkmark-container">
<span class="checkmark"></span>
</span>
</label>
</div>
</div>
<div class="registration-select-junior__next">
<a href="/" class="cta cta--r-disabled ">
<p>R Disabled</p>
</a>
</div>
</div>
<div class="registration-upload-passport registration_hide">
<div class="title">
<div class="registration-form-title">
Please upload a photo of your passport photo page
</div>
</div>
<div class="sub-title">
<div class="registration-form-sub-title">
This should be a JPEG format and no larger than 1.5MB file size. Please ensure that the scan has no reflections and that all information is clearly readable.
</div>
</div>
<div class="registration-error registration-server-error registration_hide" role="alert">
<span class="registration-error-message">sitecore api error</span>
</div>
<div class="registration-upload-passport__image-container">
<img data-allowedSize="5" data-placeholderImage="/assets/example-content/passport.svg" alt="registration passport" class="img" src="/assets/example-content/passport.svg" id="registration-upload-passport__img" loading="lazy" />
</div>
<div class="cta">
<div class="registration-upload-passport__upload-passport-photo">
<a href="/" class="cta cta--r-primary ">
<p>UPLOAD FROM FILES</p>
</a>
</div>
<div class="registration-upload-passport__take-passport-photo-click" data-take-photo="Take photo" data-take-photo-error="Your devices camera is not supported. Please upload a picture of your passport.">
<a href="/" class="cta cta--r-secondary ">
<p>TAKE PHOTO</p>
</a>
</div>
</div>
</div>
<div class="registration-passport-details registration_hide">
<div class="title">
<div class="registration-form-title">
Passport uploaded successfully
</div>
</div>
<div class="sub-title">
<div class="registration-form-sub-title">
Please enter your passport information below
</div>
</div>
<div class="registration-error registration-server-error registration_hide" role="alert">
<span class="registration-error-message">sitecore api error</span>
</div>
<div class="passport">
<img src="/assets/example-content/rectangleGuideline.svg" alt="rectangleGuideline" loading="lazy">
</div>
<div class="form-fields">
<div class="place-of-birth">
<div class="registration-text-input-container">
<label class="registration-text-input-container__label" for=placeOfBirth>
Place of birth
</label>
<input class="registration-text-input-container__text-input" type="text" name="placeOfBirth" id="placeOfBirth" autocomplete="address-level1" placeholder="Place of birth (City or town)" />
<div class="registration-error registration_hide" role="alert">
<span class="registration-error-message registration_hide" id="invalid-b2c-contact-number">invalid-b2c-contact-number</span>
<span class="registration-error-message registration_hide" id="invalid-input-required">Requird</span>
<span class="registration-error-message registration_hide" id="invalid-input-length">invalid-length</span>
<span class="registration-error-message registration_hide" id="invalid-input-alphabets-only">alphabets-only</span>
<span class="registration-error-message registration_hide" id="invalid-input-alphanumeric">alpha numeric</span>
<span class="registration-error-message registration_hide" id="invalid-character-length">length-should-be-9characters</span>
</div>
</div>
</div>
<div class="passport-number">
<div class="registration-text-input-container">
<label class="registration-text-input-container__label" for=passportNumber>
Passport number
</label>
<input class="registration-text-input-container__text-input" type="text" name="passportNumber" id="passportNumber" autocomplete="off" placeholder="Passport number" />
<div class="registration-error registration_hide" role="alert">
<span class="registration-error-message registration_hide" id="invalid-b2c-contact-number">invalid-b2c-contact-number</span>
<span class="registration-error-message registration_hide" id="invalid-input-required">Requird</span>
<span class="registration-error-message registration_hide" id="invalid-input-length">invalid-length</span>
<span class="registration-error-message registration_hide" id="invalid-input-alphabets-only">alphabets-only</span>
<span class="registration-error-message registration_hide" id="invalid-input-alphanumeric">alpha numeric</span>
<span class="registration-error-message registration_hide" id="invalid-character-length">length-should-be-9characters</span>
</div>
</div>
</div>
<div class="passport-expiry untouched-element">
<div class="registration-text-input-container">
<label class="registration-text-input-container__label" for=passportExpiry>
Passport Expiry
</label>
<input class="registration-text-input-container__text-input" type="date" max='2024-12-31' name="passportExpiry" id="passportExpiry" autocomplete="bday" placeholder="Passport Expiry" />
<div class="registration-error registration_hide" role="alert">
<span class="registration-error-message registration_hide" id="invalid-b2c-contact-number">invalid-b2c-contact-number</span>
<span class="registration-error-message registration_hide" id="invalid-input-required">Requird</span>
<span class="registration-error-message registration_hide" id="invalid-input-length">invalid-length</span>
<span class="registration-error-message registration_hide" id="invalid-input-alphabets-only">alphabets-only</span>
<span class="registration-error-message registration_hide" id="invalid-input-alphanumeric">alpha numeric</span>
<span class="registration-error-message registration_hide" id="invalid-character-length">length-should-be-9characters</span>
</div>
</div>
</div>
<div class="nationality untouched-element">
<div class="registration-custom-select registration-text-input-container">
<label class="registration-text-input-container__label registration-custom-select__label" for="nationality">
Nationality
</label>
<select name=nationality id=nationality aria-label=Nationality>
<option disabled selected value="select">Nationality</option>
<option value="Pakistan">Saab</option>
<option value="Srilanka">Mercedes</option>
<option value="Nepal">Audi</option>
</select>
<div class="registration-error registration_hide" role="alert">
<span class="registration-error-message registration_hide" id="invalid-b2c-contact-number">invalid-b2c-contact-number</span>
<span class="registration-error-message registration_hide" id="invalid-input-required">Requird</span>
<span class="registration-error-message registration_hide" id="invalid-input-length">invalid-length</span>
<span class="registration-error-message registration_hide" id="invalid-input-alphabets-only">alphabets-only</span>
<span class="registration-error-message registration_hide" id="invalid-input-alphanumeric">alpha numeric</span>
<span class="registration-error-message registration_hide" id="invalid-character-length">length-should-be-9characters</span>
</div>
</div>
</div>
<div class="cta">
<div class="next-to-step-5">
<a href="/" class="cta cta--r-disabled " id="nextBtn">
<p>NEXT</p>
</a>
</div>
<div class="next-to-step-3">
<a href="/" class="cta cta--r-secondary " id="uploadNewPhoto">
<p>UPLOAD NEW PHOTO (OPTIONAL)</p>
</a>
</div>
</div>
</div>
</div>
<div class="registration-upload-profile registration_hide">
<div class="title">
<div class="registration-form-title">
Please upload a profile photo
</div>
</div>
<div class="sub-title">
<div class="registration-form-sub-title" data-instruction1="This should be a JPEG format and no larger than 1.5MB file size. Please ensure that the scan has no reflections and that all information is clearly readable." data-instruction2="Please resize and edit until you’re happy" data-instruction3="title 3">
This should be a JPEG format and no larger than 1.5MB file size. Please ensure that the scan has no reflections and that all information is clearly readable.
</div>
</div>
<div class="registration-error registration-server-error registration_hide" role="alert">
<span class="registration-error-message">sitecore api error</span>
</div>
<div class="registration-upload-profile__image-container">
<img data-allowedSize="5" data-placeholderImage="/assets/example-content/account_box.svg" alt="registration passport" class="registration-upload-profile__img" src="/assets/example-content/account_box.svg" id="rregistration-upload-profile__img" loading="lazy" />
</div>
<div class="cta registration-image-upload-btn-container">
<div class="registration-upload-profile__upload-profile-photo">
<a href="/" class="cta cta--r-primary " id="btnUploadPhoto">
<p>UPLOAD FROM FILES</p>
</a>
</div>
<div class="registration-upload-profile__take-profile-photo-click" data-take-photo="Take photo" data-take-photo-error="Your devices camera is not supported. Please upload your profile picture.">
<a href="/" class="cta cta--r-secondary " id="btnTakePhoto">
<p>TAKE PHOTO</p>
</a>
</div>
</div>
<div class="cta registration-image-crop-btn-container registration_hide">
<div class="registration-image-crop-zoom-container">
<span class="registration-image-crop-zoom-label">ZOOM</span>
<div id="cropme-slider"></div>
</div>
<div class="registration-image-crop-rotate-container">
<span class="registration-image-crop-rotate-label">ROTATE</span>
<div id="cropme-rotation-slider"></div>
</div>
<div class="registration-upload-profile__next_btn">
<a href="/" class="cta cta--r-primary " id="nextBtn">
<p>NEXT</p>
</a>
</div>
<div class="registration-upload-profile__take-new-photo">
<a href="/" class="cta cta--r-secondary " id="uploadNewPhoto">
<p>UPLOAD NEW PHOTO (OPTIONAL)</p>
</a>
</div>
</div>
</div>
</div>
<div class="registration-terms-and-condition registration_hide">
<div class="title">
<div class="registration-form-title">
Please read the following statement and terms and conditions:
</div>
</div>
<div class="registration-error registration-server-error registration_hide" role="alert">
<span class="registration-error-message">sitecore api error</span>
</div>
<div class="registration-terms-container">
<p>
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
<div class="checkbox-container">
<label class="checkbox checkbox--secondary">
<span class="label">I have read and agree to the England Supporters Travel Club Privacy Policy and Terms and Conditions</span>
<input type="checkbox" name="ESTCChecked">
<span class="checkmark-container">
<span class="checkmark"></span>
</span>
</label>
<label class="checkbox checkbox--secondary registration_hide">
<span class="label">I have read and agree to the England Supporters Travel Club Privacy Policy and Terms and
Conditions</span>
<input type="checkbox" name="YouthESTCChecked">
<span class="checkmark-container">
<span class="checkmark"></span>
</span>
</label>
</div>
<div class="registration-error-container registration-error registration_hide" role="alert">
<span class="registration-error-message registration_hide" id="invalid-estc">invalid-estc</span>
<span class="registration-error-message registration_hide" id="invalid-youth-estc">invalid-youth-estc</span>
</div>
</div>
<div class="cta-container">
<div class="registration-terms-and-condition__next" data-error-message="In order to become a Junior England Supporters Clubs member, you have to agree to the Terms and Conditions and Privacy Policy.">
<a href="/" class="cta cta--r-disabled ">
<p>Next</p>
</a>
</div>
<div class="registration-terms-and-condition__remove_junior_and_continue registration_hide" data-error-message="In order to become a Junior England Supporters Clubs member, you have to agree to the Terms and Conditions and Privacy Policy.">
<a href="/" class="cta cta--r-secondary ">
<p>Remove Junior and Continue</p>
</a>
</div>
</div>
</div>
<div class="registration-sign-and-declaration registration_hide">
<div class="title">
<div class="registration-form-title">
Please read the following statement and declaration:
</div>
</div>
<div class="registration-error registration-server-error registration_hide" role="alert">
<span class="registration-error-message">sitecore api error</span>
</div>
<div class="registration-terms-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
<p>
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<div class="registration-checkbox-container1">
<label class="checkbox checkbox--secondary">
<span class="label">Yes</span>
<input type="checkbox" name="faPolicy1">
<span class="checkmark-container">
<span class="checkmark"></span>
</span>
</label>
<label class="checkbox checkbox--secondary">
<span class="label">No</span>
<input type="checkbox" name="faPolicy1">
<span class="checkmark-container">
<span class="checkmark"></span>
</span>
</label>
<div class="registration-error registration-server-error registration_hide" role="alert">
<span class="registration-error-message">sitecore api error</span>
</div>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
<p>
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<div class="registration-checkbox-container2">
<label class="checkbox checkbox--secondary">
<span class="label">Yes</span>
<input type="checkbox" name="faPolicy1">
<span class="checkmark-container">
<span class="checkmark"></span>
</span>
</label>
<label class="checkbox checkbox--secondary">
<span class="label">No</span>
<input type="checkbox" name="faPolicy1">
<span class="checkmark-container">
<span class="checkmark"></span>
</span>
</label>
<div class="registration-error registration-server-error registration_hide" role="alert">
<span class="registration-error-message">sitecore api error</span>
</div>
</div>
</div>
<div class="registration-sign-and-declaration__next">
<a href="/" class="cta cta--r-disabled ">
<p>Next</p>
</a>
</div>
</div>
<div class="registration-membership-summary registration_hide">
<div class="title">
<div class="registration-form-title">
Membership details
</div>
</div>
<div class="sub-title">
<div class="registration-membership-sub-title">Please check that the below information is correct before making payment.</div>
</div>
<div class="registration-error registration-server-error registration_hide" role="alert">
<span class="registration-error-message">sitecore api error</span>
</div>
<div class="sub-title">
<div class="registration-form-sub-title">
</div>
</div>
<div class="membership-container" data-total-cost="TOTAL COST" data-adult-mebership-count="Adult Membership x" data-junior-membership-count="Junior Membership x" data-england-supports-travel-club-expiring=" x England Supporters Travel Club expiring" data-adult-membership-details="Adult Membership Details" data-name="Name" data-fan="FAN"></div>
<div class="separator"></div>
<div class="membership-container-junior"></div>
<div class="separator"></div>
<div class="membership-container-junior"></div>
<div class="cta">
<div class="registration-membership-summary__pay">
<a href="/" class="cta cta--r-primary ">
<p>PAY</p>
</a>
</div>
<div class="registration-membership-summary__add-junior">
<a href="/" class="cta cta--r-secondary ">
<p>ADD JUNIOR</p>
</a>
</div>
</div>
<div id="remove-junior-modal" class="modal-remove">
<div class="modal-remove-content">
<h2>Are you sure you want to remove junior?</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum iste optio fugit totam mollitia? Quisquam impedit, provident ipsa fuga vel aspernatur ipsam unde labore quasi doloremque ea harum, amet possimus?</p>
<div class="btn-remove-container">
<button class="btn-yes">YES</button>
<button class="btn-no">NO</button>
</div>
</div>
</div>
</div>
<div class="registration-new-junior-flow registration_hide">
<div class="registration-add-junior-member registration_hide">
<div class="registration-add-junior-member__title">
<div class="registration-form-title">
Add Junior members to your account
</div>
</div>
<div class="sub-title-warning registration_hide">
<div class="registration-form-sub-title">
Youve reached the maximum number of five juniors added to your account
</div>
</div>
<div class="sub-title">
<div class="registration-form-sub-title">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
<div class="registration-error registration-server-error registration_hide" role="alert">
<span class="registration-error-message">sitecore api error</span>
</div>
<div class="registration-member-container">
<div class="registration-member registration-member--secondary">
<div class="bar"></div>
<div class="container">
<div class="heading">
<span class="heading__key">Adult Membership details</span>
<span class="heading__value">J£105.00</span>
</div>
<div class="detail">
<div class="info info-header registration_hide">
<span class="info__key"></span>
<span class="info__value"></span>
</div>
<div class="info">
<span class="info__key">Gareth Young</span>
<span class="info__value">DOB: 02/02/2002</span>
</div>
</div>
</div>
</div>
</div>
<div class="cta-container">
<div class="registration-add-junior-member__addjunior">
<a href="/" class="cta cta--r-primary ">
<p>ADD JUNIOR</p>
</a>
</div>
<div class="registration-add-junior-member__back">
<a href="/" class="cta cta--r-secondary ">
<p>BACK</p>
</a>
</div>
</div>
</div>
<div class="registration-add-relation-to-child registration_hide" data-junior="true">
<div class="registration-add-relation-to-child__title">
<div class="registration-form-title">
How are you related to the child?
</div>
</div>
<div class="registration-add-relation-to-child__sub-title">
<div class="registration-form-sub-title">
The FA is committed to promoting child safety, which is why we ask you to answer this question honestly
</div>
</div>
<div class="registration-error registration-server-error registration_hide" role="alert">
<span class="registration-error-message">sitecore api error</span>
</div>
<div class="registration-add-relation-to-child_list-container">
<div class="registration-add-relation-to-child_list">
<label class="checkbox checkbox--primary">
<span class="label">Parent</span>
<input type="checkbox" value="parent" name="parent">
<span class="checkmark-container">
<span class="checkmark"></span>
</span>
</label>
<label class="checkbox checkbox--primary">
<span class="label">Carer</span>
<input type="checkbox" value="carer" name="carer">
<span class="checkmark-container">
<span class="checkmark"></span>
</span>
</label>
<label class="checkbox checkbox--primary">
<span class="label">Neither</span>
<input type="checkbox" value="neither" name="neither">
<span class="checkmark-container">
<span class="checkmark"></span>
</span>
</label>
</div>
</div>
<div class="registration-add-relation-to-child__next">
<a href="/" class="cta cta--r-disabled ">
<p>NEXT</p>
</a>
</div>
</div>
<div class="registration-error-junior-page registration_skip registration_hide">
<div class="registration-error-junior-page__title">
<div class="registration-form-title">
Sorry, you must be a parent ot legal guardian in order to add a youth to your profile
</div>
</div>
<div class="registration-error-junior-page__back">
<a href="/" class="cta cta--r-primary ">
<p>ADD ANOTHER JUNIOR</p>
</a>
</div>
</div>
<div class="registration-junior-details registration_hide">
<div class="registration-junior-details__title">
<div class="registration-form-title">
Now tell us a bit about the junior!
</div>
</div>
<div class="registration-junior-details__sub-title">
<div class="registration-form-sub-title">
Please fill in all fields
</div>
</div>
<div class="registration-error registration-server-error registration_hide" role="alert">
<span class="registration-error-message">sitecore api error</span>
</div>
<div class="registration-junior-details__fields">
<div class="registration-junior-details__first-name">
<div class="registration-text-input-container">
<label class="registration-text-input-container__label" for=firstName>
First name
</label>
<input class="registration-text-input-container__text-input" type="text" name="firstName" id="firstName" autocomplete="given-name" placeholder="First name" />
<div class="registration-error registration_hide" role="alert">
<span class="registration-error-message registration_hide" id="invalid-b2c-contact-number">invalid-b2c-contact-number</span>
<span class="registration-error-message registration_hide" id="invalid-input-required">Requird</span>
<span class="registration-error-message registration_hide" id="invalid-input-length">invalid-length</span>
<span class="registration-error-message registration_hide" id="invalid-input-alphabets-only">alphabets-only</span>
<span class="registration-error-message registration_hide" id="invalid-input-alphanumeric">alpha numeric</span>
<span class="registration-error-message registration_hide" id="invalid-character-length">length-should-be-9characters</span>
</div>
</div>
</div>
<div class="registration-junior-details__surname">
<div class="registration-text-input-container">
<label class="registration-text-input-container__label" for=surname>
Surname
</label>
<input class="registration-text-input-container__text-input" type="text" name="surname" id="surname" autocomplete="family-name" placeholder="Surname" />
<div class="registration-error registration_hide" role="alert">
<span class="registration-error-message registration_hide" id="invalid-b2c-contact-number">invalid-b2c-contact-number</span>
<span class="registration-error-message registration_hide" id="invalid-input-required">Requird</span>
<span class="registration-error-message registration_hide" id="invalid-input-length">invalid-length</span>
<span class="registration-error-message registration_hide" id="invalid-input-alphabets-only">alphabets-only</span>
<span class="registration-error-message registration_hide" id="invalid-input-alphanumeric">alpha numeric</span>
<span class="registration-error-message registration_hide" id="invalid-character-length">length-should-be-9characters</span>
</div>
</div>
</div>
<div class="DateOfBirth untouched-element">
<div class="registration-text-input-container">
<label class="registration-text-input-container__label" for=Date of birth>
Date of birth
</label>
<input class="registration-text-input-container__text-input" type="date" max='9999-12-31' name="Date of birth" id="date_of_birth" autocomplete="bday" placeholder="DD/MM/YYYY" />
<div class="registration-error registration_hide" role="alert">
<span class="registration-error-message registration_hide" id="invalid-b2c-contact-number">invalid-b2c-contact-number</span>
<span class="registration-error-message registration_hide" id="invalid-input-required">Requird</span>
<span class="registration-error-message registration_hide" id="invalid-input-length">invalid-length</span>
<span class="registration-error-message registration_hide" id="invalid-input-alphabets-only">alphabets-only</span>
<span class="registration-error-message registration_hide" id="invalid-input-alphanumeric">alpha numeric</span>
<span class="registration-error-message registration_hide" id="invalid-character-length">length-should-be-9characters</span>
</div>
</div>
</div>
<div class="gender untouched-element">
<div class="registration-custom-select registration-text-input-container">
<label class="registration-text-input-container__label registration-custom-select__label" for="Gender">
Gender
</label>
<select name=Gender id=gender aria-label=Gender>
<option disabled selected value="select">Please select</option>
<option value="Pakistan">Saab</option>
<option value="Srilanka">Mercedes</option>
<option value="Nepal">Audi</option>
</select>
<div class="registration-error registration_hide" role="alert">
<span class="registration-error-message registration_hide" id="invalid-b2c-contact-number">invalid-b2c-contact-number</span>
<span class="registration-error-message registration_hide" id="invalid-input-required">Requird</span>
<span class="registration-error-message registration_hide" id="invalid-input-length">invalid-length</span>
<span class="registration-error-message registration_hide" id="invalid-input-alphabets-only">alphabets-only</span>
<span class="registration-error-message registration_hide" id="invalid-input-alphanumeric">alpha numeric</span>
<span class="registration-error-message registration_hide" id="invalid-character-length">length-should-be-9characters</span>
</div>
</div>
</div>
</div>
<div class="registration-junior-details__next-to-last-step">
<a href="/" class="cta cta--r-disabled ">
<p>NEXT</p>
</a>
</div>
</div>
<div class="registration-junior-last-step registration_hide">
<div class="registration-junior-last-step__title">
<div class="registration-form-title">
Last step...
</div>
</div>
<div class="registration-junior-last-step__sub-title">
<div class="registration-form-sub-title">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
<div class="registration-junior-last-step__checkbox">
<label class="checkbox checkbox--secondary">
<span class="label">I agree to the Terms and Conditions and Privacy Policy</span>
<input type="checkbox" name="faPolicy1">
<span class="checkmark-container">
<span class="checkmark"></span>
</span>
</label>
</div>
<div class="registration-junior-last-step__next">
<a href="/" class="cta cta--r-disabled ">
<p>NEXT</p>
</a>
</div>
</div>
</div>
</div>
</div>
No notes defined.
/* No context defined. */
.registration-self-steps-container {
&__steps {
@keyframes fade_in_show {
0% {
opacity: 0;
transform: scale(0);
}
100% {
opacity: 1;
transform: scale(100%);
}
}
transition: all 2s linear;
@media screen and (min-width: $mq-medium) {
margin-right: 32px;
margin-left: 32px;
width: 375px;
}
&__step-count {
margin-bottom: 32px;
color: #b7c5e9;
font-weight: 400;
line-height: 25px;
font-size: 14px;
text-transform: uppercase;
}
.registration-self-welcome,
.registration-self-steps-container__steps,
.registration-self-steps-container__step-count-current,
.registration-privacy-policy,
.registration-personal-details,
.registration-upload-passport,
.registration-passport-details,
.registration-upload-profile,
.registration-add-junior-option,
.registration-terms-and-condition {
animation: fade_in_show 0.5s;
}
}
}
<div class="registration-self-steps-container">
<div class="registration-self-steps-container__steps">
<div class="registration-self-steps-container__steps__step-count registration_hide">Step <span
class="registration-self-steps-container__step-count-current">01</span> / <span class="registration-self-steps-container__total-steps">08</span></div>
{{render '@registration-self-welcome'}}
{{render '@registration-privacy-policy'}}
{{render '@registration-personal-details'}}
{{render '@registration-upload-passport'}}
{{render '@registration-passport-details'}}
{{render '@registration-upload-profile'}}
{{render '@registration-add-junior-option'}}
{{render '@registration-junior-flow'}}
{{render '@registration-terms-and-condition'}}
{{render '@registration-sign-and-declaration'}}
{{render '@registration-membership-summary'}}
{{render '@registration-new-junior-flow'}}
</div>
</div>