[15] GitS Inspired Biosheet x2

[lina_trinch]

Codes:

Light Mode Live Preview Here <center> <div style="border: 20px solid #fff;width: 800px;background: #fff;"> <!----TOP SECTION----> <div style="width: 100%;border-left: 2px solid #72739e;border-right: 2px solid #72739e;border-top: 3px solid #72739e;background: linear-gradient(360deg, #fff, #c9c9c9);"> <!----IMAGE----> <div style="display:inline-block;"> <div style="width: 200px; height: 200px;border: 20px double #b8bae3;border-radius: 100%;margin-top: 10px;"> <div style="width: 200px;height: 200px;background: linear-gradient(to right bottom, rgba(0,0,0,0) 50%, #b8bae3 50%,#72739e 55%, rgba(0,0,0,0) 55%);"> <div style="background: url(HEADER_IMG);background-position:center;background-size: cover; width: 200px; height: 200px;border-radius: 100%;"></div></div></div> </div> <!----HEADER----> <div style="float: left;margin-left: 30px;margin-top: 70px;"> <font style="font-size: 50px;font-family: courier;font-weight: bold;">Character <div style="width: 400px; height: 4px;background: linear-gradient(90deg, rgba(0,0,0,0),#72739e, rgba(0,0,0,0));margin-bottom: -10px;"></div> <font style="font-weight: normal;font-size: 30px;">Canon</font></div> </div> <!----END TOP SECTION----> <!----VISUALS MODULE----> <div style="height: 95px;border-left: 2px solid #72739e;border-right: 2px solid #72739e;"> <div style="display:inline-block;border: 5px outset #b8bae3;background: url(ICON_IMG);background-position:center;background-size:cover;width: 80px;height: 80px;box-shadow: -3px 4px 10px #b8bae3;border-radius: 50% 50% 50% 50%;margin-left: -30px"></div> <div style="display:inline-block;border: 5px outset #b8bae3;background: url(ICON_IMG);background-position:center;background-size:cover;width: 80px;height: 80px;box-shadow: -3px 4px 10px #b8bae3;border-radius: 50% 50% 50% 50%;margin-left: -30px"></div> <div style="display:inline-block;border: 5px outset #b8bae3;background: url(ICON_IMG);background-position:center;background-size:cover;width: 80px;height: 80px;box-shadow: -3px 4px 10px #b8bae3;border-radius: 50% 50% 50% 50%;margin-left: -30px"></div> <div style="display:inline-block;border: 5px outset #b8bae3;background: url(ICON_IMG);background-position:center;background-size:cover;width: 80px;height: 80px;box-shadow: -3px 4px 10px #b8bae3;border-radius: 50% 50% 50% 50%;margin-left: -30px"></div> <div style="display:inline-block;border: 5px outset #b8bae3;background: url(ICON_IMG);background-position:center;background-size:cover;width: 80px;height: 80px;box-shadow: -3px 4px 10px #b8bae3;border-radius: 50% 50% 50% 50%;margin-left: -30px"></div> <div style="display:inline-block;border: 5px outset #b8bae3;background: url(ICON_IMG);background-position:center;background-size:cover;width: 80px;height: 80px;box-shadow: -3px 4px 10px #b8bae3;border-radius: 50% 50% 50% 50%;margin-left: -30px"></div> </div> <!----END VISUALS MODULE----> <!----PART 1----> <div style="height: 300px"> <!----ABOUT MODULE----> <div style="border-left: 2px solid #72739e;border-right: 1px solid #72739e;border-bottom: 3px solid #72739e;float: left;height: 300px;width: 50%;"> <div style="float: left;width: 50px; height: 50px;border: 8px double #b8bae3;border-radius: 100%;text-align: left;margin-left: 5px;"> <div style="width: 350px;height: 80px;background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #b8bae3 50%,#72739e 55%, rgba(0,0,0,0) 55%);padding-left: 10px;"> <font style="font-weight: normal;font-size: 40px;font-family:courier;">About </div></div> <br /><div style="width: 100%; height: 224px;overflow-y: auto;text-align:justify;line-height: 12px;padding: 5px;background: linear-gradient(180deg, #fff, #c9c9c9);"><font style="font-size: 15px;font-family:courier;"> <b><u>Alias</u>:</b> Lorem Ipsum <br /><b><u>Age</u>:</b> Lorem Ipsum <br /><b><u>Birthday</u>:</b> Lorem Ipsum <br /><b><u>Gender</u>:</b> Lorem Ipsum <br /><b><u>Sexuality</u>:</b> Lorem Ipsum <br /><br /><font style="font-size: 12px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lacinia consectetur congue. Proin et leo ut ligula mollis ornare. </font></font></div></div> <!----END ABOUT MODULE----> <!----PERSONALITY MODULE----> <div style="border-left: 1px solid #72739e;border-right: 2px solid #72739e;border-bottom: 3px solid #72739e;float: right;height: 300px;width: 50%;"> <div style="float: left;width: 50px; height: 50px;border: 8px double #b8bae3;border-radius: 100%;text-align: left;margin-left: 5px;"> <div style="width: 350px;height: 80px;background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #b8bae3 50%,#72739e 55%, rgba(0,0,0,0) 55%);padding-left: 10px;"> <font style="font-weight: normal;font-size: 40px;font-family:courier;">Personality </div></div> <br /><div style="width: 100%; height: 224px;overflow-y: auto;text-align:justify;padding: 5px;background: linear-gradient(180deg, #fff, #c9c9c9);"> <font style="font-size: 14px;color: #fff;font-weight:bold;font-variant:normal;font-family:courier;"> <div style="float:left; height: 20px;width: 65%;align:center;"><div style="width: PERCENT%;height: 20px;float:left;background: #72739e;text-align:left;padding-left: 5px;border-radius: 0 10px 10px 0"> PERCENT% TRAIT </div></div> <div style="float:left; height: 20px;width: 65%;align:center;"><div style="width: PERCENT%;height: 20px;float:left;background: #b8bae3;text-align:left;padding-left: 5px;border-radius: 0 10px 10px 0"> PERCENT% TRAIT </div></div> <div style="float:left; height: 20px;width: 65%;align:center;"><div style="width: PERCENT%;height: 20px;float:left;background: #72739e;text-align:left;padding-left: 5px;border-radius: 0 10px 10px 0"> PERCENT% TRAIT </div></div> <div style="float:left; height: 20px;width: 65%;align:center;"><div style="width: PERCENT%;height: 20px;float:left;background: #b8bae3;text-align:left;padding-left: 5px;border-radius: 0 10px 10px 0"> PERCENT% TRAIT </div></div> <div style="float:left; height: 20px;width: 65%;align:center;"><div style="width: PERCENT%;height: 20px;float:left;background: #72739e;text-align:left;padding-left: 5px;border-radius: 0 10px 10px 0"> PERCENT% TRAIT </div></div> <font style="font-size: 36px;font-variant:small-caps;font-weight:bold;color: #555678;"> P_TYPE <font style="font-size: 20px;font-weight:normal;letter-spacing: 8px;"> AAAA-A <div style="text-align:justify;line-height: 12px;"><font style="font-size: 12px;letter-spacing:normal;font-variant:normal;color: initial;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at sem nulla. Nullam ultrices lacinia cursus. </font></font></font></font> </div></div></div> <!----END PERSONALITY MODULE----> <!----END PART 1----> <!----PART 2 HISTORY----> <div style="border-left: 2px solid #72739e;border-right: 2px solid #72739e;border-bottom: 3px solid #72739e;width: 100%; height:300px;"> <div style="float: left;width: 50px; height: 50px;border: 8px double #b8bae3;border-radius: 100%;text-align: left;margin-left: 5px;margin-top: 5px;"> <div style="width: 700px;height: 80px;background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #b8bae3 50%,#72739e 55%, rgba(0,0,0,0) 55%);padding-left: 10px;"> <font style="font-weight: normal;font-size: 40px;font-family:courier;">History </div></div> <br /><div style="width: 100%; height: 216px;overflow-y: auto;padding: 5px;background: linear-gradient(180deg, #fff, #c9c9c9);"><div style="text-align:justify;line-height: 12px;"><font style="font-size: 12px;letter-spacing:normal;font-variant:normal;font-family:courier;"> <img src="HIST_IMG" style="float:right;width: 300px;border: 10px solid transparent;border-radius: 100px 25px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at sem nulla. Nullam ultrices lacinia cursus. </font></div></div> <!----END PART 2 HISTORY----> </div> <!----PART 3----> <div style="height: 300px"> <!----RELATIONSHIPS MODULE----> <div style="border-left: 2px solid #72739e;border-right: 1px solid #72739e;border-bottom: 3px solid #72739e;float: left;height: 300px;width: 50%;"> <div style="float: left;width: 50px; height: 50px;border: 8px double #b8bae3;border-radius: 100%;text-align: left;margin-left: 5px;margin-top: 5px;"> <div style="width: 350px;height: 80px;background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #b8bae3 50%,#72739e 55%, rgba(0,0,0,0) 55%);padding-left: 10px;"> <font style="font-weight: normal;font-size: 40px;font-family:courier;">Relations </div></div> <br /><div style="line-height: 12px;width: 100%; height: 219px;overflow-y: auto;text-align:justify;padding: 5px;background: linear-gradient(180deg, #fff, #c9c9c9);"> <!----ICON LEFT----> <div style="padding: 5px;border: 1px solid #000;"> <img src="RELATION_IMG" style="width: 80px;float:left;border-radius: 5px 25px;border:4px inset #72739e;margin-right: 5px;"> <font style="font-size: 15px;font-weight:bold;font-family:courier;"><u>Char Name</u> <br /><font style="font-size: 12px;font-weight:normal;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at sem nulla. Nullam ultrices lacinia cursus. </font></font></div> <!----ICON LEFT END----> <!----ICON RIGHT----> <div style="padding: 5px;"> <img src="RELATION_IMG" style="width: 80px;float:right;border-radius: 5px 25px;border:4px inset #72739e;margin-left: 5px;"> <font style="font-size: 15px;font-weight:bold;font-family:courier;"><br /><br /><u>Char Name</u> <br /><font style="font-size: 12px;font-weight:normal;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at sem nulla. Nullam ultrices lacinia cursus. </font></font></div> <!----ICON RIGHT END----> <!----ADD NEW CHARACTERS BELOW HERE----> </div></div> <!----END RELATIONSHIPS MODULE----> <!----MUSIC MODULE----> <div style="border-left: 1px solid #72739e;border-right: 2px solid #72739e;border-bottom: 3px solid #72739e;float: right;height: 300px;width: 50%;"> <div style="float: left;width: 50px; height: 50px;border: 8px double #b8bae3;border-radius: 100%;text-align: left;margin-left: 5px;margin-top: 5px;"> <div style="width: 350px;height: 80px;background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #b8bae3 50%,#72739e 55%, rgba(0,0,0,0) 55%);padding-left: 10px;"> <font style="font-weight: normal;font-size: 40px;font-family:courier;">Music </div></div> <br /><div style="width: 100%; height: 219px;overflow-y: auto;text-align:justify;padding: 5px;background: linear-gradient(180deg, #fff, #c9c9c9);"> <!---SONG---> <div style="text-align:left;margin-left: 10px;color: #878ade;font-size: 25px;font-family:monospace;">♫<a href="URL" style="color:#454782;text-decoration:none;font-size:15px;font-family:courier;"> Song Name - Song Artist </a><div style="background: #898aa3;height: 2px;width: 98%;"></div> <div style="text-align:center;color:#6e6e6e;margin-top:5px;font-size: 13px;margin-bottom:5px;line-height: 12px;"> Lyric lyric lyric<br /> lyric lyric<br /> La La La La La </div></div> <!---ADD NEW SONGS BELOW HERE---> </div></div> <!----END MUSIC MODULE----> </div> <!----END PART 3----> <!----ENDING----> <div style="border-left: 2px solid #72739e;border-right: 2px solid #72739e;border-bottom: 3px solid #72739e;text-align:right;"><a href="https://killthecake.dreamwidth.org/" style="text-decoration:none;font-size: 10px;font-family:monospace;color:#575878;margin-right:10px;font-weight:bold;">BY KILLTHECAKE</a> </div></div>

Dark Mode Live Preview Here <center> <div style="border: 20px solid #949494;width: 800px;background: #262626;"> <!----TOP SECTION----> <div style="width: 100%;border-left: 2px solid #d3d4f0;border-right: 2px solid #d3d4f0;border-top: 3px solid #d3d4f0;background: linear-gradient(360deg, #262626, #636363);"> <!----IMAGE----> <div style="display:inline-block;"> <div style="width: 200px; height: 200px;border: 20px double #b8bae3;border-radius: 100%;margin-top: 10px;"> <div style="width: 200px;height: 200px;background: linear-gradient(to right bottom, rgba(0,0,0,0) 50%, #b8bae3 50%,#72739e 55%, rgba(0,0,0,0) 55%);"> <div style="background: url(HEADER_IMG);background-position:center;background-size: cover; width: 200px; height: 200px;border-radius: 100%;"></div></div></div> </div> <!----HEADER----> <div style="float: left;margin-left: 30px;margin-top: 70px;"> <font style="font-size: 50px;font-family: courier;font-weight: bold;color: #b7baeb">Character <div style="width: 400px; height: 4px;background: linear-gradient(90deg, rgba(0,0,0,0),#d3d4f0, rgba(0,0,0,0));margin-bottom: -10px;"></div> <font style="font-weight: normal;font-size: 30px;">Canon</font></div> </div> <!----END TOP SECTION----> <!----VISUALS MODULE----> <div style="height: 95px;border-left: 2px solid #d3d4f0;border-right: 2px solid #d3d4f0;"> <div style="display:inline-block;border: 5px outset #b8bae3;background: url(ICON_IMG);background-position:center;background-size:cover;width: 80px;height: 80px;box-shadow: -3px 4px 10px #72739e;border-radius: 50% 50% 50% 50%;margin-left: -30px"></div> <div style="display:inline-block;border: 5px outset #b8bae3;background: url(ICON_IMG);background-position:center;background-size:cover;width: 80px;height: 80px;box-shadow: -3px 4px 10px #72739e;border-radius: 50% 50% 50% 50%;margin-left: -30px"></div> <div style="display:inline-block;border: 5px outset #b8bae3;background: url(ICON_IMG);background-position:center;background-size:cover;width: 80px;height: 80px;box-shadow: -3px 4px 10px #72739e;border-radius: 50% 50% 50% 50%;margin-left: -30px"></div> <div style="display:inline-block;border: 5px outset #b8bae3;background: url(ICON_IMG);background-position:center;background-size:cover;width: 80px;height: 80px;box-shadow: -3px 4px 10px #72739e;border-radius: 50% 50% 50% 50%;margin-left: -30px"></div> <div style="display:inline-block;border: 5px outset #b8bae3;background: url(ICON_IMG);background-position:center;background-size:cover;width: 80px;height: 80px;box-shadow: -3px 4px 10px #72739e;border-radius: 50% 50% 50% 50%;margin-left: -30px"></div> <div style="display:inline-block;border: 5px outset #b8bae3;background: url(ICON_IMG);background-position:center;background-size:cover;width: 80px;height: 80px;box-shadow: -3px 4px 10px #72739e;border-radius: 50% 50% 50% 50%;margin-left: -30px"></div> </div> <!----END VISUALS MODULE----> <!----PART 1----> <div style="height: 300px"> <!----ABOUT MODULE----> <div style="border-left: 2px solid #d3d4f0;border-right: 1px solid #d3d4f0;border-bottom: 3px solid #d3d4f0;float: left;height: 300px;width: 50%;"> <div style="float: left;width: 50px; height: 50px;border: 8px double #72739e;border-radius: 100%;text-align: left;margin-left: 5px;"> <div style="width: 350px;height: 80px;background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #b8bae3 50%,#72739e 55%, rgba(0,0,0,0) 55%);padding-left: 10px;"> <font style="font-weight: normal;font-size: 40px;font-family:courier;color: #fff;">About </div></div> <br /><div style="width: 100%; height: 224px;overflow-y: auto;text-align:justify;line-height: 12px;background: linear-gradient(180deg, #262626, #636363);padding: 5px;"><font style="font-size: 15px;font-family:courier;color: #ebebeb;"> <b><u>Alias</u>:</b> Lorem Ipsum <br /><b><u>Age</u>:</b> Lorem Ipsum <br /><b><u>Birthday</u>:</b> Lorem Ipsum <br /><b><u>Gender</u>:</b> Lorem Ipsum <br /><b><u>Sexuality</u>:</b> Lorem Ipsum <br /><br /><font style="font-size: 12px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lacinia consectetur congue. Proin et leo ut ligula mollis ornare. </font></font></div></div> <!----END ABOUT MODULE----> <!----PERSONALITY MODULE----> <div style="border-left: 1px solid #d3d4f0;border-right: 2px solid #d3d4f0;border-bottom: 3px solid #d3d4f0;float: right;height: 300px;width: 50%;"> <div style="float: left;width: 50px; height: 50px;border: 8px double #72739e;border-radius: 100%;text-align: left;margin-left: 5px;"> <div style="width: 350px;height: 80px;background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #b8bae3 50%,#72739e 55%, rgba(0,0,0,0) 55%);padding-left: 10px;"> <font style="font-weight: normal;font-size: 40px;font-family:courier;color: #fff;">Personality </div></div> <br /><div style="width: 100%; height: 224px;overflow-y: auto;text-align:justify;background: linear-gradient(180deg, #262626, #636363);padding: 5px;"> <font style="font-size: 14px;font-weight:bold;font-variant:normal;font-family:courier;color: #000;"> <div style="float:left; height: 20px;width: 65%;align:center;"><div style="width: PERCENT%;height: 20px;float:left;background: #72739e;text-align:left;padding-left: 5px;border-radius: 0 10px 10px 0"> PERCENT% TRAIT </div></div> <div style="float:left; height: 20px;width: 65%;align:center;"><div style="width: PERCENT%;height: 20px;float:left;background: #b8bae3;text-align:left;padding-left: 5px;border-radius: 0 10px 10px 0"> PERCENT% TRAIT </div></div> <div style="float:left; height: 20px;width: 65%;align:center;"><div style="width: PERCENT%;height: 20px;float:left;background: #72739e;text-align:left;padding-left: 5px;border-radius: 0 10px 10px 0"> PERCENT% TRAIT </div></div> <div style="float:left; height: 20px;width: 65%;align:center;"><div style="width: PERCENT%;height: 20px;float:left;background: #b8bae3;text-align:left;padding-left: 5px;border-radius: 0 10px 10px 0"> PERCENT% TRAIT </div></div> <div style="float:left; height: 20px;width: 65%;align:center;"><div style="width: PERCENT%;height: 20px;float:left;background: #72739e;text-align:left;padding-left: 5px;border-radius: 0 10px 10px 0"> PERCENT% TRAIT </div></div> <font style="font-size: 36px;font-variant:small-caps;font-weight:bold;color: #b7baeb;"> P_TYPE <font style="font-size: 20px;font-weight:normal;letter-spacing: 8px;"> AAAA-A <div style="text-align:justify;line-height: 12px;"><font style="font-size: 12px;letter-spacing:normal;font-variant:normal;color: #ebebeb"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at sem nulla. Nullam ultrices lacinia cursus. </font></font></font></font> </div></div></div> <!----END PERSONALITY MODULE----> <!----END PART 1----> <!----PART 2 HISTORY----> <div style="border-left: 2px solid #d3d4f0;border-right: 2px solid #d3d4f0;border-bottom: 3px solid #d3d4f0;width: 100%; height:300px;"> <div style="float: left;width: 50px; height: 50px;border: 8px double #72739e;border-radius: 100%;text-align: left;margin-left: 5px;margin-top: 5px;"> <div style="width: 700px;height: 80px;background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #b8bae3 50%,#72739e 55%, rgba(0,0,0,0) 55%);padding-left: 10px;"> <font style="font-weight: normal;font-size: 40px;font-family:courier;color: #fff;">History </div></div> <br /><div style="width: 100%; height: 216px;overflow-y: auto;background: linear-gradient(180deg, #262626, #636363);padding: 5px;"><div style="text-align:justify;line-height: 12px;"><font style="font-size: 12px;letter-spacing:normal;font-variant:normal;font-family:courier;color: #ebebeb;"> <img src="HIST_IMG" style="float:right;width: 300px;border: 10px solid transparent;border-radius: 100px 25px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at sem nulla. Nullam ultrices lacinia cursus. </font></div></div> <!----END PART 2 HISTORY----> </div> <!----PART 3----> <div style="height: 300px"> <!----RELATIONSHIPS MODULE----> <div style="border-left: 2px solid #d3d4f0;border-right: 1px solid #d3d4f0;border-bottom: 3px solid #d3d4f0;float: left;height: 300px;width: 50%;"> <div style="float: left;width: 50px; height: 50px;border: 8px double #72739e;border-radius: 100%;text-align: left;margin-left: 5px;margin-top: 5px;"> <div style="width: 350px;height: 80px;background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #b8bae3 50%,#72739e 55%, rgba(0,0,0,0) 55%);padding-left: 10px;"> <font style="font-weight: normal;font-size: 40px;font-family:courier;color: #fff;">Relations </div></div> <br /><div style="line-height: 12px;width: 100%; height: 219px;overflow-y: auto;text-align:justify;background: linear-gradient(180deg, #262626, #636363);padding: 5px;color: #ebebeb;"> <!---ICON LEFT---> <div style="padding: 5px;border: 1px solid #fff;"> <img src="RELATION_IMG" style="width: 80px;float:left;border-radius: 5px 25px;border:4px inset #b8bae3;margin-right: 5px;"> <font style="font-size: 15px;font-weight:bold;font-family:courier;"><u>Char Name</u> <br /><font style="font-size: 12px;font-weight:normal;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at sem nulla. Nullam ultrices lacinia cursus. </font></font></div> <!---ICON LEFT END---> <!---ICON RIGHT---> <div style="padding: 5px;"> <img src="RELATION_IMG" style="width: 80px;float:right;border-radius: 5px 25px;border:4px inset #b8bae3;margin-left: 5px;"> <font style="font-size: 15px;font-weight:bold;font-family:courier;"><br /><br /><u>Char Name</u> <br /><font style="font-size: 12px;font-weight:normal;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at sem nulla. Nullam ultrices lacinia cursus. </font></font></div> <!---ICON RIGHT END---> <!---ADD MORE CHARACTERS BELOW HERE---> </div></div> <!----END RELATIONSHIPS MODULE----> <!----MUSIC MODULE----> <div style="border-left: 1px solid #d3d4f0;border-right: 2px solid #d3d4f0;border-bottom: 3px solid #d3d4f0;float: right;height: 300px;width: 50%;"> <div style="float: left;width: 50px; height: 50px;border: 8px double #72739e;border-radius: 100%;text-align: left;margin-left: 5px;margin-top: 5px;"> <div style="width: 350px;height: 80px;background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #b8bae3 50%,#72739e 55%, rgba(0,0,0,0) 55%);padding-left: 10px;"> <font style="font-weight: normal;font-size: 40px;font-family:courier;color: #fff;">Music </div></div> <br /><div style="width: 100%; height: 219px;overflow-y: auto;text-align:justify;background: linear-gradient(180deg, #262626, #636363);padding: 5px;"> <!---SONG START---> <div style="text-align:left;margin-left: 10px;font-size: 25px;font-family:monospace;color: #d3d4f0;">♫<a href="URL" style="text-decoration:none;font-size:15px;font-family:courier;color: #fff;"> Song Name - Song Artist </a><div style="background: #b8bae3;height: 2px;width: 98%;"></div> <div style="text-align:center;color:#b3b3b3;margin-top:5px;font-size: 13px;margin-bottom:5px;line-height: 12px;"> Lyric lyric lyric<br /> lyric lyric<br /> La La La La La </div></div <!---SONG END---> <!---ADD MORE SONGS BELOW HERE---> </div></div> <!----END MUSIC MODULE----> </div> <!----END PART 3----> <!----ENDING----> <div style="border-left: 2px solid #d3d4f0;border-right: 2px solid #d3d4f0;border-bottom: 3px solid #d3d4f0;text-align:right;"><a href="https://killthecake.dreamwidth.org/" style="text-decoration:none;font-size: 10px;font-family:monospace;color:#d3d4f0;margin-right:10px;font-weight:bold;">BY KILLTHECAKE</a> </div></div>

❖ Currently broken. Working on being fixed. ❖ Make sure Disable Auto-Formatting is checked when you copy/paste the code into your post. ❖ To get the information about your character's personality, take the quiz at 16personalities. ❖ The font I used throughout on both is courier. Feel free to change that if you want but the size change will probably make the code go a bit wonky. ❖ You should be able to add as much info in each module as you want. If you have any problems with it, let me know! Ctrl+F & Replace: ❖ HEADER_IMG - Header image. ❖ ICON_IMG - The six circular images in the visuals module. They can be any size. ❖ HIST_IMG - Image in the history section. ❖ RELATION_IMG - Icons for characters in the relations section. ❖ Character - Character name in the header. ❖ Canon - Canon name in the subheader. ❖ Lorem Ipsum - Text to fill in throughout. You have to use <br /><br /> to separate paragraphs. ❖ PERCENT% - The percentage of a personality trait. There are two places to fill in for each trait. ❖ TRAIT - Personality trait. ❖ P_TYPE - Personality type header. Like Defender, Entertainer, etc. ❖ AAAA-A - Personality type subheader. The letters, like ISFJ-A. ❖ Char Name - Character's names in the Relations section. ❖ URL - Url link to songs in the Music section. ❖ Song Name - Song Artist - The name and artist of your song. ❖ Lyric - Whatever lyrics you want to add for your song. Light Mode: #fff border, background, background gradient, personality trait text #c9c9c9 background gradient #6e6e6e lyric text #000 relations' borders #b8bae3 header image border, visuals borders, visuals shadows, module headers' circles, module headers' divider gradient, personality traits' background #878ade music notes #898aa3 music's dividers #72739e module borders, header image gradient, header divider, module headers' divider gradient, personality traits' background, relations' icons' border #575878 credit text #555678 personality type text #454782 song name and artist text rgba(0,0,0,0) transparent gradients Dark Mode: #fff module headers' text, relations' borders, song name and artist text #ebebeb modules' text #b3b3b3 lyrics text #949494 border #636363 background gradient #262626 background, background gradient #000 personality trait text #d3d4f0 module borders, header divider, music notes, credit text #b8bae3 header image border, visuals borders, module headers' gradient, personality traits' background, relations' images' borders, musics' dividers #b7baeb header text, personality type text #72739e header image gradient, visuals shadows, module headers' circles, module headers' gradient, personality traits' background rgba(0,0,0,0) transparent gradients