Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

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.

            
              <div class="gif">
  <iframe src="https://giphy.com/embed/l0ErBfFLUMPoq3WbC" width="100%" height="100%" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>
  <p>Get to know <a href="http://bts.ibighit.com" target="_blank" rel="noopener noreferrer">BTS</a>, your Top Social Artist at the Billboard Music Awards 2018</p>
</div>
<div class="boxes">
  <details id="bts">
    <summary>BTS<span class="realname">(Bangtan Boys)</span></summary>
    <ul class="info">
      <li>7-member boyband from South Korea, active since 2013</li>
      <li><a href="https://www.youtube.com/watch?v=GEIU_7v40Dw" target="_blank" rel="noopener noreferrer">Really</a> <a href="https://www.youtube.com/watch?v=sWuYspuN6U8" target="_blank" rel="noopener noreferrer">good</a> <a href="https://www.youtube.com/watch?v=_AlODdAInRY" target="_blank" rel="noopener noreferrer">at</a> <a href="https://www.youtube.com/watch?v=vJwHIpEogEY" target="_blank" rel="noopener noreferrer">dancing</a></li>
      <li>Has a <a href="https://open.spotify.com/artist/3Nrfpe0tUJi4K4DXYWgMUX" target="_blank" rel="noopener noreferrer">great discography</a> with <a href="https://genius.com/artists/Bts" target="_blank" rel="noopener noreferrer">~deep~ lyrics</a></li>
      <li>Won Top Social Artist at Billboard Music Awards 2017 & 2018</li>
      <li>Has a literal army of fans called ARMY, who will flood your social media if you mention BTS, 0/10 do not recommend</li>
    </ul>
  </details>
  <details id="rm">
    <summary>RM<span class="realname">(Kim Namjoon)</span></summary>
    <ul>
      <li>Born in 1994, rapper of the group</li>
      <li>The only one in the group who speaks decent English</li>
      <li>Is supposedly very smart</li>
      <li>But also very clumsy and forgetful, prone to losing his passport, among other things</li>
      <li>Tend to sound fake deep but actually just very sweet and nice</li>
    </ul>
  </details>
  <details id="jin">
    <summary>JIN<span class="realname">(Kim Seokjin)</span></summary>
    <ul>
      <li>Born in 1992, vocalist + resident good looking guy of the group</li>
      <li>The only one in the group who goes to actual college, majored in acting</li>
      <li>Is very (VERY!!!) proud of his face</li>
      <li><a href="https://twitter.com/Shazam/status/998371896813993984/photo/1" target="_blank" rel="noopener noreferrer">Randomly blows kisses</a> to the camera and is very funny in general</li>
      <li>Constantly makes Korean dad jokes</li>
    </ul>
  </details>
  <details id="suga">
    <summary>SUGA<span class="realname">(Min Yoongi)</span></summary>
    <ul>
      <li>Born in 1993, rapper of the group</li>
      <li>Is very!!! passionate about music it's so endearing</li>
      <li>Has an amazing mixtape titled <a href="https://open.spotify.com/album/2nz4nG3HiOUkceO1NYvJnP" target="_blank" rel="noopener noreferrer">Agust D</a></li>
      <li>Looks like he'd rather die than be here 99% of the time</li>
      <li>Makes the <a href="https://giphy.com/gifs/yoongi-xYkOXpNXnjRsI" target="_blank" rel="noopener noreferrer">best</a> <a href="https://giphy.com/gifs/bangtan-boys-sonyeondan-22pSte4vdGvok" target="_blank" rel="noopener noreferrer">meme</a> <a href="https://giphy.com/gifs/kpop-gif-jungkook-3LJ7AQcTvYP8k" target="_blank" rel="noopener noreferrer">faces</a></li>
    </ul>
  </details>
  <details id="jhope">
    <summary>j-hope<span class="realname">(Jung Hoseok)</span></summary>
    <ul>
      <li>Born in 1994, rapper + dancer of the group</li>
      <li>Also the moodmaker of the group</li>
      <li>Probably the <a href="https://www.youtube.com/watch?v=dj42sqcbnCg" target="_blank" rel="noopener noreferrer">best dancer</a> you'd ever see in your lifetime</li>
      <li>Generally super happy and hyper and loud it's embarassing</li>
      <li>Scared of anything and everything</li>
    </ul>
  </details>
  <details id="jimin">
    <summary>Jimin<span class="realname">(Park Jimin)</span></summary>
    <ul>
      <li>Born in 1995, vocalist + dancer of the group</li>
      <li>Was a dance student, supposedly so good that his teachers urged him not to be in a boyband</li>
      <li>Really hardworking and tends to be hard on himself</li>
      <li>Tweets a lot</li>
      <li>Supposedly used to be top of the class, best student, etc</li>
    </ul>
  </details>
  <details id="v">
    <summary>V<span class="realname">(Kim Taehyung)</span></summary>
    <ul>
      <li>Born in 1995, vocalist + resident look-good-in-anything guy of the group</li>
      <li>Likes and sings jazzy and easy listening music</li>
      <li>Prone to wearing questionable fashion, but THAT FACE saves it</li>
      <li>Is a very sweet and soft kid but also gets annoyed easily</li>
      <li>Has a Leica and I am very jealous</li>
    </ul>
  </details>
  <details id="jungkook">
    <summary>Jungkook<span class="realname">(Jeon Jungkook)</span></summary>
    <ul>
      <li>Born in 1997, vocalist + dancer + baby of the group</li>
      <li>Is good at anything except studying</li>
      <li>Supposedly <a href="https://www.reddit.com/r/Overwatch/comments/7tymfj/massive_kpop_group_bts_12m_twitter_followers_just/" target="_blank" rel="noopener noreferrer">plays Overwatch like a pro</a></li>
      <li>Great at <a href="https://www.youtube.com/watch?v=PMEkmiQP5bg" target="_blank" rel="noopener noreferrer">editing videos</a> and <a href="https://www.youtube.com/watch?v=VLzRQCIZrmE" target="_blank" rel="noopener noreferrer">covering songs</a></li>
      <li>Joined the group when he was 16, considers himself raised by the group</li>
    </ul>
  </details>
</div>
            
          
!
            
              @GAP: 10px;
:root{
  --name-top:200px;
  --list-top:170px;
  --row-height:250px;
  --open-right-top:-20px;
  --max-width:500px;
}

body{
  background:#fcfcfc;
}

a{
  border-bottom:1px solid #1c826c;
  color:#1c826c;
  position:relative;
  text-decoration:none;
  top:0;
  transition:all .5s;
  &:hover,&:focus{
    border-bottom-width:2px;
    outline:none;
    padding-bottom:2px;
    top:-3px;
  }
}

.open-right{
  grid-row:span 1;
  grid-column:span 2;

  background-size:49.5% auto;
  ul{
    border-left:0;
    border-top:1px solid #cfcfcf;
    margin-top:var(--open-right-top);
    margin-left:50.5%; 
  }
  summary{
    top:0;
    left:40%;
    ~ * {
      animation: fadeInRight .5s ease-in-out;
    }
  }
}

.open-bottom{
  background-size:auto var(--row-height);
  ul{
    margin-left:0;
    margin-top:var(--list-top);
    padding-top:@GAP*2; 
  }
}

body{
  font-family:"Varela Round","Nunito","Calibri",sans-serif;
  max-width:var(--max-width);
  margin:0 auto;
}

.gif{
  box-sizing:border-box;
  margin:0 auto;
  max-width:500px;
  padding:@GAP*3;
  width:100%;
  text-align:center;
}

.boxes{
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:repeat(9,minmax(var(--row-height),auto));
  grid-gap:@GAP;
  
  margin:@GAP auto;
  
  list-style:none;
  padding:0 @GAP*2;
  
  transition:all .5s;
}

.boxes details{
  background-position:center center;
  background-repeat:no-repeat;
  background-size:cover;
  border-radius:5px;
  
  filter: grayscale(100%);
  
  transition:all .5s;
  transition:background-size 0s;
  transition:filter 1s;
  
  &:hover,&:focus{
    cursor:pointer;
    filter:grayscale(70%);
  }
  
  &[open]{
    background-position:top left;
    filter: grayscale(0%);
    grid-row:span 2;
    
    summary{
      font-size:1.5em;
      transform:rotate(0deg);
      top:var(--name-top);
      
      .realname{
        opacity:1;
        max-height:50px;
        max-width:200px;
      }
       ~ * {
        animation: fadeIn .5s ease-in-out;
      }
    }
    .open-bottom();
  }
  
  summary{
    background:black;
    border:3px solid transparent;
    border-radius:3px;
    color:white;
    display:inline-block;
    margin:@GAP/2 @GAP;
    padding:@GAP @GAP*2;
    top:0;left:0;
    transform:rotate(-15deg);
    transition:all .5s;
    z-index:100;
    
    position:relative;
    left:-1.75*@GAP;
    
    .realname{
      display:block;
      font-size:14px;
      overflow:hidden;
      opacity:0;
      max-height:0;
      max-width:0;
      transition:all .5s;
      transition-delay:.5s;
    }

    &::-webkit-details-marker {
      display:none; 
    }
    &:first-of-type {
      list-style-type: none;
    }
    
    &:hover{
      cursor:pointer;
    }
    
    &:focus{
      border:3px solid #1ADBB1;
      outline:none;
    }
  }
  
  ul{
    border:1px solid #cfcfcf;
    border-radius:5px;
    border-top:0;
    padding:@GAP;
    list-style:none;
    transition:all .5s;
    
    li{
      padding:@GAP @GAP/2;
      &:nth-child(2){
        animation-delay:1s;
        -webkit-animation-delay:1s;
      }
      &:nth-child(3){
        animation-delay:2s;
        -webkit-animation-delay:2s;
      }
      &.nth-child(4){
        animation-delay:3s;
        -webkit-animation-delay:3s;
      }
      &.nth-child(5){
        animation-delay:4s;
        -webkit-animation-delay:4s;
      }
    }
  } 
}

#bts{
  background-image:url("https://bts.ibighit.com/images/bts/profile/profile-kv.png");
}
#v{
  background-image:url("https://bts.ibighit.com/images/bts/profile/member-v.jpg");
}
#suga{
  background-image:url("https://bts.ibighit.com/images/bts/profile/member-suga.jpg");
}
#jhope{
  background-image:url("https://bts.ibighit.com/images/bts/profile/member-jhope.jpg");
}
#jungkook{
  background-image:url("https://bts.ibighit.com/images/bts/profile/member-jk.jpg");
}
#jin{
  background-image:url("https://bts.ibighit.com/images/bts/profile/member-jin.jpg");
}
#jimin{
  background-image:url("https://bts.ibighit.com/images/bts/profile/member-jimin.jpg");
}
#rm{
  background-image:url("https://bts.ibighit.com/images/bts/profile/member-rm.jpg");
}

@media(min-width:600px) and (max-width:900px){
  :root{
    --open-right-top:-30px;
    --max-width:none;
  }
  .boxes{
    grid-template-columns:1fr 1fr;
  }
  
  .boxes details{
   &:nth-child(odd)[open]{
      .open-right();
    }
  }
}

@media(min-width:900px){
  :root{
    --name-top:150px;
    --list-top:120px; 
    --row-height:200px;
    --max-width:1200px;
  }
  
  .boxes{
    grid-template-columns:1fr 1fr 1fr;
  } 
  .boxes details{
    &:nth-child(7)[open],&:nth-child(8)[open]{
      .open-right();
    }
  }
}

@keyframes fadeIn{
  from{
    opacity:0;
    margin-left:-10px;
  }
  to{
    opacity:1;
    margin-left:0px;
  }
}

@keyframes fadeInRight{
  from{
    opacity:0;
    margin-left:25%;
  }
  to{
    opacity:1;
    margin-left:50.5%;
  }
}
            
          
!
            
              $(function(){
  
  //enable clicking anywhere on details
  $("details").click(function(){
    $(this).find("summary").click();
  })
  
  //block propagation so it doesn't trigger details click
  $("details summary,details a").click(function(e){
    e.stopPropagation();
  })
  
  //close the other details when opening one
  $("summary").click(function(){
    $("details").not($(this).parent()).removeAttr("open");
  })
})
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console