contact / nav: leadlight

[transilience]

 

 

 

 

NAME other information here and another line

 

 

 

 

 

 

 

 

NAME other information here and another line a shortish bio paragraph or quotation can also go in this space

 

 

 

 

copy & paste

vertical

<div style="box-sizing: border-box; display: grid; grid-template-areas: 'big1 big1 big1 small1a' 'big1 big1 big1 small1b' 'big1 big1 big1 small1c' 'textbox textbox textbox textbox' 'small2a big2 big2 big2' 'small2b big2 big2 big2' 'small2c big2 big2 big2'; grid-gap: 5px; width: 305px; height: 525px; margin: auto; background: #222; padding: 5px;"> <div style="background-color: #222; background-image: url(BIGPIC1); background-size: cover; background-position: center; grid-area: big1;"> </div> <div style="background-color: #EEE; background-size: cover; background-position: center; grid-area: small1a;">  </div> <div style="background-color: #DDD; background-size: cover; background-position: center; grid-area: small1b;">  </div> <div style="background-color: #CCC; background-size: cover; background-position: center; grid-area: small1c;">  </div> <div style="background-color: #FFF; display: flex; flex-direction: column; justify-content: center; align-items: center; grid-area: textbox; font-family: candara, sans-serif; font-size: 12pt; color: black;"> <span style="font-weight: bold; letter-spacing: 1em; padding-left: 1em;">NAME</span> <span style="color: gray;">INFO LINE 1</span> <span style="color: gray;">INFO LINE 2</span> </div> <div style="background-color: #999; background-size: cover; background-position: center; grid-area: small2a;">  </div> <div style="background-color: #AAA; background-size: cover; background-position: center; grid-area: small2b;"> </div> <div style="background-color: #BBB; background-size: cover; background-position: center; grid-area: small2c;">  </div> <div style="background-color: #222; background-image: url(BIGPIC2); background-size: cover; background-position: center; grid-area: big2;">  </div> </div>

horizontal

<div style="box-sizing: border-box; display: grid; grid-template-areas: 'big1 big1 big1 small1a textbox small2a big2 big2 big2' 'big1 big1 big1 small1b textbox small2b big2 big2 big2' 'big1 big1 big1 small1c textbox small2c big2 big2 big2'; grid-gap: 5px; width: 525px; height: 305px; margin: auto; background: #222; padding: 5px;"> <div style="background-color: #222; background-image: url(BIGPIC1); background-size: cover; background-position: center; grid-area: big1;"> </div> <div style="background-color: #EEE; background-size: cover; background-position: center; grid-area: small1a;">  </div> <div style="background-color: #DDD; background-size: cover; background-position: center; grid-area: small1b;">  </div> <div style="background-color: #CCC; background-size: cover; background-position: center; grid-area: small1c;">  </div> <div style="background-color: #FFF; display: flex; flex-direction: column; justify-content: center; align-items: center; grid-area: textbox; font-family: candara, sans-serif; font-size: 12pt; color: black;"> <span style="font-weight: bold; letter-spacing: 0.5em; padding-left: 0.5em;">NAME</span> <span style="color: gray;">INFO LINE 1</span> <span style="color: gray;">INFO LINE 2</span> <span style="width: 200px; text-align: center; margin-top: 1em; letter-spacing: 1px; padding-left: 1px;"> SLIGHTLY LONGER TEXT BLOCK </span> </div> <div style="background-color: #999; background-size: cover; background-position: center; grid-area: small2a;">  </div> <div style="background-color: #AAA; background-size: cover; background-position: center; grid-area: small2b;"> </div> <div style="background-color: #BBB; background-size: cover; background-position: center; grid-area: small2c;">  </div> <div style="background-color: #222; background-image: url(BIGPIC2); background-size: cover; background-position: center; grid-area: big2;">  </div> </div>

find & replace

borders #222 • accent colors #999, #aaa, #bbb, #ccc, #ddd, #eee