Academy of Natural Sciences

Page 404 

<div class="c-404">
    <div class="o-container">
        <h1 class="u-sr-only">Error 404</h1>
        <div class="c-404__content">
            <div class="c-404__video">

                <div class="o-ambient-video js-video-parent ">

                    <div class="o-ambient-video__media">
                        <img src="/images/404_placeholder.png" alt="404" />

                        <video src="/video/404.mp4" muted loop playsinline></video>

                        <button class="o-ambient-video__toggle js-video-toggle o-ambient-video__video-content" aria-label="Play Video" data-pauselabel="Pause Video" data-playlabel="Play Video">
                            <span class="o-ambient-video__icon--pause" aria-hidden="true">
                                <svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path class="u-ct-stroke" d="M9 0.0341797L9 13.8789" stroke="#C34737" stroke-width="2" />
                                    <path class="u-ct-stroke" d="M1 0.0341797L0.999999 13.8789" stroke="#C34737" stroke-width="2" />
                                </svg>

                            </span>
                            <span class="o-ambient-video__icon--play" aria-hidden="true">
                                <svg width="13" height="16" viewBox="0 0 13 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path class="u-ct-stroke" d="M1 15V1L12 8L1 15Z" stroke="#C34737" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>

                            </span>
                        </button>
                    </div>

                    <div class="o-ambient-video__description u-sr-only">
                        Fish swimming through the numbers 404
                    </div>

                    <div class="o-ambient-video__audio-message o-ambient-video__video-content">
                        <p class="f-text--credit">This video does not contain audio</p>
                    </div>

                </div>

            </div>
            <div class="c-404__content">
                <p class="c-404__title f-title--h3">Page not found</p>
                <p class="c-404__message f-text--reg">It looks like the link is broken or this page has been removed.</p>

                <div class="c-404__cta">
                    <a href="#" class="o-btn o-btn--primary">Go back home</a>
                </div>

            </div>
        </div>
    </div>
</div>
 
<div class="c-404">
  <div class="o-container">
    <h1 class="u-sr-only">Error 404</h1>
    <div class="c-404__content">
      <div class="c-404__video">
        {% if videoUrl %}
          {% include "04-objects/ambient-video" with {
            videoPoster: placeholderImage,
            description: 'Fish swimming through the numbers 404',
            videoUrl: videoUrl,
            caption: false,
            credit: false,
            show_audio_message: true,
          } only %}
        {% else %}
          {{ placeholderImage|raw }}
        {% endif %}
      </div>
      <div class="c-404__content">
        <p class="c-404__title f-title--h3">{{ title }}</p>
        <p class="c-404__message f-text--reg">{{ message }}</p>
        {% if ctaLink %}
          <div class="c-404__cta">
            <a href="{{ ctaLink }}" class="o-btn o-btn--primary">{{ ctaTitle }}</a>
          </div>
        {% endif %}
      </div>
    </div>
  </div>
</div>
 
{
  "pageColorTheme": "teal",
  "videoUrl": "/video/404.mp4",
  "placeholderImage": "<img src=\"/images/404_placeholder.png\" alt=\"404\" />",
  "title": "Page not found",
  "message": "It looks like the link is broken or this page has been removed.",
  "ctaTitle": "Go back home",
  "ctaLink": "#"
}
  • Content: 
    .c-404 {
  margin: 4rem 0 10rem;
}

.c-404__video {
  max-width: 60rem;
  margin: 4rem auto 4.8rem;
  color: $c-charcoal;
  text-align: right;

  @include break($sm) {
    margin: 8rem auto 10rem;
  }

  img {
    margin: 0 auto;
  }

  .o-ambient-video,
  .o-ambient-video__media {
    overflow: visible;
  }

  .o-ambient-video__media {
    margin-bottom: 3.2rem;
  }

  .o-ambient-video__toggle {
    bottom: -6rem;
    right: -0.8rem;

    &:before {
      width: 3.2rem;
      height: 3.2rem;
      border: 0.2rem solid $c-charcoal;
    }

    path {
      stroke: $c-charcoal;
    }

    .o-ambient-video__icon--pause {
      top: -0.2rem;

      svg {
        width: 0.8rem;
        height: auto;
      }
    }

    .o-ambient-video__icon--play {
      top: -0.2rem;

      svg {
        width: 1.1rem;
        height: auto;
      }
    }
  }

  .o-ambient-video__audio-message {
    padding-right: 4.4rem;
  }
}

.c-404__content {
  text-align: center;
}

.c-404__message {
  margin-top: 2.4rem;
}

.c-404__cta {
  margin-top: 3.2rem;
}
  • URL: /components/raw/page-404/page-404.scss
  • Filesystem Path: patterns\06-components\page-404\page-404.scss
  • Size: 1.1 KB

No notes defined.