Dylan

Purchased for - 2 USD

worth - 2 USD

<!-- ------------------------------------


 TELLING — Custom Colours Version
 (code by jiko)

 RULES
 → Read this thoroughly please, and maybe leave a small comment saying that you've read it? :'3 thank youu
 [ https://toyhou.se/~bulletins/127417.code-rules ]


 TIPPY TIPS
 → insert your img links INSIDE the brackets or quotation marks!!
 → use ctrl+f to replace the colours instantly!
 
 MUSIC
 → to change the video, get the string of characters after [=]
 → for example: https://www.youtube.com/watch?v="""""QZShA_a-5r8""""
 → inside the quatations is what you use
 → the video itself must NOT be from a playlist
 → then below, copy and paste that into where it says, "STRING HERE" ;3


 ACCENT : #aaaaaa
 TEXT SHADDOW : #777777


------------------------------------- -->
<div class="mx-auto text-justify" style="font-size:80%; letter-spacing:0.3px; max-width:800px;">
<div class="row no-gutters" style="margin:-4px;">
<!-- ------------------------------------


 CHARACTER BOX + MUSIC BOX


------------------------------------- --> 
<div class="col-lg-4 p-2 order-lg-2 d-flex w-100">
<div class="card-block bg-faded p-0" style="border-bottom-left-radius:15px; border-top-left-radius:15px;">

 <!-- ------------------------------------
 TITLE
 → shorter is better!
 ------------------------------------- -->
 <div class="card-block p-2 text-center"style="border-top-left-radius:15px; background-color:#aaaaaa">
 <span class="text-uppercase text-white font-weight-bold"
 style="font-size:18px; letter-spacing:3.5px; text-shadow: 3.5px 3.5px #777777">
 
 NAME
 
 </span>
 </div>



 <!-- ------------------------------------
 FOCAL IMAGE
 ------------------------------------- -->
 <div class="mb-2" style="min-height:280px;
 
 /* IMAGE OF CHARACTER / VIBES
 ====================================== */;
 background-image: url(https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png);
 
 background-size: cover;
 background-repeat: no-repeat;
 background-position: center;"></div>



 <!-- ------------------------------------
 MUSIC
 ------------------------------------- -->
 <div class="row no-gutters p-3 pt-4">
 <div class="col-12">
 <div class="text-center text-uppercase" style="letter-spacing:4px">Song Title</div>
 <div class="text-center text-muted pb-2">Band Name</div>
 
 <div class="progress my-2 mb-3" style="height:4px">
 <div class="progress-bar bg-secondary"
 style="width:25%">
 </div>
 </div>
 </div>
 
 
 <!-- --- BACK BUTTON
 ------------------------------------- -->
 <div class="col">
 <p class="text-center" style="font-size:20px"><i class="fas fa-backward"></i></p>
 </div>
 
 
 <!-- --- PLAY BUTTON
 ------------------------------------- -->
 <div class="col">
 <p class="text-center" style="font-size:20px"><i class="fas fa-play"></i></p>
 </div>
 
 
 <!-- --- FORWARD BUTTON
 ------------------------------------- -->
 <div class="col">
 <p class="text-center" style="font-size:20px"><i class="fas fa-forward"></i></p>
 </div>
 
 
 <!-- --- MUSIC
 ------------------------------------- -->
 <iframe src= "https://www.dropbox.com/s/z3lqj613tredma7/Donut%20Plains%20-%20Super%20Mario%20World.mp3?dl=0"
 class="w-100" frameborder="0"
 style="position:absolute; height:130px; margin-top:20px; left:0; opacity:0.001">
 </iframe>
 </div>



</div>
</div>
<!-- ------------------------------------


 PROFILE BOX // DETAILED INFO


------------------------------------- --> 
<div class="col-lg-8 p-2 order-lg-1 w-100">
<!-- ------------------------------------

 HEADER // TABS

------------------------------------- --> 
<div class="card-block p-2 w-100" style="border-top-right-radius:15px; background-color:#aaaaaa;">
<div class="mx-auto mb-2 col-lg-8">


 <!-- ------------------------------------
 TAB ICONS
 ------------------------------------- -->
 <ul class="nav nav-tabs card-header-tabs row">
 <li class="nav-item col">
 <a class="card-block p-2 text-white btn-block active" href="#one" 
 data-toggle="tab">
 <i class="fas fa-user"></i>
 </a>
 </li>
 
 <li class="nav-item col">
 <a class="card-block p-2 text-white btn-block" href="#two" 
 data-toggle="tab">
 <i class="fas fa-heart"></i>
 </a>
 </li>
 
 <li class="nav-item col">
 <a class="card-block p-2 text-white btn-block" href="#three" 
 data-toggle="tab">
 <i class="fas fa-book-open"></i>
 </a>
 </li>
 
 <li class="nav-item col">
 <a class="card-block p-2 text-white btn-block" href="#four" 
 data-toggle="tab">
 <i class="fas fa-star"></i>
 </a>
 </li>
 
 <li class="nav-item col">
 <a class="card-block p-2 text-white btn-block" href="#five" 
 data-toggle="tab">
 <i class="fas fa-link"></i>
 </a>
 </li>
 
 
 <!--（ add/delete more here! the max is six total ）-->
 </ul>


</div>
</div>
<div class="table-responsive tab-content bg-faded" style="border-bottom-right-radius:15px; height:435px;">
<!-- ------------------------------------


 01 // PROFILE


------------------------------------- -->
<div class="tab-pane fade active show" id="one">
<div class="bg-faded p-3">

 <!-- ------------------------------------
 HEADER
 ------------------------------------- -->
 <blockquote class="text-uppercase font-weight-bold"
 style="font-size:12px; letter-spacing:4px; border-width:3px">

 01 — Profile

 </blockquote><hr>
 <div class="row no-gutters">
 
 
 <!-- ------ INFO
 ------------------------------------- -->
 <div class="col-lg-6 p-2">
 
 <div class="p-1">
 <span class="text-uppercase text-muted" style="letter-spacing:1.5px;">Name</span>
 <span class="pull-right">content</span>
 </div>
 
 <div class="p-1">
 <span class="text-uppercase text-muted" style="letter-spacing:1.5px;">Nicknames</span>
 <span class="pull-right">content</span>
 </div>
 
 <div class="p-1">
 <span class="text-uppercase text-muted" style="letter-spacing:1.5px;">Age</span>
 <span class="pull-right">content</span>
 </div>
 
 <div class="p-1">
 <span class="text-uppercase text-muted" style="letter-spacing:1.5px;">Gender</span>
 <span class="pull-right">content ( prn/prn )</span>
 </div>
 
 <div class="p-1">
 <span class="text-uppercase text-muted" style="letter-spacing:1.5px;">Height</span>
 <span class="pull-right">content</span>
 </div>
 
 <div class="p-1">
 <span class="text-uppercase text-muted" style="letter-spacing:1.5px;">Birthdate</span>
 <span class="pull-right">content</span>
 </div>
 
 <div class="p-1">
 <span class="text-uppercase text-muted" style="letter-spacing:1.5px;">Race</span>
 <span class="pull-right">(or species)</span>
 </div>
 
 <div class="p-1">
 <span class="text-uppercase text-muted" style="letter-spacing:1.5px;">Oriet.</span>
 <span class="pull-right">content</span>
 </div>
 
 <div class="p-1">
 <span class="text-uppercase text-muted" style="letter-spacing:1.5px;">Occupation</span>
 <span class="pull-right">content</span>
 </div><hr class="my-2">
 
 <div class="p-1">
 <span class="text-uppercase text-muted" style="letter-spacing:1.5px;">Status</span>
 <span class="pull-right">content</span>
 </div>
 
 <div class="p-1">
 <span class="text-uppercase text-muted" style="letter-spacing:1.5px;">Designer</span>
 <span class="pull-right">@ USER</span>
 </div>
 
 <div class="p-1">
 <span class="text-uppercase text-muted" style="letter-spacing:1.5px;">Worth</span>
 <span class="pull-right">$$$</span>
 </div><span class="hidden-md-up"><hr class="my-2"></span>
 
 </div>
 
 
 
 <!-- ------ DESIGN NOTES
 ------------------------------------- -->
 <div class="col-lg-6 p-2" style="max-height:312px; overflow:auto">
 <ul class="fa-ul mb-0 text-muted">
 
 <li class="my-2"><span class="fa-li">
 <i class="fas fa-angle-right" style="font-size:9px; color:#aaaaaa"></i></span>
 <p>these</p>
 </li>
 
 <li class="my-2"><span class="fa-li">
 <i class="fas fa-angle-right" style="font-size:9px; color:#aaaaaa"></i></span>
 <p>are</p>
 </li>
 
 <li class="my-2"><span class="fa-li">
 <i class="fas fa-angle-right" style="font-size:9px; color:#aaaaaa"></i></span>
 <p>design</p>
 </li>
 
 <li class="my-2"><span class="fa-li">
 <i class="fas fa-angle-right" style="font-size:9px; color:#aaaaaa"></i></span>
 <p>notes!</p>
 </li>
 
 <li class="my-2"><span class="fa-li">
 <i class="fas fa-angle-right" style="font-size:9px; color:#aaaaaa"></i></span>
 <p>you could do them short</p>
 </li>
 
 <li class="my-2"><span class="fa-li">
 <i class="fas fa-angle-right" style="font-size:9px; color:#aaaaaa"></i></span>
 <p>or you could do them a bit longer with a description, while also bolding the <b>vital</b> things. but that's your preference! :D</p>
 </li>
 
 <li class="my-2"><span class="fa-li">
 <i class="fas fa-angle-right" style="font-size:9px; color:#aaaaaa"></i></span>
 <p>this scrolls seperately, so don't worry and go wild yaya!!</p>
 </li>
 
 </ul>
 </div>
 
 </div>
 
</div>
</div>
<!-- ------------------------------------


 02 // PERSONALITY + LIKES/DISLIKES


------------------------------------- -->
<div class="tab-pane fade" id="two">
<div class="bg-faded p-3">

 <!-- ------------------------------------
 HEADER
 ------------------------------------- -->
 <blockquote class="text-uppercase font-weight-bold"
 style="font-size:12px; letter-spacing:4px; border-width:3px">

 02 — Personality

 </blockquote><hr>
 
 
 
 <!-- ------------------------------------
 PERSONALITY CONTENT
 ------------------------------------- -->
 <div class="text-muted p-1 mb-3" style="max-height:160px; overflow:auto">
 
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet velit felis. Phasellus molestie vestibulum viverra. Etiam a erat tortor. Ut risus orci, suscipit vel orci id, vulputate porttitor ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</p>
 
 <p>Vestibulum efficitur fermentum dui nec scelerisque. Mauris vestibulum id nisi placerat interdum. Quisque vel lacus odio. Curabitur nec enim ut felis semper sagittis sit amet sed turpis. In libero eros, malesuada non neque nec, congue vehicula turpis. Nullam dapibus ut neque sed ullamcorper.</p>
 
 <p>Aenean quis lacus sapien. Aenean ex arcu, efficitur ac venenatis a, rhoncus eget nisi. Nam placerat quam at felis volutpat, eu tincidunt ligula auctor. Curabitur ornare urna vitae lectus placerat tincidunt. Maecenas facilisis id orci non cursus. Integer in tempus nibh, in sagittis mauris. Donec ornare velit sed iaculis volutpat.</p>
 
 </div><hr class="my-3">
 
 
 
 <!-- ------------------------------------
 LIKES AND DISLIKES
 ------------------------------------- -->
 <div class="row no-gutters">


 <!-- ------ LIKES
 ------------------------------------- -->
 <div class="col-6 pr-3">
 
 <div class="text-uppercase font-weight-bold"
 style="font-size:12px; letter-spacing:4px;">Likes</div><hr class="my-2 mb-3">
 <ul class="fa-ul text-muted">
 
 <li class="my-2"><span class="fa-li">
 <i class="fas fa-check" style="font-size:9px; color:#aaaaaa"></i></span>
 <p>content</p>
 </li>
 
 <li class="my-2"><span class="fa-li">
 <i class="fas fa-check" style="font-size:9px; color:#aaaaaa"></i></span>
 <p>content</p>
 </li>
 
 <li class="my-2"><span class="fa-li">
 <i class="fas fa-check" style="font-size:9px; color:#aaaaaa"></i></span>
 <p>best if four short things</p>
 </li>
 
 <li class="my-2"><span class="fa-li">
 <i class="fas fa-check" style="font-size:9px; color:#aaaaaa"></i></span>
 <p>these don't scroll!</p>
 </li>
 
 </ul>
 </div>



 <!-- ------ DISLIKES
 ------------------------------------- -->
 <div class="col-6 pl-3">
 
 <div class="text-uppercase font-weight-bold text-right"
 style="font-size:12px; letter-spacing:4px;">Dislikes</div><hr class="my-2 mb-3">
 <ul class="fa-ul text-muted">
 
 <li class="my-2"><span class="fa-li">
 <i class="fas fa-times" style="font-size:9px; color:#aaaaaa"></i></span>
 <p>content</p>
 </li>
 
 <li class="my-2"><span class="fa-li">
 <i class="fas fa-times" style="font-size:9px; color:#aaaaaa"></i></span>
 <p>content</p>
 </li>
 
 <li class="my-2"><span class="fa-li">
 <i class="fas fa-times" style="font-size:9px; color:#aaaaaa"></i></span>
 <p>best if four short things</p>
 </li>
 
 <li class="my-2"><span class="fa-li">
 <i class="fas fa-times" style="font-size:9px; color:#aaaaaa"></i></span>
 <p>these don't scroll!</p>
 </li>
 
 </ul>
 </div>
 
 </div>
</div>
</div>
<!-- ------------------------------------


 03 // BACKGROUND


------------------------------------- -->
<div class="tab-pane fade" id="three">
<div class="bg-faded p-3">
 
 <!-- ------------------------------------
 HEADER
 ------------------------------------- -->
 <blockquote class="text-uppercase font-weight-bold"
 style="font-size:12px; letter-spacing:4px; border-width:3px">

 03 — Background

 </blockquote><hr>
 
 
 
 <!-- ------------------------------------
 CONTENT
 ------------------------------------- -->
 <div class="text-muted p-1" style="max-height:340px; overflow:auto">
 
 <p>In cursus nisi ac eros convallis, at fringilla purus laoreet. Morbi pretium gravida lacus, vel tempor libero interdum et. Integer pellentesque pretium dolor vel eleifend. Vestibulum ornare id eros id rutrum. Vivamus sagittis, tellus at dignissim congue, ipsum dui dignissim tortor, ac eleifend arcu lacus lacinia massa. Mauris eget venenatis sapien.</p>
 
 <p>Nullam non laoreet erat, at rhoncus tellus. Aenean sodales, ipsum nec tincidunt rhoncus, tellus nibh dignissim ante, at facilisis nisl nibh bibendum massa. Donec placerat arcu a turpis commodo eleifend. Aenean at odio velit. Morbi accumsan condimentum nunc, vitae semper justo luctus vitae. Ut ac lobortis nunc. Vivamus eget turpis massa. In hac habitasse platea dictumst. Aliquam convallis eros non cursus hendrerit.</p>
 
 <p>Maecenas ac pretium quam. Mauris ullamcorper, sapien ac pellentesque egestas, sem urna blandit felis, et scelerisque metus lacus ac diam. Phasellus tincidunt neque elit, quis facilisis odio molestie in. Nulla neque lectus, malesuada vel congue sit amet, tempor quis est. Quisque sit amet nisi nisi.</p>
 
 <p>Maecenas at felis non justo egestas convallis. Fusce ornare lacus convallis ex laoreet, nec varius libero laoreet. Donec eget mauris ac justo accumsan fermentum. Vestibulum fermentum interdum libero id tempus. Donec auctor ipsum sed lacus blandit ornare.</p>
 
 <p>Nulla non lorem eget massa suscipit consequat. In aliquet augue fermentum facilisis convallis.</p>
 
 </div>
</div>
</div>
<!-- ------------------------------------


 04 // TRIVIA


------------------------------------- -->
<div class="tab-pane fade" id="four">
<div class="bg-faded p-3">
 
 <!-- ------------------------------------
 HEADER
 ------------------------------------- -->
 <blockquote class="text-uppercase font-weight-bold"
 style="font-size:12px; letter-spacing:4px; border-width:3px">

 04 — Trivia

 </blockquote><hr>
 
 
 
 <!-- ------------------------------------
 CONTENT
 ------------------------------------- -->
 <div style="max-height:340px; overflow:auto">
 <ul class="fa-ul mb-0 text-muted">
 
 <li class="my-2"><span class="fa-li">
 <i class="fas fa-angle-right" style="font-size:9px; color:#aaaaaa"></i></span>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
 </li>
 
 <li class="my-2"><span class="fa-li">
 <i class="fas fa-angle-right" style="font-size:9px; color:#aaaaaa"></i></span>
 <p>Ultrices dui sapien eget mi proin sed. Semper feugiat nibh sed pulvinar proin gravida. Cursus in hac habitasse platea dictumst quisque sagittis purus.</p>
 </li>
 
 <li class="my-2"><span class="fa-li">
 <i class="fas fa-angle-right" style="font-size:9px; color:#aaaaaa"></i></span>
 <p>Augue interdum velit euismod in pellentesque. Euismod elementum nisi quis eleifend quam adipiscing vitae proin. Sit amet porttitor eget dolor morbi non arcu risus quis.</p>
 </li>
 
 <li class="my-2"><span class="fa-li">
 <i class="fas fa-angle-right" style="font-size:9px; color:#aaaaaa"></i></span>
 <p> Leo vel fringilla est ullamcorper eget nulla facilisi etiam. Auctor augue mauris augue neque. Scelerisque fermentum dui faucibus in ornare quam viverra.</p>
 </li>
 
 </ul>
 </div>

</div>
</div>
<!-- ------------------------------------


 05 // RELATIONSHIPS


------------------------------------- -->
<div class="tab-pane fade" id="five">
<div class="bg-faded p-3">
 
 <!-- ------------------------------------
 HEADER
 ------------------------------------- -->
 <blockquote class="text-uppercase font-weight-bold"
 style="font-size:12px; letter-spacing:4px; border-width:3px">

 05 — Relationships

 </blockquote><hr>
 <div style="max-height:340px; overflow:auto">



 <!-- ------ RELATIONSHIP ONE
 ------------------------------------- -->
 <div class="row no-gutters p-1 py-3">
 
 <!-- IMAGE -->
 <div class="col-5 w-100" style="min-height:200px; border-radius:10px;
 /* IMAGE
 ====================================== */;
 background-image: url(https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png);
 background-size:cover;
 background-repeat: no-repeat;
 background-position: center;"></div>
 
 <!-- DESCRIPTION -->
 <div class="col-7 px-3">
 <div class="row no-gutters">
 <div class="col-6"><span style="font-size:20px; color:#aaaaaa">01.</span></div>
 <div class="col-6 text-right"><span>
 <a href="LINK" style="font-size:15px; color:#aaaaaa">
 
 Name</a>
 <br>relationship
 
 </span>
 </div>
 </div>
 <hr class="my-2">
 <div class="text-muted" style="max-height:150px; overflow:auto">
 <p>In cursus nisi ac eros convallis, at fringilla purus laoreet. Morbi pretium gravida lacus, vel tempor libero interdum et. Integer pellentesque pretium dolor vel eleifend. Vestibulum ornare id eros id rutrum.
 </p>
 <p>Nullam non laoreet erat, at rhoncus tellus. Aenean sodales, ipsum nec tincidunt rhoncus, tellus nibh dignissim ante, at facilisis nisl nibh bibendum massa. Vivamus eget turpis massa. In hac habitasse platea dictumst. Aliquam convallis eros non cursus hendrerit.
 </p>
 </div>
 </div>
 </div>



 <!-- ------ RELATIONSHIP TWO
 ------------------------------------- -->
 <div class="row no-gutters p-2 py-3">
 
 <!-- IMAGE -->
 <div class="col-5 w-100" style="min-height:200px; border-radius:10px;
 /* IMAGE
 ====================================== */;
 background-image: url(https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png);
 background-size:cover;
 background-repeat: no-repeat;
 background-position: center;"></div>
 
 <!-- DESCRIPTION -->
 <div class="col-7 px-3">
 <div class="row no-gutters">
 <div class="col-6"><span style="font-size:20px; color:#aaaaaa">02.</span></div>
 <div class="col-6 text-right"><span>
 <a href="LINK" style="font-size:15px; color:#aaaaaa">
 
 Name</a>
 <br>relationship
 
 </span>
 </div>
 </div>
 <hr class="my-2">
 <div class="text-muted" style="max-height:150px; overflow:auto">
 <p>In cursus nisi ac eros convallis, at fringilla purus laoreet. Morbi pretium gravida lacus, vel tempor libero interdum et. Integer pellentesque pretium dolor vel eleifend. Vestibulum ornare id eros id rutrum.
 </p>
 <p>Nullam non laoreet erat, at rhoncus tellus. Aenean sodales, ipsum nec tincidunt rhoncus, tellus nibh dignissim ante, at facilisis nisl nibh bibendum massa. Vivamus eget turpis massa. In hac habitasse platea dictumst. Aliquam convallis eros non cursus hendrerit.
 </p>
 </div>
 </div>
 </div>


 </div>
</div>
</div>
</div></div></div>
<!-- ------------------------------------


 CREDITS
 (DONT REMOVE THANK U <3333)


------------------------------------- --> 
<div class="p-1 small text-left" style="letter-spacing:4px">


 <a href="https://toyhou.se/9283486.-f2u-telling"
 data-toggle="tooltip" title="code by jiko" style="color:#aaaaaa; text-decoration:none !important">
 <i class="far fa-code"></i>
 </a> .
 
 <a href="ARTIST LINK"
 data-toggle="tooltip" title="image by USER" style="color:#aaaaaa">
 <i class="far fa-image"></i>
 </a>


</div>
</div>