<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Preview Layout</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="//secure.widget.cloud.opta.net/v3/css/v3.football.opta-widgets.css">
<link rel="stylesheet" href="../../styles/main.css">
<link rel="manifest" href="../../manifest.json" />
<script>
window.MSInputMethodContext && document.documentMode && document.write('<script src="https://cdn.jsdelivr.net/gh/nuxodin/ie11CustomProperties@4.1.0/ie11CustomProperties.min.js"><\/script>');
</script>
<!-- Start Data Layer -->
<script>
window.dataLayer = [];
var dataLayerPageName = 'England Football Landing page'; //Name of the page
var dataLayerPageUrl = 'https://www-test.englandfootball.com';
var dataLayerPageType = 'Home page'; //Other Ex: News Page, Home page, Videos, etc
var dataLayerLoginType = 'FAN'; //‘<Prospect/Customer>’,
</script>
<!-- End Data Layer -->
<!-- Google Tag Manager -->
<script>
(function(w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({
'gtm.start': new Date().getTime(),
event: 'gtm.js'
});
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s),
dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl + '>m_auth=FKvPd_QP43aE94WBVX3E_g>m_preview=env-5>m_cookies_win=x';
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-KT4SPMT');
</script>
<!-- End Google Tag Manager -->
<!-- Bing Map key -->
<script>
var bingMapKey = 'AjVdFOFp93HANlnPHI_21ta6mH-7QBTC3r3U7LYzMQcysxNq2oq7_tdOU-RGbye5';
</script>
</head>
<body>
<header class="global-fixed-header">
<a href="#main-content" class="skip-to-content">Skip to main content</a>
<div class="global-site-navigation-top-bar">
<div class="container">
<div class="global-site-navigation-top-bar--links">
<a href="/">Latest Podcast Episode</a>
<a href="/">Official Merchandise</a>
</div>
</div>
</div>
<div class="global-site-header container">
<div class="container__content">
<a href="/" class="logo" aria-label="England Football Learning logo"></a>
</div>
<button class="hamburger new" aria-controls="main-nav" aria-haspopup="true" aria-expanded="false">Open
navigation</button>
<nav role="navigation" class="global-site-navigation" id="main-nav" aria-label="Primary">
<div class="global-site-navigation__home"><span>Menu</span></div>
<ul>
<li class="global-site-navigation__level1">
<a href="/" aria-haspopup="false"><span>Started</span></a>
</li>
<li class="global-site-navigation__level1">
<a href="/" aria-haspopup="true"><span>Courses</span></a>
<button class="global-site-navigation__main-tab" aria-controls="courses" aria-haspopup="true" aria-expanded="false" role="menuitem" aria-label="Courses">
</button>
<div class="global-site-navigation__level2-wrapper" id="courses" data-lazy-background=/assets/example-content/menu-lion-watermark.png>
<ul class="global-site-navigation__level2">
<li>
<a class="global-site-navigation__section-heading" href="/">Football</a>
<button class="accordion-trigger" aria-expanded="false" aria-controls="accordion-section-2" id="accordion-button-2"></button>
<ul class="global-site-navigation__level3 accordion-section" id="accordion-section-2" role="region" aria-labelledby="accordion-button-2">
<li><a href="/"><span>Intro to Coaching Football</span></a></li>
<li><a href="/"><span>UEFA C</span></a></li>
<li><a href="/"><span>UEFA B</span></a></li>
<li><a href="/" data-attr="true"><span>UEFA A</span></a></li>
<li><a href="/"><span>UEFA Pro License</span></a></li>
</ul>
</li>
<li>
<a class="global-site-navigation__section-heading" href="/">FUTSAL</a>
<button class="accordion-trigger" aria-expanded="false" aria-controls="accordion-section-3" id="accordion-button-3"></button>
<ul class="global-site-navigation__level3 accordion-section" id="accordion-section-3" <li><a href="/"><span>National Futsal Course</span></a>
</li>
<li><a href="/"><span>UEFA B in Coaching Futsal</span></a></li>
</ul>
</li>
<li>
<a class="global-site-navigation__section-heading" href="/">GOALKEEPING</a>
<button class="accordion-trigger" aria-expanded="false" aria-controls="accordion-section-4" id="accordion-button-4"></button>
<ul class="global-site-navigation__level3 accordion-section" id="accordion-section-4" aria-labelledby="accordion-button-4">
<li><a href="/"><span>National Goalkeeping Course</span></a></li>
<li><a href="/"><span>UEFA B in Coaching Goalkeepers</span></a></li>
<li><a href="/"><span>UEFA A in Coaching Goalkeepers</span></a></li>
</ul>
</li>
<li>
<a class="global-site-navigation__section-heading" href="/">SAFEGUARDING</a>
<button class="accordion-trigger" aria-expanded="false" aria-controls="accordion-section-5" id="accordion-button-5"></button>
<ul class="global-site-navigation__level3 accordion-section" id="accordion-section-5" aria-labelledby="accordion-button-5">
<li><a href="/"><span>Safeguarding Children Courses</span></a></li>
<li><a href="/"><span>Safeguarding for All</span></a></li>
<li><a href="/"><span>Safeguarding for Parents</span></a></li>
<li><a href="/"><span>Safeguarding for Adults</span></a></li>
<li><a href="/"><span>Safeguarding for Children Reaccreditation</span></a></li>
</ul>
</li>
<li>
<a class="global-site-navigation__section-heading" href="/">MEDICAL</a>
<button class="accordion-trigger" aria-expanded="false" aria-controls="accordion-section-6" id="accordion-button-6"></button>
<ul class="global-site-navigation__level3 accordion-section" id="accordion-section-6" aria-labelledby="accordion-button-6">
<li><a href="/"><span>Introduction to First Aid in Football</span></a></li>
<li><a href="/"><span>Emergency First Aid in Football</span></a></li>
<li><a href="/"><span>Emergency Medical First Aid in Football</span></a></li>
<li><a href="/"><span>Intermediate Trauma Medical Management in Football</span></a></li>
<li><a href="/"><span>Advanced Trauma Medical Management in Football</span></a></li>
<li><a href="/"><span>Reaccreditation</span></a></li>
<li><a href="/"><span>Sudden Cardiac Arrest</span></a></li>
</ul>
</li>
<li>
<ul class="global-site-navigation__section-heading--more">
<li><a href="/">DISABILITY</span></a></li>
<li><a href="/">TALENT ID</span></a></li>
<li><a href="/">PHYSICAL EDUCATION</span></a></li>
<li><a href="/">FREE COURSES</span></a></li>
<li><a href="/">ONLINE COURSES</span></a></li>
</ul>
</li>
</ul>
</div>
</li>
<li class="global-site-navigation__level1">
<a href="/" aria-haspopup="false"><span>Sessions</span></a>
</li>
<li class="global-site-navigation__level1">
<a href="/" aria-haspopup="false"><span>Articles</span></a>
</li>
<li class="global-site-navigation__level1">
<a href="/" aria-haspopup="false"><span>Ongoing Learning</span></a>
</li>
<li class="global-site-navigation__level1 link-external">
<a href="/" aria-haspopup="false" target="_blank"><span>Help</span></a>
</li>
<li class="global-site-navigation__level1 site-notification new">
<a href="/" aria-haspopup="false">Notification</a>
</li>
</ul>
<div class="global-site-navigation__bottom-link hidden">
<a href="/">Check out the latest Coachcast Podcast Episode:<span>S2 Ep1: Futsal with Ian Parkes</span></a>
</div>
</nav>
<div class="container__content b2c-nav-container">
<a href="/" class="site-search" aria-label="search"></a>
<div class="site-signin">
<!-- <a href="#"><span class="mob-only">Sign in/Up</span><span class="desktop-only">Sign in</span></a>
<span class="desktop-only">or</span>-->
<a class="user-login" role="menuitem" aria-label="My account" aria-haspopup="true" aria-controls="myaccount-nav" aria-expanded="false" tabindex="0"></a>
<nav role="navigation" class="global-site-navigation__level2-wrapper site-myaccount-menus" id="myaccount-nav" data-lazy-background="/assets/example-content/menu-lion-watermark.png" aria-label="Myaccount">
<ul>
<li>
<p class="global-site-navigation__section-heading">My Account</p>
<div class="my-account-not-loggedin">
<ul class="global-site-navigation__level3">
<li><a href="#" class="link-external" target="_blank" aria-label="Sign in to Account link opens in a new tab">Sign in to Account</a></li>
<li><a href="#" class="link-external" target="_blank" aria-label="Register an Account link opens in a new tab">Register an Account</a></li>
<li><a href="#" target="_blank" aria-label="Register an Account link opens in a new tab">Register an Account</a></li>
</ul>
</div>
<div class="my-account-loggedin hidden">
<ul class="global-site-navigation__level3">
<li><a href="#" class="" target="" data-hide-age-limit="18" data-hide-redirect-tab="/components/preview/efl-profile-page?tab=my-learning" aria-label="Learner profile bio">Bio</a></li>
<li><a href="#" class="link-external" target="_blank" aria-label="My Coach Profile link opens in a new tab">My Coach Profile</a></li>
<li><a href="#" class="link-external" target="_blank" aria-label="Manage my account prefrences link opens in a new tab">Manage my account prefrences</a></li>
<li><a href="#">Sign out of Account</a></li>
</ul>
</div>
</li>
</ul>
<div class="global-site-navigation__bottom-link">
<a href="/">Check out the latest Coachcast Podcast Episode:<span>S2 Ep1: Futsal with Ian Parkes</span></a>
</div>
</nav>
</div>
</div>
</div>
</header>
<div class="efl-global-notifications-tray" aria-expanded="false" data-behavior="efl-global-notifications-tray">
<div class="efl-global-notifications-tray__container">
<div class="efl-global-notifications-tray__new-notification">
<div class="efl-global-notifications-tray__wrapper">
<button class="efl-global-notifications-tray__close"></button>
<div class="efl-global-notifications-tray__wrapper--title">
<div class="heading">Notifications</div>
</div>
<div class="efl-global-notifications-tray__wrapper--items">
<div class="efl-global-notifications priority-1 " data-icon-type="priority-1" data-behavior="efl-global-notifications" data-notification-id="1">
<div class="efl-global-notifications__wrapper">
<button class="efl-global-notifications__close"></button>
<div class="efl-global-notifications__wrapper--icon">
<canvas class="notifications-icon rive-priority-1" width="60" height="60"></canvas>
</div>
<div class="efl-global-notifications__wrapper--info">
<div class="efl-global-notifications__section">
<div class="title">The notification title goes here</div>
<p data-copy="The notification message Example. This is a reminder that on the 00/00/00 at 0 PM to">The notification message Example. This is a reminder that on the 00/00/00 at 0 PM to</p>
</div>
</div>
</div>
</div>
<div class="efl-global-notifications priority-2 " data-icon-type="priority-2" data-behavior="efl-global-notifications" data-notification-id="2">
<div class="efl-global-notifications__wrapper">
<button class="efl-global-notifications__close"></button>
<div class="efl-global-notifications__wrapper--icon">
<canvas class="notifications-icon rive-priority-2" width="60" height="60"></canvas>
</div>
<div class="efl-global-notifications__wrapper--info">
<div class="efl-global-notifications__section">
<div class="title">The notification title goes here</div>
<p data-copy="Improve your knowledge and management skills when dealing with team crisis and earn your badge">Improve your knowledge and management skills when dealing with team crisis and earn your badge</p>
</div>
</div>
</div>
</div>
<div class="efl-global-notifications priority-3 " data-icon-type="priority-3" data-behavior="efl-global-notifications" data-notification-id="3">
<div class="efl-global-notifications__wrapper">
<button class="efl-global-notifications__close"></button>
<div class="efl-global-notifications__wrapper--icon">
<canvas class="notifications-icon rive-priority-3" width="60" height="60"></canvas>
</div>
<div class="efl-global-notifications__wrapper--info">
<div class="efl-global-notifications__section">
<div class="title">Complete your profile</div>
<p data-copy="Just a few more steps to go!">Just a few more steps to go!</p>
</div>
<div class="efl-global-notifications__completion" data-profile-completion="0%">
<div class="efl-global-notifications__completion--info">
<div class="status">
<img src="/assets/example-content/global-notification/profile-not-completed.svg" data-completed-img="/assets/example-content/global-notification/profile-completed.svg" alt="" />
<span>Upload profile picture</span>
<a href="#" class="cta cta--primary add-cta" tabindex="0">Add</a>
</div>
<div class="status">
<img src="/assets/example-content/global-notification/profile-not-completed.svg" data-completed-img="/assets/example-content/global-notification/profile-completed.svg" alt="" />
<span>About me</span>
<a href="#" class="cta cta--primary add-cta" tabindex="0">Add</a>
</div>
<div class="status">
<img src="/assets/example-content/global-notification/profile-not-completed.svg" data-completed-img="/assets/example-content/global-notification/profile-completed.svg" alt="" />
<span>My previous experience</span>
<a href="#" class="cta cta--primary add-cta" tabindex="0">Add</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="efl-global-notifications-tray__wrapper--morelink"></a>
</div>
<div class="efl-global-notifications-tray__shadow1"></div>
<div class="efl-global-notifications-tray__shadow2"></div>
</div>
<div class="efl-global-notifications-tray__no-notification hidden">
<div class="efl-global-notifications-tray__wrapper">
<button class="efl-global-notifications-tray__close"></button>
<div class="efl-global-notifications-tray__wrapper--no-notification">
<div class="no-notification-icon">
<canvas id="no-notification-rive" width="60" height="60"></canvas>
</div>
<div class="no-notification">You dont have any notifications right now</div>
<p>We will alert you once something comes up</p>
</div>
</div>
</div>
</div>
</div>
<div class="efl-global-notifications add-to-homescreen hidden" data-icon-type="add-to-homescreen" data-behavior="efl-global-notifications">
<div class="efl-global-notifications__wrapper">
<button class="efl-global-notifications__close"></button>
<div class="efl-global-notifications__wrapper--icon">
<img src="/assets/example-content/global-notification/efl-logo.svg" alt="" />
</div>
<div class="efl-global-notifications__wrapper--info">
<div class="efl-global-notifications__section">
<div class="title">Add England football learning to your home screen</div>
</div>
<div class="efl-global-notifications__homescreen">
<a href="#" class="cta cta--primary no-thanks-cta" tabindex="0">No, Thanks</a>
<a href="#" class="cta cta--primary add-homescreen-cta" tabindex="0">Add to home screen</a>
</div>
</div>
</div>
</div>
<main id="main-content">
<div id="content" data-brand="mens"></div>
</main>
<footer class="footer-section">
<section class="container">
<div class="footer-socialsection">
<nav class="footer-subnav" aria-label="Footer">
<ul>
<li><a target="_blank" href="#">Contact Us</a></li>
<li><a target="_blank" href="#">Privacy policy</a></li>
<li><a target="_blank" href="/#">Terms of use</a></li>
<li><a href="#">Anti-Slavery</a></li>
<li><a href="#">Cookie Settings</a></li>
</ul>
</nav>
</div>
<div class="footerstrip">
<div class="footer-icons">
<img src="/assets/images/fa.png" alt="" />
<img src="/assets/images/ef_logo.png" alt="" />
<img src="/assets/images/england_crest.png" alt="" />
</div>
</div>
</section>
<div class="footer-bottom">
<span>The Football Association © 2001 - 2021 - All Rights Reserved</span>
</div>
</footer>
</body>
<script src=" ../../scripts/main.js">
</script>
<script src="//secure.widget.cloud.opta.net/v3/v3.opta-widgets.js"></script>
<script>
var opta_settings = {
subscription_id: 'da939516b450292833901c0d38b3e825',
language: 'en_GB',
timezone: 'Europe/London'
};
</script>
</html>
The pages folder is intended to demonstrate what finished pages may look like. They should include components mixed with layouts (containers) to create the page. This aims to mimic how components can be combined in Sitecore, and as such, should very rarely contain any custom mark up, or styles.
The pages section has a dedicated preview layout that includes the header and footer components automatically. There are variants for men’s and women’s branding. To use them, add: preview: "@preview--mens" or preview: "@preview--womens" into your context file.
{
"brand": "mens"
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Preview Layout</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="//secure.widget.cloud.opta.net/v3/css/v3.football.opta-widgets.css">
<link rel="stylesheet" href="{{ path '/styles/main.css' }}">
<link rel="manifest" href="{{ path '/manifest.json' }}" />
<script>window.MSInputMethodContext && document.documentMode && document.write('<script src="https://cdn.jsdelivr.net/gh/nuxodin/ie11CustomProperties@4.1.0/ie11CustomProperties.min.js"><\/script>');</script>
<!-- Start Data Layer -->
<script>
window.dataLayer = [];
var dataLayerPageName = 'England Football Landing page'; //Name of the page
var dataLayerPageUrl = 'https://www-test.englandfootball.com';
var dataLayerPageType = 'Home page'; //Other Ex: News Page, Home page, Videos, etc
var dataLayerLoginType = 'FAN'; //‘<Prospect/Customer>’,
</script>
<!-- End Data Layer -->
<!-- Google Tag Manager -->
<script>(function (w, d, s, l, i) {
w[l] = w[l] || []; w[l].push({
'gtm.start':
new Date().getTime(), event: 'gtm.js'
}); var f = d.getElementsByTagName(s)[0],
j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl + '>m_auth=FKvPd_QP43aE94WBVX3E_g>m_preview=env-5>m_cookies_win=x'; f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-KT4SPMT');</script>
<!-- End Google Tag Manager -->
<!-- Bing Map key -->
<script>
var bingMapKey = 'AjVdFOFp93HANlnPHI_21ta6mH-7QBTC3r3U7LYzMQcysxNq2oq7_tdOU-RGbye5';
</script>
</head>
<body>
{{render '@global-navigation--signed-in'}}
{{render '@efl-global-notifications-tray'}}
{{render '@efl-global-notifications--add-to-homescreen'}}
<main id="main-content">
<div id="content" data-brand="{{brand}}">{{{ yield }}}</div>
</main>
{{render '@footer'}}
</body>
<script src=" {{path '/scripts/main.js' }}">
</script>
<script src="//secure.widget.cloud.opta.net/v3/v3.opta-widgets.js"></script>
<script>
var opta_settings = {
subscription_id: 'da939516b450292833901c0d38b3e825',
language: 'en_GB',
timezone: 'Europe/London'
};
</script>
</html>