dreamcodes | storylines: gold

These were designed for people's "wanted storylines" entries, but you could just as easily tweak them for other purposes (CR charts, post headers?)

variant 1: plain

TITLE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mi mi, sodales nec placerat in, maximus tempor ex. Duis id tortor fermentum, congue tellus et, dignissim diam. Nunc fringilla laoreet euismod. Curabitur lobortis porta massa quis condimentum. Nam nec ante sapien. Aliquam arcu libero, hendrerit in sollicitudin at, euismod sed massa. Nunc id leo pulvinar, feugiat diam a, ornare nibh.

pb suggestions: NAME, NAME, NAME, NAME

copy & paste

<div style="display: grid; grid-template-columns: 20% auto 20%; grid-gap: 15px; width: 700px; color: #640; margin: auto; font-family: trebuchet ms, sans-serif; font-size: 11pt;">
	<div style="grid-column: 1 / 4; text-align: center; background: #fec; background: linear-gradient(135deg,#db6,#fec,#db6); color: #530; padding: 1em; border-radius: 12px; font-size: 120%; font-weight: bold; letter-spacing: 0.2em;"> TITLE </div>
	<div style="text-align: center;"><img src="ICONURL1" style="width: 100px; margin: 10px; border-radius: 12px;" title="NAME"></div>
	<div style="text-align: justify; padding: 10px 0px; line-height: 1.3em;">
		DESCRIPTION/SUMMARY
		<p style="text-align: center"><span style="font-weight: bold; text-transform: uppercase; color: #cb9; letter-spacing: 0.1em; font-size: 80%;">pb suggestions: NAME, NAME, NAME, NAME</span></div>
	<div style="text-align: center;"><img src="ICONURL2" style="width: 45px; margin: 5px; border-radius: 6px;" title="NAME"><img src="ICONURL3" style="width: 45px; margin: 5px; border-radius: 6px;" title="NAME"><img src="ICONURL4" style="width: 45px; margin: 5px; border-radius: 6px;" title="NAME"><img src="ICONURL5" style="width: 45px; margin: 5px; border-radius: 6px;" title="NAME"></div>
</div>

variant 2: boxed in

option one, option two

TITLE

Sed malesuada augue ligula, ut convallis tortor pellentesque ac. Sed sagittis, diam id mollis blandit, lectus mi pulvinar lacus, quis mattis tellus nunc vel erat. Aenean dictum sed enim in imperdiet. Fusce elementum sapien sit amet mi lobortis ultrices. Integer sit amet vehicula nulla. Nulla venenatis auctor risus vel mollis. Sed sagittis interdum tellus sit amet rhoncus.

option three, option four

copy & paste

<div style="display: grid; grid-template-columns: 20% auto 20%; grid-gap: 15px; width: 700px; color: #640; margin: auto; font-family: trebuchet ms, sans-serif; font-size: 11pt;">
	<div style="text-align: center;padding: 10px;color:#cb9;font-size: 80%;font-style:italic;text-transform:uppercase;"><img src="ICONURL1" style="width: 100px;margin-bottom: 1em; border-radius: 12px;" title="NAME"> <br>CAPTION1</div>
	<div style="text-align: justify; font-size: 1em; padding: 10px 0px; line-height: 1.3em;">
		<p style="text-align: center; background: #fec; background: linear-gradient(135deg,#db6,#fec,#db6); color: #530; padding: 1em; margin-top: 0; font-size: 120%; font-weight: bold; letter-spacing: 0.2em; border-radius: 12px;"> TITLE </p>
		DESCRIPTION/SUMMARY <p></div>
	<div style="text-align: center;padding: 10px;color:#cb9;font-size: 80%;font-style:italic;text-transform:uppercase;"><img src="ICONURL2" style="width: 100px;margin-bottom: 1em; border-radius: 12px;" title="NAME">  <br>CAPTION2</div>
</div>

variant 3: sideline

TITLE

pb suggestions: NAME, NAME, NAME, NAME

copy & paste

find & replace

text: #640 • title: #db6, #fec, #db6 • title text: #530 • accent text: #cb9