<div class="get-started-content get-started-learning" data-page="get-started-learning" data-behaviour="get-started-learning">
<div class="get-started-index-card-image">
<picture>
<source media="(max-width: 819px)" srcset="/assets/example-content/get-started-v2/get-started-learning-mob.jpg">
<source media="(min-width: 820px)" srcset="/assets/example-content/get-started-v2/get-started-learning-desk.jpg">
<img class="bg-image" src="/assets/example-content/get-started-v2/get-started-learning-desk.jpg" alt="" loading="lazy">
</picture>
</div>
<div class="get-started-learning__overlay">
<div class="get-started-learning__overlay--wrapper">
<div class="slides-container">
<ul class="slides">
<div class="get-started-index-card-text">
<div class="get-started-index-card-text__wrapper ">
<div class="category">learning support</div>
<h2>Session plans, articles, podcasts & community</h2>
<p>England football learning offers a wide range of non-coaching qualifications that will help you progress in your career. From medical training to talent identification to safeguarding, we have something for everyone.</p>
</div>
</div>
<a href="#" target="_blank" class="efl-card efl-card--get-started-session " aria-label="The basics content goes here">
<div class="efl-card__image ">
<img src="/assets/example-content/get-started-session-1.jpg" />
</div>
<div class="efl-card__content ">
<div class="efl-card__inner">
<div class="efl-card__content--category">session</div>
<div class="efl-card__content--title">The basics content goes here</div>
<p class="efl-card__content--description">Players will develop their understanding of: what scanning is why it’s important to scan the pitch before receiving the b all how their body</p>
</div>
<span class="cta cta--efl get-started-cta" tabindex="0">read more</span>
</div>
</a>
<a href="#" target="_blank" class="efl-card efl-card--get-started-session " aria-label="The basics content goes here">
<div class="efl-card__image ">
<img src="/assets/example-content/get-started-session-1.jpg" />
</div>
<div class="efl-card__content ">
<div class="efl-card__inner">
<div class="efl-card__content--category">session</div>
<div class="efl-card__content--title">The basics content goes here</div>
<p class="efl-card__content--description">Players will develop their understanding of: what scanning is why it’s important to scan the pitch before receiving the b all how their body</p>
</div>
<span class="cta cta--efl get-started-cta" tabindex="0">read more</span>
</div>
</a>
<a href="#" target="_blank" class="efl-card efl-card--get-started-article " aria-label="The basics content goes here">
<div class="efl-card__image ">
<img src="/assets/example-content/get-started-article-1.jpg" />
</div>
<div class="efl-card__content ">
<div class="efl-card__inner">
<div class="efl-card__content--category">article</div>
<div class="efl-card__content--title">The basics content goes here</div>
<p class="efl-card__content--description">Players will develop their understanding of: what scanning is why it’s important to scan the pitch before receiving the b all how their body</p>
</div>
<span class="cta cta--efl get-started-cta" tabindex="0">read more</span>
</div>
</a>
<a href="#" target="_blank" class="efl-card efl-card--get-started-article " aria-label="The basics content goes here">
<div class="efl-card__image ">
<img src="/assets/example-content/get-started-article-1.jpg" />
</div>
<div class="efl-card__content ">
<div class="efl-card__inner">
<div class="efl-card__content--category">article</div>
<div class="efl-card__content--title">The basics content goes here</div>
<p class="efl-card__content--description">Players will develop their understanding of: what scanning is why it’s important to scan the pitch before receiving the b all how their body</p>
</div>
<span class="cta cta--efl get-started-cta" tabindex="0">read more</span>
</div>
</a>
<a href="#" target="_blank" class="efl-card efl-card--get-started-podcast " aria-label="Introducing England Football Learning Live">
<div class="efl-card__image ">
<img src="/assets/example-content/get-started-podcast-img.jpg" />
</div>
<div class="efl-card__content ">
<div class="efl-card__inner">
<div class="efl-card__content--category">coachcast</div>
<div class="efl-card__content--title">Introducing England Football Learning Live</div>
<p class="efl-card__content--description">Our first live virtual conference arrives this summer – and you can be a part of it! Laura Seth, our performance analysis and insights manager, provides all</p>
</div>
<span class="cta cta--efl get-started-cta" tabindex="0">read more</span>
</div>
</a>
<a href="#" target="_blank" class="efl-card efl-card--get-started-youtube " aria-label="EFL Youtube channel">
<div class="efl-card__image ">
<img src="/assets/example-content/get-started-youtube-img.jpg" />
</div>
<div class="efl-card__content ">
<div class="efl-card__inner">
<div class="efl-card__content--category">youtube</div>
<div class="efl-card__content--title">EFL Youtube channel</div>
<p class="efl-card__content--description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer suscipit purus vel malesuada vehicula. Quisque tincidunt venenatis velit, molestie tincidunt magna dictum ac.</p>
</div>
<span class="cta cta--efl get-started-cta" tabindex="0">read more</span>
</div>
</a>
<a href="#" target="_blank" class="efl-card efl-card--get-started-community " aria-label="Join the FA Community">
<div class="efl-card__image ">
<img src="/assets/example-content/get-started-community-img.jpg" />
</div>
<div class="efl-card__content ">
<div class="efl-card__inner">
<div class="efl-card__content--category">community</div>
<div class="efl-card__content--title">Join the FA Community</div>
<p class="efl-card__content--description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu odio lorem.</p>
</div>
<span class="cta cta--efl get-started-cta" tabindex="0">read more</span>
</div>
</a>
</ul>
</div>
</div>
</div>
</div>
No notes defined.
{
"background-img": {
"smallimage": "/assets/example-content/get-started-v2/get-started-learning-mob.jpg",
"bigimage": "/assets/example-content/get-started-v2/get-started-learning-desk.jpg"
},
"overlay-text": {
"category": "learning support",
"title": "Session plans, articles, podcasts & community",
"copy": "England football learning offers a wide range of non-coaching qualifications that will help you progress in your career. From medical training to talent identification to safeguarding, we have something for everyone."
}
}
import { gsap } from 'gsap';
import { renderSlideDiv } from '../carousel/get-started-carousel-glide';
import { animationTime } from '../../modules/efl-get-started/efl-get-started';
export default parentElement => {
const slideContainer = parentElement.querySelector('.slides');
const slides = parentElement.querySelectorAll('.slides > *');
const contentOverlay = parentElement.querySelector(
'.get-started-learning__overlay'
);
const MOBILE_BREAKPOINT = 768;
const defaultWidth = window.innerWidth;
let sectionWidth;
if (window.innerWidth <= MOBILE_BREAKPOINT) {
sectionWidth = window.innerWidth;
} else {
sectionWidth = window.innerWidth;
}
const renderDesktopSlideDiv = () => {
const getStartedBanner = parentElement.querySelector(
'.get-started-index-card-text'
);
const cards = parentElement.querySelectorAll('.efl-card');
// eslint-disable-next-line no-unused-vars
let slideCardContainer;
// eslint-disable-next-line no-param-reassign
slideContainer.innerHTML = '';
const firstlistElement = document.createElement('li');
const firstCardElement = document.createElement('div');
firstCardElement.className = 'step-1';
firstCardElement.appendChild(getStartedBanner);
firstlistElement.appendChild(firstCardElement);
slideContainer.appendChild(firstlistElement);
slideCardContainer = firstCardElement;
const secondlistElement = document.createElement('li');
const secondCardElement = document.createElement('div');
secondCardElement.className = 'step-2';
secondCardElement.appendChild(cards[0]);
secondCardElement.appendChild(cards[1]);
secondCardElement.appendChild(cards[2]);
secondCardElement.appendChild(cards[3]);
secondlistElement.appendChild(secondCardElement);
slideContainer.appendChild(secondlistElement);
slideCardContainer = secondCardElement;
const thirdlistElement = document.createElement('li');
const thirdCardElement = document.createElement('div');
thirdCardElement.className = 'step-3';
thirdCardElement.appendChild(cards[4]);
thirdCardElement.appendChild(cards[5]);
thirdlistElement.appendChild(thirdCardElement);
slideContainer.appendChild(thirdlistElement);
slideCardContainer = thirdCardElement;
const fourthlistElement = document.createElement('li');
const fourthCardElement = document.createElement('div');
fourthCardElement.className = 'step-4';
fourthCardElement.appendChild(cards[6]);
fourthlistElement.appendChild(fourthCardElement);
slideContainer.appendChild(fourthlistElement);
slideCardContainer = fourthCardElement;
};
if (defaultWidth < MOBILE_BREAKPOINT) {
renderSlideDiv(slideContainer, slides);
} else {
renderDesktopSlideDiv();
}
const renderSlide = parentElement.querySelectorAll('.slides > *');
// eslint-disable-next-line no-param-reassign
parentElement.querySelector('.slides').style.width = `${sectionWidth *
renderSlide.length}px`;
// eslint-disable-next-line no-param-reassign
parentElement.querySelector(
'.slides'
).style.transition = `transform ${animationTime}ms cubic-bezier(0.16, 1, 0.3, 1)`;
renderSlide.forEach(slide => {
// eslint-disable-next-line no-param-reassign
slide.style.width = `${sectionWidth}px`;
});
gsap.set(contentOverlay, { y: 0, ease: 'power2' });
};
.get-started-learning {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
transform: translateY(0);
transition: transform 3s cubic-bezier(0.16, 1, 0.3, 1);
&__overlay {
position: absolute;
top: 0;
height: 100vh;
width: 100vw;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
&--wrapper {
position: relative;
z-index: 3;
margin: 0 auto;
.slides-container {
max-height: 100vh;
width: 100%;
}
.slides {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap;
white-space: initial;
flex-direction: row;
padding-left: 0;
transition: transform 3s cubic-bezier(0.16, 1, 0.3, 1);
& > li {
display: flex;
justify-content: center;
min-height: 100vh;
align-items: center;
width: 100%;
& > div {
display: flex;
align-items: center;
margin: 0 3.2rem;
flex-direction: column;
max-width: 144rem;
& > div {
display: flex;
align-items: center;
flex-direction: column;
}
&.card {
display: flex;
gap: 7.4rem;
}
& > .efl-card {
.efl-card__content--description {
@include text-limit(2);
}
.cta {
max-width: none;
margin-top: 1.6rem;
}
}
}
& > .step-2 {
& > .efl-card {
.cta {
margin-top: 0;
}
}
}
}
}
.get-started-next-prev-cta {
display: flex;
position: absolute;
bottom: 14.4rem;
width: 100%;
height: 3.2rem;
flex-direction: row;
justify-content: space-between;
}
.prev-step {
display: flex;
position: relative;
bottom: 0;
left: 6rem;
width: 15.8rem;
height: 3.2rem;
z-index: 9;
cursor: pointer;
}
.next-step {
display: flex;
position: relative;
bottom: 0;
right: 6rem;
width: 15.8rem;
height: 3.2rem;
z-index: 9;
cursor: pointer;
}
}
}
@media screen and (min-width: 768px) {
&__overlay {
&--wrapper {
flex-direction: row;
.slides {
align-items: center;
width: 100%;
li {
position: relative;
width: 100%;
& > div {
overflow: hidden;
& > div {
min-height: initial;
}
.efl-card__image {
img {
object-position: right;
transition: object-position 0.6s ease-out;
}
}
}
& > .step-2 {
display: grid;
grid-template: auto auto / auto auto;
grid-row-gap: 4.3rem;
grid-column-gap: 9.1rem;
grid-auto-flow: column;
width: 100%;
& > .efl-card {
transition: transform 3s cubic-bezier(0.16, 1, 0.3, 1);
}
}
& > .step-3 {
display: grid;
grid-template: auto auto / auto auto;
grid-column-gap: 7.8rem;
justify-content: center;
align-items: center;
width: 100%;
/* stylelint-disable no-descending-specificity */
& > .efl-card {
transition: transform 3s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
}
}
.efl-card.efl-card:hover .efl-card__image img {
transform: none;
}
&.active {
& > div {
.efl-card__image {
img {
object-position: center;
}
}
}
& > .step-2 {
& > .efl-card:first-of-type {
transform: translateY(0);
}
& > .efl-card:nth-child(2) {
transform: translateY(0);
}
& > .efl-card:nth-child(3) {
transform: translateY(0);
}
& > .efl-card:last-of-type {
transform: translateY(0);
}
}
& > .step-3 {
& > .efl-card:first-of-type {
transform: translateY(0);
}
& > .efl-card:last-of-type {
transform: translateY(0);
}
}
}
}
}
}
}
}
}
<div class="get-started-content get-started-learning" data-page="get-started-learning" data-behaviour="get-started-learning">
{{render '@get-started-index-card-image' background-img merge="true"}}
<div class="get-started-learning__overlay">
<div class="get-started-learning__overlay--wrapper">
<div class="slides-container">
<ul class="slides">
{{render '@get-started-index-card-text' overlay-text merge="true"}}
{{render '@efl-card--get-started-session'}}
{{render '@efl-card--get-started-session'}}
{{render '@efl-card--get-started-article'}}
{{render '@efl-card--get-started-article'}}
{{render '@efl-card--get-started-podcast'}}
{{render '@efl-card--get-started-youtube'}}
{{render '@efl-card--get-started-community'}}
</ul>
</div>
</div>
</div>
</div>