<!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">
<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 -->
</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="/">Get Tickets</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" aria-controls="main-nav" aria-haspopup="true" aria-expanded="false">Global
navigation</button>
<nav role="navigation" class="global-site-navigation" id="main-nav">
<div class="global-site-navigation__home"><span>Home</span></div>
<ul>
<li class="global-site-navigation__level1">
<a href="/" aria-haspopup="true"><span>England</span></a>
<button class="global-site-navigation__main-tab" aria-controls="courses" aria-haspopup="true" aria-expanded="false" role="menu">
</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="/">mens senior</a>
<button class="accordion-trigger" aria-expanded="false" aria-controls="accordion-section-1" id="accordion-button-1"></button>
<ul class="global-site-navigation__level3 accordion-section" id="accordion-section-1" role="region" aria-labelledby="accordion-button-1">
<li><a href="/"><span>Fixtures and Results</span></a></li>
<li><a href="/"><span>Squad</span></a></li>
<li><a href="/"><span>News</span></a></li>
</ul>
</li>
<li>
<a class="global-site-navigation__section-heading" href="/">womens senior</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="accrdion-button-2">
<li><a href="/"><span>Fixtures and Results</span></a></li>
<li><a href="/" data-attr="true"><span>Squad</span></a></li>
<li><a href="/"><span>News</span></a></li>
</ul>
</li>
<li>
<a class="global-site-navigation__section-heading" href="/">Para</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" role="region" aria-labelledby="accordion-button-3">
<li><a href="/"><span>Fixtures and Results</span></a></li>
<li><a href="/"><span>Squad</span></a></li>
<li><a href="/"><span>News</span></a></li>
</ul>
</li>
<li>
<a class="global-site-navigation__section-heading" href="/">Youth</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" role="region" aria-labelledby="accordion-button-4">
<li><a href="/"><span>Womens Talent Pathway</span></a></li>
</ul>
</li>
<li>
<ul class="global-site-navigation__section-heading--more">
<li><a href="/">Elions</span></a></li>
<li><a href="/">PARA</span></a></li>
<li><a href="/">Legacy</span></a></li>
</ul>
</li>
</ul>
</div>
</li>
<li class="global-site-navigation__level1">
<a href="/" aria-haspopup="true"><span>PLAY FOOTBALL</span></a>
<button class="global-site-navigation__main-tab" aria-controls="courses" aria-haspopup="true" aria-expanded="false" role="menu">
</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="/">ways to play</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" role="region" aria-labelledby="accordion-button-5">
<li><a href="/"><span>11 v 11 Football</span></a></li>
<li><a href="/"><span>Small Sided</span></a></li>
<li><a href="/"><span>Futsal</span></a></li>
<li><a href="/"><span>9 v 9 Football</span></a></li>
<li><a href="/"><span>Mini Soccer</span></a></li>
<li><a href="/"><span>Walking</span></a></li>
</ul>
</li>
<li>
<a class="global-site-navigation__section-heading" href="/">Adult Football</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" role="region" aria-labelledby="accrdion-button-6">
<li><a href="/"><span>Adult Club</span></a></li>
<li><a href="/"><span>Adult Casual / Just Play</span></a></li>
<li><a href="/"><span>College & Unversity</span></a></li>
</ul>
</li>
<li>
<a class="global-site-navigation__section-heading" href="/">Youth Football</a>
<button class="accordion-trigger" aria-expanded="false" aria-controls="accordion-section-7" id="accordion-button-7"></button>
<ul class="global-site-navigation__level3 accordion-section" id="accordion-section-7" role="region" aria-labelledby="accordion-button-7">
<li><a href="/"><span>SuperKicks</span></a></li>
<li><a href="/"><span>Pokemon Youth Cup</span></a></li>
<li><a href="/"><span>School Competition</span></a></li>
<li><a href="/"><span>Disney Shooting Stars</span></a></li>
<li><a href="/"><span>Barclays Game On</span></a></li>
<li><a href="/"><span>Let Girl's Play</span></a></li>
<li><a href="/"><span>Weetabix Wildcats</span></a></li>
</ul>
</li>
<li>
<a class="global-site-navigation__section-heading" href="/">Disability Football</a>
<button class="accordion-trigger" aria-expanded="false" aria-controls="accordion-section-8" id="accordion-button-8"></button>
<ul class="global-site-navigation__level3 accordion-section" id="accordion-section-8" role="region" aria-labelledby="accordion-button-8">
<li><a href="/"><span>Elite Pathway</span></a></li>
<li><a href="/"><span>Amputee</span></a></li>
<li><a href="/"><span>Blind</span></a></li>
<li><a href="/"><span>Deaf</span></a></li>
<li><a href="/"><span>Pan Disability</span></a></li>
<li><a href="/"><span>Frame</span></a></li>
<li><a href="/"><span>Learning Disability</span></a></li>
<li><a href="/"><span>Cerebal Palsy</span></a></li>
<li><a href="/"><span>Other Disability</span></a></li>
<li><a href="/"><span>Elite Pathway</span></a></li>
</ul>
</li>
</ul>
</div>
</li>
<li class="global-site-navigation__level1">
<a href="/" aria-haspopup="true"><span>PARTICIPATE</span></a>
<button class="global-site-navigation__main-tab" aria-controls="courses" aria-haspopup="true" aria-expanded="false" role="menu">
</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="/">Coach</a>
<button class="accordion-trigger" aria-expanded="false" aria-controls="accordion-section-9" id="accordion-button-9"></button>
<ul class="global-site-navigation__level3 accordion-section" id="accordion-section-9" role="region" aria-labelledby="accrdion-button-9">
<li><a href="/"><span>Grassroots Football Awards</span></a></li>
<li><a href="/"><span>Leagues</span></a></li>
<li><a href="/"><span>CoachingTeams</span></a></li>
<li><a href="/"><span>Courses & Qualifictaions</span></a></li>
<li><a href="/"><span>Running Football Sessions</span></a></li>
<li><a href="/"><span>Just PLAY Resources</span></a></li>
<li><a href="/"><span>Age UK Resources</span></a></li>
<li><a href="/"><span>Wildcats Resources</span></a></li>
</ul>
</li>
<li>
<a class="global-site-navigation__section-heading" href="/">Volunteer</a>
<button class="accordion-trigger" aria-expanded="false" aria-controls="accordion-section-10" id="accordion-button-10"></button>
<ul class="global-site-navigation__level3 accordion-section" id="accordion-section-10" role="region" aria-labelledby="accordion-button-10">
<li><a href="/"><span>Opportunies</span></a></li>
</ul>
</li>
<li>
<a class="global-site-navigation__section-heading" href="/">Referee</a>
<button class="accordion-trigger" aria-expanded="false" aria-controls="accordion-section-11" id="accordion-button-11"></button>
<ul class="global-site-navigation__level3 accordion-section" id="accordion-section-11" role="region" aria-labelledby="accordion-button-11">
<li><a href="/"><span>Refereeing Resources</span></a></li>
<li><a href="/"><span>Courses & Qualifictaions</span></a></li>
<li><a href="/"><span>Respect Referees</span></a></li>
</ul>
</li>
<li>
<a class="global-site-navigation__section-heading" href="/">Other</a>
<button class="accordion-trigger" aria-expanded="false" aria-controls="accordion-section-12" id="accordion-button-12"></button>
<ul class="global-site-navigation__level3 accordion-section" id="accordion-section-12" role="region" aria-labelledby="accordion-button-12">
<li><a href="/"><span>Safeguarding</span></a></li>
<li><a href="/"><span>County FA's</span></a></li>
<li><a href="/"><span>Inclusive Football</span></a></li>
<li><a href="/"><span>Help Apps & Websites</span></a></li>
<li><a href="/"><span>Englandn Foundation</span></a></li>
</ul>
</li>
<li>
<a class="global-site-navigation__section-heading" href="/">Explore</a>
<button class="accordion-trigger" aria-expanded="false" aria-controls="accordion-section-13" id="accordion-button-13"></button>
<ul class="global-site-navigation__level3 accordion-section" id="accordion-section-13" role="region" aria-labelledby="accordion-button-13">
<li><a href="/"><span>Concussion</span></a></li>
</ul>
</li>
<li>
<ul class="global-site-navigation__section-heading--more">
<li><a href="/">LEAGUES</span></a></li>
</ul>
</li>
</ul>
</div>
</li>
<li class="global-site-navigation__level1">
<a href="/" aria-haspopup="false"><span>Find Football</span></a>
</li>
<li class="global-site-navigation__level1">
<a href="/" aria-haspopup="false"><span>News</span></a>
</li>
</li>
<li class="global-site-navigation__level1">
<a href="/" aria-haspopup="false"><span>My England Football</span></a>
</li>
<li class="global-site-navigation__level1 link-external">
<a href="/" aria-haspopup="false"><span>Learning</span></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="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>
<main id="main-content" data-brand="mens"></main>
<footer class="footer-section">
<section class="container">
<div class="footer-socialsection">
<nav class="footer-subnav">
<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 tabindex="0">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' }}">
<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 -->
</head>
<body>
{{!-- {{render '@navigation--signed-in'}} --}}
{{render '@global-navigation--default'}}
<main id="main-content" data-brand="{{brand}}">{{{ yield }}}</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>