f2u - playlist - (custom colour ver)

<!-- F2U - PLAYLIST

CUSTOM COLOURS: find and replace #b052aa !

TO ADD / REMOVE A SECTION: highlight from where it says 'BEGINNING [SECTION]' to 'END [SECTION]' then remove or copy as you wish! for example, if i wanted a block of text similar to the backstory section, i'd copy from START BACKSTORY to END BACKSTORY and paste it!

TO HAVE A SECTION OPENED BY DEFAULT: where the section you want open says <div class="collapse etc etc">, add 'show'! make sure there's a space between it and previous words or it wont work : )

TO HAVE ENTIRE CODE COLLAPSED / ONLY 'PRESS PLAY' SHOWING BY DEFAULT: go to <div class="collapse show p-4" id="play"> (just a few lines down from here!) and remove the 'show'!

FOR EASY LIVE EDITING: use th.circlejourney.net !

-->


<div class="container-fluid bg-faded p-3" style="max-width:800px; letter-spacing:1.3px; font-family:tahoma;">
    <p>
           <a data-toggle="collapse" href="#play" aria-expanded="false" aria-controls="play" style="font-size:18px; letter-spacing:2.5px; color:#b052aa">
<i class="fas fa-play m-2" style=""></i>PRESS PLAY . </a>
           <div class="collapse show p-4" id="play">
           <div class="row">

<!--MAIN IMAGE + CHARACTER NAME-->
<div class="card rounded-0 col-sm-4" style="background:url(IMAGE LINK HERE); min-height:500px; background-repeat:no-repeat; background-size:cover; background-position:center;"></div>
             <div class="card rounded-0 col-sm-8 p-3" style="max-height:500px; overflow:auto">
            <h1 class="bg-faded p-2">NAME</h1>


        <div class="row p-1" style="font-size:13px">
           <div class="container col-sm-6">
            <div class="row">


           <div class="container col-sm-5">NAME</div>
           <div class="container col-sm-7" style="font-size:12px;">name</div>

           <div class="container col-sm-5">AGE</div>
           <div class="container col-sm-7" style="font-size:12px">age</div>

           <div class="container col-sm-5">GENDER</div>
           <div class="container col-sm-7" style="font-size:12px">gender</div>

            </div>
           </div>

           <div class="container col-sm-6">
                <div class="row">


           <div class="container col-sm-5">PRONOUNS</div>
           <div class="container col-sm-7" style="font-size:12px;">pronouns</div>

           <div class="container col-sm-5">JOB</div>
           <div class="container col-sm-7" style="font-size:12px">job</div>

           <div class="container col-sm-5">HOBBY</div>
           <div class="container col-sm-7" style="font-size:12px">hobby</div>

            </div>
            </div>
        </div>

                  <h1 class="bg-faded p-2">PLAYLIST</h1>


<!--START CHARACTER INTRO-->
 <a data-toggle="collapse" href="#intro" aria-expanded="false" aria-controls="intro" style="font-size:14px; color:#b052aa">

    <i class="fas fa-play m-2" style=""></i>-- ARTIST / TITLE (INTRO)</a>
     <div class="collapse p-3" id="intro" style="font-size:12px">intro stuff here! put as much as you want, the big box scrolls!</div>

<!--END INTRO-->


<!--START CHARACTER TRIVIA + LIKES AND DISLIKES-->
 <a data-toggle="collapse" href="#trivia" aria-expanded="false" aria-controls="trivia" style="font-size:14px; color:#b052aa">

     <i class="fas fa-play m-2" style=""></i>-- ARTIST / TITLE (TRIVIA) </a>
     <div class="collapse p-3" id="trivia" style="font-size:12px">
         <div class="row">
             <div class="container col-sm-6 bg-fade p-"><h6>LIKES</h6>
             <ul>
                   <li>1 thing</li>
                   <li>1 thing</li>
                   <li>1 thing</li>
             </ul>
             </div>

             <div class="container col-sm-6"><h6>DISLIKES</h6>
             <ul>
                   <li>1 thing</li>
                   <li>1 thing</li>
                   <li>1 thing</li>
             </ul>
             </div>
         <div class="container"><h6>TRIVIA</h6>
             <ul>
                   <li>trivia</li>
                   <li>trivia</li>
                   <li>trivia</li>
             </ul>
         </div>
         </div>


     </div>
<!--END TRIVIA-->


<!--START BACKSTORY-->
   <a data-toggle="collapse" href="#backstory" aria-expanded="false" aria-controls="backstory" style="font-size:14px; color:#b052aa">

    <i class="fas fa-play m-2" style=""></i>-- ARTIST / TITLE (BACKSTORY) </a>
     <div class="collapse p-3" id="backstory" style="font-size:12px"><p>backstory here!!!</p>

     <!--TO ADD ANOTHER PARAGRAPH: <p>paragraph content here</p>-->

         <p>put as much as you want!</p></div>


<!--END BACKSTORY-->


<!--START RELATIONSHIPS-->
   <a data-toggle="collapse" href="#relationships" aria-expanded="false" aria-controls="relationships" style="font-size:14px; color:#b052aa">

    <i class="fas fa-play m-2" style=""></i>-- ARTIST / TITLE (RELATIONSHIPS)</a>
     <div class="collapse p-3" id="relationships" style="font-size:12px">
         <!--RELATIONSHIP 1-->
         <div class="row m-1">
             <div class="card rounded-0 col-sm-4" style="background:url(IMAGE URL HERE); height:135px; background-repeat:no-repeat; background-size:cover; background-position:center"></div>
             <div class="card rounded-0 col-sm-8 p-2 m-2;" style="max-height:135px; overflow:auto"><h6>NAME</h6>
                <p>relationship desc - this scrolls!</p>
             </div>
         </div>
         <!--END RELATIONSHIP 1-->

         <!--RELATIONSHIP 2-->
         <div class="row m-1">
             <div class="card rounded-0 col-sm-4" style="background:url(IMAGE URL HERE); height:135px; background-repeat:no-repeat; background-size:cover; background-position:center"></div>
             <div class="card rounded-0 col-sm-8 p-2 m-2;" style="max-height:135px; overflow:auto"><h6>NAME</h6>
                   <p>relationship desc</p>
             </div>
         </div>
         <!--END RELATIONSHIP 2-->

         <!--ADD MORE RELATIONSHIPS ABOVE THIS LINE! to add a new relationship copy and paste from 'START RELATIONSHIP (NUMBER)' to 'END RELATIONSHIP (number)'!-->

     </div>
<!--END RELATIONSHIPS-->
      </div>
      <!--CREDITS / DONT REMOVE!!!!-->
  </div>
  <a href="/hanyu" class="pull-right" style="font-size:12px; color:#b052aa">code by hanyu</a>
</div>

</div>