[html - navigation/infopost] Replicated Pages

[madduck]

10/07/2025 — Adjusted code.

• Free to use, and edit.


• Semi-mobile compatible.


• This is best viewed on desktop.


• Please don't remove the credit at the bottom. Thanks! :D

<lj-raw> <!-- CONTAINER START --> <div style="background:url('https://madduck.dreamwidth.org/file/6385.png');background-size:cover;width:655px;max-width:75%;margin:0 auto;border:10px solid #995B32;padding:20px;"> <div style="margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-around;align-content:center;"> <!-- HEADER START --> <div style="vertical-align:middle;width:100%;margin:2px;"> <img src="https://madduck.dreamwidth.org/file/5413.png" width="80px"><span style="font-size:23px;font-family:serif, georgia;font-weight:bold;color:#654B33;"> Navigation </span><img src="https://madduck.dreamwidth.org/file/5741.png" width="80px"> </div> <!-- HEADER END --> <!-- CHARACTER NAME/TITLE BOX START --> <div style="vertical-align:middle;width:47.7%;flex-grow:2;margin:2px;justify-content:center;align-items:center:align-content:start;"> <div style="display:flex;flex-wrap:wrap;justify-content:center;align-items:center:align-content:start;"> <div style="vertical-align:middle;margin:2px;margin-bottom:7px;width:100%;"> <!-- CHARACTER NAME START --> <div style="display:flex;flex-wrap:wrap;justify-content:center;align-items:center:align-content:start;"> <div style="vertical-align:middle;background:#836407;width:10%;flex-grow:3;"> <p style="margin:3px;font-size:17px;font-family:serif, georgia;font-weight:bold;text-align:center;color:#fff9db;">Name</a> </div> <div style="vertical-align:middle;border:1px #836407 solid;width:80%;"> <p style="margin:3px;font-size:17px;font-family:serif, georgia;color:#654B33;"> (INSERT CHARACTER NAME HERE) </a> </div> </div> <!-- CHARACTER NAME END --> <!-- TITLE NAME START --> <div style="display:flex;flex-wrap:wrap;justify-content:space-around;align-content:center;"> <div style="vertical-align:middle;background:#836407;width:10%;flex-grow:3;"> <p style="margin:3px;font-size:17px;font-family:serif, georgia;font-weight:bold;text-align:center;color:#fff9db;">Title</a> </div> <div style="vertical-align:middle;border:1px #836407 solid;width:80%;"> <p style="margin:3px;font-size:17px;font-family:serif, georgia;color:#654B33;"> (INSERT TITLE HERE) </a> </div> <!-- TITLE NAME END --> </div> </div> <!-- CHARACTER NAME/TITLE BOX END --> <!-- LINK CONTAINER START --> <div style="vertical-align:middle;margin:2px;width:100%;"> <div style="vertical-align:middle;background:#EAE7CB;padding:8px;height:235px;overflow-y:auto;scrollbar-color:#836407 #EAE7CB;box-shadow: 3px 3px #99906D;"> <!-- OOC LINKS (BOX 1) --> <details open style="margin:0"> <summary style="font-size:17px;font-family:serif, georgia;color:#654B33;font-weight:bold;margin-left:5px;">About</summary> <p style="font-size:15px;font-family:serif, georgia;color:#654B33;margin-left:10px;"> <a href="(INSERT LINK 1)">Canon Info</a><br> <a href="(INSERT LINK 2)">Permissions</a><br> <a href="(INSERT LINK 3)">Contact</a> </p> </details> <!-- OTHER LINKS (BOX 2) --> <details open style="margin:0"> <summary style="font-size:17px;font-family:serif, georgia;color:#654B33;font-weight:bold;margin-left:5px;">Game 1</summary> <p style="font-size:15px;font-family:serif, georgia;color:#654B33;margin-left:10px;"> <a href="(INSERT LINK 1)">Link 1</a><br> <a href="(INSERT LINK 2)">Link 2</a><br> <a href="(INSERT LINK 3)">Link 3</a> </p> </details> <!-- EVEN MORE LINKS (BOX 3) --> <details style="margin:0"> <summary style="font-size:17px;font-family:serif, georgia;color:#654B33;font-weight:bold;margin-left:5px;">Game 2</summary> <p style="font-size:15px;font-family:serif, georgia;color:#654B33;margin-left:10px;"> <a href="(INSERT LINK 1)">Link 1</a><br> <a href="(INSERT LINK 2)">Link 2</a><br> <a href="(INSERT LINK 3)">Link 3</a> </p> </details> <!-- You're free to remove boxes 2 and 3 if you don't need them. --> <!-- Add more boxes below this line. --> </div></div></div></div> <!-- LINK CONTAINER END --> <!-- CHARACTER IMAGE START --> <!-- Recommended image size is [300px x 350px] --> <div style="vertical-align:middle;width:47.7%;flex-grow:2;margin:2px;"> <div style="rotate:8deg;margin:0;"><img src="(INSERT IMAGE LINK HERE)" style="border:12px solid #FFFFFD;max-height:350px;max-width:300px;box-shadow:3px 5px #332B13;"></div> </div> <!-- CHARACTER IMAGE END --> <!-- CHARACTER PROFILE START--> <div style="vertical-align:middle;width:100%;margin:2px;"> <div style="vertical-align:middle;background-color:#C7AD88;border:7px solid #FEF5E1;border-left:15px solid #7D522E;border-top-left-radius:20px;border-bottom-left-radius:20px;padding:5px;box-shadow:3px 4px #83795A;height:100px;overflow-y:auto;scrollbar-color:#7D522E #C7AD88;"> <p style="color:#654B33;font-family:serif, georgia;font-size:20px;margin:0;font-weight:bold;"> Profile </p> <!-- DESCRIPTION START --> <p style="color:#654B33;font-family:serif, georgia;font-size:17px;margin-left:10px;margin-right:10px;"> [Insert short description here.] </p> <!-- DESCRIPTION END --> </div> </div> <!-- CHARACTER PROFILE END --> <!-- FOOTER START --> <div style="vertical-align:middle;width:100%;margin:2px;"> <div style="background:url('https://madduck.dreamwidth.org/file/6100.png');background-size:auto 30px;height:30px;border-left:5px solid #654B33;border-right:5px solid #654B33;">   </div></div> <!-- FOOTER END --> </div></div> <!-- CONTAINER END --> <br> <!-- CREDITS START --> <center><small><p>BG and coding by <user name="madduck"></p></small></center> <!-- CREDITS END --> </lj-raw>