[html]<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<style type="text/css">
.headerbox { width: 445px; padding: 15px; font-family: Montserrat; font-size: 25px; text-transform: uppercase; text-align: left; }
.subtitleboxx { width: 430px; padding: 5px; background-color: #000000; color: #fff; font-family: open sans condensed; font-size: 12px; text-align: right; text-transform: uppercase; }
.contentbox3 { width: 330px; padding: 55px; background-color: #F7F7F7; color: #000; border-bottom: 1px solid #000; text-align: justify; font-size: 11px; }
.contentbox3 a { font-family: open sans condensed; text-transform: uppercase; font-size: 10px; color: #fff; }
.membernamesies { text-transform: uppercase; font-family: montserrat; font-size: 15px; text-align: center; }
.staffaccount { width: 200px; padding-right: 10px; background-color: #000; text-align: right; color: #fff; font-size: 10px; font-family: open sans condensed; border-bottom: 1px solid #fff; }
.delosaccount { width: 190px; padding-right: 10px; background-color: #6B4690; text-align: right; color: #fff; font-size: 10px; font-family: open sans condensed; position: relative; right: 5px; border-bottom: 1px solid #fff; }
.hostaccount { width: 180px; padding-right: 10px; background-color: #B69B4C; text-align: right; color: #fff; font-size: 10px; font-family: open sans condensed; position: relative; right: 10px; border-bottom: 1px solid #fff; }
.newcomeraccount { width: 170px; padding-right: 10px; background-color: #5882AC; text-align: right; color: #fff; font-size: 10px; font-family: open sans condensed; position: relative; right: 15px; border-bottom: 1px solid #fff; }
.subnum { width: 200px; padding-left: 10px; text-align: left; }
</style>
<center><div class="headerbox">MEMBER DIRECTORY</div>
<div class="subtitleboxx">THE CREATORS BEHIND THE GENIUS</div>
<div class="contentbox3">
Something something lovely text about different players and their characters. Contact information is completely optional and other awesome stuff here. Claiming Template needs to be done~<p><br></p><p>
</p><div class="membernamesies">SABBY</div>
<center>
<div class="staffaccount">SHE/HER / EST / PM</div>
<div class="hostaccount">IRENE</div>
<div class="subnum"><i>3</i> / bartender / fiesty</div>
<div class="newcomeraccount">TESTY TESTIES</div>
<div class="subnum"><i>3</i> / bartender / fiesty</div>
<div class="delosaccount">OSCAR ROSE</div>
<div class="subnum"><i>3</i> / bartender / fiesty</div>
<div class="delosaccount">RUDOLF STERLING</div>
<div class="subnum"><i>3</i> / bartender / fiesty</div>
</center>
</div>
</center>[/html]
[html]<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Noto+Serif" rel="stylesheet">
<style type="text/css">
.aheader { width: 445px; height: 150px; background-image:url('http://placehold.it/445x150'); }
.playtitle { text-align: center; color: #fff; text-transform: uppercase; font-size: 10px; letter-spacing: 3px; font-family: playfair display; position: relative; top: 70px; }
.playlist { width: 335px; background-color: #fff; padding: 55px; color: #000; font-size: 8px; letter-spacing: 2px; text-align: left; font-family: noto serif; }
.playlist a { font-weight: bold; }
</style>
<center><div class="aheader"><div class="playtitle"> NAME & NAME </div></div>
<div class="playlist"> <ol type="i"><li> <a href="http://link" rel="nofollow noopener" target="_blank">SONG</a> BY <i>ARTIST</i><p></p></li><li> <a href="http://link" rel="nofollow noopener" target="_blank">SONG</a> BY <i>ARTIST</i><p></p></li></ol></div></center>[/html]
[html]
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<style type="text/css">
.gal { width: 500px; height: 150px; background-image: url(http://i.imgur.com/4eAg43t.png); }
.galbooty { width: 500px; height: 50px; background-image: url(http://i.imgur.com/Qe1d4P9.png); }
.liko { width: 250px; padding: 35px; position: relative; top: 30px; font-family: playfair display; font-size: 20px; text-transform: uppercase; color: #89ba50; border: 3px double #89ba50; text-align: center; letter-spacing: 2px; background-color: #000; }
.colin { width: 250px; padding: 35px; position: relative; top: 30px; font-family: playfair display; font-size: 20px; text-transform: uppercase; color: #ba507d; border: 3px double #ba507d; text-align: center; letter-spacing: 2px; background-color: #000; }
.garrett { width: 250px; padding: 35px; position: relative; top: 30px; font-family: playfair display; font-size: 20px; text-transform: uppercase; color: #ba50b1; border: 3px double #ba50b1; text-align: center; letter-spacing: 2px; background-color: #000; }
.ophelia { width: 250px; padding: 35px; position: relative; top: 30px; font-family: playfair display; font-size: 20px; text-transform: uppercase; color: #baaa50; border: 3px double #baaa50; text-align: center; letter-spacing: 2px; background-color: #000; }
.galpast { width: 400px; padding: 50px; border: 1px solid #8c8c8c; text-align: justify; color: #7a7a7a; }
.galpast a { text-transform: uppercase; font-size: 9px; letter-spacing: 1px; }
.galpresent { width: 400px; padding: 50px; border: 1px solid #5b5b5b; text-align: justify; color: #5b5b5b; }
.galpresent a { text-transform: uppercase; font-size: 9px; letter-spacing: 1px; }
.galpresentle { text-align: center; font-family: montserrat; letter-spacing: 2px; font-size: 30px; }
.galfuture { width: 400px; padding: 50px; border: 1px solid #000; text-align: justify; color: #000; }
.galfuture a { text-transform: uppercase; font-size: 9px; letter-spacing: 1px; }
</style>
<center><div class="gal"><div class="opass"><div class="liko">LIKO AIKANE</div></div></div><p>
</p><div class="galpast"><center><span class="galpresentle">PAST</span></center><p><br></p><p>
<b>SOME DATE HERE</b></p><p>
<a href="LINK HERE">I'VE ALWAYS WANTED AN ARCEUS</a> with <utah>ARCEUS</utah></p></div><p>
</p><div class="galpresent"><center><span class="galpresentle">PRESENT</span></center><p><br></p><p>
<b>SOME DATE HERE</b></p><p>
<a href="LINK HERE">SWEET DREAMS ARE MADE OF THESE</a> with <utah>ARCEUS</utah></p></div><p>
</p><div class="galfuture"><center><span class="galpresentle">FUTURE</span></center><p><br></p><p>
<b>SOME DATE HERE</b></p><p>
<a href="LINK HERE">LEAVE ME ALONE ARCEUS</a> with <utah>ARCEUS</utah></p></div><p>
</p><div class="galbooty"> </div>
</center>
[/html]
- Подпись автора
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
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.
