<!--
Magic Star - toyhouse code by 3LeggedPoet
This code uses two custom colours. By default these are:
backgrounds: #247485
text and embellishments: #ffffff
You can adjust the colours of the .svg images used in the background of some of the divs!
To do so, switch the "-ffffff" in the file name to your desired colour hexcode, same as
you would the text and background colours :)
-->
<!-- this line is where you adjust the text colour for the full code! -->
<div class="row px-4" style="width:85%;margin:auto;color:#ffffff">
<div class="d-none d-md-block" style="background-image:url(https://svgsilh.com/svg/1076611-ffffff.svg);background-size:contain;background-repeat:no-repeat;position:absolute;width:40%;height:40%;right:3%;bottom:320px;opacity:0.2"></div>
<div class="col-5 my-4 py-5 d-none d-md-block">
<div class="my-5 py-5" style="background:#247485;margin:auto;width:60%; height:90%">
<div style="height:100%;width:90%;background-image:url(https://svgsilh.com/svg/308017-ffffff.svg);background-position:top;background-size:contain;opacity:0.2;position:absolute;background-repeat:no-repeat"></div>
<div style="background-color:rgba(255,255,255,0.25);width:80%;height:99%;margin:auto">
</div>
</div>
</div>
<!-- character splash image - you may have to adjust the values of left and max-width to your own preference -->
<!-- this is not shown on mobile! -->
<img class ="d-none d-md-block" src="URL HERE" style="position:absolute;left:60px;max-width:50%;z-index:100;">
<!-- this version is shown ONLY on mobile! -->
<img class ="d-md-none" src="URL HERE" style="max-width:90%;z-index:100;margin:auto">
<div class="col mb-5">
<div class="row mt-5" style="background:#247485;height:50px;width:80%;margin:auto;">
<!-- background pattern -->
<div style="overflow:hidden;height:50px;width:80%;background-image:url(https://svgsilh.com/svg/1904262-ffffff.svg);background-position: center;background-size:cover;opacity:0.2;position:absolute;left:10%;"></div>
<div class="my-1 row w-100" style="margin:auto;">
<i class="d-none d-sm-block fa-solid fa-star ml-3" style="margin:auto;position:relative;top:-5px"></i>
<hr class="d-none d-md-block col ml-3 mr-4" style="border-color:#ffffff;position:relative;top:4px">
<!-- character name -->
<!-- if your character's name is too long for the box, you can delete the two <hr...> either side of this <h1...> -->
<h1 class="col text-center" style="font-family:Garamond,serif;font-size:24pt;border-top:double;border-bottom:double;">
CHARACTER
</h1>
<hr class="d-none d-md-block col mr-3 ml-4" style="border-color:#ffffff;position:relative;top:4px">
<i class="d-none d-sm-block fa-solid fa-star mr-3" style="margin:auto;position:relative;top:-5px"></i>
</div>
</div>
<!-- quote -->
<div class="m-3 row font-italic text-center">
<p style="margin:auto;font-size:12pt;font-weight:lighter;letter-spacing:0.9pt;">
"This is a cool quote that sums up your character."
</p>
</div>
<div class="row my-2 px-4 pt-3 tab-content container-fluid" style="background:#247485;width:90%;margin:auto;">
<!-- tab one -->
<div class="px-3 tab-pane fade active show" id="one" style="background-color:rgba(255,255,255,0.25);border-top:1px solid #ffffff;border-bottom:1px solid #ffffff;width:100%;">
<p style="line-height: 18pt">
<!-- first letter - for a space, set letter-spacing to 2pt. For no space, set it to -2pt --><br>
<span style="font-size:20pt; font-family:garamond, serif; letter-spacing: -2pt">H</span>
ere is a large textbox.<br>
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.
<br><br>
</p>
</div>
<!-- tab two -->
<div class="px-3 tab-pane fade" id="two" style="width:100%;">
<div class="row">
<!-- columm 1 - likes/dislikes -->
<div class="col px-3">
<p style="line-height: 18pt">
<br>
<span style="font-family:Garamond,serif;font-size:14pt;font-weight:bold">Likes/Dislikes:</span><br>
<i class="fa-solid fa-heart fa-xs"></i> A like.<br>
<i class="fa-solid fa-heart fa-xs"></i> Another like!<br>
<i class="fa-solid fa-heart fa-xs"></i> And another.<br>
<br>
<i class="fa-solid fa-heart-crack fa-xs"></i> Ew, a dislike.<br>
<i class="fa-solid fa-heart-crack fa-xs"></i> Another one?!<br>
<i class="fa-solid fa-heart-crack fa-xs"></i> So many dislikes.<br>
<br>
</p>
</div>
<!-- columm 2 - trivia -->
<div class="col px-3" style="background-color:rgba(255,255,255,0.25);border-top:1px solid #ffffff;border-bottom:1px solid #ffffff;width:100%;">
<p style="line-height: 18pt">
<br>
<span style="font-family:Garamond,serif;font-size:14pt;font-weight:bold">Trivia:</span><br>
<i class="fa-solid fa-star fa-xs"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
<i class="fa-solid fa-star fa-xs"></i> Aenean euismod elementum nisi quis eleifend quam adipiscing vitae.<br>
<br>
</p>
</div>
<!-- columm 3 - trivia continued -->
<div class="col px-3">
<p style="line-height: 18pt">
<br>
<i class="fa-solid fa-star fa-xs"></i> Fermentum iaculis eu non diam phasellus vestibulum lorem sed. Odio facilisis mauris sit amet massa.<br>
<br>
</p>
</div>
</div>
</div>
<!-- tab three -->
<div class="px-3 tab-pane fade" id="three" style="background-color:rgba(255,255,255,0.25);border-top:1px solid #ffffff;border-bottom:1px solid #ffffff;width:100%;">
<p style="line-height: 18pt">
<!-- first letter - for a space, set letter-spacing to 2pt. For no space, set it to -2pt --><br>
<span style="font-size:20pt; font-family:garamond, serif; letter-spacing: 2pt">A</span>
second long text box. Feel free to adjust the contents of these tabs however you like!<br>
Placerat vestibulum lectus mauris ultrices eros in cursus turpis. Suspendisse in est ante in nibh mauris cursus. Sem viverra aliquet eget sit amet. Fermentum iaculis eu non diam phasellus vestibulum lorem sed.
<br><br>
</p>
</div>
<!-- navigation buttons -->
<div class="w-100 justify-content-between">
<div class="col d-none d-md-block" style="max-width:10px"></div>
<i class="d-none d-sm-block fa-solid fa-star" style="margin:auto;"></i>
<hr class="col d-none d-md-block ml-3 mr-4" style="border-color:#ffffff;position:relative;top:10px">
<ul class="nav" style="margin:auto;">
<li class="nav-item active m-2">
<a class="nav-link p-2" data-toggle="pill" href="#one" style="color:#ffffff;font-family:garamond,serif;">I</a>
</li>
<li class="nav-item m-2">
<a class="nav-link p-2" data-toggle="pill" href="#two" style="color:#ffffff;font-family:garamond,serif;">II</a>
</li>
<li class="nav-item m-2">
<a class="nav-link p-2" data-toggle="pill" href="#three" style="color:#ffffff;font-family:garamond,serif;">III</a>
</li>
</ul>
<hr class="col d-none d-md-block mr-3 ml-4" style="border-color:#ffffff;position:relative;top:10px">
<i class="d-none d-sm-block fa-solid fa-star" style="margin:auto;"></i>
<div class="col d-none d-md-block" style="max-width:10px"></div>
</div>
</div>
<div class="row my-3 d-lg-none"></div>
<!-- descriptors -->
<div class="row no-gutters mt-3" style="background:#247485;width:80%;margin:auto;">
<div class="row no-gutters m-3 w-100" style="letter-spacing: 2pt;">
<div class="col-md my-1 text-center justify-content-between small">
<i class="fa-solid fa-star" style="margin:auto;"></i>
ADJECTIVE
<i class="d-lg-none fa-solid fa-star" style="margin:auto;"></i>
</div>
<div class="col-md my-2 d-lg-none"></div>
<div class="col-md my-1 text-center justify-content-between small">
<i class="fa-solid fa-star" style="margin:auto;"></i>
ADJECTIVE
<i class="fa-solid fa-star" style="margin:auto;"></i>
</div>
<div class="col-md my-2 d-lg-none"></div>
<div class="col-md my-1 text-center justify-content-between small">
<i class="d-lg-none fa-solid fa-star" style="margin:auto;"></i>
HARD-ADJECTIVE
<i class="fa-solid fa-star" style="margin:auto;"></i>
</div>
</div>
</div>
<div class="col-md my-3 d-lg-none"></div>
<!-- playlist -->
<div class="row py-3" style="margin:auto;">
<div class="col-xs-7">
<div class="row mb-3" style="background:#247485;height:50px;width:90%;margin:auto;">
<div class="my-1 row" style="margin:auto;">
<h1 class="col text-center" style="font-family:Garamond,serif;font-size:18pt;border-top:double;border-bottom:double;margin-top:5px"> Playlist </h1>
</div>
</div>
<div class="row mx-3 p-1 my-2" style="background:#247485;overflow:hidden">
<div class="col">
<img src="https://svgsilh.com/svg/153302-ffffff.svg" style="position:absolute;opacity:0.2;width:80px;top:-30px;left:-10px;transform: rotate(60deg)">
<!-- to have the playlist act as buttons, replace the keysmash after "/embed/" with the keysmash after "v=" in a youtube URL. e.g. https://www.youtube.com/watch?v=0p_1QSUsbsM to https://www.youtube.com/embed/0p_1QSUsbsM -->
<!--if you just want a list with no play buttons, delete the iframe tags! -->
<iframe src="https://www.youtube.com/embed/0p_1QSUsbsM" class="border-0" style="position: absolute; opacity: 0.001; height: 30px; width: 280px; margin-top: ; margin-left: -20px; z-index: 9999;"></iframe>
<div class="row">
<div class="col">
<p style="letter-spacing: 2pt;font-size:8pt;">
<i class="fa-solid fa-play"></i> <span style="font-family:Garamond,serif;font-size:12pt;letter-spacing: 0pt;font-weight: bold">Song 1</span> - ARTIST
</p>
</div>
</div>
</div>
</div>
<div class="row mx-3 p-1 my-2" style="background:#247485;overflow:hidden">
<div class="col">
<img src="https://svgsilh.com/svg/153302-ffffff.svg" style="position:absolute;opacity:0.2;width:90px;top:-20px;left:20px;transform: rotate(2deg)">
<!-- see notes on the first song tab :) -->
<iframe src="https://www.youtube.com/embed/SSbBvKaM6sk" class="border-0" style="position: absolute; opacity: 0.001; height: 30px; width: 280px; margin-top: ; margin-left: -20px; z-index: 9999;"></iframe>
<div class="row">
<div class="col">
<p style="letter-spacing: 2pt;font-size:8pt">
<i class="fa-solid fa-play"></i> <span style="font-family:Garamond,serif;font-size:12pt;letter-spacing: 0pt;font-weight: bold">Song 2</span> - BLUR
</p>
</div>
</div>
</div>
</div>
<div class="row mx-3 p-1 my-2" style="background:#247485;overflow:hidden">
<div class="col">
<img src="https://svgsilh.com/svg/153302-ffffff.svg" style="position:absolute;opacity:0.2;width:90px;top:8px;left:70px;transform: rotate(-60deg)">
<!-- see notes on the first song tab :) -->
<iframe src="https://www.youtube.com/embed/0p_1QSUsbsM" class="border-0" style="position: absolute; opacity: 0.001; height: 30px; width: 280px; margin-top: ; margin-left: -20px; z-index: 9999;"></iframe>
<div class="row">
<div class="col">
<p style="letter-spacing: 2pt;font-size:8pt">
<i class="fa-solid fa-play"></i> <span style="font-family:Garamond,serif;font-size:12pt;letter-spacing: 0pt;font-weight: bold">Song 3</span> - ARTIST
</p>
</div>
</div>
</div>
</div>
<div class="row mx-3 p-1 my-2" style="background:#247485;overflow:hidden">
<div class="col">
<img src="https://svgsilh.com/svg/153302-ffffff.svg" style="position:absolute;opacity:0.2;width:70px;top:-8px;left:140px;transform: rotate(20deg)">
<!-- see notes on the first song tab :) -->
<iframe src="https://www.youtube.com/embed/0p_1QSUsbsM" class="border-0" style="position: absolute; opacity: 0.001; height: 30px; width: 280px; margin-top: ; margin-left: -20px; z-index: 9999;"></iframe>
<div class="row">
<div class="col">
<p style="letter-spacing: 2pt;font-size:8pt">
<i class="fa-solid fa-play"></i> <span style="font-family:Garamond,serif;font-size:12pt;letter-spacing: 0pt;font-weight: bold">Song 4</span> - ARTIST
</p>
</div>
</div>
</div>
</div>
<div class="row mx-3 p-1 my-2" style="background:#247485;overflow:hidden">
<div class="col">
<img src="https://svgsilh.com/svg/153302-ffffff.svg" style="position:absolute;opacity:0.2;width:80px;top:-12px;left:180px;transform: rotate(180deg)">
<!-- see notes on the first song tab :) -->
<iframe src="https://www.youtube.com/embed/0p_1QSUsbsM" class="border-0" style="position: absolute; opacity: 0.001; height: 30px; width: 280px; margin-top: ; margin-left: -20px; z-index: 9999;"></iframe>
<div class="row">
<div class="col">
<p style="letter-spacing: 2pt;font-size:8pt">
<i class="fa-solid fa-play"></i> <span style="font-family:Garamond,serif;font-size:12pt;letter-spacing: 0pt;font-weight: bold">Song 5</span> - ARTIST
</p>
</div>
</div>
</div>
</div>
<div class="row mx-3 p-1 my-2" style="background:#247485;overflow:hidden">
<div class="col">
<img src="https://svgsilh.com/svg/153302-ffffff.svg" style="position:absolute;opacity:0.2;width:60px;top:-4px;left:240px;transform: rotate(-20deg)">
<!-- see notes on the first song tab :) -->
<iframe src="https://www.youtube.com/embed/0p_1QSUsbsM" class="border-0" style="position: absolute; opacity: 0.001; height: 30px; width: 280px; margin-top: ; margin-left: -20px; z-index: 9999;"></iframe>
<div class="row">
<div class="col">
<p style="letter-spacing: 2pt;font-size:8pt">
<i class="fa-solid fa-play"></i> <span style="font-family:Garamond,serif;font-size:12pt;letter-spacing: 0pt;font-weight: bold">Song 6</span> - ARTIST
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md my-3 d-lg-none"></div>
<!-- general info -->
<div class="col p-3" style="background:#247485">
<div class="row">
<i class="fa-solid fa-star ml-3" style="margin:auto;position:relative;top:-5px"></i>
<hr class="col ml-3 mr-4" style="border-color:#ffffff;position:relative;top:-4px">
</div>
<div class="px-3 mb-4" style="background-color:rgba(255,255,255,0.25);border-top:1px solid #ffffff;border-bottom:1px solid #ffffff;width:100%;">
<p style="line-height: 18pt">
<br>
<span style="font-family:Garamond,serif;font-size:12pt;font-weight:bold">Pronouns:</span> []<br>
<span style="font-family:Garamond,serif;font-size:12pt;font-weight:bold">Age:</span> []<br>
<span style="font-family:Garamond,serif;font-size:12pt;font-weight:bold">Residence:</span> []<br>
<span style="font-family:Garamond,serif;font-size:12pt;font-weight:bold">Species:</span> []<br>
<span style="font-family:Garamond,serif;font-size:12pt;font-weight:bold">Sexuality:</span> []<br>
<span style="font-family:Garamond,serif;font-size:12pt;font-weight:bold">Height:</span> []<br>
<span style="font-family:Garamond,serif;font-size:12pt;font-weight:bold">Build:</span> []<br><br>
</p>
</div>
<div class="row w-100" style="position:absolute;bottom:0px">
<hr class="col ml-3 mr-4" style="border-color:#ffffff;position:relative;top:-4px">
<i class="fa-solid fa-star mr-3" style="margin:auto;position:relative;top:-5px"></i>
</div>
</div>
<div class="col-auto d-none d-lg-block"></div>
</div>
</div>
</div>
<div class="row my-3" style="margin-top:-40px;z-index:200;position:relative">
<!-- please don't remove my credit! -->
<a href="https://toyhou.se/3leggedpoet/characters/folder:4871742" title="code by three" style="margin:auto;color:#ffffff;font-weight:lighter;opacity:0.2">
<i class="fa-solid fa-code fa-sm"></i>
</a>
</div>
