code: diamonds - an aesthetic nav board

[10billionghosts]

MOOD

GAME
NAME

CONTACT

Riding the wave of creative energy as long as I can. This is a mood board / nav, once again inspired by a Canva photo collage template.

The base code is set up so that you can add text links to each div. The text will appear over top of whatever image you set within the diamond or triangle. I have added a secondary, alternate code, that turns each diamond into a link.

Here is the base code:

<lj-raw><div style="width:542px;margin:0 auto;background:#fff;border:1px solid #ccc;"> <div style="display:grid;grid-template-rows:repeat(38,10px);grid-template-columns:repeat(51,10px);grid-gap:0px;font-family:arial;line-height:1.5;margin:15px;"> <!-- LEFT BORDER TRIANGLES --> <div style="grid-area:TOP-LEFT;grid-column-start:1;grid-column-end:15;grid-row-start:1;grid-row-end:23;background:#bbb url('IMG_URL')center;background-size:cover;clip-path: polygon(0 0, 0% 100%, 100% 0);"> </div> <div style="grid-area:BTM-LEFT;grid-column-start:1;grid-column-end:6;grid-row-start:31;grid-row-end:39;background:#bbb url('IMG_URL')center;background-size:cover;clip-path: polygon(0 0, 0% 100%, 100% 100%);"> </div> <!-- END LEFT BORDER TRIANGLES --> <div style="grid-area:DIA-BOT-1;grid-column-start:1;grid-column-end:16;grid-row-start:15;grid-row-end:39;background:#bbb url('IMG_URL')center;background-size:cover;clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0 50%);padding-top:70%;font-weight:bold;font-size:20px;color:#fff;"><center><a href="#" style="text-decoration:none;color:#fff;"> </center></a></div> <div style="grid-area:TRI-BOT-1;grid-column-start:11;grid-column-end:24;grid-row-start:29;grid-row-end:39;background:#bbb url('IMG_URL')center;background-size:cover;clip-path: polygon(50% 0, 0 100%, 100% 100%);padding-top:60%;font-weight:bold;font-size:15px;color:#fff;"><center><a href="#" style="text-decoration:none;color:#fff;"> </center></a></div> <div style="grid-area:DIA-TOP-1;grid-column-start:10;grid-column-end:25;grid-row-start:1;grid-row-end:25;background:#bbb url('IMG_URL')center;background-size:cover;clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0 50%);padding-top:70%;font-weight:bold;font-size:20px;color:#fff;"><center><a href="#" style="text-decoration:none;color:#fff;"> </center></a></div> <div style="grid-area:TRI-TOP;grid-column-start:20;grid-column-end:33;grid-row-start:1;grid-row-end:11;background:#bbb url('IMG_URL')center;background-size:cover;clip-path: polygon(50% 100%, 0 0, 100% 0);padding-top:0%;font-weight:bold;font-size:15px;color:#fff;"><center><a href="#" style="text-decoration:none;color:#fff;"> </center></a></div> <div style="grid-area:DIA-BOT-2;grid-column-start:19;grid-column-end:34;grid-row-start:15;grid-row-end:39;background:#bbb url('IMG_URL')center;background-size:cover;clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0 50%);padding-top:70%;font-weight:bold;font-size:20px;color:#fff;"><center><a href="#" style="text-decoration:none;color:#fff;"> </center></a></div> <div style="grid-area:TRI-BOT-2;grid-column-start:29;grid-column-end:42;grid-row-start:29;grid-row-end:39;background:#bbb url('IMG_URL')center;background-size:cover;clip-path: polygon(50% 0, 0 100%, 100% 100%);padding-top:60%;font-weight:bold;font-size:15px;color:#fff;"><center><a href="#" style="text-decoration:none;color:#fff;"> </center></a></div> <div style="grid-area:DIA-TOP-2;grid-column-start:28;grid-column-end:43;grid-row-start:1;grid-row-end:25;background:#bbb url('IMG_URL')center;background-size:cover;clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0 50%);padding-top:70%;font-weight:bold;font-size:20px;color:#fff;"><center><a href="#" style="text-decoration:none;color:#fff;"> </center></a></div> <div style="grid-area:DIA-BOT-3;grid-column-start:37;grid-column-end:52;grid-row-start:15;grid-row-end:39;background:#bbb url('IMG_URL')center;background-size:cover;clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0 50%);padding-top:70%;font-weight:bold;font-size:20px;color:#fff;"><center><a href="#" style="text-decoration:none;color:#fff;"> </center></a></div> <!-- RIGHT BORDER TRIANGLES --> <div style="grid-area:TOP-RGHT;grid-column-start:38;grid-column-end:52;grid-row-start:1;grid-row-end:23;background:#bbb url('IMG_URL')center;background-size:cover;clip-path: polygon(100% 0, 0 0, 100% 100%);"> </div> <div style="grid-area:BOT-RGHT;grid-column-start:47;grid-column-end:52;grid-row-start:31;grid-row-end:39;background:#bbb url('IMG_URL')center;background-size:cover;clip-path: polygon(100% 0, 0% 100%, 100% 100%);"> </div> <!-- END RIGHT BORDER TRIANGLES --> </div></div></lj-raw>

This code turns all the diamond shapes into clickable links:

<lj-raw><div style="width:542px;margin:0 auto;background:#fff;border:1px solid #ccc;"> <div style="display:grid;grid-template-rows:repeat(38,10px);grid-template-columns:repeat(51,10px);grid-gap:0px;font-family:arial;line-height:1.5;margin:15px;"> <!-- LEFT BORDER TRIANGLES --> <div style="grid-area:TOP-LEFT;grid-column-start:1;grid-column-end:15;grid-row-start:1;grid-row-end:23;background:#bbb url('IMG_URL')center;background-size:cover;clip-path: polygon(0 0, 0% 100%, 100% 0);"> </div> <div style="grid-area:BTM-LEFT;grid-column-start:1;grid-column-end:6;grid-row-start:31;grid-row-end:39;background:#bbb url('IMG_URL')center;background-size:cover;clip-path: polygon(0 0, 0% 100%, 100% 100%);"> </div> <!-- END LEFT BORDER TRIANGLES --> <a href="URL HERE" alt="alt" style="grid-area:DIA-BOT-1;grid-column-start:1;grid-column-end:16;grid-row-start:15;grid-row-end:39;background:#bbb url('IMG_URL')center;background-size:cover;clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0 50%);"> </a> <div style="grid-area:TRI-BOT-1;grid-column-start:11;grid-column-end:24;grid-row-start:29;grid-row-end:39;background:#bbb url('IMG_URL')center;background-size:cover;clip-path: polygon(50% 0, 0 100%, 100% 100%);padding-top:60%;font-weight:bold;font-size:15px;color:#fff;"><center><a href="#" style="text-decoration:none;color:#fff;"> </center></a></div> <a href="URL HERE" alt="alt" style="grid-area:DIA-TOP-1;grid-column-start:10;grid-column-end:25;grid-row-start:1;grid-row-end:25;background:#bbb url('IMG_URL')center;background-size:cover;clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0 50%);"> </a> <div style="grid-area:TRI-TOP;grid-column-start:20;grid-column-end:33;grid-row-start:1;grid-row-end:11;background:#bbb url('IMG_URL')center;background-size:cover;clip-path: polygon(50% 100%, 0 0, 100% 0);padding-top:0%;font-weight:bold;font-size:15px;color:#fff;"><center><a href="#" style="text-decoration:none;color:#fff;"> </center></a></div> <a href="URL HERE" alt="alt" style="grid-area:DIA-BOT-2;grid-column-start:19;grid-column-end:34;grid-row-start:15;grid-row-end:39;background:#bbb url('IMG_URL')center;background-size:cover;clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0 50%);"> </a> <div style="grid-area:TRI-BOT-2;grid-column-start:29;grid-column-end:42;grid-row-start:29;grid-row-end:39;background:#bbb url('IMG_URL')center;background-size:cover;clip-path: polygon(50% 0, 0 100%, 100% 100%);padding-top:60%;font-weight:bold;font-size:15px;color:#fff;"><center><a href="#" style="text-decoration:none;color:#fff;"> </center></a></div> <a href="URL HERE" alt="alt" style="grid-area:DIA-TOP-2;grid-column-start:28;grid-column-end:43;grid-row-start:1;grid-row-end:25;background:#bbb url('IMG_URL')center;background-size:cover;clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0 50%);"> </a> <a href="URL HERE" alt="alt" style="grid-area:DIA-BOT-3;grid-column-start:37;grid-column-end:52;grid-row-start:15;grid-row-end:39;background:#bbb url('IMG_URL')center;background-size:cover;clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0 50%);"> </a> <!-- RIGHT BORDER TRIANGLES --> <div style="grid-area:TOP-RGHT;grid-column-start:38;grid-column-end:52;grid-row-start:1;grid-row-end:23;background:#bbb url('IMG_URL')center;background-size:cover;clip-path: polygon(100% 0, 0 0, 100% 100%);"> </div> <div style="grid-area:BOT-RGHT;grid-column-start:47;grid-column-end:52;grid-row-start:31;grid-row-end:39;background:#bbb url('IMG_URL')center;background-size:cover;clip-path: polygon(100% 0, 0% 100%, 100% 100%);"> </div> <!-- END RIGHT BORDER TRIANGLES --> </div></div></lj-raw>

HOW TO USE
❣️ Mind the lj-raw tags!!

❣️ This code is insanejournal friendly! It will NOT scale for mobile displays, and will create a horizontal scrollbar.

❣️ This code works on mobile, but it is set to a fixed width and as such will create a horizontal scroll on most mobile views.

❣️ For best results, paste into a new blank post.

❣️ The order of the diamonds is left to right.

❣️ To customize the color, change the #bbb hexcode to whatever you'd like!

❣️ Replace IMG_URL with images or gifs. Anything you put in will automatically adjust to a fitting size!

❣️ Keep scrolling to see a couple of mock ups illustrating some ideas for how to use this code. :)

As always, I do not require credit, but it is appreciated, especially if you are editing my base code. I love to see what people have done with my code, so drop me a comment with a link if you decide to use!

This code is compatible with InsaneJournal.

FOUNDLING
VALLEY

A

A

A

A

A

A

A

A