<!---
ADVENTURE TEAM / by cati/dogboy
NOTES
!! this code requires a bit of prior html knowledge to get around! i wouldn't reccommend it for your first ever profile! !!
first chara: accent / #72B801 - favicon / fad fa-thumbs-up
second chara: accent / #57507E - favicon / fad fa-claw-marks
third chara: accent/ #CEC7ED - favicon / fad fa-crow
fourth chara: accent / #74BEDA - favicon / fad fa-comment-music
(use ctrl+f + replace for icon/accent replacement)
mobile friendly + custom colors! ✔✔✔
RULES & DISCLAIMERS
- fav/comment if using pls!
- not wysiwyg friendly so please turn that off!
- feel free to edit/frakenstein/etc if you feel, just pls dont remove my credit!!
- have a nice day!!
--->
<div class="container-fluid" style="background:none;max-width:530px;padding:10px 40px 0px;margin:30px auto 5px;">
<!--- title --->
<h2 class="text-uppercase font-italic" style="font-family:arial;font-weight:700;">benny's adventure team — assemble!</h2>
<div class="card" style="background-color:#FFF;border:0px;box-shadow:0px 5px 15px 1px rgb(133,124,133);">
<!--- tabs start
TO REMOVE A CHARACTER: highlight from the "first/second/third/fourth" to "first/second/third/fourth end" and delete accordingly, depending on who you don't want!
--->
<div class="tab-content">
<!--- FIRST CHARACTER --->
<div class="tab-pane active show" id="benny">
<!--- focal image --->
<div class="card" style="background:url('https://www.gematsu.com/wp-content/uploads/2020/03/Genshin-Impact_2020_03-13-20_Top.jpg');background-position:center;background-size:cover;height:250px;"></div>
<div class="row no-gutters px-3 pt-3">
<!--- basic info --->
<div class="col-lg-6">
<p style="color:#000;font-family:arial;">
<span style="background-color:#72B801;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— name</span> content
<br><span style="background-color:#72B801;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— age</span> content
<br><span style="background-color:#72B801;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— gender</span> content
<br><span style="background-color:#72B801;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— nationality</span> content
</p>
</div>
<div class="col-lg-6">
<p style="color:#000;font-family:arial;">
<span style="background-color:#72B801;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— birthday</span> content
<br><span style="background-color:#72B801;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— species</span> content
<br><span style="background-color:#72B801;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— orientation</span> content
<br><span style="background-color:#72B801;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— affiliation</span> content
</p>
</div>
</div>
<hr style="border-top:dashed #72B801 2px;">
<!--- biography, if you want to remove the toggle for more, remove the line starting with "<br><a data-toggle..." up to "Etiam nunc", then remove the </div> after "dictumst.</p>" --->
<p class="text-center px-3" style="font-family:arial;font-size:12px;color:#000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi.
<br><a data-toggle="collapse" href="#more" style="font-weight:500;color:#72B801;"><i class="fas fa-sort-down"></i></a>
<div class="collapse text-center px-3" id="more" style="font-family:arial;font-size:12px;color:#000;">Etiam nunc risus, lacinia vel nulla vel, dapibus maximus purus. Duis accumsan, quam nec laoreet auctor, est magna fringilla libero, sit amet lacinia nisl sapien eu justo. Integer id quam tincidunt, maximus erat vehicula, tincidunt ante. Proin tempus dui in metus bibendum, et iaculis ante finibus. Nullam sit amet augue at neque efficitur malesuada. Nulla auctor, magna quis faucibus euismod, massa turpis tempus leo, in malesuada ligula nisi in lorem. Maecenas consectetur ipsum at rhoncus feugiat. Phasellus ac ornare justo.
<br><br>Curabitur ac nisl sit amet lacus pharetra ullamcorper. Nam efficitur varius accumsan. Donec fringilla, erat eget venenatis tempus, ligula arcu tempus lectus, ac pharetra nisi nibh a massa. Curabitur mattis luctus nisi id ornare. Suspendisse potenti. Cras accumsan cursus sollicitudin.
<br><br>Sed eget laoreet massa. Duis nec molestie diam. Morbi sed nunc et neque ullamcorper semper ut non arcu. Pellentesque dignissim dui a nunc elementum, et finibus velit egestas. Quisque et purus dolor. In hac habitasse platea dictumst.</p>
</div>
<hr style="border-top:dashed #72B801 2px;">
<div class="row no-gutters px-3 pb-3">
<div class="col-lg-7">
<div class="accordion" id="accordion">
<!--- stats, change the "width: 50%" to whatever percentage you want! --->
<a class="btn btn-default btn-block p-0 text-left" data-toggle="collapse" data-parent="#accordion" href="#one" style="background:transparent;border:0px;color:#72B801;font-size:20px;font-weight:500;">
<i class="fad fa-chart-bar mr-1" style="transform:rotate(-15deg);opacity:0.7;"></i>STATISTICS</h2></a>
<div id="one" class="collapse show mb-2" data-parent="#accordion">
<span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Knowledge</span>
<div class="progress mb-2 mt-1" style="height:5px;border-radius:0px;width:200px;">
<div class="progress-bar" style="background:#72B801;
width: 50%;"></div>
</div>
<span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Courage</span>
<div class="progress mb-2" style="height:5px;border-radius:0px;width:200px;">
<div class="progress-bar" style="background:#72B801;
width: 50%;"></div>
</div>
<span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Handiness</span>
<div class="progress mb-2" style="height:5px;border-radius:0px;width:200px;">
<div class="progress-bar" style="background:#72B801;
width: 50%;"></div>
</div>
<span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Kindness</span>
<div class="progress mb-2" style="height:5px;border-radius:0px;width:200px;">
<div class="progress-bar" style="background:#72B801;
width: 50%;"></div>
</div>
<span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Charisma</span>
<div class="progress mb-2" style="height:5px;border-radius:0px;width:200px;">
<div class="progress-bar" style="background:#72B801;
width: 50%;"></div>
</div>
</div>
<!--- trivia --->
<a class="btn btn-default btn-block p-0 text-left" data-toggle="collapse" data-parent="#accordion" href="#two" style="background:transparent;border:0px;color:#72B801;font-size:20px;font-weight:500;">
<i class="fad fa-sun mr-1" style="transform:rotate(-15deg);opacity:0.7;"></i>TRIVIA</h2></a>
<div id="two" class="collapse" data-parent="#accordion">
<ul class="fa-ul mr-2" style="margin-left:3px;font-size:13px;color:#000">
<li><span><i class="fad fa-thumbs-up mr-1 my-1"></i></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><span><i class="fad fa-thumbs-up mr-1 my-1"></i></span>Duis non tellus id elit accumsan gravida.</li>
<li><span><i class="fad fa-thumbs-up mr-1 my-1"></i></span>Phasellus vel nisi sit amet metus efficitur feugiat.</li>
<li><span><i class="fad fa-thumbs-up mr-1 my-1"></i></span>Suspendisse condimentum dolor sit amet lectus pulvinar rutrum hendrerit at justo.</li>
</ul>
</div>
</div>
</div>
<!--- second image, it's best you use a picture with the character IN THE MIDDLE of the image so that it crops on them when the accordian extends! --->
<div class="col-lg-5"><div class="card h-100" style="background:url('https://upload-os-bbs.hoyolab.com/upload/2021/02/26/1015537/d16c2a258acd96a04623692308dd288d_9193833608002301649.jpg?x-oss-process=image/resize,s_740/quality,q_80/auto-orient,0/interlace,1/format,jpg');background-position:center;background-size:cover;border:0px;border-radius:0px;"></div></div>
</div>
</div>
<!--- FIRST CHARACTER END --->
<!--- SECOND CHARACTER --->
<div class="tab-pane" id="razor">
<!--- focal image --->
<div class="card" style="background:url('https://gematsu.com/wp-content/uploads/2019/10/Genshin-Impact_2019_10-18-19_Top.jpg');background-position:center;background-size:cover;height:250px;"></div>
<div class="row no-gutters px-3 pt-3">
<!--- basic info --->
<div class="col-lg-6">
<p style="color:#000;font-family:arial;">
<span style="background-color:#57507E;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— name</span> content
<br><span style="background-color:#57507E;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— age</span> content
<br><span style="background-color:#57507E;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— gender</span> content
<br><span style="background-color:#57507E;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— nationality</span> content
</p>
</div>
<div class="col-lg-6">
<p style="color:#000;font-family:arial;">
<span style="background-color:#57507E;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— birthday</span> content
<br><span style="background-color:#57507E;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— species</span> content
<br><span style="background-color:#57507E;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— orientation</span> content
<br><span style="background-color:#57507E;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— affiliation</span> content
</p>
</div>
</div>
<hr style="border-top:dashed #57507E 2px;">
<!--- biography, if you want to remove the toggle for more, remove the line starting with "<br><a data-toggle..." up to "Etiam nunc", then remove the </div> after "dictumst.</p>" --->
<p class="text-center px-3" style="font-family:arial;font-size:12px;color:#000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi.
<br><a data-toggle="collapse" href="#more1" style="font-weight:500;color:#57507E;"><i class="fas fa-sort-down"></i></a>
<div class="collapse text-center px-3" id="more1" style="font-family:arial;font-size:12px;color:#000;">Etiam nunc risus, lacinia vel nulla vel, dapibus maximus purus. Duis accumsan, quam nec laoreet auctor, est magna fringilla libero, sit amet lacinia nisl sapien eu justo. Integer id quam tincidunt, maximus erat vehicula, tincidunt ante. Proin tempus dui in metus bibendum, et iaculis ante finibus. Nullam sit amet augue at neque efficitur malesuada. Nulla auctor, magna quis faucibus euismod, massa turpis tempus leo, in malesuada ligula nisi in lorem. Maecenas consectetur ipsum at rhoncus feugiat. Phasellus ac ornare justo.
<br><br>Curabitur ac nisl sit amet lacus pharetra ullamcorper. Nam efficitur varius accumsan. Donec fringilla, erat eget venenatis tempus, ligula arcu tempus lectus, ac pharetra nisi nibh a massa. Curabitur mattis luctus nisi id ornare. Suspendisse potenti. Cras accumsan cursus sollicitudin.
<br><br>Sed eget laoreet massa. Duis nec molestie diam. Morbi sed nunc et neque ullamcorper semper ut non arcu. Pellentesque dignissim dui a nunc elementum, et finibus velit egestas. Quisque et purus dolor. In hac habitasse platea dictumst.</p>
</div>
<hr style="border-top:dashed #57507E 2px;">
<div class="row no-gutters px-3 pb-3">
<div class="col-lg-7">
<div class="accordion" id="accordion">
<!--- stats, change the "width: 50%" to whatever percentage you want! --->
<a class="btn btn-default btn-block p-0 text-left" data-toggle="collapse" data-parent="#accordion" href="#three" style="background:transparent;border:0px;color:#57507E;font-size:20px;font-weight:500;">
<i class="fad fa-chart-bar mr-1" style="transform:rotate(-15deg);opacity:0.7;"></i>STATISTICS</h2></a>
<div id="three" class="collapse show mb-2" data-parent="#accordion">
<span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Knowledge</span>
<div class="progress mb-2 mt-1" style="height:5px;border-radius:0px;width:200px;">
<div class="progress-bar" style="background:#57507E;
width: 50%;"></div>
</div>
<span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Courage</span>
<div class="progress mb-2" style="height:5px;border-radius:0px;width:200px;">
<div class="progress-bar" style="background:#57507E;
width: 50%;"></div>
</div>
<span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Handiness</span>
<div class="progress mb-2" style="height:5px;border-radius:0px;width:200px;">
<div class="progress-bar" style="background:#57507E;
width: 50%;"></div>
</div>
<span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Kindness</span>
<div class="progress mb-2" style="height:5px;border-radius:0px;width:200px;">
<div class="progress-bar" style="background:#57507E;
width: 50%;"></div>
</div>
<span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Charisma</span>
<div class="progress mb-2" style="height:5px;border-radius:0px;width:200px;">
<div class="progress-bar" style="background:#57507E;
width: 50%;"></div>
</div>
</div>
<!--- trivia --->
<a class="btn btn-default btn-block p-0 text-left" data-toggle="collapse" data-parent="#accordion" href="#four" style="background:transparent;border:0px;color:#57507E;font-size:20px;font-weight:500;">
<i class="fad fa-sun mr-1" style="transform:rotate(-15deg);opacity:0.7;"></i>TRIVIA</h2></a>
<div id="four" class="collapse" data-parent="#accordion">
<ul class="fa-ul mr-2" style="margin-left:3px;font-size:13px;color:#000">
<li><span><i class="fad fa-claw-marks mr-1 my-1"></i></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><span><i class="fad fa-claw-marks mr-1 my-1"></i></span>Duis non tellus id elit accumsan gravida.</li>
<li><span><i class="fad fa-claw-marks mr-1 my-1"></i></span>Phasellus vel nisi sit amet metus efficitur feugiat.</li>
<li><span><i class="fad fa-claw-marks mr-1 my-1"></i></span>Suspendisse condimentum dolor sit amet lectus pulvinar rutrum hendrerit at justo.</li>
</ul>
</div>
</div>
</div>
<!--- second image, it's best you use a picture with the character IN THE MIDDLE of the image so that it crops on them when the accordian extends! --->
<div class="col-lg-5"><div class="card h-100" style="background:url('https://static0.thegamerimages.com/wordpress/wp-content/uploads/2020/12/Razor-Serious-Genshin-Impact-Cropped.jpg');background-position:center;background-size:cover;border:0px;border-radius:0px;"></div></div>
</div>
</div>
<!--- SECOND CHARACTER END --->
<!--- THIRD CHARACTER --->
<div class="tab-pane" id="fischl">
<!--- focal image --->
<div class="card" style="background:url('https://www.gematsu.com/wp-content/uploads/2020/03/Genshin-Impact_2020_03-31-20_Top.jpg');background-position:center;background-size:cover;height:250px;"></div>
<div class="row no-gutters px-3 pt-3">
<!--- basic info --->
<div class="col-lg-6">
<p style="color:#000;font-family:arial;">
<span style="background-color:#CEC7ED;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— name</span> content
<br><span style="background-color:#CEC7ED;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— age</span> content
<br><span style="background-color:#CEC7ED;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— gender</span> content
<br><span style="background-color:#CEC7ED;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— nationality</span> content
</p>
</div>
<div class="col-lg-6">
<p style="color:#000;font-family:arial;">
<span style="background-color:#CEC7ED;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— birthday</span> content
<br><span style="background-color:#CEC7ED;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— species</span> content
<br><span style="background-color:#CEC7ED;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— orientation</span> content
<br><span style="background-color:#CEC7ED;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— affiliation</span> content
</p>
</div>
</div>
<hr style="border-top:dashed #CEC7ED 2px;">
<!--- biography, if you want to remove the toggle for more, remove the line starting with "<br><a data-toggle..." up to "Etiam nunc", then remove the </div> after "dictumst.</p>" --->
<p class="text-center px-3" style="font-family:arial;font-size:12px;color:#000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi.
<br><a data-toggle="collapse" href="#more2" style="font-weight:500;color:#CEC7ED;"><i class="fas fa-sort-down"></i></a>
<div class="collapse text-center px-3" id="more2" style="font-family:arial;font-size:12px;color:#000;">Etiam nunc risus, lacinia vel nulla vel, dapibus maximus purus. Duis accumsan, quam nec laoreet auctor, est magna fringilla libero, sit amet lacinia nisl sapien eu justo. Integer id quam tincidunt, maximus erat vehicula, tincidunt ante. Proin tempus dui in metus bibendum, et iaculis ante finibus. Nullam sit amet augue at neque efficitur malesuada. Nulla auctor, magna quis faucibus euismod, massa turpis tempus leo, in malesuada ligula nisi in lorem. Maecenas consectetur ipsum at rhoncus feugiat. Phasellus ac ornare justo.
<br><br>Curabitur ac nisl sit amet lacus pharetra ullamcorper. Nam efficitur varius accumsan. Donec fringilla, erat eget venenatis tempus, ligula arcu tempus lectus, ac pharetra nisi nibh a massa. Curabitur mattis luctus nisi id ornare. Suspendisse potenti. Cras accumsan cursus sollicitudin.
<br><br>Sed eget laoreet massa. Duis nec molestie diam. Morbi sed nunc et neque ullamcorper semper ut non arcu. Pellentesque dignissim dui a nunc elementum, et finibus velit egestas. Quisque et purus dolor. In hac habitasse platea dictumst.</p>
</div>
<hr style="border-top:dashed #CEC7ED 2px;">
<div class="row no-gutters px-3 pb-3">
<div class="col-lg-7">
<div class="accordion" id="accordion">
<!--- stats, change the "width: 50%" to whatever percentage you want! --->
<a class="btn btn-default btn-block p-0 text-left" data-toggle="collapse" data-parent="#accordion" href="#five" style="background:transparent;border:0px;color:#CEC7ED;font-size:20px;font-weight:500;">
<i class="fad fa-chart-bar mr-1" style="transform:rotate(-15deg);opacity:0.7;"></i>STATISTICS</h2></a>
<div id="five" class="collapse show mb-2" data-parent="#accordion">
<span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Knowledge</span>
<div class="progress mb-2 mt-1" style="height:5px;border-radius:0px;width:200px;">
<div class="progress-bar" style="background:#CEC7ED;
width: 50%;"></div>
</div>
<span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Courage</span>
<div class="progress mb-2" style="height:5px;border-radius:0px;width:200px;">
<div class="progress-bar" style="background:#CEC7ED;
width: 50%;"></div>
</div>
<span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Handiness</span>
<div class="progress mb-2" style="height:5px;border-radius:0px;width:200px;">
<div class="progress-bar" style="background:#CEC7ED;
width: 50%;"></div>
</div>
<span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Kindness</span>
<div class="progress mb-2" style="height:5px;border-radius:0px;width:200px;">
<div class="progress-bar" style="background:#CEC7ED;
width: 50%;"></div>
</div>
<span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Charisma</span>
<div class="progress mb-2" style="height:5px;border-radius:0px;width:200px;">
<div class="progress-bar" style="background:#CEC7ED;
width: 50%;"></div>
</div>
</div>
<!--- trivia --->
<a class="btn btn-default btn-block p-0 text-left" data-toggle="collapse" data-parent="#accordion" href="#six" style="background:transparent;border:0px;color:#CEC7ED;font-size:20px;font-weight:500;">
<i class="fad fa-sun mr-1" style="transform:rotate(-15deg);opacity:0.7;"></i>TRIVIA</h2></a>
<div id="six" class="collapse" data-parent="#accordion">
<ul class="fa-ul mr-2" style="margin-left:3px;font-size:13px;color:#000">
<li><span><i class="fad fa-crow mr-1 my-1"></i></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><span><i class="fad fa-crow mr-1 my-1"></i></span>Duis non tellus id elit accumsan gravida.</li>
<li><span><i class="fad fa-crow mr-1 my-1"></i></span>Phasellus vel nisi sit amet metus efficitur feugiat.</li>
<li><span><i class="fad fa-crow mr-1 my-1"></i></span>Suspendisse condimentum dolor sit amet lectus pulvinar rutrum hendrerit at justo.</li>
</ul>
</div>
</div>
</div>
<!--- second image, it's best you use a picture with the character IN THE MIDDLE of the image so that it crops on them when the accordian extends! --->
<div class="col-lg-5"><div class="card h-100" style="background:url('https://cdn.gamerjournalist.com/primary/2020/11/Genshin-Impacts-Unreconciled-Stars-Event-free-Fischl-and-more-rewards.jpg');background-position:center;background-size:cover;border:0px;border-radius:0px;"></div></div>
</div>
</div>
<!--- THIRD CHARACTER END --->
<!--- FOURTH CHARACTER --->
<div class="tab-pane" id="barbara">
<!--- focal image --->
<div class="card" style="background:url('https://zeldauniverse.net/wp-content/uploads/2021/02/[email protected]');background-position:center;background-size:cover;height:250px;"></div>
<div class="row no-gutters px-3 pt-3">
<!--- basic info --->
<div class="col-lg-6">
<p style="color:#000;font-family:arial;">
<span style="background-color:#74BEDA;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— name</span> content
<br><span style="background-color:#74BEDA;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— age</span> content
<br><span style="background-color:#74BEDA;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— gender</span> content
<br><span style="background-color:#74BEDA;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— nationality</span> content
</p>
</div>
<div class="col-lg-6">
<p style="color:#000;font-family:arial;">
<span style="background-color:#74BEDA;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— birthday</span> content
<br><span style="background-color:#74BEDA;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— species</span> content
<br><span style="background-color:#74BEDA;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— orientation</span> content
<br><span style="background-color:#74BEDA;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— affiliation</span> content
</p>
</div>
</div>
<hr style="border-top:dashed #74BEDA 2px;">
<!--- biography, if you want to remove the toggle for more, remove the line starting with "<br><a data-toggle..." up to "Etiam nunc", then remove the </div> after "dictumst.</p>" --->
<p class="text-center px-3" style="font-family:arial;font-size:12px;color:#000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi.
<br><a data-toggle="collapse" href="#more3" style="font-weight:500;color:#74BEDA;"><i class="fas fa-sort-down"></i></a>
<div class="collapse text-center px-3" id="more3" style="font-family:arial;font-size:12px;color:#000;">Etiam nunc risus, lacinia vel nulla vel, dapibus maximus purus. Duis accumsan, quam nec laoreet auctor, est magna fringilla libero, sit amet lacinia nisl sapien eu justo. Integer id quam tincidunt, maximus erat vehicula, tincidunt ante. Proin tempus dui in metus bibendum, et iaculis ante finibus. Nullam sit amet augue at neque efficitur malesuada. Nulla auctor, magna quis faucibus euismod, massa turpis tempus leo, in malesuada ligula nisi in lorem. Maecenas consectetur ipsum at rhoncus feugiat. Phasellus ac ornare justo.
<br><br>Curabitur ac nisl sit amet lacus pharetra ullamcorper. Nam efficitur varius accumsan. Donec fringilla, erat eget venenatis tempus, ligula arcu tempus lectus, ac pharetra nisi nibh a massa. Curabitur mattis luctus nisi id ornare. Suspendisse potenti. Cras accumsan cursus sollicitudin.
<br><br>Sed eget laoreet massa. Duis nec molestie diam. Morbi sed nunc et neque ullamcorper semper ut non arcu. Pellentesque dignissim dui a nunc elementum, et finibus velit egestas. Quisque et purus dolor. In hac habitasse platea dictumst.</p>
</div>
<hr style="border-top:dashed #74BEDA 2px;">
<div class="row no-gutters px-3 pb-3">
<div class="col-lg-7">
<div class="accordion" id="accordion">
<!--- stats, change the "width: 50%" to whatever percentage you want! --->
<a class="btn btn-default btn-block p-0 text-left" data-toggle="collapse" data-parent="#accordion" href="#seven" style="background:transparent;border:0px;color:#74BEDA;font-size:20px;font-weight:500;">
<i class="fad fa-chart-bar mr-1" style="transform:rotate(-15deg);opacity:0.7;"></i>STATISTICS</h2></a>
<div id="seven" class="collapse show mb-2" data-parent="#accordion">
<span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Knowledge</span>
<div class="progress mb-2 mt-1" style="height:5px;border-radius:0px;width:200px;">
<div class="progress-bar" style="background:#74BEDA;
width: 50%;"></div>
</div>
<span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Courage</span>
<div class="progress mb-2" style="height:5px;border-radius:0px;width:200px;">
<div class="progress-bar" style="background:#74BEDA;
width: 50%;"></div>
</div>
<span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Handiness</span>
<div class="progress mb-2" style="height:5px;border-radius:0px;width:200px;">
<div class="progress-bar" style="background:#74BEDA;
width: 50%;"></div>
</div>
<span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Kindness</span>
<div class="progress mb-2" style="height:5px;border-radius:0px;width:200px;">
<div class="progress-bar" style="background:#74BEDA;
width: 50%;"></div>
</div>
<span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Charisma</span>
<div class="progress mb-2" style="height:5px;border-radius:0px;width:200px;">
<div class="progress-bar" style="background:#74BEDA;
width: 50%;"></div>
</div>
</div>
<!--- trivia --->
<a class="btn btn-default btn-block p-0 text-left" data-toggle="collapse" data-parent="#accordion" href="#eight" style="background:transparent;border:0px;color:#74BEDA;font-size:20px;font-weight:500;">
<i class="fad fa-sun mr-1" style="transform:rotate(-15deg);opacity:0.7;"></i>TRIVIA</h2></a>
<div id="eight" class="collapse" data-parent="#accordion">
<ul class="fa-ul mr-2" style="margin-left:3px;font-size:13px;color:#000">
<li><span><i class="fad fa-comment-music mr-1 my-1"></i></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><span><i class="fad fa-comment-music mr-1 my-1"></i></span>Duis non tellus id elit accumsan gravida.</li>
<li><span><i class="fad fa-comment-music mr-1 my-1"></i></span>Phasellus vel nisi sit amet metus efficitur feugiat.</li>
<li><span><i class="fad fa-comment-music mr-1 my-1"></i></span>Suspendisse condimentum dolor sit amet lectus pulvinar rutrum hendrerit at justo.</li>
</ul>
</div>
</div>
</div>
<!--- second image, it's best you use a picture with the character IN THE MIDDLE of the image so that it crops on them when the accordian extends! --->
<div class="col-lg-5"><div class="card h-100" style="background:url('https://www.pockettactics.com/wp-content/uploads/2021/02/genshin-impact-barbara-2.jpg');background-position:center;background-size:cover;border:0px;border-radius:0px;"></div></div>
</div>
</div>
<!--- FOURTH CHARACTER END --->
</div>
</div>
<!--- navigation, if you want to remove a button just remove the <li></li> of that button --->
<ul class="nav nav-pills justify-content-center mt-3">
<!--- first character button --->
<li class="nav-item"><a class="nav-link active btn btn-default" data-toggle="pill" href="#benny" style="background:transparent;border:0px;"><i class="fad fa-thumbs-up" style="font-size:20px;color:#72B801;background:transparent;border:0px;"></i></a></li>
<!--- second character button --->
<li class="nav-item"><a class="nav-link btn btn-default" data-toggle="pill" href="#razor" style="background:transparent;border:0px;"><i class="fad fa-claw-marks" style="font-size:20px;color:#57507E;background:transparent;border:0px;"></i></a></li>
<!--- third character button --->
<li class="nav-item"><a class="nav-link btn btn-default" data-toggle="pill" href="#fischl" style="background:transparent;border:0px;"><i class="fad fa-crow" style="font-size:20px;color:#CEC7ED;background:transparent;border:0px;"></i></a></li>
<!--- fourth character button --->
<li class="nav-item"><a class="nav-link btn btn-default" data-toggle="pill" href="#barbara" style="background:transparent;border:0px;"><i class="fad fa-comment-music" style="font-size:20px;color:#74BEDA;background:transparent;border:0px;"></i></a></li>
</ul>
</div>
<!--- credit, dont remove pls! --->
<a class="d-block text-muted text-center" href="10690306" style="font-size:0.6em;">code by cati <i class="fad fa-rainbow"></i></a>
<!---
ADVENTURE TEAM (SOLO) / by cati/dogboy
NOTES
accent / #72B801 - favicon / fad fa-thumbs-up
(use ctrl+f + replace for icon/accent replacement)
mobile friendly + custom colors! ✔✔✔
RULES & DISCLAIMERS
- fav/comment if using pls!
- not wysiwyg friendly so please turn that off!
- feel free to edit/frakenstein/etc if you feel, just pls dont remove my credit!!
- have a nice day!!
--->
<div class="container-fluid" style="background:none;max-width:530px;padding:10px 40px 0px;margin:30px auto 5px;">
<!--- title --->
<h2 class="text-uppercase font-italic" style="font-family:arial;font-weight:700;">benny's adventure team — assemble!</h2>
<div class="card" style="background-color:#FFF;border:0px;box-shadow:0px 5px 15px 1px rgb(133,124,133);">
<div class="tab-content">
<!--- focal image --->
<div class="card" style="background:url('https://www.gematsu.com/wp-content/uploads/2020/03/Genshin-Impact_2020_03-13-20_Top.jpg');background-position:center;background-size:cover;height:250px;"></div>
<div class="row no-gutters px-3 pt-3">
<!--- basic info --->
<div class="col-lg-6">
<p style="color:#000;font-family:arial;">
<span style="background-color:#72B801;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— name</span> content
<br><span style="background-color:#72B801;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— age</span> content
<br><span style="background-color:#72B801;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— gender</span> content
<br><span style="background-color:#72B801;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— nationality</span> content
</p>
</div>
<div class="col-lg-6">
<p style="color:#000;font-family:arial;">
<span style="background-color:#72B801;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— birthday</span> content
<br><span style="background-color:#72B801;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— species</span> content
<br><span style="background-color:#72B801;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— orientation</span> content
<br><span style="background-color:#72B801;color:#FFF;font-weight:700;font-style:italic;padding:2px;">— affiliation</span> content
</p>
</div>
</div>
<hr style="border-top:dashed #72B801 2px;">
<!--- biography, if you want to remove the toggle for more, remove the line starting with "<br><a data-toggle..." up to "Etiam nunc", then remove the </div> after "dictumst.</p>" --->
<p class="text-center px-3" style="font-family:arial;font-size:12px;color:#000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur placerat purus, nec dignissim purus ultrices ac. Pellentesque euismod pretium vulputate. Ut vel congue dolor, in volutpat dui. Nunc libero velit, rutrum eget cursus in, blandit non nisi.
<br><a data-toggle="collapse" href="#more" style="font-weight:500;color:#72B801;"><i class="fas fa-sort-down"></i></a>
<div class="collapse text-center px-3" id="more" style="font-family:arial;font-size:12px;color:#000;">Etiam nunc risus, lacinia vel nulla vel, dapibus maximus purus. Duis accumsan, quam nec laoreet auctor, est magna fringilla libero, sit amet lacinia nisl sapien eu justo. Integer id quam tincidunt, maximus erat vehicula, tincidunt ante. Proin tempus dui in metus bibendum, et iaculis ante finibus. Nullam sit amet augue at neque efficitur malesuada. Nulla auctor, magna quis faucibus euismod, massa turpis tempus leo, in malesuada ligula nisi in lorem. Maecenas consectetur ipsum at rhoncus feugiat. Phasellus ac ornare justo.
<br><br>Curabitur ac nisl sit amet lacus pharetra ullamcorper. Nam efficitur varius accumsan. Donec fringilla, erat eget venenatis tempus, ligula arcu tempus lectus, ac pharetra nisi nibh a massa. Curabitur mattis luctus nisi id ornare. Suspendisse potenti. Cras accumsan cursus sollicitudin.
<br><br>Sed eget laoreet massa. Duis nec molestie diam. Morbi sed nunc et neque ullamcorper semper ut non arcu. Pellentesque dignissim dui a nunc elementum, et finibus velit egestas. Quisque et purus dolor. In hac habitasse platea dictumst.</p>
</div>
<hr style="border-top:dashed #72B801 2px;">
<div class="row no-gutters px-3 pb-3">
<div class="col-lg-7">
<div class="accordion" id="accordion">
<!--- stats, change the "width: 50%" to whatever percentage you want! --->
<a class="btn btn-default btn-block p-0 text-left" data-toggle="collapse" data-parent="#accordion" href="#one" style="background:transparent;border:0px;color:#72B801;font-size:20px;font-weight:500;">
<i class="fad fa-chart-bar mr-1" style="transform:rotate(-15deg);opacity:0.7;"></i>STATISTICS</h2></a>
<div id="one" class="collapse show mb-2" data-parent="#accordion">
<span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Knowledge</span>
<div class="progress mb-2 mt-1" style="height:5px;border-radius:0px;width:200px;">
<div class="progress-bar" style="background:#72B801;
width: 50%;"></div>
</div>
<span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Courage</span>
<div class="progress mb-2" style="height:5px;border-radius:0px;width:200px;">
<div class="progress-bar" style="background:#72B801;
width: 50%;"></div>
</div>
<span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Handiness</span>
<div class="progress mb-2" style="height:5px;border-radius:0px;width:200px;">
<div class="progress-bar" style="background:#72B801;
width: 50%;"></div>
</div>
<span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Kindness</span>
<div class="progress mb-2" style="height:5px;border-radius:0px;width:200px;">
<div class="progress-bar" style="background:#72B801;
width: 50%;"></div>
</div>
<span class="text-uppercase font-italic" style="color:#000;font-face:arial;font-weight:700;">Charisma</span>
<div class="progress mb-2" style="height:5px;border-radius:0px;width:200px;">
<div class="progress-bar" style="background:#72B801;
width: 50%;"></div>
</div>
</div>
<!--- trivia --->
<a class="btn btn-default btn-block p-0 text-left" data-toggle="collapse" data-parent="#accordion" href="#two" style="background:transparent;border:0px;color:#72B801;font-size:20px;font-weight:500;">
<i class="fad fa-sun mr-1" style="transform:rotate(-15deg);opacity:0.7;"></i>TRIVIA</h2></a>
<div id="two" class="collapse" data-parent="#accordion">
<ul class="fa-ul mr-2" style="margin-left:3px;font-size:13px;color:#000">
<li><span><i class="fad fa-thumbs-up mr-1 my-1"></i></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><span><i class="fad fa-thumbs-up mr-1 my-1"></i></span>Duis non tellus id elit accumsan gravida.</li>
<li><span><i class="fad fa-thumbs-up mr-1 my-1"></i></span>Phasellus vel nisi sit amet metus efficitur feugiat.</li>
<li><span><i class="fad fa-thumbs-up mr-1 my-1"></i></span>Suspendisse condimentum dolor sit amet lectus pulvinar rutrum hendrerit at justo.</li>
</ul>
</div>
</div>
</div>
<!--- second image, it's best you use a picture with the character IN THE MIDDLE of the image so that it crops on them when the accordian extends! --->
<div class="col-lg-5"><div class="card h-100" style="background:url('https://upload-os-bbs.hoyolab.com/upload/2021/02/26/1015537/d16c2a258acd96a04623692308dd288d_9193833608002301649.jpg?x-oss-process=image/resize,s_740/quality,q_80/auto-orient,0/interlace,1/format,jpg');background-position:center;background-size:cover;border:0px;border-radius:0px;"></div></div>
</div>
</div>
</div>
</div>
<!--- credit, dont remove pls! --->
<a class="d-block text-muted text-center" href="10690306" style="font-size:0.6em;">code by cati <i class="fad fa-rainbow"></i></a>
![https://zeldauniverse.net/wp-content/uploads/2021/02/[email protected]](https://zeldauniverse.net/wp-content/uploads/2021/02/Genshin-Impact-Barbara-Best-Build-524x295@2x.jpg){kind=link}
