Tabbed Character [C] HTML (Revamped code)

MCDogResource

Info


Created
1 year, 3 months ago
Creator
MCDogResource
Favorites
0

Profile


<div class="container-fluid my-1" style="color:#fff; max-width:1075px; font-family:Comic Sans MS,">

<!--Background Image-->

<div class="card border-0 p-2 mt-3" style="background-image:url( imglink ); background-size:repeat; background-position: center; border-radius:50px">

<div class="row no-gutters">


<div class="col-md-5 my-auto order-lg-2">

<!--Floating image on side (plus floating icons, which you may have to move around or remove entirely)-->

<div style="margin-left:-100px;">

<img class="m-auto" style="max-width:570px;" src=" imglink ">

</div>

<div style="color:#fff; font-size:120px; position:absolute; bottom:-120px; right:20px; transform: rotate(-35deg);"><i class="fa-solid fa-candy">

</div>

<div style="color:#fff; font-size:80px; position:absolute; bottom:-120px; left:30px; transform: rotate(65deg);"><i class="fa-solid fa-star">

</div>

<div style="color:#fff; font-size:50px; position:absolute; bottom:-30px; left:10px; transform: rotate(55deg);"><i class="fa-solid fa-star">

</div>

<div style="color:#fff; font-size:50px; position:absolute; top:-60px; right:10px; transform: rotate(-45deg);"><i class="fa-solid fa-star">

</div>

<div style="color:#fff; font-size:100px; position:absolute; top:-130px; right:50px; transform: rotate(180deg);"><i class="fa-solid fa-stars">

</div>

<div style="color:#fff; font-size:130px; position:absolute; top:-120px; left:-20px; transform: rotate(90deg);"><i class="fa-solid fa-lollipop">

</div>

<div style="color:#fff; font-size:100px; position:absolute; top:-0px; left:-10px; transform: rotate(110deg);"><i class="fa-solid fa-lollipop">

</div>

</div>


<!--Top Banner-->

<div class="col-md-7 order-lg-1">

<div class="card p-3 my-1 rounded-0" style="background-color:#340e6d; border:7px solid #ffff80; border-top-left-radius:40px; border-top-right-radius:40px;">

<p style="text-align: center;"><span style="font-size: 25px; letter-spacing:3px"><b><i class="fa-solid">"Silly little quote here. Try to keep it short-ish."</i></b></span></p>

<div style="color:#f88eff; font-size:150px; position:absolute; top:-55px; left:100px; mix-blend-mode:overlay; transform: rotate(45deg);"><i class="fa-solid fa-microphone-stand">

</div>

</div>

<!--Tab 1 (Basics)-->

<div class="tab-content">

<div class="tab-pane active show" id="tabre1">

<div class="card p-2 my-2 rounded-0 border-0" style="background:linear-gradient(180deg, rgba(255, 255, 128, 1) 0%, rgba(105, 215, 223, 1) 50%, rgba(248, 142, 255, 1) 100%); height:645px">

<div class="card p-2 mb-1 rounded-0 border-0" style="background-color:#340e6d;max-width:800px;">

<div class="row" style="font-size:17px">

<!--Information columns-->

<div class="col-6">

<div class="col-12 justify-content-between" style="text-align: center;"><b>Name</b> <span style="mix-blend-mode:overlay;">info</span></div>

<div class="col-12 justify-content-between" style="text-align: center;"><b>Age</b> <span style="mix-blend-mode:overlay;">info</span></div>

<div class="col-12 justify-content-between" style="text-align: center;"><b>Gender</b> <span style="mix-blend-mode:overlay;">info</span></div>

<div class="col-12 justify-content-between" style="text-align: center;"><b>Species/Race</b> <span style="mix-blend-mode:overlay;">info</span></div>

</div>

<div class="col-6">

<div class="col-12 justify-content-between" style="text-align: center;"><b>Orientation</b> <span style="mix-blend-mode:overlay;">info</span></div>

<div class="col-12 justify-content-between" style="text-align: center;"><b>Occupation</b> <span style="mix-blend-mode:overlay;">info</span></div>

<div class="col-12 justify-content-between" style="text-align: center;"><b>Status</b> <span style="mix-blend-mode:overlay;">info</span></div>

<div class="col-12 justify-content-between" style="text-align: center;"><b>Role</b> <span style="mix-blend-mode:overlay;">info</span></div>

</div>

</div>

</div>


<div class="carousel slide" id="likeslide" data-pause="true">

<div class="carousel-inner">

<div class="carousel-item active">

<div class="row no-gutters" style="font-size:16px">

<!--Likes-->

<div class="col-6 pr-1">

<div class="card p-2 my-1 rounded-0 border-0" style="background-color:#340e6d;height:150px;overflow:auto;">

<p style="text-align:center; font-size: 18px; color:#ffff80"><b>Likes</b></p>

<div class="mx-auto" style="border-top:1px solid #fff; mix-blend-mode:overlay; width:220px; margin-bottom:5px"></div>

<span style="text-align: left;"><i class="fas fa-arrow-right mr-2" style="color:#ffff80"></i>who doesn't enjoy</span>

<span style="text-align: left;"><i class="fas fa-arrow-right mr-2" style="color:#ffff80"></i>a good surprise</span>

<span style="text-align: left;"><i class="fas fa-arrow-right mr-2" style="color:#ffff80"></i>every now</span>

<span style="text-align: left;"><i class="fas fa-arrow-right mr-2" style="color:#ffff80"></i>and then?</span>

</div>

</div>

<!--Dislikes-->

<div class="col-6 pl-1">

<div class="card p-2 my-1 rounded-0 border-0" style="background-color:#340e6d;height:150px;overflow:auto;">

<p style="text-align:center; font-size: 18px; color:#f88eff"><b>Dislikes</b></p>

<div class="mx-auto" style="border-top:1px solid #fff; mix-blend-mode:overlay; width:220px; margin-bottom:5px"></div>

<span style="text-align: left;"><i class="fas fa-times mr-2" style="color:#f88eff"></i>you know what</span>

<span style="text-align: left;"><i class="fas fa-times mr-2" style="color:#f88eff"></i>they say,</span>

<span style="text-align: left;"><i class="fas fa-times mr-2" style="color:#f88eff"></i>if you can't beat them</span>

<span style="text-align: left;"><i class="fas fa-times mr-2" style="color:#f88eff"></i>join them!</span>

</div>

</div>

</div>

</div>


<div class="carousel-item">

<div class="row no-gutters" style="font-size:16px">

<!--Talents-->

<div class="col-6 pr-1">

<div class="card p-2 my-1 rounded-0 border-0" style="background-color:#340e6d;height:150px;overflow:auto;">

<p style="text-align:center; font-size: 18px; color:#ffff80"><b>Talents</b></p>

<div class="mx-auto" style="border-top:1px solid #fff; mix-blend-mode:overlay; width:220px; margin-bottom:5px"></div>

<span style="text-align: left;"><i class="fas fa-arrow-right mr-2" style="color:#ffff80"></i>I'm actually a</span>

<span style="text-align: left;"><i class="fas fa-arrow-right mr-2" style="color:#ffff80"></i>bit of a</span>

<span style="text-align: left;"><i class="fas fa-arrow-right mr-2" style="color:#ffff80"></i>connoisseur</span>

<span style="text-align: left;"><i class="fas fa-arrow-right mr-2" style="color:#ffff80"></i>on the subject</span>

</div>

</div>

<!--Flaws-->

<div class="col-6 pl-1">

<div class="card p-2 my-1 rounded-0 border-0" style="background-color:#340e6d;height:150px;overflow:auto;">

<p style="text-align:center; font-size: 18px; color:#f88eff"><b>Flaws</b></p>

<div class="mx-auto" style="border-top:1px solid #fff; mix-blend-mode:overlay; width:220px; margin-bottom:5px"></div>

<span style="text-align: left;"><i class="fas fa-times mr-2" style="color:#f88eff"></i>not everyone</span>

<span style="text-align: left;"><i class="fas fa-times mr-2" style="color:#f88eff"></i>can be the</span>

<span style="text-align: left;"><i class="fas fa-times mr-2" style="color:#f88eff"></i>person everyone</span>

<span style="text-align: left;"><i class="fas fa-times mr-2" style="color:#f88eff"></i>expects them to be</span>

</div>

</div>

</div>

</div>


<a class="carousel-control-prev" href="#likeslide" role="button" data-slide="next">

<span class="carousel-control-prev-icon" aria-hidden="true"></span>

<span class="sr-only">Previous</span>

</a>

<a class="carousel-control-next" href="#likeslide" role="button" data-slide="prev">

<span class="carousel-control-next-icon" aria-hidden="true"></span>

<span class="sr-only">Next</span>

</a>

</div>

</div>

<!--Hobbies/Interests-->

<div class="card p-2 my-1 rounded-0 border-0" style="background-color:#340e6d;height:130px;overflow:auto; font-size:16px">

<p style="text-align: center; font-size: 18px; color:#a2e6ba"><b>Hobbies</b></p>

<div class="mx-auto" style="border-top:1px solid #fff; mix-blend-mode:overlay; width:220px; margin-bottom:5px"></div>

<span style="text-align: left;"><i class="far fa-circle mr-2" style="color:#a2e6ba"></i>you've got it all wrong,</span>

<span style="text-align: left;"><i class="far fa-circle mr-2" style="color:#a2e6ba"></i>you need to put more zing</span>

<span style="text-align: left;"><i class="far fa-circle mr-2" style="color:#a2e6ba"></i>and more pep into it.</span>

</div>

<!--Relationships-->

<div class="card p-2 mt-1 rounded-0 border-0" style="background-color:#340e6d;">

<p style="text-align: center; font-size: 18px; color:#a2b9ec"><b>Relations</b></p>

<div class="mx-auto" style="border-top:1px solid #fff; mix-blend-mode:overlay; width:220px; margin-bottom:10px">

     </div>

<div class="carousel slide" id="relationslide" data-pause="true">

<div class="carousel-inner">

<!--World-->

<div class="carousel-item active">

<div class="row no-gutters">

<div class="col-3">

<div class="card rounded-circle" style="background-image:url( imglink ); height:155px; width:155px; background-size:cover; border:7px solid #6510da;">

</div>

</div>

<div class="col-9">

<div class="card rounded-0 border-0 mt-1" style="background-color:#a2b9ec; height:20px; border-radius:10px; width:200px">

<p style="text-align:center">Focal world</p>

<a class="btn btn-outline-primary btn-block rounded-0 border-0" style="mix-blend-mode:overlay; position:absolute; top:0px; right:0px; height:20px; border-radius:10px;" href="characterlink"></a>

</div>

<div class="card mt-1 ml-2 border-0 rounded-0 p-3" style="background-color:#6510da; height:120px; overflow:auto; border-radius:20px">

<p style="text-align: justify;">It doesn't matter where you're from. We can all have fun, together! Just as long as you don't forbid it, or whatever...</p>

</div>

</div>

</div>

</div>

<!--Relation 1-->

<div class="carousel-item">

<div class="row no-gutters">

<div class="col-3">

<div class="card rounded-circle" style="background-image:url( imglink ); height:155px; width:155px; background-size:cover; border:7px solid #6510da;">

</div>

</div>

<div class="col-9">

<div class="card rounded-0 border-0 mt-1" style="background-color:#a2e6ba; height:20px; border-radius:10px; width:200px">

<p style="text-align:center">Spouse/BFF</p>

<a class="btn btn-outline-primary btn-block rounded-0 border-0" style="mix-blend-mode:overlay; position:absolute; top:0px; right:0px; height:20px; border-radius:10px;" href="characterlink"></a>

</div>

<div class="card mt-1 ml-2 border-0 rounded-0 p-3" style="background-color:#6510da; height:120px; overflow:auto; border-radius:20px">

<p style="text-align: justify;">You know that I can't let you into that horde yourself. I'm afraid to let you die out there.</p>

</div>

</div>

</div>

</div>

<!--Relation 2-->

<div class="carousel-item">

<div class="row no-gutters">

<div class="col-3">

<div class="card rounded-circle" style="background-image:url( imglink ); height:155px; width:155px; background-size:cover; border:7px solid #6510da;">

</div>

</div>

<div class="col-9">

<div class="card rounded-0 border-0 mt-1" style="background-color:#ffff80; height:20px; border-radius:10px; width:200px">

<p style="text-align:center; color:#340e6d">Friend</p>

<a class="btn btn-outline-primary btn-block rounded-0 border-0" style="mix-blend-mode:overlay; position:absolute; top:0px; right:0px; height:20px; border-radius:10px;" href="characterlink"></a>

</div>

<div class="card mt-1 ml-2 border-0 rounded-0 p-3" style="background-color:#6510da; height:120px; overflow:auto; border-radius:20px">

<p style="text-align: justify;">You know we can work together as a team, right? It doesn't just have to be you taking on the horde... you know... right?</p>

</div>

</div>

</div>

</div>

<!--Relation 3-->

<div class="carousel-item">

<div class="row no-gutters">

<div class="col-3">

<div class="card rounded-circle" style="background-image:url( imglink ); height:155px; width:155px; background-size:cover; border:7px solid #6510da;">

</div>

</div>

<div class="col-9">

<div class="card rounded-0 border-0 mt-1" style="background-color:#f88eff; height:20px; border-radius:10px; width:200px">

<p style="text-align:center">Mortal enemy</p>

<a class="btn btn-outline-primary btn-block rounded-0 border-0" style="mix-blend-mode:overlay; position:absolute; top:0px; right:0px; height:20px; border-radius:10px;" href="characterlink"></a>

</div>

<div class="card mt-1 ml-2 border-0 rounded-0 p-3" style="background-color:#6510da; height:120px; overflow:auto; border-radius:20px">

<p style="text-align: justify;">Step aside and let a true man handle it. That is, with my endless amounts of candy.</p>

</div>

</div>

</div>

</div>

</div>

</div>


<a class="carousel-control-prev" href="#relationslide" role="button" data-slide="prev">

<span class="carousel-control-prev-icon" aria-hidden="true"></span>

<span class="sr-only">Previous</span>

</a>

<a class="carousel-control-next" href="#relationslide" role="button" data-slide="next">

<span class="carousel-control-next-icon" aria-hidden="true"></span>

<span class="sr-only">Next</span>

</a>

</div>

</div>

</div>


<!--Tab 2 (Design)-->

<div class="tab-pane" id="tabre2">

<div class="card p-2 my-2 rounded-0 border-0" style="background:linear-gradient(180deg, rgba(255, 255, 128, 1) 0%, rgba(105, 215, 223, 1) 50%, rgba(248, 142, 255, 1) 100%); height:645px">

<div class="row no-gutters">

<!--Reference pic-->

<div class="col-6 p-1">

<div class="card border-0" style="background-image:url( imglink ); background-size:cover; background-position: center; height:520px; background-color:rgba(0,0,0,0)">

</div>

</div>

<!--Design details-->

<div class="col-6 p-1">

<div class="card p-2 mt-4 rounded-0 border-0" style="background-color:#340e6d; font-size:16px">

<p style="text-align: center; font-size:20px; color:#69d7df"><b>Design Notes</b></p>

<div class="mx-auto" style="border-top:1px solid #fff; mix-blend-mode:overlay; width:220px; margin-bottom:10px; margin-top:-12px"></div>

<p class="col-12 justify-content-between" style="text-align: center; margin-bottom:-0px;"><b>Height</b> <span style="mix-blend-mode:overlay;">info</span></p>

<p class="col-12 justify-content-between" style="text-align: center; margin-bottom:-0px;"><b>Weight</b> <span style="mix-blend-mode:overlay;">info</span></p>

<p class="col-12 justify-content-between" style="text-align: center; margin-bottom:-0px;"><b>Hair style</b> <span style="mix-blend-mode:overlay;">info</span></p>

<p class="col-12 justify-content-between" style="text-align: center; margin-bottom:-0px;"><b>Body type</b> <span style="mix-blend-mode:overlay;">info</span></p>

<p class="col-12 justify-content-between" style="text-align: center; margin-bottom:-0px;"><b>Eye shape</b> <span style="mix-blend-mode:overlay;">info</span></p>

<p class="col-12 justify-content-between" style="text-align: center;"><b>Posture</b> <span style="mix-blend-mode:overlay;">info</span></p>

<p class="col-12 justify-content-between" style="text-align: center; margin-bottom:-0px;"><b>Designer</b> <a href="linkhere" style="color:#f88eff">info</a></p>

<p class="col-12 justify-content-between mb-2" style="text-align: center;"><b>Masterlist</b> <a href="linkhere" style="color:#f88eff">info</a></p>

</div>

<!--(Notes)-->

<div class="card p-2 mt-2 rounded-0 border-0" style="background-color:#340e6d; font-size:15px; max-height:180px; overflow:auto">

<p style="font-size:17px; color:#ffff80; text-align:center"><b>Other Details</b></p>

<div class="mx-auto" style="border-top:1px solid #fff; mix-blend-mode:overlay; width:220px; margin-bottom:5px"></div>

<span style="text-align: left;"><i class="far fa-circle mr-2" style="color:#f88eff"></i>you're trying too hard,</span>

<span style="text-align: left;"><i class="far fa-circle mr-2" style="color:#f88eff"></i>and that's just not classy</span>

<span style="text-align: left;"><i class="far fa-circle mr-2" style="color:#f88eff"></i>see the thing about classy is,</span>

<span style="text-align: left;"><i class="far fa-circle mr-2" style="color:#f88eff"></i>it's a state of mind</span>

</div>

</div>

</div>

<!--Color palette-->

<div class="row no-gutters my-2">

<div class="col pl-3">

 <div class="card p-3 rounded-0" style="background-color:#9eacc8; border-bottom-left-radius:50px; border-top-left-radius:50px; border:2px solid #6510da">

<a class="btn btn-outline-primary btn-block rounded-0 border-0 tooltipster p-3" style="mix-blend-mode:overlay; position:absolute; top:0px; right:0px; border-bottom-left-radius:50px; border-top-left-radius:50px;" title="#9eacc8"></a>

</div>

</div>

<div class="col">

<div class="card p-3 rounded-0" style="background-color:#b5c6d9; border:2px solid #6510da">

<a class="btn btn-outline-primary btn-block rounded-0 border-0 tooltipster p-3" style="mix-blend-mode:overlay; position:absolute; top:0px; right:0px;" title="#b5c6d9"></a>

</div>

</div>

<div class="col">

<div class="card p-3 rounded-0" style="background-color:#f1dfd7; border:2px solid #6510da">

<a class="btn btn-outline-primary btn-block rounded-0 border-0 tooltipster p-3" style="mix-blend-mode:overlay; position:absolute; top:0px; right:0px;" title="#f1dfd7"></a>

</div>

</div>

<div class="col">

<div class="card p-3 rounded-0" style="background-color:#df93a9; border:2px solid #6510da">

<a class="btn btn-outline-primary btn-block rounded-0 border-0 tooltipster p-3" style="mix-blend-mode:overlay; position:absolute; top:0px; right:0px;" title="#df93a9"></a>

</div>

</div>

<div class="col pr-3">

<div class="card p-3 rounded-0" style="background-color:#7c3f66; border:2px solid #6510da; border-bottom-right-radius:50px; border-top-right-radius:50px;">

<a class="btn btn-outline-primary btn-block rounded-0 border-0 tooltipster p-3" style="mix-blend-mode:overlay; position:absolute; top:0px; right:0px; border-bottom-right-radius:50px; border-top-right-radius:50px;" title="#7c3f66"></a>

</div>

</div>

</div>

<!--Extra buttons-->

<div class="row no-gutters my-2">

<div class="col-4 pl-5">

<div class="card rounded-0 border-0 p-1 mx-auto" style="background-color:#340e6d; height:35px;">

<p style="text-align:center; font-size:18px; color:#f88eff">Moodboard</p>

<a class="btn btn-outline-success btn-block rounded-0 border-0" style="mix-blend-mode:overlay; position:absolute; top:0px; right:0px; height:35px;" href="linkhere"></a>

</div>

</div>

<div class="col-4 px-2">

<div class="card rounded-0 border-0 p-1 mx-auto" style="background-color:#340e6d; height:35px;">

<p style="text-align:center; font-size:18px; color:#ffff80">Reference sheet</p>

<a class="btn btn-outline-success btn-block rounded-0 border-0" style="mix-blend-mode:overlay; position:absolute; top:0px; right:0px; height:35px;" href="linkhere"></a>

</div>

</div>

<div class="col-4 pr-5">

<div class="card rounded-0 border-0 p-1 mx-auto" style="background-color:#340e6d; height:35px;">

<p style="text-align:center; font-size:18px; color:#69d7df">Theme song</p>

<a class="btn btn-outline-success btn-block rounded-0 border-0" style="mix-blend-mode:overlay; position:absolute; top:0px; right:0px; height:35px;" href="linkhere"></a>

</div>

</div>

</div>

</div>

</div>


<!--Tab 3 (Story)-->

<div class="tab-pane" id="tabre3">

<div class="card p-2 my-2 rounded-0 border-0" style="background:linear-gradient(180deg, rgba(255, 255, 128, 1) 0%, rgba(105, 215, 223, 1) 50%, rgba(248, 142, 255, 1) 100%); height:645px">


<div class="card p-3 rounded-0 border-0" style="background-color:#340e6d; height:200px; overflow:auto;">

<div class="carousel slide" id="basicslide" data-pause="true">

<!--Introduction/Personality-->

<div class="carousel-inner">

<div class="carousel-item active">

<p style="text-align: left; font-size: 20px;"><b>Introduction</b></p>

<p style="text-align: left; font-size: 14px;">>Hey look, it's me! I'm Jam Confection! I like bunnies... and I like pink stuff... oh you know what's really cool? Candy!! Sweet, succulent candy. I could eat the stuff all day. And the wrappers are so colorful and fun too. And it makes me all hyper! And... um... I like fighting evil enemies and stuff.

<br>You got a basic gist of who I am, simple as that.</p>

<div style="color:#6510da; font-size:45px; position:absolute; top:-12px; right:10px; transform: rotate(10deg);"><i class="fa-solid fa-id-card">

</div>

</div>

<div class="carousel-item">

<p style="text-align: left; font-size: 20px;"><b>Personality</b></p>

<p style="text-align: left; font-size: 14px;">Why am I writing so deeply in character this is possibly the cringiest thing I've done in the past year. In the public eye.

<br>Write the character personality here basically.</p>

<div style="color:#6510da; font-size:45px; position:absolute; top:-12px; right:10px; transform: rotate(10deg);"><i class="fa-solid fa-user">

</div>

</div>

</div>

</div>

<a class="carousel-control-prev" href="#basicslide" role="button" data-slide="prev">

<span class="carousel-control-prev-icon" aria-hidden="true"></span>

<span class="sr-only">Previous</span>

</a>

<a class="carousel-control-next" href="#basicslide" role="button" data-slide="next">

<span class="carousel-control-next-icon" aria-hidden="true"></span>

<span class="sr-only">Next</span>

</a>

</div>


<div class="card p-3 rounded-0 border-0 mt-2" style="background-color:#340e6d; height:250px; overflow:auto;">

<div class="carousel slide" id="storyslide" data-pause="true">

<!--Character story-->

<div class="carousel-inner">

<div class="carousel-item active">

<p style="text-align: right; font-size: 20px;"><b>Past life</b></p>

<p style="text-align: left; font-size: 14px;">I don't really have that much of a story. I was coded by coders into a game, the game got released, the game became popular... I don't know. I wasn't programmed with any kind of backstory.

<br>I mean, HEY! That's too meta! I just don't have a backstory.</p>

<div style="color:#6510da; font-size:42px; position:absolute; top:-9px; left:10px; transform: rotate(-10deg);"><i class="fa-solid fa-book">

</div>

</div>

<div class="carousel-item">

<p style="text-align: right; font-size: 20px;"><b>Current life</b></p>

<p style="text-align: left; font-size: 14px;">I fight evil bad people. Well, not evil necessarily. They're just creatures that attack me. Why do they attack me? I dunno. I just attack them back because they attack me.

<br>Anyway, that's my life right now.</p>

<div style="color:#6510da; font-size:42px; position:absolute; top:-9px; left:10px; transform: rotate(-10deg);"><i class="fa-solid fa-book-open-cover">

</div>

</div>

</div>

</div>


<a class="carousel-control-prev" href="#storyslide" role="button" data-slide="next">

<span class="carousel-control-prev-icon" aria-hidden="true"></span>

<span class="sr-only">Previous</span>

</a>

<a class="carousel-control-next" href="#storyslide" role="button" data-slide="prev">

<span class="carousel-control-next-icon" aria-hidden="true"></span>

<span class="sr-only">Next</span>

</a>

</div>

<!--Trivia-->

<div class="card p-3 rounded-0 border-0 mt-2" style="background-color:#340e6d; height:165px; overflow:auto;">

<p style="text-align: left;"><span style="font-size: 20px;"><b>Trivia</b></span></p>

<p><ul style="list-style-type: circle; font-size: 14px;">

<li>Did you know that candy causes sugar rushes? It's actually because your blood sugar increases and as the body processes it it gets overwhelmed. By the end of it you're just absolutely exhausted.</li>

<li>You already know what trivia sections are for. All of these boxes scroll btw so you can put as much info as you want in them.</li>

</ul>

</p>

</div>

</div>

</div>

<!--Tab interface-->

<div class="card my-1 rounded-0 pb-3" style="background-color:#340e6d; border:7px solid #f88eff; border-bottom-left-radius:40px; border-bottom-right-radius:40px;">

<ul class="nav nav-tabs card-header-tabs row no-gutters">

<li class="col p-1"><a class="btn p-1 rounded-0 border-0 text-white btn-block" style="background-color:rgba(0,0,0,0); height:30px; font-size:20px; border-bottom-left-radius:30px;">Basics</a>

<a class="btn btn-outline-success btn-block rounded-0 border-0 active" style="mix-blend-mode:overlay; position:absolute; top:5px; left:0px; height:30px; border-bottom-left-radius:30px;" data-toggle="tab" href="#tabre1"></a></li>  

<li class="col p-1"><a class="btn p-1 rounded-0 border-0 text-white btn-block" style="background-color:rgba(0,0,0,0); height:30px; font-size:20px;">Design</a>

<a class="btn btn-outline-success btn-block rounded-0 border-0" style="mix-blend-mode:overlay; position:absolute; top:5px; left:0px; height:30px;" data-toggle="tab" href="#tabre2"></a></li>  

<li class="col p-1"><a class="btn p-1 rounded-0 border-0 text-white btn-block" style="background-color:rgba(0,0,0,0); height:30px; font-size:20px; border-bottom-right-radius:30px;">Story</a>

<a class="btn btn-outline-success btn-block rounded-0 border-0" style="mix-blend-mode:overlay; position:absolute; top:5px; left:0px; height:30px; border-bottom-right-radius:30px;" data-toggle="tab" href="#tabre3"></a></li>  

</ul>

</div>

</div>

</div>

</div>

</div>

<p style="font-size:13px; text-align:center;"><a style="color:#c4415d;" href="https://toyhou.se/MCDogResource"><i class="fas fa-bullseye"></i> Code by maniCARNY</a></p>

</div>