<!--- EDILY by onethird
thank you for using! rules are here: https://toyhou.se/~forums/16.htmlcss-graphics/241166.-onethird-s-f2u-codes-
left side of gradient, accent text, FA icons: #e88eaf
right side of gradient: #f8cbc7
name + quote text, buttons, background: white
main text: black
if you need help with the music section (everyone say thank you bakucodes): https://toyhou.se/8682081.all-music-players-wip/8682087.tutorial#SS
--->
<div class="container p-0" style="max-width:450px; font-size:13px; color:white;">
<!--- image --->
<div class="card rounded-0 border-0 p-3" style="height:180px; border-top-left-radius:15px; border-top-right-radius:15px; background:url(IMGLINK); background-position:center; background-size:cover;">
<i class="fa-light fa-mobile-retro fa-xl text-right fa-fade" style="color:#e88eaf;"></i>
</div>
<!--- image footer --->
<div class="card rounded-0 border-0" style="height:40px; border-bottom-left-radius:15px; border-bottom-right-radius:15px; background:linear-gradient(to right, #e88eaf 0%, #f8cbc7 100%)">
<h3 class="m-auto text-center">NAME</h3>
<p class="m-auto text-center" style="letter-spacing:.5px; color:rgba(500, 500, 500, .8)"><i class="fa-light fa-quote-left"></i> quote. <i class="fa-light fa-quote-right"></i></p>
</div>
<!--- main content --->
<div class="card mt-3 rounded-0 border-0" style="height:280px; border-top-left-radius:15px; border-top-right-radius:15px; background:white; color:black;">
<div class="tab-content">
<!--- info --->
<div id="home" class="card rounded-0 border-0 p-2 tab-pane fade active show overflow-auto" style="border-top-left-radius:15px; border-top-right-radius:15px; background:transparent; height:280px;">
<h2 class="text-center" style="color:#e88eaf;">INFO</h2>
<!--- basic info --->
<div class="justify-content-center">
<p class="font-weight-bold" style="color:#e88eaf">AGE</p>
<hr class="mx-2 mt-2 flex-fill border-top-0 border-left-0 border-right-0" style="border:1px dashed #e88eaf">
<p>content</p>
</div>
<div class="justify-content-center">
<p class="font-weight-bold" style="color:#e88eaf">GENDER</p>
<hr class="mx-2 mt-2 flex-fill border-top-0 border-left-0 border-right-0" style="border:1px dashed #e88eaf">
<p>content</p>
</div>
<div class="justify-content-center">
<p class="font-weight-bold" style="color:#e88eaf">ORIENT.</p>
<hr class="mx-2 mt-2 flex-fill border-top-0 border-left-0 border-right-0" style="border:1px dashed #e88eaf">
<p>content</p>
</div>
<div class="justify-content-center">
<p class="font-weight-bold" style="color:#e88eaf">RACE/ETHN.</p>
<hr class="mx-2 mt-2 flex-fill border-top-0 border-left-0 border-right-0" style="border:1px dashed #e88eaf">
<p>content</p>
</div>
<!--- personality --->
<p class="font-weight-bold mt-3 text-center" style="color:#e88eaf">PERSONALITY</p>
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<!--- likes & dislikes --->
<p class="font-weight-bold mt-3 text-center" style="color:#e88eaf">LIKES & DISLIKES</p>
<!--- likes --->
<p class="text-center">
<i class="fa-solid fa-heart px-1" style="color:#e88eaf"></i>content
<i class="fa-solid fa-heart px-1" style="color:#e88eaf"></i>content
<i class="fa-solid fa-heart px-1" style="color:#e88eaf"></i>content
<!--- dislikes --->
<i class="fa-solid fa-heart-crack px-1" style="color:#e88eaf"></i>content
<i class="fa-solid fa-heart-crack px-1" style="color:#e88eaf"></i>content
<i class="fa-solid fa-heart-crack px-1" style="color:#e88eaf"></i>content
</p>
<!--- trivia --->
<p class="font-weight-bold mt-3 text-center" style="color:#e88eaf">TRIVIA</p>
<ul class="list-unstyled">
<li><i class="fa-solid fa-chevron-right pr-1" style="color:#e88eaf"></i>content</li>
<li><i class="fa-solid fa-chevron-right pr-1" style="color:#e88eaf"></i>content</li>
<li><i class="fa-solid fa-chevron-right pr-1" style="color:#e88eaf"></i>content</li>
</ul>
<!--- design notes --->
<div class="row no-gutters">
<div class="col-7">
<div class="card border-0" style="background:transparent">
<p class="font-weight-bold text-center" style="color:#e88eaf">DESIGN NOTES</p>
<ul class="list-unstyled">
<li><i class="fa-solid fa-plus pr-1" style="color:#e88eaf"></i>content</li>
<li><i class="fa-solid fa-plus pr-1" style="color:#e88eaf"></i>content</li>
<li><i class="fa-solid fa-plus pr-1" style="color:#e88eaf"></i>content</li>
</ul>
</div>
</div>
<!--- img --->
<div class="col-5">
<div style="height:210px; max-width:200px; border:3px dashed #e88eaf; border-radius:10px">
<img src="IMGLINK" class="w-100 h-100" style="object-fit:cover; border-radius:9px">
</div>
</div>
</div>
</div>
<!--- history --->
<div id="history" class="card rounded-0 border-0 p-2 tab-pane fade overflow-auto" style="border-top-left-radius:15px; border-top-right-radius:15px; background:transparent; height:280px">
<h2 class="text-center" style="color:#e88eaf;">HISTORY</h2>
<p><i class="fa-solid fa-thumbtack pr-2 fa-lg" style="color:#e88eaf;"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p><i class="fa-solid fa-thumbtack pr-2 fa-lg" style="color:#e88eaf;"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p><i class="fa-solid fa-thumbtack pr-2 fa-lg" style="color:#e88eaf;"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
<!--- relationships --->
<div id="relationships" class="card rounded-0 border-0 p-2 tab-pane fade overflow-auto" style="border-top-left-radius:15px; border-top-right-radius:15px; background:transparent; height:280px;">
<h2 class="text-center" style="color:#e88eaf;">RELATIONSHIPS</h2>
<div class="row no-gutters">
<!--- relationship 1 --->
<div class="col-4 p-1">
<div style="height:120px; max-width:120px; border:3px dashed #e88eaf; border-radius:10px">
<img src="IMGLINK" class="w-100 h-100" style="object-fit:cover; border-radius:9px">
</div>
</div>
<div class="col-8 p-1">
<p class="font-weight-bold mt-3" style="color:#e88eaf">NAME <span class="font-weight-light" style="color:black;">relationship</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div>
<!--- relationship 2 --->
<div class="col-4 p-1">
<div style="height:120px; max-width:120px; border:3px dashed #e88eaf; border-radius:10px">
<img src="IMGLINK" class="w-100 h-100" style="object-fit:cover; border-radius:9px">
</div>
</div>
<div class="col-8 p-1">
<p class="font-weight-bold mt-3" style="color:#e88eaf">NAME <span class="font-weight-light" style="color:black;">relationship</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div>
<!--- relationship 3 --->
<div class="col-4 p-1">
<div style="height:120px; max-width:120px; border:3px dashed #e88eaf; border-radius:10px">
<img src="IMGLINK" class="w-100 h-100" style="object-fit:cover; border-radius:9px">
</div>
</div>
<div class="col-8 p-1">
<p class="font-weight-bold mt-3" style="color:#e88eaf">NAME <span class="font-weight-light" style="color:black;">relationship</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div>
</div>
</div>
<!--- playlist --->
<div id="playlist" class="card rounded-0 border-0 p-2 tab-pane fade overflow-auto" style="border-top-left-radius:15px; border-top-right-radius:15px; background:transparent; height:280px;">
<h2 class="text-center" style="color:#e88eaf;">PLAYLIST</h2>
<!--- song 1 --->
<div class="row no-gutters py-1">
<div class="col-1 justify-content-center my-auto">
<a class="btn p-0" style="color:#e88eaf;">
<iframe style="opacity:.01; position:absolute; left:0; right:0; top:0; bottom:0; height:20px; width:20px;" src="https://www.youtube.com/embed/[pastehere]?controls=0" frameborder="0"></iframe>
<i class="fa-solid fa-circle-play fa-xl"></i>
</a>
</div>
<div class="col-7 my-auto">
<p class="pl-2"><span class="font-weight-bold" style="color:#e88eaf;">ARTIST</span> - title</p>
</div>
<div class="col-4">
<div class="pull-right" style="height:100px; max-width:100px; border:3px dashed #e88eaf; border-radius:10px">
<img src="IMGLINK" class="w-100 h-100" style="object-fit:cover; border-radius:9px">
</div>
</div>
</div>
<!--- song 2 --->
<div class="row no-gutters py-1">
<div class="col-1 justify-content-center my-auto">
<a class="btn p-0" style="color:#e88eaf;">
<iframe style="opacity:.01; position:absolute; left:0; right:0; top:0; bottom:0; height:20px; width:20px;" src="https://www.youtube.com/embed/[pastehere]?controls=0" frameborder="0"></iframe>
<i class="fa-solid fa-circle-play fa-xl"></i>
</a>
</div>
<div class="col-7 my-auto">
<p class="pl-2"><span class="font-weight-bold" style="color:#e88eaf;">ARTIST</span> - title</p>
</div>
<div class="col-4">
<div class="pull-right" style="height:100px; max-width:100px; border:3px dashed #e88eaf; border-radius:10px">
<img src="IMGLINK" class="w-100 h-100" style="object-fit:cover; border-radius:9px">
</div>
</div>
</div>
<!--- song 3 --->
<div class="row no-gutters py-1">
<div class="col-1 justify-content-center my-auto">
<a class="btn p-0" style="color:#e88eaf;">
<iframe style="opacity:.01; position:absolute; left:0; right:0; top:0; bottom:0; height:20px; width:20px;" src="https://www.youtube.com/embed/[pastehere]?controls=0" frameborder="0"></iframe>
<i class="fa-solid fa-circle-play fa-xl"></i>
</a>
</div>
<div class="col-7 my-auto">
<p class="pl-2"><span class="font-weight-bold" style="color:#e88eaf;">ARTIST</span> - title</p>
</div>
<div class="col-4">
<div class="pull-right" style="height:100px; max-width:100px; border:3px dashed #e88eaf; border-radius:10px">
<img src="IMGLINK" class="w-100 h-100" style="object-fit:cover; border-radius:9px">
</div>
</div>
</div>
<!--- song 4 --->
<div class="row no-gutters py-1">
<div class="col-1 justify-content-center my-auto">
<a class="btn p-0" style="color:#e88eaf;">
<iframe style="opacity:.01; position:absolute; left:0; right:0; top:0; bottom:0; height:20px; width:20px;" src="https://www.youtube.com/embed/[pastehere]?controls=0" frameborder="0"></iframe>
<i class="fa-solid fa-circle-play fa-xl"></i>
</a>
</div>
<div class="col-7 my-auto">
<p class="pl-2"><span class="font-weight-bold" style="color:#e88eaf;">ARTIST</span> - title</p>
</div>
<div class="col-4">
<div class="pull-right" style="height:100px; max-width:100px; border:3px dashed #e88eaf; border-radius:10px">
<img src="IMGLINK" class="w-100 h-100" style="object-fit:cover; border-radius:9px">
</div>
</div>
</div>
</div>
</div>
</div>
<!--- nav buttons --->
<div class="card rounded-0 border-0" style="height:40px; border-bottom-left-radius:15px; border-bottom-right-radius:15px; background:linear-gradient(to right, #e88eaf 0%, #f8cbc7 100%)">
<ul class="nav justify-content-center my-auto">
<li class="nav-item"><a class="show" data-toggle="tab" title="about" href="#home" style="color:white"><i class="fa-solid fa-robot fa-xl px-3"></i></a></li>
<li class="nav-item"><a class="show" data-toggle="tab" title="history" href="#history" style="color:white"><i class="fa-solid fa-tv-retro fa-xl px-3"></i></a></li>
<li class="nav-item"><a class="show" data-toggle="tab" title="relationships" href="#relationships" style="color:white"><i class="fa-solid fa-mobile-retro fa-xl px-3"></i></a></li>
<li class="nav-item"><a class="show" data-toggle="tab" title="playlist" href="#playlist" style="color:white;"><i class="fa-solid fa-radio fa-xl px-3"></i></a></li>
</ul>
</div>
</div>
<!--- credit, do not remove --->
<div class="col-12 p-0 mx-auto text-right" style="width:450px;">
<a href="https://toyhou.se/onethird" data-toggle="tooltip" title="code by onethird" style="color:#e88eaf"><i class="fas fa-code fa-xs"></i></a>
</div>