Skip to content

Instantly share code, notes, and snippets.

@Nefelibatax
Created July 30, 2023 21:53
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/271113b6550244923d052b5ac2a9fb63 to your computer and use it in GitHub Desktop.
Save Nefelibatax/271113b6550244923d052b5ac2a9fb63 to your computer and use it in GitHub Desktop.
✱ Somewhere Only We Know : Profile Set
<!-- /// 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 ]
• Primary Colour: White (#fff)
[!] This can and will change both Borders on Divs, Icon colours and Text
— Colour Palette:
• Palomino Pony (#817872)
• Pastel Cool Pink (#e5cbd2)
• Fig Preserves (#aa9aa1)
• Sophisticated Plum (#5e5254)
[ 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 : SOWKImgBG (Max-Dimensions:728×665)
• S/O Image : SOWKRSImg (100×100)
[!] Includes Icons from https://icons8.com/ - To change the colours simply find the key word below (Using CTRL+F/CMD+F) and then change the hex code:
Example: https://img.icons8.com/material-outlined/9/ffffff/portfolio.png (Change 'ffffff')
https://img.icons8.com/material-outlined/9/000000/portfolio.png - For Black!
• Date of Birth : calendar--v1.png
• Gender : gender-equality.png
• Relationship Status/R/S Spotlight : like--v1.png
• Ethnicity : earth-planet--v2.png
• Occupation : portfolio.png
[ TEXT ]
• Title : SOWKTitle
• Quote/Sub Title : SOWKQuote
• Name : SOWKName
• About : SOWKAbout
• Personality : SOWKExtra01
• Appearance : SOWKExtra02
• Disclaimer (OOC) : SOWKDisclaimer
[ DIVS ]
• 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.
[!] Select Divs will not be responsive to maintain design. Feel free to adjust if needed.
• Sections : SOWKS1, SOWKS2, SOWKS3, SOWKS4, SOWKS5, SOWKS6
Sections can be rearranged, just copy and paste a section to move it around to your desired order.
• Relationship Information : SOWKRSB (3 Should appear, unless more are added)
• Adjustable Bars : SOWKS (4 Should appear)
• Adjustable Colour Palette : SOWKColour (4 Should appear)
[ 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;font-family:Georgia;color:#fff;font-size:8px;">
<!-- /// BACKGROUND IMAGE /// -->
<div style="width:728px;height:665px;float:left;">
<img class="SOWKImgBG" src="https://i.imgur.com/TI8QZCb.png" />
</div>
<!-- /// END OF BACKGROUND IMAGE /// -->
<!-- [[ SCROLLABLE CONTENT ]] -->
<div style="width:728px;height:665px;margin-top:-665px;float:left;overflow:hidden;">
<div style="width:745px;height:682px;float:left;overflow:scroll;">
<div style="width:468px;margin:0 130px 80px;float:left;">
<!-- /// TITLE /// -->
<div style="margin:320px 0 0 50%;float:left;">
<div style="margin:0 0 0 -50%;float:left;">
<p class="SOWKTitle" style="font-size:48px;text-transform:lowercase;font-weight:bold;letter-spacing:-4px;line-height:42px;margin:0;">
Minji
</p>
<p class="SOWKQuote" style="font-size:7px;text-transform:uppercase;letter-spacing:1px;line-height:8px;margin:-3% 0 0;">
Oh simple thing
</p>
</div>
</div>
<!-- /// END OF TITLE /// -->
<div style="width:100%;margin:145px 0 0;float:left;">
<p style="font-family:Calibri;text-transform:uppercase;letter-spacing:1px;line-height:8px;text-align:center;font-style:italic;margin:0 0 2.5%;">
Start Here
</p>
<div style="height:130px;width:0px;border-left:1px dotted #fff;margin: 2.5% auto;">
</div>
<!-- /// SECTION ONE : NAME & DETAILS /// -->
<div class="SOWKS1" style="float:left;margin:2.5% 0;">
<!-- ** NAME ** -->
<div style="width:95px;height:55px;border:1px solid #fff;float:left;border-radius:10px;font-size:8px;text-transform:uppercase;letter-spacing:1px;line-height:10px;">
<p class="SOWKName" style="margin:19px 14px;">
<b>Kim Min-Ji</b><br />
김민지
</p>
</div>
<!-- ** END OF NAME ** -->
<!-- ** ICONS & MINI TRIVIA ** -->
<div style="width:344px;height:54px;border:1px solid #fff;float:left;border-radius:10px;margin-left:25px;">
<table style="width:344px;height:54px;background:transparent;border:0px;margin:0;padding:0;font-family:Calibri;text-align:center;text-transform:uppercase;letter-spacing:1px;line-height:8px;">
<tr style="padding:0;">
<!-- TRIVIA 01 -->
<td style="padding:0;">
<img src="https://img.icons8.com/material-outlined/9/ffffff/calendar--v1.png" />
<p class="SOWKDob" style="margin:0;">
5-7-2004
</p>
</td>
<!-- END OF TRIVIA 01 -->
<!-- TRIVIA 02 -->
<td style="padding:0;">
<img src="https://img.icons8.com/material-outlined/9/ffffff/gender-equality.png" />
<p class="SOWKGender" style="margin:0;">
Female
</p>
</td>
<!-- END OF TRIVIA 02 -->
<!-- TRIVIA 03 -->
<td style="padding:0;">
<img src="https://img.icons8.com/material-outlined/9/ffffff/like--v1.png" />
<p class="SOWKRStatus" style="margin:0;">
Single
</p>
</td>
<!-- END OF TRIVIA 03 -->
<!-- TRIVIA 04 -->
<td style="padding:0;">
<img src="https://img.icons8.com/material-outlined/9/ffffff/earth-planet--v2.png" />
<p class="SOWKEthnicity" style="margin:0;">
Korean
</p>
</td>
<!-- END OF TRIVIA 04 -->
<!-- TRIVIA 05 // TO ADD MORE, COPY FROM HERE, YOU CAN ALSO DELETE TRIVIA SECTIONS DELETE FROM HERE -->
<td style="padding:0;">
<img src="https://img.icons8.com/material-outlined/9/ffffff/portfolio.png" />
<p class="SOWKOccupation" style="margin:0;">
Ballet Prof.
</p>
</td>
<!-- END OF TRIVIA 05 // TO HERE AND DELETE/PASTE BELOW OR BETWEEN THE TRIVIA SECTIONS ABOVE -->
</tr>
</table>
</div>
<!-- ** END OF ICONS & MINI TRIVIA ** -->
</div>
<!-- /// END OF SECTION ONE /// -->
<!-- /// SECTION TWO : ABOUT ME /// -->
<div class="SOWKS2" style="float:left;width:468px;margin:2.5% 0;font-size:10px;line-height:12px;letter-spacing:0.5px;">
<p class="SOWKAbout" style="margin:2.5% 25px;">
<span style="text-transform:uppercase;font-size:8px;font-weight:bold;letter-spacing:1px;">Who Am I?</span>
<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<!-- /// END OF SECTION TWO /// -->
<!-- /// SECTION THREE : RELATIONSHIPS /// -->
<div class="SOWKS3" style="float:left;width:468px;margin:2.5% 0;">
<!-- ** FEATURED R/S ** -->
<div style="width:120px;border:1px solid #fff;float:left;border-radius:10px;margin-right:25px;">
<div style="width:20px;height:20px;border:1px solid #fff;float:left;border-radius:6px 0 0 6px;margin:5px 0 0 -22px;text-align:center;">
<img src="https://img.icons8.com/material-outlined/9/ffffff/like--v1.png" style="margin-top:5px;" />
</div>
<!-- R/S IMAGE -->
<div style="width:100px;height:100px;overflow:hidden;float:left;border-radius:10px;margin:10px 10px 15px;">
<img class="SOWKRSImg" src="https://i.imgur.com/3FQI1yv.png" style="width:100px;height:100px;" />
</div>
<!-- END OF R/S IMAGE -->
<p style="font-size:10px;line-height:12px;text-align:center;margin:0 10px 10px;">
<span style="text-transform:uppercase;letter-spacing:1px;font-weight:bold;">Ballet</span>
<br />
<br />
<i>I’m getting old and I need something to rely on....</i>
</p>
</div>
<!-- ** END OF FEATURES R/S ** -->
<!-- ** R/S LIST ** -->
<div style="max-width:321px;float:left;margin-top:-15px;">
<!-- SECTION 01 : R/S BLOCK -->
<div class="SOWKRSB" style="float:left;margin-top:15px;">
<div style="width:23px;height:23px;border:1px solid #fff;float:left;border-radius:6px;line-height:8px;letter-spacing:1px;text-transform:uppercase;font-style:italic;text-align:center;">
<p style="margin:8px 0 0;">
H
</p>
</div>
<div style="float:left;heigh:25px;margin-left:15px;line-height:8px;letter-spacing:1px;text-transform:uppercase;">
<p style="margin:9px 0 0;">
<b>Hanni Pham</b> — <i>Nickname Here</i>
</p>
</div>
<div style="float:left;width:321px;font-size:10px;line-height:12px;letter-spacing:0.5px;">
<p style="margin:10px 0 0;">Augue lacus viverra vitae congue eu consequat ac felis. Malesuada fames ac turpis egestas sed. Facilisi etiam dignissim diam quis. </p>
</div>
</div>
<!-- END OF SECTION 01 : R/S BLOCK -->
<!-- SECTION 02 : R/S BLOCK -->
<div class="SOWKRSB" style="float:left;margin-top:15px;">
<div style="width:23px;height:23px;border:1px solid #fff;float:left;border-radius:6px;line-height:8px;letter-spacing:1px;text-transform:uppercase;font-style:italic;text-align:center;">
<p style="margin:8px 0 0;">
S
</p>
</div>
<div style="float:left;heigh:25px;margin-left:15px;line-height:8px;letter-spacing:1px;text-transform:uppercase;">
<p style="margin:9px 0 0;">
<b>Sample Name</b> — <i>Nickname Here</i>
</p>
</div>
<div style="float:left;width:321px;font-size:10px;line-height:12px;letter-spacing:0.5px;">
<p style="margin:10px 0 0;">Nim lobortis scelerisque fermentum dui. Lacus vel facilisis volutpat est velit egestas dui id.</p>
</div>
</div>
<!-- END OF SECTION 02 : R/S BLOCK -->
<!-- SECTION 03 : R/S BLOCK - TO ADD MORE BLOCKS, COPY FROM HERE -->
<div class="SOWKRSB" style="float:left;margin-top:15px;">
<div style="width:23px;height:23px;border:1px solid #fff;float:left;border-radius:6px;line-height:8px;letter-spacing:1px;text-transform:uppercase;font-style:italic;text-align:center;">
<p style="margin:8px 0 0;">
S
</p>
</div>
<div style="float:left;heigh:25px;margin-left:15px;line-height:8px;letter-spacing:1px;text-transform:uppercase;">
<p style="margin:9px 0 0;">
<b>Sample Name</b> — <i>Nickname Here</i>
</p>
</div>
<div style="float:left;width:321px;font-size:10px;line-height:12px;letter-spacing:0.5px;">
<p style="margin:10px 0 0;">Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.</p>
</div>
</div>
<!-- END OF SECTION 03 : R/S BLOCK - TO HERE, AND PASTE BELOW -->
</div>
<!-- ** END OF R/S LIST ** -->
</div>
<!-- /// END OF SECTION THREE /// -->
<!-- /// SECTION FOUR: CHARACTER DETAILS /// -->
<div class="SOWKS4" style="float:left;width:468px;margin:2.5% 0;">
<!-- ** STATS : MAX IS 4 STATS // TO CHANGE STATS CHANGE WIDTH OF DIV 'HBAR' TO YOUR DESIRED PERCENT ** -->
<div style="width:195px;height:63px;border:1px solid #fff;float:left;border-radius:10px;margin-right:24px;">
<!-- BAR 01 : STATS -->
<div class="SOWKS" style="float:left;max-width:65px;margin:15px 20px 7px;">
<div style="width:63px;height:3px;border:1px solid #fff;">
<div style="background:#fff;width:85%;height:1px;margin:1px;">
</div>
</div>
<p style="font-family:Calibri;text-transform:uppercase;letter-spacing:0.5px;line-height:8px;margin:1px 0 0;">
Mood — 85%
</p>
</div>
<!-- END OF BAR 01 : STATS -->
<!-- BAR 02 : STATS -->
<div class="SOWKS" style="float:left;max-width:65px;margin:15px 5px 7px;">
<div style="width:63px;height:3px;border:1px solid #fff;">
<div style="background:#fff;width:20%;height:1px;margin:1px;">
</div>
</div>
<p style="font-family:Calibri;text-transform:uppercase;letter-spacing:0.5px;line-height:8px;margin:1px 0 0;">
Inspo — 20%
</p>
</div>
<!-- END OF BAR 02 : STATS -->
<!-- BAR 03 : STATS -->
<div class="SOWKS" style="float:left;max-width:65px;margin:0 20px;">
<div style="width:63px;height:3px;border:1px solid #fff;">
<div style="background:#fff;width:90%;height:1px;margin:1px;">
</div>
</div>
<p style="font-family:Calibri;text-transform:uppercase;letter-spacing:0.5px;line-height:8px;margin:1px 0 0;">
Energy — 90%
</p>
</div>
<!-- END OF BAR 03 : STATS -->
<!-- BAR 04 : STATS -->
<div class="SOWKS" style="float:left;max-width:65px;margin:0 5px;">
<div style="width:63px;height:3px;border:1px solid #fff;">
<div style="background:#fff;width:50%;height:1px;margin:1px;">
</div>
</div>
<p style="font-family:Calibri;text-transform:uppercase;letter-spacing:0.5px;line-height:8px;margin:1px 0 0;">
Lurking — 50%
</p>
</div>
<!-- END OF BAR 04 : STATS -->
</div>
<!-- ** END OF STATS ** -->
<!-- ** COLOUR PALETTE // TO CHANGE COLOURS, REPLACE BACKGROUND COLOUR IN DIV 'SOWKColour' WITH YOUR DESIRED COLOUR & CHANGE OR REMOVE TITLE BASED ON PREFERENCE ** -->
<div style="float:left;width:247px;font-family:Calibri;text-transform:uppercase;letter-spacing:1px;line-height:8px;text-align:center;">
<!-- COLOUR 01 : PALLETTE -->
<div class="SOWKP" style="width:53px;height:53px;border:1px solid #fff;float:left;border-radius:5px;">
<div class="SOWKColour" title="Palomino Pony (#817872)" style="background:#817872;width:41px;height:41px;float:left;border-radius:4px;margin:6px;"></div>
<p style="margin:58px 0 0;">
#817872
</p>
</div>
<!-- END OF COLOUR 01 : PALETTE -->
<!-- COLOUR 02 : PALETTE -->
<div class="SOWKP" style="width:53px;height:53px;border:1px solid #fff;float:left;border-radius:5px;margin-left:9px;">
<div class="SOWKColour" title="Pastel Cool Pink (#e5cbd2)" style="background:#e5cbd2;width:41px;height:41px;float:left;border-radius:4px;margin:6px;"></div>
<p style="margin:58px 0 0;">
#e5cbd2
</p>
</div>
<!-- END OF COLOUR 02 : PALETTE -->
<!-- COLOUR 03 : PALETTE -->
<div class="SOWKP" style="width:53px;height:53px;border:1px solid #fff;float:left;border-radius:5px;margin-left:9px;">
<div class="SOWKColour" title="Fig Preserves (#aa9aa1)" style="background:#aa9aa1;width:41px;height:41px;float:left;border-radius:4px;margin:6px;"></div>
<p style="margin:58px 0 0;">
#aa9aa1
</p>
</div>
<!-- END OF COLOUR 03 : PALETTE -->
<!-- COLOUR 04 : PALETTE -->
<div class="SOWKP" style="width:53px;height:53px;border:1px solid #fff;float:left;border-radius:5px;margin-left:9px;">
<div class="SOWKColour" title="Sophisticated Plum (#5e5254)" style="background:#5e5254;width:41px;height:41px;float:left;border-radius:4px;margin:6px;"></div>
<p style="margin:58px 0 0;">
#5e5254
</p>
</div>
<!-- END OF COLOUR 04 : PALETTE -->
</div>
<!-- ** END OF COLOUR PALETTE ** -->
</div>
<!-- /// END OF SECTION FOUR /// -->
<!-- /// SECTION FIVE : ADDITIONAL INFO (PERSONALITY & APPEARANCE) /// -->
<div class="SOWKS5" style="float:left;width:468px;margin:2.5% 0;font-size:10px;line-height:12px;letter-spacing:0.5px;">
<p class="SOWKExtra01" style="margin:2.5% 25px;">
<span style="text-transform:uppercase;font-size:8px;letter-spacing:1px;"><b>Act One</b> — <i>Personality</i></span>
<br />
<br />
Amet porttitor eget dolor morbi non arcu. Scelerisque purus semper eget duis at tellus. Tempor nec feugiat nisl pretium fusce id velit ut.
</p>
<p class="SOWKExtra02" style="margin:25px 25px 2.5%;">
<span style="text-transform:uppercase;font-size:8px;letter-spacing:1px;"><b>Act Two</b> — <i>Appearance</i></span>
<br />
<br />
Sodales neque sodales ut etiam sit amet nisl purus in. Consectetur libero id faucibus nisl tincidunt eget. Erat velit scelerisque in dictum. Bibendum est ultricies integer quis auctor elit. Elit at imperdiet dui accumsan sit.
</p>
</div>
<!-- /// END OF SECTION FIVE /// -->
<!-- /// SECTION SIX : OUT OF CHARACTER /// -->
<div class="SOWKS6" style="float:left;width:468px;margin:2.5% 0;">
<div style="width:466px;border:1px solid #fff;float:left;border-radius:10px;font-size:10px;line-height:12px;letter-spacing:0.5px;">
<p class="SOWKDisclaimer" style="margin:20px;">
<span style="text-transform:uppercase;font-size:8px;letter-spacing:1px;font-weight:bold;">[!] Read Me</span>
<br />
<br />
Nulla aliquet enim tortor at auctor urna. Mattis nunc sed blandit libero volutpat sed. Pretium viverra suspendisse potenti nullam ac tortor vitae.
<br />
<br />
<span style="font-family:Calibri;text-transform:uppercase;font-size:8px;letter-spacing:1px;">
• Writing Style: Multi-Lit<br />
• Preference: Para, Detailed Script<br />
• Timezone: GMT -/+00<br />
• Rating: MAture themes, Excluding Sexual themes
</span>
</p>
</div>
</div>
<!-- /// END OF SECTION SIX /// -->
<div style="float:right;margin:-10px 0 0;">
<p style="font-family:Arial;font-size:8px;color:#fff;text-transform:uppercase;text-align:right;letter-spacing:0.5px;line-height:11px;margin:0;">
<a title="Theme Credit : NT" href="https://www.asianfanfics.com/story/view/528148/nt" style="color:#fff;text-decoration:none;">𝖓𝖙.</a>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- [[ END OF SCROLLABLE CONTENT ]] -->
</div>
<!-- /// READ ME ///
[!] Design will skewed in preview! - Do not adjust if not familiar with code, this will correct itself in live mode.
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 ]
• Primary Colour: White (#fff)
[!] This can and will change both Borders on Divs, Icon colours and Text
— Colour Palette:
• Palomino Pony (#817872)
• Pastel Cool Pink (#e5cbd2)
• Fig Preserves (#aa9aa1)
• Sophisticated Plum (#5e5254)
[ 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 : SOWKImgBG (Max-Dimensions:728×665)
• S/O Image : SOWKRSImg (100×100)
[!] Includes Icons from https://icons8.com/ - To change the colours simply find the key word below (Using CTRL+F/CMD+F) and then change the hex code:
Example: https://img.icons8.com/material-outlined/9/ffffff/portfolio.png (Change 'ffffff')
https://img.icons8.com/material-outlined/9/000000/portfolio.png - For Black!
• Date of Birth : calendar--v1.png
• Gender : gender-equality.png
• Relationship Status/R/S Spotlight : like--v1.png
• Ethnicity : earth-planet--v2.png
• Occupation : portfolio.png
[ TEXT ]
• Title : SOWKTitle
• Quote/Sub Title : SOWKQuote
• Name : SOWKName
• About : SOWKAbout
• Personality : SOWKExtra01
• Appearance : SOWKExtra02
• Disclaimer (OOC) : SOWKDisclaimer
[ DIVS ]
• 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.
[!] Select Divs will not be responsive to maintain design. Feel free to adjust if needed.
• Sections : SOWKS1, SOWKS2, SOWKS3, SOWKS4, SOWKS5, SOWKS6
Sections can be rearranged, just copy and paste a section to move it around to your desired order.
• Relationship Information : SOWKRSB (3 Should appear, unless more are added)
• Adjustable Bars : SOWKS (4 Should appear)
• Adjustable Colour Palette : SOWKColour (4 Should appear)
[ 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;">
<!-- /// BACKGROUND IMAGE /// -->
<div style="width:728px;height:665px;float:left;">
<img class="SOWKImgBG" src="https://i.imgur.com/TI8QZCb.png" />
</div>
<!-- /// END OF BACKGROUND IMAGE /// -->
<!-- [[ SCROLLABLE CONTENT ]] -->
<div style="width:728px;height:665px;margin-top:-665px;float:left;overflow:hidden;">
<div style="width:745px;height:682px;float:left;overflow:scroll;">
<div style="width:468px;margin:0 130px 80px;float:left;">
<!-- /// TITLE /// -->
<div style="margin:320px 0 0 50%;float:left;">
<div style="margin:0 0 0 -50%;float:left;">
<p class="SOWKTitle" style="font-family:Georgia;color:#fff;font-size:48px;text-transform:lowercase;font-weight:700;letter-spacing:-4px;line-height:42px;margin:0;">
Minji
</p>
<p class="SOWKQuote" style="font-family:Georgia;color:#fff;font-size:7px;text-transform:uppercase;letter-spacing:1px;line-height:8px;margin:-3% 0 0;">
Oh simple thing
</p>
</div>
</div>
<!-- /// END OF TITLE /// -->
<div style="width:100%;margin:145px 0 0;float:left;">
<p style="font-family:Calibri;color:#fff;font-size:8px;text-transform:uppercase;letter-spacing:1px;line-height:8px;text-align:center;font-style:italic;margin:0 0 2.5%;">
Start Here
</p>
<div style="height:130px;width:0px;border-left:1px dotted #fff;margin: 2.5% auto;">
</div>
<!-- /// SECTION ONE : NAME & DETAILS /// -->
<div class="SOWKS1" style="width:472px;float:left;margin:2.5% 0;">
<!-- ** NAME ** -->
<div style="width:95px;height:55px;border:1px solid #fff;float:left;border-radius:10px;">
<p class="SOWKName" style="font-family:Georgia;color:#fff;font-size:8px;text-transform:uppercase;letter-spacing:1px;line-height:10px;margin:19px 14px;">
<b>Kim Min-Ji</b><br />
김민지
</p>
</div>
<!-- ** END OF NAME ** -->
<!-- ** ICONS & MINI TRIVIA ** -->
<div style="width:348px;height:55px;border:1px solid #fff;float:left;border-radius:10px;margin-left:25px;">
<table style="width:348px;background:transparent;border:0px;margin:0;padding:0;">
<tr style="height:50px;padding:0;">
<!-- TRIVIA 01 -->
<td style="text-align:center;padding:0;">
<img src="https://img.icons8.com/material-outlined/9/ffffff/calendar--v1.png" />
<p class="SOWKDob" style="font-family:Calibri;color:#fff;font-size:8px;text-align:center;text-transform:uppercase;letter-spacing:1px;line-height:8px;margin:0;">
5-7-2004
</p>
</td>
<!-- END OF TRIVIA 01 -->
<!-- TRIVIA 02 -->
<td style="text-align:center;padding:0;">
<img src="https://img.icons8.com/material-outlined/9/ffffff/gender-equality.png" />
<p class="SOWKGender" style="font-family:Calibri;color:#fff;font-size:8px;text-align:center;text-transform:uppercase;letter-spacing:1px;line-height:8px;margin:0;">
Female
</p>
</td>
<!-- END OF TRIVIA 02 -->
<!-- TRIVIA 03 -->
<td style="text-align:center;padding:0;">
<img src="https://img.icons8.com/material-outlined/9/ffffff/like--v1.png" />
<p class="SOWKRStatus" style="font-family:Calibri;color:#fff;font-size:8px;text-align:center;text-transform:uppercase;letter-spacing:1px;line-height:8px;margin:0;">
Single
</p>
</td>
<!-- END OF TRIVIA 03 -->
<!-- TRIVIA 04 -->
<td style="text-align:center;padding:0;">
<img src="https://img.icons8.com/material-outlined/9/ffffff/earth-planet--v2.png" />
<p class="SOWKEthnicity" style="font-family:Calibri;color:#fff;font-size:8px;text-align:center;text-transform:uppercase;letter-spacing:1px;line-height:8px;margin:0;">
Korean
</p>
</td>
<!-- END OF TRIVIA 04 -->
<!-- TRIVIA 05 // TO ADD MORE, COPY FROM HERE, YOU CAN ALSO DELETE TRIVIA SECTIONS DELETE FROM HERE -->
<td style="text-align:center;padding:0;">
<img src="https://img.icons8.com/material-outlined/9/ffffff/portfolio.png" />
<p class="SOWKOccupation" style="font-family:Calibri;color:#fff;font-size:8px;text-align:center;text-transform:uppercase;letter-spacing:1px;line-height:8px;margin:0;">
Ballet Prof.
</p>
</td>
<!-- END OF TRIVIA 05 // TO HERE AND DELETE/PASTE BELOW OR BETWEEN THE TRIVIA SECTIONS ABOVE -->
</tr>
</table>
</div>
<!-- ** END OF ICONS & MINI TRIVIA ** -->
</div>
<!-- /// END OF SECTION ONE /// -->
<!-- /// SECTION TWO : ABOUT ME /// -->
<div class="SOWKS2" style="float:left;width:468px;margin:2.5% 0;">
<p class="SOWKAbout" style="font-family:Georgia;color:#fff;font-size:10px;line-height:12px;letter-spacing:0.5px;margin:10px 25px;">
<span style="text-transform:uppercase;font-size:8px;font-weight:bold;letter-spacing:1px;">Who Am I?</span>
<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<!-- /// END OF SECTION TWO /// -->
<!-- /// SECTION THREE : RELATIONSHIPS /// -->
<div class="SOWKS3" style="float:left;width:472px;margin:2.5% 0;">
<!-- ** FEATURED R/S ** -->
<div style="width:122px;border:1px solid #fff;float:left;border-radius:10px;margin-right:25px;">
<div style="width:22px;height:22px;border:1px solid #fff;float:left;border-radius:6px 0 0 6px;margin:7px 0 0 -22px;text-align:center;line-height:0px;">
<img src="https://img.icons8.com/material-outlined/9/ffffff/like--v1.png" style="margin-top:6px;" />
</div>
<!-- R/S IMAGE -->
<div style="width:100px;height:100px;overflow:hidden;float:left;border-radius:10px;margin:10px 10px 15px;">
<img class="SOWKRSImg" src="https://i.imgur.com/3FQI1yv.png" style="width:100px;height:100px;" />
</div>
<!-- END OF R/S IMAGE -->
<p style="font-family:Georgia;color:#fff;font-size:10px;line-height:12px;text-align:center;margin:0 10px 10px;">
<span style="text-transform:uppercase;letter-spacing:1px;font-weight:bold;">Ballet</span>
<br />
<br />
<i>I’m getting old and I need something to rely on....</i>
</p>
</div>
<!-- ** END OF FEATURES R/S ** -->
<!-- ** R/S LIST ** -->
<div style="max-width:322px;float:left;margin-top:-15px;">
<!-- SECTION 01 : R/S BLOCK -->
<div class="SOWKRSB" style="float:left;margin-top:15px;">
<div style="width:25px;height:25px;border:1px solid #fff;float:left;border-radius:6px;">
<p style="font-family:Georgia;color:#fff;font-size:8px;line-height:8px;letter-spacing:1px;text-transform:uppercase;font-style:italic;text-align:center;margin:8px 0 0;">
H
</p>
</div>
<div style="float:left;heigh:25px;margin-left:15px;">
<p style="font-family:Georgia;color:#fff;font-size:8px;line-height:8px;letter-spacing:1px;text-transform:uppercase;margin:9px 0 0;">
<b>Hanni Pham</b> — <i>Nickname Here</i>
</p>
</div>
<div style="float:left;width:321px;">
<p style="font-family:Georgia;color:#fff;font-size:10px;line-height:12px;letter-spacing:0.5px;margin:10px 0 0;">Augue lacus viverra vitae congue eu consequat ac felis. Malesuada fames ac turpis egestas sed. Facilisi etiam dignissim diam quis. </p>
</div>
</div>
<!-- END OF SECTION 01 : R/S BLOCK -->
<!-- SECTION 02 : R/S BLOCK -->
<div class="SOWKRSB" style="float:left;margin-top:15px;">
<div style="width:25px;height:25px;border:1px solid #fff;float:left;border-radius:6px;">
<p style="font-family:Georgia;color:#fff;font-size:8px;line-height:8px;letter-spacing:1px;text-transform:uppercase;font-style:italic;text-align:center;margin:8px 0 0;">
S
</p>
</div>
<div style="float:left;heigh:25px;margin-left:15px;">
<p style="font-family:Georgia;color:#fff;font-size:8px;line-height:8px;letter-spacing:1px;text-transform:uppercase;margin:9px 0 0;">
<b>Sample Name</b> — <i>Nickname Here</i>
</p>
</div>
<div style="float:left;width:321px;">
<p style="font-family:Georgia;color:#fff;font-size:10px;line-height:12px;letter-spacing:0.5px;margin:10px 0 0;">Nim lobortis scelerisque fermentum dui. Lacus vel facilisis volutpat est velit egestas dui id.</p>
</div>
</div>
<!-- END OF SECTION 02 : R/S BLOCK -->
<!-- SECTION 03 : R/S BLOCK - TO ADD MORE BLOCKS, COPY FROM HERE -->
<div class="SOWKRSB" style="float:left;margin-top:15px;">
<div style="width:25px;height:25px;border:1px solid #fff;float:left;border-radius:6px;">
<p style="font-family:Georgia;color:#fff;font-size:8px;line-height:8px;letter-spacing:1px;text-transform:uppercase;font-style:italic;text-align:center;margin:8px 0 0;">
S
</p>
</div>
<div style="float:left;heigh:25px;margin-left:15px;">
<p style="font-family:Georgia;color:#fff;font-size:8px;line-height:8px;letter-spacing:1px;text-transform:uppercase;margin:9px 0 0;">
<b>Sample Name</b> — <i>Nickname Here</i>
</p>
</div>
<div style="float:left;width:321px;">
<p style="font-family:Georgia;color:#fff;font-size:10px;line-height:12px;letter-spacing:0.5px;margin:10px 0 0;">Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.</p>
</div>
</div>
<!-- END OF SECTION 03 : R/S BLOCK - TO HERE, AND PASTE BELOW -->
</div>
<!-- ** END OF R/S LIST ** -->
</div>
<!-- /// END OF SECTION THREE /// -->
<!-- /// SECTION FOUR: CHARACTER DETAILS /// -->
<div class="SOWKS4" style="float:left;width:480px;margin:2.5% 0;">
<!-- ** STATS : MAX IS 4 STATS // TO CHANGE STATS CHANGE WIDTH OF DIV 'HBAR' TO YOUR DESIRED PERCENT ** -->
<div style="width:197px;height:65px;border:1px solid #fff;float:left;border-radius:10px;margin-right:24px;">
<!-- BAR 01 : STATS -->
<div class="SOWKS" style="float:left;max-width:65px;margin:15px 20px 7px;">
<div style="width:65px;height:5px;border:1px solid #fff;">
<div style="background:#fff;width:85%;height:1px;margin:1px;">
</div>
</div>
<p style="font-family:Calibri;color:#fff;font-size:8px;text-transform:uppercase;letter-spacing:0.5px;line-height:8px;margin:1px 0 0;">
Mood — 85%
</p>
</div>
<!-- END OF BAR 01 : STATS -->
<!-- BAR 02 : STATS -->
<div class="SOWKS" style="float:left;max-width:65px;margin:15px 0 7px 5px;">
<div style="width:65px;height:5px;border:1px solid #fff;">
<div style="background:#fff;width:20%;height:1px;margin:1px;">
</div>
</div>
<p style="font-family:Calibri;color:#fff;font-size:8px;text-transform:uppercase;letter-spacing:0.5px;line-height:8px;margin:1px 0 0;">
Inspo — 20%
</p>
</div>
<!-- END OF BAR 02 : STATS -->
<!-- BAR 03 : STATS -->
<div class="SOWKS" style="float:left;max-width:65px;margin:0 20px;">
<div style="width:65px;height:5px;border:1px solid #fff;">
<div style="background:#fff;width:90%;height:1px;margin:1px;">
</div>
</div>
<p style="font-family:Calibri;color:#fff;font-size:8px;text-transform:uppercase;letter-spacing:0.5px;line-height:8px;margin:1px 0 0;">
Energy — 90%
</p>
</div>
<!-- END OF BAR 03 : STATS -->
<!-- BAR 04 : STATS -->
<div class="SOWKS" style="float:left;max-width:65px;margin:0 5px;">
<div style="width:65px;height:5px;border:1px solid #fff;">
<div style="background:#fff;width:50%;height:1px;margin:1px;">
</div>
</div>
<p style="font-family:Calibri;color:#fff;font-size:8px;text-transform:uppercase;letter-spacing:0.5px;line-height:8px;margin:1px 0 0;">
Lurking — 50%
</p>
</div>
<!-- END OF BAR 04 : STATS -->
</div>
<!-- ** END OF STATS ** -->
<!-- ** COLOUR PALETTE // TO CHANGE COLOURS, REPLACE BACKGROUND COLOUR IN DIV 'SOWKColour' WITH YOUR DESIRED COLOUR & CHANGE OR REMOVE TITLE BASED ON PREFERENCE ** -->
<div style="float:left;width:256px;">
<!-- COLOUR 01 : PALLETTE -->
<div class="SOWKP" style="width:55px;height:55px;border:1px solid #fff;float:left;border-radius:5px;">
<div class="SOWKColour" title="Palomino Pony (#817872)" style="background:#817872;width:41px;height:41px;float:left;border-radius:4px;margin:6px;"></div>
<p style="font-family:Calibri;color:#fff;font-size:8px;text-transform:uppercase;letter-spacing:1px;line-height:8px;text-align:center;margin:57px 0 0;">
#817872
</p>
</div>
<!-- END OF COLOUR 01 : PALETTE -->
<!-- COLOUR 02 : PALETTE -->
<div class="SOWKP" style="width:55px;height:55px;border:1px solid #fff;float:left;border-radius:5px;margin-left:9px;">
<div class="SOWKColour" title="Pastel Cool Pink (#e5cbd2)" style="background:#e5cbd2;width:41px;height:41px;float:left;border-radius:4px;margin:6px;"></div>
<p style="font-family:Calibri;color:#fff;font-size:8px;text-transform:uppercase;letter-spacing:1px;line-height:8px;text-align:center;margin:57px 0 0;">
#e5cbd2
</p>
</div>
<!-- END OF COLOUR 02 : PALETTE -->
<!-- COLOUR 03 : PALETTE -->
<div class="SOWKP" style="width:55px;height:55px;border:1px solid #fff;float:left;border-radius:5px;margin-left:9px;">
<div class="SOWKColour" title="Fig Preserves (#aa9aa1)" style="background:#aa9aa1;width:41px;height:41px;float:left;border-radius:4px;margin:6px;"></div>
<p style="font-family:Calibri;color:#fff;font-size:8px;text-transform:uppercase;letter-spacing:1px;line-height:8px;text-align:center;margin:57px 0 0;">
#aa9aa1
</p>
</div>
<!-- END OF COLOUR 03 : PALETTE -->
<!-- COLOUR 04 : PALETTE -->
<div class="SOWKP" style="width:55px;height:55px;border:1px solid #fff;float:left;border-radius:5px;margin-left:9px;">
<div class="SOWKColour" title="Sophisticated Plum (#5e5254)" style="background:#5e5254;width:41px;height:41px;float:left;border-radius:4px;margin:6px;"></div>
<p style="font-family:Calibri;color:#fff;font-size:8px;text-transform:uppercase;letter-spacing:1px;line-height:8px;text-align:center;margin:57px 0 0;">
#5e5254
</p>
</div>
<!-- END OF COLOUR 04 : PALETTE -->
</div>
<!-- ** END OF COLOUR PALETTE ** -->
</div>
<!-- /// END OF SECTION FOUR /// -->
<!-- /// SECTION FIVE : ADDITIONAL INFO (PERSONALITY & APPEARANCE) /// -->
<div class="SOWKS5" style="float:left;width:468px;margin:2.5% 0;">
<p class="SOWKExtra01" style="font-family:Georgia;color:#fff;font-size:10px;line-height:12px;letter-spacing:0.5px;margin:2.5% 25px;">
<span style="text-transform:uppercase;font-size:8px;letter-spacing:1px;"><b>Act One</b> — <i>Personality</i></span>
<br />
<br />
Amet porttitor eget dolor morbi non arcu. Scelerisque purus semper eget duis at tellus. Tempor nec feugiat nisl pretium fusce id velit ut.
</p>
<p class="SOWKExtra02" style="font-family:Georgia;color:#fff;font-size:10px;line-height:12px;letter-spacing:0.5px;margin:25px 25px 2.5%;">
<span style="text-transform:uppercase;font-size:8px;letter-spacing:1px;"><b>Act Two</b> — <i>Appearance</i></span>
<br />
<br />
Sodales neque sodales ut etiam sit amet nisl purus in. Consectetur libero id faucibus nisl tincidunt eget. Erat velit scelerisque in dictum. Bibendum est ultricies integer quis auctor elit. Elit at imperdiet dui accumsan sit.
</p>
</div>
<!-- /// END OF SECTION FIVE /// -->
<!-- /// SECTION SIX : OUT OF CHARACTER /// -->
<div class="SOWKS6" style="float:left;width:470px;margin:2.5% 0;">
<div style="width:468px;border:1px solid #fff;float:left;border-radius:10px;">
<p class="SOWKDisclaimer" style="font-family:Georgia;color:#fff;font-size:10px;line-height:12px;letter-spacing:0.5px;margin:20px;">
<span style="text-transform:uppercase;font-size:8px;letter-spacing:1px;font-weight:bold;">[!] Read Me</span>
<br />
<br />
Nulla aliquet enim tortor at auctor urna. Mattis nunc sed blandit libero volutpat sed. Pretium viverra suspendisse potenti nullam ac tortor vitae.
<br />
<br />
<span style="font-family:Calibri;text-transform:uppercase;font-size:8px;letter-spacing:1px;">
• Writing Style: Multi-Lit<br />
• Preference: Para, Detailed Script<br />
• Timezone: GMT -/+00<br />
• Rating: MAture themes, Excluding Sexual themes
</span>
</p>
</div>
</div>
<!-- /// END OF SECTION SIX /// -->
<div style="float:right;margin:-10px 0 0;">
<p style="font-family:Arial;font-size:8px;color:#fff;text-transform:uppercase;text-align:right;letter-spacing:0.5px;line-height:11px;margin:0;">
<a title="Theme Credit : NT" href="https://www.asianfanfics.com/story/view/528148/nt" style="color:#fff;text-decoration:none;">𝖓𝖙.</a>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- [[ END OF SCROLLABLE CONTENT ]] -->
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment