Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

              
                <header class="main-post-wrapper">
  <div class="progress-bar progress-bar--primary hide-on-desktop">
    <div class="progress-bar__fill"></div>
  </div>
  <div class="slides">
    <article class="main-post main-post--active">
      <div class="main-post__image">
        <img src="https://www.formula1.com/content/dam/fom-website/manual/Misc/2019-Races/Monaco2019/McLarenMonaco19.jpg.transform/9col/image.jpg" alt="New McLaren wind tunnel 'critical' to future performance, says Tech Director Key" />
      </div>
      <div class="main-post__content">
        <div class="main-post__tag-wrapper">
          <span class="main-post__tag">News</span>
        </div>
        <h1 class="main-post__title">New McLaren wind tunnel 'critical' to future performance, says Tech Director Key</h1>
        <a class="main-post__link" href="#">
              <span class="main-post__link-text">find out more</span>
              <svg
                class="main-post__link-icon main-post__link-icon--arrow"
                width="37"
                height="12"
                viewBox="0 0 37 12"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M0 6H36.0001M36.0001 6L31.0001 1M36.0001 6L31.0001 11"
                  stroke="white"
                />
              </svg>
            </a>
      </div>
    </article>
    <article class="main-post main-post--not-active">
      <div class="main-post__image">
        <img src="https://www.formula1.com/content/dam/fom-website/sutton/2019/Hungary/Saturday/1017645792-LAT-20190803-_2ST5188.jpg.transform/9col-retina/image.jpg" alt="What To Watch For in the 2019 Hungarian Grand Prix" />
      </div>
      <div class="main-post__content">
        <div class="main-post__tag-wrapper">
          <span class="main-post__tag">Video</span>
        </div>
        <h1 class="main-post__title">What To Watch For in the 2019 Hungarian Grand Prix</h1>
        <a class="main-post__link" href="#">
              <svg
                class="main-post__link-icon main-post__link-icon--play-btn"
                width="30"
                height="30"
                viewBox="0 0 20 20"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <circle
                  cx="10"
                  cy="10"
                  r="9"
                  stroke="#C20000"
                  stroke-width="2"
                />
                <path d="M14 10L8 6V14L14 10Z" fill="white" />
              </svg>
              <span class="main-post__link-text">play video</span>
            </a>
      </div>
    </article>
    <article class="main-post main-post--not-active">
      <div class="main-post__image">
        <img src="https://www.formula1.com/content/dam/fom-website/manual/Misc/2019-Races/Austria-2019/Top3Austria2019.jpg.transform/9col-retina/image.jpg" alt="Hamilton wants harder championship fight from Leclerc and
            Verstappen" />
      </div>
      <div class="main-post__content">
        <div class="main-post__tag-wrapper">
          <span class="main-post__tag">News</span>
        </div>
        <h1 class="main-post__title">Hamilton wants harder championship fight from Leclerc and Verstappen
        </h1>
        <a class="main-post__link" href="#">
              <span class="main-post__link-text">find out more</span>
              <svg
                class="main-post__link-icon main-post__link-icon--arrow"
                width="37"
                height="12"
                viewBox="0 0 37 12"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M0 6H36.0001M36.0001 6L31.0001 1M36.0001 6L31.0001 11"
                  stroke="white"
                />
              </svg>
            </a>
      </div>
    </article>
  </div>
</header>

<div class="posts-wrapper hide-on-mobile">
  <article class="post post--active">
    <div class="progress-bar">
      <div class="progress-bar__fill"></div>
    </div>
    <header class="post__header">
      <span class="post__tag">News</span>
      <p class="post__published">16 August 2019</p>
    </header>
    <h2 class="post__title">New McLaren wind tunnel 'critical' to future performance, says Tech Director Key</h2>
  </article>
  <article class="post">
    <div class="progress-bar">
      <div class="progress-bar__fill"></div>
    </div>
    <header class="post__header">
      <span class="post__tag">Video</span>
      <p class="post__published">12 August 2019</p>
    </header>
    <h2 class="post__title">What To Watch For in the 2019 Hungarian Grand Prix</h2>
  </article>
  <article class="post">
    <div class="progress-bar">
      <div class="progress-bar__fill"></div>
    </div>
    <header class="post__header">
      <span class="post__tag">News</span>
      <p class="post__published">08 August 2019</p>
    </header>
    <h2 class="post__title">Hamilton wants harder championship fight from Leclerc and Verstappen
    </h2>
  </article>
</div>
              
            
!

CSS

              
                @import url("https://fonts.googleapis.com/css?family=Titillium+Web:400,700&display=swap");

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: grid;
  grid-template-rows: 1fr 3fr 1.5fr;
  grid-template-columns: 50px 1fr 1fr 1fr 1fr 50px;
  row-gap: 2vh;
  font-family: "Titillium Web", sans-serif;
}

.progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 5px;
  width: 100%;
  &__fill {
    width: 0;
    height: inherit;
    background: #c20000;
    transition: all 0.16s;
  }
  &--primary {
    z-index: 2;
  }
}

.main-post-wrapper {
  grid-row: 1 / 4;
  grid-column: 1 / 7;
}
.slides {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.main-post {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  &__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    bottom: 0;
    img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }
    &::before {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(#0e0d0e, 0.5);
    }
  }
  &__content {
    position: absolute;
    top: 40%;
    left: 4%;
    transform: translateY(-40%);
    color: #fff;
    width: 90%;
  }
  &__tag-wrapper {
    margin: 0;
    display: inline-flex;
    overflow: hidden;
  }
  &__tag {
    font-size: 0.95em;
    background: #c20000;
    padding: 6px 18px;
  }
  &__title {
    font-weight: 700;
    font-size: 1.95em;
    line-height: 1.25;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  }
  &__link {
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: inline-flex;
    align-items: center;
    &-text {
      font-size: 0.9em;
    }
    &-icon {
      &--arrow {
        margin-left: 12px;
      }
      &--play-btn {
        margin-right: 12px;
      }
    }
  }
}

.main-post__link:hover .main-post__link-text,
.main-post__link:hover .main-post__link-icon--arrow path {
  color: #c20000;
  stroke: #c20000;
}

.main-post--active {
  top: 0;
  z-index: 1;
  transition: top 0.9s 0.4s ease-out;
}

.main-post--not-active {
  top: 100%;
  z-index: 0;
  transition: top 0.75s 2s;
}

.main-post.main-post--active .main-post__tag-wrapper {
  width: 25%;
  transition: all 0.98s 1.9s;
}
.main-post.main-post--not-active .main-post__tag-wrapper {
  width: 0;
  transition: width 0.3s 0.2s;
}

.main-post.main-post--active .main-post__title {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s 1.42s, transform 0.5s 1.4s;
}

.main-post.main-post--not-active .main-post__title {
  transform: translateY(40px);
  opacity: 0;
  transition: transform 0.2s 0.35s, opacity 0.5s 0.2s;
}

.main-post.main-post--active .main-post__link {
  opacity: 1;
  transition: opacity 0.9s 2.2s;
}

.main-post.main-post--not-active .main-post__link {
  opacity: 0;
  transition: opacity 0.5s 0.2s;
}

.posts-wrapper {
  grid-row: 3 / 4;
  grid-column: 3 / 6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 14px;
  z-index: 1;
}

.post {
  background: rgba(#0e0d0e, 0.6);
  opacity: 0.3;
  color: #fff;
  position: relative;
  padding: 16px 20px;
  &__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8em;
  }
  &__tag {
    color: #80837e;
  }
  &__title {
    font-weight: 400;
    font-size: 0.95em;
    line-height: 1.5;
  }
  &--active {
    opacity: 1;
    background: rgba(#0e0d0e, 0.75);
  }
  &:not(.post--active) {
    pointer-events: none;
  }
}

.hide-on-mobile {
  display: none;
}

@media screen and (min-width: 768px) {
  .main-post__title {
    font-size: 2.9em;
  }
}
@media screen and (min-width: 1024px) {
  .hide-on-mobile {
    display: grid;
  }
  .posts-wrapper {
    grid-column: 2 / 6;
  }
  .hide-on-desktop {
    display: none;
  }
}

@media screen and (min-width: 1440px) {
  .main-post__content {
    width: 45%;
  }
  .posts-wrapper {
    grid-column: 3 / 6;
  }
}
              
            
!

JS

              
                let mainPosts = document.querySelectorAll(".main-post");
let posts = document.querySelectorAll(".post");

let i = 0;
let postIndex = 0;
let currentPost = posts[postIndex];
let currentMainPost = mainPosts[postIndex];

let progressInterval = setInterval(progress, 100); // 180

function progress() {
  if (i === 100) {
    i = -5;
    // reset progress bar
    currentPost.querySelector(".progress-bar__fill").style.width = 0;
    document.querySelector(
      ".progress-bar--primary .progress-bar__fill"
    ).style.width = 0;
    currentPost.classList.remove("post--active");

    postIndex++;

    currentMainPost.classList.add("main-post--not-active");
    currentMainPost.classList.remove("main-post--active");

    // reset postIndex to loop over the slides again
    if (postIndex === posts.length) {
      postIndex = 0;
    }

    currentPost = posts[postIndex];
    currentMainPost = mainPosts[postIndex];
  } else {
    i++;
    currentPost.querySelector(".progress-bar__fill").style.width = `${i}%`;
    document.querySelector(
      ".progress-bar--primary .progress-bar__fill"
    ).style.width = `${i}%`;
    currentPost.classList.add("post--active");

    currentMainPost.classList.add("main-post--active");
    currentMainPost.classList.remove("main-post--not-active");
  }
}
              
            
!
999px

Console