GIFT GIVING HTML

[baisemain]

UPDATED 15/10/2022: Modernized this code so now the images scale properly on mobile. These can also be posted in comments and the images will still display!

Recipient,

Blah blah blah.

Salutation,
Gift Giver

[Gift description!]

<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:6px;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;border:1px solid #CCC;border-radius:6px;padding:20px;text-align:justify;font-size:11px;"> <!-- START MESSAGE --> </lj-raw>Recipient,<blockquote>Blah blah blah.</blockquote>Salutation, Gift Giver <small><i>[Gift description!]</i></small> <!-- END MESSAGE --></div></div></div></center>

Recipient,

Blah blah blah.

Salutation,
Gift Giver

[Gift description!]

<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:6px;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;border:1px solid #CCC;border-radius:6px;padding:20px;text-align:justify;font-size:11px;"> <!-- START MESSAGE --> </lj-raw>Recipient,<blockquote>Blah blah blah.</blockquote>Salutation, Gift Giver <small><i>[Gift description!]</i></small> <!-- END MESSAGE --></div></div></div></center>

Recipient,

Blah blah blah.

Salutation,
Gift Giver

[Gift description!]

<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:6px;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;border:1px solid #CCC;border-radius:6px;padding:20px;text-align:justify;font-size:11px;"> <!-- START MESSAGE --> </lj-raw>Recipient,<blockquote>Blah blah blah.</blockquote>Salutation, Gift Giver <small><i>[Gift description!]</i></small> <!-- END MESSAGE --></div></div></div></center>