twenty || if you keep making my heart flutter

[kumous]

ONE (1) CHARACTER CHART



LIVE PREVIEW:

CHARACTER
canon

INBOX

HMD

THREADS

PERMISSIONS

CHARACTER
canon

INBOX

HMD

THREADS

PERMISSIONS

MULTIPLE:
<raw-code><center><div style="margin:0 auto;max-width:1000px;display:flex;justify-content:center;flex-wrap:wrap;text-align:center; position: relative; top: 10px;"> <!--CHARACTER 1--> <div style="float: left; width:300px; height: 370px; background: url(BACKGROUND URL); background-repeat: none; outline: 10px solid #000; margin-right: 25px; margin-bottom: 25px;"> <img src="ICON URL" style="border-radius: 100px; border: 10px solid #000; position: relative; top: 30px; z-index: 1;" align="center"> <div style="width: 280px; height: 58%; position: relative; top: 5px; opacity: 0.75; color: #fff; font-family: avenir, century gothic, sans serif; background: #000; font-size: 16px; padding: 10px; text-align: center; padding-top: 20px; z-index: 0;"><span style="font-size: 36px; text-align: center; font-weight: bold;">CHARACTER</span> <br><span style="font-family: georgia; font-size: 20px; font-style: italic;">canon</span> <div style="margin:0 auto;max-width:700px;display:flex;justify-content:center;flex-wrap:wrap;text-align:center; padding-top: 15px;"> <div width="50%;" style="padding-right: 20px;"> <a href="LINK" style="text-decoration: none; color: #fff;"><div style="padding: 10px; background: #353535; width: 100px;">INBOX</div></a> <br><a href="LINK" style="text-decoration: none; color: #fff;"><div style="padding: 10px; background: #353535; width: 100px;">HMD</div></a> </div> <div width="50%;"> <a href="LINK" style="text-decoration: none; color: #fff;"><div style="padding: 10px; background: #353535; width: 100px;">THREADS</div></a> <br><a href="LINK" style="text-decoration: none; color: #fff;"><div style="padding: 10px; background: #353535; width: 100px;">PERMISSIONS</div></a> </div> </div> </div> </div> <!--CHARACTER 2--> <div style="float: left; width:300px; height: 370px; background: url(BACKGROUND URL); background-repeat: none; outline: 10px solid #000; margin-right: 25px; margin-bottom: 25px;"> <img src="ICON URL" style="border-radius: 100px; border: 10px solid #000; position: relative; top: 30px; z-index: 1;" align="center"> <div style="width: 280px; height: 58%; position: relative; top: 5px; opacity: 0.75; color: #fff; font-family: avenir, century gothic, sans serif; background: #000; font-size: 16px; padding: 10px; text-align: center; padding-top: 20px; z-index: 0;"><span style="font-size: 36px; text-align: center; font-weight: bold;">CHARACTER</span> <br><span style="font-family: georgia; font-size: 20px; font-style: italic;">canon</span> <div style="margin:0 auto;max-width:700px;display:flex;justify-content:center;flex-wrap:wrap;text-align:center; padding-top: 15px;"> <div width="50%;" style="padding-right: 20px;"> <a href="LINK" style="text-decoration: none; color: #fff;"><div style="padding: 10px; background: #353535; width: 100px;">INBOX</div></a> <br><a href="LINK" style="text-decoration: none; color: #fff;"><div style="padding: 10px; background: #353535; width: 100px;">HMD</div></a> </div> <div width="50%;"> <a href="LINK" style="text-decoration: none; color: #fff;"><div style="padding: 10px; background: #353535; width: 100px;">THREADS</div></a> <br><a href="LINK" style="text-decoration: none; color: #fff;"><div style="padding: 10px; background: #353535; width: 100px;">PERMISSIONS</div></a> </div> </div> </div> </div> </div></center><div style="clear: both;"></raw-code>

SINGLE:
<raw-code><center><div style="float: left; width:300px; height: 370px; background: url(BACKGROUND URL); background-repeat: none; outline: 10px solid #000; margin-right: 30px;"> <img src="ICON URL" style="border-radius: 100px; border: 10px solid #000; position: relative; top: 30px; z-index: 1;" align="center"> <div style="width: 280px; height: 58%; position: relative; top: 5px; opacity: 0.75; color: #fff; font-family: avenir, century gothic, sans serif; background: #000; font-size: 16px; padding: 10px; text-align: center; padding-top: 20px; z-index: 0;"><span style="font-size: 36px; text-align: center; font-weight: bold;">CHARACTER</span> <br><span style="font-family: georgia; font-size: 20px; font-style: italic;">canon</span> <div style="margin:0 auto;max-width:700px;display:flex;justify-content:center;flex-wrap:wrap;text-align:center; padding-top: 15px;"> <div width="50%;" style="padding-right: 20px;"> <a href="LINK" style="text-decoration: none; color: #fff;"><div style="padding: 10px; background: #353535; width: 100px;">INBOX</div></a> <br><a href="LINK" style="text-decoration: none; color: #fff;"><div style="padding: 10px; background: #353535; width: 100px;">HMD</div></a> </div> <div width="50%;"> <a href="LINK" style="text-decoration: none; color: #fff;"><div style="padding: 10px; background: #353535; width: 100px;">THREADS</div></a> <br><a href="LINK" style="text-decoration: none; color: #fff;"><div style="padding: 10px; background: #353535; width: 100px;">PERMISSIONS</div></a> </div> </div> </div> </div> </center><div style="clear: both;"></raw-code>

ღ all backgrounds used are 'washi paper'! pinterest has a ton to choose from
ღ if you need an image-hosting site, I always recommend imgur
ღ mini-directories for characters - fairly simple
ღ credit if you wanna! if only just to let people know where you got it. also feel free to ask questions or edit. goodness knows I frankenspliced some codes together when I was learning (and I still am)