camera roll | f2u ([ Code ])

quiincodes

Info


Created
2 years, 9 months ago
Creator
quiincodes
Favorites
4

Profile


<!------------
Camera Roll • F2U Character HTML

Rules:
- Turn off WYSIWYG when editing!
- Do not edit or remove my credit
- Not really a rule but feel free to contact me if you have any trouble with the code!

This code uses Bootstrap colors, meaning that the colors are *not* customizable, except for the title!
The title can be changed by changing the [class="text-success"] to any of the below:
class="text-success" - green
class="text-warning" - yellow
class="text-danger" - red
class="text-primary" - blue
class="text-white" - white
------------>

<center>
<!--[ Invisible Outer Box ]-->
<div class="container" style="width: 550px; height: 100%; font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif; ">
<!--[ Main Box ]-->
<div class="container bg-dark m-2 p-2 rounded" style="width: 200px; height: 291px; float: left;">

<!--[ Icon ]-->
<img class="rounded mb-4" src="IMG_URL" style="width: 100%; ">  
<!--[ Title ]-->    
<h1 class="text-success">
<i class="fal fa-cactus"></i>
NAME</h1>  

<!--[ Pronouns ]-->
<p class="text-white">< prn / prn ></p>
</div>

<!--[ Scrolling Gallery ]-->
<div class="container bg-dark rounded p-2 m-2 tooltipster" style="width: 280px; height: 200px; overflow-x: scroll; overflow-y: hidden; float: right" title="scroll side to side!">

<!--[ Image 1 ]-->
<img src="IMG_URL" style="width: 150px; height: 190px; object-fit: cover; position: absolute; left: 0px; top: 5px;">

<!--[ Image ]-->
<img src="IMG_URL" style="width: 150px; height: 190px; object-fit: cover; position: absolute; left: 155px; top: 5px;">

<!--[ Image 3 ]-->
<img src="IMG_URL" style="width: 150px; height: 190px; object-fit: cover; position: absolute; left: 310px; top: 5px;">
</div>

<!--[ Quick Info ]-->
<div class="container bg-dark rounded p-2 m-2" style="width: 280px; height: 75px; overflow-x: scroll; overflow-y: hidden; float: right">

<!--[ Gender ]-->
<p class="text-white" style="text-align: left; float: left">
<i class="fal fa-venus-mars"></i>  gender  

<br>
<!--[ Sexuality ]-->
<i class="fal fa-heart"></i>  sexuality

<br>

<!--[ Birthday ]-->
<i class="fal fa-birthday-cake"></i>  birthday

<br>
</p>

<!--[ Trade Status ]-->
<p class="text-white" style="text-align: right; float: right">
trade status <i class="fal fa-paperclip"></i>

<br>
<!--[ Worth ]-->
worth <i class="fal fa-dollar-sign"></i>

<br>

<!--[ Designer ]-->
designer <i class="fal fa-pencil"></i>

<br>
</p>



</div>
</div>
</center>