- Created
- 9 months, 15 days ago
- Creator
- knightfright
- Favorites
- 5
Profile
Bootstrap Colors
<!--cafe code start-->
<div align="center">
<!--name sign-->
<div class="card col-lg-6 p-3 bg-faded" style="min-height:10px;border-radius: 500px; border-bottom: ridge 3px; border-top:ridge 3px; border-left:groove 10px ;border-right:groove 10px;">
<h1 class="my-4" style="font-size:40px;font-family:'Lucida Bright';"> <span class="p-4 m-2 hidden-sm-down text-" style="border-radius:90%;border: 3px double;"><span class="fa-stack" style="font-size:1rem;">
<i class="fas fa-croissant fa-stack-2x " style="opacity:.7; font-size:3rem; margin-top:-1vw; margin-left:-.8vw;"></i>
<i class="fa-solid fa-mug-marshmallows fa-stack-1x text-dark" style=" opacity:1;font-size:2.5rem;margin-left:1vw;"></i>
</span></span> NAME LASTNAME</h1>
</div>
<div class="p-1 col-lg-4" style=" border-left:groove 10px ;border-right:groove 10px ;max-width:225px;"></div>
</div>
<!--name sign end-->
<!--cafe building-->
<div class="row p-0 no-gutters m-0
justify-content-center ">
<div class=" col-lg-9 mx-2">
<div class="card bg-light" style="border-radius: 20px 20px 0px 0px ; min-height:500px;border-top:none; border-left:5px groove ;border-right:5px ridge ;border-bottom:5px groove ;">
<!--banner-->
<div class="banner" style="z-index:1;margin-left:-25px;margin-right:-20px; margin-bottom:-15px;">
<div class="card bg-danger p-3 col-lg-12 justify-content-center " style="min-height:100px;border-bottom:none;border-radius: 20px 20px 0px 0px ; border-top:none;margin-bottom:-5px;border-left:5px solid ;border-right:5px solid ;border-top:5px solid ;">
</div>
<div class="row col-lg-12 p-0 no-gutters m-0
" style="display:row; flex-wrap: nowrap;">
<div class="col-lg-2 m card bg-danger" style="border-top:none; min-height:90px; border-radius: 0px 0px 100px 100px ;border-left:5px solid ;border-right:5px solid ;border-bottom:5px solid ;"></div>
<div class="col-lg-2 m card bg-danger" style="border-top:none; min-height:70px; border-radius: 0px 0px 100px 100px ;border-left:5px solid ;border-right:5px solid ;border-bottom:5px solid ;"></div>
<div class="col-lg-2 m card bg-danger" style="border-top:none; min-height:70px; border-radius: 0px 0px 100px 100px ;border-left:5px solid ;border-right:5px solid ;border-bottom:5px solid ;"></div>
<div class="col-lg-2 hidden-md-down card bg-danger" style="border-top:none; min-height:70px; border-radius: 0px 0px 100px 100px ;border-left:5px solid ;border-right:5px solid ;border-bottom:5px solid ;"></div>
<div class="col-lg-2 hidden-md-down card bg-danger" style="border-top:none; min-height:70px; border-radius: 0px 0px 100px 100px ;border-left:5px solid ;border-right:5px solid ;border-bottom:5px solid ;"></div>
<div class="col-lg-2 hidden-md-down card bg-danger" style="border-top:none; min-height:70px; border-radius: 0px 0px 100px 100px ;border-left:5px solid ;border-right:5px solid ;border-bottom:5px solid ;"></div>
</div>
</div>
<!--banner end-->
<div class="row p-0 no-gutters m-0
justify-content-center " style="display:flex;">
<!--left (window and menu)-->
<div class=" border-0 mt-2 mx-2 mb-4 col-lg-3">
<div class="bg-secondary card my-2 mx-2 p-2" style="height:200px;border-radius: 100% 100% 0% 0%; border: 2px double; ">
<div class="card" style="height:200px;border-radius: 100% 100% 0% 0% ;background-image:url(IMAGE HERE);background-position: center;background-repeat:no-repeat;background-size:cover"></div>
</div>
<!-- menu-->
<div class="card bg-dark p-3 my-2 mx-1" style="height:180px;border-radius: 0px 0px 0px 0px ;border:ridge 5px;">
<h1 class="text-light" style="text-align:center;font-family:'Lucida Bright';"><i class="fa-duotone fa-sparkles hidden-md" ></i>MENU<i class="fa-duotone fa-sparkles fa-flip-horizontal hidden-md" ></i></h1>
<ul class="mt-0 nav row" style="text-align:left;">
<li class="nav-link col-lg-12 nav-item" style="font-family:'MS Gothic'; font-weight:bold; "><a data-toggle="tab" href="#basics" ><i class=" fa-solid mr-2 fa-bagel" ></i>Basics</a>
<span class="pull-right text-secondary">....$1</span></li>
<li class="nav-link col-lg-12 nav-item" style="font-family:'MS Gothic'; font-weight:bold;"><a data-toggle="tab" href="#desg" ><i class="fa-solid mr-2 fa-pretzel"></i>Design</a>
<span class="pull-right hidden-md text-secondary" style="color:#C0947C;">....$2</span></li>
<li class="nav-link col-lg-12 nav-item" style="font-family:'MS Gothic'; font-weight:bold;"><a data-toggle="tab" href="#extra" ><i class="fa-solid mr-2 fa-cup-togo" ></i>Extras</a>
<span class="text-secondary pull-right" >....$3</span></li>
</ul>
</div>
<!-- menu end-->
</div>
<!--left end-->
<!--right side-->
<div class="card baba col-lg-8 mt-2 mb-4 ml-2 p-3 bg-dark" style="max-height:400px; border:5px solid;overflow-y:auto;overflow-x:hidden;">
<div class="tab-content">
<!--basics tab-->
<div id="basics" class="tab-pane active show fade">
<h1 class="text-light" style="font-family:'COURIER'; font-weight:bold;"><i class="fa-solid fa-2x fa-bagel " style="font-size:40px;opacity:.5;"></i><span class="py-" style="font-size:35px;margin-left:-15px; ">BASICS</span></h1>
<hr class="col-md-11 my-2 text-light" style="border-top:2px dashed;">
<!--info columns-->
<div class="row p-2 text-light" style="text-align:center; font-size:1.2rem; font-variant:small-caps;">
<div class="col-lg-6 ">
<span class="text-faded" style="font-family:'Courier';"><i class="fa-duotone fa-id-card pull-left" style="font-size:1.2rem;"></i> <span class="pull-right">First Middle Last</span></span>
</div>
<div class="col-lg-6 ">
<span class="text-faded" style="font-family:'Courier';"><i class="fa-duotone fa-transgender pull-left" style="font-size:1.2rem;"></i> <span class="pull-right">Gender Identity</span></span>
</div>
<div class="col-lg-6 ">
<span class="text-faded" style="font-family:'Courier';"><i class="fa-duotone fa-signature pull-left" style="font-size:1.2rem;"></i> <span class="pull-right">Pronouns</span></span>
</div>
<div class="col-lg-6 ">
<span class="text-faded" style="font-family:'Courier';"><i class="fa-duotone fa-hands-holding-heart pull-left" style="font-size:1.2rem;"></i> <span class="pull-right">Sexuality</span></span>
</div>
<div class="col-lg-6 ">
<span class="text-faded" style="font-family:'Courier';"><i class="fa-duotone fa-cake pull-left" style="font-size:1.2rem;"></i><span class="pull-right">Age/B-day</span></span>
</div>
<div class="col-lg-6 ">
<span class="text-faded" style="font-family:'Courier';"><i class="fa-duotone fa-dna pull-left" style="font-size:1.2rem;"></i> <span class="pull-right">Species/Race/Category</span></span>
</div>
<div class="col-lg-6 ">
<span class="text-faded" style="font-family:'Courier';"><i class="fa-duotone fa-store pull-left" style="font-size:1.2rem;"></i> <span class="pull-right">Occupation</span></span>
</div>
<div class="col-lg-6 ">
<span class="text-faded" style="font-family:'Courier';"><i class="fa-duotone fa-crown pull-left" style="font-size:1.2rem;"></i> <span class="pull-right">Role/Status/Etc.</span></span>
</div>
</div>
<!--columns end-->
<hr class="col-lg-12 mt-2 mb-3 text-light" style="border-top:2px dashed;">
<!--overview-->
<span class="text-light" style="font-family:'Garamond'; font-size:1rem;">Write about ur character here! Basically an overview/brief introduction. Personality, abilities, story, etc.
<br><br>
Flavour a coffee flavour caffeine grounds bar caffeine french press in, plunger pot aftertaste foam latte instant caramelization cinnamon at crema. Crema, aged grinder sugar aroma filter mocha caramelization trifecta, java steamed et, americano as aged shop java. Filter variety carajillo caffeine, macchiato, aroma ut id galão fair trade, cream grinder half and half, java mazagran kopi-luwak macchiato café au lait breve, white acerbic frappuccino beans mocha.
</span>
<!--overview end-->
</div>
<!--basics end, design start-->
<div id="desg" class="tab-pane fade">
<h1 class="text-light" style="font-family:'Courier'; font-weight:bold;"><i class="fa-solid fa-2x fa-pretzel " style="font-size:40px;opacity:.5;"></i><span class="py-" style="font-size:35px;margin-left:-15px;">DESIGN</span></h1>
<hr class="col-md-11 my-2 text-light" style="border-top:2px dashed;">
<div class="row no-gutters justify-content-center m-2 p-1" style="display:flex;">
<!--ref image-->
<div class="col-lg-6 p-2 bg-secondary text-light" style="border:1px dashed; ">
<div class="" style="min-height:280px; background-image:url(IMAGE HERE);background-size:cover;background-repeat:no-repeat;background-position:center;"></div>
<!--ref end-->
</div>
<div class="col-md-6 p-3 text-light">
<!-- overview 2 -->
<p class="mb-1" style="font-size:20px; font-family:'Courier';font-weight:bold;">Overview</p><span style="font-family:'Garamond';">
Talk a little bit about ur oc's design here! Color choices, inspo, etc. Cortado, foam in cinnamon decaffeinated froth extra white espresso carajillo. Caramelization, wings doppio, barista bar est affogato extraction strong est single origin arabica. Roast qui, sweet iced café au lait pot coffee to go.
</span>
<p class="p-2 m-2" style="text-align:center;font-family:'Courier'"><a href="LINK HERE">{CLICK HERE FOR FULL REF}</a></p>
</div>
<!-- overview 2 end-->
<hr class="col-md-12 my-2 text-light" style="border-top:2px dashed;">
<div class="row no-gutters col-lg-12 my-2" style="display:flex;">
<!-- design notes -->
<div class="col-lg-6">
<ul class=" p-2 fa-ul text-light" style="font-family:'Garamond';">
<li><span class="fa-li"><i class="fal fa-pencil"></i></span>Write some design notes here! Key features, some details, etc.</li>
<li><span class="fa-li"><i class="fal fa-pencil"></i></span>*dj khaled voice* anotha one</li>
<li><span class="fa-li"><i class="fal fa-exclamation-triangle"></i></span>You can also change the icons to better reflect the details ur listing! This one could be for some non-opional features.</li>
<li><span class="fa-li"><i class="fal fa-mitten"></i></span>Outfits, accessories, fashion etc whatever ur heart desires </li>
</ul>
<!-- notes end -->
</div>
<!-- image-->
<div class="col-lg-6 card p-3 " style=" border:2px ridge ; background-image:url(IMAGE HERE); background-position:center;background-repeat:no-repeat;background-size:cover;">
</div>
<!-- image end -->
</div>
<!-- moodboard-->
<div class="row no-gutters justify-content-center p-2 bg-secondary text-light" style="display:flex;border:2px dashed;">
<!-- image 1 -->
<div class="col-lg-4 " style="background-image:url(IMAGE HERE);min-height:150px;min-width:150px;background-size:cover;background-repeat:no-repeat;background-position:center;">
<!-- icon -->
<i class="fa-solid fa-pumpkin text-warning fa-4x" style="position:absolute;left:-2rem; bottom:0; text-shadow:2px 2px 8px #000;"></i>
<!-- icon end -->
</div>
<!-- image 2 -->
<div class="col-lg-4 p-5" style="background-image:url(IMAGE HERE);min-height:150px;min-width:150px;background-size:cover;background-repeat:no-repeat;background-position:center; "></div>
<!-- image 3 -->
<div class="col-lg-4 " style="background-image:url(IMAGE HERE);min-height:150px;min-width:150px;background-size:cover;background-repeat:no-repeat;background-position:left;">
<!-- icon -->
<i class="fa-solid fa-crow fa-4x text-light" style="position:absolute;right:-2rem; top:0; text-shadow:2px 2px 8px #000;"></i>
<!-- icon end-->
</div>
</div>
<!-- moodboard end -->
</div>
</div>
<!--Extras Tab start -->
<div id="extra" class="tab-pane fade">
<h1 class="text-light" style="font-family:'Courier';font-weight:bold;"><i class="fa-solid fa-2x fa-coffee-beans " style="font-size:40px;opacity:.5;"></i><span style="font-size:35px;margin-left:-15px;">EXTRAS</span></h1>
<hr class="col-md-11 mt-2 mb-3 text-light" style="border-top:2px dashed;">
<!-- likes and dislikes-->
<div class="row no-gutters align-content-center" style="display:flex;">
<div class="col-lg-6">
<!-- likes-->
<h1 class="text-light" style="font-family:'courier'; font-weight:bold;"><i class="fad fa-pie mr-2"></i>LIKES</h1>
<ul class="fa-ul p-2 text-light" style="font-family:'MS Gothic';">
<li><span class="fa-li"><i class="fal fa-heart"></i></span>Content</li>
<li><span class="fa-li"><i class="fal fa-heart"></i></span>Content</li>
<li><span class="fa-li"><i class="fal fa-heart"></i></span>Content</li>
<li><span class="fa-li"><i class="fal fa-heart"></i></span>Content</li>
</ul>
<!-- likes end -->
</div>
<!-- dislikes start-->
<div class="col-lg-6">
<h1 class="text-light" style="font-family:'courier'; font-weight:bold;;"> <i class="fad fa-skull mr-2"></i>DISLIKES</h1>
<ul class="fa-ul p-2 text-light" style="font-family:'MS Gothic';">
<li><span class="fa-li"><i class="fal fa-x"></i></span>Evil Content</li>
<li><span class="fa-li"><i class="fal fa-x"></i></span>Evil Content</li>
<li><span class="fa-li"><i class="fal fa-x"></i></span>Evil Content</li>
<li><span class="fa-li"><i class="fal fa-x"></i></span>Evil Content</li>
</ul>
</div>
<!-- dislikes end -->
</div>
<hr class="col-md-11 mt-1 mb-3 text-light" style="border-top:2px dashed;">
<!-- trivia -->
<ul class="fa-ul mt-3 text-light" style="font-family:'Garamond';">
<li><span><span class="fa-li"><i class="far fa-mug-marshmallows"></i></span>Trivia goes here! Extra info, fun facts, etc. </span></li>
<li class="mt-2"><span><span class="fa-li"><i class="far fa-cake-slice"></i></span>sorry about all the FA icons, i just think they're cute lol</span></li>
<li class="mt-2"><span><span class="fa-li"><i class="far fa-donut"></i></span>Black, spoon mocha beans, coffee seasonal cream est whipped. Kopi-luwak, doppio dark carajillo barista café au lait cortado coffee dripper. Plunger pot barista dark cream and fair trade aged kopi-luwak. </span></li>
<li class="mt-2"><span ><span class="fa-li"><i class="far fa-croissant"></i></span>Qui single shot bar aromatic, at that to go caramelization whipped milk organic single shot.</span></li>
</ul>
<!-- trivia end -->
</div>
</div>
<!--Extras Tab end-->
</div>
<p class="" style="color:#fff; position:absolute; right:.5vw;bottom:0;"><a href="https://toyhou.se/knightfright/characters/folder:4540592"><i class="fal fa-code"></i></a></p>
</div>
<!-- cafe code end -->
<div align="center">
<!--name sign-->
<div class="card col-lg-6 p-3 bg-faded" style="min-height:10px;border-radius: 500px; border-bottom: ridge 3px; border-top:ridge 3px; border-left:groove 10px ;border-right:groove 10px;">
<h1 class="my-4" style="font-size:40px;font-family:'Lucida Bright';"> <span class="p-4 m-2 hidden-sm-down text-" style="border-radius:90%;border: 3px double;"><span class="fa-stack" style="font-size:1rem;">
<i class="fas fa-croissant fa-stack-2x " style="opacity:.7; font-size:3rem; margin-top:-1vw; margin-left:-.8vw;"></i>
<i class="fa-solid fa-mug-marshmallows fa-stack-1x text-dark" style=" opacity:1;font-size:2.5rem;margin-left:1vw;"></i>
</span></span> NAME LASTNAME</h1>
</div>
<div class="p-1 col-lg-4" style=" border-left:groove 10px ;border-right:groove 10px ;max-width:225px;"></div>
</div>
<!--name sign end-->
<!--cafe building-->
<div class="row p-0 no-gutters m-0
justify-content-center ">
<div class=" col-lg-9 mx-2">
<div class="card bg-light" style="border-radius: 20px 20px 0px 0px ; min-height:500px;border-top:none; border-left:5px groove ;border-right:5px ridge ;border-bottom:5px groove ;">
<!--banner-->
<div class="banner" style="z-index:1;margin-left:-25px;margin-right:-20px; margin-bottom:-15px;">
<div class="card bg-danger p-3 col-lg-12 justify-content-center " style="min-height:100px;border-bottom:none;border-radius: 20px 20px 0px 0px ; border-top:none;margin-bottom:-5px;border-left:5px solid ;border-right:5px solid ;border-top:5px solid ;">
</div>
<div class="row col-lg-12 p-0 no-gutters m-0
" style="display:row; flex-wrap: nowrap;">
<div class="col-lg-2 m card bg-danger" style="border-top:none; min-height:90px; border-radius: 0px 0px 100px 100px ;border-left:5px solid ;border-right:5px solid ;border-bottom:5px solid ;"></div>
<div class="col-lg-2 m card bg-danger" style="border-top:none; min-height:70px; border-radius: 0px 0px 100px 100px ;border-left:5px solid ;border-right:5px solid ;border-bottom:5px solid ;"></div>
<div class="col-lg-2 m card bg-danger" style="border-top:none; min-height:70px; border-radius: 0px 0px 100px 100px ;border-left:5px solid ;border-right:5px solid ;border-bottom:5px solid ;"></div>
<div class="col-lg-2 hidden-md-down card bg-danger" style="border-top:none; min-height:70px; border-radius: 0px 0px 100px 100px ;border-left:5px solid ;border-right:5px solid ;border-bottom:5px solid ;"></div>
<div class="col-lg-2 hidden-md-down card bg-danger" style="border-top:none; min-height:70px; border-radius: 0px 0px 100px 100px ;border-left:5px solid ;border-right:5px solid ;border-bottom:5px solid ;"></div>
<div class="col-lg-2 hidden-md-down card bg-danger" style="border-top:none; min-height:70px; border-radius: 0px 0px 100px 100px ;border-left:5px solid ;border-right:5px solid ;border-bottom:5px solid ;"></div>
</div>
</div>
<!--banner end-->
<div class="row p-0 no-gutters m-0
justify-content-center " style="display:flex;">
<!--left (window and menu)-->
<div class=" border-0 mt-2 mx-2 mb-4 col-lg-3">
<div class="bg-secondary card my-2 mx-2 p-2" style="height:200px;border-radius: 100% 100% 0% 0%; border: 2px double; ">
<div class="card" style="height:200px;border-radius: 100% 100% 0% 0% ;background-image:url(IMAGE HERE);background-position: center;background-repeat:no-repeat;background-size:cover"></div>
</div>
<!-- menu-->
<div class="card bg-dark p-3 my-2 mx-1" style="height:180px;border-radius: 0px 0px 0px 0px ;border:ridge 5px;">
<h1 class="text-light" style="text-align:center;font-family:'Lucida Bright';"><i class="fa-duotone fa-sparkles hidden-md" ></i>MENU<i class="fa-duotone fa-sparkles fa-flip-horizontal hidden-md" ></i></h1>
<ul class="mt-0 nav row" style="text-align:left;">
<li class="nav-link col-lg-12 nav-item" style="font-family:'MS Gothic'; font-weight:bold; "><a data-toggle="tab" href="#basics" ><i class=" fa-solid mr-2 fa-bagel" ></i>Basics</a>
<span class="pull-right text-secondary">....$1</span></li>
<li class="nav-link col-lg-12 nav-item" style="font-family:'MS Gothic'; font-weight:bold;"><a data-toggle="tab" href="#desg" ><i class="fa-solid mr-2 fa-pretzel"></i>Design</a>
<span class="pull-right hidden-md text-secondary" style="color:#C0947C;">....$2</span></li>
<li class="nav-link col-lg-12 nav-item" style="font-family:'MS Gothic'; font-weight:bold;"><a data-toggle="tab" href="#extra" ><i class="fa-solid mr-2 fa-cup-togo" ></i>Extras</a>
<span class="text-secondary pull-right" >....$3</span></li>
</ul>
</div>
<!-- menu end-->
</div>
<!--left end-->
<!--right side-->
<div class="card baba col-lg-8 mt-2 mb-4 ml-2 p-3 bg-dark" style="max-height:400px; border:5px solid;overflow-y:auto;overflow-x:hidden;">
<div class="tab-content">
<!--basics tab-->
<div id="basics" class="tab-pane active show fade">
<h1 class="text-light" style="font-family:'COURIER'; font-weight:bold;"><i class="fa-solid fa-2x fa-bagel " style="font-size:40px;opacity:.5;"></i><span class="py-" style="font-size:35px;margin-left:-15px; ">BASICS</span></h1>
<hr class="col-md-11 my-2 text-light" style="border-top:2px dashed;">
<!--info columns-->
<div class="row p-2 text-light" style="text-align:center; font-size:1.2rem; font-variant:small-caps;">
<div class="col-lg-6 ">
<span class="text-faded" style="font-family:'Courier';"><i class="fa-duotone fa-id-card pull-left" style="font-size:1.2rem;"></i> <span class="pull-right">First Middle Last</span></span>
</div>
<div class="col-lg-6 ">
<span class="text-faded" style="font-family:'Courier';"><i class="fa-duotone fa-transgender pull-left" style="font-size:1.2rem;"></i> <span class="pull-right">Gender Identity</span></span>
</div>
<div class="col-lg-6 ">
<span class="text-faded" style="font-family:'Courier';"><i class="fa-duotone fa-signature pull-left" style="font-size:1.2rem;"></i> <span class="pull-right">Pronouns</span></span>
</div>
<div class="col-lg-6 ">
<span class="text-faded" style="font-family:'Courier';"><i class="fa-duotone fa-hands-holding-heart pull-left" style="font-size:1.2rem;"></i> <span class="pull-right">Sexuality</span></span>
</div>
<div class="col-lg-6 ">
<span class="text-faded" style="font-family:'Courier';"><i class="fa-duotone fa-cake pull-left" style="font-size:1.2rem;"></i><span class="pull-right">Age/B-day</span></span>
</div>
<div class="col-lg-6 ">
<span class="text-faded" style="font-family:'Courier';"><i class="fa-duotone fa-dna pull-left" style="font-size:1.2rem;"></i> <span class="pull-right">Species/Race/Category</span></span>
</div>
<div class="col-lg-6 ">
<span class="text-faded" style="font-family:'Courier';"><i class="fa-duotone fa-store pull-left" style="font-size:1.2rem;"></i> <span class="pull-right">Occupation</span></span>
</div>
<div class="col-lg-6 ">
<span class="text-faded" style="font-family:'Courier';"><i class="fa-duotone fa-crown pull-left" style="font-size:1.2rem;"></i> <span class="pull-right">Role/Status/Etc.</span></span>
</div>
</div>
<!--columns end-->
<hr class="col-lg-12 mt-2 mb-3 text-light" style="border-top:2px dashed;">
<!--overview-->
<span class="text-light" style="font-family:'Garamond'; font-size:1rem;">Write about ur character here! Basically an overview/brief introduction. Personality, abilities, story, etc.
<br><br>
Flavour a coffee flavour caffeine grounds bar caffeine french press in, plunger pot aftertaste foam latte instant caramelization cinnamon at crema. Crema, aged grinder sugar aroma filter mocha caramelization trifecta, java steamed et, americano as aged shop java. Filter variety carajillo caffeine, macchiato, aroma ut id galão fair trade, cream grinder half and half, java mazagran kopi-luwak macchiato café au lait breve, white acerbic frappuccino beans mocha.
</span>
<!--overview end-->
</div>
<!--basics end, design start-->
<div id="desg" class="tab-pane fade">
<h1 class="text-light" style="font-family:'Courier'; font-weight:bold;"><i class="fa-solid fa-2x fa-pretzel " style="font-size:40px;opacity:.5;"></i><span class="py-" style="font-size:35px;margin-left:-15px;">DESIGN</span></h1>
<hr class="col-md-11 my-2 text-light" style="border-top:2px dashed;">
<div class="row no-gutters justify-content-center m-2 p-1" style="display:flex;">
<!--ref image-->
<div class="col-lg-6 p-2 bg-secondary text-light" style="border:1px dashed; ">
<div class="" style="min-height:280px; background-image:url(IMAGE HERE);background-size:cover;background-repeat:no-repeat;background-position:center;"></div>
<!--ref end-->
</div>
<div class="col-md-6 p-3 text-light">
<!-- overview 2 -->
<p class="mb-1" style="font-size:20px; font-family:'Courier';font-weight:bold;">Overview</p><span style="font-family:'Garamond';">
Talk a little bit about ur oc's design here! Color choices, inspo, etc. Cortado, foam in cinnamon decaffeinated froth extra white espresso carajillo. Caramelization, wings doppio, barista bar est affogato extraction strong est single origin arabica. Roast qui, sweet iced café au lait pot coffee to go.
</span>
<p class="p-2 m-2" style="text-align:center;font-family:'Courier'"><a href="LINK HERE">{CLICK HERE FOR FULL REF}</a></p>
</div>
<!-- overview 2 end-->
<hr class="col-md-12 my-2 text-light" style="border-top:2px dashed;">
<div class="row no-gutters col-lg-12 my-2" style="display:flex;">
<!-- design notes -->
<div class="col-lg-6">
<ul class=" p-2 fa-ul text-light" style="font-family:'Garamond';">
<li><span class="fa-li"><i class="fal fa-pencil"></i></span>Write some design notes here! Key features, some details, etc.</li>
<li><span class="fa-li"><i class="fal fa-pencil"></i></span>*dj khaled voice* anotha one</li>
<li><span class="fa-li"><i class="fal fa-exclamation-triangle"></i></span>You can also change the icons to better reflect the details ur listing! This one could be for some non-opional features.</li>
<li><span class="fa-li"><i class="fal fa-mitten"></i></span>Outfits, accessories, fashion etc whatever ur heart desires </li>
</ul>
<!-- notes end -->
</div>
<!-- image-->
<div class="col-lg-6 card p-3 " style=" border:2px ridge ; background-image:url(IMAGE HERE); background-position:center;background-repeat:no-repeat;background-size:cover;">
</div>
<!-- image end -->
</div>
<!-- moodboard-->
<div class="row no-gutters justify-content-center p-2 bg-secondary text-light" style="display:flex;border:2px dashed;">
<!-- image 1 -->
<div class="col-lg-4 " style="background-image:url(IMAGE HERE);min-height:150px;min-width:150px;background-size:cover;background-repeat:no-repeat;background-position:center;">
<!-- icon -->
<i class="fa-solid fa-pumpkin text-warning fa-4x" style="position:absolute;left:-2rem; bottom:0; text-shadow:2px 2px 8px #000;"></i>
<!-- icon end -->
</div>
<!-- image 2 -->
<div class="col-lg-4 p-5" style="background-image:url(IMAGE HERE);min-height:150px;min-width:150px;background-size:cover;background-repeat:no-repeat;background-position:center; "></div>
<!-- image 3 -->
<div class="col-lg-4 " style="background-image:url(IMAGE HERE);min-height:150px;min-width:150px;background-size:cover;background-repeat:no-repeat;background-position:left;">
<!-- icon -->
<i class="fa-solid fa-crow fa-4x text-light" style="position:absolute;right:-2rem; top:0; text-shadow:2px 2px 8px #000;"></i>
<!-- icon end-->
</div>
</div>
<!-- moodboard end -->
</div>
</div>
<!--Extras Tab start -->
<div id="extra" class="tab-pane fade">
<h1 class="text-light" style="font-family:'Courier';font-weight:bold;"><i class="fa-solid fa-2x fa-coffee-beans " style="font-size:40px;opacity:.5;"></i><span style="font-size:35px;margin-left:-15px;">EXTRAS</span></h1>
<hr class="col-md-11 mt-2 mb-3 text-light" style="border-top:2px dashed;">
<!-- likes and dislikes-->
<div class="row no-gutters align-content-center" style="display:flex;">
<div class="col-lg-6">
<!-- likes-->
<h1 class="text-light" style="font-family:'courier'; font-weight:bold;"><i class="fad fa-pie mr-2"></i>LIKES</h1>
<ul class="fa-ul p-2 text-light" style="font-family:'MS Gothic';">
<li><span class="fa-li"><i class="fal fa-heart"></i></span>Content</li>
<li><span class="fa-li"><i class="fal fa-heart"></i></span>Content</li>
<li><span class="fa-li"><i class="fal fa-heart"></i></span>Content</li>
<li><span class="fa-li"><i class="fal fa-heart"></i></span>Content</li>
</ul>
<!-- likes end -->
</div>
<!-- dislikes start-->
<div class="col-lg-6">
<h1 class="text-light" style="font-family:'courier'; font-weight:bold;;"> <i class="fad fa-skull mr-2"></i>DISLIKES</h1>
<ul class="fa-ul p-2 text-light" style="font-family:'MS Gothic';">
<li><span class="fa-li"><i class="fal fa-x"></i></span>Evil Content</li>
<li><span class="fa-li"><i class="fal fa-x"></i></span>Evil Content</li>
<li><span class="fa-li"><i class="fal fa-x"></i></span>Evil Content</li>
<li><span class="fa-li"><i class="fal fa-x"></i></span>Evil Content</li>
</ul>
</div>
<!-- dislikes end -->
</div>
<hr class="col-md-11 mt-1 mb-3 text-light" style="border-top:2px dashed;">
<!-- trivia -->
<ul class="fa-ul mt-3 text-light" style="font-family:'Garamond';">
<li><span><span class="fa-li"><i class="far fa-mug-marshmallows"></i></span>Trivia goes here! Extra info, fun facts, etc. </span></li>
<li class="mt-2"><span><span class="fa-li"><i class="far fa-cake-slice"></i></span>sorry about all the FA icons, i just think they're cute lol</span></li>
<li class="mt-2"><span><span class="fa-li"><i class="far fa-donut"></i></span>Black, spoon mocha beans, coffee seasonal cream est whipped. Kopi-luwak, doppio dark carajillo barista café au lait cortado coffee dripper. Plunger pot barista dark cream and fair trade aged kopi-luwak. </span></li>
<li class="mt-2"><span ><span class="fa-li"><i class="far fa-croissant"></i></span>Qui single shot bar aromatic, at that to go caramelization whipped milk organic single shot.</span></li>
</ul>
<!-- trivia end -->
</div>
</div>
<!--Extras Tab end-->
</div>
<p class="" style="color:#fff; position:absolute; right:.5vw;bottom:0;"><a href="https://toyhou.se/knightfright/characters/folder:4540592"><i class="fal fa-code"></i></a></p>
</div>
<!-- cafe code end -->
Custom Colors
<!--cafe code start-->
<div align="center">
<!--name sign-->
<div class="card col-lg-6 p-3 bg-faded" style="min-height:10px;border-radius: 500px; border-bottom:ridge 3px #B47226; border-top:ridge 3px #B47226; border-left:groove 10px #B47226;border-right:groove 10px #B47226;margin-bottom:;background-color:#341b0c;">
<h1 class="my-4" style="font-size:40px;font-family:'Lucida Bright';color:#A46528;"> <span class="p-4 m-2 hidden-sm-down" style="border-radius:90%;border:#ca855e 3px double;"><span class="fa-stack" style="font-size:1rem;">
<i class="fas fa-croissant fa-stack-2x " style="opacity:.7; font-size:3rem; margin-top:-1vw; margin-left:-.8vw;"></i>
<i class="fa-solid fa-mug-marshmallows fa-stack-1x " style="color:#ba7c4d; opacity:1;font-size:2.5rem;margin-left:1vw;"></i>
</span></span> NAME LASTNAME</h1>
</div>
<div class="p-1 col-lg-4" style=" border-left:groove 10px #B47226;border-right:groove 10px #B47226;max-width:225px;"></div>
</div>
<!--name sign end-->
<!--cafe building-->
<div class="row p-0 no-gutters m-0
justify-content-center ">
<div class=" col-lg-9 mx-2">
<div class="card" style="border-radius: 20px 20px 0px 0px ; min-height:500px;border-top:none; background-color:#34180c;border-left:5px groove #986145;border-right:5px ridge #986145;background-image:url(IMAGE OPTIONAL);border-bottom:5px groove #986145;">
<!--banner-->
<div class="banner" style="z-index:1;margin-left:-25px;margin-right:-20px; margin-bottom:-15px;">
<div class="card p-3 col-lg-12 justify-content-center " style="min-height:100px;border-bottom:none;border-radius: 20px 20px 0px 0px ; border-top:none;margin-bottom:-5px;background-color:#988957;border-left:5px solid #716232;border-right:5px solid #716232;border-top:5px solid #716232;">
</div>
<div class="row col-lg-12 p-0 no-gutters m-0
" style="display:row; flex-wrap: nowrap;">
<div class="col-lg-2 m card" style="border-top:none; min-height:90px; border-radius: 0px 0px 100px 100px ;background-color:#988957;border-left:5px solid #716232;border-right:5px solid #716232;border-bottom:5px solid #716232;"></div>
<div class="col-lg-2 m card" style="border-top:none; min-height:70px; border-radius: 0px 0px 100px 100px ;background-color:#988957;border-left:5px solid #716232;border-right:5px solid #716232;border-bottom:5px solid #716232;"></div>
<div class="col-lg-2 m card" style="border-top:none; min-height:70px; border-radius: 0px 0px 100px 100px ;background-color:#988957;border-left:5px solid #716232;border-right:5px solid #716232;border-bottom:5px solid #716232;"></div>
<div class="col-lg-2 hidden-md-down card" style="border-top:none; min-height:70px; border-radius: 0px 0px 100px 100px ;background-color:#988957;border-left:5px solid #716232;border-right:5px solid #716232;border-bottom:5px solid #716232;"></div>
<div class="col-lg-2 hidden-md-down card" style="border-top:none; min-height:70px; border-radius: 0px 0px 100px 100px ;background-color:#988957;border-left:5px solid #716232;border-right:5px solid #716232;border-bottom:5px solid #716232;"></div>
<div class="col-lg-2 hidden-md-down card" style="border-top:none; min-height:70px; border-radius: 0px 0px 100px 100px ;background-color:#988957;border-left:5px solid #716232;border-right:5px solid #716232;border-bottom:5px solid #716232;"></div>
</div>
</div>
<!--banner end-->
<div class="row p-0 no-gutters m-0
justify-content-center " style="display:flex;">
<!--left (window and menu)-->
<div class=" border-0 mt-2 mx-2 mb-4 col-lg-3">
<div class="card my-2 mx-2 p-2" style="height:200px;border-radius: 100% 100% 0% 0%; border:#986145 2px double; background-color:#ddaa77; ">
<div class="card" style="height:200px;border-radius: 100% 100% 0% 0% ;background-image:url(IMAGE HERE);background-position: center;background-repeat:no-repeat;background-size:cover"></div>
</div>
<!-- menu-->
<div class="card p-3 my-2 mx-1" style="height:180px;border-radius: 0px 0px 0px 0px ;background-color:#5C3822;border:ridge #5C3822 5px;">
<h1 style="text-align:center;font-family:'Lucida Bright'; color:#F0B695;"><i class="fa-duotone fa-sparkles hidden-md" style="color:#AE7A5C;"></i>MENU<i class="fa-duotone fa-sparkles fa-flip-horizontal hidden-md" style="color:#AE7A5C;"></i></h1>
<ul class="mt-0 nav row" style="text-align:left;">
<li class="nav-link col-lg-12 nav-item" style="font-family:'MS Gothic'; font-weight:bold; "><a data-toggle="tab" href="#basics" style="color:#F0B695;"><i class="fa-solid mr-2 fa-bagel" style="color:#AE7A5C;"></i>Basics</a><span class="pull-right" style="color:#C0947C;">....$1</span></li>
<li class="nav-link col-lg-12 nav-item" style="font-family:'MS Gothic'; font-weight:bold;"><a data-toggle="tab" href="#desg" style="color:#F0B695;"><i class="fa-solid mr-2 fa-pretzel" style="color:#AE7A5C;"></i>Design</a><span class="pull-right hidden-md" style="color:#C0947C;">....$2</span></li>
<li class="nav-link col-lg-12 nav-item" style="font-family:'MS Gothic'; font-weight:bold;"><a data-toggle="tab" href="#extra" style="color:#F0B695;"><i class="fa-solid mr-2 fa-cup-togo" style="color:#AE7A5C;"></i>Extras</a><span class="pull-right" style="color:#C0947C;">....$3</span></li>
</ul>
</div>
<!-- menu end-->
</div>
<!--left end-->
<!--right side-->
<div class="card baba col-lg-8 mt-2 mb-4 ml-2 p-3" style="max-height:400px; background-color:#ECD7BE; border:5px #E1BB8E solid;overflow-y:auto;overflow-x:hidden;">
<div class="tab-content">
<!--basics tab-->
<div id="basics" class="tab-pane active show fade">
<h1 style="font-family:'COURIER'; font-weight:bold;"><i class="fa-solid fa-2x fa-bagel " style="color:#AE7A5C;font-size:40px;opacity:;"></i><span class="py-" style="font-size:35px;margin-left:-15px; ">BASICS</span></h1>
<hr class="col-md-11 my-2" style="border-top:2px #B1754D dashed;">
<!--info columns-->
<div class="row p-2 " style="text-align:center; font-size:1.2rem; color:#8e521f;font-variant:small-caps;">
<div class="col-lg-6 ">
<span class="text-faded" style="font-family:'Courier';"><i class="fa-duotone fa-id-card pull-left" style="font-size:1.2rem;"></i> <span class="pull-right">First Middle Last</span></span>
</div>
<div class="col-lg-6 ">
<span class="text-faded" style="font-family:'Courier';"><i class="fa-duotone fa-transgender pull-left" style="font-size:1.2rem;"></i> <span class="pull-right">Gender Identity</span></span>
</div>
<div class="col-lg-6 ">
<span class="text-faded" style="font-family:'Courier';"><i class="fa-duotone fa-signature pull-left" style="font-size:1.2rem;"></i> <span class="pull-right">Pronouns</span></span>
</div>
<div class="col-lg-6 ">
<span class="text-faded" style="font-family:'Courier';"><i class="fa-duotone fa-hands-holding-heart pull-left" style="font-size:1.2rem;"></i> <span class="pull-right">Sexuality</span></span>
</div>
<div class="col-lg-6 ">
<span class="text-faded" style="font-family:'Courier';"><i class="fa-duotone fa-cake pull-left" style="font-size:1.2rem;"></i><span class="pull-right">Age/B-day</span></span>
</div>
<div class="col-lg-6 ">
<span class="text-faded" style="font-family:'Courier';"><i class="fa-duotone fa-dna pull-left" style="font-size:1.2rem;"></i> <span class="pull-right">Species/Race/Category</span></span>
</div>
<div class="col-lg-6 ">
<span class="text-faded" style="font-family:'Courier';"><i class="fa-duotone fa-store pull-left" style="font-size:1.2rem;"></i> <span class="pull-right">Occupation</span></span>
</div>
<div class="col-lg-6 ">
<span class="text-faded" style="font-family:'Courier';"><i class="fa-duotone fa-crown pull-left" style="font-size:1.2rem;"></i> <span class="pull-right">Role/Status/Etc.</span></span>
</div>
</div>
<!--columns end-->
<hr class="col-lg-12 mt-2 mb-3" style="border-top:2px #B1754D dashed;">
<!--overview-->
<span style="color: #B1754D;font-family:'Garamond'; font-size:1rem;">Write about ur character here! Basically an overview/brief introduction. Personality, abilities, story, etc.
<br><br>
Flavour a coffee flavour caffeine grounds bar caffeine french press in, plunger pot aftertaste foam latte instant caramelization cinnamon at crema. Crema, aged grinder sugar aroma filter mocha caramelization trifecta, java steamed et, americano as aged shop java. Filter variety carajillo caffeine, macchiato, aroma ut id galão fair trade, cream grinder half and half, java mazagran kopi-luwak macchiato café au lait breve, white acerbic frappuccino beans mocha.</span>
<!--overview end-->
</div>
<!--basics end, design start-->
<div id="desg" class="tab-pane fade">
<h1 style="font-family:'Courier'; font-weight:bold;"><i class="fa-solid fa-2x fa-pretzel " style="color:#AE7A5C;font-size:40px;opacity:;"></i><span class="py-" style="font-size:35px;margin-left:-15px;">DESIGN</span></h1>
<hr class="col-md-11 my-2" style="border-top:2px #B1754D dashed;">
<div class="row no-gutters justify-content-center m-2 p-1" style="display:flex;">
<!--ref image-->
<div class="col-lg-6 p-2" style="border:1px #B1754D dashed; background-color:#E5C8A6;">
<div class="" style="min-height:280px; background-image:url(IMAGE HERE);background-size:cover;background-repeat:no-repeat;"></div>
<!--ref end-->
</div>
<div class="col-md-6 p-3">
<!-- overview 2 -->
<p class="mb-1" style="font-size:20px; font-family:'Courier';font-weight:bold;"><span style="color: #b37460;">Overview</span></p><span style="color: #b37461;font-family:'Garamond';">Talk a little bit about ur oc's design here! Color choices, inspo, etc. Cortado, foam in cinnamon decaffeinated froth extra white espresso carajillo. Caramelization, wings doppio, barista bar est affogato extraction strong est single origin arabica. Roast qui, sweet iced café au lait pot coffee to go.</span>
<p class="p-2 m-2" style="text-align:center;font-family:'Courier'"><a href="LINK HERE" style="color:#ce5400;">{CLICK HERE FOR FULL REF}</a></p>
</div>
<!-- overview 2 end-->
<hr class="col-md-12 my-2" style="border-top:2px #B1754D dashed;">
<div class="row no-gutters col-lg-12 my-2" style="display:flex;">
<!-- design notes -->
<div class="col-lg-6">
<ul class=" p-2 fa-ul" style="font-family:'Garamond'; color:#8e521f;">
<li><span class="fa-li"><i class="fal fa-pencil"></i></span>Write some design notes here! Key features, some details, etc.</li>
<li><span class="fa-li"><i class="fal fa-pencil"></i></span>*dj khaled voice* anotha one</li>
<li><span class="fa-li"><i class="fal fa-exclamation-triangle"></i></span>You can also change the icons to better reflect the details ur listing! This one could be for some non-opional features.</li>
<li><span class="fa-li"><i class="fal fa-mitten"></i></span>Outfits, accessories, fashion etc whatever ur heart desires </li>
</ul>
<!-- notes end -->
</div>
<!-- palette, won't appear on smaller screens -->
<div class="col-lg-6 card p-3 hidden-md-down" style="background-color:#e5c8a6; border:2px ridge #e0aa64; ">
<div class="row align-content-center" style="display:flex; text-align:center;">
<!-- cookie 1 -->
<div class="col-lg-4" style=" text-align:center;">
<span style="text-align:center;"><i class="fa-solid fa-cookie" style="color:#000;font-size:2.7vw;"></i></span>
<span class="" style="text-align:center; font-family:'MS Gothic';">#000</span>
</div>
<!-- cookie 2-->
<div class="col-lg-4" style=" text-align:center;">
<span style="text-align:center;"><i class="fa-solid fa-cookie-bite" style="color:#000;font-size:2.7vw;"></i></span>
<span class="" style="text-align:center; font-family:'MS Gothic';">#000</span>
</div>
<!-- cookie 3 -->
<div class="col-lg-4" style=" text-align:center;">
<span style="text-align:center;"><i class="fa-solid fa-cookie" style="color:#000;font-size:2.7vw;"></i></span>
<span class="" style="text-align:center; font-family:'MS Gothic';">#000</span>
</div>
<!-- cookie 4 -->
<div class="col-lg-4" style=" text-align:center;">
<span style="text-align:center;"><i class="fa-solid fa-cookie" style="color:#000;font-size:2.7vw;"></i></span>
<span class="" style="text-align:center; font-family:'MS Gothic';">#000</span>
</div>
<!-- cookie 5 -->
<div class="col-lg-4" style=" text-align:center;">
<span style="text-align:center;"><i class="fa-solid fa-cookie" style="color:#000;font-size:2.7vw;"></i></span>
<span class="" style="text-align:center; font-family:'MS Gothic';">#000</span>
</div>
<!-- cookie 6 -->
<div class="col-lg-4" style=" text-align:center;">
<span style="text-align:center;"><i class="fa-solid fa-cookie" style="color:#000;font-size:2.7vw;"></i></span>
<span class="" style="text-align:center; font-family:'MS Gothic';">#000</span>
</div>
<!-- cookie 7 -->
<div class="col-lg-4" style=" text-align:center;">
<span style="text-align:center;"><i class="fa-solid fa-cookie-bite" style="color:#000;font-size:2.7vw;"></i></span>
<span class="" style="text-align:center; font-family:'MS Gothic';">#000</span>
</div>
<!-- cookie 8 -->
<div class="col-lg-4" style=" text-align:center;">
<span style="text-align:center;"><i class="fa-solid fa-cookie" style="color:#000;font-size:2.7vw;"></i></span>
<span class="" style="text-align:center; font-family:'MS Gothic';">#000</span>
</div>
<!-- cookie 9 -->
<div class="col-lg-4" style=" text-align:center;">
<span style="text-align:center;"><i class="fa-solid fa-cookie" style="color:#000;font-size:2.7vw;"></i></span>
<span class="" style="text-align:center; font-family:'MS Gothic';">#000</span>
</div>
<!-- cookies end -->
</div>
</div>
<!-- palette end -->
</div>
<!-- moodboard-->
<div class="row no-gutters justify-content-center p-2" style="display:flex;border:2px #B1754D dashed;background-color:#E5C8A6;">
<!-- image 1 -->
<div class="col-lg-4 " style="background-image:url(IMAGE HERE);min-height:150px;min-width:150px;background-size:cover;background-repeat:no-repeat;background-position:center;">
<!-- icon -->
<i class="fa-solid fa-pumpkin fa-4x" style="position:absolute;left:-2rem; bottom:0;color:#bf5307; text-shadow:2px 2px 8px #000;"></i>
<!-- icon end -->
</div>
<!-- image 2 -->
<div class="col-lg-4 p-5" style="background-image:url(IMAGE HERE);min-height:150px;min-width:150px;background-size:cover;background-repeat:no-repeat;background-position:center; "></div>
<!-- image 3 -->
<div class="col-lg-4 " style="background-image:url(IMAGE HERE);min-height:150px;min-width:150px;background-size:cover;background-repeat:no-repeat;background-position:left;">
<!-- icon -->
<i class="fa-solid fa-crow fa-4x" style="position:absolute;right:-2rem; top:0;color:#fff2e8; text-shadow:2px 2px 8px #000;"></i>
<!-- icon end-->
</div>
</div>
<!-- moodboard end -->
</div>
</div>
<!--Extras Tab start -->
<div id="extra" class="tab-pane fade">
<h1 style="font-family:'Courier';font-weight:bold;"><i class="fa-solid fa-2x fa-coffee-beans " style="color:#AE7A5C;font-size:40px;opacity:;"></i><span class="py-" style="font-size:35px;margin-left:-15px;">EXTRAS</span></h1>
<hr class="col-md-11 mt-2 mb-3" style="border-top:2px #B1754D dashed;">
<!-- likes and dislikes-->
<div class="row no-gutters align-content-center" style="display:flex;">
<div class="col-lg-6">
<!-- likes-->
<h1 style="font-family:'courier'; font-weight:bold;color:#965e38;"><i class="fad fa-pie mr-2"></i>LIKES</h1>
<ul class="fa-ul p-2" style="color:#854622;font-family:'MS Gothic';">
<li><span class="fa-li"><i class="fal fa-heart"></i></span>Content</li>
<li><span class="fa-li"><i class="fal fa-heart"></i></span>Content</li>
<li><span class="fa-li"><i class="fal fa-heart"></i></span>Content</li>
<li><span class="fa-li"><i class="fal fa-heart"></i></span>Content</li>
</ul>
<!-- likes end -->
</div>
<!-- dislikes start-->
<div class="col-lg-6">
<h1 style="font-family:'courier'; font-weight:bold;color:#965e38;"> <i class="fad fa-skull mr-2"></i>DISLIKES</h1>
<ul class="fa-ul p-2" style="color:#854622;font-family:'MS Gothic';">
<li><span class="fa-li"><i class="fal fa-x"></i></span>Evil Content</li>
<li><span class="fa-li"><i class="fal fa-x"></i></span>Evil Content</li>
<li><span class="fa-li"><i class="fal fa-x"></i></span>Evil Content</li>
<li><span class="fa-li"><i class="fal fa-x"></i></span>Evil Content</li>
</ul>
</div>
<!-- dislikes end -->
</div>
<hr class="col-md-11 mt-1 mb-3" style="border-top:2px #B1754D dashed;">
<!-- trivia -->
<ul class="fa-ul mt-3" style="font-family:'Garamond';">
<li><span style="color: rgb(179, 116, 96);"><span class="fa-li"><i class="far fa-mug-marshmallows"></i></span>Trivia goes here! Extra info, fun facts, etc. </span></li>
<li class="mt-2"><span style="color: rgb(179, 116, 96);"><span class="fa-li"><i class="far fa-cake-slice"></i></span>sorry about all the FA icons, i just think they're cute lol</span></li>
<li class="mt-2"><span style="color: rgb(179, 116, 96);"><span class="fa-li"><i class="far fa-donut"></i></span>Black, spoon mocha beans, coffee seasonal cream est whipped. Kopi-luwak, doppio dark carajillo barista café au lait cortado coffee dripper. Plunger pot barista dark cream and fair trade aged kopi-luwak.</span></li>
<li class="mt-2"><span style="color: rgb(179, 116, 96);"><span class="fa-li"><i class="far fa-croissant"></i></span>Qui single shot bar aromatic, at that to go caramelization whipped milk organic single shot.</span></li>
</ul>
<!-- trivia end -->
</div>
</div>
<!--Extras Tab end-->
</div>
<p class="" style="color:#fff; position:absolute; right:.5vw;bottom:0;"><a href="https://toyhou.se/knightfright/characters/folder:4540592" style="color:#fdc79f;"><i class="fal fa-code"></i></a></p>
</div>
<!-- cafe code end -->
<div align="center">
<!--name sign-->
<div class="card col-lg-6 p-3 bg-faded" style="min-height:10px;border-radius: 500px; border-bottom:ridge 3px #B47226; border-top:ridge 3px #B47226; border-left:groove 10px #B47226;border-right:groove 10px #B47226;margin-bottom:;background-color:#341b0c;">
<h1 class="my-4" style="font-size:40px;font-family:'Lucida Bright';color:#A46528;"> <span class="p-4 m-2 hidden-sm-down" style="border-radius:90%;border:#ca855e 3px double;"><span class="fa-stack" style="font-size:1rem;">
<i class="fas fa-croissant fa-stack-2x " style="opacity:.7; font-size:3rem; margin-top:-1vw; margin-left:-.8vw;"></i>
<i class="fa-solid fa-mug-marshmallows fa-stack-1x " style="color:#ba7c4d; opacity:1;font-size:2.5rem;margin-left:1vw;"></i>
</span></span> NAME LASTNAME</h1>
</div>
<div class="p-1 col-lg-4" style=" border-left:groove 10px #B47226;border-right:groove 10px #B47226;max-width:225px;"></div>
</div>
<!--name sign end-->
<!--cafe building-->
<div class="row p-0 no-gutters m-0
justify-content-center ">
<div class=" col-lg-9 mx-2">
<div class="card" style="border-radius: 20px 20px 0px 0px ; min-height:500px;border-top:none; background-color:#34180c;border-left:5px groove #986145;border-right:5px ridge #986145;background-image:url(IMAGE OPTIONAL);border-bottom:5px groove #986145;">
<!--banner-->
<div class="banner" style="z-index:1;margin-left:-25px;margin-right:-20px; margin-bottom:-15px;">
<div class="card p-3 col-lg-12 justify-content-center " style="min-height:100px;border-bottom:none;border-radius: 20px 20px 0px 0px ; border-top:none;margin-bottom:-5px;background-color:#988957;border-left:5px solid #716232;border-right:5px solid #716232;border-top:5px solid #716232;">
</div>
<div class="row col-lg-12 p-0 no-gutters m-0
" style="display:row; flex-wrap: nowrap;">
<div class="col-lg-2 m card" style="border-top:none; min-height:90px; border-radius: 0px 0px 100px 100px ;background-color:#988957;border-left:5px solid #716232;border-right:5px solid #716232;border-bottom:5px solid #716232;"></div>
<div class="col-lg-2 m card" style="border-top:none; min-height:70px; border-radius: 0px 0px 100px 100px ;background-color:#988957;border-left:5px solid #716232;border-right:5px solid #716232;border-bottom:5px solid #716232;"></div>
<div class="col-lg-2 m card" style="border-top:none; min-height:70px; border-radius: 0px 0px 100px 100px ;background-color:#988957;border-left:5px solid #716232;border-right:5px solid #716232;border-bottom:5px solid #716232;"></div>
<div class="col-lg-2 hidden-md-down card" style="border-top:none; min-height:70px; border-radius: 0px 0px 100px 100px ;background-color:#988957;border-left:5px solid #716232;border-right:5px solid #716232;border-bottom:5px solid #716232;"></div>
<div class="col-lg-2 hidden-md-down card" style="border-top:none; min-height:70px; border-radius: 0px 0px 100px 100px ;background-color:#988957;border-left:5px solid #716232;border-right:5px solid #716232;border-bottom:5px solid #716232;"></div>
<div class="col-lg-2 hidden-md-down card" style="border-top:none; min-height:70px; border-radius: 0px 0px 100px 100px ;background-color:#988957;border-left:5px solid #716232;border-right:5px solid #716232;border-bottom:5px solid #716232;"></div>
</div>
</div>
<!--banner end-->
<div class="row p-0 no-gutters m-0
justify-content-center " style="display:flex;">
<!--left (window and menu)-->
<div class=" border-0 mt-2 mx-2 mb-4 col-lg-3">
<div class="card my-2 mx-2 p-2" style="height:200px;border-radius: 100% 100% 0% 0%; border:#986145 2px double; background-color:#ddaa77; ">
<div class="card" style="height:200px;border-radius: 100% 100% 0% 0% ;background-image:url(IMAGE HERE);background-position: center;background-repeat:no-repeat;background-size:cover"></div>
</div>
<!-- menu-->
<div class="card p-3 my-2 mx-1" style="height:180px;border-radius: 0px 0px 0px 0px ;background-color:#5C3822;border:ridge #5C3822 5px;">
<h1 style="text-align:center;font-family:'Lucida Bright'; color:#F0B695;"><i class="fa-duotone fa-sparkles hidden-md" style="color:#AE7A5C;"></i>MENU<i class="fa-duotone fa-sparkles fa-flip-horizontal hidden-md" style="color:#AE7A5C;"></i></h1>
<ul class="mt-0 nav row" style="text-align:left;">
<li class="nav-link col-lg-12 nav-item" style="font-family:'MS Gothic'; font-weight:bold; "><a data-toggle="tab" href="#basics" style="color:#F0B695;"><i class="fa-solid mr-2 fa-bagel" style="color:#AE7A5C;"></i>Basics</a><span class="pull-right" style="color:#C0947C;">....$1</span></li>
<li class="nav-link col-lg-12 nav-item" style="font-family:'MS Gothic'; font-weight:bold;"><a data-toggle="tab" href="#desg" style="color:#F0B695;"><i class="fa-solid mr-2 fa-pretzel" style="color:#AE7A5C;"></i>Design</a><span class="pull-right hidden-md" style="color:#C0947C;">....$2</span></li>
<li class="nav-link col-lg-12 nav-item" style="font-family:'MS Gothic'; font-weight:bold;"><a data-toggle="tab" href="#extra" style="color:#F0B695;"><i class="fa-solid mr-2 fa-cup-togo" style="color:#AE7A5C;"></i>Extras</a><span class="pull-right" style="color:#C0947C;">....$3</span></li>
</ul>
</div>
<!-- menu end-->
</div>
<!--left end-->
<!--right side-->
<div class="card baba col-lg-8 mt-2 mb-4 ml-2 p-3" style="max-height:400px; background-color:#ECD7BE; border:5px #E1BB8E solid;overflow-y:auto;overflow-x:hidden;">
<div class="tab-content">
<!--basics tab-->
<div id="basics" class="tab-pane active show fade">
<h1 style="font-family:'COURIER'; font-weight:bold;"><i class="fa-solid fa-2x fa-bagel " style="color:#AE7A5C;font-size:40px;opacity:;"></i><span class="py-" style="font-size:35px;margin-left:-15px; ">BASICS</span></h1>
<hr class="col-md-11 my-2" style="border-top:2px #B1754D dashed;">
<!--info columns-->
<div class="row p-2 " style="text-align:center; font-size:1.2rem; color:#8e521f;font-variant:small-caps;">
<div class="col-lg-6 ">
<span class="text-faded" style="font-family:'Courier';"><i class="fa-duotone fa-id-card pull-left" style="font-size:1.2rem;"></i> <span class="pull-right">First Middle Last</span></span>
</div>
<div class="col-lg-6 ">
<span class="text-faded" style="font-family:'Courier';"><i class="fa-duotone fa-transgender pull-left" style="font-size:1.2rem;"></i> <span class="pull-right">Gender Identity</span></span>
</div>
<div class="col-lg-6 ">
<span class="text-faded" style="font-family:'Courier';"><i class="fa-duotone fa-signature pull-left" style="font-size:1.2rem;"></i> <span class="pull-right">Pronouns</span></span>
</div>
<div class="col-lg-6 ">
<span class="text-faded" style="font-family:'Courier';"><i class="fa-duotone fa-hands-holding-heart pull-left" style="font-size:1.2rem;"></i> <span class="pull-right">Sexuality</span></span>
</div>
<div class="col-lg-6 ">
<span class="text-faded" style="font-family:'Courier';"><i class="fa-duotone fa-cake pull-left" style="font-size:1.2rem;"></i><span class="pull-right">Age/B-day</span></span>
</div>
<div class="col-lg-6 ">
<span class="text-faded" style="font-family:'Courier';"><i class="fa-duotone fa-dna pull-left" style="font-size:1.2rem;"></i> <span class="pull-right">Species/Race/Category</span></span>
</div>
<div class="col-lg-6 ">
<span class="text-faded" style="font-family:'Courier';"><i class="fa-duotone fa-store pull-left" style="font-size:1.2rem;"></i> <span class="pull-right">Occupation</span></span>
</div>
<div class="col-lg-6 ">
<span class="text-faded" style="font-family:'Courier';"><i class="fa-duotone fa-crown pull-left" style="font-size:1.2rem;"></i> <span class="pull-right">Role/Status/Etc.</span></span>
</div>
</div>
<!--columns end-->
<hr class="col-lg-12 mt-2 mb-3" style="border-top:2px #B1754D dashed;">
<!--overview-->
<span style="color: #B1754D;font-family:'Garamond'; font-size:1rem;">Write about ur character here! Basically an overview/brief introduction. Personality, abilities, story, etc.
<br><br>
Flavour a coffee flavour caffeine grounds bar caffeine french press in, plunger pot aftertaste foam latte instant caramelization cinnamon at crema. Crema, aged grinder sugar aroma filter mocha caramelization trifecta, java steamed et, americano as aged shop java. Filter variety carajillo caffeine, macchiato, aroma ut id galão fair trade, cream grinder half and half, java mazagran kopi-luwak macchiato café au lait breve, white acerbic frappuccino beans mocha.</span>
<!--overview end-->
</div>
<!--basics end, design start-->
<div id="desg" class="tab-pane fade">
<h1 style="font-family:'Courier'; font-weight:bold;"><i class="fa-solid fa-2x fa-pretzel " style="color:#AE7A5C;font-size:40px;opacity:;"></i><span class="py-" style="font-size:35px;margin-left:-15px;">DESIGN</span></h1>
<hr class="col-md-11 my-2" style="border-top:2px #B1754D dashed;">
<div class="row no-gutters justify-content-center m-2 p-1" style="display:flex;">
<!--ref image-->
<div class="col-lg-6 p-2" style="border:1px #B1754D dashed; background-color:#E5C8A6;">
<div class="" style="min-height:280px; background-image:url(IMAGE HERE);background-size:cover;background-repeat:no-repeat;"></div>
<!--ref end-->
</div>
<div class="col-md-6 p-3">
<!-- overview 2 -->
<p class="mb-1" style="font-size:20px; font-family:'Courier';font-weight:bold;"><span style="color: #b37460;">Overview</span></p><span style="color: #b37461;font-family:'Garamond';">Talk a little bit about ur oc's design here! Color choices, inspo, etc. Cortado, foam in cinnamon decaffeinated froth extra white espresso carajillo. Caramelization, wings doppio, barista bar est affogato extraction strong est single origin arabica. Roast qui, sweet iced café au lait pot coffee to go.</span>
<p class="p-2 m-2" style="text-align:center;font-family:'Courier'"><a href="LINK HERE" style="color:#ce5400;">{CLICK HERE FOR FULL REF}</a></p>
</div>
<!-- overview 2 end-->
<hr class="col-md-12 my-2" style="border-top:2px #B1754D dashed;">
<div class="row no-gutters col-lg-12 my-2" style="display:flex;">
<!-- design notes -->
<div class="col-lg-6">
<ul class=" p-2 fa-ul" style="font-family:'Garamond'; color:#8e521f;">
<li><span class="fa-li"><i class="fal fa-pencil"></i></span>Write some design notes here! Key features, some details, etc.</li>
<li><span class="fa-li"><i class="fal fa-pencil"></i></span>*dj khaled voice* anotha one</li>
<li><span class="fa-li"><i class="fal fa-exclamation-triangle"></i></span>You can also change the icons to better reflect the details ur listing! This one could be for some non-opional features.</li>
<li><span class="fa-li"><i class="fal fa-mitten"></i></span>Outfits, accessories, fashion etc whatever ur heart desires </li>
</ul>
<!-- notes end -->
</div>
<!-- palette, won't appear on smaller screens -->
<div class="col-lg-6 card p-3 hidden-md-down" style="background-color:#e5c8a6; border:2px ridge #e0aa64; ">
<div class="row align-content-center" style="display:flex; text-align:center;">
<!-- cookie 1 -->
<div class="col-lg-4" style=" text-align:center;">
<span style="text-align:center;"><i class="fa-solid fa-cookie" style="color:#000;font-size:2.7vw;"></i></span>
<span class="" style="text-align:center; font-family:'MS Gothic';">#000</span>
</div>
<!-- cookie 2-->
<div class="col-lg-4" style=" text-align:center;">
<span style="text-align:center;"><i class="fa-solid fa-cookie-bite" style="color:#000;font-size:2.7vw;"></i></span>
<span class="" style="text-align:center; font-family:'MS Gothic';">#000</span>
</div>
<!-- cookie 3 -->
<div class="col-lg-4" style=" text-align:center;">
<span style="text-align:center;"><i class="fa-solid fa-cookie" style="color:#000;font-size:2.7vw;"></i></span>
<span class="" style="text-align:center; font-family:'MS Gothic';">#000</span>
</div>
<!-- cookie 4 -->
<div class="col-lg-4" style=" text-align:center;">
<span style="text-align:center;"><i class="fa-solid fa-cookie" style="color:#000;font-size:2.7vw;"></i></span>
<span class="" style="text-align:center; font-family:'MS Gothic';">#000</span>
</div>
<!-- cookie 5 -->
<div class="col-lg-4" style=" text-align:center;">
<span style="text-align:center;"><i class="fa-solid fa-cookie" style="color:#000;font-size:2.7vw;"></i></span>
<span class="" style="text-align:center; font-family:'MS Gothic';">#000</span>
</div>
<!-- cookie 6 -->
<div class="col-lg-4" style=" text-align:center;">
<span style="text-align:center;"><i class="fa-solid fa-cookie" style="color:#000;font-size:2.7vw;"></i></span>
<span class="" style="text-align:center; font-family:'MS Gothic';">#000</span>
</div>
<!-- cookie 7 -->
<div class="col-lg-4" style=" text-align:center;">
<span style="text-align:center;"><i class="fa-solid fa-cookie-bite" style="color:#000;font-size:2.7vw;"></i></span>
<span class="" style="text-align:center; font-family:'MS Gothic';">#000</span>
</div>
<!-- cookie 8 -->
<div class="col-lg-4" style=" text-align:center;">
<span style="text-align:center;"><i class="fa-solid fa-cookie" style="color:#000;font-size:2.7vw;"></i></span>
<span class="" style="text-align:center; font-family:'MS Gothic';">#000</span>
</div>
<!-- cookie 9 -->
<div class="col-lg-4" style=" text-align:center;">
<span style="text-align:center;"><i class="fa-solid fa-cookie" style="color:#000;font-size:2.7vw;"></i></span>
<span class="" style="text-align:center; font-family:'MS Gothic';">#000</span>
</div>
<!-- cookies end -->
</div>
</div>
<!-- palette end -->
</div>
<!-- moodboard-->
<div class="row no-gutters justify-content-center p-2" style="display:flex;border:2px #B1754D dashed;background-color:#E5C8A6;">
<!-- image 1 -->
<div class="col-lg-4 " style="background-image:url(IMAGE HERE);min-height:150px;min-width:150px;background-size:cover;background-repeat:no-repeat;background-position:center;">
<!-- icon -->
<i class="fa-solid fa-pumpkin fa-4x" style="position:absolute;left:-2rem; bottom:0;color:#bf5307; text-shadow:2px 2px 8px #000;"></i>
<!-- icon end -->
</div>
<!-- image 2 -->
<div class="col-lg-4 p-5" style="background-image:url(IMAGE HERE);min-height:150px;min-width:150px;background-size:cover;background-repeat:no-repeat;background-position:center; "></div>
<!-- image 3 -->
<div class="col-lg-4 " style="background-image:url(IMAGE HERE);min-height:150px;min-width:150px;background-size:cover;background-repeat:no-repeat;background-position:left;">
<!-- icon -->
<i class="fa-solid fa-crow fa-4x" style="position:absolute;right:-2rem; top:0;color:#fff2e8; text-shadow:2px 2px 8px #000;"></i>
<!-- icon end-->
</div>
</div>
<!-- moodboard end -->
</div>
</div>
<!--Extras Tab start -->
<div id="extra" class="tab-pane fade">
<h1 style="font-family:'Courier';font-weight:bold;"><i class="fa-solid fa-2x fa-coffee-beans " style="color:#AE7A5C;font-size:40px;opacity:;"></i><span class="py-" style="font-size:35px;margin-left:-15px;">EXTRAS</span></h1>
<hr class="col-md-11 mt-2 mb-3" style="border-top:2px #B1754D dashed;">
<!-- likes and dislikes-->
<div class="row no-gutters align-content-center" style="display:flex;">
<div class="col-lg-6">
<!-- likes-->
<h1 style="font-family:'courier'; font-weight:bold;color:#965e38;"><i class="fad fa-pie mr-2"></i>LIKES</h1>
<ul class="fa-ul p-2" style="color:#854622;font-family:'MS Gothic';">
<li><span class="fa-li"><i class="fal fa-heart"></i></span>Content</li>
<li><span class="fa-li"><i class="fal fa-heart"></i></span>Content</li>
<li><span class="fa-li"><i class="fal fa-heart"></i></span>Content</li>
<li><span class="fa-li"><i class="fal fa-heart"></i></span>Content</li>
</ul>
<!-- likes end -->
</div>
<!-- dislikes start-->
<div class="col-lg-6">
<h1 style="font-family:'courier'; font-weight:bold;color:#965e38;"> <i class="fad fa-skull mr-2"></i>DISLIKES</h1>
<ul class="fa-ul p-2" style="color:#854622;font-family:'MS Gothic';">
<li><span class="fa-li"><i class="fal fa-x"></i></span>Evil Content</li>
<li><span class="fa-li"><i class="fal fa-x"></i></span>Evil Content</li>
<li><span class="fa-li"><i class="fal fa-x"></i></span>Evil Content</li>
<li><span class="fa-li"><i class="fal fa-x"></i></span>Evil Content</li>
</ul>
</div>
<!-- dislikes end -->
</div>
<hr class="col-md-11 mt-1 mb-3" style="border-top:2px #B1754D dashed;">
<!-- trivia -->
<ul class="fa-ul mt-3" style="font-family:'Garamond';">
<li><span style="color: rgb(179, 116, 96);"><span class="fa-li"><i class="far fa-mug-marshmallows"></i></span>Trivia goes here! Extra info, fun facts, etc. </span></li>
<li class="mt-2"><span style="color: rgb(179, 116, 96);"><span class="fa-li"><i class="far fa-cake-slice"></i></span>sorry about all the FA icons, i just think they're cute lol</span></li>
<li class="mt-2"><span style="color: rgb(179, 116, 96);"><span class="fa-li"><i class="far fa-donut"></i></span>Black, spoon mocha beans, coffee seasonal cream est whipped. Kopi-luwak, doppio dark carajillo barista café au lait cortado coffee dripper. Plunger pot barista dark cream and fair trade aged kopi-luwak.</span></li>
<li class="mt-2"><span style="color: rgb(179, 116, 96);"><span class="fa-li"><i class="far fa-croissant"></i></span>Qui single shot bar aromatic, at that to go caramelization whipped milk organic single shot.</span></li>
</ul>
<!-- trivia end -->
</div>
</div>
<!--Extras Tab end-->
</div>
<p class="" style="color:#fff; position:absolute; right:.5vw;bottom:0;"><a href="https://toyhou.se/knightfright/characters/folder:4540592" style="color:#fdc79f;"><i class="fal fa-code"></i></a></p>
</div>
<!-- cafe code end -->
Recent Images
No images.