<div class="page-wrapper efl-article-page">
<section class="efl-hero-banner with-image" data-behavior="efl-hero-banner">
<div class="efl-hero-banner__wrapper">
<picture>
<source media="(max-width: 819px)" srcset="/assets/example-content/hero-banner-4.jpg">
<source media="(min-width: 820px)" srcset="/assets/example-content/hero-banner-3.jpg">
<img src="/assets/example-content/hero-banner-3.jpg" alt="">
</picture>
</div>
</section>
<div class="efl-page-content">
<div class="efl-page-content__tray">
<!-- two column block -->
<div class="efl-column-layout efl-column-layout--two">
<div class="efl-column-layout__col">
<!-- left column content -->
<div class="efl-article-info">
<div class="article-header">
<div class="article-header__category" data-category="Get Started">Interview</div>
<h1><span class="jumpTohide">Gareth Southgate: I want the players to play with freedom</span></h1>
<p>Gareth Southgate tells Peter Glynn that he wants young english players to have the freedom to express themselves</p>
</div>
<div class="tag-cloud--container">
<div class="tag-cloud">
<div class="tag-cloud__item">
<span>Article</span>
</div>
<div class="tag-cloud__item">
<span>All ages</span>
</div>
<div class="tag-cloud__item">
<span>Guide</span>
</div>
<div class="tag-cloud__item">
<span>Physical</span>
</div>
<div class="tag-cloud__item">
<span>Psychological</span>
</div>
<div class="tag-cloud__item">
<span>Social</span>
</div>
</div>
</div>
<div class="article-author article-author--crest">
<div class="article-author__inner">
<h4>William Dalton</h4>
<p>10 min read - 10 Mar 2020</p>
</div>
</div>
<div class="efl-learner-profile-in-page-bookmark" data-behavior="in-page-bookmark" data-user-fan-id="123456" data-bookmark-page-id="" data-bookmark-category="Article">
<div class="efl-learner-profile-in-page-bookmark__wrapper">
<a class="efl-learner-profile-in-page-bookmark__download" href="/" tabindex="0" aria-label="download"></a>
<button class="efl-learner-profile-in-page-bookmark__link logged-in" aria-label="bookmark this page"><span>Bookmark</span></button>
<button class="efl-learner-profile-in-page-bookmark__share-button" aria-label="share this page"></button>
<div class="efl-learner-profile-in-page-bookmark__list hidden">
<p class="title" data-bookmark-title-add="Add to list" data-bookmark-title-remove="Remove bookmark from">Add to list</p>
<a class="bookmark-remove-all hidden" tabindex="0">Remove from all</a>
<div class="bookmark-list">
<div aria-checked="true" class="bookmark-list--item">
<input type="checkbox" id="checkbox--my-bookmark-list" value="My Bookmark list" class="">
<label for="checkbox--my-bookmark-list">My Bookmark list</label>
</div>
<div aria-checked="false" class="bookmark-list--item">
<input type="checkbox" id="checkbox--attacking-list" value="Attacking list" class="">
<label for="checkbox---attacking-list">Attacking list</label>
</div>
<div aria-checked="false" class="bookmark-list--item">
<input type="checkbox" id="checkbox--defending-list" value="Defending list" class="">
<label for="checkbox---defending-list">Defending list</label>
</div>
<div aria-checked="false" class="bookmark-list--item">
<input type="checkbox" id="checkbox--defending-list" value="coaching" class="">
<label for="checkbox---coaching">Coaching</label>
</div>
</div>
<a class="bookmark-create-list" tabindex="0">Create a new bookmark list</a>
<a class="bookmark-done">Done</a>
<a href="#" class="cta cta--primary view-all-bookmarks" tabindex="0">View all bookmarks</a>
</div>
<div class="efl-learner-profile-in-page-bookmark__share--popup hidden jump-to-hide">
<div class="efl-learner-profile__social-links__list">
<div>
<div class="copy" data-copied-text="Link Copied!" data-copy-url="http://www.google.co.uk/" role="button" aria-label="Copy link" tabindex="0">
<img src=/assets/example-content/learner-profile/copy.svg>
</div>
<p>Copy link</p>
</div>
<div>
<a href="#" aria-label="Facebook">
<img src=/assets/example-content/learner-profile/facebook.svg>
</a>
<p>Facebook</p>
</div>
<div>
<a href="#" aria-label="Twitter">
<img src=/assets/example-content/learner-profile/twitter.svg>
</a>
<p>Twitter</p>
</div>
<div>
<a href="#" aria-label="Linkedin">
<img src=/assets/example-content/learner-profile/linkedin.svg>
</a>
<p>Linkedin</p>
</div>
<div>
<a href="#" aria-label="Whatsapp">
<img src=/assets/example-content/learner-profile/whatsapp.svg>
</a>
<p>Whatsapp</p>
</div>
</div>
</div>
</div>
<div class="efl-learner-profile-in-page-bookmark__signin-popup hidden">
<h3><span class="jumpTohide">SIGN IN</span></h3>
<div class="popup-copy">
In order to bookmark this article, please Sign In or Create an EFL Account.
</div>
<a href="#" class="cta cta--primary in-page-bookmark-login" tabindex="0">Login</a>
<a href="#" class="cta cta--primary in-page-bookmark-signup" tabindex="0">Sign up</a>
</div>
<div class="efl-learner-profile__section efl-learner-profile-bookmark__popup hidden">
<div class="steps step1">
<div class="efl-learner-profile__section--header">
<h4 class="create-bookmark-list" data-create-heading="Create list" data-edit-heading="Rename list">Create list</h4>
</div>
<div class="efl-learner-profile-bookmark__popup--copy" data-create-text="Give your list a name, then select 'create'." data-update-text="Give your list a name, then select 'save'.">
Give your list a name, then select 'create'.
</div>
<div class="efl-learner-profile-bookmark__popup--form">
<label>List name</label>
<input type="text" placeholder="Prompt text" maxlength="100" class="bookmark-list-name" aria-label="list name" />
<p><span class="bookmark-list-name-count">0</span>/100</p>
<div class="bookmark-desc-wrapper hidden">
<label>List description</label>
<textarea placeholder="Prompt text" maxlength="500" class="bookmark-list-desc" aria-label="list description"></textarea>
<p><span class="bookmark-list-desc-count">0</span>/500</p>
</div>
<div class="bookmark-add-desc" role="button" tabindex="0" data-add-text="Optional - add list description" data-cancel-text="Cancel adding list description" aria-label="Optional - add list description">Optional - add list description</div>
<button class="cta cta--primary create-new-bookmark" aria-label="create new bookmark">
<span>create</span>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="20px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<rect x="0" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="8" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="16" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
</svg>
</button>
<button class="cta cta--primary edit-bookmark-list hidden" aria-label="save bookmark list">
<span>save</span>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="20px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<rect x="0" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="8" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="16" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
</svg>
</button>
<button class="cta cta--primary cancel-create-bookmark" aria-label="cancel create bookmark">cancel</button>
<input type="hidden" class="bookmark-list-article-link" value="/articles">
<input type="hidden" class="bookmark-list-session-link" value="/sessions">
</div>
</div>
<div class="steps step2 hidden">
<div class="efl-learner-profile__section--header">
<h4 class="exist">List already exists</h4>
</div>
<div class="efl-learner-profile__section--nocourse-copy">
The name you've chosen for this list already exists.
</div>
<button class="cta cta--primary edit-bookmark-name" aria-label="edit name bookmark">Edit name</button>
</div>
<div class="steps step3 hidden">
<div class="efl-learner-profile__section--header">
<h4 class="exist">Delete list</h4>
</div>
<div class="efl-learner-profile__section--nocourse-copy no-border">
Are you sure you want to delete this list?
</div>
<button class="cta cta--primary delete-bookmark-list" aria-label="yes, delete this list">
<span>Yes, delete this list</span>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="20px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<rect x="0" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="8" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="16" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
</svg>
</button>
<button class="cta cta--primary cancel-bookmark-delete" aria-label="no, return to list">no, return to list</button>
</div>
<div class="steps step4 hidden">
<div class="efl-learner-profile__section--header">
<h4 class="exist">Remove Bookmark</h4>
</div>
<div class="efl-learner-profile__section--nocourse-copy no-border">
Are you sure you want to remove this bookmark?
</div>
<button class="cta cta--primary remove-bookmark-item" aria-label="yes, remove bookmark item">Yes, remove this bookmark</button>
<button class="cta cta--primary cancel-remove-bookmark" aria-label="no, return to list">No, return to list</button>
</div>
<div class="steps step5 hidden">
<div class="efl-learner-profile__section--header">
<h4 class="exist">Innapropriate content</h4>
</div>
<div class="efl-learner-profile__section--nocourse-copy">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<button class="cta cta--primary error-bookmark-name" aria-label="edit name error bookmark">Edit name</button>
</div>
<div class="steps step6 hidden">
<div class="efl-learner-profile__section--header">
<h4 class="exist">Error</h4>
</div>
<div class="efl-learner-profile__section--nocourse-copy">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<button class="cta cta--primary server-error-bookmark" aria-label="try again bookmark">Try again</button>
</div>
</div>
</div>
</div>
<div class="global-rte-content">
<p><span class="articleDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
<a href="#">Hyperlink text to access the next page</a>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
</ul>
<p><em>Lorem ipsum dolor sit amet, consectetur</em></p>
<table>
<tbody>
<tr>
<td>
<p><strong>Objective</strong></p>
</td>
<td>
<p><strong>Space</strong></p>
</td>
<td>
<p><strong>Task</strong></p>
</td>
</tr>
<tr>
<td>
<p>Play forward</p>
</td>
<td>
<p>A narrow and long area, split into halves.</p>
</td>
<td>
<p><span data-contrast="none" class="TextRun SCXW222114590 BCX0" style="background-color: #ffffff; margin: 0px; padding: 0px; line-height: 17.2667px; color: #000000;"><span class="NormalTextRun SCXW222114590 BCX0" style="margin: 0px; padding: 0px;">Score as many goals as
possible. If you score, the number of one-touch passes made before the goal equates to the number of
points you’re awarded. For example, five one-touch passes equal five goals. </span></span></p>
</td>
</tr>
</table>
<p></p>
</div>
<div class="bundled-learning-inpage-question multiple-choice" id="bundled-learning-inpage-question" data-inpage-question-id="2940c4853c1348489866b8af512f762e" data-behavior="bundled-learning-inpage-question">
<button class="bundled-learning-inpage-question__close" aria-label="close What equipment could help you practice heading safely with an U12s team? question"></button>
<div class="bundled-learning-inpage-question__questions">
<div class="bundled-learning-inpage-question__questions--steps step1">
<div class="question">What equipment could help you practice heading safely with an U12s team?</div>
<ul class="option-container" data-answer='[ "Ballon", "Basketball" ]'>
<div class="options">
<input name="question-1" type="checkbox" id="quiz-2-option-1" value="Ballon">
<label for="quiz-2-option-1">Ballon</label>
</div>
<div class="options">
<input name="question-1" type="checkbox" id="quiz-2-option-2" value="Sponge ball">
<label for="quiz-2-option-2">Sponge ball</label>
</div>
<div class="options">
<input name="question-1" type="checkbox" id="quiz-2-option-3" value="Basketball">
<label for="quiz-2-option-3">Basketball</label>
</div>
<button class="cta cta--efl submit" id="submit-cta" aria-disabled="true" aria-label="submit question" data-cta-text="submit">Submit</button>
</ul>
</div>
<div class="bundled-learning-inpage-question__questions--steps step2 hidden">
<canvas class="right-canvas" width="72" height="72"></canvas>
<div class="feedback">That's right.</div>
<p>A toe poke is a useful technique for teams of any age.</p>
</div>
<div class="bundled-learning-inpage-question__questions--steps step3 hidden">
<canvas class="wrong-canvas" width="72" height="72"></canvas>
<div class="feedback">Not Quite.</div>
<p>Actually, a toe poke is a useful technique for teams of any age. Panle hight is dynamic to contnet, this
is an example of a longer answer</p>
</div>
</div>
</div>
</div>
<div class="efl-column-layout__col">
<!-- right column content -->
<div class="jump-to-section--container">
<section class="jump-to-section" data-behaviour="jump-to-section" aria-expanded="false" aria-controls="jump-to-section-minimize">
<div class="jump-to-section--header">
<h6 class="efl-heading-5">On this page</h6>
<div type="button" id="jump-to-section-minimize" class="jump-to-section-minimize" href="#">
<canvas id="jump-to-section-collapse-animation" width="25" height="48"></canvas>
</div>
</div>
<div class="jump-to-section__inner" data-share-collapse="false" data-bookmark-collapse="false">
<div class="jump-to-section__content">
<ul class="jump-to-section__links"></ul>
</div>
<div class="jump-to-section__actions">
<div class="jump-to-section__actions-group">
<div class="efl-learner-profile-in-page-bookmark" data-behavior="in-page-bookmark" data-user-fan-id="123456" data-bookmark-page-id="" data-bookmark-category="Article">
<div class="efl-learner-profile-in-page-bookmark__wrapper">
<a class="efl-learner-profile-in-page-bookmark__download" href="/" tabindex="0" aria-label="download"></a>
<button class="efl-learner-profile-in-page-bookmark__link logged-in" aria-label="bookmark this page"><span>Bookmark</span></button>
<button class="efl-learner-profile-in-page-bookmark__share-button" aria-label="share this page"></button>
<div class="efl-learner-profile-in-page-bookmark__list hidden">
<p class="title" data-bookmark-title-add="Add to list" data-bookmark-title-remove="Remove bookmark from">Add to list</p>
<a class="bookmark-remove-all hidden" tabindex="0">Remove from all</a>
<div class="bookmark-list">
<div aria-checked="true" class="bookmark-list--item">
<input type="checkbox" id="checkbox--my-bookmark-list" value="My Bookmark list" class="">
<label for="checkbox--my-bookmark-list">My Bookmark list</label>
</div>
<div aria-checked="false" class="bookmark-list--item">
<input type="checkbox" id="checkbox--attacking-list" value="Attacking list" class="">
<label for="checkbox---attacking-list">Attacking list</label>
</div>
<div aria-checked="false" class="bookmark-list--item">
<input type="checkbox" id="checkbox--defending-list" value="Defending list" class="">
<label for="checkbox---defending-list">Defending list</label>
</div>
<div aria-checked="false" class="bookmark-list--item">
<input type="checkbox" id="checkbox--defending-list" value="coaching" class="">
<label for="checkbox---coaching">Coaching</label>
</div>
</div>
<a class="bookmark-create-list" tabindex="0">Create a new bookmark list</a>
<a class="bookmark-done">Done</a>
<a href="#" class="cta cta--primary view-all-bookmarks" tabindex="0">View all bookmarks</a>
</div>
<div class="efl-learner-profile-in-page-bookmark__share--popup hidden jump-to-hide">
<div class="efl-learner-profile__social-links__list">
<div>
<div class="copy" data-copied-text="Link Copied!" data-copy-url="http://www.google.co.uk/" role="button" aria-label="Copy link" tabindex="0">
<img src=/assets/example-content/learner-profile/copy.svg>
</div>
<p>Copy link</p>
</div>
<div>
<a href="#" aria-label="Facebook">
<img src=/assets/example-content/learner-profile/facebook.svg>
</a>
<p>Facebook</p>
</div>
<div>
<a href="#" aria-label="Twitter">
<img src=/assets/example-content/learner-profile/twitter.svg>
</a>
<p>Twitter</p>
</div>
<div>
<a href="#" aria-label="Linkedin">
<img src=/assets/example-content/learner-profile/linkedin.svg>
</a>
<p>Linkedin</p>
</div>
<div>
<a href="#" aria-label="Whatsapp">
<img src=/assets/example-content/learner-profile/whatsapp.svg>
</a>
<p>Whatsapp</p>
</div>
</div>
</div>
</div>
<div class="efl-learner-profile-in-page-bookmark__signin-popup hidden">
<h3><span class="jumpTohide">SIGN IN</span></h3>
<div class="popup-copy">
In order to bookmark this article, please Sign In or Create an EFL Account.
</div>
<a href="#" class="cta cta--primary in-page-bookmark-login" tabindex="0">Login</a>
<a href="#" class="cta cta--primary in-page-bookmark-signup" tabindex="0">Sign up</a>
</div>
<div class="efl-learner-profile__section efl-learner-profile-bookmark__popup hidden">
<div class="steps step1">
<div class="efl-learner-profile__section--header">
<h4 class="create-bookmark-list" data-create-heading="Create list" data-edit-heading="Rename list">Create list</h4>
</div>
<div class="efl-learner-profile-bookmark__popup--copy" data-create-text="Give your list a name, then select 'create'." data-update-text="Give your list a name, then select 'save'.">
Give your list a name, then select 'create'.
</div>
<div class="efl-learner-profile-bookmark__popup--form">
<label>List name</label>
<input type="text" placeholder="Prompt text" maxlength="100" class="bookmark-list-name" aria-label="list name" />
<p><span class="bookmark-list-name-count">0</span>/100</p>
<div class="bookmark-desc-wrapper hidden">
<label>List description</label>
<textarea placeholder="Prompt text" maxlength="500" class="bookmark-list-desc" aria-label="list description"></textarea>
<p><span class="bookmark-list-desc-count">0</span>/500</p>
</div>
<div class="bookmark-add-desc" role="button" tabindex="0" data-add-text="Optional - add list description" data-cancel-text="Cancel adding list description" aria-label="Optional - add list description">Optional - add list description</div>
<button class="cta cta--primary create-new-bookmark" aria-label="create new bookmark">
<span>create</span>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="20px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<rect x="0" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="8" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="16" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
</svg>
</button>
<button class="cta cta--primary edit-bookmark-list hidden" aria-label="save bookmark list">
<span>save</span>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="20px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<rect x="0" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="8" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="16" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
</svg>
</button>
<button class="cta cta--primary cancel-create-bookmark" aria-label="cancel create bookmark">cancel</button>
<input type="hidden" class="bookmark-list-article-link" value="/articles">
<input type="hidden" class="bookmark-list-session-link" value="/sessions">
</div>
</div>
<div class="steps step2 hidden">
<div class="efl-learner-profile__section--header">
<h4 class="exist">List already exists</h4>
</div>
<div class="efl-learner-profile__section--nocourse-copy">
The name you've chosen for this list already exists.
</div>
<button class="cta cta--primary edit-bookmark-name" aria-label="edit name bookmark">Edit name</button>
</div>
<div class="steps step3 hidden">
<div class="efl-learner-profile__section--header">
<h4 class="exist">Delete list</h4>
</div>
<div class="efl-learner-profile__section--nocourse-copy no-border">
Are you sure you want to delete this list?
</div>
<button class="cta cta--primary delete-bookmark-list" aria-label="yes, delete this list">
<span>Yes, delete this list</span>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="20px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<rect x="0" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="8" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
<rect x="16" y="10" width="4" height="10" fill="#fff" opacity="0.2">
<animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
<animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
</rect>
</svg>
</button>
<button class="cta cta--primary cancel-bookmark-delete" aria-label="no, return to list">no, return to list</button>
</div>
<div class="steps step4 hidden">
<div class="efl-learner-profile__section--header">
<h4 class="exist">Remove Bookmark</h4>
</div>
<div class="efl-learner-profile__section--nocourse-copy no-border">
Are you sure you want to remove this bookmark?
</div>
<button class="cta cta--primary remove-bookmark-item" aria-label="yes, remove bookmark item">Yes, remove this bookmark</button>
<button class="cta cta--primary cancel-remove-bookmark" aria-label="no, return to list">No, return to list</button>
</div>
<div class="steps step5 hidden">
<div class="efl-learner-profile__section--header">
<h4 class="exist">Innapropriate content</h4>
</div>
<div class="efl-learner-profile__section--nocourse-copy">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<button class="cta cta--primary error-bookmark-name" aria-label="edit name error bookmark">Edit name</button>
</div>
<div class="steps step6 hidden">
<div class="efl-learner-profile__section--header">
<h4 class="exist">Error</h4>
</div>
<div class="efl-learner-profile__section--nocourse-copy">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<button class="cta cta--primary server-error-bookmark" aria-label="try again bookmark">Try again</button>
</div>
</div>
</div>
<hr>
<button class="jump-to-section-share-button" id="jump-to-section-share-button" aria-label="Share this page">Share</button>
</div>
<div class="jump-to-section__social-links">
<button class="efl-profile-left-popup__back" aria-label="go back to share"></button>
<div class="efl-learner-profile__social-links__list">
<div>
<div class="copy" data-copy-url="http://www.google.co.uk/" role="button" aria-label="Copy link" tabindex="0">
<img src=/assets/example-content/learner-profile/copy.svg>
</div>
</div>
<div>
<a href="#" aria-label="Facebook">
<img src=/assets/example-content/learner-profile/facebook.svg>
</a>
</div>
<div>
<a href="#" aria-label="Twitter">
<img src=/assets/example-content/learner-profile/twitter.svg>
</a>
</div>
<div>
<a class="linkedin" href="#" aria-label="Linkedin">
<img src=/assets/example-content/learner-profile/linkedin.svg>
</a>
</div>
<div>
<a href="#" aria-label="Whatsapp">
<img src=/assets/example-content/learner-profile/whatsapp.svg>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="efl-survey efl-survey--page-notification" data-behavior="efl-survey">
<div class="efl-survey__header">
<canvas id="efl-survey__header--icon" width="60" height="60"></canvas>
<button class="efl-survey__close" aria-label="close quiz notification"></button>
</div>
<div class="efl-survey__quiz">
<div class="efl-survey__quiz--steps step1">
<a class="heading" href="#bundled-learning-promo">Take our quick and easy quiz</a>
<p class="copy">Earn a trophy by completing 7 questions related to this article </p>
</div>
<div class="efl-survey__quiz--steps step2 hidden">
<h4>Well done, you’ve done this Quiz</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="efl-page-content__dynamic-placeholder">
<!-- below placeholders are dynamic we need to update based on component-->
<!-- full width column block -->
<div class="efl-column-layout efl-column-layout--one full-width">
<section class="session-setup">
<div class="session-setup__inner">
<h2>Session setup</h2>
<p class="session-setup__subtitle">To set up this session make sure to have these tools and rules in places for your players</p>
</div>
<div class="session-setup__grid">
<div class="session-setup__grid__item">
<img class="session-setup__icon" src=/assets/example-content/cog-icon.svg alt=1 Ball loading="lazy">
<p>1 Ball</p>
</div>
<div class="session-setup__grid__item">
<img class="session-setup__icon" src=/assets/example-content/cog-icon.svg alt=1 Ball loading="lazy">
<p>1 Ball</p>
</div>
<div class="session-setup__grid__item">
<img class="session-setup__icon" src=/assets/example-content/cog-icon.svg alt=4 Cones loading="lazy">
<p>4 Cones</p>
</div>
<div class="session-setup__grid__item">
<img class="session-setup__icon" src=/assets/example-content/cog-icon.svg alt=15 Mins loading="lazy">
<p>15 Mins</p>
</div>
<div class="session-setup__grid__item">
<img class="session-setup__icon" src=/assets/example-content/cog-icon.svg alt=Half Pitch loading="lazy">
<p>Half Pitch</p>
</div>
<div class="session-setup__grid__item">
<img class="session-setup__icon" src=/assets/example-content/cog-icon.svg alt=15 Mins loading="lazy">
<p>15 Mins</p>
</div>
</div>
</section>
<section class="signpost membership-signpost membership-signpost--efl-promotional membership-signpost--efl-promotional-white">
<a href="#" class="signpost__outer">
<div class="signpost__image-wrapper">
<img class="zoom-in" src="/assets/example-content/membership-signpost.png" alt="membership signpost">
</div>
<div class="signpost__info">
<h3 class="signpost__heading">Course Availability</h3>
<p class="signpost__subheading">Here’s a powerful tag line about futsal coaching</p>
<p class="signpost__copy">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.</p>
<hr />
<span class="cta cta--primary " id="find-course-near-me" tabindex="0">find a course near me</span>
</div>
</a href="#">
</section>
<section class="bundled-learning-promo quiz" id="bundled-learning-promo" data-behavior="bundled-learning-promo" data-redirect-url="/components/preview/efl-bundle-recommendations" data-fanid="76667" data-bundle-id="11112" data-article-id="221211" data-quiz-redirect-url="/components/preview/efl-bundled-learning-quiz-results">
<div class="bundled-learning-promo__wrapper">
<picture>
<source media="(max-width: 819px)" srcset="/assets/example-content/bundle-quiz-background-image-mob.jpg">
<source media="(min-width: 820px)" srcset="/assets/example-content/bundle-quiz-background-image.jpg">
<img src="/assets/example-content/bundle-quiz-background-image.jpg" class="promo-background" alt="">
</picture>
<div class="bundled-learning-promo__overlay">
<div class="bundled-learning-promo__overlay--wrapper">
<img src="/assets/example-content/logo-trophy.svg" alt="">
<h2>Quiz</h2>
<p>Have you <How to build trust with your players?> Quiz yourself to find out</p>
<button class="cta cta--efl bundled-learning-promo-start" aria-label="start the bundle quiz">start</button>
<div class="bundled-learning-promo__overlay--details">
<p class="minutes">2 - Minutes</p>
<p class="quizzes">6 - Quizzes</p>
</div>
</div>
</div>
<div class="bundled-learning-promo__questions" role="dialog" aria-modal="true">
<div class="bundled-learning-promo__questions--container">
<progress value="1" class="progress-bar-line"></progress>
<button class="close-btn" tabindex="-1" aria-label="close bundle quiz">
<span class="visually-hidden">Close dialog</span>
</button>
<div class="bundled-learning-promo__questions--list">
<div class="all-questions">
<div class="all-questions__single ">
<div class="all-questions__questions-sector">
<div class="all-questions__single--section">
<div class="all-questions__single__index">Question 01/02</div>
<div class="question" data-question-id="8421c03d-7ef5-4a61-995f-c83ed1fdb8d4">
What can we help you with?</div>
<p class="info">Please select a multiple answer</p>
<div class="all-questions__single--alert" role="alert">Please select a single answer</div>
</div>
<div class="all-questions__question-wrap">
<ul class="all-questions__single--options" data-answer='[ "Start or continue my coaching career", "Top up my knowledge 2" ]'>
<div class="all-questions__single--answers" data-answer-id="3979cd44-76b6-4013-8e67-858ba0d0e9c4">
<input name="question-1" type="checkbox" class="multi-answer" id="answer-1-option-1" value="Start or continue my coaching career" tabindex="-1">
<label for="answer-1-option-1">Start or continue my coaching career</label>
</div>
<div class="all-questions__single--answers" data-answer-id="3979cd44-76b6-4013-8e67-858ba0d0e9c4">
<input name="question-1" type="checkbox" class="multi-answer" id="answer-1-option-2" value="Help me coach a local team" tabindex="-1">
<label for="answer-1-option-2">Help me coach a local team</label>
</div>
<div class="all-questions__single--answers" data-answer-id="3979cd44-76b6-4013-8e67-858ba0d0e9c4">
<input name="question-1" type="checkbox" class="multi-answer" id="answer-1-option-3" value="Top up my knowledge 1" tabindex="-1">
<label for="answer-1-option-3">Top up my knowledge 1</label>
</div>
<div class="all-questions__single--answers" data-answer-id="3979cd44-76b6-4013-8e67-858ba0d0e9c4">
<input name="question-1" type="checkbox" class="multi-answer" id="answer-1-option-4" value="Top up my knowledge 2" tabindex="-1">
<label for="answer-1-option-4">Top up my knowledge 2</label>
</div>
</ul>
</div>
</div>
<div class="bundled-learning-promo__questions--list__navigation">
<div class="bundled-learning-promo__questions--list__navigation--up-down">
<button aria-disabled="true" class="previous" aria-label="previous Question"></button>
<button aria-disabled="true" class="next" aria-label="Next Question"></button>
</div>
<button class="cta cta--efl personalisationNext" id="next-cta" aria-disabled="true" aria-label="Next Question" data-cta-text="Next">Next</button>
</div>
</div>
<div class="all-questions__feedback-container">
<div class="all-questions__feedback right-feedback">
<canvas class="all-questions__feedback--right-icon" width="96" height="96"></canvas>
<div class="feedback">That's right.</h3>
<p>Young players often use their laces to finish. This is because it's an easy
way to generate a lot of power. </p>
<button class="cta cta--efl feedbackNext" id="next-cta" aria-label="Next Question" data-cta-text="Next" data-last-cta="See my results">Next</button>
</div>
<div class="all-questions__feedback wrong-feedback">
<canvas class="all-questions__feedback--wrong-icon" width="96" height="96"></canvas>
<div class="feedback">Not Quite.</div>
<p>Young players often use their laces to finish. This is because it's an easy
way to generate a lot of power. </p>
<button class="cta cta--efl feedbackNext" id="next-cta" aria-label="Next Question" data-cta-text="Next" data-last-cta="See my results">Next</button>
</div>
</div>
<div class="all-questions__single ">
<div class="all-questions__questions-sector">
<div class="all-questions__single--section">
<div class="all-questions__single__index">Question 01/02</div>
<div class="question" data-question-id="8421c03d-7ef5-4a61-995f-c83ed1fdb8d4">
How would you rate your coaching experience?</div>
<p class="info">Please select a single answer</p>
<div class="all-questions__single--alert" role="alert">Please select a single answer</div>
</div>
<div class="all-questions__question-wrap">
<ul class="all-questions__single--options" data-answer='[ "Help me coach a local team", "" ]'>
<div class="all-questions__single--answers" data-answer-id="3979cd44-76b6-4013-8e67-858ba0d0e9c4">
<input name="question-2" type="radio" class="single-answer" id="answer-2-option-1" value="Advanced (UEFA B and above)" tabindex="-1">
<label for="answer-2-option-1">Advanced (UEFA B and above)</label>
</div>
<div class="all-questions__single--answers" data-answer-id="3979cd44-76b6-4013-8e67-858ba0d0e9c4">
<input name="question-2" type="radio" class="single-answer" id="answer-2-option-2" value="Help me coach a local team" tabindex="-1">
<label for="answer-2-option-2">Help me coach a local team</label>
</div>
<div class="all-questions__single--answers" data-answer-id="3979cd44-76b6-4013-8e67-858ba0d0e9c4">
<input name="question-2" type="radio" class="single-answer" id="answer-2-option-3" value="Top up my knowledge" tabindex="-1">
<label for="answer-2-option-3">Top up my knowledge</label>
</div>
<div class="all-questions__single--answers" data-answer-id="3979cd44-76b6-4013-8e67-858ba0d0e9c4">
<input name="question-2" type="radio" class="single-answer" id="answer-2-option-4" value="Top up my knowledge 2" tabindex="-1">
<label for="answer-2-option-4">Top up my knowledge 2</label>
</div>
<div class="all-questions__single--answers" data-answer-id="3979cd44-76b6-4013-8e67-858ba0d0e9c4">
<input name="question-2" type="radio" class="single-answer" id="answer-2-option-5" value="Top up my knowledge 3" tabindex="-1">
<label for="answer-2-option-5">Top up my knowledge 3</label>
</div>
</ul>
</div>
</div>
<div class="bundled-learning-promo__questions--list__navigation">
<div class="bundled-learning-promo__questions--list__navigation--up-down">
<button aria-disabled="true" class="previous" aria-label="previous Question"></button>
<button aria-disabled="true" class="next" aria-label="Next Question"></button>
</div>
<button class="cta cta--efl personalisationNext" id="next-cta" aria-disabled="true" aria-label="Next Question" data-cta-text="Next">Next</button>
</div>
</div>
<div class="all-questions__feedback-container">
<div class="all-questions__feedback right-feedback">
<canvas class="all-questions__feedback--right-icon" width="96" height="96"></canvas>
<div class="feedback">That's right.</h3>
<p>Young players often use their laces to finish. This is because it's an easy
way to generate a lot of power. </p>
<button class="cta cta--efl feedbackNext" id="next-cta" aria-label="Next Question" data-cta-text="Next" data-last-cta="See my results">Next</button>
</div>
<div class="all-questions__feedback wrong-feedback">
<canvas class="all-questions__feedback--wrong-icon" width="96" height="96"></canvas>
<div class="feedback">Not Quite.</div>
<p>Young players often use their laces to finish. This is because it's an easy
way to generate a lot of power. </p>
<button class="cta cta--efl feedbackNext" id="next-cta" aria-label="Next Question" data-cta-text="Next" data-last-cta="See my results">Next</button>
</div>
</div>
<div class="all-questions__single question-video">
<div class="all-questions__questions-sector">
<div class="all-questions__single--section">
<div class="all-questions__single__index">Question 01/02</div>
<div class="question" data-question-id="8421c03d-7ef5-4a61-995f-c83ed1fdb8d4">
What type of finish does this video show? </div>
<p class="info">Please select a single answer</p>
<div class="all-questions__single--alert" role="alert">Please select a single answer</div>
</div>
<div class="all-questions__question-wrap">
<div class="all-questions__video-wrap" data-video-type="youtube" data-video-id="ufLSGCZEPrg">
<div class="all-questions__video-poster">
<img src="/assets/example-content/video-error-poster.jpg" alt="error-video" loading="lazy" />
</div>
<div class="all-questions__video-thumbnail">
<button tabindex="0" aria-label="play youtube video player">
<img src="/assets/example-content/quiz-video-thumbnail.jpg" alt="" loading="lazy" />
</button>
</div>
<div id="all-questions" class="all-questions__player"></div>
</div>
<ul class="all-questions__single--options" data-answer='[ "Header", "" ]'>
<div class="all-questions__single--answers" data-answer-id="3979cd44-76b6-4013-8e67-858ba0d0e9c4">
<input name="question-3" type="radio" class="single-answer" id="answer-3-option-1" value="Toe-poke" tabindex="-1">
<label for="answer-3-option-1">Toe-poke</label>
</div>
<div class="all-questions__single--answers" data-answer-id="3979cd44-76b6-4013-8e67-858ba0d0e9c4">
<input name="question-3" type="radio" class="single-answer" id="answer-3-option-2" value="Side-foot place" tabindex="-1">
<label for="answer-3-option-2">Side-foot place</label>
</div>
<div class="all-questions__single--answers" data-answer-id="3979cd44-76b6-4013-8e67-858ba0d0e9c4">
<input name="question-3" type="radio" class="single-answer" id="answer-3-option-3" value="Header" tabindex="-1">
<label for="answer-3-option-3">Header</label>
</div>
<div class="all-questions__single--answers" data-answer-id="3979cd44-76b6-4013-8e67-858ba0d0e9c4">
<input name="question-3" type="radio" class="single-answer" id="answer-3-option-4" value="Volley" tabindex="-1">
<label for="answer-3-option-4">Volley</label>
</div>
<button class="cta cta--efl personalisationNext" id="next-cta" aria-disabled="true" aria-label="Next Question" data-cta-text="Next">Next</button>
</ul>
</div>
</div>
<div class="bundled-learning-promo__questions--list__navigation">
<div class="bundled-learning-promo__questions--list__navigation--up-down">
<button aria-disabled="true" class="previous" aria-label="previous Question"></button>
<button aria-disabled="true" class="next" aria-label="Next Question"></button>
</div>
</div>
</div>
<div class="all-questions__feedback-container">
<div class="all-questions__feedback right-feedback">
<canvas class="all-questions__feedback--right-icon" width="96" height="96"></canvas>
<div class="feedback">That's right.</h3>
<p>Young players often use their laces to finish. This is because it's an easy
way to generate a lot of power. </p>
<button class="cta cta--efl feedbackNext" id="next-cta" aria-label="Next Question" data-cta-text="Next" data-last-cta="See my results">Next</button>
</div>
<div class="all-questions__feedback wrong-feedback">
<canvas class="all-questions__feedback--wrong-icon" width="96" height="96"></canvas>
<div class="feedback">Not Quite.</div>
<p>Young players often use their laces to finish. This is because it's an easy
way to generate a lot of power. </p>
<button class="cta cta--efl feedbackNext" id="next-cta" aria-label="Next Question" data-cta-text="Next" data-last-cta="See my results">Next</button>
</div>
</div>
<div class="all-questions__single question-video">
<div class="all-questions__questions-sector">
<div class="all-questions__single--section">
<div class="all-questions__single__index">Question 01/02</div>
<div class="question" data-question-id="8421c03d-7ef5-4a61-995f-c83ed1fdb8d4">
What type of finish does this video show? </div>
<p class="info">Please select a single answer</p>
<div class="all-questions__single--alert" role="alert">Please select a single answer</div>
</div>
<div class="all-questions__question-wrap">
<div class="all-questions__video-wrap" data-video-type="vimeo" data-video-id="516264036">
<div class="all-questions__video-poster">
<img src="/assets/example-content/video-error-poster.jpg" alt="error-video" loading="lazy" />
</div>
<div class="all-questions__video-thumbnail">
<button tabindex="0" aria-label="play vimeo video player">
<img src="/assets/example-content/quiz-video-thumbnail.jpg" alt="" loading="lazy" />
</button>
</div>
<div id="all-questions" class="all-questions__player"></div>
</div>
<ul class="all-questions__single--options" data-answer='[ "Side-foot place", "" ]'>
<div class="all-questions__single--answers" data-answer-id="3979cd44-76b6-4013-8e67-858ba0d0e9c4">
<input name="question-4" type="radio" class="single-answer" id="answer-4-option-1" value="Toe-poke" tabindex="-1">
<label for="answer-4-option-1">Toe-poke</label>
</div>
<div class="all-questions__single--answers" data-answer-id="3979cd44-76b6-4013-8e67-858ba0d0e9c4">
<input name="question-4" type="radio" class="single-answer" id="answer-4-option-2" value="Side-foot place" tabindex="-1">
<label for="answer-4-option-2">Side-foot place</label>
</div>
<div class="all-questions__single--answers" data-answer-id="3979cd44-76b6-4013-8e67-858ba0d0e9c4">
<input name="question-4" type="radio" class="single-answer" id="answer-4-option-3" value="Header" tabindex="-1">
<label for="answer-4-option-3">Header</label>
</div>
<div class="all-questions__single--answers" data-answer-id="3979cd44-76b6-4013-8e67-858ba0d0e9c4">
<input name="question-4" type="radio" class="single-answer" id="answer-4-option-4" value="Volley" tabindex="-1">
<label for="answer-4-option-4">Volley</label>
</div>
<button class="cta cta--efl personalisationNext" id="next-cta" aria-disabled="true" aria-label="Next Question" data-cta-text="Next">Next</button>
</ul>
</div>
</div>
<div class="bundled-learning-promo__questions--list__navigation">
<div class="bundled-learning-promo__questions--list__navigation--up-down">
<button aria-disabled="true" class="previous" aria-label="previous Question"></button>
<button aria-disabled="true" class="next" aria-label="Next Question"></button>
</div>
</div>
</div>
<div class="all-questions__feedback-container">
<div class="all-questions__feedback right-feedback">
<canvas class="all-questions__feedback--right-icon" width="96" height="96"></canvas>
<div class="feedback">That's right.</h3>
<p>Young players often use their laces to finish. This is because it's an easy
way to generate a lot of power. </p>
<button class="cta cta--efl feedbackNext" id="next-cta" aria-label="Next Question" data-cta-text="Next" data-last-cta="See my results">Next</button>
</div>
<div class="all-questions__feedback wrong-feedback">
<canvas class="all-questions__feedback--wrong-icon" width="96" height="96"></canvas>
<div class="feedback">Not Quite.</div>
<p>Young players often use their laces to finish. This is because it's an easy
way to generate a lot of power. </p>
<button class="cta cta--efl feedbackNext" id="next-cta" aria-label="Next Question" data-cta-text="Next" data-last-cta="See my results">Next</button>
</div>
</div>
<div class="bundled-learning-promo__sign-in benefits">
<div class="bundled-learning-promo__sign-in--inner benefits">
<div class="bundled-learning-promo__sign-in__content">
<h3 class="title">In order to see your results, you can sign up or sign in</h3>
<p class="copy">Benefits of creating your own personalised experience</p>
<ul>
<li>Content you care about</li>
<li>Sessions tailored to your team</li>
<li>Course information and alerts</li>
</ul>
</div>
<div class="bundled-learning-promo__sign-in__registration">
<div class="bundled-learning-promo__sign-in__registration--links">
<a href="/" class="cta cta--efl sign-up-cta" tabindex="0">Sign Up</a>
<a href="/" class="cta cta--secondary sign-in-cta" tabindex="0">Sign In</a>
</div>
</div>
</div>
<div class="bundled-learning-promo__questions--list__navigation">
<div class="bundled-learning-promo__questions--list__navigation--up-down">
<button aria-disabled="true" class="previous" aria-label="previous Question"></button>
<button aria-disabled="false" class="next" aria-label="Next Question"></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="running-the-session">
<div class="running-the-session__inner">
<h3>Running the Session</h3>
<p>Put this session into practice by following our <strong class="darkblue-text">4</strong> setup guidelines.</p>
</div>
<div class="running-the-session__section warm-up_section">
<p class="running-the-session__subheading running-the-session__warm-up">Warm Up</p>
</div>
<article class="running-the-session__section">
<!-- Mobile Version (Step) -->
<div class="running-the-session__step">
<p class="running-the-session__subheading">step <span class="bold">01</span></p>
</div>
<figure href="#" role="button" data-behaviour="gif" tabindex="0">
<img src="/assets/example-content/running-the-session.jpg" data-alt="/assets/example-content/running-the-session.gif" alt="football" />
<figcaption class="running-the-session__section__caption">
<div>0:10</div>
<div>GIF</div>
</figcaption>
</figure>
<div>
<!-- Desktop Version (Step) -->
<p class="running-the-session__subheading running-the-session__step-desktop">step <span class="bold">01</span></p>
<p class="running-the-session__paragraph">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</p>
</div>
</article>
<article class="running-the-session__section">
<!-- Mobile Version (Step) -->
<div class="running-the-session__step">
<p class="running-the-session__subheading">step <span class="bold">02</span></p>
</div>
<figure href="#" role="button" data-behaviour="gif" tabindex="0">
<img src="/assets/example-content/running-the-session.jpg" data-alt="/assets/example-content/running-the-session.gif" alt="football" />
<figcaption class="running-the-session__section__caption">
<div>0:10</div>
<div>GIF</div>
</figcaption>
</figure>
<div>
<!-- Desktop Version (Step) -->
<p class="running-the-session__subheading running-the-session__step-desktop">step <span class="bold">02</span></p>
<p class="running-the-session__paragraph">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</p>
</div>
</article>
<article class="running-the-session__section">
<!-- Mobile Version (Step) -->
<div class="running-the-session__step">
<p class="running-the-session__subheading">step <span class="bold">03</span></p>
</div>
<figure href="#" role="button" data-behaviour="gif" tabindex="0">
<img src="/assets/example-content/running-the-session.jpg" data-alt="/assets/example-content/running-the-session.gif" alt="football" />
<figcaption class="running-the-session__section__caption">
<div>0:10</div>
<div>GIF</div>
</figcaption>
</figure>
<div>
<!-- Desktop Version (Step) -->
<p class="running-the-session__subheading running-the-session__step-desktop">step <span class="bold">03</span></p>
<p class="running-the-session__paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</article>
<article class="running-the-session__section">
<!-- Mobile Version (Step) -->
<div class="running-the-session__step">
<p class="running-the-session__subheading">step <span class="bold">04</span></p>
</div>
<figure href="#" role="button" data-behaviour="gif" tabindex="0">
<img src="/assets/example-content/running-the-session.jpg" data-alt="/assets/example-content/running-the-session.gif" alt="football" />
<figcaption class="running-the-session__section__caption">
<div>0:10</div>
<div>GIF</div>
</figcaption>
</figure>
<div>
<!-- Desktop Version (Step) -->
<p class="running-the-session__subheading running-the-session__step-desktop">step <span class="bold">04</span></p>
<p class="running-the-session__paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</article>
<div class="running-the-session__section no-after">
<p class="running-the-session__subheading running-the-session__cool-down">Cool Down</p>
</div>
<footer>
<div class="article-author article-author--crest">
<div class="article-author__inner">
<h4>William Dalton</h4>
<p>10 min read - 10 Mar 2020</p>
</div>
</div>
<div class="share">
<div class="share__fallback" data-behavior="share-fallback">
<p>Share:</p>
<ul class="share__options">
<li>
<button data-behavior="copy-url" aria-label="Copy page link"><img src="/assets/images/share-copy-icon.svg" />
<span class="tooltip">Copy page link</span>
</button>
</li>
<li><a href="https://www.facebook.com/sharer.php?u=https://www.thefa.com/" aria-label="Facebook. Opens in a new tab" target="_blank" class="fb-button"><img src="/assets/images/share-facebook-icon.svg" alt="Facebook" /><span class="tooltip">Share on Facebook. Opens in a new tab</span></a></li>
<li><a href="https://twitter.com/intent/tweet?url=https://www.thefa.com/" aria-label="Twitter. Opens in a new tab" target="_blank" class="twitter-button"><img src="/assets/images/share-twitter-icon.svg" alt="Twitter" /><span class="tooltip">Share on Twitter. Opens in a new tab</span></a></li>
<li><a href="https://wa.me/?text=https://www.thefa.com/" aria-label="Whatsapp. Opens in new Tab" target="_blank" class="whatsapp-button"><img src="/assets/images/share-whatsapp-icon.svg" alt="WhatsApp" /><span class="tooltip">Share on Whatsapp</span></a></li>
</ul>
</div>
<button class="share__native" data-behavior="share-native"><span>Share:</span><img src="/assets/images/share-icon.svg" /></button>
</div>
</footer>
</section>
<section class="efl-large-video-player efl-white" data-behavior="efl-large-video-player">
<div class="efl-large-video-player__inner">
<div class="efl-large-video-player__content">
<h2>Example</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et ut labore et ut labore et dolorgna aliqua.</p>
<a href="#">Hyperlink text to access the next page</a>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
</ul>
<p><em>Lorem ipsum dolor sit amet, consectetur</em></p>
</div>
<div class="efl-large-video-player__video-wrap" data-video-type="youtube" data-video-id="ufLSGCZEPrg">
<div class="efl-large-video-player__video-poster">
<img src="/assets/example-content/video-error-poster.jpg" alt="error-video" loading="lazy" />
</div>
<div class="efl-large-video-player__video-thumbnail">
<button tabindex="0" aria-label="Example play in youtube video player">
<img src="/assets/example-content/womens-hero.png" alt="" loading="lazy" />
</button>
</div>
<div id="efl-large-video-player" class="efl-large-video-player__player"></div>
</div>
</div>
</section>
</div>
<div class="efl-column-layout efl-column-layout--one full-width">
<section class="efl-large-video-player efl-blue" data-behavior="efl-large-video-player">
<div class="efl-large-video-player__inner">
<div class="efl-large-video-player__content">
<h2>Example</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et ut labore et ut labore et dolorgna aliqua.</p>
<a href="#">Hyperlink text to access the next page</a>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
</ul>
<p><em>Lorem ipsum dolor sit amet, consectetur</em></p>
</div>
<div class="efl-large-video-player__video-wrap" data-video-type="vimeo" data-video-id="516264036">
<div class="efl-large-video-player__video-poster">
<img src="/assets/example-content/video-error-poster.jpg" alt="error-video" loading="lazy" />
</div>
<div class="efl-large-video-player__video-thumbnail">
<button tabindex="0" aria-label="Example play in vimeo video player">
<img src="/assets/example-content/womens-hero.png" alt="" loading="lazy" />
</button>
</div>
<div id="efl-large-video-player" class="efl-large-video-player__player"></div>
</div>
</div>
</section>
<section class="efl-large-video-player efl-blue" data-behavior="efl-large-video-player">
<div class="efl-large-video-player__inner">
<div class="efl-large-video-player__content">
<h2>Example</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et ut labore et ut labore et dolorgna aliqua.</p>
<a href="#">Hyperlink text to access the next page</a>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
</ul>
<p><em>Lorem ipsum dolor sit amet, consectetur</em></p>
</div>
<div class="efl-large-video-player__video-wrap" data-video-type="youtube" data-video-id="ufLSGCZEPrg">
<div class="efl-large-video-player__video-poster">
<img src="/assets/example-content/video-error-poster.jpg" alt="error-video" loading="lazy" />
</div>
<div class="efl-large-video-player__video-thumbnail">
<button tabindex="0" aria-label="Example play in youtube video player">
</button>
</div>
<div id="efl-large-video-player" class="efl-large-video-player__player"></div>
</div>
</div>
</section>
</div>
<!-- minimum width column block -->
<div class="efl-column-layout efl-column-layout--one">
<!-- minimum width content -->
</div>
<!-- two column block -->
<div class="efl-column-layout efl-column-layout--two">
<div class="efl-column-layout__col">
<!-- left column content -->
</div>
<div class="efl-column-layout__col">
<!-- right column content -->
</div>
</div>
</div>
</div>
No notes defined.
{
"video1": {
"videoId": "ufLSGCZEPrg",
"type": "youtube",
"theme": "efl-white"
},
"video2": {
"videoId": "516264036",
"type": "vimeo"
},
"video3": {
"videoId": "ufLSGCZEPrg",
"type": "youtube",
"no-thumbnail": true
}
}
<div class="page-wrapper efl-article-page">
{{render '@efl-hero-banner--article-with-image'}}
<div class="efl-page-content">
<div class="efl-page-content__tray">
<!-- two column block -->
<div class="efl-column-layout efl-column-layout--two">
<div class="efl-column-layout__col">
<!-- left column content -->
{{render '@efl-article-info'}}
{{render '@global-rte--description'}}
{{render '@bundled-learning-inpage-questions--multiple-choice-question'}}
</div>
<div class="efl-column-layout__col">
<!-- right column content -->
{{render '@jump-to-section--page-notification'}}
</div>
</div>
</div>
</div>
<div class="efl-page-content__dynamic-placeholder">
<!-- below placeholders are dynamic we need to update based on component-->
<!-- full width column block -->
<div class="efl-column-layout efl-column-layout--one full-width">
{{render '@session-setup'}}
{{render '@membership-signpost--efl-promotional-white' merge="true"}}
{{render '@bundled-learning-promo--quiz'}}
{{render '@running-the-session'}}
{{render '@efl-large-video-player' video1 merge="true"}}
</div>
<div class="efl-column-layout efl-column-layout--one full-width">
{{render '@efl-large-video-player' video2 merge="true"}}
{{render '@efl-large-video-player' video3 merge="true"}}
</div>
<!-- minimum width column block -->
<div class="efl-column-layout efl-column-layout--one">
<!-- minimum width content -->
</div>
<!-- two column block -->
<div class="efl-column-layout efl-column-layout--two">
<div class="efl-column-layout__col">
<!-- left column content -->
</div>
<div class="efl-column-layout__col">
<!-- right column content -->
</div>
</div>
</div>
</div>