007 — (code) wespace.com

[vigilanting]

( fullsize )

A classic Myspace-themed profile / info / permissions page complete with an era-appropriate adspace, music section, and the infamous Myspace Top 8. Go forth and sow drama amongst your CR! Live preview below.

This was originally made for saltburnt but it can be repurposed for whatever suits your needs!

CODE
<lj-raw><div style="max-width:850px;margin:0 auto;display:grid;grid-template-columns: 2fr 3fr;gap:5px;padding:5px;font-family:verdana,sans-serif;font-size:12px;box-sizing: border-box;"> <!-- HEADER START--> <div style="grid-column-start:1;grid-column-end:3;background:#1D4ED8;"> <div style="width:100%;padding-top:5px;text-align:center;"><img src="https://blob.gifcities.org/gifcities/D7VO5TYBCLPK6BOTGIFH524M2ZGU3OXF.gif"></div> <div style="width:100%;display:flex;padding:10px 15px;"> <div style="width:55px;height:50px;background:url(https://i.ibb.co/s9fcCB6d/groups-white.png)center / cover;"></div> <div style="max-width:25%;font-family:trebuchet ms,sans-serif;font-size:clamp(18px, 2.5vw, 24px);font-weight:800;padding:3px 5px;color:#fff;line-height:1;">wespace.com <br><span style="font-size:12px;float:right;">a place for friends</span></div> <div style="width:80%;height:50px;display:flex;justify-content:flex-end;align-items:center;gap:0 5px;"> <div style="width:70%;height:18px;background:#fff;font-size:11px;line-height:16px;padding:0 5px;border:1px solid #eee;border-radius:3px;text-align:right;color:#545454;">| Web ▾</div> <div style="width:10%;height:18px;background:#fff;font-size:11px;line-height:16px;padding:0 5px;border:1px solid #eee;border-radius:3px;text-align:center;color:#1D4ED8;">Search</div> <div style="width:12%;height:18px;background:url(https://i.ibb.co/YBJ6PghB/87696-google-2.png)center / cover;"></div> </div> </div> <div style="display:flex;justify-content:space-between;color:#fff;padding:5px 15px;font-size:clamp(9px, 1.5vw, 12px);"> <div style="width:65%;"> Home | Mail ▾ | Profile ▾ | Friends ▾ | Music | WeSpaceTV | More ▾ | </div> <div style="width:25%;text-align:right;"> My Account | Sign Out </div> </div> </div> <!-- HEADER END--> <!-- SIDEBAR START--> <div style="grid-column-start:1;grid-column-end:2;margin-top:5px;"> <!-- ABOUT START--> <div style="display:grid;grid-template: 25px 100px 115px / 2fr 1.5fr 2fr;gap:2px 10px;"> <!-- NAME AND USERPIC START--> <div style="grid-column-start:1;grid-column-end:3;grid-row-start:1;grid-row-end:2;font-size:18px;font-weight:bold;">Name</div> <div style="grid-column-start:1;grid-column-end:3;grid-row-start:2;grid-row-end:4;background:#e3e3e3 url(PROFILEIMG)center / cover;"></div> <!-- NAME AND USERPIC END--> <!-- INFO START--> <div style="grid-column-start:3;grid-column-end:4;grid-row-start:1;grid-row-end:4;padding:25px 5px;text-align:left;line-height:1.2;"> </lj-raw>"short status or quote here" Gender 29 years old Saltburnt, UNITED KINGDOM <img src="https://img.icons8.com/tiny-color/16/person-male.png"> <span style="color:#059669;font-weight:bold;font-size:11px;vertical-align:text-top;">Online Now!</span> Last Login: 08/28/2007<lj-raw> </div> <!-- INFO END--> <div style="grid-column-start:1;grid-column-end:3;grid-row-start:4;grid-row-end:5;font-weight:bold;text-align:center;color:#1D4ED8;padding-top:5px;"><a href="https://JOURNAL.dreamwidth.org/icons?view=all" style="text-decoration:none;">View more pics</a></div> </div> <!-- ABOUT END--> <!-- CONTACT START--> <div style="width:100%;margin:10px 0;display:grid;grid-template-columns:4em 11em 4em 11em;grid-template-rows: 1fr repeat(4, 2em) 1px;gap:5px 2px;color:#1D4ED8;font-weight:bold;font-size:11px;border-right: 2px solid #c2c2c2;border-bottom: 2px solid #c2c2c2;border-left: 2px solid #c2c2c2;"> <div style="grid-row-start:1;grid-row-end:2;grid-column-start:1;grid-column-end:6;background:#60A5FA;padding:0 10px;font-size:13px;border-top: 2px solid #c2c2c2;border-bottom: 2px solid #c2c2c2;"><b style="color:#fff;">Contacting Name</b></div> <div style="grid-row-start:2;grid-row-end:3;grid-column-start:1;grid-column-end:2;background:url(https://64.media.tumblr.com/abf75904fa8c2450841626ecff259b7f/37f44b10bfe012d1-f7/s1280x1920/0ea9dabb2ab5fc16a9aeda6357471dfdc382542f.png)center / cover;"></div> <div style="grid-row-start:2;grid-row-end:3;grid-column-start:2;grid-column-end:3;line-height:22px;"><a href="INBOXURL" style="text-decoration:none;">Send Message</a></div> <div style="grid-row-start:2;grid-row-end:3;grid-column-start:3;grid-column-end:4;background:url(https://64.media.tumblr.com/2e246f1f1fb0f0a0895a4167e99368de/aeadacfdb0659d6d-13/s540x810/b6af1b5eb058be3f84fe98869ba9a81994feac46.png)center / cover;"></div> <div style="grid-row-start:2;grid-row-end:3;grid-column-start:4;grid-column-end:5;line-height:22px;">Forward to Friend</div> <div style="grid-row-start:3;grid-row-end:4;grid-column-start:1;grid-column-end:2;background:url(https://64.media.tumblr.com/e8117afab47f6411df3d8534c1941b8b/e33902e696256057-0a/s540x810/2226a8012cbc2e64ca5b1f5c6dbf6c1c73445151.png)center / cover;"></div> <div style="grid-row-start:3;grid-row-end:4;grid-column-start:2;grid-column-end:3;line-height:22px;">Add to Friends</div> <div style="grid-row-start:3;grid-row-end:4;grid-column-start:3;grid-column-end:4;background:url(https://64.media.tumblr.com/d3f2ba17ae776b393d2c063973542166/8e4cc78afd335257-ff/s540x810/9fbbe8a4e62470530c7b9858365fbae9443b5022.png)center / cover;"></div> <div style="grid-row-start:3;grid-row-end:4;grid-column-start:4;grid-column-end:5;line-height:22px;">Add to Favorites</div> <div style="grid-row-start:4;grid-row-end:5;grid-column-start:1;grid-column-end:2;background:url(https://64.media.tumblr.com/94dbd515f1073510c39df0f751073632/c4716b93b801bbf0-94/s540x810/1900354edc0206c164933f3c74d572ac43ae037d.png)center / cover;"></div> <div style="grid-row-start:4;grid-row-end:5;grid-column-start:2;grid-column-end:3;line-height:22px;">Instant Message</div> <div style="grid-row-start:4;grid-row-end:5;grid-column-start:3;grid-column-end:4;background:url(https://64.media.tumblr.com/ae6d9a936509d34c79244cadf168dbd1/2c079755ccf9f6e2-0a/s540x810/8c0768585eb1d3c223c47b53e31fb229ae701b8f.png)center / cover;"></div> <div style="grid-row-start:4;grid-row-end:5;grid-column-start:4;grid-column-end:5;line-height:22px;">Block User</div> <div style="grid-row-start:5;grid-row-end:6;grid-column-start:1;grid-column-end:2;background:url(https://64.media.tumblr.com/af3e117a550a6990ba83b9259bc00d3c/ff98ad22fe2f1e53-fb/s540x810/af9d15212a1ee56ca73620021fd46855d9de9118.png)center / cover;"></div> <div style="grid-row-start:5;grid-row-end:6;grid-column-start:2;grid-column-end:3;line-height:22px;">Add to Group</div> <div style="grid-row-start:5;grid-row-end:6;grid-column-start:3;grid-column-end:4;background:url(https://64.media.tumblr.com/e9acb4d8b2ae436f46c45950f8dfb0dc/2edeb746637ffe40-24/s540x810/ace7fe2b62501ac74759830bbb04d496f0bc4a9f.png)center / cover;"></div> <div style="grid-row-start:5;grid-row-end:6;grid-column-start:4;grid-column-end:5;line-height:22px;">Rank User</div> </div> <!-- CONTACT END--> <!-- WESPACE URL START--> <div style="width:100%;margin:10px 0;display:grid;grid-template-columns:1fr;border:2px solid #c2c2c2;"> <div style="grid-column-start:1;grid-column-end:3;padding:5px;"><b>WeSpace URL:</b> <br><span style="padding-left:5px;">http://www.wespace.com/mypage</span></div> </div> <!-- WESPACE URL END--> <!-- DETAILS START--> <div style="width:100%;margin:10px 0;display:grid;grid-template-columns:1px 1fr 2fr;grid-template-rows: 2em 1px repeat(13, 2em) 1px;gap:5px;border-right: 2px solid #c2c2c2;border-bottom: 2px solid #c2c2c2;border-left: 2px solid #c2c2c2;line-height:21px;"> <div style="grid-row-start:1;grid-row-end:2;grid-column-start:1;grid-column-end:6;background:#60A5FA;padding:0 10px;font-size:13px;border-top: 2px solid #c2c2c2;border-bottom: 2px solid #c2c2c2;"><b style="color:#fff;">Name's Details</b></div> <div style="grid-row-start:3;grid-row-end:4;grid-column-start:2;grid-column-end:3;background:#BFDBFE;color:#60A5FA;font-weight:bold;padding:2px 5px;">Status:</div> <div style="grid-row-start:3;grid-row-end:4;grid-column-start:3;grid-column-end:5;background:#DBEAFE;padding:2px 5px;">Answer</div> <div style="grid-row-start:4;grid-row-end:5;grid-column-start:2;grid-column-end:3;background:#BFDBFE;color:#60A5FA;font-weight:bold;padding:2px 5px;">Nickname(s):</div> <div style="grid-row-start:4;grid-row-end:5;grid-column-start:3;grid-column-end:5;background:#DBEAFE;padding:2px 5px;">Answer</div> <div style="grid-row-start:5;grid-row-end:6;grid-column-start:2;grid-column-end:3;background:#BFDBFE;color:#60A5FA;font-weight:bold;padding:2px 5px;">Title(s):</div> <div style="grid-row-start:5;grid-row-end:6;grid-column-start:3;grid-column-end:5;background:#DBEAFE;padding:2px 5px;">Answer</div> <div style="grid-row-start:6;grid-row-end:7;grid-column-start:2;grid-column-end:3;background:#BFDBFE;color:#60A5FA;font-weight:bold;padding:2px 5px;">Birthday:</div> <div style="grid-row-start:6;grid-row-end:7;grid-column-start:3;grid-column-end:5;background:#DBEAFE;padding:2px 5px;">Answer</div> <div style="grid-row-start:7;grid-row-end:8;grid-column-start:2;grid-column-end:3;background:#BFDBFE;color:#60A5FA;font-weight:bold;padding:2px 5px;">Height:</div> <div style="grid-row-start:7;grid-row-end:8;grid-column-start:3;grid-column-end:5;background:#DBEAFE;padding:2px 5px;">Answer</div> <div style="grid-row-start:8;grid-row-end:9;grid-column-start:2;grid-column-end:3;background:#BFDBFE;color:#60A5FA;font-weight:bold;padding:2px 5px;">Orientation:</div> <div style="grid-row-start:8;grid-row-end:9;grid-column-start:3;grid-column-end:5;background:#DBEAFE;padding:2px 5px;">Answer</div> <div style="grid-row-start:9;grid-row-end:10;grid-column-start:2;grid-column-end:3;background:#BFDBFE;color:#60A5FA;font-weight:bold;padding:2px 5px;">Zodiac:</div> <div style="grid-row-start:9;grid-row-end:10;grid-column-start:3;grid-column-end:5;background:#DBEAFE;padding:2px 5px;">Answer</div> <div style="grid-row-start:10;grid-row-end:11;grid-column-start:2;grid-column-end:3;background:#BFDBFE;color:#60A5FA;font-weight:bold;padding:2px 5px;">Religion:</div> <div style="grid-row-start:10;grid-row-end:11;grid-column-start:3;grid-column-end:5;background:#DBEAFE;padding:2px 5px;">Answer</div> <div style="grid-row-start:11;grid-row-end:12;grid-column-start:2;grid-column-end:3;background:#BFDBFE;color:#60A5FA;font-weight:bold;padding:2px 5px;">Occupation:</div> <div style="grid-row-start:11;grid-row-end:12;grid-column-start:3;grid-column-end:5;background:#DBEAFE;padding:2px 5px;">Answer</div> <div style="grid-row-start:12;grid-row-end:13;grid-column-start:2;grid-column-end:3;background:#BFDBFE;color:#60A5FA;font-weight:bold;padding:2px 5px;">Smoke/Drink:</div> <div style="grid-row-start:12;grid-row-end:13;grid-column-start:3;grid-column-end:5;background:#DBEAFE;padding:2px 5px;">Answer</div> <div style="grid-row-start:13;grid-row-end:14;grid-column-start:2;grid-column-end:3;background:#BFDBFE;color:#60A5FA;font-weight:bold;padding:2px 5px;">Hometown:</div> <div style="grid-row-start:13;grid-row-end:14;grid-column-start:3;grid-column-end:5;background:#DBEAFE;padding:2px 5px;">Answer</div> <div style="grid-row-start:14;grid-row-end:15;grid-column-start:2;grid-column-end:3;background:#BFDBFE;color:#60A5FA;font-weight:bold;padding:2px 5px;">Suitemate(s):</div> <div style="grid-row-start:14;grid-row-end:15;grid-column-start:3;grid-column-end:5;background:#DBEAFE;padding:2px 5px;">Answer</div> <div style="grid-row-start:15;grid-row-end:16;grid-column-start:2;grid-column-end:3;background:#BFDBFE;color:#60A5FA;font-weight:bold;padding:2px 5px;">PB:</div> <div style="grid-row-start:15;grid-row-end:16;grid-column-start:3;grid-column-end:5;background:#DBEAFE;padding:2px 5px;">Answer</div> </div> <!-- DETAILS END--> <!-- INTERESTS START--> <div style="width:100%;margin:10px 0;display:grid;grid-template-columns:1px 1fr 2fr;grid-template-rows: 2em 1px repeat(6, 0.5fr) 1px;gap:5px;border-right: 2px solid #c2c2c2;border-bottom: 2px solid #c2c2c2;border-left: 2px solid #c2c2c2;line-height:21px;"> <div style="grid-row-start:1;grid-row-end:2;grid-column-start:1;grid-column-end:6;background:#60A5FA;padding:0 10px;font-size:13px;border-top: 2px solid #c2c2c2;border-bottom: 2px solid #c2c2c2;"><b style="color:#fff;">Name's Interests</b></div> <div style="grid-row-start:3;grid-row-end:4;grid-column-start:2;grid-column-end:3;background:#BFDBFE;color:#60A5FA;font-weight:bold;padding:2px 5px;">Music:</div> <div style="grid-row-start:3;grid-row-end:4;grid-column-start:3;grid-column-end:5;background:#DBEAFE;padding:2px 5px;">Answer</div> <div style="grid-row-start:4;grid-row-end:5;grid-column-start:2;grid-column-end:3;background:#BFDBFE;color:#60A5FA;font-weight:bold;padding:2px 5px;">Movies:</div> <div style="grid-row-start:4;grid-row-end:5;grid-column-start:3;grid-column-end:5;background:#DBEAFE;padding:2px 5px;">Answer</div> <div style="grid-row-start:5;grid-row-end:6;grid-column-start:2;grid-column-end:3;background:#BFDBFE;color:#60A5FA;font-weight:bold;padding:2px 5px;">Television:</div> <div style="grid-row-start:5;grid-row-end:6;grid-column-start:3;grid-column-end:5;background:#DBEAFE;padding:2px 5px;">Answer</div> <div style="grid-row-start:6;grid-row-end:7;grid-column-start:2;grid-column-end:3;background:#BFDBFE;color:#60A5FA;font-weight:bold;padding:2px 5px;">Activities:</div> <div style="grid-row-start:6;grid-row-end:7;grid-column-start:3;grid-column-end:5;background:#DBEAFE;padding:2px 5px;">Answer</div> <div style="grid-row-start:7;grid-row-end:8;grid-column-start:2;grid-column-end:3;background:#BFDBFE;color:#60A5FA;font-weight:bold;padding:2px 5px;">Food:</div> <div style="grid-row-start:7;grid-row-end:8;grid-column-start:3;grid-column-end:5;background:#DBEAFE;padding:2px 5px;">Answer</div> <div style="grid-row-start:8;grid-row-end:9;grid-column-start:2;grid-column-end:3;background:#BFDBFE;color:#60A5FA;font-weight:bold;padding:2px 5px;">Heroes:</div> <div style="grid-row-start:8;grid-row-end:9;grid-column-start:3;grid-column-end:5;background:#DBEAFE;padding:2px 5px;">Answer</div> </div> <!-- INTERESTS END--> <!-- MUSIC PLAYER START--> <div style="width:100%;"> <a href="MUSICURL" style="text-decoration:none;"><div style="width:100%;height:58px;background:url(https://i.ibb.co/0j2rZT4G/wespace-player.png)center / cover;"><div style="float:right;width:52%;color:#fff;font-size:8px;margin-top:9px;line-height:1.1;"><b>Artist Name</b> <br>Song Title <br>playing</div></div></a> <div style="display:grid;grid-template: 20px 90px repeat(3, 50px) / 1.5fr 1fr 3fr;gap:0 10px;"> <div style="grid-column-start:1;grid-column-end:6;grid-row-start:1;grid-row-end:2;background:#2C2C2C"></div> <div style="grid-column-start:1;grid-column-end:3;grid-row-start:2;grid-row-end:4;background:#444 url(ALBUMCOVER)center / cover;"></div> <div style="grid-column-start:1;grid-column-end:3;grid-row-start:4;grid-row-end:6;color:#333333;padding:5px;background:#ccc;">Album Title</div> <div style="grid-column-start:3;grid-column-end:6;grid-row-start:2;grid-row-end:4;padding:5px 5px 0 0;line-height:1;"> Song Title Goes Here <br><span style="font-size:8px;color:#666;">Download | Rate | Comments | Lyrics | Add</span> <div style="width:100%;height:2px;border-top:2px dotted #888;margin:5px 0;"></div> Song Title Goes Here <br><span style="font-size:8px;color:#666;">Download | Rate | Comments | Lyrics | Add</span> <div style="width:100%;height:2px;border-top:2px dotted #888;margin:5px 0;"></div> Song Title Goes Here <br><span style="font-size:8px;color:#666;">Download | Rate | Comments | Lyrics | Add</span> <div style="width:100%;height:2px;border-top:2px dotted #888;margin:5px 0;"></div> Song Title Goes Here <br><span style="font-size:8px;color:#666;">Download | Rate | Comments | Lyrics | Add</span> </div> <div style="grid-column-start:3;grid-column-end:6;grid-row-start:4;grid-row-end:5;padding:25px 5px 0 0;"> <img src="https://i.ibb.co/Z6wh3Dv5/groups.png" width="40"> <div style="float:right;font-family:trebuchet ms,sans-serif;font-size:20px;font-weight:800;padding:0 5px;text-align:right;line-height:1;">wespace.com <br><span style="font-size:9px;float:right;">a place for friends</span></div> </div> <div style="grid-column-start:3;grid-column-end:6;grid-row-start:5;grid-row-end:6;padding:0 5px;"><div style="margin:26px auto;width:80%;height:20px;border:2px inset #9f9f9f;border-radius:8px;text-align:center;background:linear-gradient(180deg,rgba(242, 242, 242, 1) 0%, rgba(192, 192, 192, 1) 50%);font-weight:999;letter-spacing:-1px;font-family:arial;">STANDALONE PLAYER</div></div> </div> </div> <!-- MUSIC PLAYER END--> <!-- PLAYER DETAILS START--> <div style="width:100%;margin:10px 0;display:grid;grid-template-columns:1px 1fr 2fr;grid-template-rows: 2em 1px repeat(3, 2em) 1px;gap:5px;border-right: 2px solid #c2c2c2;border-bottom: 2px solid #c2c2c2;border-left: 2px solid #c2c2c2;line-height:21px;"> <div style="grid-row-start:1;grid-row-end:2;grid-column-start:1;grid-column-end:6;background:#60A5FA;padding:0 10px;font-size:13px;border-top: 2px solid #c2c2c2;border-bottom: 2px solid #c2c2c2;"><b style="color:#fff;">Player's Details</b></div> <div style="grid-row-start:3;grid-row-end:4;grid-column-start:2;grid-column-end:3;background:#BFDBFE;color:#60A5FA;font-weight:bold;padding:2px 5px;">Name:</div> <div style="grid-row-start:3;grid-row-end:4;grid-column-start:3;grid-column-end:5;background:#DBEAFE;padding:2px 5px;">Answer</div> <div style="grid-row-start:4;grid-row-end:5;grid-column-start:2;grid-column-end:3;background:#BFDBFE;color:#60A5FA;font-weight:bold;padding:2px 5px;">Timezone:</div> <div style="grid-row-start:4;grid-row-end:5;grid-column-start:3;grid-column-end:5;background:#DBEAFE;padding:2px 5px;">Answer</div> <div style="grid-row-start:5;grid-row-end:6;grid-column-start:2;grid-column-end:3;background:#BFDBFE;color:#60A5FA;font-weight:bold;padding:2px 5px;">Contact:</div> <div style="grid-row-start:5;grid-row-end:6;grid-column-start:3;grid-column-end:5;background:#DBEAFE;padding:2px 5px;"><user name=USERNAME site=plurk.com></div> </div> <!-- PLAYER DETAILS END--> </div> <!-- SIDEBAR END--> <!-- PROFILE START--> <div style="grid-column-start:2;grid-column-end:3;padding:0 0 0 15px;"> <div style="border:2px solid black;padding:25px 15px;margin-top:10px;font-size:16px;text-align:center;font-weight:bold;">Name is in your extended network</div> <!-- PERMISSIONS START--> <div style="width:100%;margin:10px 0;display:grid;grid-template-columns:1px 1fr 2fr;grid-template-rows: 2em 1px repeat(12, 0.1fr) 1px;gap:3px;border-right: 2px solid #60A5FA;border-bottom: 2px solid #60A5FA;border-left: 2px solid #60A5FA;line-height:1.5;font-size:11px;"> <div style="grid-row-start:1;grid-row-end:2;grid-column-start:1;grid-column-end:6;background:#60A5FA;padding:0 10px;font-size:13px;border-top: 2px solid #60A5FA;border-bottom: 2px solid #60A5FA;line-height:21px;"><b style="color:#fff;">Permissions</b></div> <div style="grid-row-start:3;grid-row-end:4;grid-column-start:2;grid-column-end:3;background:#BFDBFE;color:#60A5FA;font-weight:bold;padding:2px 5px;">Backtagging</div> <div style="grid-row-start:3;grid-row-end:4;grid-column-start:3;grid-column-end:5;background:#DBEAFE;padding:2px 5px;">Answer</div> <div style="grid-row-start:4;grid-row-end:5;grid-column-start:2;grid-column-end:3;background:#BFDBFE;color:#60A5FA;font-weight:bold;padding:2px 5px;">Assumed CR</div> <div style="grid-row-start:4;grid-row-end:5;grid-column-start:3;grid-column-end:5;background:#DBEAFE;padding:2px 5px;">Answer</div> <div style="grid-row-start:5;grid-row-end:6;grid-column-start:2;grid-column-end:3;background:#BFDBFE;color:#60A5FA;font-weight:bold;padding:2px 5px;">Tag Style / Speed</div> <div style="grid-row-start:5;grid-row-end:6;grid-column-start:3;grid-column-end:5;background:#DBEAFE;padding:2px 5px;">Answer</div> <div style="grid-row-start:6;grid-row-end:7;grid-column-start:2;grid-column-end:3;background:#BFDBFE;color:#60A5FA;font-weight:bold;padding:2px 5px;">Fourthwalling</div> <div style="grid-row-start:6;grid-row-end:7;grid-column-start:3;grid-column-end:5;background:#DBEAFE;padding:2px 5px;">Answer</div> <div style="grid-row-start:7;grid-row-end:8;grid-column-start:2;grid-column-end:3;background:#BFDBFE;color:#60A5FA;font-weight:bold;padding:2px 5px;">Threadjacking</div> <div style="grid-row-start:7;grid-row-end:8;grid-column-start:3;grid-column-end:5;background:#DBEAFE;padding:2px 5px;">Answer</div> <div style="grid-row-start:8;grid-row-end:9;grid-column-start:2;grid-column-end:3;background:#BFDBFE;color:#60A5FA;font-weight:bold;padding:2px 5px;">Crosscanon</div> <div style="grid-row-start:8;grid-row-end:9;grid-column-start:3;grid-column-end:5;background:#DBEAFE;padding:2px 5px;">Answer</div> <div style="grid-row-start:9;grid-row-end:10;grid-column-start:2;grid-column-end:3;background:#BFDBFE;color:#60A5FA;font-weight:bold;padding:2px 5px;">Physical Affection</div> <div style="grid-row-start:9;grid-row-end:10;grid-column-start:3;grid-column-end:5;background:#DBEAFE;padding:2px 5px;">Answer</div> <div style="grid-row-start:10;grid-row-end:11;grid-column-start:2;grid-column-end:3;background:#BFDBFE;color:#60A5FA;font-weight:bold;padding:2px 5px;">Physical Violence</div> <div style="grid-row-start:10;grid-row-end:11;grid-column-start:3;grid-column-end:5;background:#DBEAFE;padding:2px 5px;">Answer</div> <div style="grid-row-start:11;grid-row-end:12;grid-column-start:2;grid-column-end:3;background:#BFDBFE;color:#60A5FA;font-weight:bold;padding:2px 5px;">Mindreading / Magic</div> <div style="grid-row-start:11;grid-row-end:12;grid-column-start:3;grid-column-end:5;background:#DBEAFE;padding:2px 5px;">Answer</div> <div style="grid-row-start:12;grid-row-end:13;grid-column-start:2;grid-column-end:3;background:#BFDBFE;color:#60A5FA;font-weight:bold;padding:2px 5px;">Romance / Shipping</div> <div style="grid-row-start:12;grid-row-end:13;grid-column-start:3;grid-column-end:5;background:#DBEAFE;padding:2px 5px;">Answer</div> <div style="grid-row-start:13;grid-row-end:14;grid-column-start:2;grid-column-end:3;background:#BFDBFE;color:#60A5FA;font-weight:bold;padding:2px 5px;">NSFW / Smut</div> <div style="grid-row-start:13;grid-row-end:14;grid-column-start:3;grid-column-end:5;background:#DBEAFE;padding:2px 5px;">Answer</div> <div style="grid-row-start:14;grid-row-end:15;grid-column-start:2;grid-column-end:3;background:#BFDBFE;color:#60A5FA;font-weight:bold;padding:2px 5px;">Content Warnings</div> <div style="grid-row-start:14;grid-row-end:15;grid-column-start:3;grid-column-end:5;background:#DBEAFE;padding:2px 5px;">Answer</div> </div> <!-- PERMISSIONS END--> <!-- BLURBS START--> <div style="margin:20px 0;"> <b>Name's Latest Blog Entry</b> [<a href="https://USERNAME.dreamwidth.org/profile" style="text-decoration:none;"><b style="color:#1E40AF;">Subscribe to this Blog</b></a>]</lj-raw> network post title or first line   (<a href="NETWORK_URL" style="text-decoration:none;"><b style="color:#1E40AF;">view more</b></a>) network post title or first line   (<a href="NETWORK_URL" style="text-decoration:none;"><b style="color:#1E40AF;">view more</b></a>) [<a href="CHAR_TAG" style="text-decoration:none;"><b style="color:#1E40AF;">View All Blog Entries</b></a>]<lj-raw> </div> <!-- BLURBS END--> <!-- FIRST IMPRESSIONS START--> <div style="margin:30px 0 10px;"> <div style="width:100%;min-height:20px;background:#FAD189;padding:0 10px;font-weight:bold;color:#FF5300;font-size:13px;">First Impressions of Name</div> <div style="margin:10px 0;"></lj-raw><b style="color:#FF5300;">Visual:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <b style="color:#FF5300;">Aural:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <b style="color:#FF5300;">Olfactory:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <b style="color:#FF5300;">Demeanor:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<lj-raw> </div> </div> <!-- FIRST IMPRESSIONS END--> <!-- FRIEND SPACE START--> <div style="width:100%;min-height:20px;background:#FAD189;margin-top:30px;padding:0 10px;font-weight:bold;color:#FF5300;font-size:13px;">Name's Friend Space</div> <div style="margin:10px 0;"><b>Name Has <span style="color:#FF5300;font-size:15px;">69</span> Friends.</b> <!-- THIS IS YOUR TOP 8 ; WEAPONIZE RESPONSIBLY--> <div style="width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin:10px 0;padding:0 10px;text-align:center;font-size:11px;line-height:18px;"> <div><div style="width:100px;margin-bottom:2px;"><a href="JOURNALURL" style="color:#1E40AF;text-decoration:none;font-weight:bold;">Friend 1</a></div><div style="width:100px;height:100px;background:#eee url(IMG)center / cover;"></div></div> <div><div style="width:100px;margin-bottom:2px;"><a href="JOURNALURL" style="color:#1E40AF;text-decoration:none;font-weight:bold;">Friend 2</a></div><div style="width:100px;height:100px;background:#eee url(IMG)center / cover;"></div></div> <div><div style="width:100px;margin-bottom:2px;"><a href="JOURNALURL" style="color:#1E40AF;text-decoration:none;font-weight:bold;">Friend 3</a></div><div style="width:100px;height:100px;background:#eee url(IMG)center / cover;"></div></div> <div><div style="width:100px;margin-bottom:2px;"><a href="JOURNALURL" style="color:#1E40AF;text-decoration:none;font-weight:bold;">Friend 4</a></div><div style="width:100px;height:100px;background:#eee url(IMG)center / cover;"></div></div> <div><div style="width:100px;margin-bottom:2px;"><a href="JOURNALURL" style="color:#1E40AF;text-decoration:none;font-weight:bold;">Friend 5</a></div><div style="width:100px;height:100px;background:#eee url(IMG)center / cover;"></div></div> <div><div style="width:100px;margin-bottom:2px;"><a href="JOURNALURL" style="color:#1E40AF;text-decoration:none;font-weight:bold;">Friend 6</a></div><div style="width:100px;height:100px;background:#eee url(IMG)center / cover;"></div></div> <div><div style="width:100px;margin-bottom:2px;"><a href="JOURNALURL" style="color:#1E40AF;text-decoration:none;font-weight:bold;">Friend 7</a></div><div style="width:100px;height:100px;background:#eee url(IMG)center / cover;"></div></div> <div><div style="width:100px;margin-bottom:2px;"><a href="JOURNALURL" style="color:#1E40AF;text-decoration:none;font-weight:bold;">Friend 8</a></div><div style="width:100px;height:100px;background:#eee url(IMG)center / cover;"></div></div> </div> <div style="text-align:right;margin-top:30px;"><a href="CR_URL" style="text-decoration:none;"><b style="color:#ED0707;">View All of Name's Friends</b></a></div> </div> <!-- FRIEND SPACE END--> </div> <!-- PROFILE END--> </div> <div style="max-width:850px;margin:0 auto;font-size:9px;text-transform:uppercase;text-align:center;font-family:helvetica,sans-serif;">code © <a href="https://metahumans.dreamwidth.org">miyou</a></div> </lj-raw>

INSTRUCTIONS + NOTES

✨ This code is not 100% mobile friendly, sorry about that. Columns will automatically resize but it'll still look a little squished. :(

✨ Mind the lj-raw tags in the Blurbs and First Impressions sections!

✨ Sections are noted with START and END for easy removal or copying.

✨ If you want to add or remove rows from any of the grids (Permissions, Details, Interests), change the first repeating value (#) in grid-template-rows: v v repeat(#, v) v. DO NOT change any of the other values (v). You will also have to edit the grid-row-start and grid-row-end values if you add or remove rows.

✨ There are several hidden links:

1. View More Pics, links to all uploaded userpics (only change JOURNAL), or you can change it to link to a visuals board
2. Send Message, links to character inbox (INBOXURL)
3. Music Player, links to a song or playlist (MUSICURL)
4. Subscribe to this Blog, links to user profile
5. View More (under Blog Entries), links to a character network post (NETWORK_URL)
6. View All Blog Entries, links to your character's network tag (CHAR_TAG)
7. Friend Name, links to CR journal (JOURNALURL)
8. View All Friends, links to CR chart (CR_URL)

Feel free to remove these if you don't want them!

✨ All images will scale to fit their containers. Don't worry about using a userpic for Friend Space unless you want to.

✨ This code comes with a built-in credit line. I don't mind if you edit or Frankenstein this code with another as long as you leave the original credit. ♥

✨ For any questions or troubleshooting, leave me a comment below! I hope you enjoy this blast from the past. ^_^

PICK YOUR AD

I found so, so many. Some of these are NSFW! Open at your own risk.

cw flashing, blinking, nsfw

wespace.com
a place for friends

| Web ▾

Search

Home | Mail ▾ | Profile ▾ | Friends ▾ | Music | WeSpaceTV | More ▾ |

My Account | Sign Out

Name

"short status or quote here"

Gender
29 years old

Saltburnt, UNITED KINGDOM

Online Now!

Last Login: 08/28/2007

View more pics

Contacting Name

Send Message

Forward to Friend

Add to Friends

Add to Favorites

Instant Message

Block User

Add to Group

Rank User

WeSpace URL:
http://www.wespace.com/mypage

Name's Details

Status:

Answer

Nickname(s):

Answer

Title(s):

Answer

Birthday:

Answer

Height:

Answer

Orientation:

Answer

Zodiac:

Answer

Religion:

Answer

Occupation:

Answer

Smoke/Drink:

Answer

Hometown:

Answer

Suitemate(s):

Answer

PB:

Answer

Name's Interests

Music:

Answer

Movies:

Answer

Television:

Answer

Activities:

Answer

Food:

Answer

Heroes:

Answer

Artist Name
Song Title
playing

Album Title

Song Title Goes Here
Download | Rate | Comments | Lyrics | Add

Song Title Goes Here
Download | Rate | Comments | Lyrics | Add

Song Title Goes Here
Download | Rate | Comments | Lyrics | Add

Song Title Goes Here
Download | Rate | Comments | Lyrics | Add

wespace.com
a place for friends

STANDALONE PLAYER

Player's Details

Name:

Answer

Timezone:

Answer

Contact:

USERNAME

Name is in your extended network

Permissions

Backtagging

Answer

Assumed CR

Answer

Tag Style / Speed

Answer

Fourthwalling

Answer

Threadjacking

Answer

Crosscanon

Answer

Physical Affection

Answer

Physical Violence

Answer

Mindreading / Magic

Answer

Romance / Shipping

Answer

NSFW / Smut

Answer

Content Warnings

Answer

Name's Latest Blog Entry [Subscribe to this Blog]

network post title or first line   (view more)
network post title or first line   (view more)

[View All Blog Entries]

First Impressions of Name

Visual:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Aural:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Olfactory:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Demeanor:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Name's Friend Space

Name Has 69 Friends.

Friend 1

Friend 2

Friend 3

Friend 4

Friend 5

Friend 6

Friend 7

Friend 8

View All of Name's Friends

code © miyou

Comments

[parasitic]

this is so awesome!!! (°ロ°)

[vigilanting]

thank you!! it was a lot of fun to work on hehe (｡･∀･)ﾉﾞ

[10billionghosts]

sjalkfdf I love this. The ad is sending me, and the presentation is just so clean.

[vigilanting]

omg hi i've learned so much from Your codes which even made this possible so really this is like your godchild 🥹 i'm so glad you like it! the ad really was Necessary to remind us all of better(?) times