[04.] Polco Snippet (HTML SNIPPET)

<!-- 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
    
    -->
<!====ICON BORDER====>
    <!-- border color + drop shadow-->
    <div style="position:absolute;width:106px;height:106px; top:15px; left:15px;;z-index: 0;
  border: 5px solid #ffc0c0; border-radius: 25px;
  padding: 20px;
  box-shadow: 5px 5px 20px #f45757;">
    </div>


    <!====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:-20px;;z-index: 10000; transform: rotate(00deg); 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:0px;left:50px;;z-index: 10000; transform: rotate(82deg); 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:0px;left:100px;;z-index: 10000; transform: rotate(0deg); font-size:10px">
            <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:50px;left:0px;;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:50px;left:90px;;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:100px;left:0px;;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:100px;left:50px;;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:100px;left:100px;;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>