moodboard: patchwork

[transilience]

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

copy & paste

- works in Firefox, Chrome, Opera, and Edge. does not work in Explorer.
- there's no color coding on this one, instead you can use this reference

<div style="box-sizing: border-box; display: grid; grid-template-areas: 'alpha alpha bravo bravo delta echo' 'alpha alpha charlie charlie delta echo' 'foxtrot foxtrot india juliet kilo kilo' 'hotel hotel india juliet lima lima' 'mike november oscar oscar quebec quebec' 'mike november papa papa quebec quebec'; grid-gap: 2px; width: 601px; height: 600px; margin: 2em auto; background: #fff;padding: 2px; outline: 4px double black;"> <!-- FIRST ROW --> <div style="grid-area: alpha; background-image: url(.jpg); background-size: cover; background-position: center; border: 1px solid black;"> &nbsp; </div> <div style="grid-area: bravo; background-image: url(.jpg); background-size: cover; background-position: center; border: 1px solid black;"> &nbsp; </div> <div style="grid-area: charlie; background-image: url(.jpg); background-size: cover; background-position: center; border: 1px solid black;"> &nbsp; </div> <div style="grid-area: delta; background-image: url(.jpg); background-size: cover; background-position: center; border: 1px solid black;"> &nbsp; </div> <div style="grid-area: echo; background-image: url(.jpg); background-size: cover; background-position: center; border: 1px solid black;"> &nbsp; </div> <!-- SECOND ROW --> <div style="grid-area: foxtrot; background-image: url(.jpg); background-size: cover; background-position: center; border: 1px solid black;"> &nbsp; </div> <div style="grid-area: hotel; background-image: url(.jpg); background-size: cover; background-position: center; border: 1px solid black;"> &nbsp; </div> <div style="grid-area: india; background-image: url(.jpg); background-size: cover; background-position: center; border: 1px solid black;"> &nbsp; </div> <div style="grid-area: juliet; background-image: url(.jpg); background-size: cover; background-position: center; border: 1px solid black;"> &nbsp; </div> <div style="grid-area: kilo; background-image: url(.jpg); background-size: cover; background-position: center; border: 1px solid black;"> &nbsp; </div> <div style="grid-area: lima; background-image: url(.jpg); background-size: cover; background-position: center; border: 1px solid black;"> &nbsp; </div> <!-- THIRD ROW --> <div style="grid-area: mike; background-image: url(.jpg); background-size: cover; background-position: center; border: 1px solid black;"> &nbsp; </div> <div style="grid-area: november; background-image: url(.jpg); background-size: cover; background-position: center; border: 1px solid black;"> &nbsp; </div> <div style="grid-area: oscar; background-image: url(.jpg); background-size: cover; background-position: center; border: 1px solid black;"> &nbsp; </div> <div style="grid-area: papa; background-image: url(.jpg); background-size: cover; background-position: center; border: 1px solid black;"> &nbsp; </div> <div style="grid-area: quebec; background-image: url(.jpg); background-size: cover; background-position: center; border: 1px solid black;"> &nbsp; </div> </div>