One Grid-Based Aesthetic Board

[thisismanx]

The majority of this code was previously released in my trio pack.
For this board, I've resized it into a square, added a circle, and also coded in some possible links (see below). The links can easily be removed by deleting the 'link #' text.

link 1

link 2

link 3

<lj-raw><div style="max-width:600px;margin:0 auto;background:#fff;"> <div style="height:600px;padding:10px;display:grid;grid-template-columns:repeat(13,1fr);grid-template-rows:repeat(15,1fr);grid-gap:10px;"> <div style="background:#eee url(IMG1)center;background-size:cover;grid-area:one;grid-column-start:1;grid-column-end:2;grid-row-start:1;grid-row-end:8;"></div> <div style="background:#eee url(IMG2)center;background-size:cover;grid-area:two;grid-column-start:2;grid-column-end:9;grid-row-start:1;grid-row-end:8;"></div> <div style="background:#eee url(IMG3)center;background-size:cover;grid-area:three;grid-column-start:9;grid-column-end:13;grid-row-start:1;grid-row-end:5;"></div> <div style="background:#eee url(IMG4)center;background-size:cover;grid-area:four;grid-column-start:9;grid-column-end:13;grid-row-start:5;grid-row-end:8;display:flex;flex-wrap:wrap;padding:10px;align-items:center;justify-content:center;"><a href=""style="text-decoration:none;font-weight:bold;font-style:italic;color:#fff;text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5);">link 1</a></div> <div style="background:#eee url(IMG5)center;background-size:cover;grid-area:five;grid-column-start:13;grid-column-end:14;grid-row-start:1;grid-row-end:6;"></div> <div style="background:#eee url(IMG6)center;background-size:cover;grid-area:six;grid-column-start:13;grid-column-end:14;grid-row-start:6;grid-row-end:12;"></div> <div style="background:#eee url(IMG7)center;background-size:cover;grid-area:seven;grid-column-start:1;grid-column-end:2;grid-row-start:8;grid-row-end:16;"></div> <div style="background:#eee url(IMG8)center;background-size:cover;grid-area:eight;grid-column-start:2;grid-column-end:7;grid-row-start:8;grid-row-end:12;display:flex;flex-wrap:wrap;padding:10px;align-items:center;justify-content:center;"><a href=""style="text-decoration:none;font-weight:bold;font-style:italic;color:#fff;text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5);">link 2</a></div> <div style="background:#eee url(IMG9)center;background-size:cover;grid-area:nine;grid-column-start:7;grid-column-end:13;grid-row-start:8;grid-row-end:12;"></div> <div style="background:#eee url(IMG10)center;background-size:cover;grid-area:ten;grid-column-start:2;grid-column-end:11;grid-row-start:12;grid-row-end:16;"><div style="background:#eee url(CIRCLE)center;background-size:cover;border-radius:100px;height:150px;width:150px;border:10px solid #fff;position:relative;top:-100px;left:150px;"></div></div> <div style="background:#eee url(IMG11)center;background-size:cover;grid-area:eleven;grid-column-start:11;grid-column-end:14;grid-row-start:12;grid-row-end:16;display:flex;flex-wrap:wrap;padding:10px;align-items:center;justify-content:center;"><a href=""style="text-decoration:none;font-weight:bold;font-style:italic;color:#fff;text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5);">link 3</a></div> </div> </div></lj-raw>

Comments

[sunborne]

Ohhh! I love that you made this into a small but stylish navigation pade. It's such a pretty look. Definitely going to use it in the future when I can.

Thank you for sharing this with us. o w o I love seeing your work on the community because it's so inspired and creative...!

[thisismanx]

oh my goodness that is such a sweet thing to say, thank you!

[lockit]

i've looked at this a thousand times and i only just fully processed "van gogh used to eat yellow paint because he thought it would put happiness inside him" and it's very funny

[thisismanx]

L m a o
It's very depressed teen edgy and I owe my bunny apologies for putting it on here but yellow was one of her colors.