<!-------------------------------------------------
Introductory — Bootstrap version.
(code by jiko, f2u custom for lunarmancy)
------------------------------
RULES
→ read this thoroughly please, and maybe drop a small comment saying that you've read it? :'3
thank youu [ https://toyhou.se/~bulletins/127417.code-rules ]
→ turn OFF WYSIWYG (in your display settings)
→ turn ON Code Editor
------------------------------
TIPPY TIPS
→ insert your img links INSIDE brackets or quotation marks!!
→ looking for a good online code editor? try [ https://th.circlejourney.net/# ] !
------------------------------
PALETTE
→ accent ----------- #bf3f2a
use control/command + f to quickly change the colours!
------------------------------------------------->
<div style="font-size:95%; position:relative; overflow:hidden;">
<!-------------------------------------------------
BACKROUND
------------------------------------------------->
<div style="position:absolute; top:0; right:0; bottom:0; left:0; z-index:-1; transform:scale(1.2,1.2);
/* BACKGROUND SETTINGS
---------------------------------------- */;
background-image:url(IMG_URL_HERE);
background-size:cover;
background-position:center;
/* BLUR SETTING
→ 0px is no blur
---------------------------------------- */;
filter:blur(10px);">
</div>
<!-------------------------------------------------
SHADOW
(deletable)
------------------------------------------------->
<div style="position:relative; z-index:1; top:-100;
background:rgba(0,0,0,0.3);
margin-bottom:-630px;
height:630px;
clip-path: polygon(0 0, 0% 100%, 100% 0);
mix-blend-mode:overlay">
</div>
<!-------------------------------------------------
CODE STARTS
------------------------------------------------->
<div class="row no-gutters mx-auto p-sm-4 p-3 my-sm-5" style="position:relative; z-index:40; max-width:550px">
<!-- AVATAR
---------------------------------------------->
<!--
→ best of the character is the center/focus of image
-->
<div class="col-sm-5 mx-auto p-2">
<div class="card border-0 p-2 rounded-0 h-100">
<img src="IMG_URL_HERE"
class="h-100 bg-faded" style="object-fit:cover;">
</div>
</div>
<!-- MUSIC PLAYER
---------------------------------------------->
<div class="col-sm-7 p-2">
<div class="card border-0 p-2 rounded-0 h-100">
<div class="bg-faded h-100">
<div class="mt-2 p-sm-4 p-3 text-center">
<div class="mb-1 text-primary" style="font-size:20px; font-family:serif; font-weight:bold; letter-spacing:1px; line-height:20px">
Song Title
</div>
<div class="faded font-italic" style="letter-spacing:1px">
Artist
</div>
<div class="row no-gutters mt-3 mx-auto" style="max-width:200px;">
<div class="col">
<i class="fal fa-backward fa-fw fa-lg"></i>
</div>
<div class="col-auto">
<i class="far fa-pause fa-fw fa-lg"></i>
</div>
<div class="col">
<i class="fal fa-forward fa-fw fa-lg"></i>
</div>
<div class="col-12 mt-3">
<div class="card border-0 p-1 rounded">
<div class="progress" style="background:none">
<div class="progress-bar bg-primary" style="height:5px;
width:50%
">
</div>
</div>
</div>
</div>
<div class="col-12 mt-1 small justify-content-between faded">
<span>0:00</span>
<span>0:00</span>
</div>
</div>
<div class="w-100" style="position:absolute; top:95px; right:0; height:40px; overflow:hidden;">
<!--
→ replace [ X6e6F_z17sI ] with your youtube id (found after https://www.youtube.com/watch?v=)
→ keep the [ ?controls=0 ] at the end for a nicer preformance !!
-->
<iframe src="https://www.youtube.com/embed/X6e6F_z17sI?controls=0"
class="w-100" frameborder="0"
style="position:absolute; top:-130px; left:0; height:300px; opacity:.001;"></iframe>
</div>
</div>
</div>
</div>
</div>
<!-- SUMMARY
---------------------------------------------->
<div class="col-12 p-2">
<div class="card border-0 p-2 rounded-0">
<div class="bg-faded p-3">
<p><span class="text-primary" style="font-size:25px; font-family:georgia, serif; font-weight:bold;">T</span>his grows with content!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.</p>
<p>Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<!-- add more above THIS line! -->
</div>
</div>
</div>
</div>
</div>
<!-------------------------------------------------
CREDITS
------------------------------------------------->
<div class="p-2">
<div class="faded small text-center text-muted text-monospace">
<a href="https://toyhou.se/15011478." class="text-reset tooltipster" title="code by jiko" style="text-decoration:none;">
<i class="fas fa-code"></i>
</a>
</div>
</div>
<!-- CODE ENDS -->