Skip to content

Instantly share code, notes, and snippets.

@soularization
Created January 18, 2022 08:26
Show Gist options
  • Save soularization/e904382100e485da91168eb6c43dfaf7 to your computer and use it in GitHub Desktop.
Save soularization/e904382100e485da91168eb6c43dfaf7 to your computer and use it in GitHub Desktop.
Eclipse (Profile Layout)
<div style="width:400px;height:540px;margin:auto;">
<div style="float:left;margin-top:0px;background-color:#fff;width:400px;height:500px;">&nbsp;</div>
<div style="float:left;margin-top:-500px;margin-left:0px;background-color:#eee;width:105px;height:105px;"><img alt="" src="https://i.imgur.com/im8gX2x.jpg" style="width:105px;height:105px;" title="Fact: In Native American Culture, white sage is used for smudging or purfying objects and people to rid of negative energies that harbor souls. White Sage is also used to purify sacred objects and can be used in the phase of birth and death. To learn more, click the image!" /></div>
<div style="float:left;margin-top:-495px;margin-left:85px;background-color:#000;width:315px;height:20px;">&nbsp;</div>
<div style="float:left;margin-top:-495px;margin-left:85px;background-color:#fff;width:20px;height:20px;">&nbsp;</div>
<div style="float:left;margin-top:-470px;margin-left:85px;background-color:#000;width:315px;height:20px;">&nbsp;</div>
<div style="float:left;margin-top:-470px;margin-left:85px;background-color:#fff;width:20px;height:20px;">&nbsp;</div>
<div style="float:left;margin-top:-445px;margin-left:85px;background-color:#000;width:315px;height:20px;">&nbsp;</div>
<div style="float:left;margin-top:-445px;margin-left:85px;background-color:#fff;width:20px;height:20px;">&nbsp;</div>
<div style="float:left;margin-top:-420px;margin-left:85px;background-color:#000;width:315px;height:20px;">&nbsp;</div>
<div style="float:left;margin-top:-420px;margin-left:85px;background-color:#fff;width:20px;height:20px;">&nbsp;</div>
<div style="float:left;margin-top:-492px;margin-left:115px;line-height:9px;letter-spacing:1px;text-transform:lowercase;width:275px;text-align:right;"><span style="color:#fff;"><span style="font-family:calibri;"><span style="font-size:9px;">full name</span></span></span></div>
<div style="float:left;margin-top:-492px;margin-left:85px;line-height:9px;letter-spacing:1px;text-transform:lowercase;width:20px;text-align:center;"><strong><span style="color:#000;"><span style="font-family:'century gothic';"><span style="font-size:9px;">⦁</span></span></span></strong></div>
<div style="float:left;margin-top:-467px;margin-left:115px;line-height:9px;letter-spacing:1px;text-transform:lowercase;width:275px;text-align:right;"><span style="color:#fff;"><span style="font-family:calibri;"><span style="font-size:9px;">preferred nickname</span></span></span></div>
<div style="float:left;margin-top:-467px;margin-left:85px;line-height:9px;letter-spacing:1px;text-transform:lowercase;width:20px;text-align:center;"><strong><span style="color:#000;"><span style="font-family:calibric;"><span style="font-size:9px;">⦁</span></span></span></strong></div>
<div style="float:left;margin-top:-442px;margin-left:115px;line-height:9px;letter-spacing:1px;text-transform:lowercase;width:275px;text-align:right;"><span style="color:#fff;"><span style="font-family:calibri;"><span style="font-size:9px;">activity status</span></span></span></div>
<div style="float:left;margin-top:-442px;margin-left:85px;line-height:9px;letter-spacing:1px;text-transform:lowercase;width:20px;text-align:center;"><strong><span style="color:#000;"><span style="font-family:calibri;"><span style="font-size:9px;">⦁</span></span></span></strong></div>
<div style="float:left;margin-top:-417px;margin-left:115px;line-height:9px;letter-spacing:1px;text-transform:lowercase;width:275px;text-align:right;"><span style="color:#fff;"><span style="font-family:calibri;"><span style="font-size:9px;">timezone</span></span></span></div>
<div style="float:left;margin-top:-417px;margin-left:85px;line-height:9px;letter-spacing:1px;text-transform:lowercase;width:20px;text-align:center;"><strong><span style="color:#000;"><span style="font-family:'century gothic';"><span style="font-size:9px;">⦁</span></span></span></strong></div>
<div style="float:left;margin-top:-390px;background-color:#000;width:400px;height:390px;">&nbsp;</div>
<div style="float:left;width:480px;height:390px;margin-top:-390px;margin-left:0px;">
<div style="width:400px;height:385px;overflow:hidden;float:left;margin:0px;">
<div style="width:425px;height:385px;overflow:auto;">
<div style="float:left;margin-top:5px;margin-left:5px;background-color:#fff;width:390px;height:30px;">&nbsp;</div>
<div style="float:left;margin-top:-29px;margin-left:6px;background-color:#000;width:27px;height:28px;">&nbsp;</div>
<div style="float:left;margin-top:-29px;margin-left:34px;background-color:#000;width:360px;height:28px;">&nbsp;</div>
<div style="float:left;margin-top:-22px;margin-left:6px;line-height:9px;letter-spacing:1px;text-transform:lowercase;width:27px;text-align:center;"><strong><span style="color:#fff;"><span style="font-family:'century gothic';"><span style="font-size:9px;">⦁</span></span></span></strong></div>
<div style="float:left;margin-top:-22px;margin-left:45px;line-height:8px;letter-spacing:1px;text-transform:lowercase;width:340px;text-align:right;"><em><span style="color:#fff;"><span style="font-family:calibri;"><span style="font-size:9px;">summary of me!</span></span></span></em></div>
<div style="float:left;margin-top:0px;margin-left:5px;background-color:#000;height:auto;padding:11px;border-left-style:solid;border-left-width:1px;border-right-style:solid;border-width:1px;border-bottom-style:solid;border-color:#fff;">
<div style="float:left;width:366px;margin-top:-1px;margin-left:0px;line-height:8px;text-align:justify;"><span style="font-size:9px;"><span style="color:#fff;"><span style="font-family:calibri;text-transform:lowercase;">Lorem Ipsum &quot;Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pulvinar vulputate lectus, a dictum dolor. Duis diam turpis, suscipit sit amet erat sit amet, sagittis gravida lacus. Vestibulum feugiat augue sapien, eget tempus diam accumsan mollis. Vestibulum nec erat id quam finibus iaculis at vel lorem. Nam quis magna tincidunt dui hendrerit pharetra ut id nibh. Pellentesque a sapien velit. Maecenas euismod mauris a condimentum vestibulum. Vestibulum lobortis nibh non elit malesuada, quis vehicula mi suscipit. Maecenas et sapien id nisl volutpat porta et vestibulum erat.<br />
<br />
Lorem Ipsum &quot;Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pulvinar vulputate lectus, a dictum dolor. Duis diam turpis, suscipit sit amet erat sit amet, sagittis gravida lacus. Vestibulum feugiat augue sapien, eget tempus diam accumsan mollis. Vestibulum nec erat id quam finibus iaculis at vel lorem. Nam quis magna tincidunt dui hendrerit pharetra ut id nibh. Pellentesque a sapien velit. Maecenas euismod mauris a condimentum vestibulum. Vestibulum lobortis nibh non elit malesuada, quis vehicula mi suscipit. Maecenas et sapien id nisl volutpat porta et vestibulum era</span></span></span></div>
</div>
<div style="float:left;margin-top:5px;margin-left:5px;background-color:#fff;width:390px;height:30px;">&nbsp;</div>
<div style="float:left;margin-top:-29px;margin-left:6px;background-color:#000;width:27px;height:28px;">&nbsp;</div>
<div style="float:left;margin-top:-29px;margin-left:34px;background-color:#000;width:360px;height:28px;">&nbsp;</div>
<div style="float:left;margin-top:-22px;margin-left:6px;line-height:9px;letter-spacing:1px;text-transform:lowercase;width:27px;text-align:center;"><strong><span style="color:#fff;"><span style="font-family:'century gothic';"><span style="font-size:9px;">⦁</span></span></span></strong></div>
<div style="float:left;margin-top:-22px;margin-left:45px;line-height:8px;letter-spacing:1px;text-transform:lowercase;width:340px;text-align:right;"><em><span style="color:#fff;"><span style="font-family:calibri;"><span style="font-size:9px;">roleplaying preferences (keep it brief)!</span></span></span></em></div>
<div style="float:left;margin-top:-1px;margin-left:5px;background-color:#fff;width:390px;height:159px;">&nbsp;</div>
<div style="float:left;margin-top:-158px;margin-left:6px;background-color:#000;width:388px;height:157px;">&nbsp;</div>
<div style="float:left;margin-top:-152px;margin-left:11px;background-color:#fff;width:20px;height:20px;">&nbsp;</div>
<div style="float:left;margin-top:-152px;margin-left:32px;background-color:#fff;width:357px;height:20px;">&nbsp;</div>
<div style="float:left;margin-top:-127px;margin-left:11px;background-color:#fff;width:20px;height:20px;">&nbsp;</div>
<div style="float:left;margin-top:-127px;margin-left:32px;background-color:#fff;width:357px;height:20px;">&nbsp;</div>
<div style="float:left;margin-top:-102px;margin-left:11px;background-color:#fff;width:20px;height:20px;">&nbsp;</div>
<div style="float:left;margin-top:-102px;margin-left:32px;background-color:#fff;width:357px;height:20px;">&nbsp;</div>
<div style="float:left;margin-top:-77px;margin-left:11px;background-color:#fff;width:20px;height:20px;">&nbsp;</div>
<div style="float:left;margin-top:-77px;margin-left:32px;background-color:#fff;width:357px;height:20px;">&nbsp;</div>
<div style="float:left;margin-top:-52px;margin-left:11px;background-color:#fff;width:20px;height:20px;">&nbsp;</div>
<div style="float:left;margin-top:-52px;margin-left:32px;background-color:#fff;width:357px;height:20px;">&nbsp;</div>
<div style="float:left;margin-top:-27px;margin-left:11px;background-color:#fff;width:20px;height:20px;">&nbsp;</div>
<div style="float:left;margin-top:-27px;margin-left:32px;background-color:#fff;width:357px;height:20px;">&nbsp;</div>
<div style="float:left;margin-top:-24px;margin-left:12px;line-height:9px;letter-spacing:1px;text-transform:lowercase;width:20px;text-align:center;"><strong><span style="color:#000;"><span style="font-family:'century gothic';"><span style="font-size:9px;">⦁</span></span></span></strong></div>
<div style="float:left;margin-top:-24px;margin-left:45px;line-height:8px;letter-spacing:1px;text-transform:lowercase;width:340px;text-align:right;"><em><span style="color:#000;"><span style="font-family:calibri;"><span style="font-size:9px;">info about your preferences here.</span></span></span></em></div>
<div style="float:left;margin-top:-49px;margin-left:12px;line-height:9px;letter-spacing:1px;text-transform:lowercase;width:20px;text-align:center;"><strong><span style="color:#000;"><span style="font-family:'century gothic';"><span style="font-size:9px;">⦁</span></span></span></strong></div>
<div style="float:left;margin-top:-49px;margin-left:45px;line-height:8px;letter-spacing:1px;text-transform:lowercase;width:340px;text-align:right;"><em><span style="color:#000;"><span style="font-family:calibri;"><span style="font-size:9px;">info about your preferences here.</span></span></span></em></div>
<div style="float:left;margin-top:-74px;margin-left:12px;line-height:9px;letter-spacing:1px;text-transform:lowercase;width:20px;text-align:center;"><strong><span style="color:#000;"><span style="font-family:'century gothic';"><span style="font-size:9px;">⦁</span></span></span></strong></div>
<div style="float:left;margin-top:-74px;margin-left:45px;line-height:8px;letter-spacing:1px;text-transform:lowercase;width:340px;text-align:right;"><em><span style="color:#000;"><span style="font-family:calibri;"><span style="font-size:9px;">info about your preferences here.</span></span></span></em></div>
<div style="float:left;margin-top:-99px;margin-left:12px;line-height:9px;letter-spacing:1px;text-transform:lowercase;width:20px;text-align:center;"><strong><span style="color:#000;"><span style="font-family:'century gothic';"><span style="font-size:9px;">⦁</span></span></span></strong></div>
<div style="float:left;margin-top:-99px;margin-left:45px;line-height:8px;letter-spacing:1px;text-transform:lowercase;width:340px;text-align:right;"><em><span style="color:#000;"><span style="font-family:calibri;"><span style="font-size:9px;">info about your preferences here.</span></span></span></em></div>
<div style="float:left;margin-top:-123px;margin-left:12px;line-height:9px;letter-spacing:1px;text-transform:lowercase;width:20px;text-align:center;"><strong><span style="color:#000;"><span style="font-family:'century gothic';"><span style="font-size:9px;">⦁</span></span></span></strong></div>
<div style="float:left;margin-top:-123px;margin-left:45px;line-height:8px;letter-spacing:1px;text-transform:lowercase;width:340px;text-align:right;"><em><span style="color:#000;"><span style="font-family:calibri;"><span style="font-size:9px;">info about your preferences here.</span></span></span></em></div>
<div style="float:left;margin-top:-148px;margin-left:12px;line-height:9px;letter-spacing:1px;text-transform:lowercase;width:20px;text-align:center;"><strong><span style="color:#000;"><span style="font-family:'century gothic';"><span style="font-size:9px;">⦁</span></span></span></strong></div>
<div style="float:left;margin-top:-148px;margin-left:45px;line-height:8px;letter-spacing:1px;text-transform:lowercase;width:340px;text-align:right;"><em><span style="color:#000;"><span style="font-family:calibri;"><span style="font-size:9px;">info about your preferences here.</span></span></span></em></div>
<div style="float:left;margin-top:5px;margin-left:5px;background-color:#fff;width:390px;height:30px;">&nbsp;</div>
<div style="float:left;margin-top:-29px;margin-left:6px;background-color:#000;width:27px;height:28px;">&nbsp;</div>
<div style="float:left;margin-top:-29px;margin-left:34px;background-color:#000;width:360px;height:28px;">&nbsp;</div>
<div style="float:left;margin-top:-22px;margin-left:6px;line-height:9px;letter-spacing:1px;text-transform:lowercase;width:27px;text-align:center;"><strong><span style="color:#fff;"><span style="font-family:'century gothic';"><span style="font-size:9px;">⦁</span></span></span></strong></div>
<div style="float:left;margin-top:-22px;margin-left:45px;line-height:8px;letter-spacing:1px;text-transform:lowercase;width:340px;text-align:right;"><em><span style="color:#fff;"><span style="font-family:calibri;"><span style="font-size:9px;">roleplaying guidelines!</span></span></span></em></div>
<div style="float:left;margin-top:0px;margin-left:5px;background-color:#000;height:auto;padding:11px;border-left-style:solid;border-left-width:1px;border-right-style:solid;border-width:1px;border-bottom-style:solid;border-color:#fff;">
<div style="float:left;width:366px;margin-top:-1px;margin-left:0px;line-height:8px;text-align:justify;"><span style="font-size:9px;"><span style="color:#fff;"><span style="font-family:calibri;text-transform:lowercase;">Lorem Ipsum &quot;Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pulvinar vulputate lectus, a dictum dolor. Duis diam turpis, suscipit sit amet erat sit amet, sagittis gravida lacus. Vestibulum feugiat augue sapien, eget tempus diam accumsan mollis. Vestibulum nec erat id quam finibus iaculis at vel lorem. Nam quis magna tincidunt dui hendrerit pharetra ut id nibh. Pellentesque a sapien velit. Maecenas euismod mauris a condimentum vestibulum. Vestibulum lobortis nibh non elit malesuada, quis vehicula mi suscipit. Maecenas et sapien id nisl volutpat porta et vestibulum erat.<br />
<br />
Lorem Ipsum &quot;Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pulvinar vulputate lectus, a dictum dolor. Duis diam turpis, suscipit sit amet erat sit amet, sagittis gravida lacus. Vestibulum feugiat augue sapien, eget tempus diam accumsan mollis. Vestibulum nec erat id quam finibus iaculis at vel lorem. Nam quis magna tincidunt dui hendrerit pharetra ut id nibh. Pellentesque a sapien velit. Maecenas euismod mauris a condimentum vestibulum. Vestibulum lobortis nibh non elit malesuada, quis vehicula mi suscipit. Maecenas et sapien id nisl volutpat porta et vestibulum era</span></span></span></div>
</div>
<div style="float:left;margin-top:5px;margin-left:5px;background-color:#fff;width:390px;height:30px;">&nbsp;</div>
<div style="float:left;margin-top:-29px;margin-left:6px;background-color:#000;width:27px;height:28px;">&nbsp;</div>
<div style="float:left;margin-top:-29px;margin-left:34px;background-color:#000;width:360px;height:28px;">&nbsp;</div>
<div style="float:left;margin-top:-22px;margin-left:6px;line-height:9px;letter-spacing:1px;text-transform:lowercase;width:27px;text-align:center;"><strong><span style="color:#fff;"><span style="font-family:'century gothic';"><span style="font-size:9px;">⦁</span></span></span></strong></div>
<div style="float:left;margin-top:-22px;margin-left:45px;line-height:8px;letter-spacing:1px;text-transform:lowercase;width:340px;text-align:right;"><em><span style="color:#fff;"><span style="font-family:calibri;"><span style="font-size:9px;">quick message!</span></span></span></em></div>
<div style="float:left;margin-top:0px;margin-left:5px;background-color:#000;height:auto;padding:11px;border-left-style:solid;border-left-width:1px;border-right-style:solid;border-width:1px;border-bottom-style:solid;border-color:#fff;">
<div style="float:left;width:366px;margin-top:-1px;margin-left:0px;line-height:8px;text-align:justify;"><span style="font-size:9px;"><span style="color:#fff;"><span style="font-family:calibri;text-transform:lowercase;">Lorem Ipsum &quot;Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pulvinar vulputate lectus, a dictum dolor. Duis diam turpis, suscipit sit amet erat sit amet, sagittis gravida lacus. Vestibulum feugiat augue sapien, eget tempus diam accumsan mollis. Vestibulum nec erat id quam finibus iaculis at vel lorem. Nam quis magna tincidunt dui hendrerit pharetra ut id nibh. Pellentesque a sapien velit. Maecenas euismod mauris a condimentum vestibulum. Vestibulum lobortis nibh non elit malesuada, quis vehicula mi suscipit. Maecenas et sapien id nisl volutpat porta et vestibulum erat.<br />
<br />
Lorem Ipsum &quot;Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pulvinar vulputate lectus, a dictum dolor. Duis diam turpis, suscipit sit amet erat sit amet, sagittis gravida lacus. Vestibulum feugiat augue sapien, eget tempus diam accumsan mollis. Vestibulum nec erat id quam finibus iaculis at vel lorem. Nam quis magna tincidunt dui hendrerit pharetra ut id nibh. Pellentesque a sapien velit. Maecenas euismod mauris a condimentum vestibulum. Vestibulum lobortis nibh non elit malesuada, quis vehicula mi suscipit. Maecenas et sapien id nisl volutpat porta et vestibulum era</span></span></span></div>
</div>
</div>
</div>
</div>
<div style="float:left;margin-top:5px;margin-left:0px;width:400px;line-height:8px;letter-spacing:2px;text-align:center;"><a href="https://www.roleplayrepublic.com/roleplay/view_desc/26358" title="SOULARIZAITON 2022 [ this layout was created by the user LAURENT/BENEFICENT/SOULAR - exclusively distributed through the layout shop: STUDIO PREMIER. PHOTO CREDITS TO TUMBLR USER: GOOEVIL. if the layout has an error, glitch or a faulty code, please refer to the shop or LAURENT as soon as possible to get it fixed. the following will result in a report to the Role Play Republic's moderators: removal of the credit / copyright mark from ALL layouts LAURENT/BENEFICENT / STUDIO PREMIER. Unauthorized use of the layout from LAURENT/BENEFICENT / STUDIO PREMIER in another layout shop. THEFT of code / techniques / style, etc. thank you, and enjoy!"><span style="font-family:Calibri;"><span style="font-size:8px;"><span style="color:#000;">SOULARIZATION &copy; MMXXII</span></span></span></a></div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment