England Football

Get Started 

<div class="get-started">
    <div class="get-started-navigation" data-behaviour="get-started-navigation">
        <ul role="tablist" class="get-started-navigation__tabs">
            <li>
                <a id=get-started-intro role="tab" tabindex="0" aria-selected="true">
                    Intro video
                </a>
            </li>
            <li>
                <a id=get-started-become-coach role="tab" tabindex="0" aria-selected="false">
                    Why become a caoch
                </a>
            </li>
            <li>
                <a id=get-started-courses role="tab" tabindex="0" aria-selected="false">
                    Entry level courses
                </a>
            </li>
            <li>
                <a id=get-started-learning role="tab" tabindex="0" aria-selected="false">
                    Learning support
                </a>
            </li>
            <li>
                <a id=get-started-faq role="tab" tabindex="0" aria-selected="false">
                    FAQ
                </a>
            </li>
        </ul>
    </div>
    <div class="get-started-content get-started-intro" data-page="get-started-intro" data-behavior="get-started-intro" data-video-type="youtube" data-video-id="ufLSGCZEPrg">
        <div class="get-started-intro__wrapper">
            <div class="get-started-intro__player-wrap">
                <div id=0 class="intro-video-player"></div>
                <img src="/assets/example-content/get-started-intro-image.jpg" />
            </div>
            <div class="get-started-intro__overlay">
                <h2>Get ready to play your part in the greatest game on Earth</h2>
                <p>Watch our introduction to England Football Learning video, or scroll down to find out how we can support you learning journey</p>
                <a href="/" class="cta cta--primary  play-video" id="play-video" tabindex="0">Play Video</a>

            </div>
            <div class="get-started-intro__hero-video">
                <div class="get-started-video" data-behavior="get-started-video" data-video-type="youtube" data-video-id="R7qSx1Zb-NQ">
                    <div class="get-started-video__player-wrap">
                        <div id=intro class="get-start-video"></div>
                    </div>
                    <div class="get-started-video__control-overlay">
                        <a class="full-screen" href="#" role="full screen" aria-label="video full screen" tabindex="0"></a>
                        <a class="close-video" href="#" role="close video" aria-label="video close" tabindex="0"></a>
                        <div class="play-pause-controls">
                            <a class="play-pause-controls__play hidden" role="video play" aria-label="video play button" tabindex="0" aria-selected="true"></a>
                            <a class="play-pause-controls__pause" role="video pause button" aria-label="video pause button" tabindex="0" aria-selected="true"></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

No notes defined.

/* No context defined. */
  • Content: 
    .get-started {
  position: relative;
  &.intro-overlay {
    &::before {
      content: '';
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      background: $black;
      opacity: 0.7;
      z-index: 1;
    }
  }
}
  • URL: /components/raw/get-started/get-started.scss
  • Filesystem Path: src/library/modules/get-started/get-started.scss
  • Size: 270 Bytes 
<div class="get-started">
    {{render '@get-started-navigation'}}
    {{render '@get-started-intro'}}
</div>