Skip to content

Instantly share code, notes, and snippets.

@sugalgi
Last active March 7, 2022 16:35
Show Gist options
  • Save sugalgi/7493691fa2dfe811ec19df9a3ed48d38 to your computer and use it in GitHub Desktop.
Save sugalgi/7493691fa2dfe811ec19df9a3ed48d38 to your computer and use it in GitHub Desktop.
READ THE GUIDELINES.
DO NOT REMOVE THE CREDITS.
FAILURE TO COMPLY TO THE GUIDELINES WOULD AUTOMATICALLY BE BLACKLISTED.
THE GUIDE TEXTS (<--!guide text-->) WOULD DISAPPEAR ONCE YOU SAVE THE CODE SO IT'S BEST TO ALWAYS OPEN AN ANOTHER TAB FOR YOU TO CHECK WHAT THE LAYOUT LOOKS LIKE
<!--Layout Start-->
<div style="width:450px;margin:auto;">
<!--Background Start-->
<div style="float:left;width:450px;height:450px;background:#F8F8F8;border-radius:10px;margin:0px 0px 10px 0px;">
<!--Background Pic-->
<div style="float:left;width:445px;height:445px;margin:0px 0px 0px 0px;"><img src="https://i.imgur.com/LNt4Fsi.png" style="width:445px;height:445px;border:5px solid #F8F8F8;border-radius:10px;"></div>
<!--Background Pic-->
<!--Links-->
<div style="float:left;width:auto;height:auto;padding:2px 5px 2px 5px;background:#FFF;border-radius:3px;margin:-35px 0px 0px 17px;">
<div style="font-family:arial black;font-size:11px;color:#B69498;text-align:center;margin:-2px 0px 0px 0px;"><b><span style="font-size:15px;"><a href="click here" style="color:#B69498;">●</a></span> LINK 3</b></div></div>
<div style="float:left;width:auto;height:auto;padding:2px 5px 2px 5px;background:#FFF;border-radius:3px;margin:-75px 0px 0px 17px;">
<div style="font-family:arial black;font-size:11px;color:#B69498;text-align:center;margin:-2px 0px 0px 0px;"><b><span style="font-size:15px;"><a href="click here" style="color:#B69498;">●</a></span> LINK 2</b></div></div>
<div style="float:left;width:auto;height:auto;padding:2px 5px 2px 5px;background:#FFF;border-radius:3px;margin:-115px 0px 0px 17px;">
<div style="font-family:arial black;font-size:11px;color:#B69498;text-align:center;margin:-2px 0px 0px 0px;"><b><span style="font-size:15px;"><a href="click here" style="color:#B69498;">●</a></span> LINK 1</b></div></div>
<!--Links-->
<!--Main Scroll-->
<div style="float:right;width:405px;height:445px;overflow:hidden;border-radius:0px 5px 5px 0px;margin:-440px 0px 5px 5px;">
<div style="float:left;width:405px;height:485px;overflow:auto;">
<div style="float:left;width:700px;">
<!--Tab Start-->
<div style="float:left;width:50px;height:445px;background:#F8F8F8;margin:0px 0px 0px 350px;">
<div style="float:left;width:10px;height:0px;border-top:1px solid #AD8581;margin:150px 0px 0px 0px;"></div>
<div style="float:left;width:5px;height:auto;border-left:1px solid #B69498;padding:0px 0px 0px 5px;font-family:arial black;font-size:13px;color:#B69498;line-height:20px;text-align:center;margin:150px 0px 0px 0px;"><b>U<br />
S<br />
E<br />
R<br />
N<br />
A<br />
M<br />
E</b></div>
</div>
<div style="float:left;width:80px;height:80px;margin:30px 0px 0px -100px;"><img src="https://i.imgur.com/o6OM7ZO.png" style="width:80px;height:80px;border:10px solid #F8F8F8;border-radius:80px;"></div>
<!--Tab End-->
<!--Content Start-->
<div style="float:left;width:280px;height:425px;overflow:hidden;background:#F8F8F8;padding:10px;margin:0px 0px 0px 0px;">
<div style="float:left;width:420px;height:425px;overflow:auto;">
<div style="float:left;width:280px;">
<!--About Me Start-->
<div style="float:left;width:280px;height:150px;background:#EBEBEB;border-radius:10px;margin:0px 0px 0px 0px;">
<div style="float:right;width:auto;height:auto;border-bottom:1px solid #F8F8F8;font-family:arial black;font-size:13px;color:#CEA3A6;text-align:center;letter-spacing:5px;margin:5px 0px 0px 0px;"><b>ABOUT ME</b></div>
<div style="float:left;width:260px;height:110px;overflow:hidden;margin:8px 0px 0px 10px;">
<div style="float:left;width:300px;height:110px;overflow:auto;">
<div style="float:left;width:260px;">
<div style="font-family:arial;font-size:11px;color:#000;line-height:11px;text-align:justify;">"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</div>
</div>
</div>
</div>
</div>
<!--About Me End-->
<!--Picture Gallery Start-->
<div style="float:right;width:auto;height:auto;border-bottom:1px solid #EBEBEB;font-family:arial black;font-size:13px;color:#CEA3A6;text-align:center;letter-spacing:5px;margin:20px 0px 0px 0px;"><b>THE GALLERY</b></div>
<div style="float:left;width:280px;height:120px;overflow:hidden;margin:10px 0px 0px 0px;">
<div style="float:left;width:280px;height:140px;overflow:auto;">
<div style="float:left;width:495px;">
<div style="float:left;width:120px;height:120px;margin:0px 0px 0px 0px;"><img src="https://i.imgur.com/SoCHP4Q.png" style="width:120px;height:120px;border-radius:10px 0px 0px 10px;"></div>
<div style="float:left;width:120px;height:120px;margin:0px 0px 0px 5px;"><img src="https://i.imgur.com/X26E5MD.png" style="width:120px;height:120px;border-radius:0px 0px 0px 0px;"></div>
<div style="float:left;width:120px;height:120px;margin:0px 0px 0px 5px;"><img src="https://i.imgur.com/YCzuwDX.png" style="width:120px;height:120px;border-radius:0px 0px 0px 0px;"></div>
<div style="float:left;width:120px;height:120px;margin:0px 0px 0px 5px;"><img src="https://i.imgur.com/E7uy8IG.png" style="width:120px;height:120px;border-radius:0px 10px 10px 0px;"></div>
</div>
</div>
</div>
<!--Picture Gallery End-->
<!--Profile Start-->
<div style="float:left;width:280px;height:150px;background:#CEA3A6;border-radius:10px;margin:20px 0px 0px 0px;">
<div style="float:right;width:auto;height:auto;border-bottom:1px solid #F8F8F8;font-family:arial black;font-size:13px;color:#EAD4D4;text-align:center;letter-spacing:5px;margin:5px 0px 0px 0px;"><b>THE PROFILE</b></div>
<div style="float:left;width:80px;height:80px;margin:30px 0px 0px 23px;"><img src="https://i.imgur.com/frAnxpc.png" style="width:80px;height:80px;border-radius:80px;border:5px solid #F8F8F8;"></div>
<div style="float:right;width:140px;height:110px;overflow:hidden;margin:8px 10px 0px 0px;">
<div style="float:left;width:180px;height:110px;overflow:auto;">
<div style="float:left;width:140px;">
<div style="font-family:arial;font-size:11px;color:#FFF;line-height:11px;text-align:justify;">"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</div>
</div>
</div>
</div>
</div>
<!--Profile End-->
<!--Affiliates Start-->
<div style="float:right;width:auto;height:auto;border-bottom:1px solid #EBEBEB;font-family:arial black;font-size:13px;color:#CEA3A6;text-align:center;letter-spacing:5px;margin:20px 0px 0px 0px;"><b>THE COMRADES</b></div>
<div style="float:left;width:280px;height:200px;overflow:hidden;margin:10px 0px 0px 0px;">
<div style="float:left;width:280px;height:220px;overflow:auto;">
<div style="float:left;width:570px;">
<!--Affiliate 1-->
<div style="float:left;width:113px;height:178px;padding:10px;border:1px dotted #B69498;border-radius:10px;margin:0px 0px 0px 0px;">
<div style="float:left;width:90px;height:90px;border:1px dotted #B69498;border-radius:90px;margin:0px 0px 5px 12px;">
<div style="float:left;width:80px;height:80px;margin:5px 0px 0px 5px;"><img src="https://i.imgur.com/bTlyLnk.png" style="width:80px;height:80px;border-radius:80px;"></div>
</div>
<div style="width:auto;height:auto;border-bottom:1px dotted #CEA3A6;font-family:arial black;font-size:11px;color:#C8C1C6;text-align:center;letter-spacing:2px;margin:0px 0px 0px 0px;"><b>ADELAIDE</b></div>
<div style="float:left;width:105px;height:57px;overflow:hidden;margin:6px 0px 0px 5px;">
<div style="float:left;width:145px;height:57px;overflow:auto;">
<div style="float:left;width:105px;">
<div style="font-family:arial;font-size:11px;color:#000;line-height:11px;text-align:justify;">"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</div>
</div>
</div>
</div>
</div>
<!--Affiliate 1-->
<!--Affiliate 2-->
<div style="float:left;width:113px;height:178px;padding:10px;border:1px dotted #B69498;border-radius:10px;margin:0px 0px 0px 10px;">
<div style="float:left;width:90px;height:90px;border:1px dotted #B69498;border-radius:90px;margin:0px 0px 5px 12px;">
<div style="float:left;width:80px;height:80px;margin:5px 0px 0px 5px;"><img src="https://i.imgur.com/bTlyLnk.png" style="width:80px;height:80px;border-radius:80px;"></div>
</div>
<div style="width:auto;height:auto;border-bottom:1px dotted #CEA3A6;font-family:arial black;font-size:11px;color:#C8C1C6;text-align:center;letter-spacing:2px;margin:0px 0px 0px 0px;"><b>BEATRICE</b></div>
<div style="float:left;width:105px;height:57px;overflow:hidden;margin:6px 0px 0px 5px;">
<div style="float:left;width:145px;height:57px;overflow:auto;">
<div style="float:left;width:105px;">
<div style="font-family:arial;font-size:11px;color:#000;line-height:11px;text-align:justify;">"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</div>
</div>
</div>
</div>
</div>
<!--Affiliate 2-->
<!--Affiliate 3-->
<div style="float:left;width:113px;height:178px;padding:10px;border:1px dotted #B69498;border-radius:10px;margin:0px 0px 0px 10px;">
<div style="float:left;width:90px;height:90px;border:1px dotted #B69498;border-radius:90px;margin:0px 0px 5px 12px;">
<div style="float:left;width:80px;height:80px;margin:5px 0px 0px 5px;"><img src="https://i.imgur.com/bTlyLnk.png" style="width:80px;height:80px;border-radius:80px;"></div>
</div>
<div style="width:auto;height:auto;border-bottom:1px dotted #CEA3A6;font-family:arial black;font-size:11px;color:#C8C1C6;text-align:center;letter-spacing:2px;margin:0px 0px 0px 0px;"><b>ELLA</b></div>
<div style="float:left;width:105px;height:57px;overflow:hidden;margin:6px 0px 0px 5px;">
<div style="float:left;width:145px;height:57px;overflow:auto;">
<div style="float:left;width:105px;">
<div style="font-family:arial;font-size:11px;color:#000;line-height:11px;text-align:justify;">"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</div>
</div>
</div>
</div>
</div>
<!--Affiliate 3-->
<!--Affiliate 4-->
<div style="float:left;width:113px;height:178px;padding:10px;border:1px dotted #B69498;border-radius:10px;margin:0px 0px 0px 10px;">
<div style="float:left;width:90px;height:90px;border:1px dotted #B69498;border-radius:90px;margin:0px 0px 5px 12px;">
<div style="float:left;width:80px;height:80px;margin:5px 0px 0px 5px;"><img src="https://i.imgur.com/bTlyLnk.png" style="width:80px;height:80px;border-radius:80px;"></div>
</div>
<div style="width:auto;height:auto;border-bottom:1px dotted #CEA3A6;font-family:arial black;font-size:11px;color:#C8C1C6;text-align:center;letter-spacing:2px;margin:0px 0px 0px 0px;"><b>GENEVIEVE</b></div>
<div style="float:left;width:105px;height:57px;overflow:hidden;margin:6px 0px 0px 5px;">
<div style="float:left;width:145px;height:57px;overflow:auto;">
<div style="float:left;width:105px;">
<div style="font-family:arial;font-size:11px;color:#000;line-height:11px;text-align:justify;">"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</div>
</div>
</div>
</div>
</div>
<!--Affiliate 4-->
</div>
</div>
</div>
<!--Affiliates End-->
</div>
</div>
</div>
<!--Content End-->
</div>
</div>
</div>
<!--Main Scroll-->
</div>
<!--Background End-->
<div style="float:right;width:auto;border-bottom:1px dotted #000;font-family:'helvetica';font-size:10px;color:#000;text-align:right;margin:0px 0px 0px 0px;"><a href="https://www.asianfanfics.com/story/view/1465009/" style="color:#000;">EPHR</a></div>
</div>
<!--Layout End-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment