Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

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

              
                // pics by fanart.tv

main
  .logo
    svg(viewBox="0 0 1024 276.742")
      path(d="M140.803 258.904c-15.404 2.705-31.079 3.516-47.294 5.676l-49.458-144.856v151.073c-15.404 1.621-29.457 3.783-44.051 5.945v-276.742h41.08l56.212 157.021v-157.021h43.511v258.904zm85.131-157.558c16.757 0 42.431-.811 57.835-.811v43.24c-19.189 0-41.619 0-57.835.811v64.322c25.405-1.621 50.809-3.785 76.482-4.596v41.617l-119.724 9.461v-255.39h119.724v43.241h-76.482v58.105zm237.284-58.104h-44.862v198.908c-14.594 0-29.188 0-43.239.539v-199.447h-44.862v-43.242h132.965l-.002 43.242zm70.266 55.132h59.187v43.24h-59.187v98.104h-42.433v-239.718h120.808v43.241h-78.375v55.133zm148.641 103.507c24.594.539 49.456 2.434 73.51 3.783v42.701c-38.646-2.434-77.293-4.863-116.75-5.676v-242.689h43.24v201.881zm109.994 49.457c13.783.812 28.377 1.623 42.43 3.242v-254.58h-42.43v251.338zm231.881-251.338l-54.863 131.615 54.863 145.127c-16.217-2.162-32.432-5.135-48.648-7.838l-31.078-79.994-31.617 73.51c-15.678-2.705-30.812-3.516-46.484-5.678l55.672-126.75-50.269-129.992h46.482l28.377 72.699 30.27-72.699h47.295z")

  section
    h2 Top Movies 2019
    ul
      li.item01
        .img(style="background-image: url(https://fanart.tv/fanart/movies/466272/moviethumb/once-upon-a-time-in-hollywood-5dfeb7beb0d22.jpg)")
          img(src="https://fanart.tv/fanart/movies/466272/moviebackground/untitled-manson-murders-project-5c58b437a6e65.jpg")
        .card
          h3 Once upon a time in... Hollywood
          .info 
            .match 99% Match
            .age TV-14
            .dur 2h 40min 
          .tags 
            span Comedy
            span Drama
            span Action

      li.item02
        .img(style="background-image: url(https://fanart.tv/fanart/movies/475557/moviethumb/joker-5db693c454a3e.jpg)")
          img(src="https://fanart.tv/fanart/movies/475557/moviebackground/joker-5d68337505352.jpg")
        .card
          h3 Joker
          .info 
            .match 95% Match
            .age TV-14
            .dur 2h 2min 
          .tags 
            span Crime
            span Drama
            span Thriller

      li.item03
        .img(style="background-image: url(https://fanart.tv/fanart/movies/496243/moviethumb/parasite-5d2d5ab30c73d.jpg)")
          img(src="https://fanart.tv/fanart/movies/496243/moviebackground/parasite-5df5fb5439d1d.jpg")
        .card
          h3 Parasite
          .info 
            .match 98% Match
            .age TV-14
            .dur 2h 12min 
          .tags 
            span Comedy
            span Crime
            span Drama

      li.item04
        .img(style="background-image: url(https://fanart.tv/fanart/movies/359724/moviethumb/ford-v-ferrari-5db74ab5a49b9.jpg)")
          img(src="https://fanart.tv/fanart/movies/359724/moviebackground/go-like-hell-5d0839e2ecc25.jpg")
        .card
          h3 Ford v. Ferrari
          .info 
            .match 96% Match
            .age TV-PG
            .dur 2h 32min 
          .tags 
            span Action
            span Biography
            span Drama

      li.item05
        .img(style="background-image: url(https://fanart.tv/fanart/movies/398978/moviethumb/the-irishman-5ded4b24803d2.jpg)")
          img(src="https://fanart.tv/fanart/movies/398978/moviebackground/the-irishman-5de15d18d48f4.jpg")
        .card
          h3 The Irishman
          .info 
            .match 92% Match
            .age TV-MA
            .dur 3h 29min 
          .tags 
            span Biography
            span Crime
            span Drama

      li.item06
        .img(style="background-image: url(https://fanart.tv/fanart/movies/492188/moviethumb/marriage-story-5dd0c5d3db138.jpg)")
          img(src="https://fanart.tv/fanart/movies/492188/moviebackground/marriage-story-5def5bf3a229b.jpg")
        .card
          h3 Marriage Story
          .info 
            .match 94% Match
            .age TV-14
            .dur 2h 17min 
          .tags 
            span Comedy
            span Drama
            span Romance

  section
    h2 Top Tv Shows 2019
    ul
      li.item01
        .img(style="background-image: url(https://fanart.tv/fanart/tv/360893/tvthumb/chernobyl-5d9f83da0b06d.jpg)")
          img(src="https://fanart.tv/fanart/tv/360893/showbackground/chernobyl-5cee1a264b23a.jpg")
        .card
          h3 Chernobyl
          .info 
            .match 99% Match
            .age TV-14
            .dur 1 Season 
          .tags 
            span Drama
            span History
            span Thriller

      li.item02
        .img(style="background-image: url(https://fanart.tv/fanart/tv/355567/tvthumb/the-boys-5d50fd5fe5f13.jpg)")
          img(src="https://fanart.tv/fanart/tv/355567/showbackground/the-boys-5d4c66a61f5cb.jpg")
        .card
          h3 The Boys
          .info 
            .match 98% Match
            .age TV-14
            .dur 1 Season
          .tags 
            span Action
            span Comedy
            span Crime

      li.item03
        .img(style="background-image: url(https://fanart.tv/fanart/tv/314614/tvthumb/fleabag-5808829144e0d.jpg)")
          img(src="https://fanart.tv/fanart/tv/314614/showbackground/fleabag-5bbfae2909224.jpg")
        .card
          h3 Fleabag
          .info 
            .match 98% Match
            .age TV-14
            .dur 2 Seasons
          .tags 
            span Comedy
            span Drama
            span Romance

      li.item04
        .img(style="background-image: url(https://fanart.tv/fanart/tv/328708/tvthumb/mindhunter-5b1257a535a01.jpg)")
          img(src="https://fanart.tv/fanart/tv/328708/showbackground/mindhunter-5b125a7844f6a.jpg")
        .card
          h3 Mindhunter
          .info 
            .match 94% Match
            .age TV-14
            .dur 2 Seasons
          .tags 
            span Crime 
            span Drama
            span Thriller

      li.item05
        .img(style="background-image: url(https://fanart.tv/fanart/tv/305288/tvthumb/stranger-things-5d1e691923280.jpg)")
          img(src="https://fanart.tv/fanart/tv/305288/showbackground/stranger-things-5d2f417e8faae.jpg")
        .card
          h3 Stranger Things
          .info 
            .match 93% Match
            .age TV-PG
            .dur 3 Seasons 
          .tags 
            span Drama
            span Fantasy
            span Horror
            
      li.item06
        .img(style="background-image: url(https://fanart.tv/fanart/tv/270915/tvthumb/peaky-blinders-5277bdad6f903.jpg)")
          img(src="https://fanart.tv/fanart/tv/270915/showbackground/peaky-blinders-5277be064c089.jpg")
        .card
          h3 Peaky Blinders 
          .info 
            .match 87% Match
            .age TV-14
            .dur 5 Seasons 
          .tags 
            span Crime
            span Drama
            span Action

              
            
!

CSS

              
                $white: #fff;
$black: #141414;
$match: #46D369;
$logo: #E50914;

* {box-sizing: border-box; outline: 0px;}
ul,ol {list-style: none; padding: 0px; margin: 0px;}
h2 {margin: 0px; padding: 0px;}

body {margin: 0px; font-family: "Montserrat"; color: $white; background: $black;}


main {
  display: block;
  position: relative;
  width: 100vw;
  height: 100vh;
  padding: 4vw;
  overflow-x: hidden;
}

.logo {
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: auto;
  padding: 3vw 4vw;
  background: rgba($white, .02);
  svg {
    display: block;
    position: relative;
    width: 10vw;
    path {fill: $logo;}
  }
}

section{
  display: block;
  position: relative;
  top: 8vw;
  margin-bottom: 6vw;
  h2 {
    display: block;
    width: 100%; 
    //text-align: center;
    font-size: 1.2vw;
    font-weight: 600;
    margin-bottom: .8vw;
    margin-left: 4px;
  }
  ul {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    white-space: nowrap;
    font-size: 0;
    &:hover li:not(.hover) {opacity: 0.3;}
    li {
      display: inline-block;
      height: auto;
      padding: 2px;
      overflow: hidden; 
      cursor: pointer;
      .img {
        display: block;
        position: relative;
        width: 100%;
        height: 0px;
        padding-top: 56.25%;
        background-size: cover;
        transform-origin: top right;
        &:after {
          content:"";
          display: block;
          position: absolute;
          top: -10px;
          left: -10px;
          z-index: 1;
          width: calc(100% + 20px);
          height: calc(100% + 20px);
          opacity: 0;
          background: linear-gradient(to bottom, rgba($black,0) 0%,rgba($black,1) 100%);
          transition: all .5s ease .2s
        }
        img {
          display: block;
          position: absolute;
          top: 0px;
          left: 0px;
          width: 100%;
          opacity: 0;
        }
      }
      .card {
        display: block;
        position: absolute;
        bottom: 0px;
        left: 0px;
        z-index: 1;
        width: 100%;
        height: auto;
        padding: 10px;
        text-shadow: 0 1px 1px rgba($black, 0.6);
        opacity: 0;
        h3 {
          display: block;
          width: 100%;
          font-size: .7vw;
          font-weight: 600;
          margin-bottom: .3vw;
        }
        .info {
          display: block;
          width: 100%;
          margin-bottom: .3vw;
          font-size: 0;
          .match {
            display: inline-block;
            width: auto;
            font-size: .5vw;
            font-weight: 600;
            margin-right: .4vw;
            color: $match;
          }
          .age {
            display: inline-block;
            position: relative;
            width: auto;
            font-size: .5vw;
            padding: 0 0.4em;
            margin-right: .4vw;
            border: solid 1px rgba($white, 0.4);
          }
          .dur {
            display: inline-block;
            width: auto;
            font-size: .5vw;
          }
        }
        .tags {
          display: block;
          width: 100%;
          span {
            display: inline-block;
            width: auto;
            font-size: .5vw;
            margin: 0 .3vw 0 0;
            &:after {
              content:"●";
              display: inline-block;
              margin: 0 0 0 .3vw;
              font-size: .8 xvw;
              text-shadow: 0 1px 1px rgba(0, 0, 0, 0);
              color: rgba($white, 0.4);
            }
            &:last-child:after {
              display: none;
            }
          }
        }
      }
      &:hover {
        .img:after {
          opacity: 1;
        }
        img {
          opacity: 1;
        }
        .card {
          opacity: 1;
        }
      }

      &:first-child {transform-origin: 0px center;}
      &:last-child {transform-origin: 100% center;}
    }
  }
}
  
li, li * {transition: all .5s ease .2s}

              
            
!

JS

              
                // select the strip

$("section").each(function() {

  // change the number of the "li" elements and the strip will be fine anyway
  
  var wUl = $(this).find("ul").width();
  var nLi = $(this).find("ul").children().length;
  var wElement = 100 / nLi;

  $("li").css("width", wElement + "%");
  
  // hover "li"

  $(this).find("li").hover(

    // mouse In
    function() {
      $(this).toggleClass("hover");

      var scaleFactor = 1.8;
      var wBigElement = $(this).width() * scaleFactor;
      var translation = (wBigElement - $(this).width()) / 2;
      
      var item = $(this).parent().children();

      $(this).css("transform", "scale(" + scaleFactor + ")");
      
      if ($(this).is(":nth-child(1)")) {
        item.slice(1,nLi).css("transform", "translate(" + translation * 2 + "px,  0px)");
      } 

        for (var i = 2; i <= nLi - 1; i++) {
          if ($(this).is(":nth-child(" + i + ")")) {
            item.slice(0,i-1).css("transform", "translate(-" + translation + "px,  0px)")
             .end().slice(i).css("transform", "translate(" + translation + "px,  0px)");
          } 
        }

      if ($(this).is(":nth-child(" + nLi + ")")) {
        item.slice(0,(nLi-1)).css("transform", "translate(-" + translation * 2 + "px,  0px)");
      }   

    // mouse Out
    }, function() {
        $(this).toggleClass("hover");
        $(this).css("transform", "scale(1)");
        $("li").not(this).css("transform", "translate(0px,  0px)");
    }
  );
});
              
            
!
999px

Console