CODE: MEET THE CREW (CR CHART)

[onetouchdonnie]

❝ i've never seen such a sorry bunch of has-beens and hanger-ons. ❞

The second code I have for theme of IDW's first continuity of the Transformers! A strangely specific theme, I know, but you've got to trust me on this here, please.

The rest of the codes I've made - another master navigation and a character roster - will be released on January. This should give me enough time to keep being on top of things and continue making codes ahead of time, so I can continue posting timely every Saturday!

I hope this code is of use to you guys. I had a lot of fun making this one. :>!!!

TITLE OF CHART

CHARACTER NAME
( SPECIAL TITLE HERE. )

▮▮▮▮▮▯▯▯▯▯ Lorem ipsum dolor sit amet, consec adipiscing elit. Aenean dictum volutpat ipsum non rutrum. Etiam max pretium urna.

CHARACTER NAME
( SPECIAL TITLE HERE. )

▮▮▮▮▮▯▯▯▯▯ Lorem ipsum dolor sit amet, consec adipiscing elit. Aenean dictum volutpat ipsum non rutrum. Etiam max pretium urna.

CHARACTER NAME
( SPECIAL TITLE HERE. )

▮▮▮▮▮▯▯▯▯▯ Lorem ipsum dolor sit amet, consec adipiscing elit. Aenean dictum volutpat ipsum non rutrum. Etiam max pretium urna.

CHARACTER NAME
( SPECIAL TITLE HERE. )

▮▮▮▮▮▯▯▯▯▯ Lorem ipsum dolor sit amet, consec adipiscing elit. Aenean dictum volutpat ipsum non rutrum. Etiam max pretium urna.

coding credit: proverbially

GET THE CODE HERE:

<raw-code><br/> <!-- START THE CODE --> <div style="width: 900px; font-family: verdana; margin: auto; background-image: linear-gradient(to bottom, rgba(12,0,0,0.93), rgba(155,0,0,0.93)), url('https://i.imgur.com/wS1ROJa.jpg'); background-repeat: repeat; padding: 15px;"> <!-- TITLE START --> <div style="font-size: 30px; color: #fbfbfb; font-weight: bold; line-spacing: 2px; border-bottom: 2px solid #df0000; padding-bottom: 2px; padding-left: 5px; margin-bottom: 10px;">TITLE OF CHART</div> <!-- TITLE END --> <!-- CHARACTER ROW START --> <div style="width: 850px; margin: auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;"> <!-- CHARACTER ADD START --> <div style="width:180px; height: 300px; background-color: rgba(30,30,30,0.5); color: #fbfbfb; display: center; text-align: justify; padding: 10px; margin-right: 5px; margin-bottom: 5px;"> <img src="https://i.imgur.com/2c50Dtb.png" style="width: 100px; height: 100px; background-image: url('ICON_IMAGELINK'); background-size: 100px 100px; display: block; margin: auto; border: 8px solid transparent; border-image: -moz-linear-gradient(top, #a80009 0%, #42000a 100%) 1 stretch; border-image: -webkit-linear-gradient(top, #a80009 0%, #42000a 100%) 1 stretch; border-image: linear-gradient(top, #a80009 0%, #42000a 100%) 1 stretch; outline: 2px solid #1e1e1e; outline-offset: -5px; margin-top: 8px;"> <div style="font-family: verdana; font-weight: bold; text-align: center; margin-top: 10px;"> <a href="LINK_HERE" style="text-decoration: none; color: #fbfbfb; letter-spacing: 1px;">CHARACTER NAME</a><br/> <span style="font-size: 10px; color: #fbfbfb; font-style: italic; letter-spacing: 1px;">( SPECIAL TITLE HERE. )</span></div> <center><span style="color: red; font-size: 25px;">▮▮▮▮▮</span><span style="color: red; font-size: 25px;">▯▯▯▯▯</span></center> Lorem ipsum dolor sit amet, consec adipiscing elit. Aenean dictum volutpat ipsum non rutrum. Etiam max pretium urna. </div> <!-- CHARACTER ADD END --> <!-- CHARACTER ADD START --> <div style="width:180px; height: 300px; background-color: rgba(30,30,30,0.5); color: #fbfbfb; display: center; text-align: justify; padding: 10px; margin-right: 5px; margin-bottom: 5px;"> <img src="https://i.imgur.com/2c50Dtb.png" style="width: 100px; height: 100px; background-image: url('ICON_IMAGELINK'); background-size: 100px 100px; display: block; margin: auto; border: 8px solid transparent; border-image: -moz-linear-gradient(top, #a80009 0%, #42000a 100%) 1 stretch; border-image: -webkit-linear-gradient(top, #a80009 0%, #42000a 100%) 1 stretch; border-image: linear-gradient(top, #a80009 0%, #42000a 100%) 1 stretch; outline: 2px solid #1e1e1e; outline-offset: -5px; margin-top: 8px;"> <div style="font-family: verdana; font-weight: bold; text-align: center; margin-top: 10px;"> <a href="LINK_HERE" style="text-decoration: none; color: #fbfbfb; letter-spacing: 1px;">CHARACTER NAME</a><br/> <span style="font-size: 10px; color: #fbfbfb; font-style: italic; letter-spacing: 1px;">( SPECIAL TITLE HERE. )</span></div> <center><span style="color: red; font-size: 25px;">▮▮▮▮▮</span><span style="color: red; font-size: 25px;">▯▯▯▯▯</span></center> Lorem ipsum dolor sit amet, consec adipiscing elit. Aenean dictum volutpat ipsum non rutrum. Etiam max pretium urna. </div> <!-- CHARACTER ADD END --> <!-- CHARACTER ADD START --> <div style="width:180px; height: 300px; background-color: rgba(30,30,30,0.5); color: #fbfbfb; display: center; text-align: justify; padding: 10px; margin-right: 5px; margin-bottom: 5px;"> <img src="https://i.imgur.com/2c50Dtb.png" style="width: 100px; height: 100px; background-image: url('ICON_IMAGELINK'); background-size: 100px 100px; display: block; margin: auto; border: 8px solid transparent; border-image: -moz-linear-gradient(top, #a80009 0%, #42000a 100%) 1 stretch; border-image: -webkit-linear-gradient(top, #a80009 0%, #42000a 100%) 1 stretch; border-image: linear-gradient(top, #a80009 0%, #42000a 100%) 1 stretch; outline: 2px solid #1e1e1e; outline-offset: -5px; margin-top: 8px;"> <div style="font-family: verdana; font-weight: bold; text-align: center; margin-top: 10px;"> <a href="LINK_HERE" style="text-decoration: none; color: #fbfbfb; letter-spacing: 1px;">CHARACTER NAME</a><br/> <span style="font-size: 10px; color: #fbfbfb; font-style: italic; letter-spacing: 1px;">( SPECIAL TITLE HERE. )</span></div> <center><span style="color: red; font-size: 25px;">▮▮▮▮▮</span><span style="color: red; font-size: 25px;">▯▯▯▯▯</span></center> Lorem ipsum dolor sit amet, consec adipiscing elit. Aenean dictum volutpat ipsum non rutrum. Etiam max pretium urna. </div> <!-- CHARACTER ADD END --> <!-- CHARACTER ADD START --> <div style="width:180px; height: 300px; background-color: rgba(30,30,30,0.5); color: #fbfbfb; display: center; text-align: justify; padding: 10px; margin-right: 5px; margin-bottom: 5px;"> <img src="https://i.imgur.com/2c50Dtb.png" style="width: 100px; height: 100px; background-image: url('ICON_IMAGELINK'); background-size: 100px 100px; display: block; margin: auto; border: 8px solid transparent; border-image: -moz-linear-gradient(top, #a80009 0%, #42000a 100%) 1 stretch; border-image: -webkit-linear-gradient(top, #a80009 0%, #42000a 100%) 1 stretch; border-image: linear-gradient(top, #a80009 0%, #42000a 100%) 1 stretch; outline: 2px solid #1e1e1e; outline-offset: -5px; margin-top: 8px;"> <div style="font-family: verdana; font-weight: bold; text-align: center; margin-top: 10px;"> <a href="LINK_HERE" style="text-decoration: none; color: #fbfbfb; letter-spacing: 1px;">CHARACTER NAME</a><br/> <span style="font-size: 10px; color: #fbfbfb; font-style: italic; letter-spacing: 1px;">( SPECIAL TITLE HERE. )</span></div> <center><span style="color: red; font-size: 25px;">▮▮▮▮▮</span><span style="color: red; font-size: 25px;">▯▯▯▯▯</span></center> Lorem ipsum dolor sit amet, consec adipiscing elit. Aenean dictum volutpat ipsum non rutrum. Etiam max pretium urna. </div> <!-- CHARACTER ADD END --> </div> <!-- CHARACTER ROW END --> <!-- END THE CODE --> </div> </raw-code> <div align="right"><small><b><font face="century gothic">coding credit: <user name="proverbially"></font></b></small></div>

CREDIT & RESOURCES.
— Design inspiration is from first Meet the Crew segment found at the end of the early issues of The Transformers: More Than Meets The Eye. An example of the panel in question!
— Background pattern is Grid Me by Arno Gregorian
— Icon is by proverbially.

UPDATES
— Posted on November 23, 2019.

KEEP IN MIND
— Please remember to credit me!
— Comments aren't necessary but they mean the world to me.

Comments

[enginehairing]

I had to use this. Love it!

[galargremlin]

Love it! Gonna be using it a bit more differently than a muselist but it's amazinggggg