Fade In Profile
created by:BigGayFish
Custom ColorsBootstrapHTMLUser
Copy
<!--FADE IN PROFILE - BOOTSTRAPS VERSION
I had a very specific idea for my profile for a while now, and after seeing the fade in CSS by BUNSKIZZ, I knew exactly how to set it up. This profile can be considered modular in some regard as everything can be moved around and edited, but as is, it's got everything I personally enjoy/need in a profile. It can be used without the CSS it just wont have the cool fade in effect, but it still has the main effect of disappearing the first section to reveal the actual profile.
HOW TO USE CSS: Get the CSS from https://toyhou.se/32087663.css-snippet-page-fade-in and when you place it in your CSS box, replace .body with .fadeani
COLOR INDEX: -secondary - The main accent color, it affects the buttons and borders
-->
<div class="container-fluid" id="start">
<div class="collapse show" data-parent="#start" style="transition-duration: 1s">
<a href="#loading" data-toggle="collapse" >
<div class="tooltipster" title="art by ArtistName" style="background: url(https://dummyimage.com/350/ffffff/000000) center; height: 400px; background-repeat: no-repeat; background-size: contain; animation-duration:2s;"></div>
<h1 class="font-weight-bold text-center text-uppercase display-4" style="text-shadow: 0 0 10px; letter-spacing: 15px;">Intro Text Here
<i class="fa-solid fa-caret-down fa-beat"></i>
</h1>
</a>
</div>
<div class="collapse fadeani" id="loading" data-parent="#start" style="font-size: 13pt; transition-duration: 1.5s">
<div class="row no-gutters align-items-center">
<!--USERNAME HEADER-->
<div class="col-lg-12 mb-3 bg-faded p-2">
<center>
<div class="mb-2" style="max-width: 650px;">
<h1 class="text-uppercase text-secondary text-center font-weight-bold display-4"><i class="fad fa-fish-fins"></i> USERNAME || NICKNAME<i class="fad fa-fish-fins fa-flip-horizontal"></i></h1>
<div class="card bg-secondary mb-1 rounded-0" style="max-width: 650px; height: 3px;"></div>
<div class="card bg-secondary rounded-0" style="max-width: 650px; height: 3px;"></div>
</div>
</center>
<h1 class="text-uppercase text-center text-secondary">AGE || GENDER || PRO/NOUNS || ETC</h1>
</div>
<!--END OF USERNAME HEADER-->
<!--ABOUT-->
<div class="col-md-4 mb-3">
<div class="card bg-faded rounded-0 border-0 p-3 mb-3" style="max-height: 400px; overflow-y:scroll;">
<h1 class="text-uppercase text-secondary my-2 text-center">About Me</h1>
<div class="card bg-secondary mb-1"></div>
<p>A quick summary about yourself. 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-text m-3" style="background-color: transparent; border: none;">
<div class="row d-flex justify-content-center p-2">
<div class="col-sm-6">
<h3>Interests:</h3>
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<div class="col-sm-6">
<h3>Fandoms:</h3>
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<div class="col-sm-6">
<h3>Thinks I Like:</h3>
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<div class="col-sm-6">
<h3>Things I Dislike:</h3>
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--END OF ABOUT-->
<!--PAGEDOLL-->
<div class="col-md-3 mb-3">
<div class="tooltipster" title="art by ArtistName" style="background: url(https://dummyimage.com/350/ffffff/000000) center; background-size: contain; background-repeat: no-repeat; height: 400px;"></div>
</div>
<!--END OF PAGEDOLL-->
<!--LINKS-->
<div class="col-md-5 mb-3">
<div class="card bg-faded border-0 rounded-0 p-3 mb-3" style="max-height: 400px; overflow-y:scroll;">
<h1 class="text-uppercase text-secondary mt-3 mb-2 text-center">My Links:</h1>
<div class="card bg-secondary mb-2"></div>
<div class='d-flex justify-content-center my-2'>
<!-- DEVIANTART LINK -->
<a class="text-secondary tooltipster" href="#" title="DeviantArt">
<i class="fab fa-deviantart fa-fw fa-2x"></i>
</a>
<!-- TUMBLR LINK -->
<a class="text-secondary tooltipster" href="#" title="Tumblr">
<i class="fab fa-tumblr fa-fw fa-2x"></i>
</a>
<!-- DISCORD NAME -->
<a class="text-secondary tooltipster" title="Discord: mutuals and clients only; ask">
<i class="fab fa-discord fa-fw fa-2x"></i>
</a>
<!-- YOUTUBE LINK -->
<a class="text-secondary tooltipster ml-2" title="YouTube">
<i class="fab fa-youtube fa-fw fa-2x"></i>
</a>
<a class="text-secondary tooltipster ml-2" href="#" title="commission carrd">
<i class="fas fa-address-card fa-fw fa-2x"></i>
</a>
</div>
<div class="row justify-content-md-center">
<div class="col-sm">
<h5 class="text-uppercase text-secondary text-center">services:</h5>
<div class="card bg-secondary mb-2"></div>
<a href="#">Service Link</a> <span class="pull-right">Open</span>
<br>
<a href="#">Trades</a> <span class="pull-right">Open</span>
<br>
<a href="#">Freebies</a> <span class="pull-right">Open</span>
<br>
<span class="text-primary">Requests</span> <span class="pull-right">Friends Only</span>
<br>
<a href="#">Ko-fi</a>
<br>
<a href="#">Terms of Service</a>
</div>
<div class="col-sm">
<h5 class="text-uppercase text-secondary text-center">other links:</h5>
<div class="card bg-secondary mb-2"></div>
<a href="#">Link</a>
<br>
<a href="#">Link</a>
<br>
<a href="#">Link</a>
<br>
<a href="#">Link</a>
</div>
</div>
<h1 class="text-uppercase text-secondary my-2 text-center">Friend Links</h1>
<div class="card bg-secondary mb-2"></div>
<div class="row d-flex justify-content-center p-2">
<div class="col-md-4">
<h3>@/username</h3>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
<div class="col-md-4">
<h3>@/username</h3>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
<div class="col-md-4">
<h3>@/username</h3>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</div>
</div>
<!--END OF LINKS-->
<!--ICON ACCENT-->
<div class="col-md-4 text-right mb-3">
<i class="fad fa-fish-fins fa-4x"></i>
</div>
<!--END OF ICON ACCENT-->
<!--PAGEDOLL ACCENT-->
<div class="col-lg-4 mb-3">
<div class="tooltipster" title="art by ArtistName" style="background: url(https://dummyimage.com/350/ffffff/000000) center; height: 300px; background-repeat: no-repeat; background-size: contain; animation-duration:2s;"></div>
</div>
<!--END OF PAGEDOLL ACCENT-->
<!--ICON ACCENT-->
<div class="col-md-4 mb-3">
<i class="fad fa-fish-fins fa-flip-horizontal fa-4x"></i>
</div>
<!--END OF ICON ACCENT-->
<!--HEADER-->
<div class="col-lg-12 mb-3 p-2">
<center>
<div class="bg-faded p-2 mb-3" style="max-width: 650px;">
<h1 class="text-uppercase text-secondary text-center font-weight-bold display-4"><i class="fad fa-fish-fins"></i> My Worlds <i class="fad fa-fish-fins fa-flip-horizontal"></i></h1>
</div>
<div class="card bg-secondary mb-1 rounded-0" style="max-width: 650px; height: 3px;"></div>
<div class="card bg-secondary mb-1 rounded-0" style="max-width: 650px; height: 3px;"></div>
</center>
</div>
<!--END OF HEADER-->
<!--L BUTTON-->
<div class="col-sm-1 mb-3 p-2">
<div class="card d-flex flex-row justify-content-center align-items-center w-100 bg-secondary border-0" style="height:50px; border:2px solid;">
<p style="font-size:30px;"><i class="fas fa-angle-left"></i></p>
<!--TOGGLE-->
<a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;" data-slide="prev" href="#WORLDS"></a>
</div>
</div>
<!--L BUTTON END-->
<!--FOLDER CAROUSEL-->
<div class="col-lg-10 carousel slide" id="WORLDS" data-ride="false" data-pause="true">
<div class="carousel-inner" style="height: 430px; overflow-y: scroll;">
<!--PAGE ONE-->
<div class="carousel-item active">
<div class="row d-flex justify-content-center p-1">
<!--FOLDER-->
<div class="col-md-4 mb-2">
<h5 class="text-uppercase text-secondary text-center bg-faded p-2"><a href="#">Folder Name</a></h5>
<div class="card bg-secondary mb-1"></div>
<div class="card bg-secondary mb-2"></div>
<div style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
</div>
<div class="card bg-faded mt-2 p-2 rounded-0 border-0">
<p>Folder summary goes here, stick to only one or two lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<!--END OF FOLDER-->
<!--FOLDER-->
<div class="col-md-4 mb-2">
<h5 class="text-uppercase text-secondary text-center bg-faded p-2"><a href="#">Folder Name</a></h5>
<div class="card bg-secondary mb-1"></div>
<div class="card bg-secondary mb-2"></div>
<div style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
</div>
<div class="card bg-faded mt-2 p-2 rounded-0 border-0">
<p>Folder summary goes here, stick to only one or two lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<!--END OF FOLDER-->
<!--FOLDER-->
<div class="col-md-4 mb-2">
<h5 class="text-uppercase text-secondary text-center bg-faded p-2"><a href="#">Folder Name</a></h5>
<div class="card bg-secondary mb-1"></div>
<div class="card bg-secondary mb-2"></div>
<div style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
</div>
<div class="card bg-faded mt-2 p-2 rounded-0 border-0">
<p>Folder summary goes here, stick to only one or two lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<!--END OF FOLDER-->
</div>
</div>
<!--END OF PAGE ONE-->
<!--PAGE TWO-->
<div class="carousel-item">
<div class="row d-flex justify-content-center p-1">
<!--FOLDER-->
<div class="col-md-4 mb-2">
<h5 class="text-uppercase text-secondary text-center bg-faded p-2"><a href="#">Folder Name</a></h5>
<div class="card bg-secondary mb-1"></div>
<div class="card bg-secondary mb-2"></div>
<div style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
</div>
<div class="card bg-faded mt-2 p-2 rounded-0 border-0">
<p>Folder summary goes here, stick to only one or two lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<!--END OF FOLDER-->
<!--FOLDER-->
<div class="col-md-4 mb-2">
<h5 class="text-uppercase text-secondary text-center bg-faded p-2"><a href="#">Folder Name</a></h5>
<div class="card bg-secondary mb-1"></div>
<div class="card bg-secondary mb-2"></div>
<div style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
</div>
<div class="card bg-faded mt-2 p-2 rounded-0 border-0">
<p>Folder summary goes here, stick to only one or two lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<!--END OF FOLDER-->
<!--FOLDER-->
<div class="col-md-4 mb-2">
<h5 class="text-uppercase text-secondary text-center bg-faded p-2"><a href="#">Folder Name</a></h5>
<div class="card bg-secondary mb-1"></div>
<div class="card bg-secondary mb-2"></div>
<div style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
</div>
<div class="card bg-faded mt-2 p-2 rounded-0 border-0">
<p>Folder summary goes here, stick to only one or two lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<!--END OF FOLDER-->
</div>
</div>
<!--END OF PAGE TWO-->
<!--PAGE THREE-->
<div class="carousel-item">
<div class="row d-flex justify-content-center p-1">
<!--FOLDER-->
<div class="col-md-4 mb-2">
<h5 class="text-uppercase text-secondary text-center bg-faded p-2"><a href="#">Folder Name</a></h5>
<div class="card bg-secondary mb-1"></div>
<div class="card bg-secondary mb-2"></div>
<div style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
</div>
<div class="card bg-faded mt-2 p-2 rounded-0 border-0">
<p>Folder summary goes here, stick to only one or two lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<!--END OF FOLDER-->
<!--FOLDER-->
<div class="col-md-4 mb-2">
<h5 class="text-uppercase text-secondary text-center bg-faded p-2"><a href="#">Folder Name</a></h5>
<div class="card bg-secondary mb-1"></div>
<div class="card bg-secondary mb-2"></div>
<div style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
</div>
<div class="card bg-faded mt-2 p-2 rounded-0 border-0">
<p>Folder summary goes here, stick to only one or two lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<!--END OF FOLDER-->
<!--FOLDER-->
<div class="col-md-4 mb-2">
<h5 class="text-uppercase text-secondary text-center bg-faded p-2"><a href="#">Folder Name</a></h5>
<div class="card bg-secondary mb-1"></div>
<div class="card bg-secondary mb-2"></div>
<div style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
</div>
<div class="card bg-faded mt-2 p-2 rounded-0 border-0">
<p>Folder summary goes here, stick to only one or two lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<!--END OF FOLDER-->
</div>
</div>
<!--END OF PAGE THREE-->
<!--INSERT MORE SLIDES ABOVE HERE-->
</div>
</div>
<!--END OF FOLDER CAROUSEL-->
<!--R BUTTON-->
<div class="col-sm-1 mb-3 p-2">
<div class="card d-flex flex-row justify-content-center align-items-center w-100 bg-secondary border-0" style="height:50px;">
<p style="font-size:30px;"><i class="fas fa-angle-right"></i></p>
<!--TOGGLE-->
<a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;" data-slide="next" href="#WORLDS"></a>
</div>
</div>
<!--R BUTTON END-->
<!--HEADER-->
<div class="col-lg-12 mb-3 mt-n2 p-2">
<center>
<div class="bg-faded p-2 mb-3" style="max-width: 650px;">
<h1 class="text-uppercase text-secondary text-center font-weight-bold display-4"><i class="fad fa-fish-fins"></i> My Favorite Characters <i class="fad fa-fish-fins fa-flip-horizontal"></i></h1>
</div>
<div class="card bg-secondary mb-1 rounded-0" style="max-width: 650px; height: 3px;"></div>
<div class="card bg-secondary mb-1 rounded-0" style="max-width: 650px; height: 3px;"></div>
</center>
</div>
<!--END OF HEADER-->
<!--L BUTTON-->
<div class="col-sm-1 mb-3 p-2">
<div class="card d-flex flex-row justify-content-center align-items-center w-100 bg-secondary border-0" style="height:50px; border:2px solid;">
<p style="font-size:30px;"><i class="fas fa-angle-left"></i></p>
<!--TOGGLE-->
<a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;" data-slide="prev" href="#OCS"></a>
</div>
</div>
<!--L BUTTON END-->
<!--CHARACTER CAROUSEL-->
<div class="col-lg-10 carousel slide" id="OCS" data-ride="false" data-pause="true">
<div class="carousel-inner" style="height: 300px; overflow-y: scroll;">
<!--PAGE ONE-->
<div class="carousel-item active">
<center><div class="row d-flex justify-content-center">
<!--CHARACTER-->
<div class="col-md-3 mb-2">
<div class="card card-outline-secondary rounded-0 text-center justify-content-center m-2" style="height: 250px; width: 230px;
background: url('https://dummyimage.com/350/ffffff/000000') top;
background-size: contain; color: #fff; border-width: 2px;">
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
<div class="card bg-secondary rounded-0 border-0" style="position:absolute; width: 100%; bottom: 0;"><p class="pt-1" style="font-weight:bold;">Character Name</p></div>
</div>
</div>
<!--END OF CHARACTER-->
<!--CHARACTER-->
<div class="col-md-3 mb-2">
<div class="card card-outline-secondary rounded-0 text-center justify-content-center m-2" style="height: 250px; width: 230px;
background: url('https://dummyimage.com/350/ffffff/000000') top;
background-size: contain; color: #fff; border-width: 2px;">
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
<div class="card bg-secondary rounded-0 border-0" style="position:absolute; width: 100%; bottom: 0;"><p class="pt-1" style="font-weight:bold;">Character Name</p></div>
</div>
</div>
<!--END OF CHARACTER-->
<!--CHARACTER-->
<div class="col-md-3 mb-2">
<div class="card card-outline-secondary rounded-0 text-center justify-content-center m-2" style="height: 250px; width: 230px;
background: url('https://dummyimage.com/350/ffffff/000000') top;
background-size: contain; color: #fff; border-width: 2px;">
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
<div class="card bg-secondary rounded-0 border-0" style="position:absolute; width: 100%; bottom: 0;"><p class="pt-1" style="font-weight:bold;">Character Name</p></div>
</div>
</div>
<!--END OF CHARACTER-->
<!--CHARACTER-->
<div class="col-md-3 mb-2">
<div class="card card-outline-secondary rounded-0 text-center justify-content-center m-2" style="height: 250px; width: 230px;
background: url('https://dummyimage.com/350/ffffff/000000') top;
background-size: contain; color: #fff; border-width: 2px;">
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
<div class="card bg-secondary rounded-0 border-0" style="position:absolute; width: 100%; bottom: 0;"><p class="pt-1" style="font-weight:bold;">Character Name</p></div>
</div>
</div>
<!--END OF CHARACTER-->
</div></center>
</div>
<!--END OF PAGE ONE-->
<!--PAGE TWO-->
<div class="carousel-item">
<center><div class="row d-flex justify-content-center">
<!--CHARACTER-->
<div class="col-md-3 mb-2">
<div class="card card-outline-secondary rounded-0 text-center justify-content-center m-2" style="height: 250px; width: 230px;
background: url('https://dummyimage.com/350/ffffff/000000') top;
background-size: contain; color: #fff; border-width: 2px;">
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
<div class="card bg-secondary rounded-0 border-0" style="position:absolute; width: 100%; bottom: 0;"><p class="pt-1" style="font-weight:bold;">Character Name</p></div>
</div>
</div>
<!--END OF CHARACTER-->
<!--CHARACTER-->
<div class="col-md-3 mb-2">
<div class="card card-outline-secondary rounded-0 text-center justify-content-center m-2" style="height: 250px; width: 230px;
background: url('https://dummyimage.com/350/ffffff/000000') top;
background-size: contain; color: #fff; border-width: 2px;">
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
<div class="card bg-secondary rounded-0 border-0" style="position:absolute; width: 100%; bottom: 0;"><p class="pt-1" style="font-weight:bold;">Character Name</p></div>
</div>
</div>
<!--END OF CHARACTER-->
<!--CHARACTER-->
<div class="col-md-3 mb-2">
<div class="card card-outline-secondary rounded-0 text-center justify-content-center m-2" style="height: 250px; width: 230px;
background: url('https://dummyimage.com/350/ffffff/000000') top;
background-size: contain; color: #fff; border-width: 2px;">
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
<div class="card bg-secondary rounded-0 border-0" style="position:absolute; width: 100%; bottom: 0;"><p class="pt-1" style="font-weight:bold;">Character Name</p></div>
</div>
</div>
<!--END OF CHARACTER-->
<!--CHARACTER-->
<div class="col-md-3 mb-2">
<div class="card card-outline-secondary rounded-0 text-center justify-content-center m-2" style="height: 250px; width: 230px;
background: url('https://dummyimage.com/350/ffffff/000000') top;
background-size: contain; color: #fff; border-width: 2px;">
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
<div class="card bg-secondary rounded-0 border-0" style="position:absolute; width: 100%; bottom: 0;"><p class="pt-1" style="font-weight:bold;">Character Name</p></div>
</div>
</div>
<!--END OF CHARACTER-->
</div></center>
</div>
<!--END OF PAGE TWO-->
<!--PAGE THREE-->
<div class="carousel-item">
<center><div class="row d-flex justify-content-center">
<!--CHARACTER-->
<div class="col-md-3 mb-2">
<div class="card card-outline-secondary rounded-0 text-center justify-content-center m-2" style="height: 250px; width: 230px;
background: url('https://dummyimage.com/350/ffffff/000000') top;
background-size: contain; color: #fff; border-width: 2px;">
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
<div class="card bg-secondary rounded-0 border-0" style="position:absolute; width: 100%; bottom: 0;"><p class="pt-1" style="font-weight:bold;">Character Name</p></div>
</div>
</div>
<!--END OF CHARACTER-->
<!--CHARACTER-->
<div class="col-md-3 mb-2">
<div class="card card-outline-secondary rounded-0 text-center justify-content-center m-2" style="height: 250px; width: 230px;
background: url('https://dummyimage.com/350/ffffff/000000') top;
background-size: contain; color: #fff; border-width: 2px;">
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
<div class="card bg-secondary rounded-0 border-0" style="position:absolute; width: 100%; bottom: 0;"><p class="pt-1" style="font-weight:bold;">Character Name</p></div>
</div>
</div>
<!--END OF CHARACTER-->
<!--CHARACTER-->
<div class="col-md-3 mb-2">
<div class="card card-outline-secondary rounded-0 text-center justify-content-center m-2" style="height: 250px; width: 230px;
background: url('https://dummyimage.com/350/ffffff/000000') top;
background-size: contain; color: #fff; border-width: 2px;">
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
<div class="card bg-secondary rounded-0 border-0" style="position:absolute; width: 100%; bottom: 0;"><p class="pt-1" style="font-weight:bold;">Character Name</p></div>
</div>
</div>
<!--END OF CHARACTER-->
<!--CHARACTER-->
<div class="col-md-3 mb-2">
<div class="card card-outline-secondary rounded-0 text-center justify-content-center m-2" style="height: 250px; width: 230px;
background: url('https://dummyimage.com/350/ffffff/000000') top;
background-size: contain; color: #fff; border-width: 2px;">
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
<div class="card bg-secondary rounded-0 border-0" style="position:absolute; width: 100%; bottom: 0;"><p class="pt-1" style="font-weight:bold;">Character Name</p></div>
</div>
</div>
<!--END OF CHARACTER-->
</div></center>
</div>
<!--END OF PAGE THREE-->
<!--INSERT MORE SLIDES ABOVE HERE-->
</div>
</div>
<!--END OF CHARACTER CAROUSEL-->
<!--R BUTTON-->
<div class="col-sm-1 mb-3 p-2">
<div class="card d-flex flex-row justify-content-center align-items-center w-100 bg-secondary border-0" style="height:50px;">
<p style="font-size:30px;"><i class="fas fa-angle-right"></i></p>
<!--TOGGLE-->
<a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;" data-slide="next" href="#OCS"></a>
</div>
</div>
<!--R BUTTON END-->
<!--HEADER-->
<div class="col-lg-12 mb-3 mt-n4 p-2">
<center>
<div class="bg-faded p-2 mb-3" style="max-width: 650px;">
<h1 class="text-uppercase text-secondary text-center font-weight-bold display-4"><i class="fad fa-fish-fins"></i> My Friends <i class="fad fa-fish-fins fa-flip-horizontal"></i></h1>
</div>
<div class="card bg-secondary mb-1 rounded-0" style="max-width: 650px; height: 3px;"></div>
<div class="card bg-secondary mb-1 rounded-0" style="max-width: 650px; height: 3px;"></div>
</center>
</div>
<!--END OF HEADER-->
<!--L BUTTON-->
<div class="col-sm-1 mb-3 p-2">
<div class="card d-flex flex-row justify-content-center align-items-center w-100 bg-secondary border-0" style="height:50px; border:2px solid;">
<p style="font-size:30px;"><i class="fas fa-angle-left"></i></p>
<!--TOGGLE-->
<a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;" data-slide="prev" href="#HOMIES"></a>
</div>
</div>
<!--L BUTTON END-->
<!--FRIENDS CAROUSEL-->
<div class="col-lg-10 carousel slide" id="HOMIES" data-ride="false" data-pause="true">
<div class="carousel-inner" style="height: 300px; overflow-y: scroll;">
<!--PAGE ONE-->
<div class="carousel-item active">
<center><div class="row d-flex justify-content-center">
<!--FRIEND-->
<div class="col-md-3 mb-2">
<div class="card card-outline-secondary rounded-0 text-center justify-content-center m-2" style="height: 250px; width: 230px;
background: url('https://dummyimage.com/350/ffffff/000000') center;
background-size: COVER; color: #fff; border-width: 2px;">
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
<div class="card bg-secondary rounded-0 border-0" style="position:absolute; width: 100%; bottom: 0;"><p class="pt-1" style="font-weight:bold;">Friend's Name</p></div>
</div>
</div>
<!--END OF FRIEND-->
<!--FRIEND-->
<div class="col-md-3 mb-2">
<div class="card card-outline-secondary rounded-0 text-center justify-content-center m-2" style="height: 250px; width: 230px;
background: url('https://dummyimage.com/350/ffffff/000000') center;
background-size: COVER; color: #fff; border-width: 2px;">
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
<div class="card bg-secondary rounded-0 border-0" style="position:absolute; width: 100%; bottom: 0;"><p class="pt-1" style="font-weight:bold;">Friend's Name</p></div>
</div>
</div>
<!--END OF FRIEND-->
<!--FRIEND-->
<div class="col-md-3 mb-2">
<div class="card card-outline-secondary rounded-0 text-center justify-content-center m-2" style="height: 250px; width: 230px;
background: url('https://dummyimage.com/350/ffffff/000000') center;
background-size: COVER; color: #fff; border-width: 2px;">
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
<div class="card bg-secondary rounded-0 border-0" style="position:absolute; width: 100%; bottom: 0;"><p class="pt-1" style="font-weight:bold;">Friend's Name</p></div>
</div>
</div>
<!--END OF FRIEND-->
<!--FRIEND-->
<div class="col-md-3 mb-2">
<div class="card card-outline-secondary rounded-0 text-center justify-content-center m-2" style="height: 250px; width: 230px;
background: url('https://dummyimage.com/350/ffffff/000000') center;
background-size: COVER; color: #fff; border-width: 2px;">
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
<div class="card bg-secondary rounded-0 border-0" style="position:absolute; width: 100%; bottom: 0;"><p class="pt-1" style="font-weight:bold;">Friend's Name</p></div>
</div>
</div>
<!--END OF FRIEND-->
</div></center>
</div>
<!--END OF PAGE ONE-->
<!--PAGE TWO-->
<div class="carousel-item">
<center><div class="row d-flex justify-content-center">
<!--FRIEND-->
<div class="col-md-3 mb-2">
<div class="card card-outline-secondary rounded-0 text-center justify-content-center m-2" style="height: 250px; width: 230px;
background: url('https://dummyimage.com/350/ffffff/000000') center;
background-size: COVER; color: #fff; border-width: 2px;">
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
<div class="card bg-secondary rounded-0 border-0" style="position:absolute; width: 100%; bottom: 0;"><p class="pt-1" style="font-weight:bold;">Friend's Name</p></div>
</div>
</div>
<!--END OF FRIEND-->
<!--FRIEND-->
<div class="col-md-3 mb-2">
<div class="card card-outline-secondary rounded-0 text-center justify-content-center m-2" style="height: 250px; width: 230px;
background: url('https://dummyimage.com/350/ffffff/000000') center;
background-size: COVER; color: #fff; border-width: 2px;">
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
<div class="card bg-secondary rounded-0 border-0" style="position:absolute; width: 100%; bottom: 0;"><p class="pt-1" style="font-weight:bold;">Friend's Name</p></div>
</div>
</div>
<!--END OF FRIEND-->
<!--FRIEND-->
<div class="col-md-3 mb-2">
<div class="card card-outline-secondary rounded-0 text-center justify-content-center m-2" style="height: 250px; width: 230px;
background: url('https://dummyimage.com/350/ffffff/000000') center;
background-size: COVER; color: #fff; border-width: 2px;">
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
<div class="card bg-secondary rounded-0 border-0" style="position:absolute; width: 100%; bottom: 0;"><p class="pt-1" style="font-weight:bold;">Friend's Name</p></div>
</div>
</div>
<!--END OF FRIEND-->
<!--FRIEND-->
<div class="col-md-3 mb-2">
<div class="card card-outline-secondary rounded-0 text-center justify-content-center m-2" style="height: 250px; width: 230px;
background: url('https://dummyimage.com/350/ffffff/000000') center;
background-size: COVER; color: #fff; border-width: 2px;">
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
<div class="card bg-secondary rounded-0 border-0" style="position:absolute; width: 100%; bottom: 0;"><p class="pt-1" style="font-weight:bold;">Friend's Name</p></div>
</div>
</div>
<!--END OF FRIEND-->
</div></center>
</div>
<!--END OF PAGE TWO-->
<!--PAGE THREE-->
<div class="carousel-item">
<center><div class="row d-flex justify-content-center">
<!--FRIEND-->
<div class="col-md-3 mb-2">
<div class="card card-outline-secondary rounded-0 text-center justify-content-center m-2" style="height: 250px; width: 230px;
background: url('https://dummyimage.com/350/ffffff/000000') center;
background-size: COVER; color: #fff; border-width: 2px;">
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
<div class="card bg-secondary rounded-0 border-0" style="position:absolute; width: 100%; bottom: 0;"><p class="pt-1" style="font-weight:bold;">Friend's Name</p></div>
</div>
</div>
<!--END OF FRIEND-->
<!--FRIEND-->
<div class="col-md-3 mb-2">
<div class="card card-outline-secondary rounded-0 text-center justify-content-center m-2" style="height: 250px; width: 230px;
background: url('https://dummyimage.com/350/ffffff/000000') center;
background-size: COVER; color: #fff; border-width: 2px;">
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
<div class="card bg-secondary rounded-0 border-0" style="position:absolute; width: 100%; bottom: 0;"><p class="pt-1" style="font-weight:bold;">Friend's Name</p></div>
</div>
</div>
<!--END OF FRIEND-->
<!--FRIEND-->
<div class="col-md-3 mb-2">
<div class="card card-outline-secondary rounded-0 text-center justify-content-center m-2" style="height: 250px; width: 230px;
background: url('https://dummyimage.com/350/ffffff/000000') center;
background-size: COVER; color: #fff; border-width: 2px;">
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
<div class="card bg-secondary rounded-0 border-0" style="position:absolute; width: 100%; bottom: 0;"><p class="pt-1" style="font-weight:bold;">Friend's Name</p></div>
</div>
</div>
<!--END OF FRIEND-->
<!--FRIEND-->
<div class="col-md-3 mb-2">
<div class="card card-outline-secondary rounded-0 text-center justify-content-center m-2" style="height: 250px; width: 230px;
background: url('https://dummyimage.com/350/ffffff/000000') center;
background-size: COVER; color: #fff; border-width: 2px;">
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
<div class="card bg-secondary rounded-0 border-0" style="position:absolute; width: 100%; bottom: 0;"><p class="pt-1" style="font-weight:bold;">Friend's Name</p></div>
</div>
</div>
<!--END OF FRIEND-->
</div></center>
</div>
<!--END OF PAGE THREE-->
<!--INSERT MORE SLIDES ABOVE HERE-->
</div>
</div>
<!--END OF FRIENDS CAROUSEL-->
<!--R BUTTON-->
<div class="col-sm-1 mb-3 p-2">
<div class="card d-flex flex-row justify-content-center align-items-center w-100 bg-secondary border-0" style="height:50px;">
<p style="font-size:30px;"><i class="fas fa-angle-right"></i></p>
<!--TOGGLE-->
<a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;" data-slide="next" href="#HOMIES"></a>
</div>
</div>
<!--R BUTTON END-->
<!--CREDITS - DO NOT TOUCH-->
<div class="col-lg-12">
<div class="card bg-faded text-center rounded-0 border-0 p-2">
<p>code by @biggayfish || original <a href="https://toyhou.se/32087663.css-snippet-page-fade-in">fade in css</a> by @BUNSKIZZ || disapearing collapse referenced from @teiyoq</p>
</div>
</div>
<!--END OF CREDITS-->
</div>
</div>
</div>Copy
<!--FADE IN PROFILE - CUSTOM COLOR VERSION
I had a very specific idea for my profile for a while now, and after seeing the fade in CSS by BUNSKIZZ, I knew exactly how to set it up. This profile can be considered modular in some regard as everything can be moved around and edited, but as is, it's got everything I personally enjoy/need in a profile. It can be used without the CSS it just wont have the cool fade in effect, but it still has the main effect of disappearing the first section to reveal the actual profile.
HOW TO USE CSS: Get the CSS from https://toyhou.se/32087663.css-snippet-page-fade-in and when you place it in your CSS box, replace .body with .fadeani
COLOR INDEX: #1D1D1D - Background color
#4fc8ff - Main accent color, it affects the buttons, borders, and links
#fff - Text color
-->
<div class="container-fluid" id="start">
<div class="collapse show" data-parent="#start" style="transition-duration: 1s">
<a href="#loading" data-toggle="collapse" style="color: #fff;">
<div class="tooltipster" title="art by ArtistName" style="background: url(https://dummyimage.com/350/ffffff/000000https://dummyimage.com/350/ffffff/000000) center; height: 400px; background-repeat: no-repeat; background-size: contain; animation-duration:2s;"></div>
<h1 class="font-weight-bold text-center text-uppercase display-4" style="text-shadow: 0 0 10px #fff; letter-spacing: 15px;">Intro Text Here
<i class="fa-solid fa-caret-down fa-beat"></i>
</h1>
</a>
</div>
<div class="collapse fadeani" id="loading" data-parent="#start" style="font-size: 13pt; transition-duration: 1.5s; color: #fff;">
<div class="row no-gutters align-items-center">
<!--USERNAME HEADER-->
<div class="col-lg-12 mb-3 p-2" style="background: #1D1D1D; color: #4fc8ff;">
<center>
<div class="mb-2" style="max-width: 650px;">
<h1 class="text-uppercase text-center font-weight-bold display-4"><i class="fad fa-fish-fins"></i> USERNAME || NICKNAME<i class="fad fa-fish-fins fa-flip-horizontal"></i></h1>
<div class="card mb-1 rounded-0" style="max-width: 650px; height: 3px; background: #4fc8ff;"></div>
<div class="card rounded-0" style="max-width: 650px; height: 3px; background: #4fc8ff;"></div>
</div>
</center>
<h1 class="text-uppercase text-center">AGE || GENDER || PRO/NOUNS || ETC</h1>
</div>
<!--END OF USERNAME HEADER-->
<!--ABOUT-->
<div class="col-md-4 mb-3">
<div class="card rounded-0 border-0 p-3 mb-3" style="max-height: 400px; overflow-y:scroll; background: #1D1D1D; ">
<h1 class="text-uppercase my-2 text-center" style="color: #4fc8ff;">About Me</h1>
<div class="card mb-1" style="background: #4fc8ff;"></div>
<p>A quick summary about yourself. 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-text m-3" style="background-color: transparent; border: none;">
<div class="row d-flex justify-content-center p-2">
<div class="col-sm-6">
<h3>Interests:</h3>
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<div class="col-sm-6">
<h3>Fandoms:</h3>
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<div class="col-sm-6">
<h3>Thinks I Like:</h3>
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<div class="col-sm-6">
<h3>Things I Dislike:</h3>
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--END OF ABOUT-->
<!--PAGEDOLL-->
<div class="col-md-3 mb-3">
<div class="tooltipster" title="art by ArtistName" style="background: url(https://dummyimage.com/350/ffffff/000000) center; background-size: contain; background-repeat: no-repeat; height: 400px;"></div>
</div>
<!--END OF PAGEDOLL-->
<!--LINKS-->
<div class="col-md-5 mb-3">
<div class="card border-0 rounded-0 p-3 mb-3" style="max-height: 400px; overflow-y:scroll; background: #1D1D1D;">
<h1 class="text-uppercase mt-3 mb-2 text-center" style="color: #4fc8ff;">My Links:</h1>
<div class="card mb-2" style="background: #4fc8ff;"></div>
<div class='d-flex justify-content-center my-2'>
<!--DEVIANTART LINK-->
<a class="tooltipster" href="#" style="color: #4fc8ff;" title="DeviantArt">
<i class="fab fa-deviantart fa-fw fa-2x"></i>
</a>
<!--TUMBLR LINK-->
<a class="tooltipster" href="#" style="color: #4fc8ff;" title="Tumblr">
<i class="fab fa-tumblr fa-fw fa-2x"></i>
</a>
<!--DISCORD NAME-->
<a class="tooltipster" style="color: #4fc8ff;" title="Discord: mutuals and clients only; ask">
<i class="fab fa-discord fa-fw fa-2x"></i>
</a>
<!--YOUTUBE LINK-->
<a class="tooltipster ml-2" href="#" style="color: #4fc8ff;" title="YouTube">
<i class="fab fa-youtube fa-fw fa-2x"></i>
</a>
<!--CARRD LINK-->
<a class="tooltipster ml-2" href="#" style="color: #4fc8ff;" title="commission carrd">
<i class="fas fa-address-card fa-fw fa-2x"></i>
</a>
</div>
<div class="row justify-content-md-center">
<div class="col-sm">
<h5 class="text-uppercase text-center" style="color: #4fc8ff;">services:</h5>
<div class="card mb-2" style="background: #4fc8ff;"></div>
<a href="#" style="color: #4fc8ff;">Service Link</a> <span class="pull-right">Open</span>
<br>
<a href="#" style="color: #4fc8ff;">Trades</a> <span class="pull-right">Open</span>
<br>
<a href="#" style="color: #4fc8ff;">Freebies</a> <span class="pull-right">Open</span>
<br>
<span style="color: #4fc8ff;">Requests</span> <span class="pull-right">Friends Only</span>
<br>
<a href="#" style="color: #4fc8ff;">Ko-fi</a>
<br>
<a href="#" style="color: #4fc8ff;">Terms of Service</a>
</div>
<div class="col-sm">
<h5 class="text-uppercase text-center" style="color: #4fc8ff;">other links:</h5>
<div class="card mb-2" style="background: #4fc8ff;"></div>
<a href="#" style="color: #4fc8ff;">Link</a>
<br>
<a href="#" style="color: #4fc8ff;">Link</a>
<br>
<a href="#" style="color: #4fc8ff;">Link</a>
<br>
<a href="#" style="color: #4fc8ff;">Link</a>
</div>
</div>
<h1 class="text-uppercase my-2 text-center" style="color: #4fc8ff;">Friend Links</h1>
<div class="card mb-2" style="background: #4fc8ff;"></div>
<div class="row d-flex justify-content-center p-2">
<div class="col-md-4">
<h3>@/username</h3>
<ul>
<li><a href="#" style="color: #4fc8ff;">Link</a></li>
<li><a href="#" style="color: #4fc8ff;">Link</a></li>
<li><a href="#" style="color: #4fc8ff;">Link</a></li>
<li><a href="#" style="color: #4fc8ff;">Link</a></li>
</ul>
</div>
<div class="col-md-4">
<h3>@/username</h3>
<ul>
<li><a href="#" style="color: #4fc8ff;">Link</a></li>
<li><a href="#" style="color: #4fc8ff;">Link</a></li>
<li><a href="#" style="color: #4fc8ff;">Link</a></li>
<li><a href="#" style="color: #4fc8ff;">Link</a></li>
</ul>
</div>
<div class="col-md-4">
<h3>@/username</h3>
<ul>
<li><a href="#" style="color: #4fc8ff;">Link</a></li>
<li><a href="#" style="color: #4fc8ff;">Link</a></li>
<li><a href="#" style="color: #4fc8ff;">Link</a></li>
<li><a href="#" style="color: #4fc8ff;">Link</a></li>
</ul>
</div>
</div>
</div>
</div>
<!--END OF LINKS-->
<!--ICON ACCENT-->
<div class="col-md-4 text-right mb-3" style="color: #4fc8ff;">
<i class="fad fa-fish-fins fa-4x"></i>
</div>
<!--END OF ICON ACCENT-->
<!--PAGEDOLL ACCENT-->
<div class="col-lg-4 mb-3">
<div class="tooltipster" title="art by ArtistName" style="background: url(https://dummyimage.com/350/ffffff/000000) center; height: 300px; background-repeat: no-repeat; background-size: contain; animation-duration:2s;"></div>
</div>
<!--END OF PAGEDOLL ACCENT-->
<!--ICON ACCENT-->
<div class="col-md-4 mb-3" style="color: #4fc8ff;">
<i class="fad fa-fish-fins fa-flip-horizontal fa-4x"></i>
</div>
<!--END OF ICON ACCENT-->
<!--HEADER-->
<div class="col-lg-12 mb-3 p-2" style="color: #4fc8ff;">
<center>
<div class="p-2 mb-3" style="max-width: 650px; background: #1D1D1D;">
<h1 class="text-uppercase text-center font-weight-bold display-4"><i class="fad fa-fish-fins"></i> My Worlds <i class="fad fa-fish-fins fa-flip-horizontal"></i></h1>
</div>
<div class="card mb-1 rounded-0" style="max-width: 650px; height: 3px; background: #4fc8ff;"></div>
<div class="card mb-1 rounded-0" style="max-width: 650px; height: 3px; background: #4fc8ff;"></div>
</center>
</div>
<!--END OF HEADER-->
<!--L BUTTON-->
<div class="col-sm-1 mb-3 p-2">
<div class="card d-flex flex-row justify-content-center align-items-center w-100 border-0" style="height:50px; background: #4fc8ff;">
<p style="font-size:30px;"><i class="fas fa-angle-left"></i></p>
<!--TOGGLE-->
<a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;" data-slide="prev" href="#WORLDS2"></a>
</div>
</div>
<!--L BUTTON END-->
<!--FOLDER CAROUSEL-->
<div class="col-lg-10 carousel slide" id="WORLDS2" data-ride="false" data-pause="true">
<div class="carousel-inner" style="height: 430px; overflow-y: scroll;">
<!--PAGE ONE-->
<div class="carousel-item active">
<div class="row d-flex justify-content-center p-1">
<!--FOLDER-->
<div class="col-md-4 mb-2">
<h5 class="text-uppercase text-center p-2" style="background: #1D1D1D;"><a href="#" style="color: #4fc8ff;">Folder Name</a></h5>
<div class="card mb-1" style="background: #4fc8ff;"></div>
<div class="card mb-2" style="background: #4fc8ff;"></div>
<div style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
</div>
<div class="card bg-faded mt-2 p-2 rounded-0 border-0" style="background: #1D1D1D;">
<p>Folder summary goes here, stick to only one or two lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<!--END OF FOLDER-->
<!--FOLDER-->
<div class="col-md-4 mb-2">
<h5 class="text-uppercase text-center p-2" style="background: #1D1D1D;"><a href="#" style="color: #4fc8ff;">Folder Name</a></h5>
<div class="card mb-1" style="background: #4fc8ff;"></div>
<div class="card mb-2" style="background: #4fc8ff;"></div>
<div style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
</div>
<div class="card bg-faded mt-2 p-2 rounded-0 border-0" style="background: #1D1D1D;">
<p>Folder summary goes here, stick to only one or two lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<!--END OF FOLDER-->
<!--FOLDER-->
<div class="col-md-4 mb-2">
<h5 class="text-uppercase text-center p-2" style="background: #1D1D1D;"><a href="#" style="color: #4fc8ff;">Folder Name</a></h5>
<div class="card mb-1" style="background: #4fc8ff;"></div>
<div class="card mb-2" style="background: #4fc8ff;"></div>
<div style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
</div>
<div class="card bg-faded mt-2 p-2 rounded-0 border-0" style="background: #1D1D1D;">
<p>Folder summary goes here, stick to only one or two lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<!--END OF FOLDER-->
</div>
</div>
<!--END OF PAGE ONE-->
<!--PAGE TWO-->
<div class="carousel-item">
<div class="row d-flex justify-content-center p-1">
<!--FOLDER-->
<div class="col-md-4 mb-2">
<h5 class="text-uppercase text-center p-2" style="background: #1D1D1D;"><a href="#" style="color: #4fc8ff;">Folder Name</a></h5>
<div class="card mb-1" style="background: #4fc8ff;"></div>
<div class="card mb-2" style="background: #4fc8ff;"></div>
<div style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
</div>
<div class="card bg-faded mt-2 p-2 rounded-0 border-0" style="background: #1D1D1D;">
<p>Folder summary goes here, stick to only one or two lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<!--END OF FOLDER-->
<!--FOLDER-->
<div class="col-md-4 mb-2">
<h5 class="text-uppercase text-center p-2" style="background: #1D1D1D;"><a href="#" style="color: #4fc8ff;">Folder Name</a></h5>
<div class="card mb-1" style="background: #4fc8ff;"></div>
<div class="card mb-2" style="background: #4fc8ff;"></div>
<div style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
</div>
<div class="card bg-faded mt-2 p-2 rounded-0 border-0" style="background: #1D1D1D;">
<p>Folder summary goes here, stick to only one or two lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<!--END OF FOLDER-->
<!--FOLDER-->
<div class="col-md-4 mb-2">
<h5 class="text-uppercase text-center p-2" style="background: #1D1D1D;"><a href="#" style="color: #4fc8ff;">Folder Name</a></h5>
<div class="card mb-1" style="background: #4fc8ff;"></div>
<div class="card mb-2" style="background: #4fc8ff;"></div>
<div style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
</div>
<div class="card bg-faded mt-2 p-2 rounded-0 border-0" style="background: #1D1D1D;">
<p>Folder summary goes here, stick to only one or two lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<!--END OF FOLDER-->
</div>
</div>
<!--END OF PAGE TWO-->
<!--PAGE THREE-->
<div class="carousel-item">
<div class="row d-flex justify-content-center p-1">
<!--FOLDER-->
<div class="col-md-4 mb-2">
<h5 class="text-uppercase text-center p-2" style="background: #1D1D1D;"><a href="#" style="color: #4fc8ff;">Folder Name</a></h5>
<div class="card mb-1" style="background: #4fc8ff;"></div>
<div class="card mb-2" style="background: #4fc8ff;"></div>
<div style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
</div>
<div class="card bg-faded mt-2 p-2 rounded-0 border-0" style="background: #1D1D1D;">
<p>Folder summary goes here, stick to only one or two lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<!--END OF FOLDER-->
<!--FOLDER-->
<div class="col-md-4 mb-2">
<h5 class="text-uppercase text-center p-2" style="background: #1D1D1D;"><a href="#" style="color: #4fc8ff;">Folder Name</a></h5>
<div class="card mb-1" style="background: #4fc8ff;"></div>
<div class="card mb-2" style="background: #4fc8ff;"></div>
<div style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
</div>
<div class="card bg-faded mt-2 p-2 rounded-0 border-0" style="background: #1D1D1D;">
<p>Folder summary goes here, stick to only one or two lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<!--END OF FOLDER-->
<!--FOLDER-->
<div class="col-md-4 mb-2">
<h5 class="text-uppercase text-center p-2" style="background: #1D1D1D;"><a href="#" style="color: #4fc8ff;">Folder Name</a></h5>
<div class="card mb-1" style="background: #4fc8ff;"></div>
<div class="card mb-2" style="background: #4fc8ff;"></div>
<div style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
</div>
<div class="card bg-faded mt-2 p-2 rounded-0 border-0" style="background: #1D1D1D;">
<p>Folder summary goes here, stick to only one or two lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<!--END OF FOLDER-->
</div>
</div>
<!--END OF PAGE THREE-->
<!--INSERT MORE SLIDES ABOVE HERE-->
</div>
</div>
<!--END OF FOLDER CAROUSEL-->
<!--R BUTTON-->
<div class="col-sm-1 mb-3 p-2">
<div class="card d-flex flex-row justify-content-center align-items-center w-100 border-0" style="height:50px; background: #4fc8ff;">
<p style="font-size:30px;"><i class="fas fa-angle-right"></i></p>
<!--TOGGLE-->
<a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;" data-slide="next" href="#WORLDS2"></a>
</div>
</div>
<!--R BUTTON END-->
<!--HEADER-->
<div class="col-lg-12 mb-3 mt-n2 p-2" style="color: #4fc8ff;">
<center>
<div class="bg-faded p-2 mb-3" style="max-width: 650px; background: #1D1D1D;">
<h1 class="text-uppercase text-center font-weight-bold display-4"><i class="fad fa-fish-fins"></i> My Favorite Characters <i class="fad fa-fish-fins fa-flip-horizontal"></i></h1>
</div>
<div class="card mb-1 rounded-0" style="max-width: 650px; height: 3px; background: #4fc8ff;"></div>
<div class="card mb-1 rounded-0" style="max-width: 650px; height: 3px; background: #4fc8ff;"></div>
</center>
</div>
<!--END OF HEADER-->
<!--L BUTTON-->
<div class="col-sm-1 mb-3 p-2">
<div class="card d-flex flex-row justify-content-center align-items-center w-100 border-0" style="height:50px; background: #4fc8ff;">
<p style="font-size:30px;"><i class="fas fa-angle-left"></i></p>
<!--TOGGLE-->
<a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;" data-slide="prev" href="#OCS2"></a>
</div>
</div>
<!--L BUTTON END-->
<!--CHARACTER CAROUSEL-->
<div class="col-lg-10 carousel slide" id="OCS2" data-ride="false" data-pause="true">
<div class="carousel-inner" style="height: 300px; overflow-y: scroll;">
<!--PAGE ONE-->
<div class="carousel-item active">
<center><div class="row d-flex justify-content-center">
<!--CHARACTER-->
<div class="col-md-3 mb-2">
<div class="card rounded-0 text-center justify-content-center m-2" style="height: 250px; width: 230px;
background: url('https://dummyimage.com/350/ffffff/000000') top;
background-size: contain; color: #fff; border: #4fc8ff 2px solid;">
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
<div class="card rounded-0 border-0" style="position:absolute; width: 100%; bottom: 0; background: #4fc8ff;"><p class="pt-1" style="font-weight:bold;">Character Name</p></div>
</div>
</div>
<!--END OF CHARACTER-->
<!--CHARACTER-->
<div class="col-md-3 mb-2">
<div class="card rounded-0 text-center justify-content-center m-2" style="height: 250px; width: 230px;
background: url('https://dummyimage.com/350/ffffff/000000') top;
background-size: contain; color: #fff; border: #4fc8ff 2px solid;">
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
<div class="card rounded-0 border-0" style="position:absolute; width: 100%; bottom: 0; background: #4fc8ff;"><p class="pt-1" style="font-weight:bold;">Character Name</p></div>
</div>
</div>
<!--END OF CHARACTER-->
<!--CHARACTER-->
<div class="col-md-3 mb-2">
<div class="card rounded-0 text-center justify-content-center m-2" style="height: 250px; width: 230px;
background: url('https://dummyimage.com/350/ffffff/000000') top;
background-size: contain; color: #fff; border: #4fc8ff 2px solid;">
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
<div class="card rounded-0 border-0" style="position:absolute; width: 100%; bottom: 0; background: #4fc8ff;"><p class="pt-1" style="font-weight:bold;">Character Name</p></div>
</div>
</div>
<!--END OF CHARACTER-->
<!--CHARACTER-->
<div class="col-md-3 mb-2">
<div class="card rounded-0 text-center justify-content-center m-2" style="height: 250px; width: 230px;
background: url('https://dummyimage.com/350/ffffff/000000') top;
background-size: contain; color: #fff; border: #4fc8ff 2px solid;">
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
<div class="card rounded-0 border-0" style="position:absolute; width: 100%; bottom: 0; background: #4fc8ff;"><p class="pt-1" style="font-weight:bold;">Character Name</p></div>
</div>
</div>
<!--END OF CHARACTER-->
</div></center>
</div>
<!--END OF PAGE ONE-->
<!--PAGE TWO-->
<div class="carousel-item">
<center><div class="row d-flex justify-content-center">
<!--CHARACTER-->
<div class="col-md-3 mb-2">
<div class="card rounded-0 text-center justify-content-center m-2" style="height: 250px; width: 230px;
background: url('https://dummyimage.com/350/ffffff/000000') top;
background-size: contain; color: #fff; border: #4fc8ff 2px solid;">
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
<div class="card rounded-0 border-0" style="position:absolute; width: 100%; bottom: 0; background: #4fc8ff;"><p class="pt-1" style="font-weight:bold;">Character Name</p></div>
</div>
</div>
<!--END OF CHARACTER-->
<!--CHARACTER-->
<div class="col-md-3 mb-2">
<div class="card rounded-0 text-center justify-content-center m-2" style="height: 250px; width: 230px;
background: url('https://dummyimage.com/350/ffffff/000000') top;
background-size: contain; color: #fff; border: #4fc8ff 2px solid;">
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
<div class="card rounded-0 border-0" style="position:absolute; width: 100%; bottom: 0; background: #4fc8ff;"><p class="pt-1" style="font-weight:bold;">Character Name</p></div>
</div>
</div>
<!--END OF CHARACTER-->
<!--CHARACTER-->
<div class="col-md-3 mb-2">
<div class="card rounded-0 text-center justify-content-center m-2" style="height: 250px; width: 230px;
background: url('https://dummyimage.com/350/ffffff/000000') top;
background-size: contain; color: #fff; border: #4fc8ff 2px solid;">
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
<div class="card rounded-0 border-0" style="position:absolute; width: 100%; bottom: 0; background: #4fc8ff;"><p class="pt-1" style="font-weight:bold;">Character Name</p></div>
</div>
</div>
<!--END OF CHARACTER-->
<!--CHARACTER-->
<div class="col-md-3 mb-2">
<div class="card rounded-0 text-center justify-content-center m-2" style="height: 250px; width: 230px;
background: url('https://dummyimage.com/350/ffffff/000000') top;
background-size: contain; color: #fff; border: #4fc8ff 2px solid;">
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
<div class="card rounded-0 border-0" style="position:absolute; width: 100%; bottom: 0; background: #4fc8ff;"><p class="pt-1" style="font-weight:bold;">Character Name</p></div>
</div>
</div>
<!--END OF CHARACTER-->
</div></center>
</div>
<!--END OF PAGE TWO-->
<!--PAGE THREE-->
<div class="carousel-item">
<center><div class="row d-flex justify-content-center">
<!--CHARACTER-->
<div class="col-md-3 mb-2">
<div class="card rounded-0 text-center justify-content-center m-2" style="height: 250px; width: 230px;
background: url('https://dummyimage.com/350/ffffff/000000') top;
background-size: contain; color: #fff; border: #4fc8ff 2px solid;">
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
<div class="card rounded-0 border-0" style="position:absolute; width: 100%; bottom: 0; background: #4fc8ff;"><p class="pt-1" style="font-weight:bold;">Character Name</p></div>
</div>
</div>
<!--END OF CHARACTER-->
<!--CHARACTER-->
<div class="col-md-3 mb-2">
<div class="card rounded-0 text-center justify-content-center m-2" style="height: 250px; width: 230px;
background: url('https://dummyimage.com/350/ffffff/000000') top;
background-size: contain; color: #fff; border: #4fc8ff 2px solid;">
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
<div class="card rounded-0 border-0" style="position:absolute; width: 100%; bottom: 0; background: #4fc8ff;"><p class="pt-1" style="font-weight:bold;">Character Name</p></div>
</div>
</div>
<!--END OF CHARACTER-->
<!--CHARACTER-->
<div class="col-md-3 mb-2">
<div class="card rounded-0 text-center justify-content-center m-2" style="height: 250px; width: 230px;
background: url('https://dummyimage.com/350/ffffff/000000') top;
background-size: contain; color: #fff; border: #4fc8ff 2px solid;">
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
<div class="card rounded-0 border-0" style="position:absolute; width: 100%; bottom: 0; background: #4fc8ff;"><p class="pt-1" style="font-weight:bold;">Character Name</p></div>
</div>
</div>
<!--END OF CHARACTER-->
<!--CHARACTER-->
<div class="col-md-3 mb-2">
<div class="card rounded-0 text-center justify-content-center m-2" style="height: 250px; width: 230px;
background: url('https://dummyimage.com/350/ffffff/000000') top;
background-size: contain; color: #fff; border: #4fc8ff 2px solid;">
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
<div class="card rounded-0 border-0" style="position:absolute; width: 100%; bottom: 0; background: #4fc8ff;"><p class="pt-1" style="font-weight:bold;">Character Name</p></div>
</div>
</div>
<!--END OF CHARACTER-->
</div></center>
</div>
<!--END OF PAGE THREE-->
<!--INSERT MORE SLIDES ABOVE HERE-->
</div>
</div>
<!--END OF CHARACTER CAROUSEL-->
<!--R BUTTON-->
<div class="col-sm-1 mb-3 p-2">
<div class="card d-flex flex-row justify-content-center align-items-center w-100 border-0" style="height:50px; background: #4fc8ff;">
<p style="font-size:30px;"><i class="fas fa-angle-right"></i></p>
<!--TOGGLE-->
<a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;" data-slide="next" href="#OCS2"></a>
</div>
</div>
<!--R BUTTON END-->
<!--HEADER-->
<div class="col-lg-12 mb-3 mt-n4 p-2" style="color: #4fc8ff;">
<center>
<div class="bg-faded p-2 mb-3" style="max-width: 650px; background: #1D1D1D;">
<h1 class="text-uppercase text-center font-weight-bold display-4"><i class="fad fa-fish-fins"></i> My Friends <i class="fad fa-fish-fins fa-flip-horizontal"></i></h1>
</div>
<div class="card mb-1 rounded-0" style="max-width: 650px; height: 3px; background: #4fc8ff;"></div>
<div class="card mb-1 rounded-0" style="max-width: 650px; height: 3px; background: #4fc8ff;"></div>
</center>
</div>
<!--END OF HEADER-->
<!--L BUTTON-->
<div class="col-sm-1 mb-3 p-2">
<div class="card d-flex flex-row justify-content-center align-items-center w-100 border-0" style="height:50px; background: #4fc8ff;">
<p style="font-size:30px;"><i class="fas fa-angle-left"></i></p>
<!--TOGGLE-->
<a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;" data-slide="prev" href="#HOMIES2"></a>
</div>
</div>
<!--L BUTTON END-->
<!--FRIENDS CAROUSEL-->
<div class="col-lg-10 carousel slide" id="HOMIES2" data-ride="false" data-pause="true">
<div class="carousel-inner" style="height: 300px; overflow-y: scroll;">
<!--PAGE ONE-->
<div class="carousel-item active">
<center><div class="row d-flex justify-content-center">
<!--FRIEND-->
<div class="col-md-3 mb-2">
<div class="card rounded-0 text-center justify-content-center m-2" style="height: 250px; width: 230px;
background: url('https://dummyimage.com/350/ffffff/000000') center;
background-size: COVER; color: #fff; border: #4fc8ff 2px solid;">
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
<div class="card rounded-0 border-0" style="position:absolute; width: 100%; bottom: 0; background: #4fc8ff"><p class="pt-1" style="font-weight:bold;">Friend's Name</p></div>
</div>
</div>
<!--END OF FRIEND-->
<!--FRIEND-->
<div class="col-md-3 mb-2">
<div class="card rounded-0 text-center justify-content-center m-2" style="height: 250px; width: 230px;
background: url('https://dummyimage.com/350/ffffff/000000') center;
background-size: COVER; color: #fff; border: #4fc8ff 2px solid;">
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
<div class="card rounded-0 border-0" style="position:absolute; width: 100%; bottom: 0; background: #4fc8ff"><p class="pt-1" style="font-weight:bold;">Friend's Name</p></div>
</div>
</div>
<!--END OF FRIEND-->
<!--FRIEND-->
<div class="col-md-3 mb-2">
<div class="card rounded-0 text-center justify-content-center m-2" style="height: 250px; width: 230px;
background: url('https://dummyimage.com/350/ffffff/000000') center;
background-size: COVER; color: #fff; border: #4fc8ff 2px solid;">
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
<div class="card rounded-0 border-0" style="position:absolute; width: 100%; bottom: 0; background: #4fc8ff"><p class="pt-1" style="font-weight:bold;">Friend's Name</p></div>
</div>
</div>
<!--END OF FRIEND-->
<!--FRIEND-->
<div class="col-md-3 mb-2">
<div class="card rounded-0 text-center justify-content-center m-2" style="height: 250px; width: 230px;
background: url('https://dummyimage.com/350/ffffff/000000') center;
background-size: COVER; color: #fff; border: #4fc8ff 2px solid;">
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
<div class="card rounded-0 border-0" style="position:absolute; width: 100%; bottom: 0; background: #4fc8ff"><p class="pt-1" style="font-weight:bold;">Friend's Name</p></div>
</div>
</div>
<!--END OF FRIEND-->
</div></center>
</div>
<!--END OF PAGE ONE-->
<!--PAGE TWO-->
<div class="carousel-item">
<center><div class="row d-flex justify-content-center">
<!--FRIEND-->
<div class="col-md-3 mb-2">
<div class="card rounded-0 text-center justify-content-center m-2" style="height: 250px; width: 230px;
background: url('https://dummyimage.com/350/ffffff/000000') center;
background-size: COVER; color: #fff; border: #4fc8ff 2px solid;">
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
<div class="card rounded-0 border-0" style="position:absolute; width: 100%; bottom: 0; background: #4fc8ff"><p class="pt-1" style="font-weight:bold;">Friend's Name</p></div>
</div>
</div>
<!--END OF FRIEND-->
<!--FRIEND-->
<div class="col-md-3 mb-2">
<div class="card rounded-0 text-center justify-content-center m-2" style="height: 250px; width: 230px;
background: url('https://dummyimage.com/350/ffffff/000000') center;
background-size: COVER; color: #fff; border: #4fc8ff 2px solid;">
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
<div class="card rounded-0 border-0" style="position:absolute; width: 100%; bottom: 0; background: #4fc8ff"><p class="pt-1" style="font-weight:bold;">Friend's Name</p></div>
</div>
</div>
<!--END OF FRIEND-->
<!--FRIEND-->
<div class="col-md-3 mb-2">
<div class="card rounded-0 text-center justify-content-center m-2" style="height: 250px; width: 230px;
background: url('https://dummyimage.com/350/ffffff/000000') center;
background-size: COVER; color: #fff; border: #4fc8ff 2px solid;">
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
<div class="card rounded-0 border-0" style="position:absolute; width: 100%; bottom: 0; background: #4fc8ff"><p class="pt-1" style="font-weight:bold;">Friend's Name</p></div>
</div>
</div>
<!--END OF FRIEND-->
<!--FRIEND-->
<div class="col-md-3 mb-2">
<div class="card rounded-0 text-center justify-content-center m-2" style="height: 250px; width: 230px;
background: url('https://dummyimage.com/350/ffffff/000000') center;
background-size: COVER; color: #fff; border: #4fc8ff 2px solid;">
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
<div class="card rounded-0 border-0" style="position:absolute; width: 100%; bottom: 0; background: #4fc8ff"><p class="pt-1" style="font-weight:bold;">Friend's Name</p></div>
</div>
</div>
<!--END OF FRIEND-->
</div></center>
</div>
<!--END OF PAGE TWO-->
<!--PAGE THREE-->
<div class="carousel-item">
<center><div class="row d-flex justify-content-center">
<!--FRIEND-->
<div class="col-md-3 mb-2">
<div class="card rounded-0 text-center justify-content-center m-2" style="height: 250px; width: 230px;
background: url('https://dummyimage.com/350/ffffff/000000') center;
background-size: COVER; color: #fff; border: #4fc8ff 2px solid;">
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
<div class="card rounded-0 border-0" style="position:absolute; width: 100%; bottom: 0; background: #4fc8ff"><p class="pt-1" style="font-weight:bold;">Friend's Name</p></div>
</div>
</div>
<!--END OF FRIEND-->
<!--FRIEND-->
<div class="col-md-3 mb-2">
<div class="card rounded-0 text-center justify-content-center m-2" style="height: 250px; width: 230px;
background: url('https://dummyimage.com/350/ffffff/000000') center;
background-size: COVER; color: #fff; border: #4fc8ff 2px solid;">
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
<div class="card rounded-0 border-0" style="position:absolute; width: 100%; bottom: 0; background: #4fc8ff"><p class="pt-1" style="font-weight:bold;">Friend's Name</p></div>
</div>
</div>
<!--END OF FRIEND-->
<!--FRIEND-->
<div class="col-md-3 mb-2">
<div class="card rounded-0 text-center justify-content-center m-2" style="height: 250px; width: 230px;
background: url('https://dummyimage.com/350/ffffff/000000') center;
background-size: COVER; color: #fff; border: #4fc8ff 2px solid;">
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
<div class="card rounded-0 border-0" style="position:absolute; width: 100%; bottom: 0; background: #4fc8ff"><p class="pt-1" style="font-weight:bold;">Friend's Name</p></div>
</div>
</div>
<!--END OF FRIEND-->
<!--FRIEND-->
<div class="col-md-3 mb-2">
<div class="card rounded-0 text-center justify-content-center m-2" style="height: 250px; width: 230px;
background: url('https://dummyimage.com/350/ffffff/000000') center;
background-size: COVER; color: #fff; border: #4fc8ff 2px solid;">
<a class="btn btn-outline-secondary" style="opacity:.5; position:absolute; top: 0; left: 0; right: 0; bottom: 0;" href="#"></a>
<div class="card rounded-0 border-0" style="position:absolute; width: 100%; bottom: 0; background: #4fc8ff"><p class="pt-1" style="font-weight:bold;">Friend's Name</p></div>
</div>
</div>
<!--END OF FRIEND-->
</div></center>
</div>
<!--END OF PAGE THREE-->
<!--INSERT MORE SLIDES ABOVE HERE-->
</div>
</div>
<!--END OF FRIENDS CAROUSEL-->
<!--R BUTTON-->
<div class="col-sm-1 mb-3 p-2">
<div class="card d-flex flex-row justify-content-center align-items-center w-100 border-0" style="height:50px; background: #4fc8ff;">
<p style="font-size:30px;"><i class="fas fa-angle-right"></i></p>
<!--TOGGLE-->
<a class="btn btn-outline-secondary border-0" style="opacity:.5; position:absolute; top:0; left:0; right:0; bottom:0;" data-slide="next" href="#HOMIES2"></a>
</div>
</div>
<!--R BUTTON END-->
<!--CREDITS - DO NOT TOUCH-->
<div class="col-lg-12">
<div class="card text-center rounded-0 border-0 p-2" style="background: #1D1D1D;">
<p>code by @biggayfish || original <a href="https://toyhou.se/32087663.css-snippet-page-fade-in" style="color: #4fc8ff;">fade in css</a> by @BUNSKIZZ || disapearing collapse referenced from @teiyoq</p>
</div>
</div>
<!--END OF CREDITS-->
</div>
</div>
</div>