[TUTORIAL] Plantilla de mi perfil

9 Jan 2018#1
Buenas, me aburría el dia de hoy y me puse a cambiar cosas de mi perfil, a mi gusto me quedo bastante guay Feliz
y quería compartirlo con vosotros, he comentado lo mas importante del código para que sepáis que tocar para hacerlo vuestro, si alguno quiere modificar algo en especifico de x manera que me mande mp, aquí el código:
<style>
body {
    background: url(https://78.media.tumblr.com/20aacdcd94260d91b9afabe0d51e89b3/tumblr_nzoj8eNrZB1t45pbyo1_500.gif) no-repeat center center fixed; /* aqui esta la imagen de fondo */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    font: 78% "Verdana";
    margin: 0 auto;
    padding: 0px 0;
    padding-left:  15%;
    padding-right:  15%;
}
#header, #toolbar, #publi, .navigate_section, #admin_menu, #top, #up_pictures,#up_interests,#up_media, #up_write_comment, #profile_left, #up_about_me, #up_other_info,.pagesection, #footer, .windowbg2 span.topslice, .windowbg2 span.botslice {
	display: none;
}
#bdy-l, #bdy-r, .windowbg, #bodyarea {
	background: #FFBF00;
	border-radius: 0px 0px 7px 7px;
}
.windowbg2 {
	color: #000;
	background-color: #F5DA81;
	border-radius: 7px 7px 7px 7px;
	padding: 10px;
}
#c {
	text-align: center;
	width: 620px;
	height: 300px;
	margin:0 auto;
	border-style: solid;
	border-width: 0px 1px 1px 1px;
	border-radius: 0px 0px 7px 7px;
	padding: 5px;
	background-image: url(https://i.imgur.com/bzEXjcK.gif); /* aqui esta el Goku caminando hacia adelante */
}
#tit {
	text-align: center;
	width: 613px;
	margin:0 auto;
	color: #000;
	background-image: linear-gradient( to top right, #58c6cb, #000022);
	border-radius: 7px 7px 0px 0px;
	padding: 10px;
	margin-top: 15px;
	font-weight: bold;
}
#seeya{
	width: 480px;
	height: 270px;
	margin:0 auto;
	background-image: url(https://i.imgur.com/hQxbaYb.gif); /* aqui esta el Goku despidiendose */
}
#comentario {
	text-align: center;
	width: 480px;
	height: 334px;
	margin:0 auto;
	border-style: solid;
	border-width: 0px 1px 1px 1px;
	border-radius: 0px 0px 7px 7px;
    font-size: 15px;
    font-family: VAGRounded;
    color: #444;
}
#titulo2 {
    text-align: center;
    width: 463px;
    margin: 0 auto;
    color: #000;
    background-image: linear-gradient( to top right, #58c6cb, #000022);
    border-radius: 7px 7px 0px 0px;
    padding: 10px;
    margin-top: 15px;
    font-weight: bold;
}
.gt {
	display: none;
}
#forumposts{
	display: none;
}
#tit-inside{
    text-align: center;
    width: 763px;
    margin: 0 auto;
    color: #000;
    background-image: linear-gradient( to top right, #58c6cb, #000022);
    border-radius: 7px 7px 0px 0px;
    padding: 10px;
    margin-top: 15px;
    font-weight: bold;
}
#inside{
    text-align: center;
	width: 780px;
	height: 134px;
	margin:0 auto;
	border-style: solid;
	border-width: 0px 1px 1px 1px;
	border-radius: 0px 0px 7px 7px;
}
.info{
    color: #2E64FE;
    font-size: 20px;
    margin-left: -70%;
}
.info2{
    color: #2E64FE;
    font-size: 20px;
    margin-left: 7px;
}
.info3{
    color: #2E64FE;
    font-size: 20px;
    margin-left: -63%;
}
.all{
    font-size: 17px;
}
#mp-send{
    color: #2E64FE;
    font-size: 16px;
    font-family: VAGRounded;
}
#mp-send:hover{
    color: red;
}
#contenido{
    width: 422px;
    color:black;
    text-align:center;
    background-color: rgba(255, 255, 255, 0.93);
    border-radius: 4px;
    padding: 8px;
    padding-bottom:20px;
    height:350px;
    box-shadow: 1px 1px 1px 3px rgba(0,0,0,0.2);
    margin-top: 2%;
    margin-left: 27%;
}
#categorya{
    background-image: linear-gradient( to top right, #53B4F1, #53B4F1 );
    padding: 10px;
    border-radius: 5px;
    color: #FFF;
    font-family: VAGRounded;
    font-size: 20px;
    margin-bottom: 5px;
}
.picture{
     background-color: #4AA3B7;
     border-radius: 15px; 
     margin-top: 3%;
}
</style>
<div id="titulo2">
Información
</div>
<div id="comentario">
	Info de tu perfil
	<div id="seeya">
	</div>
</div>
<div id="tit-inside">
Titulo perfil
</div>
<div id="inside">
	<table>
		<tr>
		<td>
			<img class="avatar" src="https://i.imgur.com/5RW5CUA.gif" width="80" height="80" alt="" /> <!-- pon aqui tu avatar-->
			<br />
			<em>
				<img src="https://www.boombang.nl/forum/Themes/boombang/images/useron.gif?2" alt="Conectado" style="text-align: middle;" />
				<span class="smalltext"> Conectado</span>
			</em>
		</td>
		<td>
			<table>
			<tbody>
				<tr>
					<td>
						<strong class="info">Nombre: </strong>
						<a class="all">Tu nombre</a>
					</td>
				</tr>
				<tr>
					<td>
						<strong class="info2">Texto personal: </strong>
						<a class="all">Tu texto</a>
					</td>
				</tr>
				<tr>
					<td>
						<strong class="info3">Grupo: </strong>
						<a class="all">Tu grupo</a>
					</td>
				</tr>
			</tbody>
			</table>
	</td></tr>
</table>
<a id="mp-send" href="https://www.boombang.nl/forum/index.php?action=pm;sa=send;u=1100"><!-- Poner en vez de 1100 tu id si no me llegará a mi el mp >:( -->Enviar un mensaje privado a este usuario.</a>
</div>
<div id="tit">
Titulo 2
</div>
<div id="c">
</div>
<div>
<embed src="https://www.youtube.com/embed/yFFesTVS3g4?autoplay=1&amp;modestbranding=1&amp;showinfo=0&amp;iv_load_policy=3&amp;fs=0&amp;fs=0&amp;autohide=1&amp;controls=0&amp;disablekb=1&amp;start=0" type="text/html" width="0" height="0" />
</div>
<div id="contenido">
	<div id="categorya">Mis redes</div>
		<div class="picture">
	        <a href="" target="_blank">
	       	 <img src="http://www.steamforlinux.com/sites/default/files/styles/large/public/field/image/steam-logo.png" width="80" height="80" alt="image" />
	        </a>		
        </div>
		<div class="picture">
	        <a href="" target="_blank">
	        	<img src="https://www.boombang.nl/gallery/logoop.png" width="80" height="80" alt="image" />
	        </a>		
        </div>
		<div class="picture">
	        <a href="" target="_blank">
	        	<img src="http://fortunedotcom.files.wordpress.com/2011/05/skype-450x450.png" width="80" height="80" alt="image" />
	        </a>		
         </div>
</div>