Charming

Full Version: Networking Template
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
NETWORKING TEMPLATE

Hi so I thought I'd drop my networking template below for anyone who cared xD I've worked out most of the kinks, but if you come across more, please let me know and I'll scramble around and try to work out a solution. In the meantime, feel free to use the code, don't worry about giving credit lol I know it's you guys <3


If you need an example of what a full one looks like, feel free to check out mine here.

When using this, feel free to change things, add delete etc to fit your networking needs. The tables are super extra but I like them, so they stay for me :P if they don't work for you, by all means don't keep them! The only thing is, if you change things and you come across issues, I may not be the best person to go to for trouble shooting but I'll give it my best shot!

Also feel free to repurpose this for anything else you may deem it useful for xD

No credit is needed for the template, I trust you guys haha <3

Tutorial

So most of this is self-explanatory! The only thing that I want to explain a bit more in depth is the class and character navigation, which if you plan on just nixing those altogether don't pay attention to this and carry on with your life xDD

Class Navigation


The trick I've found with this is to have the link to your networking page already. So if you're going to make a brand new networking, leave the class and character navigations until the very end, until after you've posted your networking page. Then come back to this. Basically in the code, wherever you see the main link to Charming's homepage, replace that with your networking code. So when the default code says:

Code:
<a href="https://charmingrp.com/showthread.php#upperclass">upper class characters</a>

and if your networking page is:

https://charmingrp.com/showthread.php?tid=9000

then the code would become:

Code:
<a href="https://charmingrp.com/showthread.php?tid=9000#upperclass">upper class characters</a>

then, when you click on the link of upper-class characters in your navigation chart, it'll lead people right to your upper-class section. I hope this makes sense, if not please hmu and I'll help you out!

Character Navigation

When filling out the character descriptions, you'll see this at the beginning of the "About" section:

Code:
<a name="NAME" class="anchorfix">~</a><center><b>— A B O U T —</b>

Whatever character name you're filling out that about section, put the name of your character so it looks like this

Code:
<a name="Amelia" class="anchorfix">~</a><center><b>— A B O U T —</b>

NOW above in your character navigation table, you'll see a link that looks like this:

Code:
<a href="https://charmingrp.com/showthread.php#NAME" style="color: #000000;">NAME</a>

Like I said earlier, use the link to your networking page, and then for the hashtag, use your character's name so it looks like this:

Code:
<a href="https://charmingrp.com/showthread.php?tid=9000#Amelia" style="color: #000000;">Amelia Evans</a>

Fill out the usergroup of your character and it should look something like this!

Amelia Evans

With the final code looking like this:
Code:
<a href="https://charmingrp.com/showthread.php?tid=9000#Amelia" style="color: #513871;">Amelia Evans</a>

Character Gifs


Credit to for this one! Obviously, replace the gif with whatever you please. The icon should be 150x150. Replace the 000000 with the user group color. Replace the text with whatever you want!

PHP Code:
[code]<center><div style="width: 130px; height: 130px; border-radius: 100px; border-top: 5px solid #000000; background-image: url('https://*****.host/5HJCSj.gif'); background-size: 150px;"></div><br>@"name"<br>
<
span style="line-height:85%; font-size: 14px; font-style: italic; font-family:IM Fell French Canon SC;">age acab
class of XX
rep » X 
relationship status
occupation

❧ 
</span>[/code

A final one would look like this!:



28 | wchb
rep » 8 | courting
magizoologist



And that's pretty much it! Let me know if you have any other questions friends, and enjoy! <3
NETWORKING TITLE


❧ AGE • GMT -# • PRONOUNS ❧

INTRO Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at blandit ex. Proin lorem leo, dignissim sit amet consequat id, porttitor eget tellus. Ut consequat condimentum velit quis efficitur. Donec cursus laoreet nulla nec auctor. In interdum fringilla faucibus. Duis ultrices ultricies sem, a facilisis nibh posuere non. Suspendisse mattis vitae purus quis laoreet. Nam fringilla tempus nisi, ut euismod nunc maximus eu. Proin sodales efficitur interdum. Praesent dapibus maximus nibh quis volutpat. Duis interdum ultrices tincidunt. Sed lobortis dui ut felis lobortis, non lacinia urna fringilla. Mauris nec semper arcu, sit amet mattis diam. Mauris auctor odio purus.

Menu

❧ SITE NAVIGATION ❧

❧ CLASS NAVIGATION ❧
upper class charactersmiddle class characters
working class charactersstudents beings

❧ CHARACTER NAVIGATION ❧
Upper
Middle
Working
Students/
Beings
NAME NAME NAME NAME
NAME NAME NAME NAME
NAME NAME NAME NAME
NAME NAME NAME NAME
NAME NAME NAME NAME
NAME NAME NAME NAME
NAME NAME NAME NAME


Plottage Preferences

POINT ONE: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at blandit ex. Proin lorem leo, dignissim sit amet consequat id, porttitor eget tellus. Ut consequat condimentum velit quis efficitur. Donec cursus laoreet nulla nec auctor. In interdum fringilla faucibus. Duis ultrices ultricies sem, a facilisis nibh posuere non.
POINT TWO:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at blandit ex. Proin lorem leo, dignissim sit amet consequat id, porttitor eget tellus. Ut consequat condimentum velit quis efficitur. Donec cursus laoreet nulla nec auctor. In interdum fringilla faucibus. Duis ultrices ultricies sem, a facilisis nibh posuere non.
POINT THREE:  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at blandit ex. Proin lorem leo, dignissim sit amet consequat id, porttitor eget tellus. Ut consequat condimentum velit quis efficitur. Donec cursus laoreet nulla nec auctor. In interdum fringilla faucibus. Duis ultrices ultricies sem, a facilisis nibh posuere non.

updated: DATE HERE




Code

Code:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"><center><div style="width: 95%; padding: 2%; text-align: left; border: 3px #454545 double; background-color: #fff;"><div class="thead" style="font-size: 22px;">NETWORKING TITLE</div><p>
<center><img src="https://*****.host/5HJCSj.gif"></center><p>

<div style="font-family:Playfair Display; font-weight:700; text-align:center; font-size:15px; letter-spacing:5px;">❧ AGE • GMT -# • PRONOUNS ❧</div>

INTRO Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at blandit ex. Proin lorem leo, dignissim sit amet consequat id, porttitor eget tellus. Ut consequat condimentum velit quis efficitur. Donec cursus laoreet nulla nec auctor. In interdum fringilla faucibus. Duis ultrices ultricies sem, a facilisis nibh posuere non. Suspendisse mattis vitae purus quis laoreet. Nam fringilla tempus nisi, ut euismod nunc maximus eu. Proin sodales efficitur interdum. Praesent dapibus maximus nibh quis volutpat. Duis interdum ultrices tincidunt. Sed lobortis dui ut felis lobortis, non lacinia urna fringilla. Mauris nec semper arcu, sit amet mattis diam. Mauris auctor odio purus.

<center><div class="thead" style="text-align:center; font-size:18px; text-transform: uppercase; letter-spacing:2px; padding:3px 0px 3px 0px; width: 550px;">Menu</div></center>
<div style="font-family:Playfair Display; font-weight:700; text-align:center; font-size:15px; letter-spacing:5px;">❧ SITE NAVIGATION ❧</div>
<div style="font-family:Playfair Display; font-weight:700; text-align:center; font-size:15px; letter-spacing:5px;"><a href="https://charmingrp.com/index.php">link one</a> — <a href="https://charmingrp.com/index.php">link two</a> — <a href="https://charmingrp.com/index.php">link three</a></div>

<div style="font-family:Playfair Display; font-weight:700; text-align:center; font-size:15px; letter-spacing:5px;">❧ CLASS NAVIGATION ❧</div>
<center><span style="line-height: 90%;"><a href="https://charmingrp.com/showthread.php#upperclass">upper class characters</a> — <a href="https://charmingrp.com/showthread.php#middleclass">middle class characters</a>
<a href="https://charmingrp.com/showthread.php#workingclass">working class characters</a> — <a href="https://charmingrp.com/showthread.php#students">students </a> — <a href="https://charmingrp.com/showthread.php#beings">beings </a></span></center>
<div style="font-family:Playfair Display;font-weight:700; text-align:center; font-size:15px; letter-spacing:5px;">❧ CHARACTER NAVIGATION ❧</div>
<center><table class="NAMEnetworkingmenu" style="width: 80%; padding: 3px; text-align: center; border: 2px; ">
<thead>
<tr>
<th bgcolor="#E7E7E7"><center>Upper</center></th>
<th bgcolor="#E7E7E7"><center>Middle</center></th>
<th bgcolor="#E7E7E7"><center>Working</center></th>
<th bgcolor="#E7E7E7"><center>Students/
Beings</center></th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://charmingrp.com/showthread.php#NAME" style="color: #000000;">NAME</a></td>
<td><a href="https://charmingrp.com/showthread.php#NAME" style="color: #000000;"> NAME </a></td>
<td><a href="https://charmingrp.com/showthread.php#NAME" style="color: #000000;"> NAME </a></td>
<td><a href="https://charmingrp.com/showthread.php#NAME" style="color: #000000;"> NAME </a></td>
</tr>
<tr>
<td bgcolor="#f8f9f9"><a href="https://charmingrp.com/showthread.php#NAME" style="color: #000000;"> NAME </a></td>
<td bgcolor="#f8f9f9"><a href="https://charmingrp.com/showthread.php#NAME" style="color: #000000;"> NAME </a></td>
<td bgcolor="#f8f9f9"><a href="https://charmingrp.com/showthread.php#NAME" style="color: #000000;"> NAME </a></td>
<td bgcolor="#f8f9f9"><a href="https://charmingrp.com/showthread.php#NAME" style="color: #000000;"> NAME </a></td>
</tr>
<tr>
<td><a href="https://charmingrp.com/showthread.php#NAME" style="color: #000000;"> NAME </a></td>
<td><a href="https://charmingrp.com/showthread.php#NAME" style="color:#000000;"> NAME </a></td>
<td><a href="https://charmingrp.com/showthread.php#NAME" style="color:#000000;"> NAME </a></td>
<td><a href="https://charmingrp.com/showthread.php#NAME" style="color:#000000;"> NAME </a></td>
</tr>
<tr>
<td bgcolor="#f8f9f9"><a href="https://charmingrp.com/showthread.php#NAME" style="color:#000000;"> NAME </a></td>
<td bgcolor="#f8f9f9"><a href="https://charmingrp.com/showthread.php#NAME" style="color: #000000;"> NAME </a></td>
<td bgcolor="#f8f9f9"><a href="https://charmingrp.com/showthread.php#NAME" style="color:#000000;"> NAME </a></td>
<td bgcolor="#f8f9f9"><a href="https://charmingrp.com/showthread.php#NAME" style="color:#000000;"> NAME </a></td>
</tr>
<tr>
<td><a href="https://charmingrp.com/showthread.php#NAME" style="color: #000000;"> NAME </a></td>
<td><a href="https://charmingrp.com/showthread.php#NAME" style="color: #000000;"> NAME </a></td>
<td><a href="https://charmingrp.com/showthread.php#NAME" style="color: #000000;"> NAME </a></td>
<td><a href="https://charmingrp.com/showthread.php#NAME" style="color: #000000;"> NAME </a></td>
</tr>
<tr>
<td bgcolor="#f8f9f9"><a href="https://charmingrp.com/showthread.php5#NAME" style="color: #000000;"> NAME </a></td>
<td bgcolor="#f8f9f9"><a href="https://charmingrp.com/showthread.php#NAME" style="color: #000000;"> NAME </a></td>
<td bgcolor="#f8f9f9"><a href="https://charmingrp.com/showthread.php#NAME" style="color: #000000;"> NAME </a></td>
<td bgcolor="#f8f9f9"><a href="https://charmingrp.com/showthread.php#NAME" style="color: #000000;"> NAME </a></td>
</tr>
<tr>
<td><a href="https://charmingrp.com/showthread.php#NAME" style="color:#000000;"> NAME </a></td>
<td><a href="https://charmingrp.com/showthread.php#NAME" style="color:#000000;"> NAME </a></td>
<td><a href="https://charmingrp.com/showthread.php#NAME" style="color:#000000;"> NAME </a></td>
<td><a href="https://charmingrp.com/showthread.php#NAME" style="color:#000000;"> NAME </a></td>
</tr>
</tbody>
</table></center>

<center><div class="thead" style="text-align:center;font-weight:bold; font-size:16px; text-transform: uppercase; letter-spacing:2px; padding:3px 0px 3px 0px; width: 550px;">Plottage Preferences</div></center>
<div style="overflow-y: scroll; height: 300px;"><b>POINT ONE:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at blandit ex. Proin lorem leo, dignissim sit amet consequat id, porttitor eget tellus. Ut consequat condimentum velit quis efficitur. Donec cursus laoreet nulla nec auctor. In interdum fringilla faucibus. Duis ultrices ultricies sem, a facilisis nibh posuere non.
<b>POINT TWO:</b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at blandit ex. Proin lorem leo, dignissim sit amet consequat id, porttitor eget tellus. Ut consequat condimentum velit quis efficitur. Donec cursus laoreet nulla nec auctor. In interdum fringilla faucibus. Duis ultrices ultricies sem, a facilisis nibh posuere non.
<b>POINT THREE:</b>  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at blandit ex. Proin lorem leo, dignissim sit amet consequat id, porttitor eget tellus. Ut consequat condimentum velit quis efficitur. Donec cursus laoreet nulla nec auctor. In interdum fringilla faucibus. Duis ultrices ultricies sem, a facilisis nibh posuere non.<br></div>

<center>[size=x-small][b][i]updated: DATE HERE[/i][/b][/size]</center>
</div></center>
~
Upper Class


age | acab
class of 'XX
rep » X | relationship status
occupation

~
— A B O U T —

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at blandit ex. Proin lorem leo, dignissim sit amet consequat id, porttitor eget tellus. Ut consequat condimentum velit quis efficitur. Donec cursus laoreet nulla nec auctor. In interdum fringilla faucibus. Duis ultrices ultricies sem, a facilisis nibh posuere non. Suspendisse mattis vitae purus quis laoreet. Nam fringilla tempus nisi, ut euismod nunc maximus eu. Proin sodales efficitur interdum. Praesent dapibus maximus nibh quis volutpat. Duis interdum ultrices tincidunt. Sed lobortis dui ut felis lobortis, non lacinia urna fringilla. Mauris nec semper arcu, sit amet mattis diam. Mauris auctor odio purus.


age | acab
class of 'XX
rep » XX | relationship status
occupation

~
— A B O U T —

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at blandit ex. Proin lorem leo, dignissim sit amet consequat id, porttitor eget tellus. Ut consequat condimentum velit quis efficitur. Donec cursus laoreet nulla nec auctor. In interdum fringilla faucibus. Duis ultrices ultricies sem, a facilisis nibh posuere non. Suspendisse mattis vitae purus quis laoreet. Nam fringilla tempus nisi, ut euismod nunc maximus eu. Proin sodales efficitur interdum. Praesent dapibus maximus nibh quis volutpat. Duis interdum ultrices tincidunt. Sed lobortis dui ut felis lobortis, non lacinia urna fringilla. Mauris nec semper arcu, sit amet mattis diam. Mauris auctor odio purus.


~
Middle Class


age | acab
class of 'XX
rep » X | relationship status
occupation

~
— A B O U T —

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at blandit ex. Proin lorem leo, dignissim sit amet consequat id, porttitor eget tellus. Ut consequat condimentum velit quis efficitur. Donec cursus laoreet nulla nec auctor. In interdum fringilla faucibus. Duis ultrices ultricies sem, a facilisis nibh posuere non. Suspendisse mattis vitae purus quis laoreet. Nam fringilla tempus nisi, ut euismod nunc maximus eu. Proin sodales efficitur interdum. Praesent dapibus maximus nibh quis volutpat. Duis interdum ultrices tincidunt. Sed lobortis dui ut felis lobortis, non lacinia urna fringilla. Mauris nec semper arcu, sit amet mattis diam. Mauris auctor odio purus.


age | acab
class of 'XX
rep » XX | relationship status
occupation

~
— A B O U T —

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at blandit ex. Proin lorem leo, dignissim sit amet consequat id, porttitor eget tellus. Ut consequat condimentum velit quis efficitur. Donec cursus laoreet nulla nec auctor. In interdum fringilla faucibus. Duis ultrices ultricies sem, a facilisis nibh posuere non. Suspendisse mattis vitae purus quis laoreet. Nam fringilla tempus nisi, ut euismod nunc maximus eu. Proin sodales efficitur interdum. Praesent dapibus maximus nibh quis volutpat. Duis interdum ultrices tincidunt. Sed lobortis dui ut felis lobortis, non lacinia urna fringilla. Mauris nec semper arcu, sit amet mattis diam. Mauris auctor odio purus.


~
Working Class


age | acab
class of 'XX
rep » X | relationship status
occupation

~
— A B O U T —

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at blandit ex. Proin lorem leo, dignissim sit amet consequat id, porttitor eget tellus. Ut consequat condimentum velit quis efficitur. Donec cursus laoreet nulla nec auctor. In interdum fringilla faucibus. Duis ultrices ultricies sem, a facilisis nibh posuere non. Suspendisse mattis vitae purus quis laoreet. Nam fringilla tempus nisi, ut euismod nunc maximus eu. Proin sodales efficitur interdum. Praesent dapibus maximus nibh quis volutpat. Duis interdum ultrices tincidunt. Sed lobortis dui ut felis lobortis, non lacinia urna fringilla. Mauris nec semper arcu, sit amet mattis diam. Mauris auctor odio purus.


age | acab
class of 'XX
rep » XX | relationship status
occupation

~
— A B O U T —

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at blandit ex. Proin lorem leo, dignissim sit amet consequat id, porttitor eget tellus. Ut consequat condimentum velit quis efficitur. Donec cursus laoreet nulla nec auctor. In interdum fringilla faucibus. Duis ultrices ultricies sem, a facilisis nibh posuere non. Suspendisse mattis vitae purus quis laoreet. Nam fringilla tempus nisi, ut euismod nunc maximus eu. Proin sodales efficitur interdum. Praesent dapibus maximus nibh quis volutpat. Duis interdum ultrices tincidunt. Sed lobortis dui ut felis lobortis, non lacinia urna fringilla. Mauris nec semper arcu, sit amet mattis diam. Mauris auctor odio purus.


~
Students


age | acab
class of 'XX
rep » X | relationship status
occupation

~
— A B O U T —

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at blandit ex. Proin lorem leo, dignissim sit amet consequat id, porttitor eget tellus. Ut consequat condimentum velit quis efficitur. Donec cursus laoreet nulla nec auctor. In interdum fringilla faucibus. Duis ultrices ultricies sem, a facilisis nibh posuere non. Suspendisse mattis vitae purus quis laoreet. Nam fringilla tempus nisi, ut euismod nunc maximus eu. Proin sodales efficitur interdum. Praesent dapibus maximus nibh quis volutpat. Duis interdum ultrices tincidunt. Sed lobortis dui ut felis lobortis, non lacinia urna fringilla. Mauris nec semper arcu, sit amet mattis diam. Mauris auctor odio purus.


age | acab
class of 'XX
rep » XX | relationship status
occupation

~
— A B O U T —

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at blandit ex. Proin lorem leo, dignissim sit amet consequat id, porttitor eget tellus. Ut consequat condimentum velit quis efficitur. Donec cursus laoreet nulla nec auctor. In interdum fringilla faucibus. Duis ultrices ultricies sem, a facilisis nibh posuere non. Suspendisse mattis vitae purus quis laoreet. Nam fringilla tempus nisi, ut euismod nunc maximus eu. Proin sodales efficitur interdum. Praesent dapibus maximus nibh quis volutpat. Duis interdum ultrices tincidunt. Sed lobortis dui ut felis lobortis, non lacinia urna fringilla. Mauris nec semper arcu, sit amet mattis diam. Mauris auctor odio purus.


~
Beings


age | acab
class of 'XX
rep » X | relationship status
occupation

~
— A B O U T —

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at blandit ex. Proin lorem leo, dignissim sit amet consequat id, porttitor eget tellus. Ut consequat condimentum velit quis efficitur. Donec cursus laoreet nulla nec auctor. In interdum fringilla faucibus. Duis ultrices ultricies sem, a facilisis nibh posuere non. Suspendisse mattis vitae purus quis laoreet. Nam fringilla tempus nisi, ut euismod nunc maximus eu. Proin sodales efficitur interdum. Praesent dapibus maximus nibh quis volutpat. Duis interdum ultrices tincidunt. Sed lobortis dui ut felis lobortis, non lacinia urna fringilla. Mauris nec semper arcu, sit amet mattis diam. Mauris auctor odio purus.


age | acab
class of 'XX
rep » XX | relationship status
occupation

~
— A B O U T —

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at blandit ex. Proin lorem leo, dignissim sit amet consequat id, porttitor eget tellus. Ut consequat condimentum velit quis efficitur. Donec cursus laoreet nulla nec auctor. In interdum fringilla faucibus. Duis ultrices ultricies sem, a facilisis nibh posuere non. Suspendisse mattis vitae purus quis laoreet. Nam fringilla tempus nisi, ut euismod nunc maximus eu. Proin sodales efficitur interdum. Praesent dapibus maximus nibh quis volutpat. Duis interdum ultrices tincidunt. Sed lobortis dui ut felis lobortis, non lacinia urna fringilla. Mauris nec semper arcu, sit amet mattis diam. Mauris auctor odio purus.


Code

Code:
<a name="upperclass" class="anchorfix">~</a><center><div style="width: 95%; padding: 2%; text-align: left; border: 3px #454545 double; background-color: #fff;">
<div class="thead" style="font-size: 22px;">Upper Class</div>
<div style="overflow-y: scroll; height: 500px;"><table width="100%"><tr><td width="40%"><center><div style="width: 130px; height: 130px; border-radius: 100px; border-top: 5px solid #000000; background-image: url('https://*****.host/5HJCSj.gif'); background-size: 150px;"></div><br>@"name"<br>
<span style="line-height:85%; font-size: 14px; font-style: italic; font-family:IM Fell French Canon SC;">age | acab
class of 'XX
rep » X | relationship status
occupation

❧ </span></td><td width="60%"><a name="NAME" class="anchorfix">~</a><center><b>— A B O U T —</b></center><hr>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at blandit ex. Proin lorem leo, dignissim sit amet consequat id, porttitor eget tellus. Ut consequat condimentum velit quis efficitur. Donec cursus laoreet nulla nec auctor. In interdum fringilla faucibus. Duis ultrices ultricies sem, a facilisis nibh posuere non. Suspendisse mattis vitae purus quis laoreet. Nam fringilla tempus nisi, ut euismod nunc maximus eu. Proin sodales efficitur interdum. Praesent dapibus maximus nibh quis volutpat. Duis interdum ultrices tincidunt. Sed lobortis dui ut felis lobortis, non lacinia urna fringilla. Mauris nec semper arcu, sit amet mattis diam. Mauris auctor odio purus.</td></tr><tr><td width="40%" bgcolor="#f8f9f9"><center><div style="width: 130px; height: 130px; border-radius: 100px; border-top: 5px solid #000000; background-image: url('https://*****.host/5HJCSj.gif'); background-size: 150px;"></div><br>@"NAME"<br>
<span style="line-height:85%; font-size: 14px; font-style: italic; font-family:IM Fell French Canon SC;">age | acab
class of 'XX
rep » XX | relationship status
occupation

❧ </span></td><td width="60%" bgcolor="#f8f9f9"><a name="name" class="anchorfix">~</a><center><b>— A B O U T —</b></center><hr>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at blandit ex. Proin lorem leo, dignissim sit amet consequat id, porttitor eget tellus. Ut consequat condimentum velit quis efficitur. Donec cursus laoreet nulla nec auctor. In interdum fringilla faucibus. Duis ultrices ultricies sem, a facilisis nibh posuere non. Suspendisse mattis vitae purus quis laoreet. Nam fringilla tempus nisi, ut euismod nunc maximus eu. Proin sodales efficitur interdum. Praesent dapibus maximus nibh quis volutpat. Duis interdum ultrices tincidunt. Sed lobortis dui ut felis lobortis, non lacinia urna fringilla. Mauris nec semper arcu, sit amet mattis diam. Mauris auctor odio purus.</td></tr></table></div></center>

<a name="middleclass" class="anchorfix">~</a><center><div style="width: 95%; padding: 2%; text-align: left; border: 3px #454545 double; background-color: #fff;">
<div class="thead" style="font-size: 22px;">Middle Class</div>
<div style="overflow-y: scroll; height: 500px;"><table width="100%"><tr><td width="40%"><center><div style="width: 130px; height: 130px; border-radius: 100px; border-top: 5px solid #000000; background-image: url('https://*****.host/5HJCSj.gif'); background-size: 150px;"></div><br>@"name"<br>
<span style="line-height:85%; font-size: 14px; font-style: italic; font-family:IM Fell French Canon SC;">age | acab
class of 'XX
rep » X | relationship status
occupation

❧ </span></td><td width="60%"><a name="NAME" class="anchorfix">~</a><center><b>— A B O U T —</b></center><hr>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at blandit ex. Proin lorem leo, dignissim sit amet consequat id, porttitor eget tellus. Ut consequat condimentum velit quis efficitur. Donec cursus laoreet nulla nec auctor. In interdum fringilla faucibus. Duis ultrices ultricies sem, a facilisis nibh posuere non. Suspendisse mattis vitae purus quis laoreet. Nam fringilla tempus nisi, ut euismod nunc maximus eu. Proin sodales efficitur interdum. Praesent dapibus maximus nibh quis volutpat. Duis interdum ultrices tincidunt. Sed lobortis dui ut felis lobortis, non lacinia urna fringilla. Mauris nec semper arcu, sit amet mattis diam. Mauris auctor odio purus.</td></tr><tr><td width="40%" bgcolor="#f8f9f9"><center><div style="width: 130px; height: 130px; border-radius: 100px; border-top: 5px solid #000000; background-image: url('https://*****.host/5HJCSj.gif'); background-size: 150px;"></div><br>@"NAME"<br>
<span style="line-height:85%; font-size: 14px; font-style: italic; font-family:IM Fell French Canon SC;">age | acab
class of 'XX
rep » XX | relationship status
occupation

❧ </span></td><td width="60%" bgcolor="#f8f9f9"><a name="name" class="anchorfix">~</a><center><b>— A B O U T —</b></center><hr>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at blandit ex. Proin lorem leo, dignissim sit amet consequat id, porttitor eget tellus. Ut consequat condimentum velit quis efficitur. Donec cursus laoreet nulla nec auctor. In interdum fringilla faucibus. Duis ultrices ultricies sem, a facilisis nibh posuere non. Suspendisse mattis vitae purus quis laoreet. Nam fringilla tempus nisi, ut euismod nunc maximus eu. Proin sodales efficitur interdum. Praesent dapibus maximus nibh quis volutpat. Duis interdum ultrices tincidunt. Sed lobortis dui ut felis lobortis, non lacinia urna fringilla. Mauris nec semper arcu, sit amet mattis diam. Mauris auctor odio purus.</td></tr></table></div></center>

<a name="workingclass" class="anchorfix">~</a><center><div style="width: 95%; padding: 2%; text-align: left; border: 3px #454545 double; background-color: #fff;">
<div class="thead" style="font-size: 22px;">Working Class</div>
<div style="overflow-y: scroll; height: 500px;"><table width="100%"><tr><td width="40%"><center><div style="width: 130px; height: 130px; border-radius: 100px; border-top: 5px solid #000000; background-image: url('https://*****.host/5HJCSj.gif'); background-size: 150px;"></div><br>@"name"<br>
<span style="line-height:85%; font-size: 14px; font-style: italic; font-family:IM Fell French Canon SC;">age | acab
class of 'XX
rep » X | relationship status
occupation

❧ </span></td><td width="60%"><a name="NAME" class="anchorfix">~</a><center><b>— A B O U T —</b></center><hr>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at blandit ex. Proin lorem leo, dignissim sit amet consequat id, porttitor eget tellus. Ut consequat condimentum velit quis efficitur. Donec cursus laoreet nulla nec auctor. In interdum fringilla faucibus. Duis ultrices ultricies sem, a facilisis nibh posuere non. Suspendisse mattis vitae purus quis laoreet. Nam fringilla tempus nisi, ut euismod nunc maximus eu. Proin sodales efficitur interdum. Praesent dapibus maximus nibh quis volutpat. Duis interdum ultrices tincidunt. Sed lobortis dui ut felis lobortis, non lacinia urna fringilla. Mauris nec semper arcu, sit amet mattis diam. Mauris auctor odio purus.</td></tr><tr><td width="40%" bgcolor="#f8f9f9"><center><div style="width: 130px; height: 130px; border-radius: 100px; border-top: 5px solid #000000; background-image: url('https://*****.host/5HJCSj.gif'); background-size: 150px;"></div><br>@"NAME"<br>
<span style="line-height:85%; font-size: 14px; font-style: italic; font-family:IM Fell French Canon SC;">age | acab
class of 'XX
rep » XX | relationship status
occupation

❧ </span></td><td width="60%" bgcolor="#f8f9f9"><a name="name" class="anchorfix">~</a><center><b>— A B O U T —</b></center><hr>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at blandit ex. Proin lorem leo, dignissim sit amet consequat id, porttitor eget tellus. Ut consequat condimentum velit quis efficitur. Donec cursus laoreet nulla nec auctor. In interdum fringilla faucibus. Duis ultrices ultricies sem, a facilisis nibh posuere non. Suspendisse mattis vitae purus quis laoreet. Nam fringilla tempus nisi, ut euismod nunc maximus eu. Proin sodales efficitur interdum. Praesent dapibus maximus nibh quis volutpat. Duis interdum ultrices tincidunt. Sed lobortis dui ut felis lobortis, non lacinia urna fringilla. Mauris nec semper arcu, sit amet mattis diam. Mauris auctor odio purus.</td></tr></table></div></center>

<a name="students" class="anchorfix">~</a><center><div style="width: 95%; padding: 2%; text-align: left; border: 3px #454545 double; background-color: #fff;">
<div class="thead" style="font-size: 22px;">Students</div>
<div style="overflow-y: scroll; height: 500px;"><table width="100%"><tr><td width="40%"><center><div style="width: 130px; height: 130px; border-radius: 100px; border-top: 5px solid #000000; background-image: url('https://*****.host/5HJCSj.gif'); background-size: 150px;"></div><br>@"name"<br>
<span style="line-height:85%; font-size: 14px; font-style: italic; font-family:IM Fell French Canon SC;">age | acab
class of 'XX
rep » X | relationship status
occupation

❧ </span></td><td width="60%"><a name="NAME" class="anchorfix">~</a><center><b>— A B O U T —</b></center><hr>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at blandit ex. Proin lorem leo, dignissim sit amet consequat id, porttitor eget tellus. Ut consequat condimentum velit quis efficitur. Donec cursus laoreet nulla nec auctor. In interdum fringilla faucibus. Duis ultrices ultricies sem, a facilisis nibh posuere non. Suspendisse mattis vitae purus quis laoreet. Nam fringilla tempus nisi, ut euismod nunc maximus eu. Proin sodales efficitur interdum. Praesent dapibus maximus nibh quis volutpat. Duis interdum ultrices tincidunt. Sed lobortis dui ut felis lobortis, non lacinia urna fringilla. Mauris nec semper arcu, sit amet mattis diam. Mauris auctor odio purus.</td></tr><tr><td width="40%" bgcolor="#f8f9f9"><center><div style="width: 130px; height: 130px; border-radius: 100px; border-top: 5px solid #000000; background-image: url('https://*****.host/5HJCSj.gif'); background-size: 150px;"></div><br>@"NAME"<br>
<span style="line-height:85%; font-size: 14px; font-style: italic; font-family:IM Fell French Canon SC;">age | acab
class of 'XX
rep » XX | relationship status
occupation

❧ </span></td><td width="60%" bgcolor="#f8f9f9"><a name="name" class="anchorfix">~</a><center><b>— A B O U T —</b></center><hr>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at blandit ex. Proin lorem leo, dignissim sit amet consequat id, porttitor eget tellus. Ut consequat condimentum velit quis efficitur. Donec cursus laoreet nulla nec auctor. In interdum fringilla faucibus. Duis ultrices ultricies sem, a facilisis nibh posuere non. Suspendisse mattis vitae purus quis laoreet. Nam fringilla tempus nisi, ut euismod nunc maximus eu. Proin sodales efficitur interdum. Praesent dapibus maximus nibh quis volutpat. Duis interdum ultrices tincidunt. Sed lobortis dui ut felis lobortis, non lacinia urna fringilla. Mauris nec semper arcu, sit amet mattis diam. Mauris auctor odio purus.</td></tr></table></div></center>

<a name="beings" class="anchorfix">~</a><center><div style="width: 95%; padding: 2%; text-align: left; border: 3px #454545 double; background-color: #fff;">
<div class="thead" style="font-size: 22px;">Beings</div>
<div style="overflow-y: scroll; height: 500px;"><table width="100%"><tr><td width="40%"><center><div style="width: 130px; height: 130px; border-radius: 100px; border-top: 5px solid #000000; background-image: url('https://*****.host/5HJCSj.gif'); background-size: 150px;"></div><br>@"name"<br>
<span style="line-height:85%; font-size: 14px; font-style: italic; font-family:IM Fell French Canon SC;">age | acab
class of 'XX
rep » X | relationship status
occupation

❧ </span></td><td width="60%"><a name="NAME" class="anchorfix">~</a><center><b>— A B O U T —</b></center><hr>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at blandit ex. Proin lorem leo, dignissim sit amet consequat id, porttitor eget tellus. Ut consequat condimentum velit quis efficitur. Donec cursus laoreet nulla nec auctor. In interdum fringilla faucibus. Duis ultrices ultricies sem, a facilisis nibh posuere non. Suspendisse mattis vitae purus quis laoreet. Nam fringilla tempus nisi, ut euismod nunc maximus eu. Proin sodales efficitur interdum. Praesent dapibus maximus nibh quis volutpat. Duis interdum ultrices tincidunt. Sed lobortis dui ut felis lobortis, non lacinia urna fringilla. Mauris nec semper arcu, sit amet mattis diam. Mauris auctor odio purus.</td></tr><tr><td width="40%" bgcolor="#f8f9f9"><center><div style="width: 130px; height: 130px; border-radius: 100px; border-top: 5px solid #000000; background-image: url('https://*****.host/5HJCSj.gif'); background-size: 150px;"></div><br>@"NAME"<br>
<span style="line-height:85%; font-size: 14px; font-style: italic; font-family:IM Fell French Canon SC;">age | acab
class of 'XX
rep » XX | relationship status
occupation

❧ </span></td><td width="60%" bgcolor="#f8f9f9"><a name="name" class="anchorfix">~</a><center><b>— A B O U T —</b></center><hr>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at blandit ex. Proin lorem leo, dignissim sit amet consequat id, porttitor eget tellus. Ut consequat condimentum velit quis efficitur. Donec cursus laoreet nulla nec auctor. In interdum fringilla faucibus. Duis ultrices ultricies sem, a facilisis nibh posuere non. Suspendisse mattis vitae purus quis laoreet. Nam fringilla tempus nisi, ut euismod nunc maximus eu. Proin sodales efficitur interdum. Praesent dapibus maximus nibh quis volutpat. Duis interdum ultrices tincidunt. Sed lobortis dui ut felis lobortis, non lacinia urna fringilla. Mauris nec semper arcu, sit amet mattis diam. Mauris auctor odio purus.</td></tr></table></div></center>