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

Comments

[lenabee]

Hi, this is fabulous! I am trying to use a modified version and I want to make the side boxes wider, but I can't seem to figure out how to go about that. You can see my code here. Any help would be appreciated!

[transilience]

Hmm. Well, the whole code is a fixed width, and the images are set to take up certain percentages of that width. So in order to make the side boxes bigger, you're going to have to make the main box smaller, OR make the whole thing bigger.

edit: okay I'm not sure why the previews are being wonky here, but try the codes anyway

option a)

ROSE HATHAWAY
VAMPIRE ACADEMY
bio | tags

<div style="box-sizing: border-box; display: grid; grid-template-areas: 'big1 big1 small1a' 'big1 big1 small1b' 'big1 big1 small1c' 'textbox textbox textbox'; grid-gap: 5px; width: 285px; height: 325px; margin: auto; background: #222; padding: 5px;"> <div style="background-color: #222; background-image: url(https://78.media.tumblr.com/3494b438858b23b1f5c07c61c790b95e/tumblr_mzlgoduHS71qdoecso3_250.gif); background-size: cover; background-position: center; grid-area: big1;"> </div> <div style="background: url(http://www.insanejournal.com/userpic/33423928/4032417); background-color: #EEE; background-size: cover; background-position: center; grid-area: small1a;"> </div> <div style="background: url(http://www.insanejournal.com/userpic/33423930/4032417); background-color: #DDD; background-size: cover; background-position: center; grid-area: small1b;"> </div> <div style="background: url(http://www.insanejournal.com/userpic/33423932/4032417); 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: .5em; padding-left: 1em;">ROSE HATHAWAY</span> <span style="color: gray;">VAMPIRE ACADEMY</span> <span style="color: gray;"><a href="LINK">bio</a> | <a href=LINK>tags</a></span> </div></div>

option b)

ROSE HATHAWAY
VAMPIRE ACADEMY
bio | tags

<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'; grid-gap: 5px; width: 385px; height: 425px; margin: auto; background: #222; padding: 5px;"> <div style="background-color: #222; background-image: url(https://78.media.tumblr.com/3494b438858b23b1f5c07c61c790b95e/tumblr_mzlgoduHS71qdoecso3_250.gif); background-size: cover; background-position: center; grid-area: big1;"> </div> <div style="background: url(http://www.insanejournal.com/userpic/33423928/4032417); background-color: #EEE; background-size: cover; background-position: center; grid-area: small1a;"> </div> <div style="background: url(http://www.insanejournal.com/userpic/33423930/4032417); background-color: #DDD; background-size: cover; background-position: center; grid-area: small1b;"> </div> <div style="background: url(http://www.insanejournal.com/userpic/33423932/4032417); 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: .5em; padding-left: 1em;">ROSE HATHAWAY</span> <span style="color: gray;">VAMPIRE ACADEMY</span> <span style="color: gray;"><a href="LINK">bio</a> | <a href=LINK>tags</a></span> </div></div>

[lenabee]

HAHA IDK what is up with code in the comment, but I was able to figure it out from the code you gave me, so TYVM!

ROSE HATHAWAY VAMPIRE ACADEMY bio | tags

it must be something in the DW comment page code, but you can see my tweak here

[transilience]

Great!