Profile
<!-- POLCO BADGE SNIPPET @ arachmantis -->
<!--
DECO RESOURCES:
- LINE Stickers
- https://fontawesome.com/
COLORS:
- BORDER #ffc0c0
- BORDER DROP SHADOW: #f45757
- FA TEXT SHADOW: #f4a28c
- IMG DROP SHADOW: #8b7c78
NOTES:
- I strongly encourage you to mess around with this in the Live editor!
- There really is no wrong or right way to do this, go with gut feelings
- You can stack these to your hearts content
- Comments are there to help but if you have any questions shoot me a comment / DM
- Keep in mind how initial FA's are presented, you may have to adjust top: __ and left: __
-->
<!====TOP====>
<!-- to add more copy <div style=...'> to '</div>' and mess around with left: _px (can go into negative values) and z-index (0's make object appear in front or back, try erasing one 0 and see what happens to the object)-->
<!-- top left corner : [OBJECT NAME]-->
<div style="position:absolute;top:0px;left:0px;;z-index: 10000; transform: rotate(10deg); font-size:22px">
<i class="fas fa- fa-fw fa-3x">
<!-- fa here or you can leave it here and attach an animation of your choosing to use on the img-->
<img src="https://stickershop.line-scdn.net/stickershop/v1/sticker/511689049/android/sticker.png" style="color: rgb(215, 250, 241); filter: drop-shadow(#8b7c78 0px 2px 8px);">
</i>
</div>
<!-- center : [OBJ. NAME] -->
<div style="position:absolute;top:20px;left:70px;;z-index: 10000; transform: rotate(0deg); font-size:11px">
<i class="fas fa- fa-fw fa-3x">
<!-- fa here -->
<img src="https://stickershop.line-scdn.net/sticonshop/v1/sticon/626e245e1ae368611a46b3d4/iPhone/023.png" style="color: rgb(215, 250, 241); filter: drop-shadow(#8b7c78 0px 0px 5px);">
</i>
</div>
<!-- top right corner : [OBJ. NAME] -->
<div style="position:absolute;top:15px;left:125px;;z-index: 10000; transform: rotate(00deg); font-size:11px">
<i class="far fa-fork fa-fw fa-4x fa-shake" style="text-shadow: 2px 2px 5px #f4a28c; color:#fff animation-duration: 2s; color:#FFF">
<!-- fa here -->
<img src="" style="color: rgb(215, 250, 241); filter: drop-shadow(#8b7c78 0px 0px 5px);">
</i>
</div>
<!====SIDES====>
<!-- to add more copy-paste <div style=...'> to '</div>' and mess around with top: _px to move it up or down -->
<!-- left side : [OBJ. NAME] -->
<div style="position:absolute;top:65px;left:20px;;z-index: 1000; transform: rotate(0deg); font-size:14px;">
<i class="fas fa-flower fa-fw fa-3x" style="text-shadow: 2px 2px 5px #f4a28c; color:#fff">
<!-- fa here -->
<img src="" style="filter: drop-shadow(#8b7c78 0px 0px 5px);">
</i>
</div>
<!--- right side : [OBJ. NAME] -->
<div style="position:absolute;top:65px;left:120px;;z-index: 1000; transform: rotate(0deg); font-size:14px">
<i class="fas fa-heart fa-fw fa-3x" style="text-shadow: 2px 2px 5px #f4a28c; color:#fff">
<!-- fa here -->
<img src="" style="filter: drop-shadow(#8b7c78 0px 0px 5px);">
</i>
</div>
<!====BOTTOM====>
<!-- to add more copy <div style=...'> to '</div>' and mess around with left: _px and z-index -->
<!-- bottom left corner : [OBJ NAME]-->
<div style="position:absolute;top:120px;left:25px;;z-index: 10000; transform: rotate(0deg); font-size:12px">
<i class="fas fa-prescription fa-fw fa-3x" style="text-shadow: 2px 2px 5px #f4a28c; color:#fff">
<!-- fa here -->
<img src="" style="color: rgb(215, 250, 241); filter: drop-shadow(#8b7c78 0px 0px 5px);">
</i>
</div>
<!-- center : [OBJ. NAME] -->
<div style="position:absolute;top:125px;left:70px;;z-index: 10000; transform: rotate(0deg); font-size:11px">
<i class="fas fa- fa-fw fa-3x">
<!-- fa here -->
<img src="https://stickershop.line-scdn.net/sticonshop/v1/sticon/626e245e1ae368611a46b3d4/iPhone/023.png" style="filter: drop-shadow(#8b7c78 0px 0px 5px);">
</i>
</div>
<!-- bottom right corner : [OBJ. NAME] -->
<div style="position:absolute;top:120px;left:120px;;z-index: 1000; transform: rotate(0deg); font-size:12px">
<i class="fas fa-star fa-fw fa-3x" style="text-shadow: 2px 2px 5px #f4a28c; color:#fff">
<!-- fa here -->
<img src="" style="color: rgb(215, 250, 241); filter: drop-shadow(#8b7c78 0px 0px 5px);">
</i>
</div>
.character-profile .profile-name-section .img-thumbnail {
margin: 1.5rem;
/*can change the margin but i personally like it as is for extra deco*/
}
.profile-name-icon {
border-radius: 10%;
}
.img-thumbnail {
background: #753cbc;
/*used this area as an 'extra bg' but if you'd like to keep it transparent, delete this row or put none in place of hex*/
border: 4px solid #ffc0c0;
border-radius: 1rem;
box-shadow: 4px 4px 0px #f45757;
}
.gallery-thumb .img-thumbnail {
background: none;
border: none;
padding: 0px;
box-shadow: none;
}