England Football

Get Started Courses 

<div class="get-started-content get-started-courses" data-page="get-started-courses" data-behaviour="get-started-courses">
    <div class="get-started-index-card-image">
        <picture>
            <source media="(max-width: 819px)" srcset="/assets/example-content/get-started-v2/get-started-courses-mob.jpg">
            <source media="(min-width: 820px)" srcset="/assets/example-content/get-started-v2/get-started-courses-desk.jpg">
            <img class="bg-image" src="/assets/example-content/get-started-v2/get-started-courses-desk.jpg" alt="" loading="lazy">
        </picture>
    </div>
    <div class="get-started-courses__overlay">
        <div class="get-started-courses__overlay--wrapper">
            <div class="slides-container">
                <ul class="slides">
                    <div class="get-started-index-card-text">
                        <div class="get-started-index-card-text__wrapper white">
                            <div class="category">How to coach passing in football</div>
                            <h2>Get started in grassroots football</h2>
                            <p>Before you get started you have to do...</p>
                        </div>
                    </div>
                    <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="How to coach passing in football">
                        <div class="efl-card__image efl-card__image--video">

                            <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="How to coach passing in football">
                        <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">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="Why you should try futsal">
                        <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">CAT TITLE</div>
                                <div class="efl-card__content--title">Why you should try futsal</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="Why you should try futsal">
                        <div class="efl-card__image efl-card__image--video">

                            <img src="/assets/example-content/news-horizontal-4.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">Why you should try futsal</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="Why you should try futsal">
                        <div class="efl-card__image efl-card__image--video">

                            <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">Why you should try futsal</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>

                </ul>
            </div>
        </div>
    </div>
</div>

No notes defined.

{
  "background-img": {
    "smallimage": "/assets/example-content/get-started-v2/get-started-courses-mob.jpg",
    "bigimage": "/assets/example-content/get-started-v2/get-started-courses-desk.jpg"
  },
  "overlay-text": {
    "category": "How to coach passing in football",
    "title": "Get started in grassroots football",
    "copy": "Before you get started you have to do...",
    "modifier": "white"
  },
  "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",
    "hasVideo": true,
    "modifier": "horizontal",
    "href": "/",
    "getStartedCta": true,
    "target": "_blank",
    "getstartedcta": "BECOME AN EE PLAYMAKER"
  },
  "efl-card-2": {
    "title": "How to coach passing in football",
    "category": "CAT TITLE",
    "image": "/assets/example-content/news-horizontal-2.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",
    "hasVideo": true,
    "modifier": "horizontal",
    "href": "/",
    "getStartedCta": true,
    "target": "_blank",
    "getstartedcta": "BECOME AN EE PLAYMAKER"
  },
  "efl-card-3": {
    "title": "Why you should try futsal",
    "category": "CAT TITLE",
    "image": "/assets/example-content/news-horizontal-3.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",
    "hasVideo": true,
    "modifier": "horizontal",
    "href": "/",
    "getStartedCta": true,
    "target": "_blank",
    "getstartedcta": "BECOME AN EE PLAYMAKER"
  },
  "efl-card-4": {
    "title": "Why you should try futsal",
    "category": "CAT TITLE",
    "image": "/assets/example-content/news-horizontal-4.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",
    "hasVideo": true,
    "modifier": "horizontal",
    "href": "/",
    "getStartedCta": true,
    "target": "_blank",
    "getstartedcta": "BECOME AN EE PLAYMAKER"
  },
  "efl-card-5": {
    "title": "Why you should try futsal",
    "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",
    "hasVideo": true,
    "modifier": "horizontal",
    "href": "/",
    "getStartedCta": true,
    "target": "_blank",
    "getstartedcta": "BECOME AN EE PLAYMAKER"
  }
}
  • Content: 
    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-courses__overlay'
  );
  const MOBILE_BREAKPOINT = 768;
  let sectionWidth;

  if (window.innerWidth <= MOBILE_BREAKPOINT) {
    sectionWidth = window.innerWidth;
  } else {
    sectionWidth = window.innerWidth;
  }

  renderSlideDiv(slideContainer, slides);

  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' });
};
  • URL: /components/raw/get-started-courses/get-started-courses.js
  • Filesystem Path: src/library/components/get-started-courses/get-started-courses.js
  • Size: 1.3 KB
  • Content: 
    .get-started-courses {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  transform: translateY(0);
  transition: transform 3s cubic-bezier(0.16, 1, 0.3, 1);
  &::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: url('./assets/example-content/get-started-v2/noise.png') repeat
      center;
  }
  &__overlay {
    position: absolute;
    top: 0;
    height: 100vh;
    width: 100vw;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    &::before {
      content: '';
      background: linear-gradient(
        180deg,
        rgba(29, 29, 27, 0.1) 0%,
        rgba(29, 29, 27, 0.35) 100%
      );
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      z-index: 1;
    }
    &::after {
      content: '';
      background: linear-gradient(
        180deg,
        rgba(29, 29, 27, 0.1) 0%,
        rgba(29, 29, 27, 0.35) 100%
      );
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      z-index: 2;
    }
    &--wrapper {
      position: relative;
      z-index: 3;
      margin: 0 auto;
      .slides-container {
        max-height: 100vh;
        // overflow: hidden;
        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;
          & > 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;
              white-space: pre-wrap;
            }
            &.card {
              display: flex;
              gap: 7.4rem;
              .efl-card:focus {
                outline: none;
                box-shadow: none;
              }
              .efl-card__content {
                background: transparent;
                border-bottom: none;
                .efl-card__content--category {
                  color: $light-blue;
                }
                .efl-card__content--title {
                  color: $white;
                }
                .efl-card__content--description {
                  color: $grey-light;

                  @include text-limit(2);
                }
                span {
                  max-width: 100%;
                  margin-top: 2.4rem;
                  border: none;
                }
              }
            }
          }
        }
      }
      .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;
          li {
            position: relative;
            & > div {
              width: 100vw;
              max-width: 128.6rem;
              align-items: initial;
              // opacity: 0;
              // transition: opacity 3s cubic-bezier(0.16, 1, 0.3, 1);
              & > div {
                min-height: initial;
                margin: 0 auto;
              }
              &.card {
                flex-flow: nowrap;
                gap: 7.4rem;
                justify-content: center;
                & > .efl-card {
                  width: 35rem;
                  transition: transform 3s cubic-bezier(0.16, 1, 0.3, 1);
                  .efl-card__image {
                    width: inherit;
                    img {
                      object-position: right;
                      transition: object-position 0.6s ease-out;
                    }
                  }
                  .efl-card__inner {
                    white-space: initial;
                  }
                  .cta {
                    max-width: none;
                    margin-top: 2.4rem;
                    border: none;
                  }
                }
              }
            }
            .efl-card.efl-card:hover .efl-card__image img {
              transform: none;
            }
            &.active {
              & > div {
                // opacity: 1;
                &.card {
                  & > .efl-card {
                    .efl-card__image {
                      img {
                        object-position: center;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
  • URL: /components/raw/get-started-courses/get-started-courses.scss
  • Filesystem Path: src/library/components/get-started-courses/get-started-courses.scss
  • Size: 5.4 KB 
<div class="get-started-content get-started-courses" data-page="get-started-courses" data-behaviour="get-started-courses">
     {{render '@get-started-index-card-image' background-img merge="true"}}
    <div class="get-started-courses__overlay">
        <div class="get-started-courses__overlay--wrapper">
            <div class="slides-container">
                <ul class="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-4 merge="true"}}
                    {{render '@efl-card' efl-card-5 merge="true"}}
                </ul>
            </div>
        </div>
    </div>
</div>