killthecake | [30] I Discovered Grids (& had no internet for a week)

Navigation | Permissions | Kink List | Inbox

Live Preview Here!

Navigation Code:

<div style="grid-area: one;background: url(IMG), #ebebeb;background-position:center;background-size:cover;box-shadow: 2px 2px 5px;">
<div style="font-family:times;font-weight:bold;font-variant:small-caps;font-style:italic;padding-top: 90px;font-size: 50px;letter-spacing: 5px;color: #000;text-shadow: 0px 0px 1px #ff4ebd, 1px 1px 1px #ff6bac, 2px 2px 1px #ff8e99, 3px 3px 1px #ffb582, 4px 4px 1px #ffdd6c, 5px 5px 1px #fffa5b">
Header
</div></div>

<div style="grid-area: six;background: url(IMG),#ebebeb;background-position:center;background-size:cover;box-shadow: 2px 2px 5px;"><div style="background: rgba(255,255,255,0.5);width: 60%;margin-top: 40%;padding-bottom:5px;;font-family:times;font-weight:bold;font-variant:small-caps;font-style:italic;font-size: 18px;text-shadow:1px 1px 1px #ff6bac;color: #000;">
alias<br />
tmz<br />
<a href="URL" style="text-decoration:none;color: #000">plurk</a><br />
discord#0000
</div></div>

<a href="https://killthecake.dreamwidth.org/" style="text-decoration:none;color: #333;"><div style="font-family:times;font-weight:bold;font-variant:small-caps;">
by killthecake
</div></a></div>

❖ Make sure Disable Auto-Formatting is checked when you copy/paste the code into your post.

❖ The links are labelled as 1, 2, 3, etc. They're numbered from top to bottom.

❖ The gradient 3D effect on the header is made with text shadows. The colors are below but feel free to play with or remove them as you see fit.

Ctrl+F & Replace:
❖ Header - self-explanatory
❖ alias - your handle
❖ tmz - your timezone
❖ discord#0000 - your discord handle

❖ link - link text. each one is numbered from top to bottom so you can find them easily.
❖ URL - link urls, including for your plurk
❖ IMG - image urls

#ff4ebd header text shadow gradient
#ff6bac header text shadow gradient, link text shadow
#ff8e99 header text shadow gradient
#ffb582 header text shadow gradient
#ffdd6c header text shadow gradient
#fffa5b header text shadow gradient

#fff link text color
#ebebeb image backgrounds
#333 credit text
#000 header text

rgba(255,255,255,0.5) transparent light background

[ Top ]

Live Preview Here!

Permissions Code:

OOC

</div><div style="font-weight:normal;text-align:left;padding: 0 30px;letter-spacing: 0px;font-size: 18px">
<b>Backtagging</b> lorem ipsum<br />
<b>Threadjacking</b> lorem ipsum<br />
<b>Fourth Wall</b> lorem ipsum<br />
<b>Off-Limits</b> lorem ipsum<br />
<b>Other</b> lorem ipsum

</div></div></div></div>

<div style="grid-area:two;">
<div style="font-family:times;font-weight:bold;font-variant:small-caps;letter-spacing: 3px;padding-top: 30px;font-size: 25px;">
Alias/Name
<div style="height: 2px;background: #000;width: 80%;"></div>
<font style="font-weight:normal;font-size: 20px;">
Canon<br />
Name<br />
Gender<br />
Age<br />
Sexuality
</font></div></div>

<div style="font-weight:normal;text-align:left;padding: 0 30px;letter-spacing: 0px;font-size: 18px">
<b>Mental Contact</b> lorem ipsum<br />
<b>Physical Contact</b> lorem ipsum<br />
<b>Flirting</b> lorem ipsum<br />
<b>Kissing</b> lorem ipsum<br />
<b>Fighting</b> lorem ipsum<br />
<b>Injury</b> lorem ipsum<br />
<b>Death</b> lorem ipsum<br />
<b>Other</b> lorem ipsum

</div></div></div></div>

<div style="grid-area:nine;"><div style="background: #ebebeb;background: url(IMG), #ebebeb;background-position:center;background-size:cover;width: 90%;height: 90%;margin-top: 4px;box-shadow: 2px 2px 5px;">
<a href="https://killthecake.dreamwidth.org/" style="text-decoration:none;">
<div style="background: rgba(255,255,255,0.5);font-family:times;font-weight:bold;font-variant:small-caps;padding: 13% 0;font-size: 18px;color: rgba(0,0,0,0.6);font-style:italic;">
by killthecake
</div></a></div></div>
</div>

❖ Make sure Disable Auto-Formatting is checked when you copy/paste the code into your post.

❖ The two links are labelled from left to right as 1 and 2.

❖ The text boxes will not extend or scroll. What you see is the room you have to work with. If you want to fit in a lot of text, I recommend changing the font size.

❖ In the code, there's a space for canon. Actually, you can add a few more lines of whatever you want in that header thingy.

❖ Usagi is definitely not straight, I'm pretty sure.

Ctrl+F & Replace:
❖ Lorem Ipsum - text to fill in
❖ Alias/Name - header title
❖ Canon, Name, Gender, Age, Sexuality - self-explanatory. feel free to delete any you don't want to keep.

❖ link - link text
❖ URL - link urls
❖ IMG - image urls

#ff6bac link text shadow

#fff link text color
#ebebeb image backgrounds
#000 header dividers

rgba(255,196,215,0.7) permissions transparent backgrounds
rgba(255,255,255,0.5) transparent light background
rgba(0,0,0,0.6) credit text color

[ Top ]

Live Preview Here!

Kink List Code:

<div style="grid-area:two;background: linear-gradient(130deg, rgba(9,245,209), rgba(19,183,158), rgba(9,245,209));box-shadow: 2px 2px 5px;">
<div style="width:90%;height: 93%;background: #fff;margin-top: 12px;box-shadow: 2px 2px 5px;overflow-y:scroll;font-family:times;font-variant:small-caps;font-size: 20px;">
<div style="text-align:left;padding: 10px 20px;">
• Kink<br />
• Kink<br />
• Kink<br />
• Kink<br />
• Kink
</div></div></div>

<div style="grid-area:three;background: radial-gradient(rgba(9,245,209)0%,  rgba(0,0,0,0)60%);">
<div style="font-family:times;font-variant:small-caps;font-weight:bold;font-size: 30px;padding-top: 30px;">
Favorites
<div style="height: 2px;background: #000;width: 80%;"></div>
</div></div>

<div style="grid-area:seven;background: linear-gradient(130deg, rgba(48,245,9), rgba(19,183,158), rgba(48,245,9));box-shadow: 2px 2px 5px;">
<div style="width:90%;height: 93%;background: #fff;margin-top: 12px;box-shadow: 2px 2px 5px;overflow-y:scroll;font-family:times;font-variant:small-caps;font-size: 20px;">
<div style="text-align:left;padding: 10px 20px;">
• Kink<br />
• Kink<br />
• Kink<br />
• Kink<br />
• Kink
</div></div></div>

<div style="grid-area:ten;background: linear-gradient(130deg, rgba(245,242,9), rgba(194,243,1), rgba(245,242,9));box-shadow: 2px 2px 5px;">
<div style="width:90%;height: 90%;background: #fff;margin-top: 10px;box-shadow: 2px 2px 5px;overflow-y:scroll;font-family:times;font-variant:small-caps;font-size: 20px;">
<div style="text-align:left;padding: 10px 20px;">
• Kink<br />
• Kink<br />
• Kink<br />
• Kink<br />
• Kink
</div></div></div>

<div style="grid-area:eleven;background: radial-gradient(rgba(245,242,9)0%,  rgba(0,0,0,0)60%);"><div style="font-family:times;font-variant:small-caps;font-weight:bold;font-size: 30px;padding-top: 30px;">
Maybe
<div style="height: 2px;background: #000;width: 80%;"></div>
</div></div>

<div style="grid-area:sixteen;background: linear-gradient(130deg, rgba(245,153,9), rgba(208,206,76), rgba(245,153,9));box-shadow: 2px 2px 5px;">
<div style="width:90%;height: 90%;background: #fff;margin-top: 10px;box-shadow: 2px 2px 5px;overflow-y:scroll;font-family:times;font-variant:small-caps;font-size: 20px;">
<div style="text-align:left;padding: 10px 20px;">
• Kink<br />
• Kink<br />
• Kink<br />
• Kink<br />
• Kink
</div></div></div>

<div style="grid-area:seventeen;background: linear-gradient(130deg, rgba(245,64,9), rgba(200,124,5), rgba(245,64,9));box-shadow: 2px 2px 5px;">
<div style="width:90%;height: 90%;background: #fff;margin-top: 10px;box-shadow: 2px 2px 5px;overflow-y:scroll;font-family:times;font-variant:small-caps;font-size: 20px;">
<div style="text-align:left;padding: 10px 20px;">
• Kink<br />
• Kink<br />
• Kink<br />
• Kink<br />
• Kink
</div></div></div>

<div style="grid-area:eighteen;"><div style="font-family:times;font-variant:small-caps;font-weight:bold;font-size: 20px;"><a href="https://killthecake.dreamwidth.org/" style="text-decoration:none;color: #000;">
by killthecake
</a></div></div>

</div>

❖ Make sure Disable Auto-Formatting is checked when you copy/paste the code into your post.

❖ You can add as many kinks or what have you as you want. The boxes will all scroll.

❖ Get creative with it! Change the gradients, put some suggestive images in there, go wild.

Ctrl+F & Replace:
❖ Kink List - header
❖ Kink - text to fill in

❖ IMG - image urls

#ebebeb image backgrounds
#000 header dividers/underline, credit text color

rgba(0,0,0,0) transparent backgrounds
rgba(9,245,209) favorite gradient, favorite header background
rgba(19,183,158) favorite gradient, yes gradient
rgba(48,245,9) yes gradient, yes header background
rgba(245,242,9) maybe gradient, maybe header background
rgba(194,243,1) maybe gradient
rgba(245,153,9) ic no gradient, ic no header
rgba(208,206,76) ic no gradient
rgba(245,64,9) ooc no gradient, ooc no header
rgba(200,124,5) ooc no gradient

[ Top ]

Live Preview Here!

Inbox Code:

<div style="grid-area:one;background: url(IMG), #ebebeb;background-position:center;background-size:cover;box-shadow:2px 2px 5px;">
<div style="font-family:times;font-style:italic;font-variant:small-caps;font-weight:bold;font-size: 35px;background: rgba(0,0,0,0.3);margin-top: 115px;letter-spacing: 5px;color: #fff;text-shadow: 1px 1px 1px #ff6bac;padding-bottom: 5px;">
please leave a message
</div></div>

<div style="grid-area:five;">
<div style="font-family:courier;font-size: 20px;">
[ Action ]
</div></div>

<div style="grid-area:seven;"><div style="font-family:courier;font-size: 20px;">
[ Voice ]
</div></div>

<div style="grid-area:eight;"><div style="font-family:courier;font-size: 20px;">
[ Video ]
</div></div>

❖ Make sure Disable Auto-Formatting is checked when you copy/paste the code into your post.

❖ The links are labelled 1, 2, and 3 from top to bottom.

Ctrl+F & Replace:
❖ please leave a message - main text header

❖ link - link text
❖ URL - link urls
❖ IMG - image urls

#ff6bac text shadow

#fff header & link text color
#ebebeb image backgrounds
#333 credit text color

rgba(0,0,0,0.3) header transparent background
rgba(255,255,255,0.5) transparent light background

[ Top ]

Flat | Top-Level Comments Only

Using a few of these for numerous characters; thank you!!

Wow these codes are beautiful. Will bookmark this entry to future use. For the moment I will use the kink list to re-do the one I had for a muse of mine. I love the fact you can add pictures to it.

Thank you very much for sharing ❤️

You're welcome!! Thank you so much for using ♥ c:

If you're curious here it is with a couple of aesthetic pictures. I just need to change the colors of the first two boxes to match the color scheme a bit better.

It looks great! I like the aesthetic you went with, too. Def fits Tyrion. He's fantastic.

Thank you *//*
From all my old muses he is still my favorite and the most fun to play.

[30] I Discovered Grids (& had no internet for a week)

no subject

no subject

no subject

no subject

no subject

no subject