Three Memo / Notecards

[thisismanx]

Header Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac eros commodo, efficitur nunc bibendum, sodales nunc. Aenean laoreet magna viverra fermentum tempor. Donec vestibulum gravida aliquam. Nulla facilisi. Proin porta, arcu consectetur efficitur posuere, elit turpis fermentum quam, at interdum lorem ex ut nisl. Vestibulum tincidunt pretium turpis et lacinia. Sed elementum urna lacus. Nullam congue ultrices neque, et faucibus libero elementum non. Donec dapibus turpis nec lectus sodales sagittis. Fusce in orci eget erat aliquet dictum at eget tortor. Sed sit amet elit et velit commodo pharetra ac in dolor.

Here's a trio of notecards that are intentionally simple on styling. They can be used as-is or go wild with colors and backgrounds, whatever. #eee is the body background while #ccc is the header and footer background. (If you want to add a pattern to the body background, something subtle from Transparent Textures would likely work well.)

I was thinking of these as potential gift notes when I made them, so the idea behind the second is to put images inside the circles and link to the full size image where it says 'text', but the text can also just as easily be deleted. The final one was designed to take advantage of the digital scrapbooking banners on tentacrafts. (I've somehow only just learned of tentacool's resources.)

All of these should theoretically work with the gift giving code card section, though you may want to adjust the max-width code to 600px.

Announcement

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac eros commodo, efficitur nunc bibendum, sodales nunc. Aenean laoreet magna viverra fermentum tempor. Donec vestibulum gravida aliquam. Nulla facilisi. Proin porta, arcu consectetur efficitur posuere, elit turpis fermentum quam, at interdum lorem ex ut nisl. Vestibulum tincidunt pretium turpis et lacinia. Sed elementum urna lacus. Nullam congue ultrices neque, et faucibus libero elementum non. Donec dapibus turpis nec lectus sodales sagittis. Fusce in orci eget erat aliquet dictum at eget tortor. Sed sit amet elit et velit commodo pharetra ac in dolor.

<lj-raw><div style="margin:0 auto; max-width:500px; background:#eee url();padding:0px;display:grid;grid;grid-template-columns:1fr;grid-template-rows:25px 1fr 25px;grid-template-areas:'header' 'body' 'footer'; grid-gap:0px;"> <div style="grid-area:header;background:#ccc url();"></div> <div style="grid-area:body;padding:50px;text-align:justify;line-height:1.5;color:#000;"></lj-raw><h1 style="padding-top:0px;margin-top:0px;color:#000;">Header Text</h1>Body Text<lj-raw></div> <div style="grid-area:footer;background:#ccc url();"></div> </div></lj-raw>

text

text

text

Announcement

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac eros commodo, efficitur nunc bibendum, sodales nunc. Aenean laoreet magna viverra fermentum tempor. Donec vestibulum gravida aliquam. Nulla facilisi. Proin porta, arcu consectetur efficitur posuere, elit turpis fermentum quam, at interdum lorem ex ut nisl. Vestibulum tincidunt pretium turpis et lacinia. Sed elementum urna lacus. Nullam congue ultrices neque, et faucibus libero elementum non. Donec dapibus turpis nec lectus sodales sagittis. Fusce in orci eget erat aliquet dictum at eget tortor. Sed sit amet elit et velit commodo pharetra ac in dolor.

<lj-raw><div style="margin:0 auto; max-width:500px; background:#eee url();padding:0px;display:grid;grid;grid-template-columns:1fr;grid-template-rows:25px 160px 1fr 25px;grid-template-areas:'header' 'logo' 'body' 'footer'; grid-gap:0px;"> <div style="grid-area:header;background:#ccc url();"></div> <div style="grid-area:logo;margin:auto;display:flex;justify-content:center;flex-wrap:wrap;text-align:center;"><div style="height:100px;width:100px;border:solid #ccc 10px;border-radius:100px;background:#999 url(IMG1)center;background-size:cover;display:flex;align-items:center;justify-content:center;"><a href="" style="color:#fff;text-decoration:none;font-weight:bold;text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5);">text</a></div><div style="height:100px;width:100px;margin:0px 10px;border:solid #ccc 10px;border-radius:100px;background:#999 url(IMG2)center;background-size:cover;display:flex;align-items:center;justify-content:center;"><a href="" style="color:#fff;text-decoration:none;font-weight:bold;text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5);">text</a></div><div style="height:100px;width:100px;border:solid #ccc 10px;border-radius:100px;background:#999 url(IMG3)center;background-size:cover;display:flex;align-items:center;justify-content:center;"><a href="" style="color:#fff;text-decoration:none;font-weight:bold;text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5);">text</a></div></div> <div style="grid-area:body;padding:0px 50px 30px 50px;text-align:justify;line-height:1.5;color:#000;"></lj-raw><h1 style="padding-top:0px;margin-top:0px;color:#000;">Header Text</h1>Body Text<lj-raw></div> <div style="grid-area:footer;background:#ccc url();"></div> </div></lj-raw>

Announcement

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac eros commodo, efficitur nunc bibendum, sodales nunc. Aenean laoreet magna viverra fermentum tempor. Donec vestibulum gravida aliquam. Nulla facilisi. Proin porta, arcu consectetur efficitur posuere, elit turpis fermentum quam, at interdum lorem ex ut nisl. Vestibulum tincidunt pretium turpis et lacinia. Sed elementum urna lacus. Nullam congue ultrices neque, et faucibus libero elementum non. Donec dapibus turpis nec lectus sodales sagittis. Fusce in orci eget erat aliquet dictum at eget tortor. Sed sit amet elit et velit commodo pharetra ac in dolor.

<lj-raw><div style="margin:0 auto; max-width:500px; background:#eee url();padding:0px;display:grid;grid;grid-template-columns:1fr;grid-template-rows:25px 150px 1fr 25px;grid-template-areas:'header' 'banner' 'body' 'footer'; grid-gap:0px;"> <div style="grid-area:header;background:#ccc url();"></div> <div style="grid-area:banner;padding:0px;margin:auto;"><img src="https://66.media.tumblr.com/d6f841429cd4b6f29686796ac25d89e7/tumblr_pqunkoY8781wqnl3po3_r1_1280.png" style="max-width:500px;"></div> <div style="grid-area:body;padding:0px 50px 50px 50px;text-align:justify;line-height:1.5;color:#000;"></lj-raw><h1 style="padding-top:0px;margin-top:0px;color:#000;">Header Text</h1>Body Text<lj-raw></div> <div style="grid-area:footer;background:#ccc url();"></div> </div></lj-raw>

Comments

[ollinsong]

:o These are great! Thank you for sharing your fancy code~ ♥

[thisismanx]

♥ ♥ ♥ thx uuuuu