Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!--
- frankensteining okay, idgaf what you do with this as long as you credit me!
- accent color is #4daeeb if you want to replace it. make sure to replace the text color #fff as well if it doesnt look good!
- -->
- <div class="mx-auto card p-3 bg-faded border-0 rounded-0" style="max-width:760px;">
- <!-- top card + music player -->
- <div class="card m-1 p-2 rounded-0 mb-2" style="background-color:#4daeeb; color:#fff;">
- <div class="row">
- <!-- music player by rctface https://toyhou.se/23601441.music-player-snippets-f2u -->
- <div class="col-lg-8">
- <div class="p-1" style="border-left:.35rem solid #fff;color:#fff;">
- <p class="text-left m-0 pl-2">
- <iframe frameborder="0" style="height:1rem;width:1rem;opacity:.001;position:absolute;" src="https://www.youtube.com/embed/URLHERE"></iframe>
- <i class="fa-regular fa-play"></i> SONG - ARTIST
- </p>
- </div>
- </div>
- <!-- name -->
- <div class="col-lg-4" style="text-align:right;">
- <h1 class="m-0"><b>NAME</b></h1>
- </div>
- </div>
- </div>
- <!-- row 2 -->
- <div class="row no-gutters">
- <!-- image -->
- <div class="col-sm-3 p-1">
- <div class="card rounded-0 border-0" style="height:272px; background-image:url(URLHERE); background-position:center; background-size:cover;"></div>
- </div>
- <!-- basics -->
- <div class="col-md-4 p-1">
- <div class="card rounded-0 p-2" style="height:272px; overflow-y:auto;">
- <!-- individual attribute -->
- <div class="card border-0 rounded-0 p-1 mb-2 bg-faded">
- <div class="d-flex justify-content-between">
- <b style="color:#4daeeb">name</b>
- <span class="text-right">info</span>
- </div>
- </div>
- <!-- individual attribute -->
- <div class="card border-0 rounded-0 p-1 mb-2 bg-faded">
- <div class="d-flex justify-content-between">
- <b style="color:#4daeeb">age</b>
- <span class="text-right">00</span>
- </div>
- </div>
- <!-- individual attribute -->
- <div class="card border-0 rounded-0 p-1 mb-2 bg-faded">
- <div class="d-flex justify-content-between">
- <b style="color:#4daeeb">gender</b>
- <span class="text-right">info (in/fo)</span>
- </div>
- </div>
- <!-- individual attribute -->
- <div class="card border-0 rounded-0 p-1 mb-2 bg-faded">
- <div class="d-flex justify-content-between">
- <b style="color:#4daeeb">orientation</b>
- <span class="text-right">info</span>
- </div>
- </div>
- <!-- individual attribute -->
- <div class="card border-0 rounded-0 p-1 mb-2 bg-faded">
- <div class="d-flex justify-content-between">
- <b style="color:#4daeeb">region</b>
- <span class="text-right">info</span>
- </div>
- </div>
- <!-- individual attribute -->
- <div class="card border-0 rounded-0 p-1 mb-2 bg-faded">
- <div class="d-flex justify-content-between">
- <b style="color:#4daeeb">type</b>
- <span class="text-right">info</span>
- </div>
- </div>
- <!-- individual attribute (last one) -->
- <div class="card border-0 rounded-0 p-1 bg-faded">
- <div class="d-flex justify-content-between">
- <b style="color:#4daeeb">trainer class</b>
- <span class="text-right">info</span>
- </div>
- </div>
- </div>
- </div>
- <!-- personality / about -->
- <div class="col-lg-5 p-1">
- <div class="card rounded-0 p-2" style="height:272px; overflow-y:auto;">
- <div class="card border-0 rounded-0 p-2 mb-2" style="background-color:#4daeeb;">
- <h4 class="m-0"><i class="fa-light fa-sparkle"></i> <b>ABOUT ...</b></h4>
- </div>
- <p class="mb-0">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 class="card border-0 rounded-0 p-2 my-2" style="background-color:#4daeeb;">
- <h4 class="m-0"><i class="fa-light fa-sparkle"></i> <b>PERSONALITY ...</b></h4>
- </div>
- <p>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>
- </div>
- <!-- team -->
- <div class="col-lg-12 p-1">
- <div class="card p-2 rounded-0">
- <div class="row no-gutters justify-content-center">
- <div class="col-sm-2">
- <img src="URLHERE">
- </div>
- <div class="col-sm-2">
- <img src="URLHERE">
- </div>
- <div class="col-sm-2">
- <img src="URLHERE">
- </div>
- <div class="col-sm-2">
- <img src="URLHERE">
- </div>
- <div class="col-sm-2">
- <img src="URLHERE">
- </div>
- <div class="col-sm-2">
- <img src="URLHERE">
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- row 3 -->
- <div class="row no-gutters">
- <!-- history -->
- <div class="col-lg-8 p-1">
- <div class="card p-2 rounded-0" style="height:250px; overflow-y:auto;">
- <div class="card border-0 rounded-0 p-2 mb-2" style="background-color:#4daeeb;">
- <h4 class="m-0"><i class="fa-light fa-sparkle"></i> <b>HISTORY ...</b></h4>
- </div>
- <p>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>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>
- </div>
- <!-- image -->
- <div class="col-lg-4 p-1">
- <div class="card rounded-0 border-0" style="height:250px; background-image:url(URLHERE); background-position:center; background-size:cover;"></div>
- </div>
- </div>
- <!-- row 4 -->
- <div class="row no-gutters">
- <div class="col-lg-7 p-1">
- <!-- appearance -->
- <div class="card rounded-0 p-2" style="height:250px; overflow-y:auto;">
- <div class="card border-0 rounded-0 p-2 mb-2" style="background-color:#4daeeb;">
- <h4 class="m-0"><i class="fa-light fa-sparkle"></i> <b>APPEARANCE</b></h4>
- </div>
- <!-- color palette -->
- <div class="row no-gutters mb-1 justify-content-center">
- <!-- color piece -->
- <div class="col m-1">
- <div class="card border-0 rounded-0" style="height:30px; background-color:#cacaca"></div>
- </div>
- <!-- color piece -->
- <div class="col m-1">
- <div class="card border-0 rounded-0" style="height:30px; background-color:#cacaca"></div>
- </div>
- <!-- color piece -->
- <div class="col m-1">
- <div class="card border-0 rounded-0" style="height:30px; background-color:#cacaca"></div>
- </div>
- <!-- color piece -->
- <div class="col m-1">
- <div class="card border-0 rounded-0" style="height:30px; background-color:#cacaca"></div>
- </div>
- <!-- color piece -->
- <div class="col m-1">
- <div class="card border-0 rounded-0" style="height:30px; background-color:#cacaca"></div>
- </div>
- <!-- color piece -->
- <div class="col m-1">
- <div class="card border-0 rounded-0" style="height:30px; background-color:#cacaca"></div>
- </div>
- <!-- color piece -->
- <div class="col m-1">
- <div class="card border-0 rounded-0" style="height:30px; background-color:#cacaca"></div>
- </div>
- </div>
- <!-- desc -->
- <div class="row no-gutters">
- <div class="col-md-6">
- <!-- individual attribute -->
- <div class="card border-0 rounded-0 p-1 mb-2 mr-1 bg-faded">
- <div class="d-flex justify-content-between">
- <b style="color:#4daeeb">height</b>
- <span class="text-right">0'0"</span>
- </div>
- </div>
- </div>
- <div class="col-md-6">
- <!-- individual attribute -->
- <div class="card border-0 rounded-0 p-1 mb-2 ml-1 bg-faded">
- <div class="d-flex justify-content-between">
- <b style="color:#4daeeb">build</b>
- <span class="text-right">info</span>
- </div>
- </div>
- </div>
- <div class="col-md-6">
- <!-- individual attribute -->
- <div class="card border-0 rounded-0 p-1 mb-2 mr-1 bg-faded">
- <div class="d-flex justify-content-between">
- <b style="color:#4daeeb">hair color</b>
- <span class="text-right">color</span>
- </div>
- </div>
- </div>
- <div class="col-md-6">
- <!-- individual attribute -->
- <div class="card border-0 rounded-0 p-1 mb-2 ml-1 bg-faded">
- <div class="d-flex justify-content-between">
- <b style="color:#4daeeb">eye color</b>
- <span class="text-right">color</span>
- </div>
- </div>
- </div>
- </div>
- <!-- design notes -->
- <div class="card border-0 rounded-0 p-2 mb-2" style="background-color:#4daeeb;">
- <h4 class="m-0"><i class="fa-light fa-sparkle"></i> <b>DESIGN NOTES</b></h4>
- </div>
- <ul class="list-unstyled pl-3">
- <li><i class="fas fa-asterisk fa-fw text-muted mr-1"></i> note</li>
- <li><i class="fas fa-asterisk fa-fw text-muted mr-1"></i> note</li>
- </ul>
- </div>
- </div>
- <!-- misc. -->
- <div class="col-lg-5 p-1">
- <!-- likes and dislikes -->
- <div class="card rounded-0 p-2" style="height:250px; overflow-y:auto;">
- <div class="card border-0 rounded-0 p-2 mb-2" style="background-color:#4daeeb;">
- <h4 class="m-0"><i class="fa-light fa-sparkle"></i> <b>LIKES / DISLIKES</b></h4>
- </div>
- <div class="row no-gutters">
- <!-- likes -->
- <div class="col-sm-6">
- <ul class="list-unstyled pl-3">
- <li><i class="fas fa-heart fa-fw text-muted mr-1"></i> like</li>
- <li><i class="fas fa-heart fa-fw text-muted mr-1"></i> like</li>
- <li><i class="fas fa-heart fa-fw text-muted mr-1"></i> like</li>
- </ul>
- </div>
- <!-- dislikes -->
- <div class="col-sm-6">
- <ul class="list-unstyled pl-3">
- <li><i class="fas fa-heart-crack fa-fw text-muted mr-1"></i> dislike</li>
- <li><i class="fas fa-heart-crack fa-fw text-muted mr-1"></i> dislike</li>
- <li><i class="fas fa-heart-crack fa-fw text-muted mr-1"></i> dislike</li>
- </ul>
- </div>
- </div>
- <div class="card border-0 rounded-0 p-2 mb-2" style="background-color:#4daeeb;">
- <h4 class="m-0"><i class="fa-light fa-sparkle"></i> <b>TRIVIA</b></h4>
- </div>
- <ul class="list-unstyled pl-3">
- <li><i class="fas fa-asterisk fa-fw text-muted mr-1"></i> trivia</li>
- <li><i class="fas fa-asterisk fa-fw text-muted mr-1"></i> trivia</li>
- <li><i class="fas fa-asterisk fa-fw text-muted mr-1"></i> trivia</li>
- </ul>
- </div>
- </div>
- </div>
- <!-- CREDIT -->
- <div class="">
- <a href="https://toyhou.se/deoxysacid" data-toggle="tooltip" title="code by deoxysacid" style="color:#4daeeb"><i class="fa-solid fa-code ml-2 fa-sm"></i></a>
- </div>
- </div>
Advertisement