(no subject)

[bread]

A photoshop-free, perfect grid image board • This simple code provides complete versatility allowing you to create WHATEVER image board you need to express your character through visual means. I've done this by using various HTML/CSS tricks that automatically crops and resizes images so you don't have to! • Although this is intended to be photoshop-free, try not to use massive images. STEP ONE: The container • Make sure this code surrounds the entire code. • Feel free to change the pixel width, everything will flex to that width. Currently, it's set to width:600px. If you are using the icon banner, I would recommend 330px for 3 icons, 440px for 4, 550px for 5, etc <raw-code><div style="width:600px; margin:0 auto;"> <!-- Start --> <! Remove this line and Paste codes between "Start" and "End" --> <!-- End --> </div></raw-code> STEP TWO: Go Crazy • The height values can and should be changed. This will help give your image board the diversity it needs. • I would recommend leaving any values as their original type, so keep pixel values as px, and percent values as %. • If you play with a % value, there's likely a second one near it that also needs to be changed. • All images are centered directly in the middle of its container. If you want to change that, look for background-position:center;. This attribute can be changed to top/center/bottom and/or left/center/right. You can also do % values.

Single Banner Image <!-- Single Banner Image --> <div style="height:200px;display:flex;margin-bottom:10px;"> <! 1 //> <div style="background:url('URL HERE') #65c2ff ; background-position:center;height:100%;flex: 1 1 auto;background-size:cover;margin-right:10px;"> </div> </div> <!-- END Single Banner -->

Two-column Banner <! Two-column Banner --> <div style="height:200px; display: flex; margin-bottom:10px;"> <! 1 //> <div style="background:url('URL HERE') #ffce65 ; background-position:center;flex: 1 1 auto;background-size:cover;height:100%;margin-right:10px;"> </div> <! 2 //> <div style="background:url('URL HERE') #ff6570 ; background-position:center;flex: 1 1 auto;background-size:cover;height:100%;margin-right:10px;"> </div> </div> <!-- END Two-column Banner -->

Three-column Banner <!-- Three-column Banner --> <div style="height:150px; display: flex;margin-bottom:10px;"> <! 1 //> <div style="flex: 1 1 auto;background:url('URL HERE') #ff6570 ; background-position:center;background-size:cover;height:100%;margin-right:10px;"> </div> <! 2 //> <div style="flex: 1 1 auto;background:url('URL HERE') #65c2ff ; background-position:center;background-size:cover;height:100%;margin-right:10px;"> </div> <! 3 //> <div style="flex: 1 1 auto;background:url('URL HERE') #ffce65 ; background-position:center;background-size:cover;height:100%;margin-right:10px;"> </div> </div> <!-- END Three-column Banner -->

Icon Banner - Evenly Spaced <!-- Icon Banner - Evenly Spaced --> <div style="height:100px; display: flex; justify-content: center;margin-bottom:10px;"> <div style="flex: 0 0 auto;background: #ffce65;height:100%;margin-right:10px;"> <img src=https://i.imgur.com/9pIKyJ9.png> </div> <div style="flex: 0 0 auto;background #ff6570;height:100%;margin-right:10px;"> <img src=https://i.imgur.com/1E76yqU.png></div> <div style="flex: 0 0 auto;background: #65c2ff;height:100%;margin-right:10px;"><img src=https://i.imgur.com/ePzfwff.png></div> <div style="flex: 0 0 auto;background: #ff6570;height:100%;margin-right:10px;"> <img src=https://i.imgur.com/1E76yqU.png></div> <div style="flex: 0 0 auto;background: #ffce65;height:100%;margin-right:10px;"> <img src=https://i.imgur.com/9pIKyJ9.png> </div> </div> <!-- END Icon Banner - Evenly Spaced -->

Icon Banner - Stretch Spaced <!-- Icon Banner - Stretch Spaced --> <div style="height:100px; display: flex; justify-content: space-between;margin-bottom:10px;"> <div style="flex: 0 0 auto;background: #ffce65;height:100%;margin-right:10px;"> <img src=https://i.imgur.com/9pIKyJ9.png> </div> <div style="flex: 0 0 auto;background #ff6570;height:100%;margin-right:10px;"> <img src=https://i.imgur.com/1E76yqU.png></div> <div style="flex: 0 0 auto;background: #65c2ff;height:100%;margin-right:10px;"> <img src=https://i.imgur.com/ePzfwff.png></div> <div style="flex: 0 0 auto;background: #ff6570;height:100%;margin-right:10px;"> <img src=https://i.imgur.com/1E76yqU.png></div> <div style="flex: 0 0 auto;background: #ffce65;height:100%;margin-right:10px;"> <img src=https://i.imgur.com/9pIKyJ9.png> </div> </div> <!-- END Icon Banner - Stretch Spaced -->

Left Large, Right Two-row <!-- Left Large, Right Two-row --> <div style="height:350px; display: flex;margin-bottom:10px;"> <! 1 //> <div style="background:url('URL HERE') #cacaca ; background-position:center;flex: 1 1 auto;background-size:cover;margin-right:10px;"> </div> <div style="flex: 1 1 auto;padding-bottom:;margin-right:10px;margin-bottom:10px;"> <! 2 //> <div style="height:50%;background:url('URL HERE') #65c2ff ; background-position:center;width:100%;background-size:cover;margin:0 0 10px 0"> </div> <! 3 //> <div style="height:50%;background:url('URL HERE') #ff6570 ; background-position:center;width:100%;background-size:cover;margin:0 0 10px 0"> </div> </div> </div> <!-- END Left Large, Right Two-row -->

Left Two-row, Right Large <!-- Left Two-row, Right Large --> <div style="height:350px; display: flex;margin-bottom:10px;"> <div style="flex: 1 1 auto;padding-bottom:;margin-right:10px;margin-bottom:10px;"> <! 1 //> <div style="height:50%;background:url('URL HERE') #65c2ff ; background-position:center;width:100%;background-size:cover;margin:0 0 10px 0"> </div> <! 2 //> <div style="height:50%;background:url('URL HERE') #ff6570 ; background-position:center;width:100%;background-size:cover;margin:0 0 10px 0"> </div> </div> <! 3 //> <div style="background:url('URL HERE') #cacaca ; background-position:center;flex: 1 1 auto;background-size:cover;margin-right:10px;"> </div> </div> <!-- END Left Two-row, Right Large -->

Left Large, Right Two-row, Second Row Double <!-- Left Large, Right Two-row, Second Row Double --> <div style="height:350px; display: flex;margin-bottom:10px;"> <! 1 //> <div style="background:url('URL HERE') #cacaca ; background-position:center;flex: 1 1 auto;background-size:cover;margin-right:10px;padding:0 5px;"> </div> <div style="flex: 1 1 auto;padding-bottom:;margin-right:10px;margin-bottom:10px;"> <! 2 //> <div style="height:50%;background:url('URL HERE') #65c2ff ; background-position:center;width:100%;background-size:cover;margin:0 0 10px 0"> </div> <div style="width:100%;height:50%;background-size:cover; display: flex;"> <!-- COLUMN SPLIT --> <! 3 //> <div style="background:url('URL HERE') #ff6570 ; background-position:center;flex: 1 1 auto;background-size:cover;margin-right:10px;margin: 0 10px 0 0;"> </div> <! 4 //> <div style="background:url('URL HERE') #ffce65 ; background-position:center;flex: 1 1 auto;background-size:cover;"> </div> <!-- END SPLIT --> </div></div></div> <!-- END Left Large, Right Two-row, Second Row Double -->

Left Two-row, Second Row Double, Right Large <!-- Left Two-row, Second Row Double, Right Large --> <div style="height:350px; display: flex;margin-bottom:10px;"> <div style="flex: 1 1 auto;padding-bottom:;margin-right:10px;margin-bottom:10px;"> <! 1 //> <div style="height:50%;background:url('URL HERE') #65c2ff ; background-position:center;width:100%;background-size:cover;margin:0 0 10px 0"> </div> <div style="width:100%;height:50%;background-size:cover; display: flex;"> <!-- COLUMN SPLIT --> <! 2 //> <div style="background:url('URL HERE') #ff6570 ; background-position:center;flex: 1 1 auto;background-size:cover;margin-right:10px;margin: 0 10px 0 0;"> </div> <! 3 //> <div style="background:url('URL HERE') #ffce65 ; background-position:center;flex: 1 1 auto;background-size:cover;"> </div></div> <!-- END SPLIT --> </div> <! 4 //> <div style="background:url('URL HERE') #cacaca ; background-position:center;flex: 1 1 auto;background-size:cover;margin-right:10px;padding:0 5px;"> </div> </div> <!-- END Two-row, Second Row Double, Right Large -->

Large Left, Two Column Right <!-- Large Left, Two Column Right--> <div style="height:350px; display: flex;margin-bottom:10px;"> <! 1 //> <div style="background:url('URL HERE') #ffce65 ; background-position:center;flex: 2 1 auto;background-size:cover;margin-right:10px;"> </div> <div style="flex: 1 1 auto;padding-bottom:;margin-right:10px;margin-bottom:10px;"> <! 2 //> <div style="height:50%;background:url('URL HERE') #65c2ff ; background-position:center;width:100%;background-size:cover;margin:0 0 10px 0"> </div> <! 3 //> <div style="height:50%;background:url('URL HERE') #ff6570 ; background-position:center;width:100%;background-size:cover;"> </div> </div> </div> <!-- END Large Left, Two Column Right-->

Two Column Left, Large Right <!-- Large Left, Two Column Right--> <div style="height:350px; display: flex;margin-bottom:10px;"> <div style="flex: 1 1 auto;padding-bottom:;margin-right:10px;margin-bottom:10px;"> <! 1 //> <div style="height:50%;background:url('URL HERE') #65c2ff ; background-position:center;width:100%;background-size:cover;margin:0 0 10px 0"> </div> <! 2 //> <div style="height:50%;background:url('URL HERE') #ff6570 ; background-position:center;width:100%;background-size:cover;"> </div> </div> <! 3 //> <div style="background:url('URL HERE') #ffce65 ; background-position:center;flex: 2 1 auto;background-size:cover;margin-right:10px;"> </div> </div> <!-- END Large Left, Two Column Right-->

Staggered Images Column <!-- Staggered Images Column --> <div style="height:400px;display: flex;margin-bottom:10px;"> <div style="flex: 1 1 auto;padding-bottom:;margin-right:10px;margin-bottom:10px;"> <! 1 //> <div style="height:40%;background:url('URL HERE') #65c2ff ; background-position:center;width:100%;background-size:cover;margin:0 0 10px 0"> </div> <! 2 //> <div style="height:60%;background:url('URL HERE') #ff6570 ; background-position:center;width:100%;background-size:cover;"> </div> </div> <div style="flex: 1 1 auto;padding-bottom:;margin-right:10px;margin-bottom:10px;"> <! 3 //> <div style="height:70%;background:url('URL HERE') #cacaca ; background-position:center;width:100%;background-size:cover;margin:0 0 10px 0"> </div> <! 4 //> <div style="height:30%;background:url('URL HERE') #ffce65 ; background-position:center;width:100%;background-size:cover;"> </div> </div> </div> <!-- END Staggered Images Column -->