England Football

News Landing 

<div class="news-landing" data-behaviour="news-landing-page">
    <div class="news-landing__imagewarapper england">
        <a href="#" tabindex="-1">
            <img src="/assets/example-content/news-landing-teams-1.jpg" loading="lazy">
            <img src="/assets/example-content/news-landing-teams-2.jpg" loading="lazy">
            <img src="/assets/example-content/news-landing-teams-3.jpg" loading="lazy">
        </a>
    </div>
    <div class="news-landing__imagewarapper grassroots">
        <a href="#" tabindex="-1">
            <img src="/assets/example-content/news-landing-grassroot-1.jpg" loading="lazy">
            <img src="/assets/example-content/news-landing-grassroot-2.jpg" loading="lazy">
            <img src="/assets/example-content/news-landing-grassroot-3.jpg" loading="lazy">
        </a>

    </div>
    <div class="news-landing__overlay">
        <a href="#" tabindex="-1" class="news-landing__overlay--england" data-link="england">
            <div class="news-landing__btn-wrapper">
                <h3>England Teams</h3>
                <button href="#">view news</button>
            </div>
        </a>
        <a href="#" tabindex="-1" class="news-landing__overlay--grassroots" data-link="grassroots">
            <div class="news-landing__btn-wrapper">
                <h3>GRASSROOT FOOTBALL</h3>
                <button href="#">view news</button>
            </div>
        </a>
    </div>
</div>

No notes defined.

/* No context defined. */
  • Content: 
    export default parentElement => {
  const englandteams = parentElement.querySelector(
    '.news-landing__imagewarapper.england a'
  );
  const grassroot = parentElement.querySelector(
    '.news-landing__imagewarapper.grassroots a'
  );
  const englandCount = englandteams.querySelectorAll('img').length;
  const grassrootCount = grassroot.querySelectorAll('img').length;
  const overlay = parentElement.querySelectorAll('.news-landing__overlay > *');

  if (englandCount > 0) {
    const randomNo1 = Math.floor(Math.random() * englandCount + 1);

    englandteams
      .querySelector(`img:nth-child(${randomNo1})`)
      .classList.add('active');
  }

  if (grassrootCount > 0) {
    const randomNo2 = Math.floor(Math.random() * grassrootCount + 1);

    grassroot
      .querySelector(`img:nth-child(${randomNo2})`)
      .classList.add('active');
  }

  overlay.forEach(link => {
    link.addEventListener('mouseover', () => {
      const hoverEl = link.getAttribute('data-link');

      parentElement
        .querySelector(`.news-landing__imagewarapper.${hoverEl}`)
        .classList.add('active');
    });
    link.addEventListener('mouseout', () => {
      const hoverEl = link.getAttribute('data-link');

      parentElement
        .querySelector(`.news-landing__imagewarapper.${hoverEl}`)
        .classList.remove('active');
    });
  });
};
  • URL: /components/raw/news-landing/news-landing.js
  • Filesystem Path: src/library/components/news-landing/news-landing.js
  • Size: 1.4 KB
  • Content: 
    .news-landing {
  display: flex;
  align-content: space-around;
  flex-direction: column;
  height: 67.4rem;
  overflow: hidden;
  position: relative;
  &__imagewarapper {
    overflow: hidden;
    position: relative;
    width: 100%;
    transform: skew(0, -3deg);
    -webkit-transform: skew(0, -3deg);
    -moz-transform: skew(0, -3deg);
    -o-transform: skew(0, -3deg);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    img {
      transform: skew(0, 0deg);
      -webkit-transform: skew(0, 0deg);
      -moz-transform: skew(0, 3deg);
      -o-transform: skew(0, 3deg);
      object-fit: cover;
      position: absolute;
      height: 100%;
      width: 100%;
      display: none;
      &.active {
        display: inline-block;
      }
    }
    &.england {
      height: 34.6rem;
      margin-top: -2rem;
      &::after {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        background: linear-gradient(
          180deg,
          rgba(0, 0, 0, 0) 0%,
          rgba(1, 30, 65, 0.34) 50.52%,
          $crest-blue 94.79%
        );
        bottom: 0;
      }
    }
    &.grassroots {
      height: 37.6rem;
      margin-bottom: -2.5rem;
      img {
        top: -2.6rem;
      }
      &::after {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        background: linear-gradient(
          180deg,
          rgba(0, 0, 0, 0) 0%,
          rgba(1, 30, 65, 0.34) 50.52%,
          $blue 94.79%
        );
        bottom: -2px;
      }
    }
  }
  &__overlay {
    width: 100%;
    height: 100%;
    display: flex;
    position: absolute;
    text-align: center;
    z-index: 1;
    flex-direction: column;
    &--england {
      bottom: -25px;
      transform: skew(0, -3deg);
      -webkit-transform: skew(0, -3deg);
      -moz-transform: skew(0, -3deg);
      -o-transform: skew(0, -3deg);
      height: 100%;
      text-decoration: none;
      h3 {
        font-family: $heading-font;
        font-size: 56px;
        line-height: 47px;
        margin-top: 14.5rem;
        letter-spacing: 0.01em;
        color: $white;
      }
    }
    &--grassroots {
      transform: skew(0, -3deg);
      -webkit-transform: skew(0, -3deg);
      -moz-transform: skew(0, -3deg);
      -o-transform: skew(0, -3deg);
      height: 100%;
      text-decoration: none;
      h3 {
        font-family: $text-font-ef;
        font-size: 42px;
        line-height: 40px;
        margin-top: 14.5rem;
        letter-spacing: -0.02em;
        color: $white;
        font-style: italic;
        font-weight: 700;
      }
    }
    button {
      font-family: $text-font-ef;
      font-size: 14px;
      font-weight: bold;
      text-transform: uppercase;
      color: $blue;
      background: $white;
      width: 259px;
      height: 44px;
      border-radius: 2px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      margin-top: 2.4rem;
      border: none;
      cursor: pointer;
      &:hover {
        background-color: $blue;
        color: $white;
      }
    }
  }
  &__btn-wrapper {
    position: inherit;
    bottom: 10.6rem;
    transform: skew(0, 3deg);
    -webkit-transform: skew(0, 3deg);
    -moz-transform: skew(0, 3deg);
    -o-transform: skew(0, 3deg);
  }

  @media (min-width: $mq-large) {
    flex-direction: row;
    height: calc(100vh - 81px);
    min-height: 60rem;
    &__imagewarapper {
      -webkit-transform: skew(-5deg);
      -moz-transform: skew(-5deg);
      -o-transform: skew(-5deg);
      transform: skew(-5deg);
      transition: width 0.3s ease-in-out;
      img {
        -webkit-transform: skew(5deg);
        -moz-transform: skew(5deg);
        -o-transform: skew(5deg);
        transform: skew(5deg);
        height: 100%;
        width: 100%;
        transition: transform 0.3s ease-in-out;
      }
      &.england {
        height: calc(100vh - 81px);
        min-height: 60rem;
        margin-top: 0;
        margin-left: -3.9rem;
        transition: margin-left 0.3s ease-in-out;
        img {
          right: -3.8rem;
        }
        &::after {
          height: 41.1rem;
        }
      }
      &.grassroots {
        height: calc(100vh - 81px);
        min-height: 60rem;
        margin-bottom: 0;
        margin-right: -4rem;
        img {
          top: 0;
          left: -4rem;
        }
        &::after {
          height: 41.1rem;
        }
      }
      &:hover,
      &.active {
        width: 110%;
        img {
          transform: scale(1.1) skew(5deg);
        }
        &:first-child {
          margin-left: -3.9rem;
        }
      }
    }
    &__overlay {
      flex-direction: row;
      &--england {
        bottom: 0;
        transform: skew(-5deg);
        -webkit-transform: skew(-5deg);
        -moz-transform: skew(-5deg);
        -o-transform: skew(-5deg);
        cursor: pointer;
        h3 {
          font-size: 9.8rem;
          line-height: 8.4rem;
        }
      }
      &--grassroots {
        transform: skew(-5deg);
        -webkit-transform: skew(-5deg);
        -moz-transform: skew(-5deg);
        -o-transform: skew(-5deg);
        margin-left: -1.5rem;
        bottom: 0;
        cursor: pointer;
        h3 {
          font-size: 7.8rem;
          line-height: 6.8rem;
          margin-top: 15.6rem;
        }
      }
    }
    &__btn-wrapper {
      max-width: 51.7rem;
      position: absolute;
      bottom: 10.6rem;
      transform: skew(5deg);
      -webkit-transform: skew(5deg);
      -moz-transform: skew(5deg);
      -o-transform: skew(5deg);
      left: 0;
      right: 0;
      margin: 0 auto;
    }
  }

  @media (min-width: $mq-large) {
    &__overlay {
      &--england {
        width: 100%;
        right: 0;
      }
      &--grassroots {
        width: 100%;
        left: 0;
      }
    }
  }
}
  • URL: /components/raw/news-landing/news-landing.scss
  • Filesystem Path: src/library/components/news-landing/news-landing.scss
  • Size: 5.9 KB 
<div class="news-landing" data-behaviour="news-landing-page">
    <div class="news-landing__imagewarapper england">
        <a href="#" tabindex="-1">
            <img src="/assets/example-content/news-landing-teams-1.jpg" loading="lazy">
            <img src="/assets/example-content/news-landing-teams-2.jpg" loading="lazy"> 
            <img src="/assets/example-content/news-landing-teams-3.jpg" loading="lazy">           
        </a>     
    </div>
    <div class="news-landing__imagewarapper grassroots">
        <a href="#" tabindex="-1">
            <img src="/assets/example-content/news-landing-grassroot-1.jpg" loading="lazy">
            <img src="/assets/example-content/news-landing-grassroot-2.jpg" loading="lazy">
            <img src="/assets/example-content/news-landing-grassroot-3.jpg" loading="lazy">
        </a> 
             
    </div>
    <div class="news-landing__overlay">
        <a href="#" tabindex="-1" class="news-landing__overlay--england" data-link="england">
            <div class="news-landing__btn-wrapper">
                <h3>England Teams</h3>
                <button href="#">view news</button>
            </div>
        </a>
        <a href="#" tabindex="-1" class="news-landing__overlay--grassroots" data-link="grassroots"> 
            <div class="news-landing__btn-wrapper"> 
                <h3>GRASSROOT FOOTBALL</h3>
                <button href="#">view news</button>
            </div>
        </a>
    </div>
</div>