<!--- EDILY by onethird
thank you for using! rules are here: https://toyhou.se/~forums/16.htmlcss-graphics/241166.-onethird-s-f2u-codes-
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;">
<!--- 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 text-primary"></i>
</div>
<!--- image footer --->
<div class="card rounded-0 border-0 bg-primary" style="height:40px; border-bottom-left-radius:15px; border-bottom-right-radius:15px;">
<h3 class="m-auto text-center text-white">NAME</h3>
<p class="m-auto text-center text-white" style="letter-spacing:.5px;"><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 bg-faded" style="height:280px; border-top-left-radius:15px; border-top-right-radius:15px;">
<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; background:transparent; border-top-right-radius:15px; height:280px;">
<h2 class="text-center" >INFO</h2>
<!--- basic info --->
<div class="justify-content-center">
<p class="font-weight-bold text-primary">AGE</p>
<hr class="mx-2 mt-2 flex-fill border-top-0 border-left-0 border-right-0" style="border:1px dashed">
<p>content</p>
</div>
<div class="justify-content-center">
<p class="font-weight-bold text-primary">GENDER</p>
<hr class="mx-2 mt-2 flex-fill border-top-0 border-left-0 border-right-0" style="border:1px dashed">
<p>content</p>
</div>
<div class="justify-content-center">
<p class="font-weight-bold text-primary">ORIENT.</p>
<hr class="mx-2 mt-2 flex-fill border-top-0 border-left-0 border-right-0" style="border:1px dashed">
<p>content</p>
</div>
<div class="justify-content-center">
<p class="font-weight-bold text-primary">RACE/ETHN.</p>
<hr class="mx-2 mt-2 flex-fill border-top-0 border-left-0 border-right-0" style="border:1px dashed">
<p>content</p>
</div>
<!--- personality --->
<p class="font-weight-bold mt-3 text-center">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">LIKES & DISLIKES</p>
<!--- likes --->
<p class="text-center">
<i class="fa-solid fa-heart px-1 text-primary"></i>content
<i class="fa-solid fa-heart px-1 text-primary"></i>content
<i class="fa-solid fa-heart px-1 text-primary"></i>content
<!--- dislikes --->
<i class="fa-solid fa-heart-crack px-1 text-primary"></i>content
<i class="fa-solid fa-heart-crack px-1 text-primary"></i>content
<i class="fa-solid fa-heart-crack px-1 text-primary"></i>content
</p>
<!--- trivia --->
<p class="font-weight-bold mt-3 text-center">TRIVIA</p>
<ul class="list-unstyled">
<li><i class="fa-solid fa-chevron-right pr-1 text-primary"></i>content</li>
<li><i class="fa-solid fa-chevron-right pr-1 text-primary"></i>content</li>
<li><i class="fa-solid fa-chevron-right pr-1 text-primary"></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" >DESIGN NOTES</p>
<ul class="list-unstyled">
<li><i class="fa-solid fa-plus pr-1 text-primary"></i>content</li>
<li><i class="fa-solid fa-plus pr-1 text-primary"></i>content</li>
<li><i class="fa-solid fa-plus pr-1 text-primary"></i>content</li>
</ul>
</div>
</div>
<!--- img --->
<div class="col-5">
<div style="height:210px; max-width:200px; border:3px dashed; 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">HISTORY</h2>
<p><i class="fa-solid fa-thumbtack pr-2 fa-lg text-primary"></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 text-primary"></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 text-primary"></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">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; 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 text-primary">NAME <span class="font-weight-light text-muted">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; 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 text-primary">NAME <span class="font-weight-light text-muted">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; 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 text-primary">NAME <span class="font-weight-light text-muted">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">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">
<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 text-primary"></i>
</a>
</div>
<div class="col-7 my-auto">
<p class="pl-2"><span class="font-weight-bold text-primary">ARTIST</span> - title</p>
</div>
<div class="col-4">
<div class="pull-right" style="height:100px; max-width:100px; border:3px dashed; 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">
<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 text-primary"></i>
</a>
</div>
<div class="col-7 my-auto">
<p class="pl-2"><span class="font-weight-bold text-primary">ARTIST</span> - title</p>
</div>
<div class="col-4">
<div class="pull-right" style="height:100px; max-width:100px; border:3px dashed; 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">
<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 text-primary"></i>
</a>
</div>
<div class="col-7 my-auto">
<p class="pl-2"><span class="font-weight-bold text-primary">ARTIST</span> - title</p>
</div>
<div class="col-4">
<div class="pull-right" style="height:100px; max-width:100px; border:3px dashed; 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">
<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 text-primary"></i>
</a>
</div>
<div class="col-7 my-auto">
<p class="pl-2"><span class="font-weight-bold text-primary">ARTIST</span> - title</p>
</div>
<div class="col-4">
<div class="pull-right" style="height:100px; max-width:100px; border:3px dashed; 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 bg-primary" style="height:40px; border-bottom-left-radius:15px; border-bottom-right-radius:15px;">
<ul class="nav justify-content-center my-auto">
<li class="nav-item"><a class="show text-white" data-toggle="tab" title="about" href="#home"><i class="fa-solid fa-robot fa-xl px-3"></i></a></li>
<li class="nav-item"><a class="show text-white" data-toggle="tab" title="history" href="#history"><i class="fa-solid fa-tv-retro fa-xl px-3"></i></a></li>
<li class="nav-item"><a class="show text-white" data-toggle="tab" title="relationships" href="#relationships"><i class="fa-solid fa-mobile-retro fa-xl px-3"></i></a></li>
<li class="nav-item"><a class="show text-white" data-toggle="tab" title="playlist" href="#playlist"><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" ><i class="fas fa-code fa-xs"></i></a>
</div>