lucavi | CODE ✦ PLACARDS. (Reply)

✦ ENCYCLOPAEDIA

OUR PROTAGONIST, PHOSPHOPHYLLITE.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

LINK ✦ LINK ✦ LINK

I WANT TO ESCAPE
THE NIGHT.

LINK ✦ LINK ✦ LINK

Inspired by a encyclopaedic page for phosphophyllite I saw once. Encyclopaedia is:

✓ MOBILE RESPONSIVE
✓ FLEX
✓ COMMENT-FRIENDLY
✓ CUSTOMISABLE
✗ NOT TESTED FOR EMAIL

Note that when on mobile size, the image will be on top for both versions. If you would like to alter whether the image is on the left or right, find the flex-flow: property on the second <div> tag.

flex-flow:row wrap; means the image will be on the left. flex-flow:row-reverse wrap; will have the image be on the right. The image should ideally be 150px minimum in size for best results.

Happy coding!

DARK (IMAGE LEFT)

<raw-code><div style="display:flex; justify-content:center; padding:5px 0;">
<div style="display:flex; flex-flow:row wrap; justify-content:center; gap:21px; width:100%; max-width:550px; padding:28px; background-blend-mode:overlay; border-radius:8px; box-shadow:0 3px 3px rgba(0,0,0,0.3);
            font:normal 13px/1.25 Georgia, Garamond, serif;
            color:#ffffffe6;
            background:#333 url('BACKGROUNDIMG_URL') no-repeat center; background-size:cover;">

<div style="max-width:150px; align-self:center; padding:75px; border-radius:99rem; background:#333 url('ICON_IMG_IDEALLY_MINIMUM_150PX') no-repeat center; background-size:cover; box-shadow:0 0 3px #ffffffe6;"></div>

<div style="flex:250px; align-self:center;">
  <div style="padding:0 0 14px; font:600 21px/1 Georgia, sans-serif; text-align:center; text-transform:uppercase; letter-spacing:0.05rem; border-bottom:1px solid #ffffffe6;">
     YOUR CARD TITLE GOES HERE.
  </div>
  <span style="display:block; padding-top:14px;">
     WHATEVER DESCRIPTION YOU WANT GOES HERE. IF YOU WANT LINE BREAKS, USE <br /> TAGS.
  </span>
  <div style="display:flex; flex-flow:row wrap; justify-content:center; gap:10px; padding-top:14px; font-size:12px;">
    
    <a style="text-decoration:none; color:#ffffffe6;"
       href="LINKHERE">
       LINK</a> ✦
    <a style="text-decoration:none; color:#ffffffe6;"
       href="LINKHERE">
       LINK</a> ✦
    <a style="text-decoration:none; color:#ffffffe6;"
       href="LINKHERE">
       LINK</a>
  </div>
  </div>
</div>
</div></raw-code>

LIGHT (IMAGE RIGHT)

<raw-code><div style="display:flex; justify-content:center; padding:5px 0;">
<div style="display:flex; flex-flow:row-reverse wrap; justify-content:center; gap:21px;  width:100%; max-width:550px; padding:28px; background-blend-mode:overlay; border-radius:8px; box-shadow:0 3px 3px rgba(0,0,0,0.3);
            font:normal 13px/1.25 Georgia, Garamond, serif;
            color:#333333e6;
            background:#eee url('BACKGROUNDIMG_URL') no-repeat center; background-size:cover;">

<div style="max-width:150px; align-self:center; padding:75px; border-radius:99rem; background:#333 url('ICON_IMG_IDEALLY_MINIMUM_150PX') no-repeat center; background-size:cover; box-shadow:0 0 3px #ffffffe6;"></div>

<div style="flex:250px; align-self:center;">
  <div style="padding:0 0 14px; font:600 21px/1 Georgia, sans-serif; text-align:center; text-transform:uppercase; letter-spacing:0.05rem; border-bottom:1px solid #333333e6;">
     YOUR CARD TITLE GOES HERE.
  </div>
  <span style="display:block; padding-top:14px;">
     WHATEVER DESCRIPTION YOU WANT GOES HERE. IF YOU WANT LINE BREAKS, USE <br /> TAGS.
  </span>
  <div style="display:flex; flex-flow:row wrap; justify-content:center; gap:10px; padding-top:14px; font-size:12px;">
    
    <a style="text-decoration:none; color:#333333e6;"
       href="LINKHERE">
       LINK</a> ✦
    <a style="text-decoration:none; color:#333333e6;"
       href="LINKHERE">
       LINK</a> ✦
    <a style="text-decoration:none; color:#333333e6;"
       href="LINKHERE">
       LINK</a>
  </div>
  </div>
</div>
</div></raw-code>

✦ MUSEUM

TOMORROW, AND TOMORROW,
AND TOMORROW—

« Out, out, brief candle! Life's but a walking shadow, a poor player that struts and frets his hour upon the stage, and then is heard no more. It is a tale told by an idiot, full of sound and fury — signifying nothing. »

MARIO, THE IDEA VS
MARIO, THE MAN

« I believe it was Kant who said, "Experience without theory is blind, but theory without experience is mere intellectual play." Mario exhibits experience by crushing turts all day, but he exhibits theory by stating "Lets-a go!" Keep it up, baby! »

Inspired by those tiny, tiny fancy placards placed next to artifacts in historical museums and the like. Museum is:

✓ MOBILE RESPONSIVE
✓ COMMENT-FRIENDLY
✗ FLEX
✗ NOT TESTED FOR EMAIL

The image does not flex under certain screen sizes; it will always remain side-by-side. The image does stretch to match element height as text amount increases. However, as the sizing is set to cover & center, image may be cut off or distorted if the box gets long enough. Currently only comes in dark version.

Happy coding!

IMAGE ON LEFT

<raw-code><div style="display:flex; justify-content:center; padding:5px 0;">
<div style="display:flex; flex-flow:row nowrap; gap:9px; max-width:475px; width:100%; min-width:320px; padding:9px 18px 12px 9px; font:normal 13px/1.1 Georgia, Garamond, serif; color:#eeeeeee6; letter-spacing:0.02rem; border-radius:36px; border:2px outset goldenrod; background:#151515 url('https://img.freepik.com/free-photo/close-up-black-marble-textured-background_53876-63511.jpg') no-repeat center; background-size:cover; background-blend-mode:overlay;">

<div style="width:100px; border-radius:27px 6px 6px 27px; background:#333 url('IMAGE_URL_HERE') no-repeat center; background-size:cover;"></div>

<div style="flex:2;">
    <div style="padding:3px 0 6px; font:600 18px/1.1 Garamond, serif; text-transform:uppercase; border-bottom:2px solid darkgoldenrod;">
       CARD TITLE HERE.
    </div>
    <span style="display:block; padding-top:12px;">«
       Placard description text here. The « and » sandwiching this section provides the little arrow-shaped quotation marks. Use <br /> tags for line breaks.
    »</span>
  </div>
</div>
</div></raw-code>

IMAGE ON RIGHT

<raw-code><div style="display:flex; justify-content:center; padding:5px 0;">
<div style="display:flex; flex-flow:row-reverse nowrap; gap:9px; max-width:475px; width:100%; min-width:320px; padding:9px 9px 12px 18px; font:normal 13px/1.1 Georgia, Garamond, serif; color:#eeeeeee6; letter-spacing:0.02rem; border-radius:36px; border:2px outset goldenrod; background:#151515 url('https://img.freepik.com/free-photo/close-up-black-marble-textured-background_53876-63511.jpg') no-repeat center; background-size:cover; background-blend-mode:overlay;">

<div style="width:100px; border-radius:6px 27px 27px 6px; background:#333 url('IMG_URL_HERE') no-repeat center; background-size:cover;"></div>

<div style="flex:2;">
    <div style="padding:3px 0 6px; font:600 18px/1.1 Garamond, serif; text-transform:uppercase; border-bottom:2px solid darkgoldenrod;">
       CARD TITLE HERE.
    </div>
    <span style="display:block; padding-top:12px;">«
       Placard description text here. The « and » sandwiching this section provides the little arrow-shaped quotation marks. Use <br /> tags for line breaks.
    »</span>
  </div>
</div>
</div></raw-code>

CODE ✦ PLACARDS.