[18] user reload
created by:skysong
Mixed ColorsHTMLUser
Copy
<!-----------------------------------------------------------------------------------------
[ USER RELOAD ] // default version
f2u code by skysong
[ color palette ]
main accent #848484 (also accent 2 text)
accent 2 #c2c2c2 (also main accent text)
accent text #fff (for main accent)
main bg bg-faded
[ resources ]
icons https://fontawesome.com/
TH colors https://toyhou.se/7850218.bootstrap-color-combos
TH fonts https://toyhou.se/23372355.fonts
editing https://th.circlejourney.net/#
img hosting https://freeimage.host/
code link https://toyhou.se/40446307.18-user-reload
[ embed instructions ]
> Note that the playlist only works with Youtube videos
> The part you need to edit is this one
src="https://www.youtube-nocookie.com/embed/URLHERE?controls=1"
> Get the link to the video you want to embed. For example:
https://www.youtube.com/watch?v=lKzcsVBcH9I&list=PLXky5KZSwAPKc6chnBTMhAw4zkoEXLPXl&index=1&t=638s&pp=iAQB8AUBsAgC
> Do NOT just put the entire link in!!
> You only need the part after the v= and before any &s there may be in the link
https://www.youtube.com/watch?v= >> lKzcsVBcH9I << &list=PLXky5KZSwAPKc6chnBTMhAw4zkoEXLPXl&index=1&t=638s&pp=iAQB8AUBsAgC
> Then just replace URLHERE with that bit ^ and it should work!
------------------------------------------------------------------------------------------->
<div class="mx-auto" style="max-width:900px">
<div class="m-md-4">
<!------------------------------------------------------------------------------------------
STATUS BAR
------------------------------------------------------------------------------------------->
<div class="p-3" style="border-radius:10px; background:#848484; color:#fff; cursor:default">
<!--LOADING ICON-->
<i class="fa fa-circle-notch fa-spin mx-2" style="color:#c2c2c2; --fa-animation-duration:3s"></i>
<!--[ if you don't want this to spin, remove fa-spin ]-->
<!--TIME-->
<span style="font-weight:500">0:00 AM</span>
<!--DIVIDER ICON-->
<i class="fal fa-ellipsis-vertical mx-2" style="color:#c2c2c2; --fa-animation-duration:3s"></i>
<!--STATUS-->
<i>status here</i>
<!--[ this box will expand but looks best with one line! ]-->
<!--QUOTE ICON-->
<i class="far fa-quote-right" style="color:#c2c2c2"></i>
</div> <!--end status-->
<!---------------------------------------------------------------------------------------------
CONTAINER
---------------------------------------------------------------------------------------------->
<div class="row mx-auto mt-2">
<!---------------------------------------------------------------------------------------------
SIDEBAR
---------------------------------------------------------------------------------------------->
<div class="col-sm-auto mr-sm-2 p-3" style="border-radius:10px; background:#c2c2c2; color:#848484">
<div class="flex-sm-column h-100 justify-content-center align-items-center">
<!--[ copy and paste below this line ]-->
<!--LINK-->
<a href="URLHERE" class="text-reset" style="cursor:crosshair" data-toggle="tooltip" data-placement="right" title="link name">
<!--[ href="URLHERE" | replace with your link ]-->
<!--[ title="EDITHERE" | replace with your link name ]-->
<!--ICON-->
<i class="fa-sharp fa-link"></i>
<!--[ fa-link | replace "link" with your icon ]-->
</a>
<!--SPACER-->
<span class="p-1"></span>
<!--[ remember to take the spacer with you when you copy ]-->
<!--[ copy and paste above this line ]-->
<!--TOOLTIP-->
<!--[ do not edit! ]-->
<a href="https://toyhou.se/40446307.18-user-reload" class="text-reset" style="cursor:crosshair" data-toggle="tooltip" data-placement="right" title="code by sky">
<i class="fa-sharp fa-ticket-airline"></i>
</a>
</div> </div> <!--end sidebar-->
<!---------------------------------------------------------------------------------------------
CONTENT CONTAINERS
---------------------------------------------------------------------------------------------->
<div class="col p-0 mt-sm-0 mt-2" style="border-radius:10px;">
<div class="row w-100 mx-auto">
<!--CONTENT COL-->
<div class="col-sm p-0" >
<!---------------------------------------------------------------------------------------------
TAB BUTTONS
---------------------------------------------------------------------------------------------->
<div style="border-radius:10px 10px 0 0;">
<ul class="nav">
<!--HOME BUTTON-->
<li class="nav-item px-3 py-1 d-flex align-items-center" style="background:#848484; border-radius:10px 10px 0 0; width:100px;">
<a href="#home" class="nav-link active p-0" style="color:#fff; flex:1; cursor:crosshair" data-toggle="tab">
home
</a>
<!--ICON-->
<i class="fal fa-xmark" style="color:#c2c2c2"></i>
</li>
<!--ABOUT BUTTON-->
<li class="nav-item px-3 py-1 d-flex align-items-center" style="margin-left:2px;background:#848484; border-radius:10px 10px 0 0; width:100px;">
<a href="#about" class="nav-link p-0" style="color:#fff; flex:1; cursor:crosshair" data-toggle="tab">
about
</a>
<!--ICON-->
<i class="fal fa-xmark" style="color:#c2c2c2"></i>
</li>
<!--PLAYLIST BUTTON-->
<li class="nav-item px-3 py-1 d-flex align-items-center" style="margin-left:2px;background:#848484; border-radius:10px 10px 0 0; width:100px;">
<a href="#play" class="nav-link p-0" style="color:#fff; flex:1; cursor:crosshair" data-toggle="tab">
playlist
</a>
<!--ICON-->
<i class="fal fa-xmark" style="color:#c2c2c2"></i>
</li>
</ul> </div> <!--end buttons-->
<!--TAB CONTENT START-->
<div class="row w-100 mx-auto bg-faded pb-sm-0 pb-3" style="border-radius:0 10px 10px 10px; overflow:" >
<div class="col-sm tab-content p-3">
<!---------------------------------------------------------------------------------------------
TAB 1
---------------------------------------------------------------------------------------------->
<div id="home" class="tab-pane fade show active text-center flex-column" role="tabpanel">
<div class="flex-fill flex-column align-items-center justify-content-center" style="height:0; min-height:300px; overflow:scroll; scrollbar-color: #848484 transparent">
<!--USERNAME-->
<div class="mt-sm-n3" style="font-size:30px; font-weight:300; color:#848484; letter-spacing:4px"><span class="faded">@</span>user</div>
<!--BASIC INFO-->
<div class="ml-3">
<!--[ edit below this line ]-->
any/all
<i class="fal fa-angle-right" style="color:#848484;"></i>
0
<i class="fal fa-angle-right" style="color:#848484;"></i>
orient
<!--[ this bit can be used for whatever you want, really ]-->
</div>
<!--SEARCH BAR-->
<div class="card my-3 text-left px-3 py-1 w-75" style="border-radius:25px; max-width:100%">
<div class="d-flex align-items-center w-100">
<!--SEARCH-->
<div class="faded" style="flex:1; overflow-x:scroll; scrollbar-width:none; white-space:nowrap;"><p>
cool quote here! it'll scroll if it gets too long <span class="fa-fade">|</span>
</p></div>
<!--ICON-->
<div class="ml-2"><i class="fa fa-search" style="color:#848484"></i></div>
</div></div>
<!--AES ICONS-->
<div style="color:#848484; font-size:30px; cursor:default">
<!--ICON 1-->
<i class="fa-thin fa-sharp fa-moon"></i>
<!--[ fa-moon | replace "moon" with your icon, and so on ]-->
<!--ICON 1-->
<i class="fa-thin fa-sharp fa-sparkle mx-2"></i>
<!--ICON 1-->
<i class="fa-thin fa-sharp fa-sun"></i>
</div>
</div> </div> <!--end tab 1-->
<!---------------------------------------------------------------------------------------------
TAB 2
---------------------------------------------------------------------------------------------->
<div id="about" class="tab-pane fade flex-column" role="tabpanel">
<div class="flex-fill" style="height:0; min-height:300px; overflow:scroll; scrollbar-color: #848484 transparent">
<!--CONTENT-->
<div>
Intro. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
</div>
<!--CONTENT-->
<div class="mt-2">
<!--LABEL-->
<span style="background:#848484; color:#fff; font-weight:bold;">comms:</span>
<!--[ labels can be changed to whatever you like! ]-->
<span style="color:#848484"><b>closed!</b></span> Here is <a href="URLHERE" style="color:#848484; cursor:crosshair">an example link</a> in case you need it.
</div>
<!--CONTENT-->
<div class="mt-2">
<!--LABEL-->
<span style="background:#848484; color:#fff; font-weight:bold;">drawing programs:</span>
<span style="color:#848484"><b>main</b></span>, thing, thing
</div>
<!--GALLERY-->
<div class="row mx-auto mt-2">
<!--IMG 1-->
<div class="col p-0 mr-1" style="border-radius:10px; position:relative;
background-image:url(https://placehold.co/400?text=placeholder);
background-position:center;
background-size:cover;">
<!--[ background-image:url(EDITHERE) | replace with your image ]-->
<!--SPACER-->
<!--[ don't edit this! it's so that the image can stay a square ]-->
<img src="https://iili.io/Cayw31R.png" class="w-100">
<!--LINK-->
<a href="URLHERE" class="stretched-link" style="cursor:crosshair"></a>
<!--[ this was designed to be a gallery that linked to the full art, but it could easily work as a featured characters or even friends section! ]-->
<!--[ href="URLHERE" | replace with your link ]-->
</div>
<!--IMG 2-->
<div class="col p-0 mr-1" style="border-radius:10px;
background-image:url(https://placehold.co/400?text=placeholder);
background-position:center;
background-size:cover;">
<!--[ background-image:url(EDITHERE) | replace with your image ]-->
<!--SPACER-->
<img src="https://iili.io/Cayw31R.png" class="w-100">
<!--LINK-->
<a href="URLHERE" class="stretched-link" style="cursor:crosshair"></a>
<!--[ href="URLHERE" | replace with your link ]-->
</div>
<!--IMG 3-->
<div class="col p-0" style="border-radius:10px;
background-image:url(https://placehold.co/400?text=placeholder);
background-position:top;
background-size:cover;">
<!--[ background-image:url(EDITHERE) | replace with your image ]-->
<!--SPACER-->
<img src="https://iili.io/Cayw31R.png" class="w-100">
<!--LINK-->
<a href="URLHERE" class="stretched-link" style="cursor:crosshair"></a>
<!--[ href="URLHERE" | replace with your link ]-->
</div>
</div>
<!--CONTENT-->
<div class="mt-2">
<!--LABEL-->
<span style="background:#848484; color:#fff; font-weight:bold;">media:</span>
thing, <span style="color:#848484"><b>bolded thing</b></span>, thing, thing
</div>
<!--CONTENT-->
<div class="mt-2">
<!--LABEL-->
<span style="background:#848484; color:#fff; font-weight:bold;">games:</span>
<span style="color:#848484"><b>bolded thing</b></span>, thing, thing, thing
</div>
<!--CONTENT-->
<div class="mt-2">
<!--LABEL-->
<span style="background:#848484; color:#fff; font-weight:bold;">artists:</span>
<span style="color:#848484"><b>bolded thing</b></span>, thing, <span style="color:#848484"><b>bolded thing</b></span>, thing
</div>
<!--CONTENT-->
<div class="mt-2">
<!--LABEL-->
<span style="background:#848484; color:#fff; font-weight:bold;">food:</span>
thing, thing, <span style="color:#848484"><b>bolded thing</b></span>, thing
</div>
</div>
</div> <!--end tab 2-->
<!---------------------------------------------------------------------------------------------
TAB 3
---------------------------------------------------------------------------------------------->
<div id="play" class="tab-pane fade flex-column" role="tabpanel">
<div class="flex-fill flex-column" style="height:0; min-height:300px; overflow:scroll; scrollbar-color: #848484 transparent">
<!--[ see the top of the code notes for embed instructions ]-->
<!--NOW PLAYING-->
<div class="card p-2" style="color:#848484; border-radius:10px;">
<div class="d-flex w-100 align-items-center">
<!--EMBED AREA-->
<div style="position:relative">
<!--ICON-->
<i class="fa-thin fa-sharp fa-compact-disc fa-spin" style="font-size:40px; --fa-animation-duration:3s; color:#c2c2c2"></i>
<!--[ if you don't want this to spin, remove fa-spin ]-->
<!--EMBED CONTAINER-->
<div class="align-items-center justify-content-center" style="width:40px; height:40px; position:absolute; top:0; overflow:hidden;">
<!--EMBED-->
<iframe style="opacity:0.001; position:absolute; z-index:100" src="https://www.youtube-nocookie.com/embed/URLHERE?controls=1" frameborder="0"></iframe>
</div>
</div>
<!--SONG INFO-->
<div class="ml-2">now playing...
<span style="color:#c2c2c2"><b>song name</b></span>
<br><span class="faded">artist</span>
</div>
</div>
</div>
<!--LIST CONTAINER-->
<div class="d-sm-flex mt-2 flex-fill">
<div class="mr-sm-2" style="flex:2;">
<!--[ copy and paste below! try not to put too much as it gets weird when it scrolls. i'd reccommend 4 or 5 ]-->
<!--SONG-->
<div style="position:relative">
<!--ICON-->
<i class="fal fa-play" style="color:#848484"></i>
<!--EMBED CONTAINER-->
<div class="align-items-center justify-content-center" style="width:15px; height:25px; position:absolute; top:0; overflow:hidden;">
<!--EMBED-->
<iframe style="opacity:0.001; position:absolute; z-index:100" src="https://www.youtube-nocookie.com/embed/URLHERE?controls=1" frameborder="0"></iframe>
</div>
<!--TITLE-->
song name <span class="faded">~ artist</span>
</div> <!--end music player-->
<!--SONG-->
<div style="position:relative">
<!--ICON-->
<i class="fal fa-play" style="color:#848484"></i>
<!--EMBED CONTAINER-->
<div class="align-items-center justify-content-center" style="width:15px; height:25px; position:absolute; top:0; overflow:hidden;">
<!--EMBED-->
<iframe style="opacity:0.001; position:absolute; z-index:100" src="https://www.youtube-nocookie.com/embed/URLHERE?controls=1" frameborder="0"></iframe>
</div>
<!--TITLE-->
song name <span class="faded">~ artist</span>
</div> <!--end music player-->
<!--SONG-->
<div style="position:relative">
<!--ICON-->
<i class="fal fa-play" style="color:#848484"></i>
<!--EMBED CONTAINER-->
<div class="align-items-center justify-content-center" style="width:15px; height:25px; position:absolute; top:0; overflow:hidden;">
<!--EMBED-->
<iframe style="opacity:0.001; position:absolute; z-index:100" src="https://www.youtube-nocookie.com/embed/lxMGUpdjMj4?controls=1" frameborder="0"></iframe>
</div>
<!--TITLE-->
song name <span class="faded">~ artist</span>
</div> <!--end music player-->
<!--[ copy and paste above this line ]-->
</div> <!--end list-->
<!--LYRIC BOX-->
<div class="p-3 align-items-center justify-content-center flex-column mt-sm-0 mt-4" style="flex:1; background:#c2c2c2; color:#848484; border-radius:10px;">
<i class="fal fa-quote-left faded"></i>
<!--[ edit below this line - make sure to seperate new lines with <br> ]-->
Some lyrics<br>
Here<br>
Lorem ipsum
<!--[ edit above this line ]-->
<i class="fal fa-quote-right faded"></i>
</div>
</div> <!--end list row-->
</div> </div> <!--end tab 3-->
<!---------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------->
</div> <!--end tabs-->
<!---------------------------------------------------------------------------------------------
LARGE IMAGE
---------------------------------------------------------------------------------------------->
<div class="col-sm-3 mt-sm-n4 mt-3 ml-sm-0 ml-3 mr-3 mb-sm-3 card border-0 p-0" style="border-radius:10px; overflow:hidden; height:350px; position:relative;
background:url(https://placehold.co/200x400?text=placeholder);
background-position:center;
background-size:cover
;"> <!--[ background-image:url(EDITHERE) | replace with your image ]-->
<!--ICONS-->
<div class="flex-column p-1" style="position:absolute; bottom:0; right:0; opacity:0.8">
<i class="fa fa-sharp fa-sparkle fa-2x"></i>
<i class="fa fa-sharp fa-sparkle fa-2x"></i>
<i class="fa fa-sharp fa-sparkle fa-2x"></i>
</div>
</div> <!--end large image-->
<!---------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------->
</div> <!--end row-->
</div> <!--end content col-->
<!---------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------->
</div> </div> <!--end content containers-->
</div> <!--end row container-->
</div></div><!--end code-->