Skip to content

Instantly share code, notes, and snippets.

@Nefelibatax

Nefelibatax/01. Buff Baby : Main Page Secret

Last active July 28, 2021 00:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Nefelibatax/32aa82238989c9d4240c96e0f493d0e4 to your computer and use it in GitHub Desktop.
Save Nefelibatax/32aa82238989c9d4240c96e0f493d0e4 to your computer and use it in GitHub Desktop.
Download ZIP
✱ Buff Baby : Graphic Shop Set
Raw
01. Buff Baby : Main Page
<!-- /// READ ME ///
TIP: To change certain items/colors/etc. search the following keywords or Hex colours (e.g. #000000) while in HTML Editor mode.
To do so press CTRL+F or CMD+F and use the keywords in the list to find each section.
[ COLORS ]
• Main Colour / Raisin Black (#262427)
• Grayish Cyan (#b5c9c9)
• Soft Orange (#ecb193)
• Lemon Meringue (#f5e5c3)
[ IMAGES ]
To Change images you can do so in Code by replacing the code in 'SRC' or simply change it in AFF Editor
• Main Panel Image : BBPanelImg (254×203)
• Sample Images : BBSampleImg (Four will appear! // Max width must be 134 in previews!)
• Staff Image 01 : BBStaffImg01 (64×64)
• Staff Image 02 : BBStaffImg02 (64×64)
• Staff Image 03 : BBStaffImg03 (64×64)
• Staff Image 04 : BBStaffImg04 (64×64)
[ TEXT ]
• Title : BBTitle (Ideally must be two lines, must adjust margin if one line)
• Slogan // Text Below Title : BBSlogan
• Status List : BBStatus
• Link 01 : BBLink01
• Link 02 : BBLink02
• Link 03 : BBLink03
• Link 04 : BBLink04
• Quick Update : BBUpdate
• About Title : BBH1About
• About : BBAbout
• About Trivia : BBAboutTrivia
• Rules Title : BBH1Rules
• Rules : BBRules
• Application Title : BBH1App
• Application : BBApp
• Application Format : BBAppFormat
• Sample Title : BBH1Sample
• Affiliate Tile : BBH1Affiliate
• Affiliate : BBAffiliate
• Staff Name 01 : BBStaff01
• Staff Name 02 : BBStaff02
• Staff Name 03 : BBStaff03
• Staff Name 04 : BBStaff04
[ DIVS ]
• Most Divs are responsive and will adjust on how much you type in so do not adjust heights or widths unless you're familiar with code.
[ MISC ]
• Important sections will be marked for easier adjustments // AFF automatically removes comments in codes so if possible make changes before saving to avoid instructions from disappearing or keep RAW code open on a different tab
-->
<div style="width:715px;height:596px;margin:auto;">
<!-- /// MAIN CONTAINER /// CHANGE BACKGROUND COLOR TO CHANGE GRID COLOR /// -->
<div style="background:#262427;width:715px;height:596px;float:left;"><img src="https://i.imgur.com/jz3KVBf.png" /></div>
<div style="width:715px;height:596px;float:left;margin:-596px 0px 0px;">
<!-- /// SIDEBAR /// -->
<div style="background:#262427;width:254px;height:594px;float:left;margin:1px;">
<!-- TITLE -->
<div style="background:#fff;width:254px;height:186px;float:left;">
<p class="BBTitle" style="font-size:32px;font-family:Arial;color:#262427;text-transform:uppercase;text-align:right;line-height:28px;letter-spacing:-2px;font-weight:bold;margin:98px 15px 4px;">
<span style="font-weight:900;color:#b5c9c9;">*</span>I'm a<br />
Buff Baby
</p>
<p class="BBSlogan" style="font-size:10px;font-family:Arial;color:#262427;text-transform:uppercase;text-align:right;line-height:10px;letter-spacing:0.5px;font-weight:bold;margin:0px 15px;">
<span style="background:#ecb193;">But I dance like a man.</span>
</p>
</div>
<!-- END OF TITLE -->
<!-- REQUEST PROGRESS LIST -->
<div style="width:156px;height:90px;float:left;overflow:hidden;margin:49px;">
<div style="width:173px;height:90px;float:left;overflow:auto;">
<p class="BBStatus" style="font-size:8px;font-family:Arial;color:#fff;text-transform:uppercase;text-align:left;line-height:11px;letter-spacing:1px;margin:0px;">
Username - Request Denied<br />
Username - Complete<br />
Username - Complete<br />
Username - Pending<br />
Username - Pending<br />
Username - Cancelled<br />
[✱] Press Shift+Enter to add another line<br />
Username - Pending<br />
Username - Pending<br />
Username - Pending
</p>
</div>
</div>
<!-- END OF REQUEST PROGRESS LIST -->
<!-- QUICK LINKS SECTION -->
<div style="background:#ddd;width:254px;height:203px;float:left;">
<div style="width:254px;height:203px;float:left;">
<img class="BBPanelImg" src="https://i.imgur.com/BW99aRI.png" style="width:254px;" />
</div>
<div style="width:156px;height:109px;float:left;overflow:hidden;margin:-156px 49px 49px;">
<div style="width:173px;height:109px;float:left;overflow:auto;">
<div style="width:156px;height:25px;float:left;">
<div style="background:#f5e5c3;width:25px;height:25px;float:left;"></div>
<div style="background:#fff;width:128px;height:25px;float:right;">
<p class="BBLink01" style="font-size:8px;font-family:Arial;color:#262427;text-transform:uppercase;font-weight:bold;text-align:left;line-height:11px;letter-spacing:1px;margin:7px 10px;">
<a href="https://www.asianfanfics.com/" style="text-decoration:none;color:#262427;">Link Sample 001</a>
</p>
</div>
</div>
<div style="width:156px;height:25px;float:left;margin:3px 0px 0px;">
<div style="background:#262427;width:25px;height:25px;float:left;"></div>
<div style="background:#fff;width:128px;height:25px;float:right;">
<p class="BBLink02" style="font-size:8px;font-family:Arial;color:#262427;text-transform:uppercase;font-weight:bold;text-align:left;line-height:11px;letter-spacing:1px;margin:7px 10px;">
<a href="https://www.asianfanfics.com/" style="text-decoration:none;color:#262427;">Link Sample 002</a>
</p>
</div>
</div>
<div style="width:156px;height:25px;float:left;margin:3px 0px 0px;">
<div style="background:#ecb193;width:25px;height:25px;float:left;"></div>
<div style="background:#fff;width:128px;height:25px;float:right;">
<p class="BBLink03" style="font-size:8px;font-family:Arial;color:#262427;text-transform:uppercase;font-weight:bold;text-align:left;line-height:11px;letter-spacing:1px;margin:7px 10px;">
<a href="https://www.asianfanfics.com/" style="text-decoration:none;color:#262427;">Link Sample 003</a>
</p>
</div>
</div>
<!-- *** COPY FROM HERE *** -->
<div style="width:156px;height:25px;float:left;margin:3px 0px 0px;">
<div style="background:#b5c9c9;width:25px;height:25px;float:left;"></div>
<div style="background:#fff;width:128px;height:25px;float:right;">
<p class="BBLink04" style="font-size:8px;font-family:Arial;color:#262427;text-transform:uppercase;font-weight:bold;text-align:left;line-height:11px;letter-spacing:1px;margin:7px 10px;">
<a href="https://www.asianfanfics.com/" style="text-decoration:none;color:#262427;">Link Sample 004</a>
</p>
</div>
</div>
<!-- *** TO HERE AND PASTE DIRECTLY BELOW TO ADD MORE LINKS! SECTION WILL AUTOMATICALLY ADD SCROLL TO ACCOMODATE SEVERAL LINKS *** -->
</div>
</div>
</div>
<!-- END OF QUICK LINKS SECTION -->
</div>
<!-- /// END OF SIDEBAR /// -->
<!-- /// QUICK UPDATE SECTION /// -->
<div style="width:426px;height:34px;background:#262427;float:left;margin:18px 16px 17px;">
<p class="BBUpdate" style="font-size:8px;font-family:Arial;color:#fff;text-transform:uppercase;text-align:left;line-height:11px;letter-spacing:1px;margin:12px 15px;">
<b>✱ LATEST UPDATE</b> — Your Text Goes Here!
</p>
</div>
<!-- /// END OF QUICK UPDATE SECTION /// -->
<!-- /// CONTENT /// -->
<div style="background:#fff;width:305px;height:475px;float:left;margin-left:51px;">
<div style="width:309px;height:445px;float:left;margin:15px 15px 15px -19px;overflow:hidden;">
<div style="width:326px;height:445px;float:left;overflow:auto;">
<!-- ABOUT SECTION -->
<div style="width:275px;float:left;border-bottom:1px solid #262427;margin-left:34px;padding-bottom:15px;">
<div style="background:#f5e5c3;width:18px;height:18px;float:left;margin-left:-34px;line-height:10px;">
<img src="https://img.icons8.com/fluent-systems-filled/13/262427/quote-left.png" style="margin:3px;" />
</div>
<div style="background:#f5e5c3;height:18px;float:left;margin-left:-15px;">
<p class="BBH1About" style="font-size:13px;font-family:Arial;color:#262427;text-transform:uppercase;text-align:center;line-height:13px;letter-spacing:-1px;font-weight:900;margin:0px;padding:3px 8px;">
Who Are We
</p>
</div>
<div style="float:left;">
<p class="BBAbout" style="font-size:11px;font-family:Arial;color:#262427;text-align:justify;line-height:13px;margin:13px 0px 0px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh cras pulvinar mattis nunc sed. Neque ornare aenean euismod elementum nisi quis eleifend quam.
</p>
</div>
<div style="background:#eee;width:245px;float:left;margin:15px 15px 0px;">
<p class="BBAboutTrivia" style="font-size:8px;font-family:Arial;color:#262427;text-transform:uppercase;text-align:left;line-height:13px;letter-spacing:0.5px;margin:15px;">
<b>Founder:</b> Username &#38; Username<br />
<b>Established:</b> Month 00, 0000<br />
<b>Request Status:</b> Open<br />
<b>Hiring:</b> Graphic Designers<br /><br />
[✱] Press Shift+Enter to add another line
</p>
</div>
</div>
<!-- END OF ABOUT SECTION -->
<!-- RULES SECTION -->
<div style="width:275px;float:left;border-bottom:1px solid #262427;margin:15px 0px 0px 34px;padding-bottom:15px;">
<div style="background:#b5c9c9;width:18px;height:18px;float:left;margin-left:-34px;line-height:auto;line-height:10px;">
<img src="https://img.icons8.com/fluent-systems-filled/13/262427/star.png" style="margin:3px;" />
</div>
<div style="background:#b5c9c9;height:18px;float:left;margin-left:-15px;">
<p class="BBH1Rules" style="font-size:13px;font-family:Arial;color:#262427;text-transform:uppercase;text-align:center;line-height:13px;letter-spacing:-1px;font-weight:900;margin:0px;padding:3px 8px;">
Just Some Rules
</p>
</div>
<div style="float:left;">
<p class="BBRules" style="font-size:11px;font-family:Arial;color:#262427;text-align:justify;line-height:13px;margin:13px 0px 0px;">
<span style="font-weight:900;">one.</span> Imperdiet massa tincidunt nunc pulvinar. <br /><br />
<span style="font-weight:900;">two.</span> Vel eros donec ac odio tempor orci dapibus. Suspendisse in est ante in nibh. Ornare suspendisse sed nisi lacus sed viverra tellus in.<br /><br />
<span style="font-weight:900;">three.</span> Magna sit amet purus gravida quis blandit turpis. Neque convallis a cras semper auctor neque vitae.<br /><br />
<span style="font-weight:900;">four.</span> Sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum. Aliquet lectus proin nibh nisl condimentum id venenatis. Sed blandit libero volutpat sed cras ornare arcu dui vivamus.<br /><br />
<span style="font-weight:900;">five.</span> Purus faucibus ornare suspendisse sed nisi lacus sed viverra tellus. Eget est lorem ipsum dolor. Iaculis urna id volutpat lacus laoreet non curabitur gravida.<br /><br />
[✱] Press Shift+Enter to add another line, or Shift+Enter twice to mimic the line break above.
</p>
</div>
</div>
<!-- END OF RULES SECTION -->
<!-- APPLICATION SECTION -->
<div style="width:275px;float:left;border-bottom:1px solid #262427;margin:15px 0px 0px 34px;padding-bottom:15px;">
<div style="background:#ecb193;width:18px;height:18px;float:left;margin-left:-34px;line-height:auto;line-height:10px;">
<img src="https://img.icons8.com/fluent-systems-filled/13/262427/lightning-bolt.png" style="margin:3px;" />
</div>
<div style="background:#ecb193;height:18px;float:left;margin-left:-15px;">
<p class="BBH1App" style="font-size:13px;font-family:Arial;color:#262427;text-transform:uppercase;text-align:center;line-height:13px;letter-spacing:-1px;font-weight:900;margin:0px;padding:3px 8px;">
Steps to make a Request
</p>
</div>
<!-- *** REMOVE FROM HERE *** -->
<div style="float:left;">
<p class="BBApp" style="font-size:11px;font-family:Arial;color:#262427;text-align:justify;line-height:13px;margin:13px 0px 0px;">
<span style="font-weight:900;">one.</span> Nullam ac tortor vitae purus faucibus ornare suspendisse sed nisi.<br /><br />
<span style="font-weight:900;">two.</span> Pharetra vel turpis nunc eget lorem dolor sed viverra ipsum. Tellus id interdum velit laoreet id donec.<br /><br />
<span style="font-weight:900;">three.</span> Laoreet id donec ultrices tincidunt arcu non sodales. Tempor orci eu lobortis elementum nibh tellus molestie nunc. Congue nisi vitae suscipit tellus. A erat nam at lectus urna duis.<br /><br />
[✱] Press Shift+Enter to add another line, or Shift+Enter twice to mimic the line break above.
</p>
</div>
<!-- *** TO HERE TO REMOVE ADDITIONAL TEXT IF NOT NEEDED *** -->
<div style="background:#262427;width:245px;float:left;margin:15px 0px 0px 15px;">
<div style="background:#fff;width:231px;height:2px;float:left;margin:0px 7px;"></div>
<div style="background:#fff;width:241px;height:5px;float:left;margin:0px 2px;"></div>
<div style="background:#fff;width:245px;float:left;padding:10px 0px;">
<p class="BBAppFormat" style="font-size:8px;font-family:Arial;color:#262427;text-transform:uppercase;text-align:left;line-height:13px;letter-spacing:0.5px;margin:0px 15px;">
<b>Username</b><br />
<b>Template Type</b> (Poster, Icons, Etc.)<br />
<b>Title</b> (If applicable)<br />
<b>Link to Story</b> (If applicable)<br />
<b>Characters</b> (Max 5)<br />
<b>Genre</b><br />
<b>Extra Details</b> (Story plot, Quotes, specific detail requests, Etc.)<br /><br />
[✱] Press Shift+Enter to add another line
</p>
</div>
<div style="background:#fff;width:241px;height:5px;float:left;margin:0px 2px;"></div>
<div style="background:#fff;width:231px;height:2px;float:left;margin:0px 7px;"></div>
</div>
</div>
<!-- END OF APPLICATION SECTION -->
<!-- SAMPLE SECTION -->
<div style="width:275px;float:left;border-bottom:1px solid #262427;margin:15px 0px 0px 34px;padding-bottom:15px;">
<div style="background:#f5e5c3;width:18px;height:18px;float:left;margin-left:-34px;line-height:auto;line-height:10px;">
<img src="https://img.icons8.com/fluent-systems-filled/13/262427/happy.png" style="margin:3px;" />
</div>
<div style="background:#f5e5c3;height:18px;float:left;margin-left:-15px;">
<p class="BBH1Sample" style="font-size:13px;font-family:Arial;color:#262427;text-transform:uppercase;text-align:center;line-height:13px;letter-spacing:-1px;font-weight:900;margin:0px;padding:3px 8px;">
Past Projects
</p>
</div>
<div style="width:275px;height:179px;float:left;margin:15px 0px 0px;">
<!-- SAMPLE SECTION ONE -->
<div style="width:135px;height:179px;float:left;overflow:hidden;">
<div style="width:152px;height:179px;float:left;line-height:10px;overflow:auto;">
<img class="BBSampleImg" src="https://image.kpopmap.com/2020/09/fromis_9-My-Little-Society-Concept-Photo-9.jpg" style="height:179px" />
<!-- POSTER SAMPLE **COPY FROM HERE** -->
<img class="BBSampleImg" src="https://image.kpopmap.com/2020/09/fromis_9-My-Little-Society-Concept-Photo-7.jpg" style="height:179px" />
<!-- POSTER SAMPLE **TO HERE AND PASTE DIRECTLY BELOW THIS LINE TO ADD MORE IMAGES, REPLACE LINK IN 'SRC' TO CHANGE IMAGES** -->
</div>
</div>
<!-- END OF SAMPLE SECTION ONE -->
<!-- SAMPLE SECTION TWO -->
<div style="width:135px;height:179px;float:right;overflow:hidden;">
<div style="width:152px;height:179px;float:left;line-height:10px;overflow:auto;">
<img class="BBSampleImg" src="https://image.kpopmap.com/2020/09/fromis_9-My-Little-Society-Concept-Photo-4.jpg" style="height:179px" />
<!-- POSTER SAMPLE **COPY FROM HERE** -->
<img class="BBSampleImg" src="https://image.kpopmap.com/2020/09/fromis_9-My-Little-Society-Concept-Photo-3.jpg" style="height:179px" />
<!-- POSTER SAMPLE **TO HERE AND PASTE DIRECTLY BELOW THIS LINE TO ADD MORE IMAGES, REPLACE LINK IN 'SRC' TO CHANGE IMAGES** -->
</div>
</div>
<!-- END OF SAMPLE SECTION TWO -->
</div>
</div>
<!-- END OF SAMPLE SECTION -->
<!-- AFFILIATE SECTION -->
<div style="width:275px;float:left;border-bottom:1px solid #262427;margin:15px 0px 0px 34px;padding-bottom:15px;">
<div style="background:#b5c9c9;width:18px;height:18px;float:left;margin-left:-34px;line-height:auto;line-height:10px;">
<img src="https://img.icons8.com/fluent-systems-filled/13/262427/like.png" style="margin:3px;" />
</div>
<div style="background:#b5c9c9;height:18px;float:left;margin-left:-15px;">
<p class="BBH1Affiliate" style="font-size:13px;font-family:Arial;color:#262427;text-transform:uppercase;text-align:center;line-height:13px;letter-spacing:-1px;font-weight:900;margin:0px;padding:3px 8px;">
Our Friends
</p>
</div>
<div style="float:left;">
<p class="BBAffiliate" style="font-size:7px;font-family:Arial;text-align:left;letter-spacing:1px;text-transform:uppercase;line-height:20px;margin:13px 0px 0px;">
<a href="https://www.asianfanfics.com/" style="background:#262427;color:#fff;padding:5px 5px;text-decoration:none;">Affiliate One</a> <a href="https://www.asianfanfics.com/" style="background:#262427;color:#fff;padding:5px 5px;text-decoration:none;">Affiliate Two</a> <a href="https://www.asianfanfics.com/" style="background:#262427;color:#fff;padding:5px 5px;text-decoration:none;">Affiliate Three</a> <a href="https://www.asianfanfics.com/" style="background:#262427;color:#fff;padding:5px 5px;text-decoration:none;">Affiliate Five</a> <a href="https://www.asianfanfics.com/" style="background:#262427;color:#fff;padding:5px 5px;text-decoration:none;">Affiliate Six</a>
<!--/// COPY FROM HERE ///--><a href="https://www.asianfanfics.com/" style="background:#262427;color:#fff;padding:5px 5px;text-decoration:none;">Affiliate Seven</a> <!-- /// TO HERE TO ADD MORE AFFILIATES /// -->
</p>
</div>
</div>
<!-- END OF AFFILIATE SECTION -->
</div>
</div>
</div>
<!-- /// END OF CONTENT /// -->
<!-- /// STAFF SECTION /// -->
<div style="width:74px;float:left;margin:0px 1px;padding:5px;">
<div style="width:64px;height:64px;float:left;margin:5px;line-height:10px;">
<img class="BBStaffImg01" src="https://i.imgur.com/kZaM3Pt.png" style="width:64px;">
<p class="BBStaff01" style="font-size:7px;font-family:Arial;text-align:left;letter-spacing:1px;text-transform:uppercase;line-height:20px;margin:-21px 0px 0px 3px;">
<a title="❝ Hello, click me to visit my profile!" href="https://www.asianfanfics.com/" style="background:#262427;color:#fff;padding:5px 5px;text-decoration:none;">Gyuri</a>
</p>
</div>
<div style="width:64px;height:64px;float:left;margin:5px;line-height:10px;">
<img class="BBStaffImg02" src="https://i.imgur.com/mUfPKCF.png" style="width:64px;">
<p class="BBStaff02" style="font-size:7px;font-family:Arial;text-align:left;letter-spacing:1px;text-transform:uppercase;line-height:20px;margin:-21px 0px 0px 3px;">
<a title="❝ Hello, click me to visit my profile!" href="https://www.asianfanfics.com/" style="background:#262427;color:#fff;padding:5px 5px;text-decoration:none;">Jiwon</a>
</p>
</div>
<div style="width:64px;height:64px;float:left;margin:5px;line-height:10px;">
<img class="BBStaffImg03" src="https://i.imgur.com/YGElKvd.png" style="width:64px;">
<p class="BBStaff03" style="font-size:7px;font-family:Arial;text-align:left;letter-spacing:1px;text-transform:uppercase;line-height:20px;margin:-21px 0px 0px 3px;">
<a title="❝ Hello, click me to visit my profile!" href="https://www.asianfanfics.com/" style="background:#262427;color:#fff;padding:5px 5px;text-decoration:none;">Hayoung</a>
</p>
</div>
<!-- *** COPY FROM HERE *** -->
<div style="width:64px;height:64px;float:left;margin:5px;line-height:10px;">
<img class="BBStaffImg04" src="https://i.imgur.com/6cLQPR3.png" style="width:64px;">
<p class="BBStaff04" style="font-size:7px;font-family:Arial;text-align:left;letter-spacing:1px;text-transform:uppercase;line-height:20px;margin:-21px 0px 0px 3px;">
<a title="❝ Hello, click me to visit my profile!" href="https://www.asianfanfics.com/" style="background:#262427;color:#fff;padding:5px 5px;text-decoration:none;">Nagyung</a>
</p>
</div>
<!-- *** TO HERE TO ADD EXTRA STAFF MEMBERS! MAX 6 SLOTS *** -->
</div>
<!-- /// END OF STAFF SECTION /// -->
<!-- /// CREDIT SECTION /// -->
<div style="width:426px;height:17px;background:#262427;float:left;margin:18px 16px 16px;">
<!-- *** REMOVE FROM HERE *** -->
<p style="font-size:8px;font-family:Arial;color:#fff;text-transform:uppercase;text-align:right;line-height:11px;letter-spacing:1px;margin:3px 5px;">
<a title="Theme Credit : NT" href="https://www.asianfanfics.com/story/view/528148/nt" style="color:#fff;text-decoration:none;">𝖓𝖙.</a>
</p>
<!-- *** TO HERE TO REMOVE CREDIT *** -->
</div>
<!-- /// END OF CREDIT SECTION /// -->
</div>
</div>
Raw
02. Buff Baby : Gallery Page
<!-- /// READ ME ///
TIP: To change certain items/colors/etc. search the following keywords or Hex colours (e.g. #000000) while in HTML Editor mode.
To do so press CTRL+F or CMD+F and use the keywords in the list to find each section.
[ COLORS ]
• Main Colour / Raisin Black (#262427)
• Grayish Cyan (#b5c9c9)
• Soft Orange (#ecb193)
• Lemon Meringue (#f5e5c3)
[ IMAGES ]
To Change images you can do so in Code by replacing the code in 'SRC' or simply change it in AFF Editor
• Sample Images : BBSampleImg (Twelve will appear! // Max width must be 134 in previews!)
• Neutral Gender Image : BBGenderNeutral
• Female Gender Image : BBGenderFemale
• Male Gender Image : BBGenderMale
[ TEXT ]
• Title : BBTitle
• Staff Name : BBStaffName (Three will appear!)
• Staff Bio : BBStaffBio
• Staff Genre Styles : BBStaffStyles
[ DIVS ]
:: IMPORTANT! For Availability Status, Change Background color of Div to with your color code to select the corresponding status // To remove color change Background to '#eee' ::
• Availability Status Yes : BBStatusBGYes
• Availability Status No : BBStatusBGNo
• Availability Status Idk : BBStatusBGIdk
:: IMPORTANT! To change width of bar, change 'width:00%' to what ever percent is reflective to their preference ::
• Skill Slot One : BBSkill01
• Skill Slot Two : BBSkill02
• Skill Slot Three : BBSkill03
• Skill Slot Four : BBSkill04
• Skill Slot Five : BBSkill05
• Skill Slot Six : BBSkill06
• Most Divs are responsive and will adjust on how much you type in so do not adjust heights or widths unless you're familiar with code.
[ MISC ]
• Important sections will be marked for easier adjustments // AFF automatically removes comments in codes so if possible make changes before saving to avoid instructions from disappearing or keep RAW code open on a different tab
-->
<div style="width:715px;height:596px;margin:auto;">
<!-- /// MAIN CONTAINER /// CHANGE BACKGROUND COLOR TO CHANGE GRID COLOR /// -->
<div style="background:#262427;width:715px;height:596px;float:left;"><img src="https://i.imgur.com/jz3KVBf.png" /></div>
<div style="width:715px;height:596px;float:left;margin:-596px 0px 0px;">
<!-- /// TITLE /// -->
<div style="background:#fff;width:713px;height:50px;float:left;margin:1px;">
<p class="BBTitle" style="font-size:32px;font-family:Arial;color:#262427;text-transform:uppercase;text-align:left;line-height:28px;letter-spacing:-2px;font-weight:bold;margin:12px;">
<span style="font-weight:900;color:#b5c9c9;">*</span>Staff Gallery
</p>
</div>
<!-- /// END OF TITLE /// -->
<!-- /// CONTENT /// -->
<div style="background:#fff;width:662px;height:475px;float:left;margin:17px 0px 0px 35px;">
<div style="width:666px;height:445px;float:left;margin:15px 15px 15px -19px;overflow:hidden;">
<div style="width:695px;height:445px;float:left;overflow:auto;">
<!-- STAFF ONE -->
<div style="width:669px;float:left;">
<!-- /// LEFT PANEL /// -->
<div style="width:360px;height:179px;float:left;margin-left:34px;">
<div style="background:#f5e5c3;width:18px;height:18px;float:left;margin-left:-34px;line-height:10px;">
<img class="BBGenderNeutral" src="https://img.icons8.com/fluent-systems-filled/13/262427/gender.png" style="margin:3px;" />
</div>
<div style="background:#f5e5c3;height:18px;width:370px;float:left;margin-left:-15px;">
<p class="BBStaffName" style="font-size:13px;font-family:Arial;color:#262427;text-transform:uppercase;text-align:left;line-height:13px;letter-spacing:-1px;font-weight:900;margin:0px;padding:3px 8px;">
Gyuri
</p>
</div>
<!-- BIO -->
<div style="width:165px;height:134x;float:left;margin:27px 0px 0px">
<p class="BBStaffBio" style="font-size:8px;font-family:Arial;color:#262427;text-transform:uppercase;text-align:right;line-height:13px;letter-spacing:0.5px;margin:0px;">
<b style="font-weight:900;">Them / They</b><br />
Hi, Write small intro here! Pharetra pharetra massa massa ultricies mi. Diam donec adipiscing tristique risus.
</p>
<p class="BBStaffStyles" style="font-size:7px;color:#fff;font-family:Arial;text-align:right;letter-spacing:1px;text-transform:uppercase;line-height:20px;margin:0px;">
<span style="background:#262427;padding:5px 5px;">Minimalist</span> <span style="background:#262427;padding:5px 5px;">Romance</span>
<!--*** COPY FROM HERE ***--><span style="background:#262427;padding:5px 5px;">Light</span> <!-- *** TO HERE TO ADD MORE GENRE STYLES *** -->
</p>
</div>
<!-- END OF BIO -->
<!-- STATS -->
<div style="width:185px;height:146px;float:left;margin:15px 0px 0px 5px;">
<p style="font-size:13px;font-family:Arial;color:#262427;text-transform:uppercase;text-align:left;line-height:13px;letter-spacing:-1px;font-weight:900;margin:0px;">
Stats &amp; Preferences
</p>
<!-- *** TO CHANGE STATUS, CHANGE BACKGROUND COLOR OF DIV 'StatusBG' WITH YOUR SELECTED COLOR CODE *** -->
<div style="background:#eee;width:185px;height:22px;float:left;margin:2px 0px 4px;">
<div style="float:left">
<p style="font-size:8px;font-family:Arial;color:#262427;text-transform:uppercase;font-weight:bold;text-align:left;line-height:8px;letter-spacing:0.5px;margin:8px 9px;">
Available?
</p>
</div>
<div style="float:left;">
<div style="background:#262427;width:8px;height:8px;float:left;margin:7px 0px;">
<div style="background:#eee;width:6px;height:6px;float:left;margin:1px;">
<div class="BBStatusBGYes" style="background:#f5e5c3;width:4px;height:4px;float:left;margin:1px;"></div>
</div>
</div>
<p style="font-size:8px;font-family:Arial;color:#262427;text-transform:uppercase;font-weight:bold;text-align:left;line-height:8px;letter-spacing:0.5px;margin:8px 0px 0px 12px;">
Yes
</p>
</div>
<div style="float:left;margin-left:8px;">
<div style="background:#262427;width:8px;height:8px;float:left;margin:7px 0px;">
<div style="background:#eee;width:6px;height:6px;float:left;margin:1px;">
<div class="BBStatusBGNo" style="background:#eee;width:4px;height:4px;float:left;margin:1px;"></div>
</div>
</div>
<p style="font-size:8px;font-family:Arial;color:#262427;text-transform:uppercase;font-weight:bold;text-align:left;line-height:8px;letter-spacing:0.5px;margin:8px 0px 0px 12px;">
No
</p>
</div>
<div style="float:left;margin-left:8px;">
<div style="background:#262427;width:8px;height:8px;float:left;margin:7px 0px;">
<div style="background:#eee;width:6px;height:6px;float:left;margin:1px;">
<div class="BBStatusBGIdk" style="background:#eee;width:4px;height:4px;float:left;margin:1px;"></div>
</div>
</div>
<p style="font-size:8px;font-family:Arial;color:#262427;text-transform:uppercase;font-weight:bold;text-align:left;line-height:8px;letter-spacing:0.5px;margin:8px 0px 0px 12px;">
Idk
</p>
</div>
</div>
<!-- *** TO CHANGE WIDTH OF BAR CHANGE THE 'Width' INTO PREFERED PERCENT *** -->
<div style="background:#262427;width:185px;height:15px;float:left;">
<div style="background:#fff;width:183px;height:13px;float:left;margin:1px;">
<div style="width:179px;height:9px;float:left;margin:2px;">
<div class="BBSkill01" style="background:#f5e5c3;width:90%;height:9px;float:left;white-space:nowrap;">
<p style="font-size:7px;font-family:Arial;color:#262427;text-transform:uppercase;font-weight:bold;text-align:left;line-height:7px;margin:1px 5px 0px;">
Posters
</p>
</div>
</div>
</div>
</div>
<div style="background:#262427;width:185px;height:15px;float:left;margin:3px 0px 0px;">
<div style="background:#fff;width:183px;height:13px;float:left;margin:1px;">
<div style="width:179px;height:9px;float:left;margin:2px;">
<div class="BBSkill02" style="background:#f5e5c3;width:70%;height:9px;float:left;white-space:nowrap;">
<p style="font-size:7px;font-family:Arial;color:#262427;text-transform:uppercase;font-weight:bold;text-align:left;line-height:7px;margin:1px 5px 0px;">
Banners
</p>
</div>
</div>
</div>
</div>
<div style="background:#262427;width:185px;height:15px;float:left;margin:3px 0px 0px;">
<div style="background:#fff;width:183px;height:13px;float:left;margin:1px;">
<div style="width:179px;height:9px;float:left;margin:2px;">
<div class="BBSkill03" style="background:#f5e5c3;width:30%;height:9px;float:left;white-space:nowrap;">
<p style="font-size:7px;font-family:Arial;color:#262427;text-transform:uppercase;font-weight:bold;text-align:left;line-height:7px;margin:1px 5px 0px;">
Profile Pictures
</p>
</div>
</div>
</div>
</div>
<div style="background:#262427;width:185px;height:15px;float:left;margin:3px 0px 0px;">
<div style="background:#fff;width:183px;height:13px;float:left;margin:1px;">
<div style="width:179px;height:9px;float:left;margin:2px;">
<div class="BBSkill04" style="background:#f5e5c3;width:80%;height:9px;float:left;white-space:nowrap;">
<p style="font-size:7px;font-family:Arial;color:#262427;text-transform:uppercase;font-weight:bold;text-align:left;line-height:7px;margin:1px 5px 0px;">
Animated Graphics
</p>
</div>
</div>
</div>
</div>
<div style="background:#262427;width:185px;height:15px;float:left;margin:3px 0px 0px;">
<div style="background:#fff;width:183px;height:13px;float:left;margin:1px;">
<div style="width:179px;height:9px;float:left;margin:2px;">
<div class="BBSkill05" style="background:#f5e5c3;width:40%;height:9px;float:left;white-space:nowrap;">
<p style="font-size:7px;font-family:Arial;color:#262427;text-transform:uppercase;font-weight:bold;text-align:left;line-height:7px;margin:1px 5px 0px;">
Graphic Sets
</p>
</div>
</div>
</div>
</div>
<div style="background:#262427;width:185px;height:15px;float:left;margin:3px 0px 0px;">
<div style="background:#fff;width:183px;height:13px;float:left;margin:1px;">
<div style="width:179px;height:9px;float:left;margin:2px;">
<div class="BBSkill06" style="background:#f5e5c3;width:30%;height:9px;float:left;white-space:nowrap;">
<p style="font-size:7px;font-family:Arial;color:#262427;text-transform:uppercase;font-weight:bold;text-align:left;line-height:7px;margin:1px 5px 0px;">
Miscellanous
</p>
</div>
</div>
</div>
</div>
</div>
<!-- END OF STATS -->
</div>
<!-- /// END OF LEFT PANEL /// -->
<!-- /// SAMPLE SECTION /// -->
<div style="width:275px;height:179px;float:left;">
<!-- SAMPLE SECTION ONE -->
<div style="width:135px;height:179px;float:left;overflow:hidden;">
<div style="width:152px;height:179px;float:left;line-height:10px;overflow:auto;">
<img class="BBSampleImg" src="https://image.kpopmap.com/2020/09/fromis_9-My-Little-Society-Concept-Photo-9.jpg" style="height:179px" />
<!-- POSTER SAMPLE **COPY FROM HERE** -->
<img class="BBSampleImg" src="https://image.kpopmap.com/2020/09/fromis_9-My-Little-Society-Concept-Photo-7.jpg" style="height:179px" />
<!-- POSTER SAMPLE **TO HERE AND PASTE DIRECTLY BELOW THIS LINE TO ADD MORE IMAGES, REPLACE LINK IN 'SRC' TO CHANGE IMAGES** -->
</div>
</div>
<!-- END OF SAMPLE SECTION ONE -->
<!-- SAMPLE SECTION TWO -->
<div style="width:135px;height:179px;float:right;overflow:hidden;">
<div style="width:152px;height:179px;float:left;line-height:10px;overflow:auto;">
<img class="BBSampleImg" src="https://image.kpopmap.com/2020/09/fromis_9-My-Little-Society-Concept-Photo-4.jpg" style="height:179px" />
<!-- POSTER SAMPLE **COPY FROM HERE** -->
<img class="BBSampleImg" src="https://image.kpopmap.com/2020/09/fromis_9-My-Little-Society-Concept-Photo-3.jpg" style="height:179px" />
<!-- POSTER SAMPLE **TO HERE AND PASTE DIRECTLY BELOW THIS LINE TO ADD MORE IMAGES, REPLACE LINK IN 'SRC' TO CHANGE IMAGES** -->
</div>
<!-- END OF SAMPLE SECTION TWO -->
</div>
</div>
<!-- /// END OF SAMPLE SECTION /// -->
</div>
<!-- /// END OF STAFF ONE /// -->
<!-- /// STAFF TWO /// -->
<div style="width:669px;float:left;margin:15px 0px 0px;">
<!-- LEFT PANEL -->
<div style="width:360px;height:179px;float:left;margin-left:34px;">
<div style="background:#ecb193;width:18px;height:18px;float:left;margin-left:-34px;line-height:10px;">
<img class="BBGenderFemale" src="https://img.icons8.com/fluent-systems-filled/13/262427/female.png" style="margin:3px;" />
</div>
<div style="background:#ecb193;height:18px;width:370px;float:left;margin-left:-15px;">
<p class="BBStaffName" style="font-size:13px;font-family:Arial;color:#262427;text-transform:uppercase;text-align:left;line-height:13px;letter-spacing:-1px;font-weight:900;margin:0px;padding:3px 8px;">
Jiwon
</p>
</div>
<!-- BIO -->
<div style="width:165px;height:134x;float:left;margin:27px 0px 0px;">
<p class="BBStaffBio" style="font-size:8px;font-family:Arial;color:#262427;text-transform:uppercase;text-align:right;line-height:13px;letter-spacing:0.5px;margin:0px;">
<b style="font-weight:900;">She / Her</b><br />
Hi, Write small intro here! Pharetra pharetra massa massa ultricies mi. Diam donec adipiscing tristique risus.
</p>
<p class="BBStaffStyles" style="font-size:7px;color:#fff;font-family:Arial;text-align:right;letter-spacing:1px;text-transform:uppercase;line-height:20px;margin:0px;">
<span style="background:#262427;padding:5px 5px;">Floral</span> <span style="background:#262427;padding:5px 5px;">Bright</span> <span style="background:#262427;padding:5px 5px;">Romcom</span>
<!--*** COPY FROM HERE ***--><span style="background:#262427;padding:5px 5px;">Romance</span> <!-- *** TO HERE TO ADD MORE GENRE STYLES *** -->
</p>
</div>
<!-- END OF BIO -->
<!-- STATS -->
<div style="width:185px;height:146px;float:left;margin:15px 0px 0px 5px;">
<p style="font-size:13px;font-family:Arial;color:#262427;text-transform:uppercase;text-align:left;line-height:13px;letter-spacing:-1px;font-weight:900;margin:0px;">
Stats &amp; Preferences
</p>
<!-- *** TO CHANGE STATUS, CHANGE BACKGROUND COLOR OF DIV 'StatusBG' WITH YOUR SELECTED COLOR CODE *** -->
<div style="background:#eee;width:185px;height:22px;float:left;margin:2px 0px 4px;">
<div style="float:left">
<p style="font-size:8px;font-family:Arial;color:#262427;text-transform:uppercase;font-weight:bold;text-align:left;line-height:8px;letter-spacing:0.5px;margin:8px 9px;">
Available?
</p>
</div>
<div style="float:left;">
<div style="background:#262427;width:8px;height:8px;float:left;margin:7px 0px;">
<div style="background:#eee;width:6px;height:6px;float:left;margin:1px;">
<div class="BBStatusBGYes" style="background:#eee;width:4px;height:4px;float:left;margin:1px;"></div>
</div>
</div>
<p style="font-size:8px;font-family:Arial;color:#262427;text-transform:uppercase;font-weight:bold;text-align:left;line-height:8px;letter-spacing:0.5px;margin:8px 0px 0px 12px;">
Yes
</p>
</div>
<div style="float:left;margin-left:8px;">
<div style="background:#262427;width:8px;height:8px;float:left;margin:7px 0px;">
<div style="background:#eee;width:6px;height:6px;float:left;margin:1px;">
<div class="BBStatusBGNo" style="background:#eee;width:4px;height:4px;float:left;margin:1px;"></div>
</div>
</div>
<p style="font-size:8px;font-family:Arial;color:#262427;text-transform:uppercase;font-weight:bold;text-align:left;line-height:8px;letter-spacing:0.5px;margin:8px 0px 0px 12px;">
No
</p>
</div>
<div style="float:left;margin-left:8px;">
<div style="background:#262427;width:8px;height:8px;float:left;margin:7px 0px;">
<div style="background:#eee;width:6px;height:6px;float:left;margin:1px;">
<div class="BBStatusBGIdk" style="background:#ecb193;width:4px;height:4px;float:left;margin:1px;"></div>
</div>
</div>
<p style="font-size:8px;font-family:Arial;color:#262427;text-transform:uppercase;font-weight:bold;text-align:left;line-height:8px;letter-spacing:0.5px;margin:8px 0px 0px 12px;">
Idk
</p>
</div>
</div>
<!-- *** TO CHANGE WIDTH OF BAR CHANGE THE 'Width' INTO PREFERED PERCENT *** -->
<div style="background:#262427;width:185px;height:15px;float:left;">
<div style="background:#fff;width:183px;height:13px;float:left;margin:1px;">
<div style="width:179px;height:9px;float:left;margin:2px;">
<div class="BBSkill01" style="background:#ecb193;width:50%;height:9px;float:left;white-space:nowrap;">
<p style="font-size:7px;font-family:Arial;color:#262427;text-transform:uppercase;font-weight:bold;text-align:left;line-height:7px;margin:1px 5px 0px;">
Posters
</p>
</div>
</div>
</div>
</div>
<div style="background:#262427;width:185px;height:15px;float:left;margin:3px 0px 0px;">
<div style="background:#fff;width:183px;height:13px;float:left;margin:1px;">
<div style="width:179px;height:9px;float:left;margin:2px;">
<div class="BBSkill02" style="background:#ecb193;width:90%;height:9px;float:left;white-space:nowrap;">
<p style="font-size:7px;font-family:Arial;color:#262427;text-transform:uppercase;font-weight:bold;text-align:left;line-height:7px;margin:1px 5px 0px;">
Banners
</p>
</div>
</div>
</div>
</div>
<div style="background:#262427;width:185px;height:15px;float:left;margin:3px 0px 0px;">
<div style="background:#fff;width:183px;height:13px;float:left;margin:1px;">
<div style="width:179px;height:9px;float:left;margin:2px;">
<div class="BBSkill03" style="background:#ecb193;width:80%;height:9px;float:left;white-space:nowrap;">
<p style="font-size:7px;font-family:Arial;color:#262427;text-transform:uppercase;font-weight:bold;text-align:left;line-height:7px;margin:1px 5px 0px;">
Profile Pictures
</p>
</div>
</div>
</div>
</div>
<div style="background:#262427;width:185px;height:15px;float:left;margin:3px 0px 0px;">
<div style="background:#fff;width:183px;height:13px;float:left;margin:1px;">
<div style="width:179px;height:9px;float:left;margin:2px;">
<div class="BBSkill04" style="background:#ecb193;width:30%;height:9px;float:left;white-space:nowrap;">
<p style="font-size:7px;font-family:Arial;color:#262427;text-transform:uppercase;font-weight:bold;text-align:left;line-height:7px;margin:1px 5px 0px;">
Animated Graphics
</p>
</div>
</div>
</div>
</div>
<div style="background:#262427;width:185px;height:15px;float:left;margin:3px 0px 0px;">
<div style="background:#fff;width:183px;height:13px;float:left;margin:1px;">
<div style="width:179px;height:9px;float:left;margin:2px;">
<div class="BBSkill05" style="background:#ecb193;width:20%;height:9px;float:left;white-space:nowrap;">
<p style="font-size:7px;font-family:Arial;color:#262427;text-transform:uppercase;font-weight:bold;text-align:left;line-height:7px;margin:1px 5px 0px;">
Graphic Sets
</p>
</div>
</div>
</div>
</div>
<div style="background:#262427;width:185px;height:15px;float:left;margin:3px 0px 0px;">
<div style="background:#fff;width:183px;height:13px;float:left;margin:1px;">
<div style="width:179px;height:9px;float:left;margin:2px;">
<div class="BBSkill06" style="background:#ecb193;width:50%;height:9px;float:left;white-space:nowrap;">
<p style="font-size:7px;font-family:Arial;color:#262427;text-transform:uppercase;font-weight:bold;text-align:left;line-height:7px;margin:1px 5px 0px;">
Miscellanous
</p>
</div>
</div>
</div>
</div>
</div>
<!-- END OF STATS -->
</div>
<!-- /// END OF LEFT PANEL /// -->
<!-- /// SAMPLE SECTION /// -->
<div style="width:275px;height:179px;float:left;">
<!-- SAMPLE SECTION ONE -->
<div style="width:135px;height:179px;float:left;overflow:hidden;">
<div style="width:152px;height:179px;float:left;line-height:10px;overflow:auto;">
<img class="BBSampleImg" src="https://image.kpopmap.com/2020/09/fromis_9-My-Little-Society-Concept-Photo-9.jpg" style="height:179px" />
<!-- POSTER SAMPLE **COPY FROM HERE** -->
<img class="BBSampleImg" src="https://image.kpopmap.com/2020/09/fromis_9-My-Little-Society-Concept-Photo-7.jpg" style="height:179px" />
<!-- POSTER SAMPLE **TO HERE AND PASTE DIRECTLY BELOW THIS LINE TO ADD MORE IMAGES, REPLACE LINK IN 'SRC' TO CHANGE IMAGES** -->
</div>
</div>
<!-- END OF SAMPLE SECTION ONE -->
<!-- SAMPLE SECTION TWO -->
<div style="width:135px;height:179px;float:right;overflow:hidden;">
<div style="width:152px;height:179px;float:left;line-height:10px;overflow:auto;">
<img class="BBSampleImg" src="https://image.kpopmap.com/2020/09/fromis_9-My-Little-Society-Concept-Photo-4.jpg" style="height:179px" />
<!-- POSTER SAMPLE **COPY FROM HERE** -->
<img class="BBSampleImg" src="https://image.kpopmap.com/2020/09/fromis_9-My-Little-Society-Concept-Photo-3.jpg" style="height:179px" />
<!-- POSTER SAMPLE **TO HERE AND PASTE DIRECTLY BELOW THIS LINE TO ADD MORE IMAGES, REPLACE LINK IN 'SRC' TO CHANGE IMAGES** -->
</div>
<!-- END OF SAMPLE SECTION TWO -->
</div>
</div>
<!-- /// END OF SAMPLE SECTION /// -->
</div>
<!-- /// END OF STAFF TWO /// -->
<!-- /// STAFF THREE /// ** COPY FROM HERE ** -->
<div style="width:669px;float:left;margin:15px 0px 0px;">
<!-- /// LEFT PANEL /// -->
<div style="width:360px;height:179px;float:left;margin-left:34px;">
<div style="background:#b5c9c9;width:18px;height:18px;float:left;margin-left:-34px;line-height:10px;">
<img class="BBGenderMale" src="https://img.icons8.com/fluent-systems-filled/13/262427/male.png" style="margin:3px;" />
</div>
<div style="background:#b5c9c9;height:18px;width:370px;float:left;margin-left:-15px;">
<p class="BBStaffName" style="font-size:13px;font-family:Arial;color:#262427;text-transform:uppercase;text-align:left;line-height:13px;letter-spacing:-1px;font-weight:900;margin:0px;padding:3px 8px;">
Hayoung
</p>
</div>
<!-- BIO -->
<div style="width:165px;height:134x;float:left;margin:27px 0px 0px;">
<p class="BBStaffBio" style="font-size:8px;font-family:Arial;color:#262427;text-transform:uppercase;text-align:right;line-height:13px;letter-spacing:0.5px;margin:0px;">
<b style="font-weight:900;">He / Him</b><br />
Hi, Write small intro here! Pharetra pharetra massa massa ultricies mi. Diam donec adipiscing tristique risus.
</p>
<p class="BBStaffStyles" style="font-size:7px;color:#fff;font-family:Arial;text-align:right;letter-spacing:1px;text-transform:uppercase;line-height:20px;margin:0px;">
<span style="background:#262427;padding:5px 5px;">Dark</span> <span style="background:#262427;padding:5px 5px;">Horror</span> <span style="background:#262427;padding:5px 5px;">Drama</span> <span style="background:#262427;padding:5px 5px;">Minimal</span>
<!-- *** COPY FROM HERE *** --><span style="background:#262427;padding:5px 5px;">Gloomy</span> <!-- *** TO HERE TO ADD MORE GENRE STYLES *** -->
</p>
</div>
<!-- END OF BIO -->
<!-- STATS -->
<div style="width:185px;height:146px;float:left;margin:15px 0px 0px 5px;">
<p style="font-size:13px;font-family:Arial;color:#262427;text-transform:uppercase;text-align:left;line-height:13px;letter-spacing:-1px;font-weight:900;margin:0px;">
Stats &amp; Preferences
</p>
<!-- *** TO CHANGE STATUS, CHANGE BACKGROUND COLOR OF DIV 'StatusBG' WITH YOUR SELECTED COLOR CODE *** -->
<div style="background:#eee;width:185px;height:22px;float:left;margin:2px 0px 4px;">
<div style="float:left">
<p style="font-size:8px;font-family:Arial;color:#262427;text-transform:uppercase;font-weight:bold;text-align:left;line-height:8px;letter-spacing:0.5px;margin:8px 9px;">
Available?
</p>
</div>
<div style="float:left;">
<div style="background:#262427;width:8px;height:8px;float:left;margin:7px 0px;">
<div style="background:#eee;width:6px;height:6px;float:left;margin:1px;">
<div class="BBStatusBGYes" style="background:#eee;width:4px;height:4px;float:left;margin:1px;"></div>
</div>
</div>
<p style="font-size:8px;font-family:Arial;color:#262427;text-transform:uppercase;font-weight:bold;text-align:left;line-height:8px;letter-spacing:0.5px;margin:8px 0px 0px 12px;">
Yes
</p>
</div>
<div style="float:left;margin-left:8px;">
<div style="background:#262427;width:8px;height:8px;float:left;margin:7px 0px;">
<div style="background:#eee;width:6px;height:6px;float:left;margin:1px;">
<div class="BBStatusBGNo" style="background:#b5c9c9;width:4px;height:4px;float:left;margin:1px;"></div>
</div>
</div>
<p style="font-size:8px;font-family:Arial;color:#262427;text-transform:uppercase;font-weight:bold;text-align:left;line-height:8px;letter-spacing:0.5px;margin:8px 0px 0px 12px;">
No
</p>
</div>
<div style="float:left;margin-left:8px;">
<div style="background:#262427;width:8px;height:8px;float:left;margin:7px 0px;">
<div style="background:#eee;width:6px;height:6px;float:left;margin:1px;">
<div class="BBStatusBGIdk" style="background:#eee;width:4px;height:4px;float:left;margin:1px;"></div>
</div>
</div>
<p style="font-size:8px;font-family:Arial;color:#262427;text-transform:uppercase;font-weight:bold;text-align:left;line-height:8px;letter-spacing:0.5px;margin:8px 0px 0px 12px;">
Idk
</p>
</div>
</div>
<!-- *** TO CHANGE WIDTH OF BAR CHANGE THE 'Width' INTO PREFERED PERCENT *** -->
<div style="background:#262427;width:185px;height:15px;float:left;">
<div style="background:#fff;width:183px;height:13px;float:left;margin:1px;">
<div style="width:179px;height:9px;float:left;margin:2px;">
<div class="BBSkill01" style="background:#b5c9c9;width:90%;height:9px;float:left;white-space:nowrap;">
<p style="font-size:7px;font-family:Arial;color:#262427;text-transform:uppercase;font-weight:bold;text-align:left;line-height:7px;margin:1px 5px 0px;">
Posters
</p>
</div>
</div>
</div>
</div>
<div style="background:#262427;width:185px;height:15px;float:left;margin:3px 0px 0px;">
<div style="background:#fff;width:183px;height:13px;float:left;margin:1px;">
<div style="width:179px;height:9px;float:left;margin:2px;">
<div class="BBSkill02" style="background:#b5c9c9;width:70%;height:9px;float:left;white-space:nowrap;">
<p style="font-size:7px;font-family:Arial;color:#262427;text-transform:uppercase;font-weight:bold;text-align:left;line-height:7px;margin:1px 5px 0px;">
Banners
</p>
</div>
</div>
</div>
</div>
<div style="background:#262427;width:185px;height:15px;float:left;margin:3px 0px 0px;">
<div style="background:#fff;width:183px;height:13px;float:left;margin:1px;">
<div style="width:179px;height:9px;float:left;margin:2px;">
<div class="BBSkill03" style="background:#b5c9c9;width:50%;height:9px;float:left;white-space:nowrap;">
<p style="font-size:7px;font-family:Arial;color:#262427;text-transform:uppercase;font-weight:bold;text-align:left;line-height:7px;margin:1px 5px 0px;">
Profile Pictures
</p>
</div>
</div>
</div>
</div>
<div style="background:#262427;width:185px;height:15px;float:left;margin:3px 0px 0px;">
<div style="background:#fff;width:183px;height:13px;float:left;margin:1px;">
<div style="width:179px;height:9px;float:left;margin:2px;">
<div class="BBSkill04" style="background:#b5c9c9;width:70%;height:9px;float:left;white-space:nowrap;">
<p style="font-size:7px;font-family:Arial;color:#262427;text-transform:uppercase;font-weight:bold;text-align:left;line-height:7px;margin:1px 5px 0px;">
Animated Graphics
</p>
</div>
</div>
</div>
</div>
<div style="background:#262427;width:185px;height:15px;float:left;margin:3px 0px 0px;">
<div style="background:#fff;width:183px;height:13px;float:left;margin:1px;">
<div style="width:179px;height:9px;float:left;margin:2px;">
<div class="BBSkill05" style="background:#b5c9c9;width:30%;height:9px;float:left;white-space:nowrap;">
<p style="font-size:7px;font-family:Arial;color:#262427;text-transform:uppercase;font-weight:bold;text-align:left;line-height:7px;margin:1px 5px 0px;">
Graphic Sets
</p>
</div>
</div>
</div>
</div>
<div style="background:#262427;width:185px;height:15px;float:left;margin:3px 0px 0px;">
<div style="background:#fff;width:183px;height:13px;float:left;margin:1px;">
<div style="width:179px;height:9px;float:left;margin:2px;">
<div class="BBSkill06" style="background:#b5c9c9;width:60%;height:9px;float:left;white-space:nowrap;">
<p style="font-size:7px;font-family:Arial;color:#262427;text-transform:uppercase;font-weight:bold;text-align:left;line-height:7px;margin:1px 5px 0px;">
Miscellanous
</p>
</div>
</div>
</div>
</div>
</div>
<!-- END OF STATS -->
</div>
<!-- /// END OF LEFT PANEL /// -->
<!-- /// SAMPLE SECTION /// -->
<div style="width:275px;height:179px;float:left;">
<!-- SAMPLE SECTION ONE -->
<div style="width:135px;height:179px;float:left;overflow:hidden;">
<div style="width:152px;height:179px;float:left;line-height:10px;overflow:auto;">
<img class="BBSampleImg" src="https://image.kpopmap.com/2020/09/fromis_9-My-Little-Society-Concept-Photo-9.jpg" style="height:179px" />
<!-- POSTER SAMPLE **COPY FROM HERE** -->
<img class="BBSampleImg" src="https://image.kpopmap.com/2020/09/fromis_9-My-Little-Society-Concept-Photo-7.jpg" style="height:179px" />
<!-- POSTER SAMPLE **TO HERE AND PASTE DIRECTLY BELOW THIS LINE TO ADD MORE IMAGES, REPLACE LINK IN 'SRC' TO CHANGE IMAGES** -->
</div>
</div>
<!-- END OF SAMPLE SECTION ONE -->
<!-- SAMPLE SECTION TWO -->
<div style="width:135px;height:179px;float:right;overflow:hidden;">
<div style="width:152px;height:179px;float:left;line-height:10px;overflow:auto;">
<img class="BBSampleImg" src="https://image.kpopmap.com/2020/09/fromis_9-My-Little-Society-Concept-Photo-4.jpg" style="height:179px" />
<!-- POSTER SAMPLE **COPY FROM HERE** -->
<img class="BBSampleImg" src="https://image.kpopmap.com/2020/09/fromis_9-My-Little-Society-Concept-Photo-3.jpg" style="height:179px" />
<!-- POSTER SAMPLE **TO HERE AND PASTE DIRECTLY BELOW THIS LINE TO ADD MORE IMAGES, REPLACE LINK IN 'SRC' TO CHANGE IMAGES** -->
</div>
<!-- END OF SAMPLE SECTION TWO -->
</div>
</div>
<!-- /// END OF SAMPLE SECTION /// -->
</div>
<!-- /// END OF STAFF THREE /// ** TO HERE AND PASTE DIRECTLY BELOW LINE TO ADD MORE STAFF SLOTS! ** -->
</div>
</div>
</div>
<!-- /// END OF CONTENT /// -->
<!-- /// CREDIT SECTION /// -->
<div style="width:680px;height:17px;background:#262427;float:left;margin:18px 18px 16px;">
<!-- *** REMOVE FROM HERE *** -->
<p style="font-size:8px;font-family:Arial;color:#fff;text-transform:uppercase;text-align:right;line-height:11px;letter-spacing:1px;margin:3px 5px;">
<a title="Theme Credit : NT" href="https://www.asianfanfics.com/story/view/528148/nt" style="color:#fff;text-decoration:none;">𝖓𝖙.</a>
</p>
<!-- *** TO HERE TO REMOVE CREDIT *** -->
</div>
<!-- /// END OF CREDIT SECTION /// -->
</div>
</div>
Raw
03. Buff Baby : Content Update Page
<!-- /// READ ME ///
TIP: To change certain items/colors/etc. search the following keywords or Hex colours (e.g. #000000) while in HTML Editor mode.
To do so press CTRL+F or CMD+F and use the keywords in the list to find each section.
[ COLORS ]
• Main Colour / Raisin Black (#262427)
• Lemon Meringue (#f5e5c3)
[ IMAGES ]
To Change images you can do so in Code by replacing the code in 'SRC' or simply change it in AFF Editor
• Main Staff Image : BBStaffImg (40×40)
• Main Content Image : BBImg (Max width must be 275px in preview!)
[ TEXT ]
• Staff Name : BBStaffName
• Content Notes : BBContentNotes
• Content Details : BBContentDetails
• Content Links : BBContentLinks
• Content Extra (Dimensions + Solo Links) : BBExtra
[ DIVS ]
• Most Divs are responsive and will adjust on how much you type in so do not adjust heights or widths unless you're familiar with code.
[ MISC ]
• Important sections will be marked for easier adjustments // AFF automatically removes comments in codes so if possible make changes before saving to avoid instructions from disappearing or keep RAW code open on a different tab
-->
<div style="width:392px;height:596px;margin:auto;">
<!-- /// MAIN CONTAINER /// CHANGE BACKGROUND COLOR TO CHANGE GRID COLOR /// -->
<div style="background:#262427;width:392px;height:596px;float:left;overflow:hidden;"><img src="https://i.imgur.com/jz3KVBf.png" style="max-width:715px;" /></div>
<div style="width:392px;height:596px;float:left;margin:-596px 0px 0px;">
<div style="background:#fff;width:305px;height:526px;float:left;margin:18px 0px 0px 69px;">
<!-- /// HEADER /// -->
<div style="background:#f5e5c3;width:50px;height:50px;float:left;margin-left:-51px;line-height:10px;">
<img class="BBStaffImg" src="https://i.imgur.com/kZaM3Pt.png" style="width:40px;margin:5px;">
</div>
<div style="background:#f5e5c3;height:18px;width:305px;float:left;">
<p class="BBStaffName" style="font-size:13px;font-family:Arial;color:#262427;text-transform:uppercase;text-align:left;line-height:13px;letter-spacing:-1px;font-weight:900;margin:0px;padding:3px 8px;">
Gyuri
</p>
</div>
<!-- /// END OF HEADER /// -->
<!-- /// CONTENT /// -->
<div style="width:275px;height:478px;float:left;margin:15px;overflow:hidden;">
<div style="width:292px;height:478px;float:left;overflow:auto;">
<div style="width:275px;float:left;margin:0px 0px 5px;">
<p class="BBContentNotes" style="font-size:8px;font-family:Arial;color:#262427;text-transform:uppercase;text-align:left;line-height:13px;letter-spacing:0.5px;margin:0px;">
Hi, Write note here! Pharetra pharetra massa massa ultricies mi. Diam donec adipiscing tristique risus.
</p>
<p class="BBContentDetails" style="font-size:8px;font-family:Arial;color:#262427;text-transform:uppercase;text-align:left;line-height:13px;letter-spacing:0.5px;border-left:2px solid #f5e5c3;padding-left:10px;margin:10px 0px;">
<b>Requested By:</b> Username<br />
<b>Contains:</b> Poster and Background<br />
<b>Usage:</b> Must use for atleast 3 Months<br />
<b>Edited On:</b> Photoshop<br />
<b>Time Used:</b> 3+ Hours<br />
[✱] Press Shift+Enter to add another line
</p>
<p class="BBContentLinks" style="font-size:7px;font-family:Arial;text-align:left;letter-spacing:1px;text-transform:uppercase;line-height:20px;margin:3px 0px 0px;">
<a href="https://www.asianfanfics.com/" style="background:#262427;color:#fff;padding:5px 5px;text-decoration:none;">Download (Zip Ver.)</a> <a href="https://www.asianfanfics.com/" style="background:#262427;color:#fff;padding:5px 5px;text-decoration:none;">Story Link</a>
<!-- *** COPY FROM HERE *** --><a title="Support us by adding our banner to your page!" href="https://www.asianfanfics.com/" style="background:#262427;color:#fff;padding:5px 5px;text-decoration:none;">Support Us!</a> <!-- *** TO HERE TO ADD MORE LINKS *** -->
</p>
</div>
<!-- IMAGE POST /// ***COPY FROM HERE*** -->
<div class="BBImageContent" style="float:left;line-height:10px;margin:5px 0px 0px;">
<img class="BBImg" src="https://image.kpopmap.com/2020/09/fromis_9-My-Little-Society-Concept-Photo-4.jpg" style="width:275px" />
<div style="background:#eee;width:275px;float:left;margin:5px 0px 0px;">
<p class="BBExtra" style="font-size:7px;font-family:Arial;color:#262427;text-transform:uppercase;font-weight:bold;text-align:center;line-height:13px;letter-spacing:1px;margin:15px;">
<a title="Download Raw Image" href="https://www.asianfanfics.com/" style="color:#262427;padding:3px 0px;text-decoration:none;border-bottom:1px dotted #262427;">Poster</a> // Dimensions: 275 × 367 px
</p>
</div>
</div>
<!-- END OF IMAGE POST /// *** TO HERE TO AND PASTE DIRECTLY BELOW THIS LINE TO ADD MORE IMAGES TO THE POST (WILL INCLUDE DIMENSION INFO) *** -->
</div>
</div>
<!-- /// END OF CONTENT /// -->
</div>
<!-- /// CREDIT SECTION /// -->
<div style="width:356px;height:17px;background:#262427;float:left;margin:18px 18px 16px;">
<!-- *** REMOVE FROM HERE *** -->
<p style="font-size:8px;font-family:Arial;color:#fff;text-transform:uppercase;text-align:right;line-height:11px;letter-spacing:1px;margin:3px 5px;">
<a title="Theme Credit : NT" href="https://www.asianfanfics.com/story/view/528148/nt" style="color:#fff;text-decoration:none;">𝖓𝖙.</a>
</p>
<!-- *** TO HERE TO REMOVE CREDIT *** -->
</div>
<!-- /// END OF CREDIT SECTION /// -->
</div>
</div>
Raw
04. Buff Baby : Update Page (Image Ver.)
<!-- /// READ ME ///
TIP: To change certain items/colors/etc. search the following keywords or Hex colours (e.g. #000000) while in HTML Editor mode.
To do so press CTRL+F or CMD+F and use the keywords in the list to find each section.
[ COLORS ]
• Main Colour / Raisin Black (#262427)
[ IMAGES ]
To Change images you can do so in Code by replacing the code in 'SRC' or simply change it in AFF Editor
• Update Image : BBUpdateImage (356×356)
[ TEXT ]
• Update Title : BBUpdateTitle
• Content Time Stamp : BBTimestamp
• Content : BBContent
• Content Links : BBContentLinks
[ DIVS ]
• Most Divs are responsive and will adjust on how much you type in so do not adjust heights or widths unless you're familiar with code.
[ MISC ]
• Important sections will be marked for easier adjustments // AFF automatically removes comments in codes so if possible make changes before saving to avoid instructions from disappearing or keep RAW code open on a different tab
-->
<div style="width:392px;height:596px;margin:auto;">
<!-- /// MAIN CONTAINER /// CHANGE BACKGROUND COLOR TO CHANGE GRID COLOR /// -->
<div style="background:#262427;width:392px;height:596px;float:left;overflow:hidden;"><img src="https://i.imgur.com/jz3KVBf.png" style="max-width:715px;" /></div>
<div style="width:392px;height:596px;float:left;margin:-596px 0px 0px;">
<div style="background:#fff;width:356px;height:526px;float:left;margin:18px 0px 0px 18px;">
<!-- /// UPDATE IMAGE /// -->
<div style="width:356px;height:356px;float:left;line-height:10px;">
<img class="BBUpdateImage" src="https://image.kpopmap.com/2020/09/fromis_9-My-Little-Society-Concept-Photo-19.jpg" style="width:356px;" />
</div>
<!-- /// END OF UPDATE IMAGE /// -->
<!-- /// CONTENT /// -->
<div style="width:326px;height:140px;float:left;margin:15px;overflow:hidden;">
<div style="width:343px;height:140px;float:left;overflow:auto;">
<div style="width:326px;float:left;">
<p class="BBUpdateTitle" style="font-size:13px;font-family:Arial;color:#262427;text-transform:uppercase;text-align:left;line-height:13px;letter-spacing:-1px;font-weight:900;margin:0px;">
Update Sample Title
</p>
<div style="background:#eee;width:326px;float:left;margin:5px 0px;">
<p class="BBTimestamp" style="font-size:7px;font-family:Arial;color:#262427;text-transform:uppercase;font-weight:bold;text-align:left;line-height:13px;letter-spacing:1px;margin:5px 10px;">
Event Duration (Or Time Stamp): July 2nd - 7th
</p>
</div>
<p class="BBContent" style="font-size:11px;font-family:Arial;color:#262427;text-align:justify;line-height:13px;margin:0px;">
Write Event/Update description here! Mauris sit amet massa vitae tortor. A cras semper auctor neque vitae. Aenean vel elit scelerisque mauris pellentesque pulvinar. <br /><br />
[✱] Press Shift+Enter to add another line
</p>
<p class="BBContentLinks" style="font-size:7px;font-family:Arial;text-align:left;letter-spacing:1px;text-transform:uppercase;line-height:20px;margin:3px 0px 0px;">
<a href="https://www.asianfanfics.com/" style="background:#262427;color:#fff;padding:5px 5px;text-decoration:none;">Event Link Sample</a>
<!-- *** COPY FROM HERE *** --><a title="Support us by adding our banner to your page!" href="https://www.asianfanfics.com/" style="background:#262427;color:#fff;padding:5px 5px;text-decoration:none;">Event Link Sample Two</a> <!-- *** TO HERE TO ADD MORE LINKS *** -->
</p>
</div>
</div>
</div>
<!-- /// END OF CONTENT /// -->
</div>
<!-- /// CREDIT SECTION /// -->
<div style="width:356px;height:17px;background:#262427;float:left;margin:18px 18px 16px;">
<!-- *** REMOVE FROM HERE *** -->
<p style="font-size:8px;font-family:Arial;color:#fff;text-transform:uppercase;text-align:right;line-height:11px;letter-spacing:1px;margin:3px 5px;">
<a title="Theme Credit : NT" href="https://www.asianfanfics.com/story/view/528148/nt" style="color:#fff;text-decoration:none;">𝖓𝖙.</a>
</p>
<!-- *** TO HERE TO REMOVE CREDIT *** -->
</div>
<!-- /// END OF CREDIT SECTION /// -->
</div>
</div>
Raw
05. Buff Baby : Update Page (Text Ver.)
<!-- /// READ ME ///
TIP: To change certain items/colors/etc. search the following keywords or Hex colours (e.g. #000000) while in HTML Editor mode.
To do so press CTRL+F or CMD+F and use the keywords in the list to find each section.
[ COLORS ]
• Main Colour / Raisin Black (#262427)
[ TEXT ]
• Update Title : BBUpdateTitle
• Content Time Stamp : BBTimestamp
• Content : BBContent
• Content Links : BBContentLinks
[ DIVS ]
• Most Divs are responsive and will adjust on how much you type in so do not adjust heights or widths unless you're familiar with code.
[ MISC ]
• Important sections will be marked for easier adjustments // AFF automatically removes comments in codes so if possible make changes before saving to avoid instructions from disappearing or keep RAW code open on a different tab
-->
<div style="width:392px;height:239px;margin:auto;">
<!-- /// MAIN CONTAINER /// CHANGE BACKGROUND COLOR TO CHANGE GRID COLOR /// -->
<div style="background:#262427;width:392px;height:239px;float:left;overflow:hidden;"><img src="https://i.imgur.com/jz3KVBf.png" style="max-width:715px;max-height:596px;" /></div>
<div style="width:392px;height:239px;float:left;margin:-239px 0px 0px;">
<div style="background:#fff;width:356px;height:169px;float:left;margin:18px 0px 0px 18px;">
<!-- /// CONTENT /// -->
<div style="width:326px;height:140px;float:left;margin:15px;overflow:hidden;">
<div style="width:343px;height:140px;float:left;overflow:auto;">
<div style="width:326px;float:left;">
<p class="BBUpdateTitle" style="font-size:13px;font-family:Arial;color:#262427;text-transform:uppercase;text-align:left;line-height:13px;letter-spacing:-1px;font-weight:900;margin:0px;">
Update Sample Title
</p>
<div style="background:#eee;width:326px;float:left;margin:5px 0px;">
<p class="BBTimestamp" style="font-size:7px;font-family:Arial;color:#262427;text-transform:uppercase;font-weight:bold;text-align:left;line-height:13px;letter-spacing:1px;margin:5px 10px;">
Event Duration (Or Time Stamp): July 2nd - 7th
</p>
</div>
<p class="BBContent" style="font-size:11px;font-family:Arial;color:#262427;text-align:justify;line-height:13px;margin:0px;">
Write Event/Update description here! Mauris sit amet massa vitae tortor. A cras semper auctor neque vitae. Aenean vel elit scelerisque mauris pellentesque pulvinar. <br /><br />
[✱] Press Shift+Enter to add another line
</p>
<p class="BBContentLinks" style="font-size:7px;font-family:Arial;text-align:left;letter-spacing:1px;text-transform:uppercase;line-height:20px;margin:3px 0px 0px;">
<a href="https://www.asianfanfics.com/" style="background:#262427;color:#fff;padding:5px 5px;text-decoration:none;">Event Link Sample</a>
<!-- *** COPY FROM HERE *** --><a title="Support us by adding our banner to your page!" href="https://www.asianfanfics.com/" style="background:#262427;color:#fff;padding:5px 5px;text-decoration:none;">Event Link Sample Two</a> <!-- *** TO HERE TO ADD MORE LINKS *** -->
</p>
</div>
</div>
</div>
<!-- /// END OF CONTENT /// -->
</div>
<!-- /// CREDIT SECTION /// -->
<div style="width:356px;height:17px;background:#262427;float:left;margin:18px 18px 16px;">
<!-- *** REMOVE FROM HERE *** -->
<p style="font-size:8px;font-family:Arial;color:#fff;text-transform:uppercase;text-align:right;line-height:11px;letter-spacing:1px;margin:3px 5px;">
<a title="Theme Credit : NT" href="https://www.asianfanfics.com/story/view/528148/nt" style="color:#fff;text-decoration:none;">𝖓𝖙.</a>
</p>
<!-- *** TO HERE TO REMOVE CREDIT *** -->
</div>
<!-- /// END OF CREDIT SECTION /// -->
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment