Select All
<!DOCTYPE HTML>
<!--Rules:
11pm
For the Coders Quarters August 2022 challenge
Layout provided by Togo: https://toyhou.se/Togo
You may
-frankenstein with other codes (as long as the creator of said code allows it)
-edit/change as much as you need (example: making character codes into user codes, vice-versa)
You may not
-Redistribute, resell, and/or claim its yours
-Remove credit (you're allowed to move & edit it though, just keep it visible)
Misc Notes:
-When editing, remember to turn WYSIWYG off! My codes may break otherwise
-Some basic html knowledge is recommended for editing
Default Colors:
-text: text-white
-backgrounds: rgba(19, 17, 27,0.90)
-tabs & likes/dislikes bg: #1d1a2a
-borders, headers, 'taskbar': #000000
-dividers, links, accents: #698bc7
Change the colors: Ctrl+f and search for the color you want to change.
-->
<div class="container-fluid" style="max-width:1250px">
<!--background / 'wallpaper'-->
<div class="card rounded-0" style="
background-image:url(https://images.unsplash.com/photo-1503389152951-9f343605f61e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2099&q=80);
background-size:cover;
background-position:bottom;
border-color:#000000;
box-shadow:3px 3px 5px rgba(0,0,0,0.3)">
<!--Windows-->
<div class="container p-3" style="max-width:1200px">
<div class="row">
<!--player & basic info-->
<div class="col-12 col-xl-3 order-2 order-xl-1">
<div class="row">
<!--both these sections expand for better mobile readability. Though for the best look on desktop, best to keep things short/around the size they are now-->
<!--music player-->
<div class="col-12 col-sm-6 col-xl-12 order-2 order-xl-1">
<div class="card text-white rounded-0 mb-3" style="min-height:230px;border-color:#000000;max-width:270px;
margin-left:auto;margin-right:auto;background-color:rgba(19, 17, 27,0.90);box-shadow:3px 3px 5px rgba(0,0,0,0.3)">
<!--header-->
<div class="card border-0 rounded-0 text-white w-100 px-1" style="height:25px;background-color:#000000">
<div class="card-body d-flex my-auto">
<span class="my-auto">now playing...</span>
<span class="ml-auto my-auto">
<i class="fa-light fa-circle"></i>
<i class="fa-solid fa-circle"></i>
</span>
</div>
</div>
<div class="card-body p-2" style="margin-top:auto;margin-bottom:auto;text-align:center">
<!--album image
(I made it the bg image since the track featured in this layout doesn't have an album release. at least that I know of)-->
<div class="card bg-transparent border-0 rounded-0 mt-2" style="min-height:100px;width:100px;margin-left:auto;margin-right:auto;
background-image:url(https://images.unsplash.com/photo-1503389152951-9f343605f61e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2099&q=80);
background-size:cover"></div>
<!--song title-->
<span style="letter-spacing:1px">among the stars - Cliff Martinez</span>
<hr class="my-1" style="border-color:#698bc7">
<div class="card bg-transparent border-0 rounded-0" style="font-size:1.5em;letter-spacing:7px;overflow:hidden">
<!-- HOW TO CHANGE THE LINK/SONG
- Go to youtube and find the song you want to use
- the page link has a string of random letters & numbers at the end of it.
(eg: https://www.youtube.com/watch?v= [here] )
- copy that string of letters and paste it between embed/ and ?controls-0 in the embed link
(eg: src="https://www.youtube-nocookie.com/embed/ [here] ?controls=0" )
-->
<iframe src="https://www.youtube-nocookie.com/embed/oqTFULNFLGI?controls=0"
frameborder="0"
style="position:absolute;right:px;top:-80px;width:250px;height:200px;z-index:1;opacity:0.001"></iframe>
<!--button decor-->
<span><i class="fa-thin fa-shuffle"></i>
<i class="fa-solid fa-backward-step"></i>
<i class="fa-solid fa-play-pause"></i>
<i class="fa-solid fa-forward-step"></i>
<i class="fa-thin fa-repeat"></i></span>
</div>
</div>
</div>
</div>
<!--end music player-->
<!--neofetch / basic info-->
<div class="col-12 col-sm-6 col-xl-12 order-1 order-xl-2">
<div class="card text-white rounded-0 mb-3 mb-sm-0" style="min-height:400px;border-color:#000000;max-width:270px;margin-left:auto;margin-right:auto;background-color:rgba(19, 17, 27,0.90);box-shadow:3px 3px 5px rgba(0,0,0,0.3)">
<!--header-->
<div class="card border-0 rounded-0 text-white w-100 px-1" style="height:25px;background-color:#000000">
<div class="card-body d-flex my-auto">
<span class="my-auto">$ neofetch</span>
<span class="ml-auto my-auto">
<i class="fa-light fa-circle"></i>
<i class="fa-solid fa-circle"></i>
</span>
</div>
</div>
<!--character thumbnail-->
<div class="card bg-transparent border-0 rounded-0 mt-2" style="min-height:150px;width:150px;margin-left:auto;margin-right:auto;
background-image:url(#);
background-size:cover"></div>
<!--basic info-->
<div class="card-body p-2">
<span style="color:#698bc7">Name</span> @ <span style="color:#698bc7">ToyhouseOS</span>
<hr class="my-1" style="border-color:#698bc7">
<div class="badge rounded-0" style="background-color:#698bc7;">gender</div> text<br>
<div class="badge rounded-0" style="background-color:#698bc7;">Pronouns</div> pro/noun<br>
<div class="badge rounded-0" style="background-color:#698bc7;">Species/race</div> text<br>
<div class="badge rounded-0" style="background-color:#698bc7;">Age</div> text<br>
<div class="badge rounded-0" style="background-color:#698bc7;">Birthday</div> text<br>
<div class="badge rounded-0" style="background-color:#698bc7;">Job/role</div> text<br>
<!--colors section-->
<p style="text-align:center;font-size:1.5em">
<i class="fa-solid fa-rhombus" style="color:#698bc7"></i>
<i class="fa-solid fa-rhombus" style="color:#b9e7ff"></i>
<i class="fa-solid fa-rhombus" style="color:#ffffff"></i>
<i class="fa-solid fa-rhombus" style="color:#7965b8"></i>
<i class="fa-solid fa-rhombus" style="color:#5d1ba8"></i>
</p>
</div>
</div>
</div>
<!--end neofetch / basic info-->
</div>
</div>
<!--end player & basic info-->
<!--main info and images section-->
<div class="col-12 col-xl-9 order-1 order-xl-2">
<!--character name header-->
<div class="card text-white rounded-0 mb-3" style="min-height:90px;border-color:#000000;
background-color:#000000;box-shadow:3px 3px 5px rgba(0,0,0,0.3)">
<div class="card-body d-flex flex-wrap my-auto p-2">
<span style="font-size:3em">
Character name
</span>
<span class="ml-auto my-auto" style="font-size:1.25em">
nickname, title, etc.
</span>
</div>
</div>
<!--end character name header-->
<!--main info + pics & quote-->
<div class="row mb-3 mb-xl-0">
<!--main info section-->
<div class="col-12 col-lg-8 order-2 order-lg-1">
<!--breif intro-->
<div class="card text-white rounded-0 mb-3" style="min-height:140px;border-color:#000000;
background-color:rgba(19, 17, 27,0.90);box-shadow:3px 3px 5px rgba(0,0,0,0.3)">
<div class="card-body p-2" style="margin-top:auto;margin-bottom:auto">
<p>This section can expand but I suggest keeping it breif for the best look.</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. Duis porta eros et velit blandit dapibus.</p>
</div>
</div>
<!--end breif intro-->
<!--info window-->
<div class="card text-white rounded-0 mb-3 mb-lg-0" style="height:384px;border-color:#000000;
background-color:rgba(19, 17, 27,0.90);box-shadow:3px 3px 5px rgba(0,0,0,0.3)">
<!--navs-->
<div class="card-header p-1" style="background-color:#000000;border-width:0px">
<ul class="nav nav-pills d-flex flex-wrap">
<li class="nav-item">
<a class="nav-link text-white active m-1" style="background-color:#1d1a2a;border-radius:0px" data-toggle="tab" href="#trivia">
Trivia <i class="fa-solid fa-xmark ml-3 faded"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-white m-1" style="background-color:#1d1a2a;border-radius:0px" data-toggle="tab" href="#summary">
Summary <i class="fa-solid fa-xmark ml-3 faded"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-white m-1" style="background-color:#1d1a2a;border-radius:0px" data-toggle="tab" href="#links">
Links <i class="fa-solid fa-xmark ml-3 faded"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-white m-1" style="background-color:#1d1a2a;border-radius:0px"data-toggle="tab" href="#design"> Design <i class="fa-solid fa-xmark ml-3 faded"></i>
</a>
</li>
</ul>
</div>
<!--end navs-->
<!--main info window-->
<div class="card-body table-responsive p-2">
<div class="tab-content">
<!--trivia-->
<div class="tab-pane container active" id="trivia">
<div class="row">
<!--main text-->
<div class="col-12 col-md-7 mb-2 mb-lg-0">
<span style="font-size:1.5em">Trivia</span>
<hr class="my-1" style="border-color:#698bc7">
<p><i class="fa-regular fa-chevron-right"></i>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p><i class="fa-regular fa-chevron-right"></i> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p><i class="fa-regular fa-chevron-right"></i> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
<p><i class="fa-regular fa-chevron-right"></i> It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<!--likes/dislikes section-->
<div class="col-12 col-md-5">
<div class="card rounded-0" style="position:sticky;top:10px;border-color:#698bc7;background-color:#1d1a2a;">
<div class="card-body p-2">
<span style="font-size:1.25em;letter-spacing:1px">Likes</span><br>
<i class="fa-regular fa-chevron-right"></i> like <br>
<i class="fa-regular fa-chevron-right"></i> like <br>
<i class="fa-regular fa-chevron-right"></i> like <br>
<hr class="my-1" style="border-color:#698bc7">
<span style="font-size:1.25em;letter-spacing:1px">Dislikes</span><br>
<i class="fa-regular fa-chevron-right"></i> dislike <br>
<i class="fa-regular fa-chevron-right"></i> dislike <br>
<i class="fa-regular fa-chevron-right"></i> dislike <br>
</div>
</div>
</div>
</div>
</div>
<!--end trivia-->
<!--summary-->
<div class="tab-pane container fade" id="summary">
<span style="font-size:1.5em">Summary</span>
<hr class="my-1" style="border-color:#698bc7">
<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. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<span style="font-size:1.25em">subheader</span>
<hr class="my-1" style="border-color:#698bc7">
<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. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
<!--end summary-->
<!--links-->
<div class="tab-pane container fade" id="links">
<div class="row">
<!--link 1-->
<div class="col-12 col-md-4">
<div class="card bg-transparent rounded-0 border-0" style="position:sticky;top:10px;border-color:#698bc7">
<div class="card-body">
<!--image-->
<div class="card bg-transparent border-0 rounded-0 mt-2" style="min-height:150px;width:150px;margin-left:auto;margin-right:auto;
background-image:url(#);
background-size:cover"></div>
</div>
<a href="#" style="font-size:1.25em;letter-spacing:1px;color:#698bc7">Character name</a>
<br>
<span>Relationship status</span>
</div>
</div>
<!--description-->
<div class="col-12 col-md-8 mb-3">
<hr class="my-1 d-block d-lg-none" style="border-color:#698bc7">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</div>
<!--link 2-->
<div class="col-12 col-md-4">
<div class="card bg-transparent rounded-0 border-0" style="position:sticky;top:10px;border-color:#698bc7">
<div class="card-body">
<!--image-->
<div class="card bg-transparent border-0 rounded-0 mt-2" style="min-height:150px;width:150px;margin-left:auto;margin-right:auto;
background-image:url(#);
background-size:cover"></div>
</div>
<a href="#" style="font-size:1.25em;letter-spacing:1px;color:#698bc7">Character name</a>
<br>
<span>Relationship status</span>
</div>
</div>
<!--description-->
<div class="col-12 col-md-8 mb-3">
<hr class="my-1" style="border-color:#698bc7">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</div>
<!--link 3-->
<div class="col-12 col-md-4">
<div class="card bg-transparent rounded-0 border-0" style="position:sticky;top:10px;border-color:#698bc7">
<div class="card-body">
<!--image-->
<div class="card bg-transparent border-0 rounded-0 mt-2" style="min-height:150px;width:150px;margin-left:auto;margin-right:auto;
background-image:url(#);
background-size:cover"></div>
</div>
<a href="#" style="font-size:1.25em;letter-spacing:1px;color:#698bc7">Character name</a>
<br>
<span>Relationship status</span>
</div>
</div>
<!--description-->
<div class="col-12 col-md-8 mb-2">
<hr class="my-1" style="border-color:#698bc7">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</div>
</div>
</div>
<!--end links-->
<!--design-->
<div class="tab-pane container fade" id="design">
<div class="row">
<!--image-->
<div class="col-12 col-md-7">
<div class="card bg-transparent rounded-0 border-0 mb-3" style="position:sticky;top:10px;border-color:#000000">
<div class="card-body">
<img src="#" class="img-fluid">
</div>
<!--credit and/or full image link-->
<span>image / <a href="#" style="color:#698bc7">artistcredit.png</a></span>
</div>
</div>
<!--design notes-->
<div class="col-12 col-md-5 mb-2 mb-lg-0">
<span style="font-size:1.5em">Design</span>
<hr class="my-1" style="border-color:#698bc7">
<!--basics-->
<div class="badge rounded-0" style="background-color:#698bc7;">Trait</div>
text<br>
<div class="badge rounded-0" style="background-color:#698bc7;">Trait</div>
text<br>
<div class="badge rounded-0" style="background-color:#698bc7;">Trait</div>
text<br>
<!--main notes-->
<hr class="my-1" style="border-color:#698bc7">
<p><i class="fa-regular fa-chevron-right"></i>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p><i class="fa-regular fa-chevron-right"></i>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p><i class="fa-regular fa-chevron-right"></i>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</div>
</div>
</div>
<!--end design-->
</div>
</div>
<!--endmain info window-->
</div>
<!--end info window-->
</div>
<!--end main info section-->
<!--pics & quote-->
<div class="col-12 col-lg-4 order-1 order-lg-2">
<div class="row">
<!--image window 1-->
<div class="col-12 col-sm-6 col-lg-12">
<div class="card rounded-0 mb-3 w-100" style="height:179px;border-color:#000000;max-width:270px;
margin-left:auto;margin-right:auto;background-color:rgba(19, 17, 27,0.90);box-shadow:3px 3px 5px rgba(0,0,0,0.3)">
<div class="card border-0 rounded-0 text-white w-100 px-1" style="height:25px;background-color:#000000">
<div class="card-body d-flex">
<!--credit-->
<span class="my-auto">image / <a href="#" style="color:#698bc7">artistcredit.png</a></span>
<span class="ml-auto my-auto">
<i class="fa-light fa-circle"></i>
<i class="fa-solid fa-circle"></i>
</span>
</div>
</div>
<!--image-->
<div class="w-100 h-100" style="
background-image:url(#);
background-size:400px;
background-position:center"></div>
</div>
</div>
<!--end image window 1-->
<!--quote-->
<div class="col-12 col-sm-6 col-lg-12 d-block d-sm-none d-lg-block">
<div class="card text-white rounded-0 mb-3 w-100" style="min-height:150px;border-color:#000000;max-width:270px;margin-left:auto;margin-right:auto;background-color:rgba(19, 17, 27,0.90);box-shadow:3px 3px 5px rgba(0,0,0,0.3)">
<div class="card-body p-2" style="margin-top:auto;margin-bottom:auto;text-align:center;font-size:1.5em">
"character quote. <br> Section can expand but it looks best when short"
</div>
</div>
</div>
<!--end quote-->
<!--image window 2-->
<div class="col-12 col-sm-6 col-lg-12">
<div class="card rounded-0 mb-3 mb-lg-0 w-100" style="height:179px;border-color:#000000;max-width:270px;margin-left:auto;margin-right:auto;background-color:rgba(19, 17, 27,0.90);box-shadow:3px 3px 5px rgba(0,0,0,0.3)">
<div class="card border-0 rounded-0 text-white w-100 px-1" style="height:25px;border-width:1px;background-color:#000000">
<div class="card-body d-flex">
<!--credit-->
<span class="my-auto">image / <a href="#" style="color:#698bc7">artistcredit.png</a></span>
<span class="ml-auto my-auto">
<i class="fa-light fa-circle"></i>
<i class="fa-solid fa-circle"></i>
</span>
</div>
</div>
<!--image-->
<div class="w-100 h-100" style="
background-image:url(#);
background-size:600px;
background-position:center"></div>
</div>
</div>
<!--end image window 2-->
</div>
</div>
<!--end pics & quote-->
</div>
<!--end main info + pics & quote-->
</div>
<!--end main info and images section-->
</div>
</div>
<!--End Windows-->
<!--taskbar-->
<div class="row" style="height:30px">
<!--left section-->
<div class="col-12 col-lg-8">
<div class="card border-0 rounded-0 text-white px-3 w-100 h-100" style="background-color:#000000">
<span style="margin-top:auto;margin-bottom:auto">
<i class="fa-solid fa-house-chimney-blank" style="color:#698bc7"></i>
<span class="faded">|</span>
<!--Credit. You may move it, but please do not delete/remove-->
HTML - <a href="https://toyhou.se/17430239.-f2u-11pm-am" style="color:#698bc7">Jade-Everstone</a>
<span class="faded">|</span>
Layout - <a href="https://toyhou.se/Togo" style="color:#698bc7">Togo</a>
<span class="faded">|</span>
BG - <a href="https://unsplash.com/photos/cgEbku0EbOg" style="color:#698bc7">Unsplash</a>
</span>
</div>
</div>
<!--end left section-->
<!--right section-->
<div class="col-12 col-lg-4">
<div class="card border-0 rounded-0 text-white px-3 w-100 h-100" style="background-color:#000000">
<span style="margin-top:auto;margin-bottom:auto;text-align:right">
11:00pm
<span class="faded">|</span>
01 Jan 20XX
<span class="faded">|</span>
<i class="fa-solid fa-battery-three-quarters"></i> 78%
</span>
</div>
</div>
<!--end right section-->
</div>
<!--end taskbar-->
</div>
</div>
Manual Select
<!DOCTYPE HTML>
<!--Rules:
11pm
For the Coders Quarters August 2022 challenge
Layout provided by Togo: https://toyhou.se/Togo
You may
-frankenstein with other codes (as long as the creator of said code allows it)
-edit/change as much as you need (example: making character codes into user codes, vice-versa)
You may not
-Redistribute, resell, and/or claim its yours
-Remove credit (you're allowed to move & edit it though, just keep it visible)
Misc Notes:
-When editing, remember to turn WYSIWYG off! My codes may break otherwise
-Some basic html knowledge is recommended for editing
Default Colors:
-text: text-white
-backgrounds: rgba(19, 17, 27,0.90)
-tabs & likes/dislikes bg: #1d1a2a
-borders, headers, 'taskbar': #000000
-dividers, links, accents: #698bc7
Change the colors: Ctrl+f and search for the color you want to change.
-->
<div class="container-fluid" style="max-width:1250px">
<!--background / 'wallpaper'-->
<div class="card rounded-0" style="
background-image:url(https://images.unsplash.com/photo-1503389152951-9f343605f61e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2099&q=80);
background-size:cover;
background-position:bottom;
border-color:#000000;
box-shadow:3px 3px 5px rgba(0,0,0,0.3)">
<!--Windows-->
<div class="container p-3" style="max-width:1200px">
<div class="row">
<!--player & basic info-->
<div class="col-12 col-xl-3 order-2 order-xl-1">
<div class="row">
<!--both these sections expand for better mobile readability. Though for the best look on desktop, best to keep things short/around the size they are now-->
<!--music player-->
<div class="col-12 col-sm-6 col-xl-12 order-2 order-xl-1">
<div class="card text-white rounded-0 mb-3" style="min-height:230px;border-color:#000000;max-width:270px;
margin-left:auto;margin-right:auto;background-color:rgba(19, 17, 27,0.90);box-shadow:3px 3px 5px rgba(0,0,0,0.3)">
<!--header-->
<div class="card border-0 rounded-0 text-white w-100 px-1" style="height:25px;background-color:#000000">
<div class="card-body d-flex my-auto">
<span class="my-auto">now playing...</span>
<span class="ml-auto my-auto">
<i class="fa-light fa-circle"></i>
<i class="fa-solid fa-circle"></i>
</span>
</div>
</div>
<div class="card-body p-2" style="margin-top:auto;margin-bottom:auto;text-align:center">
<!--album image
(I made it the bg image since the track featured in this layout doesn't have an album release. at least that I know of)-->
<div class="card bg-transparent border-0 rounded-0 mt-2" style="min-height:100px;width:100px;margin-left:auto;margin-right:auto;
background-image:url(https://images.unsplash.com/photo-1503389152951-9f343605f61e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2099&q=80);
background-size:cover"></div>
<!--song title-->
<span style="letter-spacing:1px">among the stars - Cliff Martinez</span>
<hr class="my-1" style="border-color:#698bc7">
<div class="card bg-transparent border-0 rounded-0" style="font-size:1.5em;letter-spacing:7px;overflow:hidden">
<!-- HOW TO CHANGE THE LINK/SONG
- Go to youtube and find the song you want to use
- the page link has a string of random letters & numbers at the end of it.
(eg: https://www.youtube.com/watch?v= [here] )
- copy that string of letters and paste it between embed/ and ?controls-0 in the embed link
(eg: src="https://www.youtube-nocookie.com/embed/ [here] ?controls=0" )
-->
<iframe src="https://www.youtube-nocookie.com/embed/oqTFULNFLGI?controls=0"
frameborder="0"
style="position:absolute;right:px;top:-80px;width:250px;height:200px;z-index:1;opacity:0.001"></iframe>
<!--button decor-->
<span><i class="fa-thin fa-shuffle"></i>
<i class="fa-solid fa-backward-step"></i>
<i class="fa-solid fa-play-pause"></i>
<i class="fa-solid fa-forward-step"></i>
<i class="fa-thin fa-repeat"></i></span>
</div>
</div>
</div>
</div>
<!--end music player-->
<!--neofetch / basic info-->
<div class="col-12 col-sm-6 col-xl-12 order-1 order-xl-2">
<div class="card text-white rounded-0 mb-3 mb-sm-0" style="min-height:400px;border-color:#000000;max-width:270px;margin-left:auto;margin-right:auto;background-color:rgba(19, 17, 27,0.90);box-shadow:3px 3px 5px rgba(0,0,0,0.3)">
<!--header-->
<div class="card border-0 rounded-0 text-white w-100 px-1" style="height:25px;background-color:#000000">
<div class="card-body d-flex my-auto">
<span class="my-auto">$ neofetch</span>
<span class="ml-auto my-auto">
<i class="fa-light fa-circle"></i>
<i class="fa-solid fa-circle"></i>
</span>
</div>
</div>
<!--character thumbnail-->
<div class="card bg-transparent border-0 rounded-0 mt-2" style="min-height:150px;width:150px;margin-left:auto;margin-right:auto;
background-image:url(#);
background-size:cover"></div>
<!--basic info-->
<div class="card-body p-2">
<span style="color:#698bc7">Name</span> @ <span style="color:#698bc7">ToyhouseOS</span>
<hr class="my-1" style="border-color:#698bc7">
<div class="badge rounded-0" style="background-color:#698bc7;">gender</div> text<br>
<div class="badge rounded-0" style="background-color:#698bc7;">Pronouns</div> pro/noun<br>
<div class="badge rounded-0" style="background-color:#698bc7;">Species/race</div> text<br>
<div class="badge rounded-0" style="background-color:#698bc7;">Age</div> text<br>
<div class="badge rounded-0" style="background-color:#698bc7;">Birthday</div> text<br>
<div class="badge rounded-0" style="background-color:#698bc7;">Job/role</div> text<br>
<!--colors section-->
<p style="text-align:center;font-size:1.5em">
<i class="fa-solid fa-rhombus" style="color:#698bc7"></i>
<i class="fa-solid fa-rhombus" style="color:#b9e7ff"></i>
<i class="fa-solid fa-rhombus" style="color:#ffffff"></i>
<i class="fa-solid fa-rhombus" style="color:#7965b8"></i>
<i class="fa-solid fa-rhombus" style="color:#5d1ba8"></i>
</p>
</div>
</div>
</div>
<!--end neofetch / basic info-->
</div>
</div>
<!--end player & basic info-->
<!--main info and images section-->
<div class="col-12 col-xl-9 order-1 order-xl-2">
<!--character name header-->
<div class="card text-white rounded-0 mb-3" style="min-height:90px;border-color:#000000;
background-color:#000000;box-shadow:3px 3px 5px rgba(0,0,0,0.3)">
<div class="card-body d-flex flex-wrap my-auto p-2">
<span style="font-size:3em">
Character name
</span>
<span class="ml-auto my-auto" style="font-size:1.25em">
nickname, title, etc.
</span>
</div>
</div>
<!--end character name header-->
<!--main info + pics & quote-->
<div class="row mb-3 mb-xl-0">
<!--main info section-->
<div class="col-12 col-lg-8 order-2 order-lg-1">
<!--breif intro-->
<div class="card text-white rounded-0 mb-3" style="min-height:140px;border-color:#000000;
background-color:rgba(19, 17, 27,0.90);box-shadow:3px 3px 5px rgba(0,0,0,0.3)">
<div class="card-body p-2" style="margin-top:auto;margin-bottom:auto">
<p>This section can expand but I suggest keeping it breif for the best look.</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. Duis porta eros et velit blandit dapibus.</p>
</div>
</div>
<!--end breif intro-->
<!--info window-->
<div class="card text-white rounded-0 mb-3 mb-lg-0" style="height:384px;border-color:#000000;
background-color:rgba(19, 17, 27,0.90);box-shadow:3px 3px 5px rgba(0,0,0,0.3)">
<!--navs-->
<div class="card-header p-1" style="background-color:#000000;border-width:0px">
<ul class="nav nav-pills d-flex flex-wrap">
<li class="nav-item">
<a class="nav-link text-white active m-1" style="background-color:#1d1a2a;border-radius:0px" data-toggle="tab" href="#trivia">
Trivia <i class="fa-solid fa-xmark ml-3 faded"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-white m-1" style="background-color:#1d1a2a;border-radius:0px" data-toggle="tab" href="#summary">
Summary <i class="fa-solid fa-xmark ml-3 faded"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-white m-1" style="background-color:#1d1a2a;border-radius:0px" data-toggle="tab" href="#links">
Links <i class="fa-solid fa-xmark ml-3 faded"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-white m-1" style="background-color:#1d1a2a;border-radius:0px"data-toggle="tab" href="#design"> Design <i class="fa-solid fa-xmark ml-3 faded"></i>
</a>
</li>
</ul>
</div>
<!--end navs-->
<!--main info window-->
<div class="card-body table-responsive p-2">
<div class="tab-content">
<!--trivia-->
<div class="tab-pane container active" id="trivia">
<div class="row">
<!--main text-->
<div class="col-12 col-md-7 mb-2 mb-lg-0">
<span style="font-size:1.5em">Trivia</span>
<hr class="my-1" style="border-color:#698bc7">
<p><i class="fa-regular fa-chevron-right"></i>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p><i class="fa-regular fa-chevron-right"></i> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p><i class="fa-regular fa-chevron-right"></i> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
<p><i class="fa-regular fa-chevron-right"></i> It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<!--likes/dislikes section-->
<div class="col-12 col-md-5">
<div class="card rounded-0" style="position:sticky;top:10px;border-color:#698bc7;background-color:#1d1a2a;">
<div class="card-body p-2">
<span style="font-size:1.25em;letter-spacing:1px">Likes</span><br>
<i class="fa-regular fa-chevron-right"></i> like <br>
<i class="fa-regular fa-chevron-right"></i> like <br>
<i class="fa-regular fa-chevron-right"></i> like <br>
<hr class="my-1" style="border-color:#698bc7">
<span style="font-size:1.25em;letter-spacing:1px">Dislikes</span><br>
<i class="fa-regular fa-chevron-right"></i> dislike <br>
<i class="fa-regular fa-chevron-right"></i> dislike <br>
<i class="fa-regular fa-chevron-right"></i> dislike <br>
</div>
</div>
</div>
</div>
</div>
<!--end trivia-->
<!--summary-->
<div class="tab-pane container fade" id="summary">
<span style="font-size:1.5em">Summary</span>
<hr class="my-1" style="border-color:#698bc7">
<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. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<span style="font-size:1.25em">subheader</span>
<hr class="my-1" style="border-color:#698bc7">
<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. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
<!--end summary-->
<!--links-->
<div class="tab-pane container fade" id="links">
<div class="row">
<!--link 1-->
<div class="col-12 col-md-4">
<div class="card bg-transparent rounded-0 border-0" style="position:sticky;top:10px;border-color:#698bc7">
<div class="card-body">
<!--image-->
<div class="card bg-transparent border-0 rounded-0 mt-2" style="min-height:150px;width:150px;margin-left:auto;margin-right:auto;
background-image:url(#);
background-size:cover"></div>
</div>
<a href="#" style="font-size:1.25em;letter-spacing:1px;color:#698bc7">Character name</a>
<br>
<span>Relationship status</span>
</div>
</div>
<!--description-->
<div class="col-12 col-md-8 mb-3">
<hr class="my-1 d-block d-lg-none" style="border-color:#698bc7">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</div>
<!--link 2-->
<div class="col-12 col-md-4">
<div class="card bg-transparent rounded-0 border-0" style="position:sticky;top:10px;border-color:#698bc7">
<div class="card-body">
<!--image-->
<div class="card bg-transparent border-0 rounded-0 mt-2" style="min-height:150px;width:150px;margin-left:auto;margin-right:auto;
background-image:url(#);
background-size:cover"></div>
</div>
<a href="#" style="font-size:1.25em;letter-spacing:1px;color:#698bc7">Character name</a>
<br>
<span>Relationship status</span>
</div>
</div>
<!--description-->
<div class="col-12 col-md-8 mb-3">
<hr class="my-1" style="border-color:#698bc7">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</div>
<!--link 3-->
<div class="col-12 col-md-4">
<div class="card bg-transparent rounded-0 border-0" style="position:sticky;top:10px;border-color:#698bc7">
<div class="card-body">
<!--image-->
<div class="card bg-transparent border-0 rounded-0 mt-2" style="min-height:150px;width:150px;margin-left:auto;margin-right:auto;
background-image:url(#);
background-size:cover"></div>
</div>
<a href="#" style="font-size:1.25em;letter-spacing:1px;color:#698bc7">Character name</a>
<br>
<span>Relationship status</span>
</div>
</div>
<!--description-->
<div class="col-12 col-md-8 mb-2">
<hr class="my-1" style="border-color:#698bc7">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</div>
</div>
</div>
<!--end links-->
<!--design-->
<div class="tab-pane container fade" id="design">
<div class="row">
<!--image-->
<div class="col-12 col-md-7">
<div class="card bg-transparent rounded-0 border-0 mb-3" style="position:sticky;top:10px;border-color:#000000">
<div class="card-body">
<img src="#" class="img-fluid">
</div>
<!--credit and/or full image link-->
<span>image / <a href="#" style="color:#698bc7">artistcredit.png</a></span>
</div>
</div>
<!--design notes-->
<div class="col-12 col-md-5 mb-2 mb-lg-0">
<span style="font-size:1.5em">Design</span>
<hr class="my-1" style="border-color:#698bc7">
<!--basics-->
<div class="badge rounded-0" style="background-color:#698bc7;">Trait</div>
text<br>
<div class="badge rounded-0" style="background-color:#698bc7;">Trait</div>
text<br>
<div class="badge rounded-0" style="background-color:#698bc7;">Trait</div>
text<br>
<!--main notes-->
<hr class="my-1" style="border-color:#698bc7">
<p><i class="fa-regular fa-chevron-right"></i>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p><i class="fa-regular fa-chevron-right"></i>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p><i class="fa-regular fa-chevron-right"></i>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</div>
</div>
</div>
<!--end design-->
</div>
</div>
<!--endmain info window-->
</div>
<!--end info window-->
</div>
<!--end main info section-->
<!--pics & quote-->
<div class="col-12 col-lg-4 order-1 order-lg-2">
<div class="row">
<!--image window 1-->
<div class="col-12 col-sm-6 col-lg-12">
<div class="card rounded-0 mb-3 w-100" style="height:179px;border-color:#000000;max-width:270px;
margin-left:auto;margin-right:auto;background-color:rgba(19, 17, 27,0.90);box-shadow:3px 3px 5px rgba(0,0,0,0.3)">
<div class="card border-0 rounded-0 text-white w-100 px-1" style="height:25px;background-color:#000000">
<div class="card-body d-flex">
<!--credit-->
<span class="my-auto">image / <a href="#" style="color:#698bc7">artistcredit.png</a></span>
<span class="ml-auto my-auto">
<i class="fa-light fa-circle"></i>
<i class="fa-solid fa-circle"></i>
</span>
</div>
</div>
<!--image-->
<div class="w-100 h-100" style="
background-image:url(#);
background-size:400px;
background-position:center"></div>
</div>
</div>
<!--end image window 1-->
<!--quote-->
<div class="col-12 col-sm-6 col-lg-12 d-block d-sm-none d-lg-block">
<div class="card text-white rounded-0 mb-3 w-100" style="min-height:150px;border-color:#000000;max-width:270px;margin-left:auto;margin-right:auto;background-color:rgba(19, 17, 27,0.90);box-shadow:3px 3px 5px rgba(0,0,0,0.3)">
<div class="card-body p-2" style="margin-top:auto;margin-bottom:auto;text-align:center;font-size:1.5em">
"character quote. <br> Section can expand but it looks best when short"
</div>
</div>
</div>
<!--end quote-->
<!--image window 2-->
<div class="col-12 col-sm-6 col-lg-12">
<div class="card rounded-0 mb-3 mb-lg-0 w-100" style="height:179px;border-color:#000000;max-width:270px;margin-left:auto;margin-right:auto;background-color:rgba(19, 17, 27,0.90);box-shadow:3px 3px 5px rgba(0,0,0,0.3)">
<div class="card border-0 rounded-0 text-white w-100 px-1" style="height:25px;border-width:1px;background-color:#000000">
<div class="card-body d-flex">
<!--credit-->
<span class="my-auto">image / <a href="#" style="color:#698bc7">artistcredit.png</a></span>
<span class="ml-auto my-auto">
<i class="fa-light fa-circle"></i>
<i class="fa-solid fa-circle"></i>
</span>
</div>
</div>
<!--image-->
<div class="w-100 h-100" style="
background-image:url(#);
background-size:600px;
background-position:center"></div>
</div>
</div>
<!--end image window 2-->
</div>
</div>
<!--end pics & quote-->
</div>
<!--end main info + pics & quote-->
</div>
<!--end main info and images section-->
</div>
</div>
<!--End Windows-->
<!--taskbar-->
<div class="row" style="height:30px">
<!--left section-->
<div class="col-12 col-lg-8">
<div class="card border-0 rounded-0 text-white px-3 w-100 h-100" style="background-color:#000000">
<span style="margin-top:auto;margin-bottom:auto">
<i class="fa-solid fa-house-chimney-blank" style="color:#698bc7"></i>
<span class="faded">|</span>
<!--Credit. You may move it, but please do not delete/remove-->
HTML - <a href="https://toyhou.se/17430239.-f2u-11pm-am" style="color:#698bc7">Jade-Everstone</a>
<span class="faded">|</span>
Layout - <a href="https://toyhou.se/Togo" style="color:#698bc7">Togo</a>
<span class="faded">|</span>
BG - <a href="https://unsplash.com/photos/cgEbku0EbOg" style="color:#698bc7">Unsplash</a>
</span>
</div>
</div>
<!--end left section-->
<!--right section-->
<div class="col-12 col-lg-4">
<div class="card border-0 rounded-0 text-white px-3 w-100 h-100" style="background-color:#000000">
<span style="margin-top:auto;margin-bottom:auto;text-align:right">
11:00pm
<span class="faded">|</span>
01 Jan 20XX
<span class="faded">|</span>
<i class="fa-solid fa-battery-three-quarters"></i> 78%
</span>
</div>
</div>
<!--end right section-->
</div>
<!--end taskbar-->
</div>
</div>