[58] Vaporwave Inbox

[lina_trinch]

Leave a message...

Code:
<div style="background: center/cover url('IMAGE_URL'), #ccc; width: 600px; height: 300px; margin: auto;"> <div style="display: inline-block; height: 100%; width: 20px; background: #f7f7f7; margin-left: 20px;"></div> <div style="display: inline-block; height: 100%; width: 20px; background: #f7f7f7; margin-left: 20px;"></div> <div style="display: inline-block; height: 100%; width: 20px; background: #f7f7f7; margin-left: 20px;"></div> <div style="display: inline-block; height: 100%; width: 20px; background: #f7f7f7; margin-left: 20px;"></div> </div> <div style="background: center/cover url(''), linear-gradient(90deg, rgba(182, 28, 156, 0.4), rgba(182, 28, 156, 0.9)); width: 600px; height: 40px; margin: auto;"> <div style="display: inline-block; height: 100%; width: 20px; background: #f7f7f7; margin-left: 20px;"></div> <div style="display: inline-block; height: 100%; width: 20px; background: #f7f7f7; margin-left: 20px;"></div> <div style="display: inline-block; height: 100%; width: 20px; background: #f7f7f7; margin-left: 20px;"></div> <div style="display: inline-block; height: 100%; width: 20px; background: #f7f7f7; margin-left: 20px;"></div> <div style="display: inline-block; width: 400px; text-align: right; font-size: 40px; font-family: Georgia, 'Times New Roman', Times, serif; font-style: italic; color: #f7f7f7; text-shadow: 1px 1px 0 #b61c9c, 2px 2px 0 #b61c9c; cursor: default; line-height: 0;"> <div>Leave a message...</div> </div> </div>

Leave a message...

Code:
<div style="background: center/cover url('IMAGE_URL'), #ccc; width: 600px; height: 300px; margin: auto;"> <div style="display: inline-block; height: 100%; width: 20px; background: #f7f7f7; margin-left: 20px; box-shadow: 1px 1px 0 #b61c9c, 2px 2px 0 #b61c9c; border: 1px solid #b61c9c; border-bottom: none; border-top: none;"></div> <div style="display: inline-block; height: 75%; width: 20px; background: #f7f7f7; margin-left: 20px; box-shadow: 1px 1px 0 #b61c9c, 2px 2px 0 #b61c9c; border: 1px solid #b61c9c; border-bottom: none;"></div> <div style="display: inline-block; height: 50%; width: 20px; background: #f7f7f7; margin-left: 20px; box-shadow: 1px 1px 0 #b61c9c, 2px 2px 0 #b61c9c; border: 1px solid #b61c9c; border-bottom: none;"></div> <div style="display: inline-block; height: 25%; width: 20px; background: #f7f7f7; margin-left: 20px; box-shadow: 1px 1px 0 #b61c9c, 2px 2px 0 #b61c9c; border: 1px solid #b61c9c; border-bottom: none;"></div> </div> <div style="background: center/cover url(''), linear-gradient(90deg, rgba(182, 28, 156, 0.4), rgba(182, 28, 156, 0.9)); width: 600px; height: 40px; margin: auto;"> <div style="display: inline-block; height: 100%; width: 20px; background: #f7f7f7; margin-left: 20px; box-shadow: 1px 1px 0 #b61c9c, 2px 2px 0 #b61c9c; border: 1px solid #b61c9c; border-top: none;"></div> <div style="display: inline-block; height: 100%; width: 20px; background: #f7f7f7; margin-left: 20px; box-shadow: 1px 1px 0 #b61c9c, 2px 2px 0 #b61c9c; border: 1px solid #b61c9c; border-top: none;"></div> <div style="display: inline-block; height: 100%; width: 20px; background: #f7f7f7; margin-left: 20px; box-shadow: 1px 1px 0 #b61c9c, 2px 2px 0 #b61c9c; border: 1px solid #b61c9c; border-top: none;"></div> <div style="display: inline-block; height: 100%; width: 20px; background: #f7f7f7; margin-left: 20px; box-shadow: 1px 1px 0 #b61c9c, 2px 2px 0 #b61c9c; border: 1px solid #b61c9c; border-top: none;"></div> <div style="display: inline-block; width: 400px; text-align: right; font-size: 40px; font-family: Georgia, 'Times New Roman', Times, serif; font-style: italic; color: #f7f7f7; text-shadow: 1px 1px 0 #b61c9c, 2px 2px 0 #b61c9c; cursor: default; line-height: 0;"> <div>Leave a message...</div> </div> </div>

Leave a message...

Code:
<div style="background: center/cover url('IMAGE_URL'), #ccc; width: 600px; height: 300px; margin: auto;"> <div style="display: inline-block; height: 100%; width: 10px; background: #f7f7f7; margin-left: 8px;"></div> <div style="display: inline-block; height: 100%; width: 13px; background: #f7f7f7; margin-left: 10px;"></div> <div style="display: inline-block; height: 100%; width: 18px; background: #f7f7f7; margin-left: 13px;"></div> <div style="display: inline-block; height: 100%; width: 20px; background: #f7f7f7; margin-left: 18px;"></div> </div> <div style="background: center/cover url(''), linear-gradient(90deg, rgba(182, 28, 156, 0.4), rgba(182, 28, 156, 0.9)); width: 600px; height: 40px; margin: auto;"> <div style="display: inline-block; height: 100%; width: 10px; background: #f7f7f7; margin-left: 8px;"></div> <div style="display: inline-block; height: 100%; width: 13px; background: #f7f7f7; margin-left: 10px;"></div> <div style="display: inline-block; height: 100%; width: 18px; background: #f7f7f7; margin-left: 13px;"></div> <div style="display: inline-block; height: 100%; width: 20px; background: #f7f7f7; margin-left: 18px;"></div> <div style="display: inline-block; width: 400px; text-align: right; font-size: 40px; font-family: Georgia, 'Times New Roman', Times, serif; font-style: italic; color: #f7f7f7; text-shadow: 1px 1px 0 #b61c9c, 2px 2px 0 #b61c9c; cursor: default; line-height: 0;"> <div>Leave a message...</div> </div> </div>

Leave a message...

Code:
<div style="background: center/cover url('IMAGE_URL'), #ccc; width: 450px; height: 500px; margin: auto; padding-top: 20px;"> <div style="display: block; width: 100%; height: 20px; background: #f7f7f7;"></div> <div style="display: block; width: 100%; height: 20px; background: #f7f7f7; margin-top: 20px;"></div> <div style="display: block; width: 100%; height: 20px; background: #f7f7f7; margin-top: 20px;"></div> <div style="display: block; width: 100%; height: 20px; background: #f7f7f7; margin-top: 20px;"></div> </div> <div style="background: center/cover url(''), linear-gradient(90deg, rgba(182, 28, 156, 0.4), rgba(182, 28, 156, 0.9)); width: 450px; height: 40px; margin: auto;"> <div style="display: inline-block; width: 400px; text-align: right; font-size: 40px; font-family: Georgia, 'Times New Roman', Times, serif; font-style: italic; color: #f7f7f7; text-shadow: 1px 1px 0 #b61c9c, 2px 2px 0 #b61c9c; cursor: default; line-height: 50px;"> <div>Leave a message...</div> </div> </div>

Leave a message...

Code:
<div style="background: center/cover url('IMAGE_URL'), #ccc; width: 450px; height: 500px; margin: auto; padding-top: 20px;"> <div style="display: block; width: 100%; height: 20px; background: #f7f7f7; box-shadow: 0 1px 0 #b61c9c, 0 2px 0 #b61c9c; border: 1px solid #b61c9c; border-left: none; border-right: none;"></div> <div style="display: block; width: 75%; height: 20px; background: #f7f7f7; margin-top: 20px; box-shadow: 1px 1px 0 #b61c9c, 2px 2px 0 #b61c9c; border: 1px solid #b61c9c; border-left: none;"></div> <div style="display: block; width: 50%; height: 20px; background: #f7f7f7; margin-top: 20px; box-shadow: 1px 1px 0 #b61c9c, 2px 2px 0 #b61c9c; border: 1px solid #b61c9c; border-left: none;"></div> <div style="display: block; width: 25%; height: 20px; background: #f7f7f7; margin-top: 20px; box-shadow: 1px 1px 0 #b61c9c, 2px 2px 0 #b61c9c; border: 1px solid #b61c9c; border-left: none;"></div> </div> <div style="background: center/cover url(''), linear-gradient(90deg, rgba(182, 28, 156, 0.4), rgba(182, 28, 156, 0.9)); width: 450px; height: 40px; margin: auto;"> <div style="display: inline-block; width: 400px; text-align: right; font-size: 40px; font-family: Georgia, 'Times New Roman', Times, serif; font-style: italic; color: #f7f7f7; text-shadow: 1px 1px 0 #b61c9c, 2px 2px 0 #b61c9c; cursor: default; line-height: 50px;"> <div>Leave a message...</div> </div> </div>

Leave a message...

Code:
<div style="background: center/cover url('IMAGE_URL'), #ccc; width: 450px; height: 500px; margin: auto; padding-top:8px;"> <div style="display: block; width: 100%; height: 10px; background: #f7f7f7;"></div> <div style="display: block; width: 100%; height: 13px; background: #f7f7f7; margin-top: 10px;"></div> <div style="display: block; width: 100%; height: 18px; background: #f7f7f7; margin-top: 13px;"></div> <div style="display: block; width: 100%; height: 20px; background: #f7f7f7; margin-top: 18px;"></div> </div> <div style="background: center/cover url(''), linear-gradient(90deg, rgba(182, 28, 156, 0.4), rgba(182, 28, 156, 0.9)); width: 450px; height: 40px; margin: auto;"> <div style="display: inline-block; width: 400px; text-align: right; font-size: 40px; font-family: Georgia, 'Times New Roman', Times, serif; font-style: italic; color: #f7f7f7; text-shadow: 1px 1px 0 #b61c9c, 2px 2px 0 #b61c9c; cursor: default; line-height: 50px;"> <div>Leave a message...</div> </div> </div>

❖ All six of these codes were released early on the Patreon to my subscribers! So feel free to check out things over there if you want early codes or some exclusive content. ❖ There are two versions here (horizontal and vertical) each with three versions of their own. Feel free to use whatever you like! ❖ The GIFs used can be found here and here. ❖ Make sure Disable Auto-Formatting is checked when you copy/paste the code into your post. ❖ No credit link is included in the code. It's okay if you don't add one somewhere else. Ctrl+F & Replace: ❖ IMAGE_URL - Add whatever image you like here. ❖ Leave a message... - Replace with whatever you want for the bottom text. #ccc Default background color if no image is added. #f7f7f7 Dreamwidth's default background color, used to create a transparency effect in the bars. #b61c9c Shadows for the bars and text. rgba(182, 28, 156, 0.4) The lighter side of the bottom gradient. rgba(182, 28, 156, 0.9) The darker side of the bottom gradient.