Responsive Info Gallery

[tesscodes]

The Woods

Never venture after dark

Pellentesque eget venenatis dolor, ut pulvinar orci. Aenean non neque ut justo bibendum congue. Nunc quis enim suscipit, pharetra justo sit amet, vulputate ligula. Mauris fermentum, felis eget lobortis venenatis, ex tortor bibendum massa, vel viverra erat orci posuere leo. Sed dignissim varius purus at volutpat. Morbi molestie dapibus ante sit amet placerat. Aenean pulvinar posuere consectetur. Sed vel mauris placerat, consectetur lacus quis, consequat nibh. READ MORE

Toxique

Wine, Spirits & More

Vivamus commodo et nisi in placerat. Cras ut ex eget lorem mollis efficitur vel egestas leo. Aenean dictum auctor bibendum. Vestibulum id leo eleifend lorem interdum vehicula. Vivamus ullamcorper leo vitae arcu interdum, sed finibus velit eleifend. Maecenas dictum nibh ac aliquet tempor. Nulla velit elit, sollicitudin blandit neque a, mollis vulputate sapien. READ MORE

Hallow Prep

The Writing's on the Wall

Integer vel sem quam. Phasellus leo urna, bibendum quis molestie at, imperdiet eget turpis. Aliquam rhoncus eget elit ut condimentum. Praesent convallis, lorem ut porttitor tincidunt, sem mi rhoncus libero, eu ornare risus urna et purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin ut dui sapien. Nulla tempus bibendum turpis, nec accumsan nisi. Curabitur molestie efficitur lorem hendrerit egestas. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. READ MORE

Bleak Cemetery

The End of the Line

Sed eleifend sed sapien nec blandit. Vivamus dui urna, sagittis vitae pharetra quis, sodales faucibus tellus. Proin aliquam efficitur tortor in luctus. Donec non ultricies mauris, sit amet consectetur lectus. Phasellus aliquet enim turpis, vitae dapibus lorem molestie ut. Cras erat neque, vehicula et mattis eget, laoreet sit amet leo. Sed placerat feugiat magna. Quisque volutpat risus vel placerat eleifend. Donec aliquam tortor urna, quis cursus justo vulputate ac. Phasellus ut elit sem. READ MORE

216 Grimm Rd

Tarot, Tea Leaves, & Palmistry

Curabitur id lobortis risus, sit amet efficitur risus. Sed egestas efficitur enim. Fusce elementum nisi ac magna eleifend consectetur. Morbi eros nibh, dapibus id hendrerit et, aliquet id enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et gravida odio. Ut id dignissim ex, nec imperdiet massa. Donec consequat ligula ac dictum tempor. Aenean ornare ultrices diam sed fringilla. Proin finibus imperdiet ligula, ut facilisis justo volutpat id. READ MORE

Bathory Hotel

Ask about night prices

Etiam vulputate arcu ipsum, vel porttitor ex luctus eu. Curabitur vulputate mauris sed pellentesque finibus. Maecenas nec sapien sodales, mollis tellus sed, commodo enim. Proin placerat, neque ac finibus dapibus, mauris nisl rutrum orci, vitae efficitur tellus arcu non enim. Pellentesque faucibus tempus sem eget faucibus. READ MORE

CODE BY TESSISAMESS

Information

Hey guys! Today we've got a fun, modern responsive gallery code that can be used for... pretty much anything. Character rosters, cast lists, locations, species—just fill it in and go go go! This would be great for games that want all of their image-based info pages to feel cohesive (bonus points: there isn't a whole lot of fiddling that needs to be done, so if you have a lot of pages to fill out this should be a time saver.)

This code will narrow and/or collapse itself into less columns for smaller screens and you won't have to do a thing, hooray! Enjoy! ♥

The Coding

<lj-raw><div style="margin:0 auto;max-width:980px;font-family:century gothic,arial,sans-serif;font-size:12px;color:#000;text-align:justify;line-height:1.7;-webkit-column-count:auto;-moz-column-count:auto;column-count:auto;-webkit-column-gap:30px;-moz-column-gap:30px;column-gap:30px;-webkit-column-width:300px;-moz-column-width:300px;column-width:300px;"> <div style="border:1px solid rgba(0,0,0,0.08);border-radius:2px/5px;margin-bottom:30px;background:#fafafa;-webkit-column-break-inside:avoid;page-break-inside:avoid;break-inside:avoid;"> <div style="padding:20px;text-align:center;letter-spacing:2px;"> <div style="font-size:22px;">Title</div> <span style="text-transform:uppercase;font-size:10px;">Subtitle</span> </div> <img src="IMGHERE" style="width:100%;"> <div style="padding:25px;"> BLURBHERE <a href="LINKURL" style="text-decoration:none;display:block;margin:15px 22% 0 22%;text-align:center;color:#000;font-weight:bold;padding:4px 0;background:#fff;border:1px solid rgba(0,0,0,0.1);border-radius:20px;font-size:10px;letter-spacing:1px;">READ MORE</a> </div> </div> </div><a href="http://tessisamess.insanejournal.com/" style="display:block;text-align:right;margin:0 auto;max-width:960px;font-family:century gothic,arial,sans-serif;font-size:9px;letter-spacing:2px;margin-top:20px;color:#999;text-decoration:none;">CODE BY TESSISAMESS</a></lj-raw>

Installation Guide

Paste into an entry and fill in the following!

Title - Block title
Subtitle - Block byline
IMGHERE - Block image; any size is fine
BLURBHERE - Block info
LINKURL - 'Read More' link (you can delete this link if unneeded; it won't break anything)

Editing Guide

Paste the coding into Notepad or similar and bring up Replace All (usually Ctrl+H) to replace values quickly and easily!

FONTS

century gothic - Overall font; please note: this is technically not a websafe font, which is why I never use it, but I love it and missed it so much that I've made a few codes using it. If your font looks different than my image preview then your computer does not have this font. Less than 88% of OSes have Century Gothic installed, so if this bothers you you'll want to change this to Helvetica (or whatever websafe font you like!)

COLORS

#fff

'Read More' link background

#fafafa

Each block background

#000

Font color

0,0,0

Each block border; 'Read More' link border

Terms of Use

♡ Do not remove credit.
♡ Do not redistribute my codes in part or in whole (posting a copy for players to use in your game is fine with a link to original post.)
♡ If you break something during editing, please feel free to drop me a comment and I'll help as best I can!
♡ I love seeing edits! This isn't a rule, but if you have a cool edit of one of my codes I'd love to see it!