Skip to Main Content
Manx!!! (
thisismanx
) wrote
2019
-
05
-
03
11:15 am
Entry tags:
! resource: codes
,
= code: aesthetic board
One Grid-Based Aesthetic Board
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>
(
4 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