F2U Character Profile (code)

<!-- This code is completely free to use or edit, no comment or favorite required. However, I do ask:

1. Do not sell this code in any way for any currency, even if you've made edits

2. Do not remove the credit at the end

3. Not required, but I would love if you commented if you use this code! I'd love to see what you guys come up with

To change the color of the borders, search and replace this value: #df2a63 -->

<div id="codepen">

<div style="display: flex; flex-wrap: wrap; width: 85%; margin: 0 auto; height: auto;">

<!--BEGIN MAIN IMG-->

<div style="display: inline-block; width: 40%; min-width: 300px; max-width: 90%; min-height: 400px; max-height: 500px; height: auto; background-image: url(

https://f2.toyhou.se/file/f2-toyhou-se/images/45502940_UhybGP7qTTBNcsF.jpg

); background-size: cover; background-position: center; border-radius: 10px 0 0 10px; margin: 0 auto;">

</div>

<!--END MAIN IMG-->

<!--BEGIN TEXT SECTION-->

<div style="display:flex; flex-flow: row-wrap; flex-wrap: wrap; width: 60%; max-width: 900px; max-height: 500px; border-radius: 0  10px 10px 0; border: 3px solid #df2a63; border-left: none; overflow-y: scroll; min-width: 300px; margin: 0 auto; background-image: linear-gradient(to bottom, rgba(255, 255, 255, .1), rgba(0, 0, 0, 0));">

<!--BEGIN QUOTE-->

<div style="display: inline-block; width: 95%; margin: 1em auto; height: 50px; border-radius: 10px; border: 1px solid #df2a63; padding: .5em auto; background-color:#df2a63;">

<h1 style="text-align: center; font-family: trebuchet MS; color: rgba(255, 255, 255, 1);">" Quote "</h1>

</div>

<!--END QUOTE-->

<!--BEGIN INFO-->

<div style="display:inline-block; width: auto; min-width: 275px; max-width: 90%; height:48%; margin: 1em auto; border-radius: 10px; border: 1px solid #df2a63; padding: .5em auto; overflow-y: auto;">

<h3 style="text-align: center; font-family: trebuchet MS; color: auto; border-radius: 10px; background-color: #df2a63;">Info</h3>

<ul style="width: 90%; list-style: none; margin-left: 0;">

<li style="border-bottom: 1px solid #df2a63; margin: .5em 0;">

<div style="width: 48%; display: inline-block;"><p><b>Name</p></div>

<div style="width: 48%; display: inline-block;"><p style="text-align: right;">thing</p></div>

</li>

<li style="border-bottom: 1px solid #df2a63; margin: .5em 0;">

<div style="width: 48%; display: inline-block;"><p><b>Age</p></div>

<div style="width: 48%; display: inline-block;"><p style="text-align: right;">thing</p></div>

</li>

<li style="border-bottom: 1px solid #df2a63; margin: .5em 0;">

<div style="width: 48%; display: inline-block;"><p><b>Status</p></div>

<div style="width: 48%; display: inline-block;"><p style="text-align: right;">thing</p></div>

</li>

<li style="border-bottom: 1px solid #df2a63; margin: .5em 0;">

<div style="width: 48%; display: inline-block;"><p><b>Race</p></div>

<div style="width: 48%; display: inline-block;"><p style="text-align: right;">thing</p></div>

</li>

<li style="border-bottom: 1px solid #df2a63; margin: .5em 0;">

<div style="width: 48%; display: inline-block;"><p><b>Occupation</p></div>

<div style="width: 48%; display: inline-block;"><p style="text-align: right;">thing</p></div>

</li>

<li style="border-bottom: 1px solid #df2a63; margin: .5em 0;">

<div style="width: 48%; display: inline-block;"><p><b>Voice</p></div>

<div style="width: 48%; display: inline-block;"><p style="text-align: right;"><a href="">thing</a></p></div>

</li>

</ul>

</div>

<!--END INFO-->

<!--BEGIN MOODBOARD-->

<div style="display:inline-block; min-width: 275px; max-width: 275px; height:48%; margin: 1em auto; border-radius: 10px; border: 1px solid #df2a63; padding: .5em auto; ">

<h3 style="text-align: center; font-family: trebuchet MS; color: auto; border-radius: 10px; background-color: #df2a63;">Moodboard</h3>

<div style="display: flex; flex-wrap: wrap; width: 90%; height: 90%; margin: 0 auto; overflow-y: auto;">

<div style="width: 45%; aspect-ratio: 1 / 1; border-radius: 10px; background-image: url(

https://i.pinimg.com/236x/96/d0/e6/96d0e630c716e029a98ef756da67f41e.jpg

); background-size: cover; min-width: 100px; min-height: 100px; max-width: 100px; max-height: 100px; margin: .2em;"></div>

<div style="width: 45%; aspect-ratio: 1 / 1; border-radius: 10px; background-image: url(https://i.pinimg.com/564x/84/03/fc/8403fc4752f173e6eaac2190ae785b4a.jpg

); background-size: cover; min-width: 100px; min-height: 100px; max-width: 100px; max-height: 100px; margin: .2em;"></div>

<div style="width: 45%; aspect-ratio: 1 / 1; border-radius: 10px; background-image: url(https://i.pinimg.com/564x/a1/ce/f9/a1cef9b2400fda6002713f295ded0e67.jpg

); background-size: cover; min-width: 100px; min-height: 100px; max-width: 100px; max-height: 100px; margin: .2em;"></div>

<div style="width: 45%; aspect-ratio: 1 / 1; border-radius: 10px; background-image: url(

https://i.pinimg.com/236x/8c/30/8f/8c308fb25c8b99443052ecbbcba95cf5.jpg

); background-size: cover; min-width: 100px; min-height: 100px; max-width: 100px; max-height: 100px; margin: .2em;"></div>

<div style="width: 45%; aspect-ratio: 1 / 1; border-radius: 10px; background-image: url(

https://i.pinimg.com/564x/5f/7f/df/5f7fdf6025e9528a4c90940814e68971.jpg

); background-size: cover; min-width: 100px; min-height: 100px; max-width: 100px; max-height: 100px; margin: .2em;"></div>

<div style="width: 45%; aspect-ratio: 1 / 1; border-radius: 10px; background-image: url(https://i.pinimg.com/564x/d2/97/7d/d2977dbda44fcd743f9bf490296daf43.jpg

); background-size: cover; min-width: 100px; min-height: 100px; max-width: 100px; max-height: 100px; margin: .2em;"></div>

</div>

</div>

<!--END MOODBARD-->

<!--BEGIN PLAYLIST-->

<div style="display:inline-block; width: auto; min-width: 275px; max-width: 90%; height:48%; margin: 1em auto; border-radius: 10px; border: 1px solid #df2a63; padding: .5em auto; overflow-y: auto;">

<h3 style="text-align: center; font-family: trebuchet MS; color: auto; border-radius: 10px; background-color: #df2a63;">Playlist</h3>

<ul style="width: 90%; list-style: none; margin-left: 0;">

<li style="border-bottom: 1px solid #df2a63; margin: .5em 0;">

<div style="width: 48%; display: inline-block;"><a href="">song</a></div>

</li>

<li style="border-bottom: 1px solid #df2a63; margin: .5em 0;">

<div style="width: 48%; display: inline-block;"><a href="">song</a></div>

</li>

<li style="border-bottom: 1px solid #df2a63; margin: .5em 0;">

<div style="width: 48%; display: inline-block;"><a href="">song</a></div>

</li>

<li style="border-bottom: 1px solid #df2a63; margin: .5em 0;">

<div style="width: 48%; display: inline-block;"><a href="">song</a></div>

</li>

<li style="border-bottom: 1px solid #df2a63; margin: .5em 0;">

<div style="width: 48%; display: inline-block;"><a href="">song</a></div>

</li>

<li style="border-bottom: 1px solid #df2a63; margin: .5em 0;">

<div style="width: 48%; display: inline-block;"><a href="">song</a></div>

</ul>

</div>

<!--END PLAYLIST-->

<!--START RELATIONSHIP-->

<div style="display:inline-block; width: auto; min-width: 275px; max-width: 90%; height:48%; margin: 1em auto; border-radius: 10px; border: 1px solid #df2a63; padding: .5em auto;">

<h3 style="text-align: center; font-family: trebuchet MS; color: auto; border-radius: 10px; background-color: #df2a63;">Relationships</h3>

<ul style="width: 90%; list-style: none; margin-left: 0; overflow-y: auto;">

<li style="border-bottom: 1px solid #df2a63; margin: .5em 0;">

<div style="width: 48%; display: inline-block;"><a href="">name</a></div>

<div style="width: 48%; display: inline-block;"><p style="text-align: right;">relationship</p></div>

</li>

<li style="border-bottom: 1px solid #df2a63; margin: .5em 0;">

<div style="width: 48%; display: inline-block;"><a href="">name</a></div>

<div style="width: 48%; display: inline-block;"><p style="text-align: right;">relationship</p></div>

</li>

<li style="border-bottom: 1px solid #df2a63; margin: .5em 0;">

<div style="width: 48%; display: inline-block;"><a href="">name</a></div>

<div style="width: 48%; display: inline-block;"><p style="text-align: right;">relationship</p></div>

</li>

<li style="border-bottom: 1px solid #df2a63; margin: .5em 0;">

<div style="width: 48%; display: inline-block;"><a href="">name</a></div>

<div style="width: 48%; display: inline-block;"><p style="text-align: right;">relationship</p></div>

</li>

<li style="border-bottom: 1px solid #df2a63; margin: .5em 0;">

<div style="width: 48%; display: inline-block;"><a href="">name</a></div>

<div style="width: 48%; display: inline-block;"><p style="text-align: right;">relationship</p></div>

</li>

<li style="border-bottom: 1px solid #df2a63; margin: .5em 0;">

<div style="width: 48%; display: inline-block;"><a href="">name</a></div>

<div style="width: 48%; display: inline-block;"><p style="text-align: right;">relationship</p></div>

</li>

</ul>

</div>

<!--END RELATIONSHIP-->

<!--START OVERVIEW-->

<div style="display: inline-block; width: 95%; margin: 1em auto; height: auto; border-radius: 10px; border: 1px solid #df2a63; padding: .5em auto; overflow-y: auto;">

<h2 style="text-align: center; font-family: trebuchet MS; color: auto; border-radius: 10px; background-color: #df2a63;"><i class="fas fa-star"></i>Overview<i class="fas fa-star"></i></h2>

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</p>

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</p>

</div>

<!--END OVERVIEW-->

</div>

<!--END TEXT SECTION-->

</div>

<!--CREDIT DO NOT REMOVE-->

<p style="text-align: right; margin-right: 10%;"><a href="https://toyhou.se/justSimplySpace"><i class="fa-solid fa-star"></i></a></p>

</div>