pip's profile picture

Published by

published
updated

Category: Web, HTML, Tech

View Blog View Profile Report Blog Entry

Compact Disc Collection

Here is the code if you want to build your own CD Collection! 

You can use this for any albums or games that come in a jewel case 😄

I heavily edited code from Vinyl Showcase Library Layout created by Jack ☂ & cd jewel case pfp w/ spinning disc animation Layout created by Valentine to create this. Credit goes to them for the orginal code I used ❤️

You will add your covers and titles in the highlighted sections:

  
 <div class="disc">
    <img src="CoverURL">
  </div>
  <div class="title">Artist - Album</div>

You can use any image url for the cover. I found mine on Discogs and Bandcamp. To get the URL right click on the image and choose "copy image address". Paste it in the code and you are good to go! You can add or remove discs from your collection buy pasting or deleting the section of code shown in the box above, respectively. 

Here is a couple albums to demonstrate what it looks like:

Daft Punk – Discovery
Metallica – ...And Justice For All
Gorillaz – Plastic Beach

Paste the code below into your About Me section to add it to your profile. 

I can't wait to see what's in your collections! ⭐


  

<!-- Layout by fullpersonadonut -->

<!----- COMPACT DISC COLLECTION ---->

<style>
#disc-collection * {
    all: unset;
  }
 
  #disc-collection {
    all: initial!important;
    width: 100%!important;
    height: 240px!important;
    margin: 30px 0!important;
    display: flex!important;
    flex-direction: row!important;
    position: relative!important;
    margin-left: 2px!important;
  }
 
  #disc-collection .disc {
      all:unset!important;
    perspective: 500px !important;
    width: 20px!important;
    transition: width 0.5s!important;
  }
 
  #disc-collection .disc:hover {
    width: 180px!important;
  }

  #disc-collection img {
      all:unset!important;
    transition: transform 0.5s, width 0.5s, height 0.5s, margin-top 0.5s!important;
    width: 183px!important;
    height: 180px!important;
    transform: rotateX(0deg) rotateY(5deg)!important;
    transform-style: preserve-3d!important;
    border-radius: 4px!important;
    border: 2px solid rgba(0, 0, 0, 0.1)!important;
    margin-left: 20px!important;
object-fit: cover!important;
  }
 #disc-collection .disc:after {
content: "";
background: url('https://fluorescent-lights.neocities.org/f0rzNHe.png'), 
linear-gradient(150deg, rgba(255,255,255,0.4), rgba(255,255,255,0.2), 40%, 
rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.6));
background-size: contain, cover;
position: absolute;
top: 0;
left: 0;
transition: transform 0.5s, width 0.5s, height 0.5s, margin-top 0.5s!important;
    width: 210px!important;
    height: 183px!important;
    transform: rotateX(0deg) rotateY(5deg)!important;
    transform-style: preserve-3d!important;
    border: 0px solid rgba(0, 0, 0, 0)!important;
object-fit: cover!important;
}
  #disc-collection .disc:hover img {
    transform: rotateX(0deg) rotateY(1deg)!important;
    width: 183px!important;
    height: 180px!important;
    margin-top: -25px!important;
    margin-left: 20px!important;
  }
   #disc-collection .disc:hover:after {
    transform: rotateX(0deg) rotateY(1deg)!important;
    width: 210px!important;
    height: 183px!important;
    margin-top: -25px!important;
  }
  #disc-collection .title {
    color: #000000;
    display: block;
    visibility: hidden;
    position: absolute;
    bottom: 0px;
    text-align: center;
    width: 100%;
    padding-left: 6px;
  }
 
  #disc-collection .disc:nth-child(n):hover + .title {
    visibility: visible;
  }

</style>
<div id="disc-collection">

 <div class="disc">
    <img src="CoverURL">
  </div>
  <div class="title">Artist - Album</div>

 <div class="disc">
    <img src="CoverURL">
  </div>
  <div class="title">Artist - Album</div>

 <div class="disc">
    <img src="CoverURL">
  </div>
  <div class="title">Artist - Album</div>

 <div class="disc">
    <img src="CoverURL">
  </div>
  <div class="title">Artist - Album</div>

 <div class="disc">
    <img src="CoverURL">
  </div>
  <div class="title">Artist - Album</div>

 <div class="disc">
    <img src="CoverURL">
  </div>
  <div class="title">Artist - Album</div>

 <div class="disc">
    <img src="CoverURL">
  </div>
  <div class="title">Artist - Album</div>

 <div class="disc">
    <img src="CoverURL">
  </div>
  <div class="title">Artist - Album</div>

 <div class="disc">
    <img src="CoverURL">
  </div>
  <div class="title">Artist - Album</div>

 <div class="disc">
    <img src="CoverURL">
  </div>
  <div class="title">Artist - Album</div>

 <div class="disc">
    <img src="CoverURL">
  </div>
  <div class="title">Artist - Album</div>

 <div class="disc">
    <img src="CoverURL">
  </div>
  <div class="title">Artist - Album</div>

 <div class="disc">
    <img src="CoverURL">
  </div>
  <div class="title">Artist - Album</div>

</div>


110 Kudos

—