CODE: Gift Giving Post

[baisemain]

Happy Birthday Micah

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor velit purus, vitae luctus erat porta quis. Proin id consectetur justo, sit amet vulputate odio. Nulla quis sollicitudin augue.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur lacinia,eros eu suscipit elementum, nibh nulla facilisis diam, et pellentesque mauris enim vel neque.

CODE TO POST GIFTS

4 IMAGES

<lj-raw><center><div style="width:520px;max-width:100%;box-sizing:border-box;padding:10px;font-family:verdana,helvetica,arial,sans serif;font-size:11px;"><div style="display:flex;flex-direction:column;gap:5px;"><div style="display:grid;grid-template:1fr 1fr/1fr 1fr;gap:5px;border-radius:4px;overflow:hidden;"> <!-- IMAGE 1 --> <div style="width:100%;aspect-ratio:1/1;background:#DDD url('IMG_URL') center;background-size:cover;"></div> <!-- IMAGE 2 --> <div style="width:100%;aspect-ratio:1/1;background:#DDD url('IMG_URL') center;background-size:cover;"></div> <!-- IMAGE 3 --> <div style="width:100%;aspect-ratio:1/1;background:#DDD url('IMG_URL') center;background-size:cover;"></div> <!-- IMAGE 4 --> <div style="width:100%;aspect-ratio:1/1;background:#DDD url('IMG_URL') center;background-size:cover;"></div> </div><div style="background:#FFF;color:#111;border:1px solid #CCC;border-radius:4px;padding:20px;text-align:justify;font-size:11px;"> <!-- START MESSAGE --> </lj-raw>Gift description. Gift description. <lj-raw><blockquote style="padding:0.5rem 1rem;"> </lj-raw>Nice blockquote for a message. </blockquote><!-- END MESSAGE --></div></div></div></center>

2 IMAGES

<lj-raw><center><div style="width:520px;max-width:100%;box-sizing:border-box;padding:10px;font-family:verdana,helvetica,arial,sans serif;font-size:11px;"><div style="display:flex;flex-direction:column;gap:5px;"><div style="display:grid;grid-template:1fr/1fr 1fr;gap:5px;border-radius:4px;overflow:hidden;"> <!-- IMAGE 1 --> <div style="width:100%;aspect-ratio:1/1;background:#DDD url('IMG_URL') center;background-size:cover;"></div> <!-- IMAGE 2 --> <div style="width:100%;aspect-ratio:1/1;background:#DDD url('IMG_URL') center;background-size:cover;"></div> </div> <div style="background:#FFF;color:#111;border:1px solid #CCC;border-radius:4px;padding:20px;text-align:justify;font-size:11px;"> <!-- START MESSAGE --> </lj-raw>Gift description. Gift description. <lj-raw><blockquote style="padding:0.5rem 1rem;"> </lj-raw>Nice blockquote for a message. </blockquote><!-- END MESSAGE --></div></div></div></center>

1 IMAGE

<lj-raw><center><div style="width:520px;max-width:100%;box-sizing:border-box;padding:10px;font-family:verdana,helvetica,arial,sans serif;font-size:11px;"><div style="display:flex;flex-direction:column;gap:5px;"><div style="border-radius:4px;overflow:hidden;"> <!-- IMAGE --> <div style="width:100%;aspect-ratio:3/2;background:#DDD url('IMG_URL') center;background-size:cover;"></div> </div> <div style="background:#FFF;color:#111;border:1px solid #CCC;border-radius:4px;padding:20px;text-align:justify;font-size:11px;"> <!-- START MESSAGE --> </lj-raw>Gift description. Gift description. <lj-raw><blockquote style="padding:0.5rem 1rem;"> </lj-raw>Nice blockquote for a message. </blockquote><!-- END MESSAGE --></div></div></div></center>

NO IMAGES

<lj-raw><center><div style="width:520px;max-width:100%;box-sizing:border-box;padding:10px;font-family:verdana,helvetica,arial,sans serif;font-size:11px;"><div style="display:flex;flex-direction:column;gap:5px;"><div style="background:#FFF;color:#111;border:1px solid #CCC;border-radius:4px;padding:20px;text-align:justify;font-size:11px;"> <!-- START MESSAGE --> </lj-raw>Gift description. Gift description. <lj-raw><blockquote style="padding:0.5rem 1rem;"> </lj-raw>Nice blockquote for a message. </blockquote><!-- END MESSAGE --></div></div></div></center>

CODE

The idea for a mass gifting post came from thisismanx: a single post for everyone to submit presents for a character's birthday, with copy & paste gift codes. This can obviously be edited for other gifting occasions too (like Christmas), or maybe you just like the gift box and want to use it for something else.

This is compatible with Insanejournal. The comment codes will stop working if Dreamwidth ever decides to disable aspect-ratio in comments so let's pray they never do 😥

HERE'S THE CODE: <lj-raw><div style="width:540px;max-width:100%;margin:0 auto;padding:20px;box-sizing:border-box;font-family:verdana,helvetica,arial,sans serif;font-size:11px;"> <!-- START GIFT BOX --> <div style="width:100%;height:300px;background:#1D3557 url('https://i.imgur.com/mErzsil.png');margin:20px auto;display:grid;grid-template:2fr 50px 1fr / 1fr 50px 3fr;border-radius:4px;box-shadow:0px 0px 5px rgb(0 0 0 / 20%),inset 0 0 10px rgb(0 0 0 / 20%);"> <div style="grid-area:2/3/2/3;filter:drop-shadow(0 0 5px rgba(0 0 0 / 20%));height:80px;max-width:100%;margin-top:-110px;margin-left:-25px;transform:rotate(-25deg);"><div style="display:grid;grid-template-columns:30px 1fr 50px;"><div style="clip-path:polygon(100% 0%,100% 100%,0% 50%);background-image:linear-gradient(90deg,#A8DADC,#F1FAEE);margin-right:-1px;padding-bottom:80px;"></div> <div style="display:flex;align-items:center;justify-content:center;background:#F1FAEE;margin-right:-1px;color:#1d3557;padding:20px 0;font-size:22px;font-family:georgia,serif;font-style:italic;font-variant:small-caps;text-align:center;line-height:1;text-shadow:1px 1px 0 rgba(0 0 0 / 20%);"> Happy Birthday RECIPIENT </div><div style="clip-path:polygon(100% 0%,0 50%,100% 100%,0 100%,0 0);background-image:linear-gradient(90deg,#F1FAEE,#A8DADC);padding-bottom:80px;"></div></div></div> <div style="grid-area:3/1/2/4;background:linear-gradient(90deg,#457B9D,#A8DADC,#457B9D);box-shadow:0px 0px 5px rgb(0 0 0 / 20%);margin:0 -1px;z-index:1;"></div> <div style="grid-area:1/2/4/2;background:linear-gradient(0deg,#457B9D,#A8DADC,#457B9D);box-shadow:0px 0px 5px rgb(0 0 0 / 20%);margin:-1px 0;z-index:1;"></div> <!-- START GIFT IMAGE --> <div style="grid-area:2/2/3/2;max-width:none;box-shadow:0px 0px 5px rgb(0 0 0 / 20%);margin:-35px;padding:10px;background:#F1FAEE;border-radius:50%;z-index:1;"><div style="height:100px;width:100px;background:#457B9D url('GIFT_ICON_IMG_URL') center;background-size:cover;border-radius:50%;"></div></div> <!-- END GIFT IMAGE --> </div> <!-- END GIFT BOX --> <center><lj-cut text="HAPPY BIRTHDAY"></center> <!-- START GIFT TEXT --> <div style="background:#FFF;color:#111;border:1px solid #CCC;border-radius:4px;margin-bottom:20px;padding:20px;text-align:justify;"></lj-raw>GIFT_TEXT_HERE <lj-raw></div> <!-- END GIFT TEXT --> <!-- START GIFT CODES --> <lj-raw><div style="margin-bottom:5px;border:1px solid #CCC;border-radius:4px;text-align:justify;"><details style="background:#EEE"> <summary style="padding:10px;background:#DDD;color:#666;text-shadow:1px 1px #FFF;cursor:pointer"><b>CODE TO POST GIFTS</b></summary> <div style="padding:20px"></lj-raw> <div style="display:grid;grid-template:1fr 1fr/1fr 1fr;gap:10px;"> <div><div style="text-align:center">4 IMAGES</div> <textarea style="height:3rem;width:100%;font-size:10px"><lj-raw><center><div style="width:520px;max-width:100%;box-sizing:border-box;padding:10px;font-family:verdana,helvetica,arial,sans serif;font-size:11px;"><div style="display:flex;flex-direction:column;gap:5px;"><div style="display:grid;grid-template:1fr 1fr/1fr 1fr;gap:5px;border-radius:4px;overflow:hidden;"> <!-- IMAGE 1 --> <div style="width:100%;aspect-ratio:1/1;background:#DDD url('IMG_URL') center;background-size:cover;"></div> <!-- IMAGE 2 --> <div style="width:100%;aspect-ratio:1/1;background:#DDD url('IMG_URL') center;background-size:cover;"></div> <!-- IMAGE 3 --> <div style="width:100%;aspect-ratio:1/1;background:#DDD url('IMG_URL') center;background-size:cover;"></div> <!-- IMAGE 4 --> <div style="width:100%;aspect-ratio:1/1;background:#DDD url('IMG_URL') center;background-size:cover;"></div> </div><div style="background:#FFF;color:#111;border:1px solid #CCC;border-radius:4px;padding:20px;text-align:justify;font-size:11px;"> <!-- START MESSAGE --> </lj-raw>Gift description. Gift description. <lj-raw><blockquote style="padding:0.5rem 1rem;"> </lj-raw>Nice blockquote for a message. </blockquote><!-- END MESSAGE --></div></div></div></center></textarea> </div> <div><div style="text-align:center">2 IMAGES</div> <textarea style="height:3rem;width:100%;font-size:10px"><lj-raw><center><div style="width:520px;max-width:100%;box-sizing:border-box;padding:10px;font-family:verdana,helvetica,arial,sans serif;font-size:11px;"><div style="display:flex;flex-direction:column;gap:5px;"><div style="display:grid;grid-template:1fr/1fr 1fr;gap:5px;border-radius:4px;overflow:hidden;"> <!-- IMAGE 1 --> <div style="width:100%;aspect-ratio:1/1;background:#DDD url('IMG_URL') center;background-size:cover;"></div> <!-- IMAGE 2 --> <div style="width:100%;aspect-ratio:1/1;background:#DDD url('IMG_URL') center;background-size:cover;"></div> </div> <div style="background:#FFF;color:#111;border:1px solid #CCC;border-radius:4px;padding:20px;text-align:justify;font-size:11px;"> <!-- START MESSAGE --> </lj-raw>Gift description. Gift description. <lj-raw><blockquote style="padding:0.5rem 1rem;"> </lj-raw>Nice blockquote for a message. </blockquote><!-- END MESSAGE --></div></div></div></center></textarea> </div> <div><div style="text-align:center">1 IMAGE</div> <textarea style="height:3rem;width:100%;font-size:10px"><lj-raw><center><div style="width:520px;max-width:100%;box-sizing:border-box;padding:10px;font-family:verdana,helvetica,arial,sans serif;font-size:11px;"><div style="display:flex;flex-direction:column;gap:5px;"><div style="border-radius:4px;overflow:hidden;"> <!-- IMAGE --> <div style="width:100%;aspect-ratio:3/2;background:#DDD url('IMG_URL') center;background-size:cover;"></div> </div> <div style="background:#FFF;color:#111;border:1px solid #CCC;border-radius:4px;padding:20px;text-align:justify;font-size:11px;"> <!-- START MESSAGE --> </lj-raw>Gift description. Gift description. <lj-raw><blockquote style="padding:0.5rem 1rem;"> </lj-raw>Nice blockquote for a message. </blockquote><!-- END MESSAGE --></div></div></div></center></textarea> </div> <div><div style="text-align:center">NO IMAGES</div> <textarea style="height:3rem;width:100%;font-size:10px"><lj-raw><center><div style="width:520px;max-width:100%;box-sizing:border-box;padding:10px;font-family:verdana,helvetica,arial,sans serif;font-size:11px;"><div style="display:flex;flex-direction:column;gap:5px;"><div style="background:#FFF;color:#111;border:1px solid #CCC;border-radius:4px;padding:20px;text-align:justify;font-size:11px;"> <!-- START MESSAGE --> </lj-raw>Gift description. Gift description. <lj-raw><blockquote style="padding:0.5rem 1rem;"> </lj-raw>Nice blockquote for a message. </blockquote><!-- END MESSAGE --></div></div></div></center></textarea> </div> </div><lj-raw></div></details></div> <!-- END GIFT CODES --> <!-- START CREDIT --> <div style="text-align:right;font-size:8px;"><a href="https://baisemain.dreamwidth.org/" style="color:#DDD;text-decoration:none;">CODE</a></div> <!-- END CREDIT --> </lj-cut></div></lj-raw><!-- END CONTAINER -->
GIFT BOX:

• Four main colours are used for the gift box:
  • #1D3557
    is the "box" and the label text.
  • #457B9D
    is the darker part of the ribbon gradient and also the background of the icon, if no image is specified.
  • #A8DADC
    is the lighter part of the ribbon gradient and also the tint at the ends of the label.
  • #F1FAEE
    is the label and the border around the icon.
• The gift box uses a transparent background image from Transparent Textures. If you want to remove/change the pattern, find and replace
  https://i.imgur.com/mErzsil.png
  .
• To change the icon image, find
  GIFT_ICON_IMG_URL
  and replace with your chosen image URL.

ELEMENTS:

• To remove the gift box, find the line starting with
  <!-- START GIFT BOX -->
  and delete everything until
  <!-- END GIFT BOX -->
  .
• To remove the text box, find the line starting with
  <!-- START GIFT TEXT -->
  and delete everything until
  <!-- END GIFT TEXT -->
  .
• To remove the gift codes, find the line starting with
  <!-- START GIFT CODES -->
  and delete everything until
  <!-- END GIFT CODES -->
  .

If you have any questions, please comment below and I'll try to help. :)