Skip to content

Instantly share code, notes, and snippets.

@sugalgi
Last active July 17, 2023 14:52
Show Gist options
  • Save sugalgi/28de017c05fce45c72e76dd39bf48c8f to your computer and use it in GitHub Desktop.
Save sugalgi/28de017c05fce45c72e76dd39bf48c8f 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
TABLE OF CONTENTS
USE (CTRL + F) TO LEAD TOWARDS THE WANTED LAYOUT // INPUT THE WHOLE TEXT
01 — MAIN
02 — CHAPTER (PORTRAIT VER.)
03 — CHAPTER (LANDSCAPE VER.)
<!--Layout Start-->
<div style="width:601px;margin:auto;">
<!--Background Start-->
<div style="float:left;width:601px;height:601px;background:#FFF;border:1px solid #FEE2DC;margin:0px 0px 5px 0px;">
<div style="float:left;width:580px;height:580px;margin:10px 0px 0px 10px;"><img src="https://i.imgur.com/dg4wsL6.png" style="width:580px;height:580px;border-radius:20px;" /></div>
<!--Base Start-->
<div style="float:left;width:400px;height:500px;border-radius:20px;margin:-540px 0px 0px 100px;">
<!--Blocks-->
<div style="float:left;width:400px;height:120px;background:#FFF;border-radius:20px 20px 0px 0px;margin:0px 0px 0px 0px;"></div>
<div style="float:left;width:20px;height:200px;background:#FFF;margin:0px 0px 0px 0px;"></div>
<div style="float:right;width:20px;height:200px;background:#FFF;margin:0px 0px 0px 0px;"></div>
<div style="float:left;width:400px;height:180px;background:#FFF;border-radius:0px 0px 20px 20px;margin:0px 0px 0px 0px;"></div>
<!--Blocks-->
<!--Tabs-->
<div style="float:left;width:auto;height:auto;border-bottom:1px dotted #FFF;padding-bottom:3px;font-family:arial;font-size:10px;color:#E5AEE0;line-height:10px;text-align:center;letter-spacing:3px;margin:-485px 0px 0px 20px;">HOME</div>
<div style="float:left;width:auto;height:auto;border-bottom:1px dotted #FFF;padding-bottom:3px;font-family:arial;font-size:10px;color:#E5AEE0;line-height:10px;text-align:center;letter-spacing:3px;margin:-485px 0px 0px 80px;">UPDATES</div>
<div style="float:left;width:auto;height:auto;border-bottom:1px dotted #FFF;padding-bottom:3px;font-family:arial;font-size:10px;color:#E5AEE0;line-height:10px;text-align:center;letter-spacing:3px;margin:-485px 0px 0px 165px;">LISTS</div>
<div style="float:left;width:auto;height:auto;border-bottom:1px dotted #FFF;padding-bottom:3px;font-family:arial;font-size:10px;color:#E5AEE0;line-height:10px;text-align:center;letter-spacing:3px;margin:-485px 0px 0px 225px;">ALBUM</div>
<!--Tabs-->
<!--Title-->
<div style="float:left;font-family:georgia;font-size:40px;color:#6262C0;line-height:40px;text-align:center;margin:-440px 0px 0px 93px;"><b><i>astrophile</i></b>
<div style="font-family:georgia;font-size:40px;color:#FFF;line-height:40px;text-align:center;margin:-43px 0px 0px -5px;"><b><i>astrophile</i></b></div>
<div style="font-family:georgia;font-size:40px;color:#E5AEE0;line-height:40px;text-align:center;margin:-43px 0px 0px -10px;"><b><i>astrophile</i></b></div>
</div>
<!--Title-->
<!--Main Scroll-->
<div style="float:left;width:400px;height:500px;overflow:hidden;border-radius:20px;margin:-500px 0px 0px 0px;">
<div style="float:left;width:400px;height:520px;overflow:auto;">
<div style="float:left;width:1600px;">
<!--Home Page-->
<div style="float:left;width:400px;height:500px;border-radius:20px;margin:0px 0px 0px 0px;">
<!--Tab-->
<div style="float:left;width:auto;height:auto;border-bottom:1px dotted #6262C0;padding-bottom:3px;font-family:arial;font-size:10px;color:#6262C0;line-height:10px;text-align:center;letter-spacing:3px;margin:15px 0px 0px 20px;">HOME</div>
<!--Tab-->
<!--About-->
<div style="float:left;width:220px;height:140px;border-radius:10px;background:#9C7FD2;margin:340px 0px 0px -43px;">
<div style="float:left;width:auto;height:auto;border-bottom:2px solid #FFF;padding-bottom:3px;font-family:arial black;font-size:12px;color:#FFF;line-height:12px;text-align:left;letter-spacing:3px;margin:10px 0px 0px 10px;"><b>ABOUT US</b></div>
<div style="float:left;width:200px;height:93px;overflow:hidden;background:#9C7FD2;margin:10px 0px 0px 10px;">
<div style="float:left;width:240px;height:93px;overflow:auto;">
<div style="float:left;width:200px;">
<div style="font-family:arial;font-size:10px;color:#FFF;line-height:10px;text-align:justify;">"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."</div>
</div>
</div>
</div>
</div>
<!--About-->
<!--Guidelines-->
<div style="float:right;width:120px;height:140px;border-radius:10px;background:#9C7FD2;margin:340px 20px 0px 0px;">
<div style="float:left;width:auto;height:auto;border-bottom:2px solid #FFF;padding-bottom:3px;font-family:arial black;font-size:12px;color:#FFF;line-height:12px;text-align:left;letter-spacing:3px;margin:10px 0px 0px 10px;"><b>GUIDE</b></div>
<div style="float:left;width:120px;height:93px;overflow:hidden;background:#9C7FD2;margin:10px 0px 0px 0px;">
<div style="float:left;width:160px;height:93px;overflow:auto;">
<div style="float:left;width:120px;">
<div style="float:left;width:110px;height:auto;background:#FFF;padding:5px;font-family:arial black;font-size:10px;color:#51519F;line-height:10px;text-align:left;letter-spacing:3px;margin:2px 0px 0px 0px;">ONE</div>
<div style="float:left;width:100px;height:auto;font-family:arial;font-size:10px;color:#FFF;line-height:10px;text-align:justify;margin:10px 0px 0px 10px;">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</div>
<div style="float:left;width:110px;height:auto;background:#FFF;padding:5px;font-family:arial black;font-size:10px;color:#51519F;line-height:10px;text-align:left;letter-spacing:3px;margin:10px 0px 0px 0px;">TWO</div>
<div style="float:left;width:100px;height:auto;font-family:arial;font-size:10px;color:#FFF;line-height:10px;text-align:justify;margin:10px 0px 0px 10px;">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</div>
<div style="float:left;width:110px;height:auto;background:#FFF;padding:5px;font-family:arial black;font-size:10px;color:#51519F;line-height:10px;text-align:left;letter-spacing:3px;margin:10px 0px 0px 0px;">THREE</div>
<div style="float:left;width:100px;height:auto;font-family:arial;font-size:10px;color:#FFF;line-height:10px;text-align:justify;margin:10px 0px 0px 10px;">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</div>
<div style="float:left;width:110px;height:auto;background:#FFF;padding:5px;font-family:arial black;font-size:10px;color:#51519F;line-height:10px;text-align:left;letter-spacing:3px;margin:10px 0px 0px 0px;">FOUR</div>
<div style="float:left;width:100px;height:auto;font-family:arial;font-size:10px;color:#FFF;line-height:10px;text-align:justify;margin:10px 0px 0px 10px;">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</div>
<div style="float:left;width:110px;height:auto;background:#FFF;padding:5px;font-family:arial black;font-size:10px;color:#51519F;line-height:10px;text-align:left;letter-spacing:3px;margin:10px 0px 0px 0px;">FIVE</div>
<div style="float:left;width:100px;height:auto;font-family:arial;font-size:10px;color:#FFF;line-height:10px;text-align:justify;margin:10px 0px 0px 10px;">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</div>
</div>
</div>
</div>
</div>
<!--Guidelines-->
</div>
<!--Home Page-->
<!--Update Page-->
<div style="float:left;width:400px;height:500px;border-radius:20px;margin:0px 0px 0px 0px;">
<!--Tab-->
<div style="float:left;width:auto;height:auto;border-bottom:1px dotted #6262C0;padding-bottom:3px;font-family:arial;font-size:10px;color:#6262C0;line-height:10px;text-align:center;letter-spacing:3px;margin:15px 0px 0px 80px;">UPDATES</div>
<!--Tab-->
<!--Admin-->
<div style="float:left;width:335px;height:177px;border:1px dotted #FFF;margin:131px 0px 0px -115px;">
<div style="float:left;width:312px;height:155px;overflow:hidden;margin:12px 0px 0px 12px;">
<div style="float:left;width:312px;height:175px;overflow:auto;">
<div style="float:left;width:968px;">
<!--Admin 1-->
<div style="float:left;width:148px;height:155px;background:#FFF;border-radius:10px;margin:0px 0px 0px 0px;">
<div style="float:left;width:137px;height:144px;margin:5px 0px 0px 5px;"><img src="https://i.imgur.com/h5D8VoW.png" style="width:137px;height:144px;border-radius:5px;"></div>
<div style="float:left;width:148px;height:50px;overflow:hidden;background:#FFF;margin:-70px 0px 0px 0px;">
<div style="float:left;width:188px;height:50px;overflow:auto;">
<div style="float:left;width:148px;">
<div style="float:left;width:148px;height:50px;margin:0px 0px 0px 0px;">
<div style="float:left;font-family:arial black;font-size:10px;color:#C172AA;line-height:10px;text-align:left;margin:5px 0px 0px 5px;">AVAIL</div>
<div style="float:right;width:90px;height:8px;background:#51519F;border-radius:10px;margin:6px 6px 0px 0px;">
<div style="float:left;width:86px;height:4px;border-radius:10px;margin:2px 0px 0px 2px;">
<div style="float:left;width:50%;height:4px;background:#E5AEE0;border-radius:10px;margin:0px 0px 0px 0px;"></div>
</div>
</div>
<div style="float:left;font-family:arial black;font-size:10px;color:#C172AA;line-height:10px;text-align:left;margin:19px 0px 0px -33px;">ORIG</div>
<div style="float:right;width:90px;height:8px;background:#51519F;border-radius:10px;margin:6px 6px 0px 0px;">
<div style="float:left;width:86px;height:4px;border-radius:10px;margin:2px 0px 0px 2px;">
<div style="float:left;width:90%;height:4px;background:#E5AEE0;border-radius:10px;margin:0px 0px 0px 0px;"></div>
</div>
</div>
<div style="float:left;font-family:arial black;font-size:10px;color:#C172AA;line-height:10px;text-align:left;margin:19px 0px 0px -33px;">SKILLS</div>
<div style="float:right;width:90px;height:8px;background:#51519F;border-radius:10px;margin:6px 6px 0px 0px;">
<div style="float:left;width:86px;height:4px;border-radius:10px;margin:2px 0px 0px 2px;">
<div style="float:left;width:70%;height:4px;background:#E5AEE0;border-radius:10px;margin:0px 0px 0px 0px;"></div>
</div>
</div>
</div>
<div style="float:left;width:148px;height:50px;margin:0px 0px 0px 0px;">
<div style="float:left;font-family:arial black;font-size:10px;color:#C172AA;line-height:10px;text-align:left;margin:5px 0px 0px 5px;">USERNAME</div>
<div style="float:left;width:135px;height:25px;overflow:hidden;padding:5px;margin:0px 0px 0px 0px;">
<div style="float:left;width:175px;height:25px;overflow:auto;">
<div style="float:left;width:135px;">
<div style="font-family:arial;font-size:10px;color:#51519F;line-height:10px;text-align:justify;margin:0px 0px 0px 0px;">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Admin 1-->
<!--Admin 2-->
<div style="float:left;width:148px;height:155px;background:#FFF;border-radius:10px;margin:0px 0px 0px 16px;">
<div style="float:left;width:137px;height:144px;margin:5px 0px 0px 5px;"><img src="https://i.imgur.com/4HHRlwa.png" style="width:137px;height:144px;border-radius:5px;"></div>
<div style="float:left;width:148px;height:50px;overflow:hidden;background:#FFF;margin:-70px 0px 0px 0px;">
<div style="float:left;width:188px;height:50px;overflow:auto;">
<div style="float:left;width:148px;">
<div style="float:left;width:148px;height:50px;margin:0px 0px 0px 0px;">
<div style="float:left;font-family:arial black;font-size:10px;color:#C172AA;line-height:10px;text-align:left;margin:5px 0px 0px 5px;">AVAIL</div>
<div style="float:right;width:90px;height:8px;background:#51519F;border-radius:10px;margin:6px 6px 0px 0px;">
<div style="float:left;width:86px;height:4px;border-radius:10px;margin:2px 0px 0px 2px;">
<div style="float:left;width:50%;height:4px;background:#E5AEE0;border-radius:10px;margin:0px 0px 0px 0px;"></div>
</div>
</div>
<div style="float:left;font-family:arial black;font-size:10px;color:#C172AA;line-height:10px;text-align:left;margin:19px 0px 0px -33px;">ORIG</div>
<div style="float:right;width:90px;height:8px;background:#51519F;border-radius:10px;margin:6px 6px 0px 0px;">
<div style="float:left;width:86px;height:4px;border-radius:10px;margin:2px 0px 0px 2px;">
<div style="float:left;width:90%;height:4px;background:#E5AEE0;border-radius:10px;margin:0px 0px 0px 0px;"></div>
</div>
</div>
<div style="float:left;font-family:arial black;font-size:10px;color:#C172AA;line-height:10px;text-align:left;margin:19px 0px 0px -33px;">SKILLS</div>
<div style="float:right;width:90px;height:8px;background:#51519F;border-radius:10px;margin:6px 6px 0px 0px;">
<div style="float:left;width:86px;height:4px;border-radius:10px;margin:2px 0px 0px 2px;">
<div style="float:left;width:70%;height:4px;background:#E5AEE0;border-radius:10px;margin:0px 0px 0px 0px;"></div>
</div>
</div>
</div>
<div style="float:left;width:148px;height:50px;margin:0px 0px 0px 0px;">
<div style="float:left;font-family:arial black;font-size:10px;color:#C172AA;line-height:10px;text-align:left;margin:5px 0px 0px 5px;">USERNAME</div>
<div style="float:left;width:135px;height:25px;overflow:hidden;padding:5px;margin:0px 0px 0px 0px;">
<div style="float:left;width:175px;height:25px;overflow:auto;">
<div style="float:left;width:135px;">
<div style="font-family:arial;font-size:10px;color:#51519F;line-height:10px;text-align:justify;margin:0px 0px 0px 0px;">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Admin 2-->
<!--Admin 3-->
<div style="float:left;width:148px;height:155px;background:#FFF;border-radius:10px;margin:0px 0px 0px 16px;">
<div style="float:left;width:137px;height:144px;margin:5px 0px 0px 5px;"><img src="https://i.imgur.com/h5D8VoW.png" style="width:137px;height:144px;border-radius:5px;"></div>
<div style="float:left;width:148px;height:50px;overflow:hidden;background:#FFF;margin:-70px 0px 0px 0px;">
<div style="float:left;width:188px;height:50px;overflow:auto;">
<div style="float:left;width:148px;">
<div style="float:left;width:148px;height:50px;margin:0px 0px 0px 0px;">
<div style="float:left;font-family:arial black;font-size:10px;color:#C172AA;line-height:10px;text-align:left;margin:5px 0px 0px 5px;">AVAIL</div>
<div style="float:right;width:90px;height:8px;background:#51519F;border-radius:10px;margin:6px 6px 0px 0px;">
<div style="float:left;width:86px;height:4px;border-radius:10px;margin:2px 0px 0px 2px;">
<div style="float:left;width:50%;height:4px;background:#E5AEE0;border-radius:10px;margin:0px 0px 0px 0px;"></div>
</div>
</div>
<div style="float:left;font-family:arial black;font-size:10px;color:#C172AA;line-height:10px;text-align:left;margin:19px 0px 0px -33px;">ORIG</div>
<div style="float:right;width:90px;height:8px;background:#51519F;border-radius:10px;margin:6px 6px 0px 0px;">
<div style="float:left;width:86px;height:4px;border-radius:10px;margin:2px 0px 0px 2px;">
<div style="float:left;width:90%;height:4px;background:#E5AEE0;border-radius:10px;margin:0px 0px 0px 0px;"></div>
</div>
</div>
<div style="float:left;font-family:arial black;font-size:10px;color:#C172AA;line-height:10px;text-align:left;margin:19px 0px 0px -33px;">SKILLS</div>
<div style="float:right;width:90px;height:8px;background:#51519F;border-radius:10px;margin:6px 6px 0px 0px;">
<div style="float:left;width:86px;height:4px;border-radius:10px;margin:2px 0px 0px 2px;">
<div style="float:left;width:70%;height:4px;background:#E5AEE0;border-radius:10px;margin:0px 0px 0px 0px;"></div>
</div>
</div>
</div>
<div style="float:left;width:148px;height:50px;margin:0px 0px 0px 0px;">
<div style="float:left;font-family:arial black;font-size:10px;color:#C172AA;line-height:10px;text-align:left;margin:5px 0px 0px 5px;">USERNAME</div>
<div style="float:left;width:135px;height:25px;overflow:hidden;padding:5px;margin:0px 0px 0px 0px;">
<div style="float:left;width:175px;height:25px;overflow:auto;">
<div style="float:left;width:135px;">
<div style="font-family:arial;font-size:10px;color:#51519F;line-height:10px;text-align:justify;margin:0px 0px 0px 0px;">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Admin 3-->
<!--Admin 4-->
<div style="float:left;width:148px;height:155px;background:#FFF;border-radius:10px;margin:0px 0px 0px 16px;">
<div style="float:left;width:137px;height:144px;margin:5px 0px 0px 5px;"><img src="https://i.imgur.com/4HHRlwa.png" style="width:137px;height:144px;border-radius:5px;"></div>
<div style="float:left;width:148px;height:50px;overflow:hidden;background:#FFF;margin:-70px 0px 0px 0px;">
<div style="float:left;width:188px;height:50px;overflow:auto;">
<div style="float:left;width:148px;">
<div style="float:left;width:148px;height:50px;margin:0px 0px 0px 0px;">
<div style="float:left;font-family:arial black;font-size:10px;color:#C172AA;line-height:10px;text-align:left;margin:5px 0px 0px 5px;">AVAIL</div>
<div style="float:right;width:90px;height:8px;background:#51519F;border-radius:10px;margin:6px 6px 0px 0px;">
<div style="float:left;width:86px;height:4px;border-radius:10px;margin:2px 0px 0px 2px;">
<div style="float:left;width:50%;height:4px;background:#E5AEE0;border-radius:10px;margin:0px 0px 0px 0px;"></div>
</div>
</div>
<div style="float:left;font-family:arial black;font-size:10px;color:#C172AA;line-height:10px;text-align:left;margin:19px 0px 0px -33px;">ORIG</div>
<div style="float:right;width:90px;height:8px;background:#51519F;border-radius:10px;margin:6px 6px 0px 0px;">
<div style="float:left;width:86px;height:4px;border-radius:10px;margin:2px 0px 0px 2px;">
<div style="float:left;width:90%;height:4px;background:#E5AEE0;border-radius:10px;margin:0px 0px 0px 0px;"></div>
</div>
</div>
<div style="float:left;font-family:arial black;font-size:10px;color:#C172AA;line-height:10px;text-align:left;margin:19px 0px 0px -33px;">SKILLS</div>
<div style="float:right;width:90px;height:8px;background:#51519F;border-radius:10px;margin:6px 6px 0px 0px;">
<div style="float:left;width:86px;height:4px;border-radius:10px;margin:2px 0px 0px 2px;">
<div style="float:left;width:70%;height:4px;background:#E5AEE0;border-radius:10px;margin:0px 0px 0px 0px;"></div>
</div>
</div>
</div>
<div style="float:left;width:148px;height:50px;margin:0px 0px 0px 0px;">
<div style="float:left;font-family:arial black;font-size:10px;color:#C172AA;line-height:10px;text-align:left;margin:5px 0px 0px 5px;">USERNAME</div>
<div style="float:left;width:135px;height:25px;overflow:hidden;padding:5px;margin:0px 0px 0px 0px;">
<div style="float:left;width:175px;height:25px;overflow:auto;">
<div style="float:left;width:135px;">
<div style="font-family:arial;font-size:10px;color:#51519F;line-height:10px;text-align:justify;margin:0px 0px 0px 0px;">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Admin 4-->
<!--Admin 5-->
<div style="float:left;width:148px;height:155px;background:#FFF;border-radius:10px;margin:0px 0px 0px 16px;">
<div style="float:left;width:137px;height:144px;margin:5px 0px 0px 5px;"><img src="https://i.imgur.com/h5D8VoW.png" style="width:137px;height:144px;border-radius:5px;"></div>
<div style="float:left;width:148px;height:50px;overflow:hidden;background:#FFF;margin:-70px 0px 0px 0px;">
<div style="float:left;width:188px;height:50px;overflow:auto;">
<div style="float:left;width:148px;">
<div style="float:left;width:148px;height:50px;margin:0px 0px 0px 0px;">
<div style="float:left;font-family:arial black;font-size:10px;color:#C172AA;line-height:10px;text-align:left;margin:5px 0px 0px 5px;">AVAIL</div>
<div style="float:right;width:90px;height:8px;background:#51519F;border-radius:10px;margin:6px 6px 0px 0px;">
<div style="float:left;width:86px;height:4px;border-radius:10px;margin:2px 0px 0px 2px;">
<div style="float:left;width:50%;height:4px;background:#E5AEE0;border-radius:10px;margin:0px 0px 0px 0px;"></div>
</div>
</div>
<div style="float:left;font-family:arial black;font-size:10px;color:#C172AA;line-height:10px;text-align:left;margin:19px 0px 0px -33px;">ORIG</div>
<div style="float:right;width:90px;height:8px;background:#51519F;border-radius:10px;margin:6px 6px 0px 0px;">
<div style="float:left;width:86px;height:4px;border-radius:10px;margin:2px 0px 0px 2px;">
<div style="float:left;width:90%;height:4px;background:#E5AEE0;border-radius:10px;margin:0px 0px 0px 0px;"></div>
</div>
</div>
<div style="float:left;font-family:arial black;font-size:10px;color:#C172AA;line-height:10px;text-align:left;margin:19px 0px 0px -33px;">SKILLS</div>
<div style="float:right;width:90px;height:8px;background:#51519F;border-radius:10px;margin:6px 6px 0px 0px;">
<div style="float:left;width:86px;height:4px;border-radius:10px;margin:2px 0px 0px 2px;">
<div style="float:left;width:70%;height:4px;background:#E5AEE0;border-radius:10px;margin:0px 0px 0px 0px;"></div>
</div>
</div>
</div>
<div style="float:left;width:148px;height:50px;margin:0px 0px 0px 0px;">
<div style="float:left;font-family:arial black;font-size:10px;color:#C172AA;line-height:10px;text-align:left;margin:5px 0px 0px 5px;">USERNAME</div>
<div style="float:left;width:135px;height:25px;overflow:hidden;padding:5px;margin:0px 0px 0px 0px;">
<div style="float:left;width:175px;height:25px;overflow:auto;">
<div style="float:left;width:135px;">
<div style="font-family:arial;font-size:10px;color:#51519F;line-height:10px;text-align:justify;margin:0px 0px 0px 0px;">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Admin 5-->
<!--Admin 6-->
<div style="float:left;width:148px;height:155px;background:#FFF;border-radius:10px;margin:0px 0px 0px 16px;">
<div style="float:left;width:137px;height:144px;margin:5px 0px 0px 5px;"><img src="https://i.imgur.com/4HHRlwa.png" style="width:137px;height:144px;border-radius:5px;"></div>
<div style="float:left;width:148px;height:50px;overflow:hidden;background:#FFF;margin:-70px 0px 0px 0px;">
<div style="float:left;width:188px;height:50px;overflow:auto;">
<div style="float:left;width:148px;">
<div style="float:left;width:148px;height:50px;margin:0px 0px 0px 0px;">
<div style="float:left;font-family:arial black;font-size:10px;color:#C172AA;line-height:10px;text-align:left;margin:5px 0px 0px 5px;">AVAIL</div>
<div style="float:right;width:90px;height:8px;background:#51519F;border-radius:10px;margin:6px 6px 0px 0px;">
<div style="float:left;width:86px;height:4px;border-radius:10px;margin:2px 0px 0px 2px;">
<div style="float:left;width:50%;height:4px;background:#E5AEE0;border-radius:10px;margin:0px 0px 0px 0px;"></div>
</div>
</div>
<div style="float:left;font-family:arial black;font-size:10px;color:#C172AA;line-height:10px;text-align:left;margin:19px 0px 0px -33px;">ORIG</div>
<div style="float:right;width:90px;height:8px;background:#51519F;border-radius:10px;margin:6px 6px 0px 0px;">
<div style="float:left;width:86px;height:4px;border-radius:10px;margin:2px 0px 0px 2px;">
<div style="float:left;width:90%;height:4px;background:#E5AEE0;border-radius:10px;margin:0px 0px 0px 0px;"></div>
</div>
</div>
<div style="float:left;font-family:arial black;font-size:10px;color:#C172AA;line-height:10px;text-align:left;margin:19px 0px 0px -33px;">SKILLS</div>
<div style="float:right;width:90px;height:8px;background:#51519F;border-radius:10px;margin:6px 6px 0px 0px;">
<div style="float:left;width:86px;height:4px;border-radius:10px;margin:2px 0px 0px 2px;">
<div style="float:left;width:70%;height:4px;background:#E5AEE0;border-radius:10px;margin:0px 0px 0px 0px;"></div>
</div>
</div>
</div>
<div style="float:left;width:148px;height:50px;margin:0px 0px 0px 0px;">
<div style="float:left;font-family:arial black;font-size:10px;color:#C172AA;line-height:10px;text-align:left;margin:5px 0px 0px 5px;">USERNAME</div>
<div style="float:left;width:135px;height:25px;overflow:hidden;padding:5px;margin:0px 0px 0px 0px;">
<div style="float:left;width:175px;height:25px;overflow:auto;">
<div style="float:left;width:135px;">
<div style="font-family:arial;font-size:10px;color:#51519F;line-height:10px;text-align:justify;margin:0px 0px 0px 0px;">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Admin 6-->
</div>
</div>
</div>
</div>
<!--Admin-->
<!--Application-->
<div style="float:left;width:120px;height:140px;border-radius:10px;background:#9C7FD2;margin:30px 0px 0px 20px;">
<div style="float:left;width:auto;height:auto;border-bottom:2px solid #FFF;padding-bottom:3px;font-family:arial black;font-size:12px;color:#FFF;line-height:12px;text-align:left;letter-spacing:3px;margin:10px 0px 0px 10px;"><b>APPLY</b></div>
<div style="float:left;width:100px;height:93px;overflow:hidden;background:#9C7FD2;margin:10px 0px 0px 10px;">
<div style="float:left;width:140px;height:93px;overflow:auto;">
<div style="float:left;width:100px;">
<div style="font-family:arial;font-size:10px;color:#FFF;line-height:10px;text-align:justify;">"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."</div>
</div>
</div>
</div>
</div>
<!--Application-->
<!--Updates/FAQs-->
<div style="float:left;width:220px;height:140px;border-radius:10px;background:#9C7FD2;margin:30px 0px 0px 20px;">
<div style="float:left;width:auto;height:auto;border-bottom:2px solid #FFF;padding-bottom:3px;font-family:arial black;font-size:12px;color:#FFF;line-height:12px;text-align:left;letter-spacing:3px;margin:10px 0px 0px 10px;"><b>UPDATES / FAQS</b></div>
<div style="float:left;width:200px;height:93px;overflow:hidden;background:#9C7FD2;margin:10px 0px 0px 10px;">
<div style="float:left;width:240px;height:93px;overflow:auto;">
<div style="float:left;width:200px;">
<div style="float:left;width:200px;height:auto;background:#FBC4BE;padding:5px;font-family:arial black;font-size:10px;color:#51519F;line-height:10px;text-align:justify;letter-spacing:3px;margin:0px 0px 0px 0px;">00.00.00</div>
<div style="float:left;font-family:arial;font-size:10px;color:#FFF;line-height:10px;text-align:justify;margin:10px 0px 0px 0px;">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</div>
<div style="float:left;width:200px;height:auto;background:#FBC4BE;padding:5px;font-family:arial black;font-size:10px;color:#51519F;line-height:10px;text-align:justify;letter-spacing:3px;margin:10px 0px 0px 0px;">00.00.00</div>
<div style="float:left;font-family:arial;font-size:10px;color:#FFF;line-height:10px;text-align:justify;margin:10px 0px 0px 0px;">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</div>
<div style="float:left;width:200px;height:auto;background:#FBC4BE;padding:5px;font-family:arial black;font-size:10px;color:#51519F;line-height:10px;text-align:justify;letter-spacing:3px;margin:10px 0px 0px 0px;">00.00.00</div>
<div style="float:left;font-family:arial;font-size:10px;color:#FFF;line-height:10px;text-align:justify;margin:10px 0px 0px 0px;">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</div>
</div>
</div>
</div>
</div>
<!--Updates/FAQs-->
</div>
<!--Update Page-->
<!--Lists Page-->
<div style="float:left;width:400px;height:500px;border-radius:20px;margin:0px 0px 0px 0px;">
<!--Tab-->
<div style="float:left;width:auto;height:auto;border-bottom:1px dotted #6262C0;padding-bottom:3px;font-family:arial;font-size:10px;color:#6262C0;line-height:10px;text-align:center;letter-spacing:3px;margin:15px 0px 0px 165px;;">LISTS</div>
<!--Tab-->
<!--Request List-->
<div style="float:left;width:170px;height:140px;border-radius:10px;background:#9C7FD2;margin:340px 0px 0px -188px;">
<div style="float:left;width:auto;height:auto;border-bottom:2px solid #FFF;padding-bottom:3px;font-family:arial black;font-size:12px;color:#FFF;line-height:12px;text-align:left;letter-spacing:3px;margin:10px 0px 0px 10px;"><b>REQLIST</b></div>
<div style="float:left;width:150px;height:93px;overflow:hidden;background:#9C7FD2;margin:10px 0px 0px 10px;">
<div style="float:left;width:190px;height:93px;overflow:auto;">
<div style="float:left;width:150px;">
<div style="font-family:arial;font-size:10px;color:#FFF;line-height:10px;text-align:justify;">"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."</div>
</div>
</div>
</div>
</div>
<!--Request List-->
<!--Black List-->
<div style="float:right;width:170px;height:140px;border-radius:10px;background:#9C7FD2;margin:340px 20px 0px 0px;">
<div style="float:left;width:auto;height:auto;border-bottom:2px solid #FFF;padding-bottom:3px;font-family:arial black;font-size:12px;color:#FFF;line-height:12px;text-align:left;letter-spacing:3px;margin:10px 0px 0px 10px;"><b>BLACKLIST</b></div>
<div style="float:left;width:150px;height:93px;overflow:hidden;background:#9C7FD2;margin:10px 0px 0px 10px;">
<div style="float:left;width:190px;height:93px;overflow:auto;">
<div style="float:left;width:150px;">
<div style="font-family:arial;font-size:10px;color:#FFF;line-height:10px;text-align:justify;">"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."</div>
</div>
</div>
</div>
</div>
<!--Black List-->
</div>
<!--Lists Page-->
<!--Album Page-->
<div style="float:left;width:400px;height:500px;border-radius:20px;margin:0px 0px 0px 0px;">
<!--Tab-->
<div style="float:left;width:auto;height:auto;border-bottom:1px dotted #6262C0;padding-bottom:3px;font-family:arial;font-size:10px;color:#6262C0;line-height:10px;text-align:center;letter-spacing:3px;margin:15px 0px 0px 225px;;">ALBUM</div>
<!--Tab-->
<!--Album Carousel-->
<div style="width:400px;height:300px;overflow:hidden;background:#FFF;margin:150px 0px 0px 0px;">
<div style="width:400px;height:320px;overflow:auto;">
<div style="width:1240px;">
<div style="float:left;width:190px;height:299px;margin:0px 0px 0px 0px;"><img src="https://i.imgur.com/7isPkha.png" style="width:190px;height:299px;"></div>
<div style="float:left;width:190px;height:299px;margin:0px 0px 0px 20px;"><img src="https://i.imgur.com/JI1D9vc.png" style="width:190px;height:299px;"></div>
<div style="float:left;width:190px;height:299px;margin:0px 0px 0px 20px;"><img src="https://i.imgur.com/7isPkha.png" style="width:190px;height:299px;"></div>
<div style="float:left;width:190px;height:299px;margin:0px 0px 0px 20px;"><img src="https://i.imgur.com/JI1D9vc.png" style="width:190px;height:299px;"></div>
<div style="float:left;width:190px;height:299px;margin:0px 0px 0px 20px;"><img src="https://i.imgur.com/7isPkha.png" style="width:190px;height:299px;"></div>
<div style="float:left;width:190px;height:299px;margin:0px 0px 0px 20px;"><img src="https://i.imgur.com/JI1D9vc.png" style="width:190px;height:299px;"></div>
</div>
</div>
</div>
<!--Album Carousel-->
<!--Blocks-->
<div style="float:left;width:400px;height:30px;background:#FFF;margin:-330px 0px 0px 0px;"></div>
<div style="float:left;width:400px;height:30px;border-radius:0px 0px 50px 50px;background:#FFF;margin:-300px 0px 0px 0px;"></div>
<div style="float:left;width:400px;height:30px;border-radius:50px 50px 0px 0px;background:#FFF;margin:-30px 0px 0px 0px;"></div>
<div style="float:left;width:400px;height:30px;background:#FFF;margin:0px 0px 0px 0px;"></div>
<!--Blocks-->
</div>
<!--Album Page-->
</div>
</div>
</div>
<!--Main Scroll-->
</div>
<!--Base End-->
</div>
<!--Background End-->
<!--DO NOT REMOVE CREDITS-->
<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>
<!--DO NOT REMOVE CREDITS-->
</div>
<!--Layout End-->
<!--Layout Start-->
<div style="width:600px;margin:auto;">
<!--Background Start-->
<div style="float:left;width:600px;height:400px;background:#6262C0;margin:0px 0px 5px 0px;">
<!--Notes-->
<div style="float:left;width:280px;height:400px;margin:0px 0px 0px 0px;">
<!--Title-->
<div style="float:left;font-family:georgia;font-size:40px;color:#4A4A91;line-height:40px;text-align:center;margin:65px 0px 0px 37px;"><b><i>astrophile</i></b>
<div style="font-family:georgia;font-size:40px;color:#6262C0;line-height:40px;text-align:center;margin:-43px 0px 0px -5px;"><b><i>astrophile</i></b></div>
<div style="font-family:georgia;font-size:40px;color:#FEE2DC;line-height:40px;text-align:center;margin:-43px 0px 0px -10px;"><b><i>astrophile</i></b></div>
</div>
<!--Title-->
<!--Admin-->
<div style="float:left;width:auto;height:auto;padding:5px 5px 5px 8px;border:1px solid #FEE2DC;font-family:arial;font-size:10px;color:#FEE2DC;line-height:10px;text-align:center;letter-spacing:3px;margin:20px 0px 0px 20px;">ADMIN</div>
<!--Admin-->
<!--Requested By-->
<div style="float:right;width:auto;height:auto;padding:5px 5px 5px 8px;background:#E5AEE0;font-family:arial;font-size:10px;color:#6262C0;line-height:10px;text-align:center;letter-spacing:3px;margin:55px 20px 0px 0px;">USERNAME</div>
<!--Requested By-->
<!--Author's Notes-->
<div style="float:left;width:218px;height:135px;overflow:hidden;border:1px solid #FEE2DC;padding:10px;margin:10px 0px 0px 20px;">
<div style="float:left;width:258px;height:135px;overflow:auto;">
<div style="float:left;width:218px;">
<div style="font-family:arial;font-size:11px;color:#FEE2DC;line-height:11px;text-align:justify;">"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. 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."</div>
</div>
</div>
</div>
<!--Author's Notes-->
</div>
<!--Notes-->
<!--Poster-->
<div style="float:right;width:300px;height:400px;background:#FFF;margin:0px 20px 0px 0px;">
<div style="float:left;width:280px;height:380px;border:1px dotted #51519F;margin:10px 0px 0px 10px;">
<div style="float:left;width:260px;height:360px;margin:10px 0px 0px 10px;"><img src="https://i.imgur.com/L1CmSj9.png" style="width:260px;height:360px;"></div>
</div>
</div>
<!--Poster-->
</div>
<!--Background End-->
<!--DO NOT REMOVE CREDITS-->
<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>
<!--DO NOT REMOVE CREDITS-->
</div>
<!--Layout End-->
<!--Layout Start-->
<div style="width:700px;margin:auto;">
<!--Background Start-->
<div style="float:left;width:700px;height:400px;background:#6262C0;margin:0px 0px 5px 0px;">
<!--Notes-->
<div style="float:left;width:280px;height:400px;margin:0px 0px 0px 0px;">
<!--Title-->
<div style="float:left;font-family:georgia;font-size:40px;color:#4A4A91;line-height:40px;text-align:center;margin:65px 0px 0px 37px;"><b><i>astrophile</i></b>
<div style="font-family:georgia;font-size:40px;color:#6262C0;line-height:40px;text-align:center;margin:-43px 0px 0px -5px;"><b><i>astrophile</i></b></div>
<div style="font-family:georgia;font-size:40px;color:#FEE2DC;line-height:40px;text-align:center;margin:-43px 0px 0px -10px;"><b><i>astrophile</i></b></div>
</div>
<!--Title-->
<!--Admin-->
<div style="float:left;width:auto;height:auto;padding:5px 5px 5px 8px;border:1px solid #FEE2DC;font-family:arial;font-size:10px;color:#FEE2DC;line-height:10px;text-align:center;letter-spacing:3px;margin:20px 0px 0px 20px;">ADMIN</div>
<!--Admin-->
<!--Requested By-->
<div style="float:right;width:auto;height:auto;padding:5px 5px 5px 8px;background:#E5AEE0;font-family:arial;font-size:10px;color:#6262C0;line-height:10px;text-align:center;letter-spacing:3px;margin:55px 20px 0px 0px;">USERNAME</div>
<!--Requested By-->
<!--Author's Notes-->
<div style="float:left;width:218px;height:135px;overflow:hidden;border:1px solid #FEE2DC;padding:10px;margin:10px 0px 0px 20px;">
<div style="float:left;width:258px;height:135px;overflow:auto;">
<div style="float:left;width:218px;">
<div style="font-family:arial;font-size:11px;color:#FEE2DC;line-height:11px;text-align:justify;">"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. 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."</div>
</div>
</div>
</div>
<!--Author's Notes-->
</div>
<!--Notes-->
<!--Poster-->
<div style="float:right;width:420px;height:300px;background:#FFF;margin:50px 0px 0px 0px;">
<div style="float:left;width:400px;height:278px;border:1px dotted #51519F;margin:10px 0px 0px 10px;">
<div style="float:left;width:380px;height:258px;margin:10px 0px 0px 10px;"><img src="https://i.imgur.com/s5clhuW.png" style="width:380px;height:258px;"></div>
</div>
</div>
<!--Poster-->
</div>
<!--Background End-->
<!--DO NOT REMOVE CREDITS-->
<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>
<!--DO NOT REMOVE CREDITS-->
</div>
<!--Layout End-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment