Avii's HTML/CSS Snippets

Hi! I'm Powder, and I'm totally an alive chicken with no robotic parts.

 <div style="width: 100%; min-height: 100px; display: flex; padding: 10px;"> <div style="width: 100px; min-width: 100px; height: 100px; margin-right: 10px;"> <img src="CHICKEN_IMAGE.PNG" style="border-radius: 25px;"> </div> <div style="height: 100px; width: 33px; min-width: 33px;"> <div style="position: relative; left: -20px; top: 25px; width: 0px; height: 0px; border: 25px solid transparent; border-right: 50px solid var(--card-col);"></div> </div> <div style="width: 100%;min-height: 100px; background-color: var(--card-col); border-radius: 25px; padding: 25px; text-align: center;"> YOUR_TEXT_GOES_HERE </div> </div> 

I can move to the other side, too.

  <div style="width: 100%; min-height: 100px; display: flex; padding: 10px;"> <div style="width: 100%;min-height: 100px; background-color: var(--card-col); border-radius: 25px; padding: 25px; text-align: center;"> YOUR_TEXT_GOES_HERE </div> <div style="height: 100px; width: 33px; min-width: 33px;"> <div style="position: relative; left: -20px; top: 25px; width: 0px; height: 0px; border: 25px solid transparent; border-left: 50px solid var(--card-col);"></div> </div> <div style="width: 100px; min-width: 100px; height: 100px; margin-left: 10px;"> <img src="CHICKEN_IMAGE.PNG" style="border-radius: 25px; transform: scaleX(-1);"> </div> </div>  

  <div style="width: 100%; min-height: 100px; display: flex; padding: 10px;"> <div class="talky_box_left" style="width: 100%;min-height: 100px; background-color: var(--card-col); border-radius: 25px; padding: 25px; text-align: center;"> YOUR_TEXT_GOES_HERE </div> </div>