Perfil TDH

In this example below you will see how to do a Perfil TDH with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Mariohn, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Mariohn ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Perfil TDH</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <center><table width="100%" class='profile_bg'>
	<tr>
		<td colspan='3' align='center'>
<table align='center'><tr>
  <td><a href='{%pm}'><center><div class='profile_iconbg'><img src='https://i.imgur.com/LmzIrtL.png'/> <div class='profile_iconname'>enviar mensaje</div> 
  </div></center></a></td>
  <td>
    <a href='/index.php?act=Search&CODE=getalluser&mid={%id}&type=topics'><center><div class='profile_iconbg'><img src='https://i.imgur.com/7YJyVc6.png'/> <div class='profile_iconname'>ver topics</div> 
  </div></center></a>
  </td>
  <td>
    <a href='/index.php?act=Search&CODE=getalluser&mid={%id}'><center><div class='profile_iconbg'><img src='https://i.imgur.com/g9kIEss.png'/> <div class='profile_iconname'>ver post</div> 
  </div></center></a>
  </td>
  <td>
    <a href=''><center><div class='profile_iconbg'><img src='https://i.imgur.com/M7hK6SW.png'/> <div class='profile_iconname'>ver ficha</div> 
  </div></center></a>
  </td>
  <td>
    <a href='http://thedarkiscoming.jcink.net/index.php?act=store&code=view_inventory&memberid={%id}'><center><div class='profile_iconbg'><img src='https://i.imgur.com/CvLeNjr.png'/> <div class='profile_iconname'>ver tienda</div> 
  </div></center></a>
  </td>
</tr></table>
		</td>
	</tr>
	
<tr>
	<td colspan='3' align='center'>
		<div class='forum-link' align='center' width="100%">{%name}</div>
		<center><div class='forum-word profile_line' width="100%">{%group}</div></center>
	</td>
</tr>
 <td colspan='2' valign='top'>
  <div class='date-up'>Se unió {%member_joined}</div>
  <table width='100%'>

  <tr><td colspan='3' class=''> <div class='titlemedium'>perfil</div></td></tr>
  <tr><td width='10%'><div class='button-topic'>x</div></td><td><div class='profile_texttable profile_color'>Post</div></td><td><div class='profile_texttable'>{%posts}</div></td></tr>
  <tr><td width='10%'><div class='button-topic'>x</div></td><td><div class='profile_texttable profile_color'>Dinero en mano</div></td><td><div class='profile_texttable'>{%points}</div></td></tr>
  <tr><td width='10%'><div class='button-topic'>x</div></td><td><div class='profile_texttable profile_color'>PB</div></td><td><div class='profile_texttable'>{%field_11}</div></td></tr>
  <tr><td width='10%'><div class='button-topic'>x</div></td><td><div class='profile_texttable profile_color'>Trabajo</div></td><td><div class='profile_texttable'>{%field_12}</div></td></tr>
  <tr><td width='10%'><div class='button-topic'>x</div></td><td><div class='profile_texttable profile_color'>Baúl</div></td><td><div class='profile_texttable'><a href='{%field_5}'>Baúl del personaje</a></div></td></tr>
  
  <tr><td colspan='3' class=''> <div class='titlemedium'>jugador</div></td></tr>
  <tr><td width='10%'><div class='button-topic'>x</div></td><td><div class='profile_texttable profile_color'>Nivel</div></td><td><div class='profile_texttable'>{%field_14}</div></td></tr>
  <tr><td width='10%'><div class='button-topic'>x</div></td><td><div class='profile_texttable profile_color'>Fuerza</div></td><td><div class='profile_texttable'>{%field_17}</div></td></tr>
  <tr><td width='10%'><div class='button-topic'>x</div></td><td><div class='profile_texttable profile_color'>Agilidad</div></td><td><div class='profile_texttable'>{%field_18}</div></td></tr>
  <tr><td width='10%'><div class='button-topic'>x</div></td><td><div class='profile_texttable profile_color'>Vitalidad</div></td><td><div class='profile_texttable'>{%field_19}</div></td></tr>
    <tr><td width='10%'><div class='button-topic'>x</div></td><td><div class='profile_texttable profile_color'>Mana</div></td><td><div class='profile_texttable'>{%field_20}</div></td></tr>
  <tr><td width='10%'><div class='button-topic'>x</div></td><td><div class='profile_texttable profile_color'>Don</div></td><td><div class='profile_texttable'>{%field_15}</div></td></tr>
  </table></td>
  </td>
		<td align='center' width='34%'>{%avatar}</td>
</tr>
<tr>	
<td colspan='3' align='center'>
		<center><div class='forum-word profile_line' width="100%">Firma</div></center>
	{%signature}
	</td>
	</table></center>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/Mariohn/perfil-tdh-dZjpww */
.forum-link {
color:#080614;
font-size: 60px;
line-height: 50px;
text-transform: uppercase;
font-family: Pathway Gothic One;
text-align:center;
margin: 0 auto;
letter-spacing: -1px;
}
.forum-topic {
margin-top: 5px;
border-top: dashed 1px #2d2d22;
font-size: 10px;
font-family: courier new;
width: 500px;
padding: 2px;
text-align: center;
color: #2d2d22;
}

/****************************************
  Bar directly below the maintitles 
*****************************************/

.titlemedium { 
	font-weight:bold; color:#ded9eb;
	text-align: center;
	text-transform: uppercase;
	font-family: calibri;
	font-size: 8px;
	letter-spacing: 1px; 
	padding: 2px 6px; margin:0px;
	background: url("https://i.imgur.com/ASzUcd1.png");
	transition: all 0.8s ease-in-out 0s;
 }

.titlemedium:hover {
	color: #fff;
	transition: all 0.8s ease-in-out 0s;
}

.titlemedium  a:link, .titlemedium  a:visited, .titlemedium  a:active  { 
	text-decoration: none; 
	color: #ded9eb; 
}

/****************************************
  Table & Div Borders 
*****************************************/

.tableborder { 
	background-color: transparent;
	border:1px solid transparent;
	padding:0px; margin:0; 
}

.tablefill { 
	background-color: #e2deed;
	border:1px solid transparent;
	padding:6px; 
}

.tablepad {
	background-color: #e2deed; 
	padding:6px;
}

.tablebasic {
	width:100%; padding:0; margin:0px; border:0px; 
}

.plainborder {  
	/*background-color: #cec6b0;*/ 
}
.forum-word {
display: inline-block;
font-family: calibri;
color: #272726;
font-size:8px;
text-align: center;
text-transform:uppercase;
margin-top: -2px;
letter-spacing: 2px;
}

.menu-upintheair {
  background: url(https://i.imgur.com/ASzUcd1.png);
  width: 790px;
  padding: 5px;
  margin: 0 auto;
  font: 9px/9px Ubuntu Condensed;
  text-transform: uppercase;
  color: #e2deed;
}
.menubotones-upintheair {
  letter-spacing: 2px;
  padding: 10px;
}
.menubotones-upintheair:hover {
 text-decoration: underline;
 color: #641c1a;
 cursor: pointer;
}
.fondo-upintheair {
  background: #d7d3e3;
  width: 800px;
  height: 200px;
  margin: 0 auto;
  color: #000;
  }


.profile_bg{
	background: #dcd8e9;
	padding: 20px;
}

.profile_iconbg {
    height: 25%;
    width: 75px;
    padding: 10px;
    background-color: #39345c;
    cursor: pointer;
}
.profile_iconname {
  font: 8px/8px calibri;
  opacity: 0;
  transition: all 0.4s linear;
  text-align:center;
  text-transform: uppercase;
  padding: 4px;
  background-color: #834341;
  color: #b9b9b9;
}

.profile_iconbg:hover .profile_iconname {
  opacity: 1;
  transition: all 0.4s linear;
}

.profile_line {
	padding: 0px 40% 0px 40%;
	border-bottom: dashed 1px #2d2d22;
}

.profile_texttable {
  font: 14px/14px calibri;
  padding: 5px;
}
.profile_color {
  background-color: #dcd8e9;
}
.button-topic {
    background: #39345c;
    width: 25px;
    padding: 4px;
    border-radius: 8px;
    font-family: courier new;
    font-size: 10px;
    text-align: center;
    color: #000;
}


.profile_texttable {
  font: 14px/14px calibri;
  padding: 5px;
}
.profile_color {
  background-color: #dcd8e9;
}

Comments