Record Player [Custom]

<div class="container text-white my-3" style="width:750px;">
<!--------- Main box ------------>
 <div class="card bg-faded rounded-0 mx-auto" style="background-color:#c4a96e; width:700px; height:550px; border-bottom-right-radius:20%; border-top-right-radius:20%; border:7px solid #223c2b;">
<!----- Rotating disc ----->
 <!-- Lighter color -->
 <i class="fa-solid fa-circle my-auto mx-auto" style="font-size:300px; color:#eecd91"></i>
 <!-- The disc itself -->
 <i class="fa-solid fa-compact-disc my-auto mx-auto fa-spin" style="font-size:300px; color:#474330; position:absolute; top:117px; left:192px;"></i>
 <!-- The tone arm -->
 <i class="fa-regular fa-lacrosse-stick" style="font-size:250px; color:#223c2b; position:absolute; top:0px; left:-25px; transform:rotate(255deg)"></i>
 </div>

 <div class="tab-content" style="position:absolute; top:0px; left:25px;">
<!----- Tab 1 - Description ----->
  <div class="tab-pane fade" id="tab1">
 <!-- Transluscent box -->
   <div class="card bg-faded rounded-0 border-0 p-2" style="background-color:rgba(11,23,19,0.8); width:700px; height:550px; border-bottom-right-radius:20%; border-top-right-radius:20%;">
 <!-- First half of quote, on top -->
   <p style="font-size: 20px; color:#659972" class="mt-2"><i>"The music still plays, chanting that peaceful mantra.</i></p>
   <br>
 <!-- Text box (use <br> to make a new paragraph) -->
    <div class="card bg-faded rounded-0 border-0 p-2" style="background-color:rgba(11,23,19,0); height:340px; overflow:auto">
    <p style="font-size: 18px;">Never has the music played louder, its spell cast upon me so fast. The room turns yellow, the windows close but the light is still there. The soft scratch on the disc reminds me that I am not in my place, but another realm. A realm where the world is scripted, yet replays over and over like a play. But I never get tired. I could wisp my form around this room all day, never feeling as though my movements are repeated.
    <br> The room feels silent, although I know it is not. My body is strained, yet I feel light as a feather. Is it the music, or is it my delusion? No matter what keeps me afloat among this realm, I know I do not want to leave.
    <br> I just wrote a whole poem for this but in reality you'd probably just write about the character or something in here. And do not worry, for the box does scroll.</p>
    </div>
    <div class="row no-gutters">
     <div class="col-2"></div>
      <div class="col-10">
 <!-- Music note divider -->
      <p style="font-size:30px; color:#e1c274;">
       <i class="fa-solid fa-music-note mr-2"></i>
       <i class="fa-brands fa-itunes-note mr-2"></i>
       <i class="fa-solid fa-music-note mr-2"></i>
       <i class="fa-brands fa-itunes-note mr-2"></i>
       <i class="fa-solid fa-music-note mr-2"></i>
       <i class="fa-brands fa-itunes-note mr-2"></i>
       <i class="fa-solid fa-music-note mr-2"></i>
       <i class="fa-brands fa-itunes-note mr-2"></i>
       <i class="fa-solid fa-music-note mr-2"></i>
       <i class="fa-brands fa-itunes-note mr-2"></i>
       <i class="fa-solid fa-music-note mr-2"></i>
       <i class="fa-brands fa-itunes-note"></i>
      </p>
      <br>
 <!-- Second half of quote, on bottom -->
      <p style="font-size: 20px; color:#659972; text-align:right" class="mr-5"><i>"Won't you move your feet to its gentle rhythm?"</i></p>
      </div>
     </div>
    </div>
   </div>

<!----- Tab 2 - Theme ----->
   <div class="tab-pane fade" id="tab2">
 <!-- Translucent box -->
    <div class="card bg-faded rounded-0 border-0 p-2" style="background-color:rgba(46,48,43,0.8); width:700px; height:550px; border-bottom-right-radius:20%; border-top-right-radius:20%;">
     <div class="row no-gutters">
 <!-- Image one -->
      <div class="col-6">
       <div class="card bg-faded rounded-0 border-0 ml-2 mt-2" style="height:380px; background-image:url( IMGLINK ); background-size:cover; background-position: center; border-top-left-radius:20%;">
       </div>
      </div>
 <!-- Image two -->
      <div class="col-6">
       <div class="card bg-faded rounded-0 border-0 mx-2 mt-2" style="height:250px; background-image:url( IMGLINK ); background-size:cover; background-position: center; border-top-right-radius:50%;">
       </div>
 <!-- Image three -->
       <div class="card bg-faded rounded-0 border-0 mx-2 mt-2" style="height:265px; background-image:url( IMGLINK ); background-size:cover; background-position: center; border-bottom-right-radius:50%;">
       </div>
      </div>
     </div>
     <div class="row no-gutters">
      <div class="col-2"></div>
       <div class="col-4">
 <!-- Music box -->
        <div class="card bg-faded rounded-0 border-0 p-2" style="background-color:rgba(46,48,43,0.8); margin-top:-135px; height:135px; overflow:auto">
         <p style="font-size:25px; text-align:center" class="mr-1">SONG TITLE GOES HERE<br></p>
         <a style="font-size:12px; color:#e18d6e; text-align:center">ARTIST NAME DOWN HERE</a>
         </div>
 <!-- Overlay for music link -->
        <a class="btn btn-outline-warning rounded-0" style="height:135px; width:228px; border-width:0px; position:absolute; top:-135px; left:0px; opacity:0.75"
        href=" linktosong "></a>
        </div>
       </div>
      </div>
     </div>
    </div>
<!----- Tab buttons (note: it will only switch between the two tabs, it won't close them) ----->
    <ul class="nav nav-tabs card-header-tabs row no-gutters" style="position:absolute; bottom:50px; left:40px;">
     <li class="col-12"><a class="btn btn-block rounded-circle text-white" style="background-color:#223c2b; height:50px; width:50px" data-toggle="tab" href="#tab1"></a></li>
     <li class="col-12 mt-3"><a class="btn btn-block rounded-circle text-white" style="background-color:#223c2b; height:50px; width:50px" data-toggle="tab" href="#tab2"></a></li>
    </ul>
    <!--code credit (do not remove/alter)-->
<p class="ml-1"><a style="font-size:13px; color:#e1c274" href="https://toyhou.se/MCDogResource"><i class="fas fa-bullseye"></i> Code by maniCARNY</a></p>
   </div>