Skip to content

Instantly share code, notes, and snippets.

@Nefelibatax

Nefelibatax/01. At The Beginning : Main Page Secret

Last active July 30, 2021 10:45
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/46a93e3e13abdb99abfefd791c428676 to your computer and use it in GitHub Desktop.
Save Nefelibatax/46a93e3e13abdb99abfefd791c428676 to your computer and use it in GitHub Desktop.
Download ZIP
✱ At The Beginning : Applyfic Set
Raw
01. At The Beginning : 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 : Gray X 11 Gray (#b8b4b9)
• White (#fff)
• Black (#000)
[ IMAGES ]
To Change images you can do so in Code by replacing the code in 'SRC' or simply change it in AFF Editor // Main BG can not be changed in editor mode! Please edit through Source
• Background Image : ABMainImage (728×541)
• Music Image : ABMusicImage (69×69)
[ TEXT ]
• Title/Name : ABTitle
• About : ABAbout
• Author's Note : ABAuthorsNote
• Update : ABUpdates
• Extra Info / Music Info : ABExtraInfo
• Plotlines Link : ABPlotLink
• Cheatsheet Link : ABCheatLink
• Reviews Link : ABReviewLink
• Apply Link : ABApplyLink
• Extra Link : ABExtraLink
[ 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.
• Music Player : ABMusic
** Replace 'src="https://www.youtube.com/embed/r0SocbXEal8"' with your own youtube url to change the song! **
[ 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="background:#b8b4b9;width:728px;height:800px;margin:auto;">
<!-- /// MAIN IMAGE /// -->
<div style="width:100%;height:541px;float:left;">
<img class="ABMainImage" src="https://i.imgur.com/JyvcGYM.png" />
</div>
<!-- /// END OF MAIN IMAGE /// -->
<!-- /// UPDATE AND EXTRA /// -->
<div style="width:314px;height:490px;float:right;margin:-541px 50px 0px 0px;">
<div style="width:314px;height:415px;float:left;overflow:hidden;">
<div style="width:331px;height:415px;float:left;overflow:auto;">
<div style="width:314px;height:10px;float:left;margin:352px 0px 10px;">
<p style="font-family:Arial;font-size:12px;color:#fff;text-align:center;letter-spacing:7px;line-height:10px;margin:0px;">
♡♡♡
</p>
</div>
<div style="width:312px;border:1px solid #fff;border-radius:10px;float:left;">
<p style="font-family:Georgia;font-size:8px;color:#fff;text-transform:uppercase;letter-spacing:0.5px;font-weight:700;line-height:10px;margin:11px 11px 0px;padding-bottom:6px;border-bottom:1px solid #fff;">
Updates
</p>
<p style="font-size:8px;color:#fff;text-align:right;line-height:8px;margin:-16px 11px 0px 0px;">
▼
</p>
<p class="ABUpdates" style="font-family:Arial;font-size:8px;color:#fff;text-transform:uppercase;letter-spacing:0.5px;line-height:11px;margin:15px 11px 20px;">
<b style="font-family:Georgia;font-size:10px;">00 • 00</b> — Enim ut tellus elementum sagittis vitae et leo. Dolor morbi non arcu risus quis varius quam quisque id.<br /><br />
<b style="font-family:Georgia;font-size:10px;">00 • 00</b> — Eros in cursus turpis massa.id.<br /><br />
<b style="font-family:Georgia;font-size:10px;">00 • 00</b> — Tortor consequat id porta nibh venenatis cras sed felis. Accumsan in nisl nisi scelerisque eu ultrices vitae auctor. Nunc congue nisi vitae suscipit.<br /><br />
[✱] Press Shift+Enter twice to add another line!
</p>
</div>
</div>
</div>
<div style="background:#fff;width:314px;height:90px;float:left;border-radius:10px;margin:-15px 0px 1px;opacity:0.99;">
<!-- MUSIC PLAYER -->
<div style="width:69px;height:69px;float:left;margin:11px 5px 11px 11px;">
<div style="width:69px;height:69px;float:left;">
<img class="ABMusicImage" src="https://i.imgur.com/ugcQHWj.png" style="height:69px;" />
</div>
<div style="width:10px;height:10px;float:left;margin:-37px 30px 0px;">
<div style="width:10px;height:10px;float:left;">
<p style="font-size:9px;color:#fff;text-align:center;line-height:10px;margin:0px;">
►
</p>
</div>
<div style="width:10px;height:10px;float:left;margin:-10px 0px 0px;border-radius:100%;overflow:hidden;">
<div class="ABMusic" style="width:560px;height:315px;float:left;margin:-250px 0px 0px -100px;opacity:0.01;">
<iframe width="560" height="315" src="https://www.youtube.com/embed/r0SocbXEal8" title="YouTube video player" frameborder="0"></iframe>
</div>
</div>
</div>
</div>
<!-- END OF MUSIC PLAYER -->
<div style="width:213px;height:69px;float:left;border-left:2px solid #b8b4b9;padding-left:5px;margin:11px 0px 11px;overflow:hidden;">
<p class="ABExtraInfo" style="font-family:Arial;font-size:7px;color:#000;text-transform:uppercase;letter-spacing:0.5px;line-height:11px;margin:0px;">
<b style="font-family:Georgia;font-size:8px;color:#b8b4b9;line-height:13px;">Newest Release</b><br />
<b>Title:</b> At The Beginning<br />
<b>Performed By:</b> Donna Lewis, Richard Marx<br />
<b>Released:</b> October 21, 1997<br />
<b>Genre:</b> Pop<br />
<b>Length:</b> 3:42
</p>
</div>
</div>
<p style="font-family:Arial;font-size:8px;color:#fff;text-transform:uppercase;text-align:right;letter-spacing:0.5px;line-height:11px;margin:0px;">
<a title="Theme Credit : NT" href="https://www.asianfanfics.com/story/view/528148/nt" style="color:#fff;text-decoration:none;">𝖓𝖙𝖍𝖊𝖒𝖊𝖘.</a>
</p>
</div>
<!-- /// END OF UPDATE AND EXTRA /// -->
<!-- /// CONTENT /// -->
<div style="width:628px;height:160px;float:left;">
<div style="width:628px;height:160px;float:left;margin:50px;">
<!-- INTRO AND AUTHORS NOTE -->
<div style="width:421px;height:160px;float:left;overflow:hidden;">
<div style="width:438px;height:160px;float:left;overflow:auto;">
<div style="width:421px;float:left;">
<p class="ABAbout" style="font-family:Times New Roman;font-size:12px;color:#fff;letter-spacing:1px;line-height:15px;margin:0px;">
<b class="ABTitle" style="font-family:Georgia;font-size:8px;text-transform:uppercase;color:#b8b4b9;background:#fff;border-radius:4px;padding:3px 4px;">I Like it when you Love me</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Blandit libero volutpat sed cras ornare arcu dui. Tellus rutrum tellus pellentesque eu tincidunt tortor. Nibh praesent tristique magna sit amet purus gravida quis blandit. Quam lacus suspendisse faucibus interdum. Massa sed elementum tempus egestas sed sed risus. Amet justo donec enim diam. Lectus sit amet est placerat. Amet volutpat consequat mauris nunc congue nisi vitae suscipit. Dictumst vestibulum rhoncus est pellentesque.
</p>
<p class="ABAuthorsNote" style="font-family:Times New Roman;font-size:12px;color:#fff;letter-spacing:1px;line-height:15px;border-left:2px solid #fff;margin:15px 25px;padding-left:10px;">
<b style="font-family:Arial;font-size:8px;text-transform:uppercase;">〚 ♡ Author's Tidbit 〛</b><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Blandit libero volutpat sed cras ornare arcu dui. Tellus rutrum tellus pellentesque eu tincidunt tortor. Nibh praesent tristique magna sit amet purus gravida quis blandit. Quam lacus suspendisse faucibus interdum. Massa sed elementum tempus egestas sed sed risus.
</p>
</div>
</div>
</div>
<!-- END OF INTRO AND AUTHORS NOTE -->
<!-- LINKS -->
<div style="width:96px;height:160px;float:left;margin-left:75px;">
<div style="width:37px;height:37px;float:left;">
<p class="ABPlotLink" style="font-family:Arial;font-size:50px;color:#fff;font-weight:900;text-transform:uppercase;line-height:35px;margin:0px;">
<a title="✱ PLOTLINES" href="https://www.asianfanfics.com/" style="color:#fff;text-decoration:none;">P</a>
</p>
</div>
<div style="width:37px;height:37px;float:left;margin-left:22px;">
<p class="ABCheatLink" style="font-family:Arial;font-size:50px;color:#fff;font-weight:900;text-transform:uppercase;line-height:35px;margin:0px;">
<a title="✱ CHEATSHEET" href="https://www.asianfanfics.com/" style="color:#fff;text-decoration:none;">C</a>
</p>
</div>
<div style="width:37px;height:37px;float:left;margin:25px 0px 0px;">
<p class="ABReviewLink" style="font-family:Arial;font-size:50px;color:#fff;font-weight:900;text-transform:uppercase;line-height:35px;margin:0px;">
<a title="✱ REVIEWS" href="https://www.asianfanfics.com/" style="color:#fff;text-decoration:none;">R</a>
</p>
</div>
<div style="width:37px;height:37px;float:left;margin:25px 0px 0px 22px;">
<p class="ABApplyLink" style="font-family:Arial;font-size:50px;color:#fff;font-weight:900;text-transform:uppercase;line-height:35px;margin:0px;">
<a title="✱ APPLY" href="https://www.asianfanfics.com/" style="color:#fff;text-decoration:none;">A</a>
</p>
</div>
<div style="width:37px;height:37px;float:left;margin:25px 0px 0px;">
<p class="ABExtraLink" style="font-family:Arial;font-size:50px;color:#fff;font-weight:900;text-transform:uppercase;line-height:35px;margin:0px;">
<a title="✱ EXTRA LINK ONE" href="https://www.asianfanfics.com/" style="color:#fff;text-decoration:none;">L</a>
</p>
</div>
<div style="background:#fff;width:37px;height:12px;float:left;margin:36px 0px 0px 22px;">
</div>
</div>
<!-- END OF LINKS -->
<div style="width:421px;float:left;">
<p style="font-family:Arial;font-size:7px;color:#fff;text-transform:uppercase;text-align:right;letter-spacing:0.5px;line-height:11px;margin:3px;">
Scroll Down ▼
</p>
</div>
</div>
</div>
<!-- /// END OF CONTENT /// -->
</div>
Raw
02. At The Beginning : Plotlines 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 : Gray X 11 Gray (#b8b4b9)
• White (#fff)
• Black (#000)
[ IMAGES ]
To Change images you can do so in Code by replacing the code in 'SRC' or simply change it in AFF Editor // Main BG can not be changed in editor mode! Please edit through Source
• Background Image : ABMainImage (728×137)
[ TEXT ]
[!] NOTE : Not all text sections have been labelled as several (Literally you can add a million) sections can be added and can just further cause confusion if duplicated too many times!
• Author's Note : ABAuthorsNote
[ 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:728px;margin:auto;">
<!-- /// MAIN IMAGE /// -->
<div style="width:100%;height:137px;float:left;overflow:hidden;">
<img class="ABMainImage" src="https://i.imgur.com/JyvcGYM.png" style="max-width:728px;max-height:541px;" />
</div>
<!-- /// END OF MAIN IMAGE /// -->
<!-- /// A/N /// -->
<div style="width:314px;height:147px;float:right;margin:-137px 50px 0px 0px;">
<div style="width:314px;height:147px;float:left;overflow:hidden;">
<div style="width:331px;height:147px;float:left;overflow:auto;">
<div style="width:314px;height:10px;float:left;margin:89px 0px 10px;">
<p style="font-family:Arial;font-size:12px;color:#fff;text-align:center;letter-spacing:7px;line-height:10px;margin:0px;">
♡♡♡
</p>
</div>
<div style="width:312px;border:1px solid #fff;border-radius:10px;float:left;">
<p style="font-family:Georgia;font-size:8px;color:#fff;text-transform:uppercase;letter-spacing:0.5px;font-weight:700;line-height:10px;margin:11px 11px 0px;padding-bottom:6px;border-bottom:1px solid #fff;">
Author's Note
</p>
<p style="font-size:8px;color:#fff;text-align:right;line-height:8px;margin:-16px 11px 0px 0px;">
▼
</p>
<div style="width:290px;height:50px;float:left;margin:15px 11px;overflow:hidden;">
<div style="width:307px;height:50px;float:left;overflow:auto;">
<div style="width:290px;float:left;">
<p class="ABAuthorsNote" style="font-family:Arial;font-size:8px;color:#fff;text-transform:uppercase;letter-spacing:0.5px;line-height:11px;margin:0px;">
Extra Notes can go here. Tortor consequat id porta nibh venenatis cras sed felis. Accumsan in nisl nisi scelerisque eu ultrices vitae auctor. <br />[✱] With more text, section will allow scroll.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /// END OF A/N /// -->
<!-- /// CONTENT /// -->
<div style="background:#b8b4b9;width:728px;float:left;margin:-10px 0px 0px;opacity:0.99;">
<div style="width:628px;float:left;margin:50px;">
<!-- PLOT 001 -->
<div style="width:628px;float:left;">
<div style="width:70px;height:37px;float:left;">
<p style="font-family:Arial;font-size:50px;color:#fff;letter-spacing:-2px;font-weight:900;text-transform:uppercase;line-height:35px;margin:0px;">
01
</p>
</div>
<p style="font-family:Arial;font-size:7px;color:#fff;text-transform:uppercase;letter-spacing:1px;line-height:14px;margin:14px 0px 0px;">
<b style="font-family:Georgia;font-size:8px;color:#b8b4b9;background:#fff;border-radius:4px;padding:3px 4px;">Plot Name One</b><br />
Available
</p>
<p style="font-family:Times New Roman;font-size:12px;color:#fff;letter-spacing:1px;line-height:15px;margin:10px 0px 0px 70px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Blandit libero volutpat sed cras ornare arcu dui. Tellus rutrum tellus pellentesque eu tincidunt tortor. Nibh praesent tristique magna sit amet purus gravida quis blandit. Quam lacus suspendisse faucibus interdum. Massa sed elementum tempus egestas sed sed risus. Amet justo donec enim diam. Lectus sit amet est placerat. Amet volutpat consequat mauris nunc congue nisi vitae suscipit. Dictumst vestibulum rhoncus est pellentesque.
</p>
</div>
<!-- END OF PLOT 001 -->
<!-- PLOT 002 -->
<div style="width:628px;float:left;margin:25px 0px 0px;">
<div style="width:70px;height:37px;float:left;">
<p style="font-family:Arial;font-size:50px;color:#fff;letter-spacing:-2px;font-weight:900;text-transform:uppercase;line-height:35px;margin:0px;">
02
</p>
</div>
<p style="font-family:Arial;font-size:7px;color:#fff;text-transform:uppercase;letter-spacing:1px;line-height:14px;margin:14px 0px 0px;">
<b style="font-family:Georgia;font-size:8px;color:#b8b4b9;background:#fff;border-radius:4px;padding:3px 4px;">Plot Name Two</b><br />
Available
</p>
<p style="font-family:Times New Roman;font-size:12px;color:#fff;letter-spacing:1px;line-height:15px;margin:10px 0px 0px 70px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Blandit libero volutpat sed cras ornare arcu dui. Tellus rutrum tellus pellentesque eu tincidunt tortor. Nibh praesent tristique magna sit amet purus gravida quis blandit. Quam lacus suspendisse faucibus interdum. Massa sed elementum tempus egestas sed sed risus. Amet justo donec enim diam. Lectus sit amet est placerat. Amet volutpat consequat mauris nunc congue nisi vitae suscipit. Dictumst vestibulum rhoncus est pellentesque.
</p>
</div>
<!-- END OF PLOT 002 -->
<!-- PLOT 003 // TO ADD MORE SECTIONS COPY FROM HERE TO END OF *PLOT 003* -->
<div style="width:628px;float:left;margin:25px 0px 0px;">
<div style="width:70px;height:37px;float:left;">
<p style="font-family:Arial;font-size:50px;color:#fff;letter-spacing:-2px;font-weight:900;text-transform:uppercase;line-height:35px;margin:0px;">
03
</p>
</div>
<p style="font-family:Arial;font-size:7px;color:#fff;text-transform:uppercase;letter-spacing:1px;line-height:14px;margin:14px 0px 0px;">
<b style="font-family:Georgia;font-size:8px;color:#b8b4b9;background:#fff;border-radius:4px;padding:3px 4px;">Plot Name Three</b><br />
Available
</p>
<p style="font-family:Times New Roman;font-size:12px;color:#fff;letter-spacing:1px;line-height:15px;margin:10px 0px 0px 70px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Blandit libero volutpat sed cras ornare arcu dui. Tellus rutrum tellus pellentesque eu tincidunt tortor. Nibh praesent tristique magna sit amet purus gravida quis blandit. Quam lacus suspendisse faucibus interdum. Massa sed elementum tempus egestas sed sed risus. Amet justo donec enim diam. Lectus sit amet est placerat. Amet volutpat consequat mauris nunc congue nisi vitae suscipit. Dictumst vestibulum rhoncus est pellentesque.
</p>
</div>
<!-- END OF PLOT 003 // ONCE COPIED, PASTE DIRECTLY BELOW THIS LINE -->
</div>
</div>
<!-- /// END OF CONTENT /// -->
</div>
Raw
03. At The Beginning : Cheatsheet 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 : Gray X 11 Gray (#b8b4b9)
• Underline Shade in FAQ : Quick Silver (#a19fa2)
• White (#fff)
• Black (#000)
[ IMAGES ]
To Change images you can do so in Code by replacing the code in 'SRC' or simply change it in AFF Editor // Main BG can not be changed in editor mode! Please edit through Source
• Background Image : ABMainImage (728×137)
[ TEXT ]
[!] NOTE : Not all text sections have been labelled as several (Literally you can add a million) sections can be added and can just further cause confusion if duplicated too many times!
• Extra Notes : ABExtraNotes
• Link One : ABLink01
• Link Two : ABLink02
• Link Three : ABLink03
• Frequently Asked Questions : ABFAQ
[ 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:728px;margin:auto;">
<!-- /// MAIN IMAGE /// -->
<div style="width:100%;height:137px;float:left;overflow:hidden;">
<img class="ABMainImage" src="https://i.imgur.com/JyvcGYM.png" style="max-width:728px;max-height:541px;" />
</div>
<!-- /// END OF MAIN IMAGE /// -->
<div style="width:728px;height:10px;float:left;margin:-20px 0px 10px;">
<p style="font-family:Arial;font-size:12px;color:#fff;text-align:center;letter-spacing:7px;line-height:10px;margin:0px;">
♡♡♡
</p>
</div>
<!-- /// CONTENT /// -->
<div style="background:#b8b4b9;width:728px;float:left;margin:0px;opacity:0.99;">
<div style="width:628px;float:left;margin:50px;">
<!-- /// LEFT CONTENT SECTION /// -->
<div style="width:446px;float:left;">
<!-- SECTION 001 -->
<p style="font-family:Times New Roman;font-size:12px;color:#fff;letter-spacing:1px;line-height:15px;margin:0px;">
<b style="font-family:Georgia;font-size:8px;color:#b8b4b9;text-transform:uppercase;background:#fff;border-radius:4px;padding:3px 4px;">Section One</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Blandit libero volutpat sed cras ornare arcu dui. Tellus rutrum tellus pellentesque eu tincidunt tortor. Nibh praesent tristique magna sit amet purus gravida quis blandit. Quam lacus suspendisse faucibus interdum. Massa sed elementum tempus egestas sed sed risus. Amet justo donec enim diam. Lectus sit amet est placerat. Amet volutpat consequat mauris nunc congue nisi vitae suscipit. Dictumst vestibulum rhoncus est pellentesque.
</p>
<!-- END OF SECTION 001 -->
<!-- SECTION 002 -->
<p style="font-family:Arial;font-size:12px;color:#fff;text-align:center;line-height:10px;margin:25px 0px;">
♡
</p>
<p style="font-family:Times New Roman;font-size:12px;color:#fff;letter-spacing:1px;line-height:15px;margin:0px;">
<b style="font-family:Georgia;font-size:8px;color:#b8b4b9;text-transform:uppercase;background:#fff;border-radius:4px;padding:3px 4px;">Section Two</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Blandit libero volutpat sed cras ornare arcu dui. Tellus rutrum tellus pellentesque eu tincidunt tortor. Nibh praesent tristique magna sit amet purus gravida quis blandit. Quam lacus suspendisse faucibus interdum. Massa sed elementum tempus egestas sed sed risus. Amet justo donec enim diam. Lectus sit amet est placerat. Amet volutpat consequat mauris nunc congue nisi vitae suscipit. Dictumst vestibulum rhoncus est pellentesque.
</p>
<!-- END OF SECTION 002 -->
<!-- SECTION 003 // TO ADD MORE SECTIONS COPY FROM HERE TO END OF *SECTION 003* -->
<p style="font-family:Arial;font-size:12px;color:#fff;text-align:center;line-height:10px;margin:25px 0px;">
♡
</p>
<p style="font-family:Times New Roman;font-size:12px;color:#fff;letter-spacing:1px;line-height:15px;margin:0px;">
<b style="font-family:Georgia;font-size:8px;color:#b8b4b9;text-transform:uppercase;background:#fff;border-radius:4px;padding:3px 4px;">Section Three</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Blandit libero volutpat sed cras ornare arcu dui. Tellus rutrum tellus pellentesque eu tincidunt tortor. Nibh praesent tristique magna sit amet purus gravida quis blandit. Quam lacus suspendisse faucibus interdum. Massa sed elementum tempus egestas sed sed risus. Amet justo donec enim diam. Lectus sit amet est placerat. Amet volutpat consequat mauris nunc congue nisi vitae suscipit. Dictumst vestibulum rhoncus est pellentesque.
</p>
<!-- END OF PLOT 003 // ONCE COPIED, PASTE DIRECTLY BELOW THIS LINE -->
</div>
<!-- /// END OF LEFT CONTENT SECTION /// -->
<!-- /// RIGHT SIDE BAR /// -->
<div style="width:157px;float:right;">
<!-- EXTRA NOTES -->
<div style="background:#fff;width:157px;float:left;border-radius:4px;">
<p class="ABExtraNotes" style="font-family:Arial;font-size:7px;color:#000;text-transform:uppercase;letter-spacing:0.5px;line-height:10px;margin:11px;border-left:2px solid #b8b4b9;padding-left:5px;">
<b style="font-family:Georgia;font-size:8px;color:#b8b4b9;letter-spacing:1px;line-height:14px;">Extra Notes</b><br />
Consequat ac felis donec et. In aliquam sem fringilla ut morbi tincidunt augue interdum velit. Adipiscing diam donec adipiscing tristique risus. Vivamus at augue eget arcu dictum varius duis at consectetur. Vulputate ut pharetra sit amet aliquam.
</p>
</div>
<!-- END OF EXTRA NOTES -->
<!-- QUICK LINKS -->
<div style="width:157px;float:left;margin:0px 0px 15px;">
<div style="width:155px;float:left;border-left:1px solid #fff;border-right:1px solid #fff;border-bottom:1px solid #fff;border-radius:0px 0px 4px 4px;margin:-2px 0px 0px;">
<p class="ABLink01" style="font-family:Arial;font-size:7px;color:#fff;text-transform:uppercase;letter-spacing:1px;line-height:10px;margin:8px 11px 5px;">
<a style="color:#fff;text-decoration:none;" href="https://www.asianfanfics.com/">Source Code</a>
</p>
</div>
<div style="width:155px;float:left;border-left:1px solid #fff;border-right:1px solid #fff;border-bottom:1px solid #fff;border-radius:0px 0px 4px 4px;margin:-2px 0px 0px;">
<p class="ABLink02" style="font-family:Arial;font-size:7px;color:#fff;text-transform:uppercase;letter-spacing:1px;line-height:10px;margin:8px 11px 5px;">
<a style="color:#fff;text-decoration:none;" href="https://www.asianfanfics.com/">Turn In</a>
</p>
</div>
<div style="width:155px;float:left;border-left:1px solid #fff;border-right:1px solid #fff;border-bottom:1px solid #fff;border-radius:0px 0px 4px 4px;margin:-2px 0px 0px;">
<p class="ABLink03" style="font-family:Arial;font-size:7px;color:#fff;text-transform:uppercase;letter-spacing:1px;line-height:10px;margin:8px 11px 5px;">
<a style="color:#fff;text-decoration:none;" href="https://www.asianfanfics.com/">Extra Link 001</a>
</p>
</div>
</div>
<!-- END OF QUICK LINKS -->
<!-- FAQ -->
<p class="ABFAQ" style="font-family:Times New Roman;font-size:12px;color:#fff;letter-spacing:1px;line-height:15px;margin:0px;">
<b style="border-bottom:4px solid #a19fa2;">Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant?</b><br />
Sapien et ligula ullamcorper malesuada proin libero nunc.<br /><br />
<b style="border-bottom:4px solid #a19fa2;"> Mauris rhoncus aenean vel elit scelerisque mauris pellentesque?</b><br />
Nec tincidunt praesent semper feugiat.<br /><br />
<b style="border-bottom:4px solid #a19fa2;"> At volutpat diam ut venenatis tellus?</b><br />
Nullam non nisi est sit amet facilisis magna etiam.<br /><br />
<b style="border-bottom:4px solid #a19fa2;"> Enim ut tellus elementum sagittis vitae et leo?</b><br />
Dolor morbi non arcu risus quis varius quam quisque id. Eros in cursus turpis massa.
</p>
<!-- END OF FAQ -->
</div>
<!-- /// END OF RIGHT SIDE BAR /// -->
</div>
</div>
<!-- /// END OF CONTENT /// -->
</div>
Raw
04. At The Beginning : Reviews 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 : Gray X 11 Gray (#b8b4b9)
• White (#fff)
• Black (#000)
[ IMAGES ]
To Change images you can do so in Code by replacing the code in 'SRC' or simply change it in AFF Editor // Main BG can not be changed in editor mode! Please edit through Source
• Background Image : ABMainImage (728×137)
• Application Image 001 : ABAppImage01 (200×258)
• Application Image 002 : ABAppImage02 (200×258)
• Application Image 003 : ABAppImage03 (200×258)
[ TEXT ]
[!] NOTE : Not all text sections have been labelled as several (Literally you can add a million) sections can be added and can just further cause confusion if duplicated too many times!
• Review Updates : ABReviewUpdate
[ 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:728px;margin:auto;">
<!-- /// MAIN IMAGE /// -->
<div style="width:100%;height:137px;float:left;overflow:hidden;">
<img class="ABMainImage" src="https://i.imgur.com/JyvcGYM.png" style="max-width:728px;max-height:541px;" />
</div>
<!-- /// END OF MAIN IMAGE /// -->
<!-- /// REVIEW UPDATES /// -->
<div style="width:314px;height:147px;float:right;margin:-137px 50px 0px 0px;">
<div style="width:314px;height:147px;float:left;overflow:hidden;">
<div style="width:331px;height:147px;float:left;overflow:auto;">
<div style="width:314px;height:10px;float:left;margin:89px 0px 10px;">
<p style="font-family:Arial;font-size:12px;color:#fff;text-align:center;letter-spacing:7px;line-height:10px;margin:0px;">
♡♡♡
</p>
</div>
<div style="width:312px;border:1px solid #fff;border-radius:10px;float:left;">
<p style="font-family:Georgia;font-size:8px;color:#fff;text-transform:uppercase;letter-spacing:0.5px;font-weight:700;line-height:10px;margin:11px 11px 0px;padding-bottom:6px;border-bottom:1px solid #fff;">
Review Updates
</p>
<p style="font-size:8px;color:#fff;text-align:right;line-height:8px;margin:-16px 11px 0px 0px;">
▼
</p>
<div style="width:290px;height:50px;float:left;margin:15px 11px;overflow:hidden;">
<div style="width:307px;height:50px;float:left;overflow:auto;">
<div style="width:290px;float:left;">
<p class="ABReviewUpdate" style="font-family:Arial;font-size:8px;color:#fff;text-transform:uppercase;letter-spacing:0.5px;line-height:11px;margin:0px;">
<b style="font-family:Georgia;font-size:10px;">00 • 00</b> — applications updated, revisions needed<br />
<b style="font-family:Georgia;font-size:10px;">00 • 00</b> — 〚 Character Name 〛review completed
<br /><br>
[✱] Press Shift+Enter twice to add another line!
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /// END OF REVIEW UPDATES /// -->
<!-- /// CONTENT /// -->
<div style="background:#b8b4b9;width:728px;float:left;margin:-10px 0px 0px;opacity:0.99;">
<div style="background:#b8b4b9;width:628px;float:left;margin:50px;">
<!-- REVIEW 001 -->
<div style="width:628px;float:left;">
<div style="width:200px;height:258px;float:left;margin:0px 10px 0px 0px;">
<img class="ABAppImage01" src="https://i.imgur.com/O0pOVlA.png" />
</div>
<div style="width:418px;height:258px;float:left;overflow:hidden;">
<div style="width:435px;height:258px;float:left;overflow:auto;">
<!-- CONTAINER ONE -->
<div style="width:418px;height:258px;float:left;overflow:hidden;">
<p style="font-family:Arial;font-size:7px;color:#fff;text-transform:uppercase;letter-spacing:1px;line-height:14px;margin:1px 0px 0px;">
<b style="font-family:Georgia;font-size:8px;color:#b8b4b9;background:#fff;border-radius:4px;padding:3px 4px;">Character Name</b><br />
Review Complete
</p>
<p style="font-family:Times New Roman;font-size:12px;color:#fff;letter-spacing:1px;line-height:15px;margin:10px 0px 15px;">
Short Discription here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Blandit libero volutpat sed cras ornare arcu dui. Tellus rutrum tellus pellentesque eu tincidunt tortor. Nibh praesent tristique magna sit amet purus gravida quis blandit.<br /><br />Quam lacus suspendisse faucibus interdum. Massa sed elementum tempus egestas sed sed risus. Amet justo donec enim diam. Lectus sit amet est placerat. Amet volutpat consequat mauris nunc congue nisi vitae suscipit. Dictumst vestibulum rhoncus est pellentesque.
</p>
<p style="font-family:Arial;font-size:7px;color:#fff;text-transform:uppercase;letter-spacing:1px;line-height:10px;margin:0px;">
Scroll Down to read review ▼
</p>
</div>
<!-- END OF CONTAINER ONE -->
<!-- CONTAINER TWO -->
<div style="width:418px;height:258px;float:left;overflow:hidden;">
<div style="width:435px;height:258px;float:left;overflow:auto;">
<div style="width:418px;float:left;">
<p style="font-family:Times New Roman;font-size:12px;color:#fff;letter-spacing:1px;line-height:15px;margin:0px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Blandit libero volutpat sed cras ornare arcu dui. Tellus rutrum tellus pellentesque eu tincidunt tortor. Nibh praesent tristique magna sit amet purus gravida quis blandit. Quam lacus suspendisse faucibus interdum. Massa sed elementum tempus egestas sed sed risus. Amet justo donec enim diam. Lectus sit amet est placerat. Amet volutpat consequat mauris nunc congue nisi vitae suscipit. Dictumst vestibulum rhoncus est pellentesque. Nunc faucibus a pellentesque sit amet porttitor eget dolor. Sollicitudin tempor id eu nisl nunc.
<br /><br />
Sit amet facilisis magna etiam. Orci eu lobortis elementum nibh tellus. Quisque id diam vel quam elementum pulvinar etiam. Amet cursus sit amet dictum sit. Tristique senectus et netus et malesuada fames ac turpis. Sed faucibus turpis in eu mi bibendum neque egestas. Odio pellentesque diam volutpat commodo. Odio euismod lacinia at quis risus. Porttitor massa id neque aliquam vestibulum morbi blandit cursus. Ridiculus mus mauris vitae ultricies leo integer malesuada nunc. A diam maecenas sed enim ut sem viverra aliquet.
<br /><br />
Integer quis auctor elit sed vulputate mi sit amet mauris. Tortor pretium viverra suspendisse potenti nullam ac tortor vitae purus. Ornare quam viverra orci sagittis eu volutpat. Ipsum dolor sit amet consectetur adipiscing elit ut aliquam. Euismod quis viverra nibh cras pulvinar mattis nunc sed blandit. Velit dignissim sodales ut eu sem integer vitae. Urna neque viverra justo nec. Nunc congue nisi vitae suscipit. Augue ut lectus arcu bibendum at varius vel pharetra. Id diam maecenas ultricies mi eget mauris pharetra. Suspendisse ultrices gravida dictum fusce ut placerat orci. Purus non enim praesent elementum facilisis leo vel fringilla est. Parturient montes nascetur ridiculus mus mauris vitae. Molestie ac feugiat sed lectus vestibulum mattis. Molestie nunc non blandit massa enim nec dui. Turpis egestas pretium aenean pharetra. Sit amet cursus sit amet dictum sit amet.
<br /><br />
Sed tempus urna et pharetra pharetra. Vel turpis nunc eget lorem dolor sed viverra. Dignissim suspendisse in est ante in nibh mauris cursus. Felis eget velit aliquet sagittis id. Vestibulum lorem sed risus ultricies tristique nulla aliquet. Nunc mi ipsum faucibus vitae. Ac placerat vestibulum lectus mauris. Scelerisque eleifend donec pretium vulputate sapien. Lacus viverra vitae congue eu consequat ac. At elementum eu facilisis sed odio morbi. Consectetur a erat nam at lectus urna. Ullamcorper velit sed ullamcorper morbi. Tortor at risus viverra adipiscing at in tellus. Magnis dis parturient montes nascetur. Ac placerat vestibulum lectus mauris. Sit amet tellus cras adipiscing enim. Risus at ultrices mi tempus. Convallis posuere morbi leo urna molestie at elementum eu. Ipsum a arcu cursus vitae congue mauris rhoncus. Donec adipiscing tristique risus nec feugiat in fermentum posuere.
<br /><br />
Et tortor consequat id porta nibh venenatis cras sed felis. Egestas sed tempus urna et pharetra. Mauris a diam maecenas sed. Eu non diam phasellus vestibulum lorem sed risus. Sed sed risus pretium quam vulputate dignissim suspendisse in est. Iaculis nunc sed augue lacus viverra vitae congue eu consequat. Aliquet bibendum enim facilisis gravida neque. Pharetra magna ac placerat vestibulum. In egestas erat imperdiet sed euismod. Ultricies mi eget mauris pharetra et ultrices. Consectetur adipiscing elit pellentesque habitant morbi. Sed risus pretium quam vulputate dignissim suspendisse in est ante. Rhoncus est pellentesque elit ullamcorper. Facilisis leo vel fringilla est ullamcorper eget nulla facilisi etiam. Commodo nulla facilisi nullam vehicula ipsum a arcu cursus. Odio aenean sed adipiscing diam donec adipiscing tristique. Nulla malesuada pellentesque elit eget gravida cum.
</p>
</div>
</div>
</div>
<!-- END OF CONTAINER TWO -->
</div>
</div>
</div>
<!-- END OF REVIEW 001 -->
<!-- REVIEW 002 -->
<div style="width:628px;float:left;margin-top:25px;">
<div style="width:200px;height:258px;float:left;margin:0px 10px 0px 0px;">
<img class="ABAppImage02" src="https://i.imgur.com/zzd7rii.png" />
</div>
<div style="width:418px;height:258px;float:left;overflow:hidden;">
<div style="width:435px;height:258px;float:left;overflow:auto;">
<!-- CONTAINER ONE -->
<div style="width:418px;height:258px;float:left;overflow:hidden;">
<p style="font-family:Arial;font-size:7px;color:#fff;text-transform:uppercase;letter-spacing:1px;line-height:14px;margin:1px 0px 0px;">
<b style="font-family:Georgia;font-size:8px;color:#b8b4b9;background:#fff;border-radius:4px;padding:3px 4px;">Character Name</b><br />
Review Pending
</p>
<p style="font-family:Times New Roman;font-size:12px;color:#fff;letter-spacing:1px;line-height:15px;margin:10px 0px 15px;">
Short Discription here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Blandit libero volutpat sed cras ornare arcu dui. Tellus rutrum tellus pellentesque eu tincidunt tortor. Nibh praesent tristique magna sit amet purus gravida quis blandit.<br /><br />Quam lacus suspendisse faucibus interdum. Massa sed elementum tempus egestas sed sed risus. Amet justo donec enim diam. Lectus sit amet est placerat. Amet volutpat consequat mauris nunc congue nisi vitae suscipit. Dictumst vestibulum rhoncus est pellentesque.
</p>
<p style="font-family:Arial;font-size:7px;color:#fff;text-transform:uppercase;letter-spacing:1px;line-height:10px;margin:0px;">
Scroll Down to read review ▼
</p>
</div>
<!-- END OF CONTAINER ONE -->
<!-- CONTAINER TWO -->
<div style="width:418px;height:258px;float:left;overflow:hidden;">
<div style="width:435px;height:258px;float:left;overflow:auto;">
<div style="width:418px;float:left;">
<p style="font-family:Times New Roman;font-size:12px;color:#fff;letter-spacing:1px;line-height:15px;margin:0px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Blandit libero volutpat sed cras ornare arcu dui. Tellus rutrum tellus pellentesque eu tincidunt tortor. Nibh praesent tristique magna sit amet purus gravida quis blandit. Quam lacus suspendisse faucibus interdum. Massa sed elementum tempus egestas sed sed risus. Amet justo donec enim diam. Lectus sit amet est placerat. Amet volutpat consequat mauris nunc congue nisi vitae suscipit. Dictumst vestibulum rhoncus est pellentesque. Nunc faucibus a pellentesque sit amet porttitor eget dolor. Sollicitudin tempor id eu nisl nunc.
<br /><br />
Sit amet facilisis magna etiam. Orci eu lobortis elementum nibh tellus. Quisque id diam vel quam elementum pulvinar etiam. Amet cursus sit amet dictum sit. Tristique senectus et netus et malesuada fames ac turpis. Sed faucibus turpis in eu mi bibendum neque egestas. Odio pellentesque diam volutpat commodo. Odio euismod lacinia at quis risus. Porttitor massa id neque aliquam vestibulum morbi blandit cursus. Ridiculus mus mauris vitae ultricies leo integer malesuada nunc. A diam maecenas sed enim ut sem viverra aliquet.
<br /><br />
Integer quis auctor elit sed vulputate mi sit amet mauris. Tortor pretium viverra suspendisse potenti nullam ac tortor vitae purus. Ornare quam viverra orci sagittis eu volutpat. Ipsum dolor sit amet consectetur adipiscing elit ut aliquam. Euismod quis viverra nibh cras pulvinar mattis nunc sed blandit. Velit dignissim sodales ut eu sem integer vitae. Urna neque viverra justo nec. Nunc congue nisi vitae suscipit. Augue ut lectus arcu bibendum at varius vel pharetra. Id diam maecenas ultricies mi eget mauris pharetra. Suspendisse ultrices gravida dictum fusce ut placerat orci. Purus non enim praesent elementum facilisis leo vel fringilla est. Parturient montes nascetur ridiculus mus mauris vitae. Molestie ac feugiat sed lectus vestibulum mattis. Molestie nunc non blandit massa enim nec dui. Turpis egestas pretium aenean pharetra. Sit amet cursus sit amet dictum sit amet.
<br /><br />
Sed tempus urna et pharetra pharetra. Vel turpis nunc eget lorem dolor sed viverra. Dignissim suspendisse in est ante in nibh mauris cursus. Felis eget velit aliquet sagittis id. Vestibulum lorem sed risus ultricies tristique nulla aliquet. Nunc mi ipsum faucibus vitae. Ac placerat vestibulum lectus mauris. Scelerisque eleifend donec pretium vulputate sapien. Lacus viverra vitae congue eu consequat ac. At elementum eu facilisis sed odio morbi. Consectetur a erat nam at lectus urna. Ullamcorper velit sed ullamcorper morbi. Tortor at risus viverra adipiscing at in tellus. Magnis dis parturient montes nascetur. Ac placerat vestibulum lectus mauris. Sit amet tellus cras adipiscing enim. Risus at ultrices mi tempus. Convallis posuere morbi leo urna molestie at elementum eu. Ipsum a arcu cursus vitae congue mauris rhoncus. Donec adipiscing tristique risus nec feugiat in fermentum posuere.
<br /><br />
Et tortor consequat id porta nibh venenatis cras sed felis. Egestas sed tempus urna et pharetra. Mauris a diam maecenas sed. Eu non diam phasellus vestibulum lorem sed risus. Sed sed risus pretium quam vulputate dignissim suspendisse in est. Iaculis nunc sed augue lacus viverra vitae congue eu consequat. Aliquet bibendum enim facilisis gravida neque. Pharetra magna ac placerat vestibulum. In egestas erat imperdiet sed euismod. Ultricies mi eget mauris pharetra et ultrices. Consectetur adipiscing elit pellentesque habitant morbi. Sed risus pretium quam vulputate dignissim suspendisse in est ante. Rhoncus est pellentesque elit ullamcorper. Facilisis leo vel fringilla est ullamcorper eget nulla facilisi etiam. Commodo nulla facilisi nullam vehicula ipsum a arcu cursus. Odio aenean sed adipiscing diam donec adipiscing tristique. Nulla malesuada pellentesque elit eget gravida cum.
</p>
</div>
</div>
</div>
<!-- END OF CONTAINER TWO -->
</div>
</div>
</div>
<!-- END OF REVIEW 002 -->
<!-- REVIEW 003 // TO ADD MORE SECTIONS COPY FROM HERE TO END OF *REVIEW 003*-->
<div style="width:628px;float:left;margin-top:25px;">
<div style="width:200px;height:258px;float:left;margin:0px 10px 0px 0px;">
<img class="ABAppImage03" src="https://i.imgur.com/IWK1zDS.png" />
</div>
<div style="width:418px;height:258px;float:left;overflow:hidden;">
<div style="width:435px;height:258px;float:left;overflow:auto;">
<!-- CONTAINER ONE -->
<div style="width:418px;height:258px;float:left;overflow:hidden;">
<p style="font-family:Arial;font-size:7px;color:#fff;text-transform:uppercase;letter-spacing:1px;line-height:14px;margin:1px 0px 0px;">
<b style="font-family:Georgia;font-size:8px;color:#b8b4b9;background:#fff;border-radius:4px;padding:3px 4px;">Character Name</b><br />
Review Denied
</p>
<p style="font-family:Times New Roman;font-size:12px;color:#fff;letter-spacing:1px;line-height:15px;margin:10px 0px 15px;">
Short Discription here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Blandit libero volutpat sed cras ornare arcu dui. Tellus rutrum tellus pellentesque eu tincidunt tortor. Nibh praesent tristique magna sit amet purus gravida quis blandit.<br /><br />Quam lacus suspendisse faucibus interdum. Massa sed elementum tempus egestas sed sed risus. Amet justo donec enim diam. Lectus sit amet est placerat. Amet volutpat consequat mauris nunc congue nisi vitae suscipit. Dictumst vestibulum rhoncus est pellentesque.
</p>
<p style="font-family:Arial;font-size:7px;color:#fff;text-transform:uppercase;letter-spacing:1px;line-height:10px;margin:0px;">
Scroll Down to read review ▼
</p>
</div>
<!-- END OF CONTAINER ONE -->
<!-- CONTAINER TWO -->
<div style="width:418px;height:258px;float:left;overflow:hidden;">
<div style="width:435px;height:258px;float:left;overflow:auto;">
<div style="width:418px;float:left;">
<p style="font-family:Times New Roman;font-size:12px;color:#fff;letter-spacing:1px;line-height:15px;margin:0px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Blandit libero volutpat sed cras ornare arcu dui. Tellus rutrum tellus pellentesque eu tincidunt tortor. Nibh praesent tristique magna sit amet purus gravida quis blandit. Quam lacus suspendisse faucibus interdum. Massa sed elementum tempus egestas sed sed risus. Amet justo donec enim diam. Lectus sit amet est placerat. Amet volutpat consequat mauris nunc congue nisi vitae suscipit. Dictumst vestibulum rhoncus est pellentesque. Nunc faucibus a pellentesque sit amet porttitor eget dolor. Sollicitudin tempor id eu nisl nunc.
<br /><br />
Sit amet facilisis magna etiam. Orci eu lobortis elementum nibh tellus. Quisque id diam vel quam elementum pulvinar etiam. Amet cursus sit amet dictum sit. Tristique senectus et netus et malesuada fames ac turpis. Sed faucibus turpis in eu mi bibendum neque egestas. Odio pellentesque diam volutpat commodo. Odio euismod lacinia at quis risus. Porttitor massa id neque aliquam vestibulum morbi blandit cursus. Ridiculus mus mauris vitae ultricies leo integer malesuada nunc. A diam maecenas sed enim ut sem viverra aliquet.
<br /><br />
Integer quis auctor elit sed vulputate mi sit amet mauris. Tortor pretium viverra suspendisse potenti nullam ac tortor vitae purus. Ornare quam viverra orci sagittis eu volutpat. Ipsum dolor sit amet consectetur adipiscing elit ut aliquam. Euismod quis viverra nibh cras pulvinar mattis nunc sed blandit. Velit dignissim sodales ut eu sem integer vitae. Urna neque viverra justo nec. Nunc congue nisi vitae suscipit. Augue ut lectus arcu bibendum at varius vel pharetra. Id diam maecenas ultricies mi eget mauris pharetra. Suspendisse ultrices gravida dictum fusce ut placerat orci. Purus non enim praesent elementum facilisis leo vel fringilla est. Parturient montes nascetur ridiculus mus mauris vitae. Molestie ac feugiat sed lectus vestibulum mattis. Molestie nunc non blandit massa enim nec dui. Turpis egestas pretium aenean pharetra. Sit amet cursus sit amet dictum sit amet.
</p>
</div>
</div>
</div>
<!-- END OF CONTAINER TWO -->
</div>
</div>
</div>
<!-- END OF REVIEW 003 // ONCE COPIED, PASTE DIRECTLY BELOW THIS LINE -->
</div>
</div>
<!-- /// END OF CONTENT /// -->
</div>
Raw
05. At The Beginning : Application 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 : Gray X 11 Gray (#b8b4b9)
• Underline Shade Subcategory in Text : Quick Silver (#a19fa2)
• Umber : (#736357)
• Sonic Silver : (#707070)
• Davys Grey : (#464646)
• Light Gray : (#cccccc)
• White (#fff)
• Black (#000)
[ IMAGES ]
To Change images you can do so in Code by replacing the code in 'SRC' or simply change it in AFF Editor // Main BG can not be changed in editor mode! Please edit through Source
[!] NOTE TO MAKE CUSTOM COLOURED IMAGES VISIT:
— https://singlecolorimage.com/
— Once you've made your image, copy and paste the image url in Editor Mode!
— If you're familiar with code, simple replace the HEX code in the link with your own.
(e.g 'https://singlecolorimage.com/get/707070/60x60' — Replace '707070' with your own HEX!)
• Gallery Colour Image 001 : ABGalleryColour01
• Gallery Colour Image 001 : ABGalleryColour02
• Gallery Colour Image 001 : ABGalleryColour03
• Gallery Colour Image 001 : ABGalleryColour04
• Gallery Image 001 : ABGalleryImg01 (60×60)
• Gallery Image 002 : ABGalleryImg02 (60×60)
• Gallery Image 003 : ABGalleryImg03 (60×60)
• Gallery Image 004 : ABGalleryImg04 (60×60)
[ TEXT ]
[!] NOTE : Not all text sections have been labelled as several (Literally you can add a million) sections can be added and can just further cause confusion if duplicated too many times!
• Applicant Info : ABApplicantInfo
• Link One : ABLink01
• Link Two : ABLink02
• Bio Info Chart : ABInfoChart01
• General Info Chart : ABInfoChart02
• Relationship Info Chart : ABInfoChart03
• Misc Info Chart : ABInfoChart04
[ 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:728px;margin:auto;">
<!-- /// CONTENT /// -->
<div style="background:#b8b4b9;width:728px;float:left;">
<div style="width:628px;float:left;margin:50px;">
<!-- /// LEFT SIDE BAR /// -->
<div style="width:157px;float:left;">
<!-- APPLICANT INFO -->
<div style="background:#fff;width:157px;float:left;border-radius:4px;">
<p class="ABApplicantInfo" style="font-family:Arial;font-size:7px;color:#000;text-transform:uppercase;letter-spacing:0.5px;line-height:10px;margin:11px;border-left:2px solid #b8b4b9;padding-left:5px;">
<b style="font-family:Georgia;font-size:8px;color:#b8b4b9;letter-spacing:1px;line-height:14px;">Applicant Info</b><br />
Additional Info goes here. Pretium fusce id velit ut tortor. In fermentum et sollicitudin ac orci. Aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Elit eget gravida cum sociis natoque penatibus.
<br /><br />
<b>Activity Rate:</b> Sample Text<br />
<b>Password:</b> Password Sample
</p>
</div>
<!-- END OF APPLICANT INFO -->
<!-- QUICK LINKS -->
<div style="width:157px;float:left;margin:0px 0px 15px;">
<div style="width:155px;float:left;border-left:1px solid #fff;border-right:1px solid #fff;border-bottom:1px solid #fff;border-radius:0px 0px 4px 4px;margin:-2px 0px 0px;">
<p class="ABLink01" style="font-family:Arial;font-size:7px;color:#fff;text-transform:uppercase;letter-spacing:1px;line-height:10px;margin:8px 11px 5px;">
<a style="color:#fff;text-decoration:none;" href="https://www.asianfanfics.com/">Return To Story</a>
</p>
</div>
<div style="width:155px;float:left;border-left:1px solid #fff;border-right:1px solid #fff;border-bottom:1px solid #fff;border-radius:0px 0px 4px 4px;margin:-2px 0px 0px;">
<p class="ABLink02" style="font-family:Arial;font-size:7px;color:#fff;text-transform:uppercase;letter-spacing:1px;line-height:10px;margin:8px 11px 5px;">
<a style="color:#fff;text-decoration:none;" href="https://www.asianfanfics.com/">Extra Link 001</a>
</p>
</div>
<div style="width:155px;float:left;border-left:1px solid #fff;border-right:1px solid #fff;border-bottom:1px solid #fff;border-radius:0px 0px 4px 4px;margin:-2px 0px 0px;">
<p style="font-family:Arial;font-size:9px;color:#fff;text-transform:uppercase;letter-spacing:0.5px;line-height:10px;margin:8px 11px 5px;">
<a title="Theme Credit : NT" href="https://www.asianfanfics.com/story/view/528148/nt" style="color:#fff;text-decoration:none;">𝖓𝖙𝖍𝖊𝖒𝖊𝖘.</a>
</p>
</div>
</div>
<!-- END OF QUICK LINKS -->
</div>
<!-- /// END OF LEFT SIDE BAR /// -->
<!-- /// MAIN CONTENT /// -->
<div style="width:446px;float:left;margin:0px 0px 0px 25px;">
<!-- BIO INFO CHART -->
<div class="ABInfoChart01" style="width:446px;float:left;border:1px solid #fff;border-radius:10px 10px 0px 0px;overflow:hidden;">
<div style="background:#fff;width:446px;height:20px;float:left;">
<p style="font-family:Georgia;font-size:8px;color:#b8b4b9;font-weight:700;text-transform:uppercase;text-align:center;letter-spacing:1px;line-height:8px;margin:7px 0px;">
Biographical Information
</p>
</div>
<div style="width:446px;float:left;">
<p style="font-family:Arial;font-size:7px;color:#fff;text-transform:uppercase;letter-spacing:1px;line-height:10px;margin:0px;padding:7px 11px 6px;border-top:1px solid #fff;">
<b>Full Name:</b> Dimitri
</p>
<p style="font-family:Arial;font-size:7px;color:#fff;text-transform:uppercase;letter-spacing:1px;line-height:10px;margin:0px;padding:7px 11px 6px;border-top:1px solid #fff;">
<b>Other Names:</b><br />
• Sample Name — Birth name<br />
• Sample Name — Official Legal Name Change (1999)
</p>
<p style="font-family:Arial;font-size:7px;color:#fff;text-transform:uppercase;letter-spacing:1px;line-height:10px;margin:0px;padding:7px 11px 6px;border-top:1px solid #fff;">
<b>Nicknames:</b><br />
• Sample NickName — By Family, Predominantly Parents<br />
• Sample NickName — By Friends<br />
• Sample Nickname — By Name
</p>
<p style="font-family:Arial;font-size:7px;color:#fff;text-transform:uppercase;letter-spacing:1px;line-height:10px;margin:0px;padding:7px 11px 6px;border-top:1px solid #fff;">
<b>Birthday:</b> Month 00, 0000 (Age: 00)
</p>
<p style="font-family:Arial;font-size:7px;color:#fff;text-transform:uppercase;letter-spacing:1px;line-height:10px;margin:0px;padding:7px 11px 6px;border-top:1px solid #fff;">
<b>Nationality:</b> European
</p>
<p style="font-family:Arial;font-size:7px;color:#fff;text-transform:uppercase;letter-spacing:1px;line-height:10px;margin:0px;padding:7px 11px 6px;border-top:1px solid #fff;">
<b>Residence:</b><br />
• St. Petersburg, Russia (formerly)<br />
• Paris, France
</p>
<p style="font-family:Arial;font-size:7px;color:#fff;text-transform:uppercase;letter-spacing:1px;line-height:10px;margin:0px;padding:7px 11px 6px;border-top:1px solid #fff;">
<b>Languages:</b><br />
• English (Fluent)<br />
• Russian (Mother-Tongue, though rarely spoken)<br />
• French (Currently Main spoken language)
</p>
<p style="font-family:Arial;font-size:7px;color:#fff;text-transform:uppercase;letter-spacing:1px;line-height:10px;margin:0px;padding:7px 11px 6px;border-top:1px solid #fff;">
<b>Occupation:</b><br />
• Kitchen boy (formerly) — 1986 - 1991 <br />
• Con artist (formerly) — 1991 - 1997<br />
• Prince — 1997 to Current
</p>
<!-- **TO ADD MORE SECTIONS THROUGH CODE // COPY FROM HERE** -->
<p style="font-family:Arial;font-size:7px;color:#fff;text-transform:uppercase;letter-spacing:1px;line-height:10px;margin:0px;padding:7px 11px 6px;border-top:1px solid #fff;">
<b>[✱] Note:</b> To add more sections, while in Editor Mode simply Press 'Enter'.<br />• To add another item on the list, press 'Shift+Enter'!
</p>
<!-- **TO HERE AND PASTE DIRECTLY BELOW THIS LINE** -->
</div>
</div>
<!-- END OF BIO INFO CHART -->
<!-- SECTION 001 -->
<div style="width:446px;float:left;margin:25px 0px 0px;">
<p style="font-family:Times New Roman;font-size:12px;color:#fff;letter-spacing:1px;line-height:15px;margin:0px;">
<b style="font-family:Georgia;font-size:8px;color:#b8b4b9;text-transform:uppercase;background:#fff;border-radius:4px;padding:3px 4px;">Background</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Blandit libero volutpat sed cras ornare arcu dui. Tellus rutrum tellus pellentesque eu tincidunt tortor. Nibh praesent tristique magna sit amet purus gravida quis blandit. Quam lacus suspendisse faucibus interdum. Massa sed elementum tempus egestas sed sed risus. Amet justo donec enim diam. Lectus sit amet est placerat. Amet volutpat consequat mauris nunc congue nisi vitae suscipit. Dictumst vestibulum rhoncus est pellentesque.
</p>
<p style="font-family:Times New Roman;font-size:12px;color:#fff;letter-spacing:1px;line-height:15px;border-left:2px solid #fff;margin:15px 25px;padding-left:10px;">
<b style="font-family:Arial;font-size:8px;text-transform:uppercase;border-bottom:4px solid #a19fa2;">✱ Early Life : 1979 — 1991</b><br />Sit amet facilisis magna etiam. Orci eu lobortis elementum nibh tellus. Quisque id diam vel quam elementum pulvinar etiam. Amet cursus sit amet dictum sit. Tristique senectus et netus et malesuada fames ac turpis. Sed faucibus turpis in eu mi bibendum neque egestas. Odio pellentesque diam volutpat commodo. Odio euismod lacinia at quis risus. Porttitor massa id neque aliquam vestibulum morbi blandit cursus. Ridiculus mus mauris vitae ultricies leo integer malesuada nunc. A diam maecenas sed enim ut sem viverra aliquet.</p>
<p style="font-family:Times New Roman;font-size:12px;color:#fff;letter-spacing:1px;line-height:15px;margin:0px;">
Integer quis auctor elit sed vulputate mi sit amet mauris. Tortor pretium viverra suspendisse potenti nullam ac tortor vitae purus. Ornare quam viverra orci sagittis eu volutpat. Ipsum dolor sit amet consectetur adipiscing elit ut aliquam. Euismod quis viverra nibh cras pulvinar mattis nunc sed blandit. Velit dignissim sodales ut eu sem integer vitae. Urna neque viverra justo nec. Nunc congue nisi vitae suscipit. Augue ut lectus arcu bibendum at varius vel pharetra. Id diam maecenas ultricies mi eget mauris pharetra. Suspendisse ultrices gravida dictum fusce ut placerat orci. Purus non enim praesent elementum facilisis leo vel fringilla est. Parturient montes nascetur ridiculus mus mauris vitae. Molestie ac feugiat sed lectus vestibulum mattis. Molestie nunc non blandit massa enim nec dui. Turpis egestas pretium aenean pharetra. Sit amet cursus sit amet dictum sit amet.
</p>
<p style="font-family:Times New Roman;font-size:12px;color:#fff;letter-spacing:1px;line-height:15px;border-left:2px solid #fff;margin:15px 25px;padding-left:10px;">
<b style="font-family:Arial;font-size:8px;text-transform:uppercase;border-bottom:4px solid #a19fa2;">✱ Later Life : 1991 — 1997</b><br />Sed tempus urna et pharetra pharetra. Vel turpis nunc eget lorem dolor sed viverra. Dignissim suspendisse in est ante in nibh mauris cursus. Felis eget velit aliquet sagittis id. Vestibulum lorem sed risus ultricies tristique nulla aliquet. Nunc mi ipsum faucibus vitae. Ac placerat vestibulum lectus mauris. Scelerisque eleifend donec pretium vulputate sapien. Lacus viverra vitae congue eu consequat ac. At elementum eu facilisis sed odio morbi. Consectetur a erat nam at lectus urna. Ullamcorper velit sed ullamcorper morbi. Tortor at risus viverra adipiscing at in tellus. Magnis dis parturient montes nascetur. Ac placerat vestibulum lectus mauris. Sit amet tellus cras adipiscing enim. Risus at ultrices mi tempus. Convallis posuere morbi leo urna molestie at elementum eu. Ipsum a arcu cursus vitae congue mauris rhoncus. Donec adipiscing tristique risus nec feugiat in fermentum posuere.
</p>
<p style="font-family:Times New Roman;font-size:12px;color:#fff;letter-spacing:1px;line-height:15px;margin:0px;">
Et tortor consequat id porta nibh venenatis cras sed felis. Egestas sed tempus urna et pharetra. Mauris a diam maecenas sed. Eu non diam phasellus vestibulum lorem sed risus. Sed sed risus pretium quam vulputate dignissim suspendisse in est. Iaculis nunc sed augue lacus viverra vitae congue eu consequat. Aliquet bibendum enim facilisis gravida neque. Pharetra magna ac placerat vestibulum. In egestas erat imperdiet sed euismod. Ultricies mi eget mauris pharetra et ultrices. Consectetur adipiscing elit pellentesque habitant morbi. Sed risus pretium quam vulputate dignissim suspendisse in est ante. Rhoncus est pellentesque elit ullamcorper. Facilisis leo vel fringilla est ullamcorper eget nulla facilisi etiam. Commodo nulla facilisi nullam vehicula ipsum a arcu cursus. Odio aenean sed adipiscing diam donec adipiscing tristique. Nulla malesuada pellentesque elit eget gravida cum.
</p>
<p style="font-family:Arial;font-size:12px;color:#fff;text-align:center;line-height:10px;margin:25px 0px 0px;">
♡
</p>
</div>
<!-- END OF SECTION 001 -->
<!-- GENERAL INFO CHART -->
<div class="ABInfoChart02" style="width:446px;float:left;border:1px solid #fff;border-radius:10px 10px 0px 0px;overflow:hidden;margin:25px 0px 0px;">
<div style="background:#fff;width:446px;height:20px;float:left;">
<p style="font-family:Georgia;font-size:8px;color:#b8b4b9;font-weight:700;text-transform:uppercase;text-align:center;letter-spacing:1px;line-height:8px;margin:7px 0px;">
General Information
</p>
</div>
<div style="width:446px;float:left;">
<p style="font-family:Arial;font-size:7px;color:#fff;text-transform:uppercase;letter-spacing:1px;line-height:10px;margin:0px;padding:7px 11px 6px;border-top:1px solid #fff;">
<b>Gender &amp; Sexuality:</b> Male, Straight
</p>
<p style="font-family:Arial;font-size:7px;color:#fff;text-transform:uppercase;letter-spacing:1px;line-height:10px;margin:0px;padding:7px 11px 6px;border-top:1px solid #fff;">
<b>Personality:</b> Clever, kind, impatient, daring, industrious, mischievous, independent, thoughtful, respectful, idealistic
</p>
<p style="font-family:Arial;font-size:7px;color:#fff;text-transform:uppercase;letter-spacing:1px;line-height:10px;margin:0px;padding:7px 11px 6px;border-top:1px solid #fff;">
<b>Likes:</b><br />
• Money<br />
• Anastasia<br />
• dancing<br />
• getting things his way
</p>
<p style="font-family:Arial;font-size:7px;color:#fff;text-transform:uppercase;letter-spacing:1px;line-height:10px;margin:0px;padding:7px 11px 6px;border-top:1px solid #fff;">
<b>Dislikes:</b><br />
• Being outsmarted<br />
• danger<br />
• trains<br />
• dogs (formerly)
</p>
<!-- **TO ADD MORE SECTIONS THROUGH CODE // COPY FROM HERE** -->
<p style="font-family:Arial;font-size:7px;color:#fff;text-transform:uppercase;letter-spacing:1px;line-height:10px;margin:0px;padding:7px 11px 6px;border-top:1px solid #fff;">
<b>[✱] Note:</b> To add more sections, while in Editor Mode simply Press 'Enter'.<br />• To add another item on the list, press 'Shift+Enter'!
</p>
<!-- **TO HERE AND PASTE DIRECTLY BELOW THIS LINE** -->
</div>
<!-- GALLERY / COLOUR PALETTE SECTION -->
<div style="width:446px;float:left;border-top:1px solid #fff;">
<div style="width:305px;height:80px;float:left;margin:35px 69px;">
<div style="background:#fff;width:70px;height:80px;float:left;border-radius:4px;margin:0px 4px 0px 0px;">
<p style="font-family:Arial;font-size:7px;color:#000;text-transform:uppercase;letter-spacing:0.5px;line-height:10px;margin:68px 8px 0px;">
#736357
</p>
</div>
<div style="background:#fff;width:70px;height:80px;float:left;border-radius:4px;margin:0px 4px;">
<p style="font-family:Arial;font-size:7px;color:#000;text-transform:uppercase;letter-spacing:0.5px;line-height:10px;margin:68px 8px 0px;">
#707070
</p>
</div>
<div style="background:#fff;width:70px;height:80px;float:left;border-radius:4px;margin:0px 4px;">
<p style="font-family:Arial;font-size:7px;color:#000;text-transform:uppercase;letter-spacing:0.5px;line-height:10px;margin:68px 8px 0px;">
#464646
</p>
</div>
<div style="background:#fff;width:70px;height:80px;float:left;border-radius:4px;margin:0px 0px 0px 4px;">
<p style="font-family:Arial;font-size:7px;color:#000;text-transform:uppercase;letter-spacing:0.5px;line-height:10px;margin:68px 8px 0px;">
#CCCCCC
</p>
</div>
<div style="width:294px;height:60px;float:left;margin:-75px 5px 0px;overflow:hidden;">
<div style="width:311px;height:60px;float:left;overflow:auto;">
<div style="width:294px;height:60px;float:left;">
<div style="width:60px;height:60px;float:left;margin-right:18px;">
<img class="ABGalleryColour01" src="https://singlecolorimage.com/get/736357/60x60" />
</div>
<div style="width:60px;height:60px;float:left;margin-right:18px;">
<img class="ABGalleryColour02" src="https://singlecolorimage.com/get/707070/60x60" />
</div>
<div style="width:60px;height:60px;float:left;margin-right:18px;">
<img class="ABGalleryColour03" src="https://singlecolorimage.com/get/464646/60x60" />
</div>
<div style="width:60px;height:60px;float:left;">
<img class="ABGalleryColour04" src="https://singlecolorimage.com/get/CCCCCC/60x60" />
</div>
</div>
<div style="width:294px;height:60px;float:left;">
<div style="width:60px;height:60px;float:left;margin-right:18px;">
<img class="ABGalleryImg01" src="https://i.imgur.com/UsmVmWK.png" style="width:60px;" />
</div>
<div style="width:60px;height:60px;float:left;margin-right:18px;">
<img class="ABGalleryImg02" src="https://i.imgur.com/2eLjYqM.png" style="width:60px;" />
</div>
<div style="width:60px;height:60px;float:left;margin-right:18px;">
<img class="ABGalleryImg03" src="https://i.imgur.com/e5ugQI7.png" style="width:60px;" />
</div>
<div style="width:60px;height:60px;float:left;">
<img class="ABGalleryImg04" src="https://i.imgur.com/d5R3Y3g.png" style="width:60px;" />
</div>
</div>
</div>
</div>
<div style="width:294px;height:10px;float:left;margin:18px 0px 0px;">
<p style="font-family:Arial;font-size:7px;color:#fff;text-align:right;text-transform:uppercase;letter-spacing:0.5px;line-height:10px;margin:0px -75px 0px 0px;">
Scroll Down to View Gallery ▼
</p>
</div>
</div>
</div>
<!-- END OF GALLERY / COLOUR PALETTE SECTION -->
</div>
<!-- END OF BIO INFO CHART -->
<!-- SECTION 002 -->
<div style="width:446px;float:left;margin:25px 0px 0px;">
<p style="font-family:Times New Roman;font-size:12px;color:#fff;letter-spacing:1px;line-height:15px;margin:0px;">
<b style="font-family:Georgia;font-size:8px;color:#b8b4b9;text-transform:uppercase;background:#fff;border-radius:4px;padding:3px 4px;">Physical Description</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Blandit libero volutpat sed cras ornare arcu dui. Tellus rutrum tellus pellentesque eu tincidunt tortor. Nibh praesent tristique magna sit amet purus gravida quis blandit. Quam lacus suspendisse faucibus interdum. Massa sed elementum tempus egestas sed sed risus. Amet justo donec enim diam. Lectus sit amet est placerat. Amet volutpat consequat mauris nunc congue nisi vitae suscipit. Dictumst vestibulum rhoncus est pellentesque.
</p>
<p style="font-family:Arial;font-size:12px;color:#fff;text-align:center;line-height:10px;margin:25px 0px 0px;">
♡
</p>
</div>
<!-- END OF SECTION 002 -->
<!-- SECTION 003 -->
<div style="width:446px;float:left;margin:25px 0px 0px;">
<p style="font-family:Times New Roman;font-size:12px;color:#fff;letter-spacing:1px;line-height:15px;margin:0px;">
<b style="font-family:Georgia;font-size:8px;color:#b8b4b9;text-transform:uppercase;background:#fff;border-radius:4px;padding:3px 4px;">Personality</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Blandit libero volutpat sed cras ornare arcu dui. Tellus rutrum tellus pellentesque eu tincidunt tortor. Nibh praesent tristique magna sit amet purus gravida quis blandit. Quam lacus suspendisse faucibus interdum. Massa sed elementum tempus egestas sed sed risus. Amet justo donec enim diam. Lectus sit amet est placerat. Amet volutpat consequat mauris nunc congue nisi vitae suscipit. Dictumst vestibulum rhoncus est pellentesque.
</p>
<p style="font-family:Arial;font-size:12px;color:#fff;text-align:center;line-height:10px;margin:25px 0px 0px;">
♡
</p>
</div>
<!-- END OF SECTION 003 -->
<!-- RELATIONSHIP INFO CHART -->
<div class="ABInfoChart03" style="width:446px;float:left;border:1px solid #fff;border-radius:10px 10px 0px 0px;overflow:hidden;margin:25px 0px 0px;">
<div style="background:#fff;width:446px;height:20px;float:left;">
<p style="font-family:Georgia;font-size:8px;color:#b8b4b9;font-weight:700;text-transform:uppercase;text-align:center;letter-spacing:1px;line-height:8px;margin:7px 0px;">
Relationships
</p>
</div>
<div style="width:446px;float:left;">
<p style="font-family:Arial;font-size:7px;color:#fff;text-transform:uppercase;letter-spacing:1px;line-height:10px;margin:0px;padding:7px 11px 6px;border-top:1px solid #fff;">
<b>Relatives:</b><br />
• Anastasia — wife<br />
• Marie Feodorovna — grandmother-in-law<br />
• Nicholas II — father-in-law (deceased)<br />
• Alexandra Feodorovna — mother-in-law (deceased)<br />
• Olga, Tatiana and Maria — sisters-in-law (deceased)<br />
• Alexei — brother-in-law (deceased)
</p>
<p style="font-family:Arial;font-size:7px;color:#fff;text-transform:uppercase;letter-spacing:1px;line-height:10px;margin:0px;padding:7px 11px 6px;border-top:1px solid #fff;">
<b>Pets:</b> Pooka (Dog)
</p>
<p style="font-family:Arial;font-size:7px;color:#fff;text-transform:uppercase;letter-spacing:1px;line-height:10px;margin:0px;padding:7px 11px 6px;border-top:1px solid #fff;">
<b>Allies:</b><br />
• Anastasia<br />
• Vladimir<br />
• Pooka<br />
• Sophie<br />
• Marie Feodorovna<br />
• Bartok
</p>
<p style="font-family:Arial;font-size:7px;color:#fff;text-transform:uppercase;letter-spacing:1px;line-height:10px;margin:0px;padding:7px 11px 6px;border-top:1px solid #fff;">
<b>Enemies:</b><br />
• Grigori Rasputin<br />
• Ludmilla (though this is not seen)<br />
• Black Pegasus<br />
• Demons
</p>
<!-- **TO ADD MORE SECTIONS THROUGH CODE // COPY FROM HERE** -->
<p style="font-family:Arial;font-size:7px;color:#fff;text-transform:uppercase;letter-spacing:1px;line-height:10px;margin:0px;padding:7px 11px 6px;border-top:1px solid #fff;">
<b>[✱] Note:</b> To add more sections, while in Editor Mode simply Press 'Enter'.<br />• To add another item on the list, press 'Shift+Enter'!
</p>
<!-- **TO HERE AND PASTE DIRECTLY BELOW THIS LINE** -->
</div>
</div>
<!-- END OF RELATIONSHIP INFO CHART -->
<!-- SECTION 004 // RELATIONSHIP 001 -->
<div style="width:446px;float:left;margin:25px 0px 0px;">
<div style="background:#fff;width:70px;height:70px;float:left;border-radius:4px;margin:0px 8px 0px 0px;">
<div style="width:60px;height:60px;float:left;margin:5px;">
<img src="https://i.imgur.com/0pRgneT.png" style="width:60px;" />
</div>
</div>
<p style="font-family:Times New Roman;font-size:12px;color:#fff;letter-spacing:1px;line-height:15px;margin:0px;">
<b style="font-family:Georgia;font-size:8px;color:#b8b4b9;text-transform:uppercase;background:#fff;border-radius:4px;padding:3px 4px;">Anastasia</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Blandit libero volutpat sed cras ornare arcu dui. Tellus rutrum tellus pellentesque eu tincidunt tortor. Nibh praesent tristique magna sit amet purus gravida quis blandit. Quam lacus suspendisse faucibus interdum. Massa sed elementum tempus egestas sed sed risus. Amet justo donec enim diam. Lectus sit amet est placerat. Amet volutpat consequat mauris nunc congue nisi vitae suscipit. Dictumst vestibulum rhoncus est pellentesque.
</p>
<p style="font-family:Arial;font-size:12px;color:#fff;text-align:center;line-height:10px;margin:25px 0px 0px;">
♡
</p>
</div>
<!-- END OF SECTION 004 -->
<!-- SECTION 005 // RELATIONSHIP 002 -->
<div style="width:446px;float:left;margin:25px 0px 0px;">
<div style="background:#fff;width:70px;height:70px;float:left;border-radius:4px;margin:0px 8px 0px 0px;">
<div style="width:60px;height:60px;float:left;margin:5px;">
<img src="https://i.imgur.com/a1tkUf0.png" style="width:60px;" />
</div>
</div>
<p style="font-family:Times New Roman;font-size:12px;color:#fff;letter-spacing:1px;line-height:15px;margin:0px;">
<b style="font-family:Georgia;font-size:8px;color:#b8b4b9;text-transform:uppercase;background:#fff;border-radius:4px;padding:3px 4px;">Vladimir</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Blandit libero volutpat sed cras ornare arcu dui. Tellus rutrum tellus pellentesque eu tincidunt tortor. Nibh praesent tristique magna sit amet purus gravida quis blandit. Quam lacus suspendisse faucibus interdum. Massa sed elementum tempus egestas sed sed risus. Amet justo donec enim diam. Lectus sit amet est placerat. Amet volutpat consequat mauris nunc congue nisi vitae suscipit. Dictumst vestibulum rhoncus est pellentesque.
</p>
<p style="font-family:Arial;font-size:12px;color:#fff;text-align:center;line-height:10px;margin:25px 0px 0px;">
♡
</p>
</div>
<!-- END OF SECTION 005 -->
<!-- SECTION 006 // RELATIONSHIP 003 // TO ADD MORE SECTIONS COPY FROM HERE TO END OF *SECTION 006* -->
<div style="width:446px;float:left;margin:25px 0px 0px;">
<div style="background:#fff;width:70px;height:70px;float:left;border-radius:4px;margin:0px 8px 0px 0px;">
<div style="width:60px;height:60px;float:left;margin:5px;">
<img src="https://i.imgur.com/siTzJNQ.png" style="width:60px;" />
</div>
</div>
<p style="font-family:Times New Roman;font-size:12px;color:#fff;letter-spacing:1px;line-height:15px;margin:0px;">
<b style="font-family:Georgia;font-size:8px;color:#b8b4b9;text-transform:uppercase;background:#fff;border-radius:4px;padding:3px 4px;">Pooka</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Blandit libero volutpat sed cras ornare arcu dui. Tellus rutrum tellus pellentesque eu tincidunt tortor. Nibh praesent tristique magna sit amet purus gravida quis blandit. Quam lacus suspendisse faucibus interdum. Massa sed elementum tempus egestas sed sed risus. Amet justo donec enim diam. Lectus sit amet est placerat. Amet volutpat consequat mauris nunc congue nisi vitae suscipit. Dictumst vestibulum rhoncus est pellentesque.
</p>
<p style="font-family:Arial;font-size:12px;color:#fff;text-align:center;line-height:10px;margin:25px 0px 0px;">
♡
</p>
</div>
<!-- END OF SECTION 006 // ONCE COPIED, PASTE DIRECTLY BELOW THIS LINE -->
<!-- MISCELLANOUS INFO CHART -->
<div class="ABInfoChart04" style="width:446px;float:left;border:1px solid #fff;border-radius:10px 10px 0px 0px;overflow:hidden;margin:25px 0px 0px;">
<div style="background:#fff;width:446px;height:20px;float:left;">
<p style="font-family:Georgia;font-size:8px;color:#b8b4b9;font-weight:700;text-transform:uppercase;text-align:center;letter-spacing:1px;line-height:8px;margin:7px 0px;">
Miscellanous Information
</p>
</div>
<div style="width:446px;float:left;">
<p style="font-family:Arial;font-size:7px;color:#fff;text-transform:uppercase;letter-spacing:1px;line-height:10px;margin:0px;padding:7px 11px 6px;border-top:1px solid #fff;">
<b>Trivia:</b><br />
• Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
• Velit egestas dui id ornare arcu.<br />
• Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices.<br />
• Sed euismod nisi porta lorem mollis aliquam ut porttitor leo.<br />
• Tincidunt vitae semper quis lectus nulla at.<br />
• Quis commodo odio aenean sed adipiscing.<br />
• Felis imperdiet proin fermentum leo vel.<br />
• Tincidunt dui ut ornare lectus sit amet est placerat in.<br />
• Imperdiet massa tincidunt nunc pulvinar sapien et.<br />
• Risus viverra adipiscing at in tellus integer feugiat scelerisque.<br />
</p>
<p style="font-family:Arial;font-size:7px;color:#fff;text-transform:uppercase;letter-spacing:1px;line-height:10px;margin:0px;padding:7px 11px 6px;border-top:1px solid #fff;">
<b>Quotes:</b><br />
• "What do they teach you in those orphanages?"<br />
"It was more a change of heart."<br />
"I think you broke my nose!"<br />
"You could say as stubborn as you are."<br />
"It was a place I once lived. End of story."<br />
"What is it with you and homes?"<br />
"I hate trains. Remind me to never get on a train again!"<br />
"Just leave the dog."<br />
"If we live through this, remind me to thank you."<br />
"Princesses don't marry kitchen boys."<br />
"Oh... they're waiting for you."<br />
"A dog. Cute."<br />
"It's okay. You're safe now."<br />
"No more pretending, you'll be gone and that's the end."<br />
"We're going to go through with this as if nothing has changed."<br />
"Don't worry, I've got this all under control. Now, walk a little slower...3....2...1..."<br />
"I accept your gratitude, but I don't want the money."<br />
"That'll work."<br />
"Everything will be fine."<br />
"I'll be quiet if you will!"<br />
"She can thaw out in Paris."<br />
"It's possible that she's been just as lost and alone as you."<br />
"Yeah, I know. All men are babies."
</p>
<!-- **TO ADD MORE SECTIONS THROUGH CODE // COPY FROM HERE** -->
<p style="font-family:Arial;font-size:7px;color:#fff;text-transform:uppercase;letter-spacing:1px;line-height:10px;margin:0px;padding:7px 11px 6px;border-top:1px solid #fff;">
<b>[✱] Note:</b> To add more sections, while in Editor Mode simply Press 'Enter'.<br />• To add another item on the list, press 'Shift+Enter'!
</p>
<!-- **TO HERE AND PASTE DIRECTLY BELOW THIS LINE** -->
</div>
</div>
<!-- END OF MISCELLANOUS INFO CHART -->
</div>
<!-- /// END OF MAIN CONTENT /// -->
</div>
</div>
<!-- /// END OF CONTENT /// -->
</div>
Raw
06. At The Beginning : Story Page
<!-- /// READ ME ///
** PAGE IS MOBILE FRIENDLY AND WILL ADJUST TO WIDTH OF PAGE **
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 : Gray X 11 Gray (#b8b4b9)
• White (#fff)
• Black (#000)
[ TEXT ]
[!] NOTE : Not all text sections have been labelled as several (Literally you can add a million) sections can be added and can just further cause confusion if duplicated too many times!
• Chapter Title & Subtitle : ABTitle
• Story : ABContent
• Author's Note : ABAuthorsNote
[ 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="max-width:728px;margin:auto;">
<!-- /// CONTENT /// -->
<div style="background:#b8b4b9;max-width:728px;float:left;padding:50px;">
<div style="background:#fff;max-width:678;float:left;border-radius:10px;padding:25px;">
<div style="max-width:578px;float:left;margin:">
<div style="width:70px;height:37px;float:left;">
<p style="font-family:Arial;font-size:50px;color:#b8b4b9;letter-spacing:-2px;font-weight:900;text-transform:uppercase;line-height:35px;margin:0px;">
01
</p>
</div>
<p class="ABTitle" style="font-family:Arial;font-size:7px;color:#000;text-transform:uppercase;letter-spacing:1px;line-height:14px;margin:14px 0px 0px;">
<b style="font-family:Georgia;font-size:8px;color:#fff;background:#b8b4b9;border-radius:4px;padding:3px 4px;">Chapter Name Sample</b><br />
Chapter One — "I think you broke my nose!"
</p>
<p class="ABContent" style="font-family:Times New Roman;font-size:12px;color:#000;letter-spacing:1px;line-height:15px;margin:25px 0px 0px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Blandit libero volutpat sed cras ornare arcu dui. Tellus rutrum tellus pellentesque eu tincidunt tortor. Nibh praesent tristique magna sit amet purus gravida quis blandit. Quam lacus suspendisse faucibus interdum. Massa sed elementum tempus egestas sed sed risus. Amet justo donec enim diam. Lectus sit amet est placerat. Amet volutpat consequat mauris nunc congue nisi vitae suscipit. Dictumst vestibulum rhoncus est pellentesque. Nunc faucibus a pellentesque sit amet porttitor eget dolor. Sollicitudin tempor id eu nisl nunc.
<br /><br />
Sit amet facilisis magna etiam. Orci eu lobortis elementum nibh tellus. Quisque id diam vel quam elementum pulvinar etiam. Amet cursus sit amet dictum sit. Tristique senectus et netus et malesuada fames ac turpis. Sed faucibus turpis in eu mi bibendum neque egestas. Odio pellentesque diam volutpat commodo. Odio euismod lacinia at quis risus. Porttitor massa id neque aliquam vestibulum morbi blandit cursus. Ridiculus mus mauris vitae ultricies leo integer malesuada nunc. A diam maecenas sed enim ut sem viverra aliquet.
<br /><br />
Integer quis auctor elit sed vulputate mi sit amet mauris. Tortor pretium viverra suspendisse potenti nullam ac tortor vitae purus. Ornare quam viverra orci sagittis eu volutpat. Ipsum dolor sit amet consectetur adipiscing elit ut aliquam. Euismod quis viverra nibh cras pulvinar mattis nunc sed blandit. Velit dignissim sodales ut eu sem integer vitae. Urna neque viverra justo nec. Nunc congue nisi vitae suscipit. Augue ut lectus arcu bibendum at varius vel pharetra. Id diam maecenas ultricies mi eget mauris pharetra. Suspendisse ultrices gravida dictum fusce ut placerat orci. Purus non enim praesent elementum facilisis leo vel fringilla est. Parturient montes nascetur ridiculus mus mauris vitae. Molestie ac feugiat sed lectus vestibulum mattis. Molestie nunc non blandit massa enim nec dui. Turpis egestas pretium aenean pharetra. Sit amet cursus sit amet dictum sit amet.
<br /><br />
Sed tempus urna et pharetra pharetra. Vel turpis nunc eget lorem dolor sed viverra. Dignissim suspendisse in est ante in nibh mauris cursus. Felis eget velit aliquet sagittis id. Vestibulum lorem sed risus ultricies tristique nulla aliquet. Nunc mi ipsum faucibus vitae. Ac placerat vestibulum lectus mauris. Scelerisque eleifend donec pretium vulputate sapien. Lacus viverra vitae congue eu consequat ac. At elementum eu facilisis sed odio morbi. Consectetur a erat nam at lectus urna. Ullamcorper velit sed ullamcorper morbi. Tortor at risus viverra adipiscing at in tellus. Magnis dis parturient montes nascetur. Ac placerat vestibulum lectus mauris. Sit amet tellus cras adipiscing enim. Risus at ultrices mi tempus. Convallis posuere morbi leo urna molestie at elementum eu. Ipsum a arcu cursus vitae congue mauris rhoncus. Donec adipiscing tristique risus nec feugiat in fermentum posuere.
<br /><br />
Et tortor consequat id porta nibh venenatis cras sed felis. Egestas sed tempus urna et pharetra. Mauris a diam maecenas sed. Eu non diam phasellus vestibulum lorem sed risus. Sed sed risus pretium quam vulputate dignissim suspendisse in est. Iaculis nunc sed augue lacus viverra vitae congue eu consequat. Aliquet bibendum enim facilisis gravida neque. Pharetra magna ac placerat vestibulum. In egestas erat imperdiet sed euismod. Ultricies mi eget mauris pharetra et ultrices. Consectetur adipiscing elit pellentesque habitant morbi. Sed risus pretium quam vulputate dignissim suspendisse in est ante. Rhoncus est pellentesque elit ullamcorper. Facilisis leo vel fringilla est ullamcorper eget nulla facilisi etiam. Commodo nulla facilisi nullam vehicula ipsum a arcu cursus. Odio aenean sed adipiscing diam donec adipiscing tristique. Nulla malesuada pellentesque elit eget gravida cum.
</p>
<p style="font-family:Arial;font-size:12px;color:#b8b4b9;text-align:center;line-height:10px;letter-spacing:7px;margin:25px 0px 0px;">
♡♡♡
</p>
<div style="width:100%;border:1px solid #b8b4b9;border-radius:10px;float:left;margin:25px 0px 0px;">
<p class="ABAuthorsNote" style="font-family:Arial;font-size:7px;color:#000;text-transform:uppercase;letter-spacing:0.5px;line-height:10px;margin:11px;">
<b style="font-family:Georgia;font-size:8px;color:#b8b4b9;letter-spacing:1px;line-height:14px;">Author's Note</b><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Blandit libero volutpat sed cras ornare arcu dui. Tellus rutrum tellus pellentesque eu tincidunt tortor. Nibh praesent tristique magna sit amet purus gravida quis blandit. Quam lacus suspendisse faucibus interdum.
</p>
</div>
</div>
</div>
</div>
<!-- /// END OF CONTENT /// -->
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment