<div class="get-started-content get-started-become-coach" data-speed="4" data-lag="2" data-page="get-started-become-coach" data-behaviour="get-started-become-coach">
<div class="get-started-index-card-image">
<picture>
<source media="(max-width: 819px)" srcset="/assets/example-content/get-started-v2/become-coach-mob.png">
<source media="(min-width: 820px)" srcset="/assets/example-content/get-started-v2/become-coach-desk.png">
<img class="bg-image" src="/assets/example-content/get-started-v2/become-coach-desk.png" alt="" loading="lazy">
</picture>
</div>
<div class="get-started-become-coach__overlay">
<div class="get-started-become-coach__overlay--wrapper">
<div class="carousel" data-behavior="get-started-carousel-glide">
<div data-glide-el="track">
<ul class="glide__slides">
<div class="get-started-index-card-text">
<div class="get-started-index-card-text__wrapper ">
<div class="category">get started</div>
<h2>Why become a coach</h2>
<p>Get started with England Football Learning and join millions in growing the grassroots game. We offer support, guidance, and advice to help you learn and find your role.</p>
</div>
</div>
<a href="#" target="_blank" class="efl-card efl-card--horizontal " aria-label="How to coach passing in football">
<div class="efl-card__image ">
<img src="/assets/example-content/news-horizontal-1.jpg" />
</div>
<div class="efl-card__content ">
<div class="efl-card__inner">
<div class="efl-card__content--category">CAT TITLE</div>
<div class="efl-card__content--title">How to coach passing in football</div>
<p class="efl-card__content--description">Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance</p>
</div>
<span class="cta cta--efl get-started-cta" tabindex="0">BECOME AN EE PLAYMAKER</span>
</div>
</a>
<a href="#" target="_blank" class="efl-card efl-card--horizontal " id="video-dialog-label" data-behavior="get-started-lightbox" data-video-id="ufLSGCZEPrg" data-video-type="youtube" aria-label="Not Sure How or Where to Start?">
<div class="efl-card__image efl-card__image--video">
<img src="/assets/example-content/news-horizontal-2.jpg" />
</div>
<div class="efl-card__content ">
<div class="efl-card__inner">
<div class="efl-card__content--category">CAT TITLE</div>
<div class="efl-card__content--title">Not Sure How or Where to Start?</div>
<p class="efl-card__content--description">Catherine began taking her children to weekly football sessions, and is now coaching with confidence!</p>
</div>
<span class="cta cta--efl get-started-cta" tabindex="0">BECOME AN EE PLAYMAKER</span>
</div>
</a>
<a href="#" class="efl-card efl-card--horizontal " id="video-dialog-label" data-behavior="get-started-lightbox" data-video-id="ufLSGCZEPrg" data-video-type="youtube" aria-label="What does a grassroots coach do">
<div class="efl-card__image efl-card__image--video">
<img src="/assets/example-content/news-horizontal-3.jpg" />
</div>
<div class="efl-card__content ">
<div class="efl-card__inner">
<div class="efl-card__content--category">case study video</div>
<div class="efl-card__content--title">What does a grassroots coach do</div>
<p class="efl-card__content--description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu odio lorem.</p>
</div>
</div>
</a>
<a href="#" target="_blank" class="efl-card efl-card--horizontal " id="video-dialog-label" data-behavior="get-started-lightbox" data-video-id="ufLSGCZEPrg" data-video-type="youtube" aria-label="Not Sure How or Where to Start?">
<div class="efl-card__image efl-card__image--video">
<img src="/assets/example-content/news-horizontal-2.jpg" />
</div>
<div class="efl-card__content ">
<div class="efl-card__inner">
<div class="efl-card__content--category">CAT TITLE</div>
<div class="efl-card__content--title">Not Sure How or Where to Start?</div>
<p class="efl-card__content--description">Catherine began taking her children to weekly football sessions, and is now coaching with confidence!</p>
</div>
<span class="cta cta--efl get-started-cta" tabindex="0">BECOME AN EE PLAYMAKER</span>
</div>
</a>
<a href="#" class="efl-card efl-card--horizontal " id="video-dialog-label" data-behavior="get-started-lightbox" data-video-id="ufLSGCZEPrg" data-video-type="youtube" aria-label="What does a grassroots coach do">
<div class="efl-card__image efl-card__image--video">
<img src="/assets/example-content/news-horizontal-3.jpg" />
</div>
<div class="efl-card__content ">
<div class="efl-card__inner">
<div class="efl-card__content--category">case study video</div>
<div class="efl-card__content--title">What does a grassroots coach do</div>
<p class="efl-card__content--description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu odio lorem.</p>
</div>
</div>
</a>
</ul>
</div>
</div>
</div>
</div>
</div>
No notes defined.
{
"background-img": {
"smallimage": "/assets/example-content/get-started-v2/become-coach-mob.png",
"bigimage": "/assets/example-content/get-started-v2/become-coach-desk.png"
},
"overlay-text": {
"category": "get started",
"title": "Why become a coach",
"copy": "Get started with England Football Learning and join millions in growing the grassroots game. We offer support, guidance, and advice to help you learn and find your role."
},
"efl-card-1": {
"title": "How to coach passing in football",
"category": "CAT TITLE",
"image": "/assets/example-content/news-horizontal-1.jpg",
"description": "Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance",
"modifier": "horizontal",
"getStartedCta": true,
"hasVideo": false,
"target": "_blank",
"getstartedcta": "BECOME AN EE PLAYMAKER"
},
"efl-card-2": {
"title": "Not Sure How or Where to Start?",
"category": "CAT TITLE",
"image": "/assets/example-content/news-horizontal-2.jpg",
"description": "Catherine began taking her children to weekly football sessions, and is now coaching with confidence!",
"hasVideo": true,
"modifier": "horizontal",
"getStartedCta": true,
"target": "_blank",
"getstartedcta": "BECOME AN EE PLAYMAKER"
},
"efl-card-3": {
"title": "What does a grassroots coach do",
"category": "case study video",
"image": "/assets/example-content/news-horizontal-3.jpg",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu odio lorem.",
"hasVideo": true,
"noLink": true,
"modifier": "horizontal"
}
}
// eslint-disable-next-line no-unused-vars
export default parentElement => {
// bindRiveFIles(parentElement, 'Blue Arrow', 'Left & Right BLUE');
};
.get-started-become-coach {
position: relative;
width: 100%;
height: 100vh;
transform: translateY(0);
transition: transform 3s cubic-bezier(0.16, 1, 0.3, 1);
&__wrapper {
height: 100%;
width: 100%;
.bg-image {
object-fit: cover;
height: 100%;
width: 100%;
}
}
&__overlay {
position: absolute;
top: 0;
height: 100vh;
width: 100vw;
transition: transform 3s cubic-bezier(0.16, 1, 0.3, 1);
&--wrapper {
.glide__slides {
height: 100vh;
li {
& > div {
display: flex;
margin: 0 3.2rem;
flex-direction: column;
& > div {
display: flex;
align-items: center;
flex-direction: column;
white-space: pre-wrap;
}
&.card {
.efl-card:focus {
outline: none;
box-shadow: none;
}
.efl-card__content {
background: transparent;
.efl-card__content--description {
@include text-limit(2);
}
}
.cta {
max-width: none;
margin-top: 2.4rem;
}
.efl-card.efl-card:hover .efl-card__image img {
transform: none;
}
}
}
&:not(:first-child) {
& > div {
min-height: 54.2rem;
}
}
}
}
.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;
}
.mobile-carousel {
& > div[data-glide-el='track'] {
max-height: 100vh;
overflow-x: hidden !important;
}
.glide__slides {
flex-wrap: nowrap;
white-space: initial;
flex-direction: row;
padding-left: 0;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
overflow: unset !important;
li {
min-height: 100vh;
align-items: center;
}
}
}
}
}
@media screen and (min-width: 768px) {
&__overlay {
overflow-x: auto;
overflow-y: hidden;
&--wrapper {
flex-direction: row;
.glide__slides {
align-items: center;
transition: transform 3s cubic-bezier(0.16, 1, 0.3, 1);
.glide__slide--active {
.efl-card__image {
max-width: 100% !important;
img {
object-position: center !important;
}
}
}
li {
& > div {
width: 100vw;
max-width: 128.6rem;
& > div {
min-height: initial;
}
&.card {
flex-flow: nowrap;
gap: 5.6rem;
justify-content: center;
& > .efl-card {
.efl-card__image {
width: inherit;
max-width: 85%;
transition: max-width 0.5s ease;
}
.efl-card__image img {
object-position: right;
transition: object-position 0.6s ease-out;
}
.efl-card__inner {
white-space: initial;
}
}
& > .efl-card:first-of-type {
width: 31.1rem;
}
& > .efl-card:last-of-type {
width: 31.1rem;
}
}
}
&:not(:first-child) {
& > div {
min-height: unset;
}
}
}
}
}
}
}
}
<div class="get-started-content get-started-become-coach" data-speed="4" data-lag="2"data-page="get-started-become-coach" data-behaviour="get-started-become-coach">
{{render '@get-started-index-card-image' background-img merge="true"}}
<div class="get-started-become-coach__overlay">
<div class="get-started-become-coach__overlay--wrapper">
<div class="carousel" data-behavior="get-started-carousel-glide">
<div data-glide-el="track">
<ul class="glide__slides">
{{render '@get-started-index-card-text' overlay-text merge="true"}}
{{render '@efl-card' efl-card-1 merge="true"}}
{{render '@efl-card' efl-card-2 merge="true"}}
{{render '@efl-card' efl-card-3 merge="true"}}
{{render '@efl-card' efl-card-2 merge="true"}}
{{render '@efl-card' efl-card-3 merge="true"}}
</ul>
</div>
</div>
</div>
</div>
</div>