<!-------------------------------------------------
Introductory — Custom Coloured 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
→ border ------------- #191924
→ bg ----------------- #eeeeee
→ progress bg -------- #dedede
→ text --------------- #404040
use control/command + f to quickly change the colours!
------------------------------------------------->
<div style="font-size:95%; position:relative; overflow:hidden; color:#404040">
<!-------------------------------------------------
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;
background-color:#bf3f2a;
/* 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" style="background-color:#191924;">
<img src="IMG_URL_HERE"
class="h-100"
style="object-fit:cover; background-color:#eeeeee;">
</div>
</div>
<!-- MUSIC PLAYER
---------------------------------------------->
<div class="col-sm-7 p-2">
<div class="card border-0 p-2 rounded-0 h-100" style="background-color:#191924;">
<div class="h-100" style="background-color:#eeeeee">
<div class="mt-2 p-sm-4 p-3 text-center">
<div class="mb-1" style="font-size:20px; font-family:serif; color:#bf3f2a; 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="p-1 rounded" style="background:#dedede">
<div class="progress" style="background:none">
<div class="progress-bar" style="height:5px; background-color:#bf3f2a;
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" style="background-color:#191924;">
<div class="p-sm-4 p-3" style="background-color:#eeeeee">
<p><span style="font-size:25px; font-family:georgia, serif; color:#bf3f2a; 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-monospace text-muted">
<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 -->