Block User Profile
created by:BigGayFish
Custom ColorsBootstrapHTMLUser
Copy
<!--BLOCK USER PROFILE CODE - BOOTSTRAPS OG VER
Releasing this code because while I like it I wanna change my profile lol. Also iirc someone once asked about it so like I guess there may be people who like it??? Anyways here we are, the original version just ever so slightly spruced up.-->
<div class="container-fluid" style="font-size: 13pt;">
<div class="row no-gutters align-items-center">
<div class="col-lg-12 mb-3">
<div class="card bg-faded card-outline-secondary p-2" style="border-width: 3px; border-radius: 10px;">
<h1 class="text-uppercase text-secondary text-center font-weight-bold display-4">username</h1>
</div>
</div>
</div>
<div class="row">
<!--IMAGE BLOCK-->
<div class="col-md-3 mb-3">
<div class="sticky-top">
<div class="card bg-faded card-outline-secondary p-2" style="border-width: 3px; border-radius: 10px;">
<div class="mb-2" style="background-image:url('https://dummyimage.com/350x500/ffffff/000000'); background-size: contain; background-repeat: no-repeat; background-position: center; max-width: 500px; height: 500px;"></div>
<small class="text-secondary text-center">Art by @ username</small>
</div>
</div>
</div>
<!--END OF IMAGE BLOCK-->
<div class="col-lg-9 mb-3">
<!--INTRO BLOCK-->
<div class="card bg-faded card-outline-secondary p-3 mb-3" style="border-width: 3px; border-radius: 10px;">
<h1 class="text-uppercase text-secondary">age | gender | pronouns | anything else</h1>
<div class="card bg-secondary mb-2"></div>
<p>Write about yourself here or whatever you want! 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>
<h5 class="text-uppercase text-secondary mt-3 mb-2 text-center">places to find me:</h5>
<div class="card bg-secondary mb-2"></div>
<!--SOCMED LINKS-->
<div class='d-flex justify-content-center mt-2'>
<!-- DEVIANTART -->
<a class="text-secondary tooltipster" href="#" title="DeviantArt"> <i class="fab fa-deviantart fa-fw fa-2x"></i></a>
<!-- BLUESKY -->
<a class="text-secondary tooltipster" href="#" title="Bluesky"> <i class="fab fa-bluesky fa-fw fa-2x"></i></a>
<!-- TUMBLR -->
<a class="text-secondary tooltipster" href="#" title="Tumblr"> <i class="fab fa-tumblr fa-fw fa-2x"></i></a>
<!-- DISCORD -->
<a class="text-secondary tooltipster" title="Discord:"> <i class="fab fa-discord fa-fw fa-2x"></i></a>
<!-- YOUTUBE -->
<a class="text-secondary tooltipster ml-2" href="#" title="YouTube"> <i class="fab fa-youtube fa-fw fa-2x"></i></a>
<!-- CARRD -->
<a class="text-secondary tooltipster ml-2" href="#" title="Carrd"> <i class="fas fa-address-card fa-fw fa-2x"></i></a>
</div>
<!--END OF SOCMED LINKS-->
</div>
<!--END OF INTRO BLOCK-->
<!--INFO BLOCK-->
<div class="card bg-faded card-outline-secondary p-3 mb-3" style="border-width: 3px; border-radius: 10px;">
<div class="row justify-content-md-center">
<div class="col-lg-5">
<h5 class="text-uppercase text-secondary text-center">notice:</h5>
<div class="card bg-secondary mb-2"></div>
<ul>
<li>write any updates/notices here, including maybe warnings and the like</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<div class="col-sm">
<h5 class="text-uppercase text-secondary text-center">services:</h5>
<div class="card bg-secondary mb-2"></div>
<a href="#">Commissions</a> <span class="pull-right">Open / Closed</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="#">Terms of Service</a>
</div>
<div class="col-sm">
<h5 class="text-uppercase text-secondary text-center">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>
</div>
<!--END OF INFO BLOCK-->
<!--ABOUT BLOCK-->
<div class="card bg-faded card-outline-secondary p-2" style="border-width: 3px; border-radius: 10px;">
<div class="card-text m-3" style="background-color: transparent; border: none;">
<h1 class="text-uppercase text-secondary my-2 text-center">About Me</h1>
<div class="row d-flex justify-content-center p-2">
<div class="col-sm">
<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">
<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">
<h3>Content:</h3>
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<div class="col-sm">
<h3>Content:</h3>
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
</div>
</div>
<!--END OF ABOUT BLOCK-->
</div>
<!--STORIES/PROJECT BLOCK-->
<div class="col-md-5 mb-3">
<div class="card bg-faded card-outline-secondary p-2 mb-3 " style="border-width: 3px; border-radius: 10px; max-height:500px; overflow-x: hidden; overflow-y:scroll;">
<h1 class="text-uppercase text-secondary my-2 text-center">My Stories</h1>
<div class="row d-flex justify-content-center p-1">
<!--STORY-->
<div class="col-md-6 mb-2">
<h5 class="text-uppercase text-secondary text-center"><a href="#">Project/Story Name</a></h5><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>
<p>Summary goes here! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div>
<!--END OF STORY-->
<!--STORY-->
<div class="col-md-6 mb-2">
<h5 class="text-uppercase text-secondary text-center"><a href="#">Project/Story Name</a></h5><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>
<p>Summary goes here! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div>
<!--END OF STORY-->
<!--STORY-->
<div class="col-md-6 mb-2">
<h5 class="text-uppercase text-secondary text-center"><a href="#">Project/Story Name</a></h5><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>
<p>Summary goes here! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div>
<!--END OF STORY-->
<!--STORY-->
<div class="col-md-6 mb-2">
<h5 class="text-uppercase text-secondary text-center"><a href="#">Project/Story Name</a></h5><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>
<p>Summary goes here! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div>
<!--END OF STORY-->
</div>
</div>
</div>
<!--END OF STORIES/PROJECT BLOCK-->
<!--FRIEND'S LINKS BLOCK
This section is for if your friends are artists or have outgoing links that you wish to promote. A lot of my friends are artists themselves so I usually put their adopts and commissions links here! ^^-->
<div class="col-lg-7 mb-3">
<div class="card bg-faded card-outline-secondary p-2" style="border-width: 3px; border-radius: 10px;">
<div class="card-text m-3" style="background-color: transparent; border: none;">
<h1 class="text-uppercase text-secondary my-2 text-center">Friend Links</h1>
<div class="row d-flex justify-content-center p-2">
<!--FRIEND'S LINKS-->
<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>
<!--END OF FRIEND'S LINKS-->
<!--FRIEND'S LINKS-->
<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>
<!--END OF FRIEND'S LINKS-->
<!--FRIEND'S LINKS-->
<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>
<!--END OF FRIEND'S LINKS-->
</div>
</div>
</div>
</div>
<!--END OF FRIEND'S LINKS BLOCK-->
<!--FAVE OCS BLOCK-->
<div class="col-md-6 mb-3">
<div class="card bg-faded card-outline-secondary p-2 mb-3" style="border-width: 3px; border-radius: 10px; max-height:500px; overflow-x: hidden; overflow-y:scroll;">
<h1 class="text-uppercase text-secondary my-2 text-center">Favorite Characters</h1>
<div class="row d-flex justify-content-center p-1" style="text-shadow: 0px 0px 5px #000, 0px 0px 8px #000;">
<!--CHARACTER-->
<div class="col-md-4 mb-2">
<div class="d-flex justify-content-center align-items-center text-center" style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
<a class="text-secondary" href="#"><h2 class="display-4 font-weight-bold">Character Name</h2></a>
</div>
</div>
<!--END OF CHARACTER-->
<!--CHARACTER-->
<div class="col-md-4 mb-2">
<div class="d-flex justify-content-center align-items-center text-center" style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
<a class="text-secondary" href="#"><h2 class="display-4 font-weight-bold">Character Name</h2></a>
</div>
</div>
<!--END OF CHARACTER-->
<!--CHARACTER-->
<div class="col-md-4 mb-2">
<div class="d-flex justify-content-center align-items-center text-center" style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
<a class="text-secondary" href="#"><h2 class="display-4 font-weight-bold">Character Name</h2></a>
</div>
</div>
<!--END OF CHARACTER-->
<!--CHARACTER-->
<div class="col-md-4 mb-2">
<div class="d-flex justify-content-center align-items-center text-center" style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
<a class="text-secondary" href="#"><h2 class="display-4 font-weight-bold">Character Name</h2></a>
</div>
</div>
<!--END OF CHARACTER-->
<!--CHARACTER-->
<div class="col-md-4 mb-2">
<div class="d-flex justify-content-center align-items-center text-center" style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
<a class="text-secondary" href="#"><h2 class="display-4 font-weight-bold">Character Name</h2></a>
</div>
</div>
<!--END OF CHARACTER-->
<!--CHARACTER-->
<div class="col-md-4 mb-2">
<div class="d-flex justify-content-center align-items-center text-center" style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
<a class="text-secondary" href="#"><h2 class="display-4 font-weight-bold">Character Name</h2></a>
</div>
</div>
<!--END OF CHARACTER-->
<!--PASTE MORE ABOVE THIS LINE-->
</div>
</div>
</div>
<!--END OF FAVE OCS BLOCK-->
<!--FRIENDS BLOCK-->
<div class="col-md-6">
<div class="card bg-faded card-outline-secondary p-2 mb-3" style="border-width: 3px; border-radius: 10px; max-height:500px; overflow-x: hidden; overflow-y:scroll;">
<h1 class="text-uppercase text-secondary my-2 text-center">My Friends</h1>
<div class="row d-flex justify-content-center p-1" style="text-shadow: 0px 0px 5px #000, 0px 0px 8px #000;">
<!--FRIEND-->
<div class="col-md-4 mb-2">
<div class="d-flex justify-content-center align-items-center text-center" style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
<a class="text-secondary" href="#"><h2 class="display-4 font-weight-bold">Friend's Name</h2></a>
</div>
</div>
<!--END OF FRIEND-->
<!--FRIEND-->
<div class="col-md-4 mb-2">
<div class="d-flex justify-content-center align-items-center text-center" style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
<a class="text-secondary" href="#"><h2 class="display-4 font-weight-bold">Friend's Name</h2></a>
</div>
</div>
<!--END OF FRIEND-->
<!--FRIEND-->
<div class="col-md-4 mb-2">
<div class="d-flex justify-content-center align-items-center text-center" style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
<a class="text-secondary" href="#"><h2 class="display-4 font-weight-bold">Friend's Name</h2></a>
</div>
</div>
<!--END OF FRIEND-->
<!--FRIEND-->
<div class="col-md-4 mb-2">
<div class="d-flex justify-content-center align-items-center text-center" style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
<a class="text-secondary" href="#"><h2 class="display-4 font-weight-bold">Friend's Name</h2></a>
</div>
</div>
<!--END OF FRIEND-->
<!--FRIEND-->
<div class="col-md-4 mb-2">
<div class="d-flex justify-content-center align-items-center text-center" style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
<a class="text-secondary" href="#"><h2 class="display-4 font-weight-bold">Friend's Name</h2></a>
</div>
</div>
<!--END OF FRIEND-->
<!--FRIEND-->
<div class="col-md-4 mb-2">
<div class="d-flex justify-content-center align-items-center text-center" style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
<a class="text-secondary" href="#"><h2 class="display-4 font-weight-bold">Friend's Name</h2></a>
</div>
</div>
<!--END OF FRIEND-->
</div>
</div>
</div>
<!--END OF FRIENDS BLOCK-->
</div>
<div class="bg-secondary" style="height: 3px; opacity: .5;">
<a href="https://toyhou.se/BigGayFish" class="pull-right text-secondary"><i class="fas fa-copyright"></i> BigGayFish</a>
</div>
</div>Copy
<!--BLOCK USER PROFILE CODE - CUSTOM COLORS OG VER
Releasing this code because while I like it I wanna change my profile lol. Also iirc someone once asked about it so like I guess there may be people who like it??? Anyways here we are, the original version just ever so slightly spruced up.
COLOR KEY: #fff - Text Color
#3c3c3c - Background Color
#4fc8ff Accent + Link + Header Color
-->
<div class="container-fluid" style="color: #fff; font-size: 13pt;">
<div class="row no-gutters align-items-center">
<div class="col-lg-12 mb-3">
<div class="card p-2" style="background: #3c3c3c; border: #4fc8ff 3px solid; border-radius: 10px;">
<h1 class="text-uppercase text-center font-weight-bold display-4" style="color: #4fc8ff;">username</h1>
</div>
</div>
</div>
<div class="row">
<!--IMAGE BLOCK-->
<div class="col-md-3 mb-3">
<div class="sticky-top">
<div class="card p-2" style="background: #3c3c3c; border: #4fc8ff 3px solid; border-radius: 10px;">
<div class="mb-2" style="background-image:url('https://dummyimage.com/350x500/ffffff/000000'); background-size: contain; background-repeat: no-repeat; background-position: center; max-width: 500px; height: 500px;"></div>
<small class="text-center" style="color: #4fc8ff;">Art by @ username</small>
</div>
</div>
</div>
<!--END OF IMAGE BLOCK-->
<div class="col-lg-9 mb-3">
<!--INTRO BLOCK-->
<div class="card p-3 mb-3" style="background: #3c3c3c; border: #4fc8ff 3px solid; border-radius: 10px;">
<h1 class="text-uppercase" style="color: #4fc8ff;">age | gender | pronouns | anything else</h1>
<div class="card mb-2" style="background: #4fc8ff;"></div>
<p>Write about yourself here or whatever you want! 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>
<h5 class="text-uppercase mt-3 mb-2 text-center" style="color: #4fc8ff;">places to find me:</h5>
<div class="card mb-2" style="background: #4fc8ff;"></div>
<!--SOCMED LINKS-->
<div class='d-flex justify-content-center mt-2'>
<!-- DEVIANTART -->
<a class="tooltipster" style="color: #4fc8ff;" href="#" title="DeviantArt"> <i class="fab fa-deviantart fa-fw fa-2x"></i></a>
<!-- BLUESKY -->
<a class="tooltipster" style="color: #4fc8ff;" href="#" title="Bluesky"> <i class="fab fa-bluesky fa-fw fa-2x"></i></a>
<!-- TUMBLR -->
<a class="tooltipster" style="color: #4fc8ff;" href="#" title="Tumblr"> <i class="fab fa-tumblr fa-fw fa-2x"></i></a>
<!-- DISCORD -->
<p class="tooltipster" style="color: #4fc8ff;" title="Discord:"> <i class="fab fa-discord fa-fw fa-2x"></i></p>
<!-- YOUTUBE -->
<a class="tooltipster ml-2" style="color: #4fc8ff;" href="#" title="YouTube"> <i class="fab fa-youtube fa-fw fa-2x"></i></a>
<!-- CARRD -->
<a class="tooltipster ml-2" style="color: #4fc8ff;" href="#" title="Carrd"> <i class="fas fa-address-card fa-fw fa-2x"></i></a>
</div>
<!--END OF SOCMED LINKS-->
</div>
<!--END OF INTRO BLOCK-->
<!--INFO BLOCK-->
<div class="card p-3 mb-3" style="background: #3c3c3c; border: #4fc8ff 3px solid; border-radius: 10px;">
<div class="row justify-content-md-center">
<div class="col-lg-5">
<h5 class="text-uppercase text-center" style="color: #4fc8ff;">notice:</h5>
<div class="card mb-2" style="background: #4fc8ff;"></div>
<ul>
<li>write any updates/notices here, including maybe warnings and the like</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<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;">Commissions</a> <span class="pull-right">Open / Closed</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;">Terms of Service</a>
</div>
<div class="col-sm">
<h5 class="text-uppercase text-center" style="color: #4fc8ff;">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>
</div>
<!--END OF INFO BLOCK-->
<!--ABOUT BLOCK-->
<div class="card p-2" style="background: #3c3c3c; border: #4fc8ff 3px solid; border-radius: 10px;">
<div class="card-text m-3" style="background-color: transparent; border: none;">
<h1 class="text-uppercase my-2 text-center" style="color: #4fc8ff;">About Me</h1>
<div class="row d-flex justify-content-center p-2">
<div class="col-sm">
<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">
<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">
<h3>Content:</h3>
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<div class="col-sm">
<h3>Content:</h3>
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
</div>
</div>
<!--END OF ABOUT BLOCK-->
</div>
<!--STORIES/PROJECT BLOCK-->
<div class="col-md-5 mb-3">
<div class="card p-2 mb-3 " style="background: #3c3c3c; border: #4fc8ff 3px solid; border-radius: 10px; max-height:500px; overflow-x: hidden; overflow-y:scroll;">
<h1 class="text-uppercase my-2 text-center" style="color: #4fc8ff;">My Stories</h1>
<div class="row d-flex justify-content-center p-1">
<!--STORY-->
<div class="col-md-6 mb-2">
<h5 class="text-uppercase text-center"><a href="#" style="color: #4fc8ff;">Project/Story Name</a></h5><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>
<p>Summary goes here! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div>
<!--END OF STORY-->
<!--STORY-->
<div class="col-md-6 mb-2">
<h5 class="text-uppercase text-center"><a href="#" style="color: #4fc8ff;">Project/Story Name</a></h5><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>
<p>Summary goes here! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div>
<!--END OF STORY-->
<!--STORY-->
<div class="col-md-6 mb-2">
<h5 class="text-uppercase text-center"><a href="#" style="color: #4fc8ff;">Project/Story Name</a></h5><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>
<p>Summary goes here! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div>
<!--END OF STORY-->
<!--STORY-->
<div class="col-md-6 mb-2">
<h5 class="text-uppercase text-center"><a href="#" style="color: #4fc8ff;">Project/Story Name</a></h5><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>
<p>Summary goes here! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div>
<!--END OF STORY-->
</div>
</div>
</div>
<!--END OF STORIES/PROJECT BLOCK-->
<!--FRIEND'S LINKS BLOCK
This section is for if your friends are artists or have outgoing links that you wish to promote. A lot of my friends are artists themselves so I usually put their adopts and commissions links here! ^^-->
<div class="col-lg-7 mb-3">
<div class="card p-2" style="background: #3c3c3c; border: #4fc8ff 3px solid; border-radius: 10px;">
<div class="card-text m-3" style="background-color: transparent; border: none;">
<h1 class="text-uppercase my-2 text-center" style="color: #4fc8ff;">Friend Links</h1>
<div class="row d-flex justify-content-center p-2">
<!--FRIEND'S LINKS-->
<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>
<!--END OF FRIEND'S LINKS-->
<!--FRIEND'S LINKS-->
<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>
<!--END OF FRIEND'S LINKS-->
<!--FRIEND'S LINKS-->
<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>
<!--END OF FRIEND'S LINKS-->
</div>
</div>
</div>
</div>
<!--END OF FRIEND'S LINKS BLOCK-->
<!--FAVE OCS BLOCK-->
<div class="col-md-6 mb-3">
<div class="card p-2 mb-3" style="background: #3c3c3c; border: #4fc8ff 3px solid; border-radius: 10px; max-height:500px; overflow-x: hidden; overflow-y:scroll;">
<h1 class="text-uppercase my-2 text-center" style="color: #4fc8ff;">Favorite Characters</h1>
<div class="row d-flex justify-content-center p-1" style="text-shadow: 0px 0px 5px #000, 0px 0px 8px #000;">
<!--CHARACTER-->
<div class="col-md-4 mb-2">
<div class="d-flex justify-content-center align-items-center text-center" style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
<a href="#" style="color: #4fc8ff;"><h2 class="display-4 font-weight-bold">Character Name</h2></a>
</div>
</div>
<!--END OF CHARACTER-->
<!--CHARACTER-->
<div class="col-md-4 mb-2">
<div class="d-flex justify-content-center align-items-center text-center" style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
<a href="#" style="color: #4fc8ff;"><h2 class="display-4 font-weight-bold">Character Name</h2></a>
</div>
</div>
<!--END OF CHARACTER-->
<!--CHARACTER-->
<div class="col-md-4 mb-2">
<div class="d-flex justify-content-center align-items-center text-center" style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
<a href="#" style="color: #4fc8ff;"><h2 class="display-4 font-weight-bold">Character Name</h2></a>
</div>
</div>
<!--END OF CHARACTER-->
<!--CHARACTER-->
<div class="col-md-4 mb-2">
<div class="d-flex justify-content-center align-items-center text-center" style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
<a href="#" style="color: #4fc8ff;"><h2 class="display-4 font-weight-bold">Character Name</h2></a>
</div>
</div>
<!--END OF CHARACTER-->
<!--CHARACTER-->
<div class="col-md-4 mb-2">
<div class="d-flex justify-content-center align-items-center text-center" style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
<a href="#" style="color: #4fc8ff;"><h2 class="display-4 font-weight-bold">Character Name</h2></a>
</div>
</div>
<!--END OF CHARACTER-->
<!--CHARACTER-->
<div class="col-md-4 mb-2">
<div class="d-flex justify-content-center align-items-center text-center" style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
<a href="#" style="color: #4fc8ff;"><h2 class="display-4 font-weight-bold">Character Name</h2></a>
</div>
</div>
<!--END OF CHARACTER-->
<!--PASTE MORE ABOVE THIS LINE-->
</div>
</div>
</div>
<!--END OF FAVE OCS BLOCK-->
<!--FRIENDS BLOCK-->
<div class="col-md-6">
<div class="card p-2 mb-3" style="background: #3c3c3c; border: #4fc8ff 3px solid; border-radius: 10px; max-height:500px; overflow-x: hidden; overflow-y:scroll;">
<h1 class="text-uppercase my-2 text-center" style="color: #4fc8ff;">My Friends</h1>
<div class="row d-flex justify-content-center p-1" style="text-shadow: 0px 0px 5px #000, 0px 0px 8px #000;">
<!--FRIEND-->
<div class="col-md-4 mb-2">
<div class="d-flex justify-content-center align-items-center text-center" style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
<a href="#" style="color: #4fc8ff;"><h2 class="display-4 font-weight-bold">Friend's Name</h2></a>
</div>
</div>
<!--END OF FRIEND-->
<!--FRIEND-->
<div class="col-md-4 mb-2">
<div class="d-flex justify-content-center align-items-center text-center" style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
<a href="#" style="color: #4fc8ff;"><h2 class="display-4 font-weight-bold">Friend's Name</h2></a>
</div>
</div>
<!--END OF FRIEND-->
<!--FRIEND-->
<div class="col-md-4 mb-2">
<div class="d-flex justify-content-center align-items-center text-center" style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
<a href="#" style="color: #4fc8ff;"><h2 class="display-4 font-weight-bold">Friend's Name</h2></a>
</div>
</div>
<!--END OF FRIEND-->
<!--FRIEND-->
<div class="col-md-4 mb-2">
<div class="d-flex justify-content-center align-items-center text-center" style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
<a href="#" style="color: #4fc8ff;"><h2 class="display-4 font-weight-bold">Friend's Name</h2></a>
</div>
</div>
<!--END OF FRIEND-->
<!--FRIEND-->
<div class="col-md-4 mb-2">
<div class="d-flex justify-content-center align-items-center text-center" style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
<a href="#" style="color: #4fc8ff;"><h2 class="display-4 font-weight-bold">Friend's Name</h2></a>
</div>
</div>
<!--END OF FRIEND-->
<!--FRIEND-->
<div class="col-md-4 mb-2">
<div class="d-flex justify-content-center align-items-center text-center" style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
<a href="#" style="color: #4fc8ff;"><h2 class="display-4 font-weight-bold">Friend's Name</h2></a>
</div>
</div>
<!--END OF FRIEND-->
</div>
</div>
</div>
<!--END OF FRIENDS BLOCK-->
</div>
<div style="background: #4fc8ff; height: 3px; opacity: .5;">
<a href="https://toyhou.se/BigGayFish" class="pull-right" style="color: #4fc8ff;"><i class="fas fa-copyright"></i> BigGayFish</a>
</div>
</div>Copy
<!--BLOCK USER PROFILE CODE - BOOTSTRAPS ALT VER
Releasing this code because while I like it I wanna change my profile lol. Also iirc someone once asked about it so like I guess there may be people who like it??? Anyways here we are, with the alternate version.-->
<div class="container-fluid" style="font-size: 13pt;">
<div class="row no-gutters align-items-center">
<div class="col-lg-12 mb-3">
<div class="card bg-faded card-outline-secondary p-2" style="border-width: 3px; border-radius: 10px;">
<h1 class="text-uppercase text-secondary text-center font-weight-bold display-4">username</h1>
</div>
</div>
</div>
<div class="row">
<!--IMAGE BLOCK-->
<div class="col-md-3 mb-3">
<div class="sticky-top">
<div class="card bg-faded card-outline-secondary p-2" style="border-width: 3px; border-radius: 10px;">
<div class="mb-2" style="background-image:url('https://dummyimage.com/350x500/ffffff/000000'); background-size: contain; background-repeat: no-repeat; background-position: center; max-width: 500px; height: 500px;"></div>
<small class="text-secondary text-center">Art by @ username</small>
</div>
</div>
</div>
<!--END OF IMAGE BLOCK-->
<div class="col-lg-9 mb-3">
<!--INTRO BLOCK-->
<div class="card bg-faded card-outline-secondary p-3 mb-3" style="border-width: 3px; border-radius: 10px;">
<h1 class="text-uppercase text-secondary">age | gender | pronouns | anything else</h1>
<div class="card bg-secondary mb-2"></div>
<p>Write about yourself here or whatever you want! 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>
<h5 class="text-uppercase text-secondary mt-3 mb-2 text-center">places to find me:</h5>
<div class="card bg-secondary mb-2"></div>
<!--SOCMED LINKS-->
<div class='d-flex justify-content-center mt-2'>
<!-- DEVIANTART -->
<a class="text-secondary tooltipster" href="#" title="DeviantArt"> <i class="fab fa-deviantart fa-fw fa-2x"></i></a>
<!-- BLUESKY -->
<a class="text-secondary tooltipster" href="#" title="Bluesky"> <i class="fab fa-bluesky fa-fw fa-2x"></i></a>
<!-- TUMBLR -->
<a class="text-secondary tooltipster" href="#" title="Tumblr"> <i class="fab fa-tumblr fa-fw fa-2x"></i></a>
<!-- DISCORD -->
<a class="text-secondary tooltipster" title="Discord:"> <i class="fab fa-discord fa-fw fa-2x"></i></a>
<!-- YOUTUBE -->
<a class="text-secondary tooltipster ml-2" href="#" title="YouTube"> <i class="fab fa-youtube fa-fw fa-2x"></i></a>
<!-- CARRD -->
<a class="text-secondary tooltipster ml-2" href="#" title="Carrd"> <i class="fas fa-address-card fa-fw fa-2x"></i></a>
</div>
<!--END OF SOCMED LINKS-->
</div>
<!--END OF INTRO BLOCK-->
<!--INFO BLOCK-->
<div class="card bg-faded card-outline-secondary p-3 mb-3" style="border-width: 3px; border-radius: 10px;">
<div class="row justify-content-md-center">
<div class="col-lg-5">
<h5 class="text-uppercase text-secondary text-center">notice:</h5>
<div class="card bg-secondary mb-2"></div>
<ul>
<li>write any updates/notices here, including maybe warnings and the like</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<div class="col-sm">
<h5 class="text-uppercase text-secondary text-center">services:</h5>
<div class="card bg-secondary mb-2"></div>
<a href="#">Commissions</a> <span class="pull-right">Open / Closed</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="#">Terms of Service</a>
</div>
<div class="col-sm">
<h5 class="text-uppercase text-secondary text-center">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>
</div>
<!--END OF INFO BLOCK-->
<!--ABOUT BLOCK-->
<div class="card bg-faded card-outline-secondary p-2 mb-3" style="border-width: 3px; border-radius: 10px;">
<div class="card-text m-3" style="background-color: transparent; border: none;">
<h1 class="text-uppercase text-secondary my-2 text-center">About Me</h1>
<div class="row d-flex justify-content-center p-2">
<div class="col-sm">
<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">
<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">
<h3>Content:</h3>
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<div class="col-sm">
<h3>Content:</h3>
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
</div>
</div>
<!--END OF ABOUT BLOCK-->
<!--STORIES/PROJECT BLOCK-->
<div class="card bg-faded card-outline-secondary p-2 mb-3 " style="border-width: 3px; border-radius: 10px; max-height:500px; overflow-x: hidden; overflow-y:scroll;">
<h1 class="text-uppercase text-secondary my-2 text-center">My Stories</h1>
<div class="row d-flex justify-content-center p-1">
<!--STORY-->
<div class="col-md-6 mb-2">
<h5 class="text-uppercase text-secondary text-center"><a href="#">Project/Story Name</a></h5><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>
<p>Summary goes here! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div>
<!--END OF STORY-->
<!--STORY-->
<div class="col-md-6 mb-2">
<h5 class="text-uppercase text-secondary text-center"><a href="#">Project/Story Name</a></h5><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>
<p>Summary goes here! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div>
<!--END OF STORY-->
<!--STORY-->
<div class="col-md-6 mb-2">
<h5 class="text-uppercase text-secondary text-center"><a href="#">Project/Story Name</a></h5><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>
<p>Summary goes here! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div>
<!--END OF STORY-->
<!--STORY-->
<div class="col-md-6 mb-2">
<h5 class="text-uppercase text-secondary text-center"><a href="#">Project/Story Name</a></h5><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>
<p>Summary goes here! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div>
<!--END OF STORY-->
</div>
</div>
<!--END OF STORIES/PROJECT BLOCK-->
<!--FRIEND'S LINKS BLOCK
This section is for if your friends are artists or have outgoing links that you wish to promote. A lot of my friends are artists themselves so I usually put their adopts and commissions links here! ^^-->
<div class="card bg-faded card-outline-secondary p-2 mb-3" style="border-width: 3px; border-radius: 10px;">
<div class="card-text m-3" style="background-color: transparent; border: none;">
<h1 class="text-uppercase text-secondary my-2 text-center">Friend Links</h1>
<div class="row d-flex justify-content-center p-2">
<!--FRIEND'S LINKS-->
<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>
<!--END OF FRIEND'S LINKS-->
<!--FRIEND'S LINKS-->
<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>
<!--END OF FRIEND'S LINKS-->
<!--FRIEND'S LINKS-->
<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>
<!--END OF FRIEND'S LINKS-->
</div>
</div>
</div>
<!--END OF FRIEND'S LINKS BLOCK-->
<!--FAVE OCS BLOCK-->
<div class="card bg-faded card-outline-secondary p-2 mb-3" style="border-width: 3px; border-radius: 10px; max-height:500px; overflow-x: hidden; overflow-y:scroll;">
<h1 class="text-uppercase text-secondary my-2 text-center">Favorite Characters</h1>
<div class="row d-flex justify-content-center p-1" style="text-shadow: 0px 0px 5px #000, 0px 0px 8px #000;">
<!--CHARACTER-->
<div class="col-md-4 mb-2">
<div class="d-flex justify-content-center align-items-center text-center" style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
<a class="text-secondary" href="#"><h2 class="display-4 font-weight-bold">Character Name</h2></a>
</div>
</div>
<!--END OF CHARACTER-->
<!--CHARACTER-->
<div class="col-md-4 mb-2">
<div class="d-flex justify-content-center align-items-center text-center" style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
<a class="text-secondary" href="#"><h2 class="display-4 font-weight-bold">Character Name</h2></a>
</div>
</div>
<!--END OF CHARACTER-->
<!--CHARACTER-->
<div class="col-md-4 mb-2">
<div class="d-flex justify-content-center align-items-center text-center" style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
<a class="text-secondary" href="#"><h2 class="display-4 font-weight-bold">Character Name</h2></a>
</div>
</div>
<!--END OF CHARACTER-->
<!--CHARACTER-->
<div class="col-md-4 mb-2">
<div class="d-flex justify-content-center align-items-center text-center" style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
<a class="text-secondary" href="#"><h2 class="display-4 font-weight-bold">Character Name</h2></a>
</div>
</div>
<!--END OF CHARACTER-->
<!--CHARACTER-->
<div class="col-md-4 mb-2">
<div class="d-flex justify-content-center align-items-center text-center" style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
<a class="text-secondary" href="#"><h2 class="display-4 font-weight-bold">Character Name</h2></a>
</div>
</div>
<!--END OF CHARACTER-->
<!--CHARACTER-->
<div class="col-md-4 mb-2">
<div class="d-flex justify-content-center align-items-center text-center" style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
<a class="text-secondary" href="#"><h2 class="display-4 font-weight-bold">Character Name</h2></a>
</div>
</div>
<!--END OF CHARACTER-->
<!--PASTE MORE ABOVE THIS LINE-->
</div>
</div>
<!--END OF FAVE OCS BLOCK-->
<!--FRIENDS BLOCK-->
<div class="card bg-faded card-outline-secondary p-2 mb-3" style="border-width: 3px; border-radius: 10px; max-height:500px; overflow-x: hidden; overflow-y:scroll;">
<h1 class="text-uppercase text-secondary my-2 text-center">My Friends</h1>
<div class="row d-flex justify-content-center p-1" style="text-shadow: 0px 0px 5px #000, 0px 0px 8px #000;">
<!--FRIEND-->
<div class="col-md-4 mb-2">
<div class="d-flex justify-content-center align-items-center text-center" style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
<a class="text-secondary" href="#"><h2 class="display-4 font-weight-bold">Friend's Name</h2></a>
</div>
</div>
<!--END OF FRIEND-->
<!--FRIEND-->
<div class="col-md-4 mb-2">
<div class="d-flex justify-content-center align-items-center text-center" style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
<a class="text-secondary" href="#"><h2 class="display-4 font-weight-bold">Friend's Name</h2></a>
</div>
</div>
<!--END OF FRIEND-->
<!--FRIEND-->
<div class="col-md-4 mb-2">
<div class="d-flex justify-content-center align-items-center text-center" style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
<a class="text-secondary" href="#"><h2 class="display-4 font-weight-bold">Friend's Name</h2></a>
</div>
</div>
<!--END OF FRIEND-->
<!--FRIEND-->
<div class="col-md-4 mb-2">
<div class="d-flex justify-content-center align-items-center text-center" style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
<a class="text-secondary" href="#"><h2 class="display-4 font-weight-bold">Friend's Name</h2></a>
</div>
</div>
<!--END OF FRIEND-->
<!--FRIEND-->
<div class="col-md-4 mb-2">
<div class="d-flex justify-content-center align-items-center text-center" style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
<a class="text-secondary" href="#"><h2 class="display-4 font-weight-bold">Friend's Name</h2></a>
</div>
</div>
<!--END OF FRIEND-->
<!--FRIEND-->
<div class="col-md-4 mb-2">
<div class="d-flex justify-content-center align-items-center text-center" style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
<a class="text-secondary" href="#"><h2 class="display-4 font-weight-bold">Friend's Name</h2></a>
</div>
</div>
<!--END OF FRIEND-->
</div>
</div>
<!--END OF FRIENDS BLOCK-->
</div>
</div>
<div class="bg-secondary" style="height: 3px; opacity: .5;">
<a href="https://toyhou.se/BigGayFish" class="pull-right text-secondary"><i class="fas fa-copyright"></i> BigGayFish</a>
</div>
</div>Copy
<!--BLOCK USER PROFILE CODE - CUSTOM COLORS ALT VER
Releasing this code because while I like it I wanna change my profile lol. Also iirc someone once asked about it so like I guess there may be people who like it??? Anyways here we are, with the alternate version.
COLOR KEY: #fff - Text Color
#3c3c3c - Background Color
#4fc8ff Accent + Link + Header Color
-->
<div class="container-fluid" style="color: #fff; font-size: 13pt;">
<div class="row no-gutters align-items-center">
<div class="col-lg-12 mb-3">
<div class="card p-2" style="background: #3c3c3c; border: #4fc8ff 3px solid; border-radius: 10px;">
<h1 class="text-uppercase text-center font-weight-bold display-4" style="color: #4fc8ff;">username</h1>
</div>
</div>
</div>
<div class="row">
<!--IMAGE BLOCK-->
<div class="col-md-3 mb-3">
<div class="sticky-top">
<div class="card p-2" style="background: #3c3c3c; border: #4fc8ff 3px solid; border-radius: 10px;">
<div class="mb-2" style="background-image:url('https://dummyimage.com/350x500/ffffff/000000'); background-size: contain; background-repeat: no-repeat; background-position: center; max-width: 500px; height: 500px;"></div>
<small class="text-center" style="color: #4fc8ff;">Art by @ username</small>
</div>
</div>
</div>
<!--END OF IMAGE BLOCK-->
<div class="col-lg-9 mb-3">
<!--INTRO BLOCK-->
<div class="card p-3 mb-3" style="background: #3c3c3c; border: #4fc8ff 3px solid; border-radius: 10px;">
<h1 class="text-uppercase" style="color: #4fc8ff;">age | gender | pronouns | anything else</h1>
<div class="card mb-2" style="background: #4fc8ff;"></div>
<p>Write about yourself here or whatever you want! 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>
<h5 class="text-uppercase mt-3 mb-2 text-center" style="color: #4fc8ff;">places to find me:</h5>
<div class="card mb-2" style="background: #4fc8ff;"></div>
<!--SOCMED LINKS-->
<div class='d-flex justify-content-center mt-2'>
<!-- DEVIANTART -->
<a class="tooltipster" style="color: #4fc8ff;" href="#" title="DeviantArt"> <i class="fab fa-deviantart fa-fw fa-2x"></i></a>
<!-- BLUESKY -->
<a class="tooltipster" style="color: #4fc8ff;" href="#" title="Bluesky"> <i class="fab fa-bluesky fa-fw fa-2x"></i></a>
<!-- TUMBLR -->
<a class="tooltipster" style="color: #4fc8ff;" href="#" title="Tumblr"> <i class="fab fa-tumblr fa-fw fa-2x"></i></a>
<!-- DISCORD -->
<p class="tooltipster" style="color: #4fc8ff;" title="Discord:"> <i class="fab fa-discord fa-fw fa-2x"></i></p>
<!-- YOUTUBE -->
<a class="tooltipster ml-2" style="color: #4fc8ff;" href="#" title="YouTube"> <i class="fab fa-youtube fa-fw fa-2x"></i></a>
<!-- CARRD -->
<a class="tooltipster ml-2" style="color: #4fc8ff;" href="#" title="Carrd"> <i class="fas fa-address-card fa-fw fa-2x"></i></a>
</div>
<!--END OF SOCMED LINKS-->
</div>
<!--END OF INTRO BLOCK-->
<!--INFO BLOCK-->
<div class="card p-3 mb-3" style="background: #3c3c3c; border: #4fc8ff 3px solid; border-radius: 10px;">
<div class="row justify-content-md-center">
<div class="col-lg-5">
<h5 class="text-uppercase text-center" style="color: #4fc8ff;">notice:</h5>
<div class="card mb-2" style="background: #4fc8ff;"></div>
<ul>
<li>write any updates/notices here, including maybe warnings and the like</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<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;">Commissions</a> <span class="pull-right">Open / Closed</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;">Terms of Service</a>
</div>
<div class="col-sm">
<h5 class="text-uppercase text-center" style="color: #4fc8ff;">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>
</div>
<!--END OF INFO BLOCK-->
<!--ABOUT BLOCK-->
<div class="card p-2 mb-3" style="background: #3c3c3c; border: #4fc8ff 3px solid; border-radius: 10px;">
<div class="card-text m-3" style="background-color: transparent; border: none;">
<h1 class="text-uppercase my-2 text-center" style="color: #4fc8ff;">About Me</h1>
<div class="row d-flex justify-content-center p-2">
<div class="col-sm">
<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">
<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">
<h3>Content:</h3>
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<div class="col-sm">
<h3>Content:</h3>
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
</div>
</div>
<!--END OF ABOUT BLOCK-->
<!--STORIES/PROJECT BLOCK-->
<div class="card p-2 mb-3 " style="background: #3c3c3c; border: #4fc8ff 3px solid; border-radius: 10px; max-height:500px; overflow-x: hidden; overflow-y:scroll;">
<h1 class="text-uppercase my-2 text-center" style="color: #4fc8ff;">My Stories</h1>
<div class="row d-flex justify-content-center p-1">
<!--STORY-->
<div class="col-md-6 mb-2">
<h5 class="text-uppercase text-center"><a href="#" style="color: #4fc8ff;">Project/Story Name</a></h5><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>
<p>Summary goes here! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div>
<!--END OF STORY-->
<!--STORY-->
<div class="col-md-6 mb-2">
<h5 class="text-uppercase text-center"><a href="#" style="color: #4fc8ff;">Project/Story Name</a></h5><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>
<p>Summary goes here! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div>
<!--END OF STORY-->
<!--STORY-->
<div class="col-md-6 mb-2">
<h5 class="text-uppercase text-center"><a href="#" style="color: #4fc8ff;">Project/Story Name</a></h5><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>
<p>Summary goes here! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div>
<!--END OF STORY-->
<!--STORY-->
<div class="col-md-6 mb-2">
<h5 class="text-uppercase text-center"><a href="#" style="color: #4fc8ff;">Project/Story Name</a></h5><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>
<p>Summary goes here! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div>
<!--END OF STORY-->
</div>
</div>
<!--END OF STORIES/PROJECT BLOCK-->
<!--FRIEND'S LINKS BLOCK
This section is for if your friends are artists or have outgoing links that you wish to promote. A lot of my friends are artists themselves so I usually put their adopts and commissions links here! This section is optional and you can delete it if you wish.-->
<div class="card p-2 mb-3" style="background: #3c3c3c; border: #4fc8ff 3px solid; border-radius: 10px;">
<div class="card-text m-3" style="background-color: transparent; border: none;">
<h1 class="text-uppercase my-2 text-center" style="color: #4fc8ff;">Friend Links</h1>
<div class="row d-flex justify-content-center p-2">
<!--FRIEND'S LINKS-->
<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>
<!--END OF FRIEND'S LINKS-->
<!--FRIEND'S LINKS-->
<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>
<!--END OF FRIEND'S LINKS-->
<!--FRIEND'S LINKS-->
<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>
<!--END OF FRIEND'S LINKS-->
</div>
</div>
</div>
<!--END OF FRIEND'S LINKS BLOCK-->
<!--FAVE OCS BLOCK-->
<div class="card p-2 mb-3" style="background: #3c3c3c; border: #4fc8ff 3px solid; border-radius: 10px; max-height:500px; overflow-x: hidden; overflow-y:scroll;">
<h1 class="text-uppercase my-2 text-center" style="color: #4fc8ff;">Favorite Characters</h1>
<div class="row d-flex justify-content-center p-1" style="text-shadow: 0px 0px 5px #000, 0px 0px 8px #000;">
<!--CHARACTER-->
<div class="col-md-4 mb-2">
<div class="d-flex justify-content-center align-items-center text-center" style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
<a href="#" style="color: #4fc8ff;"><h2 class="display-4 font-weight-bold">Character Name</h2></a>
</div>
</div>
<!--END OF CHARACTER-->
<!--CHARACTER-->
<div class="col-md-4 mb-2">
<div class="d-flex justify-content-center align-items-center text-center" style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
<a href="#" style="color: #4fc8ff;"><h2 class="display-4 font-weight-bold">Character Name</h2></a>
</div>
</div>
<!--END OF CHARACTER-->
<!--CHARACTER-->
<div class="col-md-4 mb-2">
<div class="d-flex justify-content-center align-items-center text-center" style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
<a href="#" style="color: #4fc8ff;"><h2 class="display-4 font-weight-bold">Character Name</h2></a>
</div>
</div>
<!--END OF CHARACTER-->
<!--CHARACTER-->
<div class="col-md-4 mb-2">
<div class="d-flex justify-content-center align-items-center text-center" style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
<a href="#" style="color: #4fc8ff;"><h2 class="display-4 font-weight-bold">Character Name</h2></a>
</div>
</div>
<!--END OF CHARACTER-->
<!--CHARACTER-->
<div class="col-md-4 mb-2">
<div class="d-flex justify-content-center align-items-center text-center" style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
<a href="#" style="color: #4fc8ff;"><h2 class="display-4 font-weight-bold">Character Name</h2></a>
</div>
</div>
<!--END OF CHARACTER-->
<!--CHARACTER-->
<div class="col-md-4 mb-2">
<div class="d-flex justify-content-center align-items-center text-center" style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
<a href="#" style="color: #4fc8ff;"><h2 class="display-4 font-weight-bold">Character Name</h2></a>
</div>
</div>
<!--END OF CHARACTER-->
<!--PASTE MORE ABOVE THIS LINE-->
</div>
</div>
<!--END OF FAVE OCS BLOCK-->
<!--FRIENDS BLOCK-->
<div class="card p-2 mb-3" style="background: #3c3c3c; border: #4fc8ff 3px solid; border-radius: 10px; max-height:500px; overflow-x: hidden; overflow-y:scroll;">
<h1 class="text-uppercase my-2 text-center" style="color: #4fc8ff;">My Friends</h1>
<div class="row d-flex justify-content-center p-1" style="text-shadow: 0px 0px 5px #000, 0px 0px 8px #000;">
<!--FRIEND-->
<div class="col-md-4 mb-2">
<div class="d-flex justify-content-center align-items-center text-center" style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
<a href="#" style="color: #4fc8ff;"><h2 class="display-4 font-weight-bold">Friend's Name</h2></a>
</div>
</div>
<!--END OF FRIEND-->
<!--FRIEND-->
<div class="col-md-4 mb-2">
<div class="d-flex justify-content-center align-items-center text-center" style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
<a href="#" style="color: #4fc8ff;"><h2 class="display-4 font-weight-bold">Friend's Name</h2></a>
</div>
</div>
<!--END OF FRIEND-->
<!--FRIEND-->
<div class="col-md-4 mb-2">
<div class="d-flex justify-content-center align-items-center text-center" style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
<a href="#" style="color: #4fc8ff;"><h2 class="display-4 font-weight-bold">Friend's Name</h2></a>
</div>
</div>
<!--END OF FRIEND-->
<!--FRIEND-->
<div class="col-md-4 mb-2">
<div class="d-flex justify-content-center align-items-center text-center" style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
<a href="#" style="color: #4fc8ff;"><h2 class="display-4 font-weight-bold">Friend's Name</h2></a>
</div>
</div>
<!--END OF FRIEND-->
<!--FRIEND-->
<div class="col-md-4 mb-2">
<div class="d-flex justify-content-center align-items-center text-center" style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
<a href="#" style="color: #4fc8ff;"><h2 class="display-4 font-weight-bold">Friend's Name</h2></a>
</div>
</div>
<!--END OF FRIEND-->
<!--FRIEND-->
<div class="col-md-4 mb-2">
<div class="d-flex justify-content-center align-items-center text-center" style="height: 200px;
background-image: url(https://dummyimage.com/350/ffffff/000000);
background-size: cover;
background-position: center;">
<a href="#" style="color: #4fc8ff;"><h2 class="display-4 font-weight-bold">Friend's Name</h2></a>
</div>
</div>
<!--END OF FRIEND-->
</div>
</div>
<!--END OF FRIENDS BLOCK-->
</div>
</div>
<div style="background: #4fc8ff; height: 3px; opacity: .5;">
<a href="https://toyhou.se/BigGayFish" class="pull-right" style="color: #4fc8ff;"><i class="fas fa-copyright"></i> BigGayFish</a>
</div>
</div>