<!--
Moonlit Garden, f2u character code by Evoidless
-----------------------------------------------
🦋 Hello there! I'm one of the butterflies from the garden, here to assist you!
I'll help guide you through what can be edited in this code! Remember to read the rules!
-->
<!--Container-->
<div class="container bg-faded mt-5" style="max-width: 1000px; border-radius: 10px">
<!---->
<!--Banner-->
<div class="row">
<!--🦋 Here you can edit the background of the banner by replacing the link in the url with the image address! I recommend png images instead of jpg for larger images like this!-->
<div class="card border-0" style="width: 1200px; height: 300px; background-image:url(https://i.pinimg.com/564x/59/e4/03/59e403b7bdc175acf176c49c14f3ff54.jpg); background-size: cover; background-position: center; background-color: #D4D5D9; ">
<div class="container bg-transparent border-0">
<!--🦋 This is one of the butterfly gifs! Leave it if you'd like to keep my butterfly friends-->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/76745725_1kt1DxAv7n464SA.gif?1706206768" style="height: 200px; width: 200px; position: absolute; background-position: top; top: 20px; right: -100px;">
</div>
</div>
<!---->
<div class="card border-0" style="width: 1200px; height: 100px;">
<!--Icon-->
<div class="rounded-circle bg-faded" style="height: 220px; width: 220px; position: absolute; background-position: center; top: -120px; left: 25px; border:10px solid #FFFFFF; background-color: #FFFFFF"></div>
<!--🦋 Here is the icon in the crescent moon! Put a pic of your oc!-->
<div class="rounded-circle bg-faded border-0" style="background-image:url(https://i.pinimg.com/736x/2a/99/e0/2a99e074e148e49a58214426faf60719.jpg); height: 200px; width: 200px; position: absolute; background-size: cover; background-position: top; top: -100px; left: 20px; background-color: #80CC91"></div>
<!---->
<!--Quote-->
<p class="p-4 mt-2" style="position:absolute; left: 250px; font-size: 20px">
<!--🦋 Here's the quote box! Replace the quote!-->
<i class="pull-left mr-5 fad fa-quote-left fa-md"></i> Quote goes here! <i class="pull-right ml-5 fad fa-quote-right fa-md"></i> </p>
</div>
</div>
<!---->
<!--Content Box-->
<div class="container bg-faded p-3" style="border-radius: 10px">
<div class="row no-gutters">
<div class="col">
<div class="card border-0 my-3 mr-3 p-3 text-center" style="width: 500px; height: 400px; border-radius: 20px;">
<!--Upper Info-->
<!--🦋 Replace the words below to fill in the top left box!-->
<p class="text-muted" style="font-size: 30px">Name</p>
<hr class="my-1 faded">
<span style="font-size: 20px">Content • Content • Content</span>
<hr class="my-1 faded">
<div class="card"></div>
<!-------------->
<!--Inside Content-->
<hr class="my-1 faded">
<div class="justify-content-between p-3 mx-5 mt-3">
<span class="text-uppercase font-weight-bold text-muted" style="font-weight: 300; letter-spacing: 1px;">CONTENT</span>
<span>content</span>
</div>
<hr class="my-1 faded">
<div class="justify-content-between p-3 mx-5">
<span class="text-uppercase font-weight-bold text-muted" style="font-weight: 300; letter-spacing: 1px;">CONTENT</span>
<span>content</span>
</div>
<hr class="my-1 faded">
<div class="justify-content-between p-3 mx-5">
<span class="text-uppercase font-weight-bold text-muted" style="font-weight: 300; letter-spacing: 1px;">CONTENT</span>
<span>content</span>
</div>
<hr class="my-1 faded">
<div class="justify-content-between p-3 mx-5">
<span class="text-uppercase font-weight-bold text-muted" style="font-weight: 300; letter-spacing: 1px;">CONTENT</span>
<span>content</span>
</div>
<hr class="my-1 faded">
<!-------------->
</div>
</div>
<!---->
<!--Top left art-->
<!--🦋 The image for the top left box!-->
<div class="card border-0 my-3 ml-3" style="width: 400px; height: 400px; background-image:url(https://i.pinimg.com/564x/65/b2/36/65b236ad9d437ff42e0560d1ce9637a2.jpg); background-size: cover; background-position: center; border-radius: 20px;"></div>
<div class="col">
</div>
</div>
<!---->
<!--Navigation Bar-->
<div class="row no-gutters">
<!--🦋 Here is the navbar's header! Change the background color to whatever fits your theme!-->
<div class="card border-0 mx-4 mt-3 p-3 w-100" style="border; background-color:#AE94BC;">
<div class="mx-auto text-center py-1 col-lg-8">
<ul class="nav row">
<li class="nav-item col">
<a class="p-2 text-white active" href="#lore" data-toggle="tab"><i class="fas fa-book-open"></i></a>
</li>
<li class="nav-item col">
<a class="p-2 text-white" href="#moodboard" data-toggle="tab"> <i class="fas fa-star"></i> </a>
</li>
<li class="nav-item col">
<a class="p-2 text-white" href="#personality" data-toggle="tab"> <i class="fas fa-heart"></i> </a>
</li>
<li class="nav-item col">
<a class="p-2 text-white" href="#tnt" data-toggle="tab"> <i class="fas fa-star"></i> </a>
</li>
<li class="nav-item col">
<a class="p-2 text-white" href="#relationships" data-toggle="tab"> <i class="fas fa-user"></i> </a>
</li>
</ul>
</div>
</div>
<!--Lore/Backstory-->
<div class="card border-0 mx-4 mb-3 p-3 table-responsive tab-content" style="border; height:400px; overflow: auto;">
<div class="tab-pane fade active show" id="lore">
<div class="p-3">
<h1 class="text-center my-3">Backstory</h1>
<div class="card"></div>
<!--🦋 This is the first tab in the navigation box! Put in your oc's backstory here!-->
<p class="text-center text-muted mt-3" style="line-height: 2rem">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi, ab quisquam maiores ducimus ipsum at ratione saepe corporis numquam nemo explicabo impedit exercitationem pariatur facere consectetur consequuntur aperiam similique amet animi maxime officia quae? Aspernatur illum impedit quibusdam deleniti, sed necessitatibus temporibus aliquam nisi! Veniam, voluptate! Quia neque facilis debitis fugiat harum temporibus veniam doloribus, suscipit quas. Possimus, officia unde!</p>
<p class="text-center text-muted mt-3" style="line-height: 2rem">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi, ab quisquam maiores ducimus ipsum at ratione saepe corporis numquam nemo explicabo impedit exercitationem pariatur facere consectetur consequuntur aperiam similique amet animi maxime officia quae? Aspernatur illum impedit quibusdam deleniti, sed necessitatibus temporibus aliquam nisi! Veniam, voluptate! Quia neque facilis debitis fugiat harum temporibus veniam doloribus, suscipit quas. Possimus, officia unde!</p>
<p class="text-center text-muted mt-3" style="line-height: 2rem">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi, ab quisquam maiores ducimus ipsum at ratione saepe corporis numquam nemo explicabo impedit exercitationem pariatur facere consectetur consequuntur aperiam similique amet animi maxime officia quae? Aspernatur illum impedit quibusdam deleniti, sed necessitatibus temporibus aliquam nisi! Veniam, voluptate! Quia neque facilis debitis fugiat harum temporibus veniam doloribus, suscipit quas. Possimus, officia unde!</p>
</div>
</div>
<!--Moodboard-->
<div class="tab-pane fade" id="moodboard">
<div class="p-3">
<h1 class="text-center my-3">Moodboard</h1>
<div class="card"></div>
<!--🦋 This is the second tab in the navigation box! Replace the images to create a moodboard for your oc!-->
<div class="row no-gutters mt-5">
<div class="card border-0 mx-2" style="width: 170px; height: 170px; background-image:url(https://i.pinimg.com/564x/59/e4/03/59e403b7bdc175acf176c49c14f3ff54.jpg); background-size: cover; background-position: center;"></div>
<div class="col">
</div>
<div class="card border-0 mx-2" style="width: 170px; height: 170px; background-image:url(https://i.pinimg.com/564x/59/e4/03/59e403b7bdc175acf176c49c14f3ff54.jpg); background-size: cover; background-position: center;"></div>
<div class="col">
</div>
<div class="card border-0 mx-2" style="width: 170px; height: 170px; background-image:url(https://i.pinimg.com/564x/59/e4/03/59e403b7bdc175acf176c49c14f3ff54.jpg); background-size: cover; background-position: center;"></div>
<div class="col">
</div>
<div class="card border-0 mx-2" style="width: 170px; height: 170px; background-image:url(https://i.pinimg.com/564x/59/e4/03/59e403b7bdc175acf176c49c14f3ff54.jpg); background-size: cover; background-position: center;"></div>
</div>
</div>
</div>
<!--Personality-->
<div class="tab-pane fade" id="personality">
<div class="p-3">
<h1 class="text-center my-3">Personality</h1>
<div class="card"></div>
<!--🦋 Third tab of the navigation box, change the number "width: 50%" to show the side of the spectrum your oc is on! Feel free to change the words aswell!-->
<div class="col mb-1">
<div class="row no-gutters justify-content-between">
<span class="text-muted my-2" style="font-size: 20px"> Extroverted </span>
<span class="text-muted my-2" style="font-size: 20px"> Introverted </span>
</div>
<div class="progress border-1" style="background: faded; border-radius: 5px; border: double 1px;">
<div class="progress-bar" style=" height: 15px;
width: 50%;">
</div>
</div>
</div>
<div class="col mb-1">
<div class="row no-gutters justify-content-between">
<span class="text-muted my-2" style="font-size: 20px"> Honest </span>
<span class="text-muted my-2" style="font-size: 20px"> Dishonest </span>
</div>
<div class="progress border-1" style="background: faded; border-radius: 5px; border: double 1px;">
<div class="progress-bar" style=" height: 15px;
width: 50%;">
</div>
</div>
</div>
<div class="col mb-1">
<div class="row no-gutters justify-content-between">
<span class="text-muted my-2" style="font-size: 20px"> Courageous </span>
<span class="text-muted my-2" style="font-size: 20px"> Cowardly </span>
</div>
<div class="progress border-1" style="background: faded; border-radius: 5px; border: double 1px;">
<div class="progress-bar" style=" height: 15px;
width: 50%;">
</div>
</div>
</div>
<div class="col mb-1">
<div class="row no-gutters justify-content-between">
<span class="text-muted my-2" style="font-size: 20px"> Emotional </span>
<span class="text-muted my-2" style="font-size: 20px"> Cold </span>
</div>
<div class="progress border-1" style="background: faded; border-radius: 5px; border: double 1px;">
<div class="progress-bar" style=" height: 15px;
width: 50%;">
</div>
</div>
</div>
<div class="col mb-1">
<div class="row no-gutters justify-content-between">
<span class="text-muted my-2" style="font-size: 20px"> Strong </span>
<span class="text-muted my-2" style="font-size: 20px"> Weak </span>
</div>
<div class="progress border-1" style="background: faded; border-radius: 5px; border: double 1px;">
<div class="progress-bar" style=" height: 15px;
width: 50%;">
</div>
</div>
</div>
</div>
</div>
<!--Traits and Trivia-->
<div class="tab-pane fade" id="tnt">
<div class="p-3">
<h1 class="text-center my-3">Traits and Trivia</h1>
<div class="card"></div>
<!--🦋 Fourth tab, here's likes, dislikes, traits and trivia!-->
<!--Likes-->
<h3 class="text-center my-3">Likes</h3>
<div class="container" style="width: 350px;">
<hr class="my-1 faded">
<div class="text-muted justify-content-between my-2">
• word
<span> • word </span>
</div>
<div class="text-muted justify-content-between my-2">
• word
<span> • word </span>
</div>
<!--Dislikes-->
<h3 class="text-center my-3">Dislikes</h3>
<hr class="my-1 faded">
<div class="text-muted justify-content-between my-2">
• word
<span> • word </span>
</div>
<div class="text-muted justify-content-between my-2">
• word
<span> • word </span>
</div>
<!--Traits-->
<h3 class="text-center my-3">Traits</h3>
<hr class="my-1 faded">
<div class="text-muted justify-content-between my-2">
• word
<span> • word </span>
</div>
<div class="text-muted justify-content-between my-2">
• word
<span> • word </span>
</div>
<!--Trivia-->
<h3 class="text-center my-3">Trivia</h3>
<hr class="my-1 faded">
<div class="text-muted justify-content-between my-2">
• word
<span> • word </span>
</div>
<div class="text-muted justify-content-between my-2">
• word
<span> • word </span>
</div>
</div>
</div>
</div>
<!--Relationships-->
<div class="tab-pane fade" id="relationships">
<div class="p-3">
<h1 class="text-center my-3">Relationships</h1>
<div class="card"></div>
<!--🦋 Final tab, here are your character's relationships! Write their name and relationship status with another character!-->
<div class="row no-gutters mx-5 p-5 text-center">
<div class="card border-0 bg-faded my-4 p-3" style="width: 200px; height: 500px; border-top-right-radius: 40px; border-top-left-radius: 40px">
<div class="card border-0 mb-3" style=" height: 200px; background-image:url(https://i.pinimg.com/564x/59/e4/03/59e403b7bdc175acf176c49c14f3ff54.jpg); background-size: cover; background-position: center; border-radius: 30px">
</div>
<a class="mb-3" href="https://toyhou.se/25349721.practice" style="font-size: 20px;"> Name </a>
<div class="card"></div>
<p style="font-size: 15px; line-height: 1.5rem"> Relationship </p>
<div class="card"></div>
<div class="card border-0 my-3 text-muted p-3" style=" height: 250px; border-top-right-radius: 30px; border-top-left-radius: 30px; overflow: auto;">
This box scrolls! Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
</div>
<div class="col"></div>
<div class="card border-0 bg-faded my-4 p-3" style="width: 200px; height: 500px; border-top-right-radius: 40px; border-top-left-radius: 40px">
<div class="card border-0 mb-3" style=" height: 200px; background-image:url(https://i.pinimg.com/564x/59/e4/03/59e403b7bdc175acf176c49c14f3ff54.jpg); background-size: cover; background-position: center; border-radius: 30px">
</div>
<a class="mb-3" href="https://toyhou.se/25349721.practice" style="font-size: 20px;"> Name </a>
<div class="card"></div>
<p style="font-size: 15px; line-height: 1.5rem"> Relationship </p>
<div class="card"></div>
<div class="card border-0 my-3 text-muted p-3" style=" height: 250px; border-top-right-radius: 30px; border-top-left-radius: 30px; overflow: auto;">
This box scrolls! Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
</div>
</div>
</div>
</div>
</div>
<!--Bottom left Art-->
<div class="row no-gutters">
<!--🦋 Here is the bottom left box! Put a pic of ur oc here for design reference!-->
<div class="card border-0 my-3 mr-3 p-3" style="width: 600px; height: 600px; background-image:url(https://i.pinimg.com/564x/61/69/d5/6169d5a16abe07c45d512b01009700be.jpg); background-size: cover; background-position: center; background-color: #D4D5D9; border-radius: 20px;">
<div class="container bg-transparent border-0">
<!--🦋 This is the other butterfly! Keep it or leave it!-->
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/76746112_D9G4P3jOOrvftNT.gif" style="height: 200px; width: 200px; position: absolute; background-position: top; top: 20px; left: -100px;">
</div>
</div>
</div>
<!---->
<!--Design Notes-->
<div class="row no-gutters">
<div class="col">
<!--🦋 Tip - Adjust the line height to make sure everything fits with your notes!-->
<div class="card border-0 my-3 ml-3 p-3" style="width: 300px; height: 600px; border-radius: 20px; line-height: 4rem">
<p class="text-center text-muted" style="Font-size: 20px;">Design Notes!</p>
<!--🦋 Design notes for your oc!-->
<ul>
<div class="card"></div>
<li>Design note one</li>
<div class="card"></div>
<li>Design note two</li>
<div class="card"></div>
<li>Design note three</li>
<div class="card"></div>
<li>Design note four</li>
<div class="card"></div>
</ul>
<!--🦋 Here is the color palette for your oc! Change the background colors to your oc's palette!-->
<div class="row mt-4 p-1">
<div class="col">
<div class="card border-0" style="width: 65px; height: 65px; background-color: #000000">
<div class="col">
<div class="card border-0 mx-5" style="width: 65px; height: 65px; background-color: #888888">
<div class="col">
<div class="card border-0 mx-5" style="width: 65px; height: 65px; background-color: #000000">
<div class="col">
<div class="card border-0 mx-5" style="width: 65px; height: 65px; background-color: #888888">
<!--🦋 THE ALMIGHTY DIV BAR! (you must only look upon the sacred line, no touching)-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!---->
<!--Music Box-->
<div class="row no-gutters">
<div class="col">
<div class="card border-0 my-3 mx-auto p-3 text-muted" style="width: 600px; height: 100px; border-radius: 20px;">
<div class="p-4" style="position: absolute; bottom: 0;">
<i class="fal fa-compact-disc fa-spin" style="font-size: 50px; color: #FFFFFF; animation-duration: 10s;"></i>
<div style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: .001; overflow: hidden;">
<iframe width="700" height="250"
src="https://www.youtube.com/embed/Llour2YvsiI?controls=0" frameborder="0" style="position: absolute; bottom: 0px; left: -250px;"></iframe>
<!--🦋 And finally, the music! Change the letters inbetween "embed" and "?controls=0" with the randomized letters in your youtube link! Be sure to type in the music and artist below!-->
</div>
</div>
<p class="p-2 mt-2" style="position:absolute; left: 240px; font-size: 20px"> Music - Artist</p>
</div>
</div>
</div>
</div>
</div>
<!--🦋 Credits! Please don't touch!-->
<p class="small font-weight-bold text-center text-muted mt-2">Code created by Evoidless ♡</p>
