Skip to Main Content
jay, novice human (
10billionghosts
) wrote
2023-02-17 08:10 pm (UTC)
TEMPORARY QUICK DIAMOND CODE
<lj-raw> <div style="max-width:450px;width:100%;margin:0 auto 5px;display:grid;grid-template-columns: repeat(6, 1fr);grid-template-rows:210px 100px;gap:5px 10px;font-size: clamp(12px, 1vw, 13px);font-variant:small-caps;font-family:arial, helvetica, sans serif;color:#fff;"> <!-- PORTRAIT; the big triangle for the picture. change IMG_URL. --> <div style="grid-column-start:2;grid-column-end:6;grid-row-start:1;grid-row-end:2;clip-path: polygon(50% 0%, 0% 100%, 100% 100%);background:#ccc url('IMG_URL')center top;background-size:cover;"></div> <!-- PORTRAIT; end --> <!-- THE LINKS; you get exactly five of these, change LINK DESC, #URL_HERE, and optionally BG_URL; also change the !!link!! placeholders or delete them --> <a title="LINK DESC" href="#URL_HERE" style="grid-column-start:1;grid-column-end:3;grid-row-start:2;grid-row-end:3;display:flex;justify-content:center;align-items:end;clip-path: polygon(50% 0%, 0% 100%, 100% 100%);background:#346871 url('BG_URL')center;background-size:cover;text-decoration:none;font-weight:bold;color:#fff;">!!link!!</a> <a title="LINK DESC" href="#URL_HERE" style="grid-column-start:2;grid-column-end:4;grid-row-start:2;grid-row-end:3;display:flex;justify-content:center;align-items:start;clip-path: polygon(50% 100%, 0 0, 100% 0);background:#346871 url('BG_URL')center;background-size:cover;text-decoration:none;font-weight:bold;color:#fff;">!!link!!</a> <a title="LINK DESC" href="#URL_HERE" style="grid-column-start:3;grid-column-end:5;grid-row-start:2;grid-row-end:3;display:flex;justify-content:center;align-items:end;clip-path: polygon(50% 0%, 0% 100%, 100% 100%);background:#346871 url('BG_URL')center;background-size:cover;text-decoration:none;font-weight:bold;color:#fff;">!!link!!</a> <a title="LINK DESC" href="#URL_HERE" style="grid-column-start:4;grid-column-end:6;grid-row-start:2;grid-row-end:3;display:flex;justify-content:center;align-items:start;clip-path: polygon(50% 100%, 0 0, 100% 0);background:#346871 url('BG_URL')center;background-size:cover;text-decoration:none;font-weight:bold;color:#fff;">!!link!!</a> <a title="LINK DESC" href="#URL_HERE" style="grid-column-start:5;grid-column-end:7;grid-row-start:2;grid-row-end:3;display:flex;justify-content:center;align-items:end;clip-path: polygon(50% 0%, 0% 100%, 100% 100%);background:#346871 url('BG_URL')center;background-size:cover;text-decoration:none;font-weight:bold;color:#fff;">!!link!!</a> <!-- THE LINKS; end --> </div> <div style="max-width:450px;width:100%;margin:0 auto;display:grid;grid-template-columns: repeat(6, 1fr);grid-template-rows:100px 210px;gap:5px 10px;font-size: clamp(12px, 1vw, 13px);font-variant:small-caps;font-family:arial, helvetica, sans serif;color:#fff;"> <!-- THE LINKS; you get exactly five of these, change LINK DESC, #URL_HERE, and optionally BG_URL; also change the !!link!! placeholders or delete them --> <a title="LINK DESC" href="#URL_HERE" style="grid-column-start:1;grid-column-end:3;grid-row-start:1;grid-row-end:2;display:flex;justify-content:center;align-items:start;clip-path: polygon(50% 100%, 0 0, 100% 0);background:#346871 url('BG_URL')center;background-size:cover;text-decoration:none;font-weight:bold;color:#fff;">!!link!!</a> <a title="LINK DESC" href="#URL_HERE" style="grid-column-start:2;grid-column-end:4;grid-row-start:1;grid-row-end:2;display:flex;justify-content:center;align-items:end;clip-path: polygon(50% 0%, 0% 100%, 100% 100%);background:#346871 url('BG_URL')center;background-size:cover;text-decoration:none;font-weight:bold;color:#fff;">!!link!!</a> <a title="LINK DESC" href="#URL_HERE" style="grid-column-start:3;grid-column-end:5;grid-row-start:1;grid-row-end:2;display:flex;justify-content:center;align-items:start;clip-path: polygon(50% 100%, 0 0, 100% 0);background:#346871 url('BG_URL')center;background-size:cover;text-decoration:none;font-weight:bold;color:#fff;">!!link!!</a> <a title="LINK DESC" href="#URL_HERE" style="grid-column-start:4;grid-column-end:6;grid-row-start:1;grid-row-end:2;display:flex;justify-content:center;align-items:end;clip-path: polygon(50% 0%, 0% 100%, 100% 100%);background:#346871 url('BG_URL')center;background-size:cover;text-decoration:none;font-weight:bold;color:#fff;">!!link!!</a> <a title="LINK DESC" href="#URL_HERE" style="grid-column-start:5;grid-column-end:7;grid-row-start:1;grid-row-end:2;display:flex;justify-content:center;align-items:start;clip-path: polygon(50% 100%, 0 0, 100% 0);background:#346871 url('BG_URL')center;background-size:cover;text-decoration:none;font-weight:bold;color:#fff;">!!link!!</a> <!-- THE LINKS; end --> <!-- PORTRAIT; the big triangle for the picture. change IMG_URL. --> <div style="grid-column-start:2;grid-column-end:6;grid-row-start:2;grid-row-end:3;clip-path: polygon(50% 100%, 0 0, 100% 0);background:#ccc url('IMG_URL')center;background-size:cover;"></div> <!-- PORTRAIT; end --> </div> <!-- CREDIT --> <div style="max-width:450px;width:100%;margin:0 auto;text-align:center;font-size:10px;color:#ccc"><a title="code credit!" href="http://10billionghosts.dreamwidth.org" style="text-decoration:none;color:#ccc;">code</a></div> <!-- CREDIT --> </lj-raw>
(
6 comments
)
Post a comment in response:
From:
Anonymous
This account has disabled anonymous posting.
OpenID
Identity URL:
Log in?
Dreamwidth account
Account name
Password
Log in?
If you don't have an account you can
create one now
.
Subject
HTML doesn't work in the subject.
Formatting type
Casual HTML
Markdown
Raw HTML
Rich Text Editor
Message
Log in
Account name:
Password:
Remember me
Other options:
Forget your password?
Log in with OpenID?
Close
menu
Log in
Create
Create Account
Display Preferences
Explore
Interests
Directory Search
Site and Journal Search
Latest Things
Random Journal
Random Community
FAQ
Shop
Buy Dreamwidth Services
Gift a Random User
DW Merchandise
Interest
Region
Site and Account
FAQ
Email
TEMPORARY QUICK DIAMOND CODE