Code
WSIWYG friendly character code!
<div class="card" style="background-image:url('https://previews.123rf.com/images/sahua/sahua1104/sahua110400015/9447976-japanese-seamless-waves-pattern-in-ocean-colors.jpg'); border-color:#0a1052; border-width:10px;">
<div class="card-block">
<div class="card" style="background-color:#69b9ff;border-color:#ffffff; border-width:5px; border-style:dotted;">
<div class="card-block" style="text-align: center;"><i class="fas fa-dice fa-spin fa-4x" style="color:#ffffff;"></i> <span style='font-family: "century gothic", sans-serif; font-size: 24px; color: rgb(255, 255, 255);'>SUNSHINE!</span> <i class="far fa-sun fa-spin fa-4x" style="color:#ffffff;"></i></div>
</div>
<p>
<br>
</p>
<div class="row">
<div class="col-md-6 col-sm-3 text-center mb-5">
<div class="card" style="background-color:#69b9ff;">
<div class="card-block">
<ul class="fa-ul" style='font-family: "century gothic", sans-serif; font-size: 17px; color: rgb(255, 255, 255);'>
<li><span class="fa-li"><i class="fal fa-pen-alt" style="color:#ffffff;"></i></span><span style="font-size: 18px;">Name</span></li>
<li><span style="font-size: 18px;"><span class="fa-li"><i class="fal fa-chevron-right" style="color:#ffffff;"></i></span>Nickname, Alias, or title</span>
</li>
<li><span style="font-size: 18px;"><span class="fa-li"><i class="fal fa-hourglass-half" style="color:#ffffff;"></i></span>Age</span>
</li>
<li><span style="font-size: 18px;"><span class="fa-li"><i class="fal fa-transgender" style="color:#ffffff;"></i></span>Gender</span>
</li>
<li><span style="font-size: 18px;"><span class="fa-li"><i class="fal fa-hand-holding-heart" style="color:#ffffff;"></i></span>Orientation</span>
</li>
<li><span style="font-size: 18px;"><span class="fa-li"><i class="fal fa-home" style="color:#ffffff;"></i></span>Location</span>
</li>
</ul>
<br>
<div class="ui-accordion card" style="background-color:#69b9ff;">
<div class="ui-accordion-content card-block" style="height:150px; background-color:#69b9ff; border-style:dotted; border-color:#ffffff; border-width:5px;"><a href="https://www.youtube.com/playlist?list=PLNChn8k2fzzM0S1XQHx1yTBLkMxe4GxvH" style='font-family: "century gothic", sans-serif; font-size: 17px; color: rgb(255, 255, 255);'><i class="fas fa-play"></i><span style="font-size: 18px;">PLAYLIST</span></a>
<br>
<ul class="fa-ul" style='font-family: "century gothic", sans-serif; color: rgb(255, 255, 255);'>
<li><span class="fa-li"><i class="fal fa-music" style="color:#ffffff;"></i></span><span style="font-size: 18px;">Artist Name - Song Title</span></li>
<li><span class="fa-li"><i class="fal fa-music" style="color:#ffffff;"></i></span><span style="font-size: 18px;">Artist Name - Song Title</span></li>
<li><span class="fa-li"><i class="fal fa-music" style="color:#ffffff;"></i></span><span style="font-size: 18px;">Artist Name - Song Title</span></li>
<li><span class="fa-li"><i class="fal fa-music" style="color:#ffffff;"></i></span><span style="font-size: 18px;">Artist Name - Song Title</span></li>
<li><span class="fa-li"><i class="fal fa-music" style="color:#ffffff;"></i></span><span style="font-size: 18px;">Artist Name - Song Title</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-3 text-center mb-5">
<div class="card" style="background-image:url('https://previews.123rf.com/images/oksancia/oksancia1307/oksancia130704342/21263924-pastel-blue-fabric-ikat-diamond-seamless-pattern-background.jpg');">
<div class="card-block" style="background-image:url('https://previews.123rf.com/images/oksancia/oksancia1307/oksancia130704342/21263924-pastel-blue-fabric-ikat-diamond-seamless-pattern-background.jpg');"><img src="https://f2.toyhou.se/file/f2-toyhou-se/images/42708112_fuZAs38ofIGfEsY.png" class="fr-fic fr-dii" width="300" height="300"></div>
</div>
</div>
</div>
<p>
<br>
</p>
<div class="row" style="text-align: center;">
<div class="col-md-6 col-sm-3 text-center mb-5">
<div class="ui-accordion card card-inverse card" style="background-color:#69b9ff;">
<div class="ui-accordion-content card-block" style="height:200px; background-color:#69b9ff; border-color:#69bff;"><i class="fas fa-heart fa-spin fa-4x" style="color:#ffffff;"></i> <span style='font-family: "century gothic", sans-serif; font-size: 24px; color: rgb(255, 255, 255);'>Personality</span> <i class="fas fa-heart fa-spin fa-4x" style="color:#ffffff;"></i>
<br>
<p style='font-family: "century gothic", sans-serif; color: rgb(255, 255, 255);'>Talk about what they're like here!! This box will scroll with text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-3 text-center mb-5">
<div class="ui-accordion card card-inverse card" style="background-color:#69b9ff;">
<div class="ui-accordion-content card-block" style="height:200px; background-color:#69b9ff; border-color:#69bff;"><i class="far fa-hourglass fa-spin fa-4x" style="color:#ffffff;"></i> <span style='font-family: "century gothic", sans-serif; font-size: 24px; color: rgb(255, 255, 255);'>Backstory</span> <i class="far fa-hourglass fa-spin fa-4x" style="color:#ffffff;"></i>
<br>
<p style='font-family: "century gothic", sans-serif; color: rgb(255, 255, 255);'>Talk about what their backstory here!! This box will scroll with text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.F2U</p>
</div>
</div>
</div><em><span style="color: rgb(255, 255, 255); background-color: rgb(109, 173, 231);">Code by GalaxieAuLait</span></em></div>
</div>
</div>