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

[fullcry]

I love this code and really want to use it, but every time I try it has this huge grey box at the bottom and cuts off my images/makes them smaller. What am I doing wrong?

ETA: Forgot to mention, I'm using Vertical, and I've tried making the images the same size and also the same size as the ones you used in your example. You can see the issue here.

[transilience]

Did you disable auto-formatting?

[fullcry]

I did not. That fixed it. Thank you so much!

[transilience]

No prob!

[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!

[humblecowboy]

using this for an inbox and it looks just as great on darkmode as on light. thanks much for your hard work! i've never seen this code styling before and it works out excellently.