API tools faq
paste
OpalescentCodes

Album Shelf Code - +In-Browser Playback

OpalescentCodes
Nov 12th, 2025 (edited)
488
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.12 KB | None | 0 0
raw download clone embed print report
  1. +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
  2. below is the Profile CSS. put it in the first box.
  3. +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
  4.  
  5.  
  6.  
  7.  
  8. <div class="albumshelf">
  9.  
  10.   <div id="album1" class="album" style="left:100px;top:100px;z-index:10">
  11.     <div class="column" style="width:150px;display:inline-block;position:absolute;top:0;left:0;"><a target="_blank" href="ALBUMLINK"><img src="ALBUMCOVER"></a></div>
  12.     <div class="column" style="width:350px;display:inline-block;margin:0;position:absolute;top:0;left:150px;"><h1><i class="fa-solid fa-users-rectangle"></i> Band Name</h1>
  13.     <hr>
  14.     <h2><i class="fa-solid fa-album"></i> Album Title</h2>
  15.     <h3><div style="font-size: 13px;"><i class="fa-fade fas fa-play"></i><iframe style="opacity: 0.001; height: 70%; width: 50%; position: absolute; bottom: -4px; left: -2px;" src="https://www.youtube.com/embed/YOUTUBEURL"></iframe> Favorite Track: <a target="_blank" href="SONGLINK">Track Title</a></div></h3>
  16.   </div>
  17.   </div>
  18.  
  19.   <div id="album2" class="album" style="left:175px;top:100px;z-index:9">
  20.     <div class="column" style="width:150px;display:inline-block;position:absolute;top:0;left:0;"><a target="_blank" href="ALBUMLINK"><img src="ALBUMCOVER"></a></div>
  21.     <div class="column" style="width:350px;display:inline-block;margin:0;position:absolute;top:0;left:150px;"><h1><i class="fa-solid fa-users-rectangle"></i> Band Name</h1>
  22.     <hr>
  23.     <h2><i class="fa-solid fa-album"></i> Album Title</h2>
  24.     <h3><div style="font-size: 13px;"><i class="fa-fade fas fa-play"></i><iframe style="opacity: 0.001; height: 70%; width: 50%; position: absolute; bottom: -4px; left: -2px;" src="https://www.youtube.com/embed/YOUTUBEURL"></iframe> Favorite Track: <a target="_blank" href="SONGLINK">Track Title</a></div></h3>
  25.   </div>
  26.   </div>
  27.  
  28.   <div id="album3" class="album" style="left:250px;top:100px;z-index:8">
  29.     <div class="column" style="width:150px;display:inline-block;position:absolute;top:0;left:0;"><a target="_blank" href="ALBUMLINK"><img src="ALBUMCOVER"></a></div>
  30.     <div class="column" style="width:350px;display:inline-block;margin:0;position:absolute;top:0;left:150px;"><h1><i class="fa-solid fa-users-rectangle"></i> Band Name</h1>
  31.     <hr>
  32.     <h2><i class="fa-solid fa-album"></i> Album Title</h2>
  33.     <h3><div style="font-size: 13px;"><i class="fa-fade fas fa-play"></i><iframe style="opacity: 0.001; height: 70%; width: 50%; position: absolute; bottom: -4px; left: -2px;" src="https://www.youtube.com/embed/YOUTUBEURL"></iframe> Favorite Track: <a target="_blank" href="SONGLINK">Track Title</a></div></h3>
  34.   </div>
  35.   </div>
  36.  
  37.   <div id="album4" class="album" style="left:325px;top:100px;z-index:7">
  38.     <div class="column" style="width:150px;display:inline-block;position:absolute;top:0;left:0;"><a target="_blank" href="ALBUMLINK"><img src="ALBUMCOVER"></a></div>
  39.     <div class="column" style="width:350px;display:inline-block;margin:0;position:absolute;top:0;left:150px;"><h1><i class="fa-solid fa-users-rectangle"></i> Band Name</h1>
  40.     <hr>
  41.     <h2><i class="fa-solid fa-album"></i> Album Title</h2>
  42.     <h3><div style="font-size: 13px;"><i class="fa-fade fas fa-play"></i><iframe style="opacity: 0.001; height: 70%; width: 50%; position: absolute; bottom: -4px; left: -2px;" src="https://www.youtube.com/embed/YOUTUBEURL"></iframe> Favorite Track: <a target="_blank" href="SONGLINK">Track Title</a></div></h3>
  43.   </div>
  44.  
  45.   </div>
  46.  
  47.   <div id="album5" class="album" style="left:400px;top:100px;z-index:6">
  48.     <div class="column" style="width:150px;display:inline-block;position:absolute;top:0;left:0;"><a target="_blank" href="ALBUMLINK"><img src="ALBUMCOVER"></a></div>
  49.     <div class="column" style="width:350px;display:inline-block;margin:0;position:absolute;top:0;left:150px;"><h1><i class="fa-solid fa-users-rectangle"></i> Band Name</h1>
  50.     <hr>
  51.     <h2><i class="fa-solid fa-album"></i> Album Title</h2>
  52.     <h3><div style="font-size: 13px;"><i class="fa-fade fas fa-play"></i><iframe style="opacity: 0.001; height: 70%; width: 50%; position: absolute; bottom: -4px; left: -2px;" src="https://www.youtube.com/embed/YOUTUBEURL"></iframe> Favorite Track: <a target="_blank" href="SONGLINK">Track Title</a></div></h3>
  53.   </div>
  54.   </div>
  55.  
  56.   <div id="album6" class="album" style="left:475px;top:100px;z-index:5">
  57.     <div class="column" style="width:150px;display:inline-block;position:absolute;top:0;left:0;"><a target="_blank" href="ALBUMLINK"><img src="ALBUMCOVER"></a></div>
  58.     <div class="column" style="width:350px;display:inline-block;margin:0;position:absolute;top:0;left:150px;"><h1><i class="fa-solid fa-users-rectangle"></i> Band Name</h1>
  59.     <hr>
  60.     <h2><i class="fa-solid fa-album"></i> Album Title</h2>
  61.     <h3><div style="font-size: 13px;"><i class="fa-fade fas fa-play"></i><iframe style="opacity: 0.001; height: 70%; width: 50%; position: absolute; bottom: -4px; left: -2px;" src="https://www.youtube.com/embed/YOUTUBEURL"></iframe> Favorite Track: <a target="_blank" href="SONGLINK">Track Title</a></div></h3>
  62.   </div>
  63.   </div>
  64.  
  65.   <div id="album7" class="album" style="left:550px;top:100px;z-index:4">
  66.     <div class="column" style="width:150px;display:inline-block;position:absolute;top:0;left:0;"><a target="_blank" href="ALBUMLINK"><img src="ALBUMCOVER"></a></div>
  67.     <div class="column" style="width:350px;display:inline-block;margin:0;position:absolute;top:0;left:150px;"><h1><i class="fa-solid fa-users-rectangle"></i> Band Name</h1>
  68.     <hr>
  69.     <h2><i class="fa-solid fa-album"></i> Album Title</h2>
  70.     <h3><div style="font-size: 13px;"><i class="fa-fade fas fa-play"></i><iframe style="opacity: 0.001; height: 70%; width: 50%; position: absolute; bottom: -4px; left: -2px;" src="https://www.youtube.com/embed/YOUTUBEURL"></iframe> Favorite Track: <a target="_blank" href="SONGLINK">Track Title</a></div></h3>
  71.   </div>
  72.   </div>
  73.  
  74.   <div id="album8" class="album" style="left:625px;top:100px;z-index:3">
  75.     <div class="column" style="width:150px;display:inline-block;position:absolute;top:0;left:0;"><a target="_blank" href="ALBUMLINK"><img src="ALBUMCOVER"></a></div>
  76.     <div class="column" style="width:350px;display:inline-block;margin:0;position:absolute;top:0;left:150px;"><h1><i class="fa-solid fa-users-rectangle"></i> Band Name</h1>
  77.     <hr>
  78.     <h2><i class="fa-solid fa-album"></i> Album Title</h2>
  79.     <h3><div style="font-size: 13px;"><i class="fa-fade fas fa-play"></i><iframe style="opacity: 0.001; height: 70%; width: 50%; position: absolute; bottom: -4px; left: -2px;" src="https://www.youtube.com/embed/YOUTUBEURL"></iframe> Favorite Track: <a target="_blank" href="SONGLINK">Track Title</a></div></h3>
  80.   </div>
  81.   </div>
  82.  
  83.   <div id="album9" class="album" style="left:700px;top:100px;z-index:2">
  84.     <div class="column" style="width:150px;display:inline-block;position:absolute;top:0;left:0;"><a target="_blank" href="ALBUMLINK"><img src="ALBUMCOVER"></a></div>
  85.     <div class="column" style="width:350px;display:inline-block;margin:0;position:absolute;top:0;left:150px;"><h1><i class="fa-solid fa-users-rectangle"></i> Band Name</h1>
  86.     <hr>
  87.     <h2><i class="fa-solid fa-album"></i> Album Title</h2>
  88.     <h3><div style="font-size: 13px;"><i class="fa-fade fas fa-play"></i><iframe style="opacity: 0.001; height: 70%; width: 50%; position: absolute; bottom: -4px; left: -2px;" src="https://www.youtube.com/embed/YOUTUBEURL"></iframe> Favorite Track: <a target="_blank" href="SONGLINK">Track Title</a></div></h3>
  89.   </div>
  90.   </div>
  91.  
  92.   <div id="album10" class="album" style="left:775px;top:100px;z-index:1">
  93.     <div class="column" style="width:150px;display:inline-block;position:absolute;top:0;left:0;"><a target="_blank" href="ALBUMLINK"><img src="ALBUMCOVER"></a></div>
  94.     <div class="column" style="width:350px;display:inline-block;margin:0;position:absolute;top:0;left:150px;"><h1><i class="fa-solid fa-users-rectangle"></i> Band Name</h1>
  95.     <hr>
  96.     <h2><i class="fa-solid fa-album"></i> Album Title</h2>
  97.     <h3><div style="font-size: 13px;"><i class="fa-fade fas fa-play"></i><iframe style="opacity: 0.001; height: 70%; width: 50%; position: absolute; bottom: -4px; left: -2px;" src="https://www.youtube.com/embed/YOUTUBEURL"></iframe> Favorite Track: <a target="_blank" href="SONGLINK">Track Title</a></div></h3>
  98.   </div>
  99.   </div>
  100.   <div style="position:absolute;bottom:50px;left:37%;font-size:30px;font-weight:bold">=Recent Rotation=</div>
  101.  
  102.   <div style="position:absolute;bottom:30px;font-size:15px;opacity:0.6;left:34%">Click the <i class="fa-fade fas fa-play"></i> Icon to play the song in-browser!</div>
  103.  
  104.   <div style="position:absolute;color:grey;important;right:-50px;bottom:170px;transform:rotate(-90deg);">code by @o-p-a-l</div>
  105.  
  106.   <div style="position:absolute;right:-300px;width:300px;height:1px;"> </div>
  107.  
  108. </div>
  109.  
  110.  
  111.  
  112.  
  113. ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
  114. below is the CSS code. paste into the second box on the profile editor.
  115. ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
  116.  
  117.  
  118.  
  119.  
  120.  
  121. @import url('https://fonts.googleapis.com/css?family=Nova+Square');
  122.  
  123. .albumshelf {
  124.   font-family: 'Nova Square', sans-serif;
  125.   position: relative;
  126.   margin: auto;
  127.   width: 1030px;
  128.   height: 400px;
  129.   background: linear-gradient(to bottom, rgba(33, 33, 33, 0), rgba(33, 33, 33, .5), rgba(22, 22, 22, 1), rgba(22, 22, 22, 1), rgba(0, 0, 0, 0));
  130. }
  131.  
  132. .album {
  133.   width: 150px;
  134.   height: 150px;
  135.   background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
  136.   color: white;
  137.   transition: all .3s;
  138.   position: absolute;
  139.   transform: skewY(20deg);
  140.   overflow: hidden;
  141.   display: inline;
  142. }
  143.  
  144. .album:hover {
  145.   transform: translateY(-100px) width:500px;
  146.   height: 300px;
  147.   width:500px;
  148. }
  149.  
  150. .album img {
  151.   height: 150px;
  152.   width: 150px;
  153.   transition: all .3s;
  154. }
  155.  
  156. .album hr {
  157.   width: 90%;
  158.   border: 1px dashed white;
  159.   margin: 0;
  160.   margin-bottom: 5px;
  161. }
  162.  
  163. .album h1 {
  164.   font-size: 25px;
  165.   font-weight: bold;
  166.   margin: 0;
  167. }
  168.  
  169. .album h2 {
  170.   font-size: 20px;
  171.   margin: 0;
  172. }
  173.  
  174. .album h3 {
  175.   font-size: 15px;
  176.   font-style: italic;
  177.   margin: 0;
  178. }
Tags: toyhouse toyhouse codes
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!