Buzzdungeon

portafolio simple

Portafolio simple
Nombre:
Portafolio simple
Autor:
Buzzdungeon

Tags:portafoliosimplegrisminimalista

Extra Contenido de tu <head>:

<link href="http://meyerweb.com/eric/tools/css/reset/reset.css" rel="stylesheet" type="text/css">

Texto sobre el diseño:

<div id="contenedor">
	<div id="cabezal">
		<div id="avatar">
			<img src="http://lorempixel.com/100/100/" />
		</div>
		<ul id="menu">
			<li><a href="#">Link1</a></li>
			<li><a href="#">Link2</a></li>
			<li><a href="#">Link3</a></li>
		</ul>
		<h1 id="titulo">Juan Fer</h1>
	</div>
	<div id="contenido">
	<p>

Texto por debajo de la página:

</p>
	</div>
</div>
<p id="footer">Creado por <a href="http://buzzdungeon.es.tl">Buzzdungeon</a></p>

CSS-Code sin Style Tags:

html, body{
			background:#ddd;
			font-family:'Arial Rounded MT Bold', Helvetica, Arial, sans-serif;
			font-size:15px;
			text-shadow:0 1px 1px white;
		}
		a{
			text-decoration:underline;
			color:#555;
			-webkit-transition: all .8s linear;
			-moz-transition: all .8s linear;
			-o-transition: all .8s linear;
			-ms-transition: all .8s linear;
			transition: all .8s linear;
		}
		a:hover{
			color:#222;
		}
		h1{
			font-size:2.3em;
		}
		h2{
			font-size:1.8em;
		}
		h3{
			font-size:1.5em;
		}
		h1#titulo{
			color: #555;
			float: right;
			font-size:3em;
			-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
			filter: alpha(opacity=0);
			opacity: 0;
			-webkit-transition: all 1s linear;
			-moz-transition: all 1s linear;
			-o-transition: all 1s linear;
			-ms-transition: all 1s linear;
			transition: all 1s linear;
			position: relative;
			text-align:center;
			text-shadow:0 2px 1px white;
			top:10px;
		}
		#avatar:hover ~ h1#titulo{
			-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
			filter: alpha(opacity=100);
			opacity: 1;
			top:50px;
		}
		input, textarea{
			background:#f9f9f9;
			border:1px solid #bbb;
			-webkit-box-shadow:inset 0 1px 2px #ddd,0 1px 1px #ddd;
			-moz-box-shadow:inset 0 1px 2px #ddd,0 1px 1px #ddd;
			box-shadow:inset 0 1px 2px #ddd,0 1px 1px #ddd;
			color: #777!important;
			outline:none;
			padding:3px;
		}
		input:focus, textarea:focus{
			-webkit-box-shadow:inset 0 1px 2px #ddd;
			-moz-box-shadow:inset 0 1px 2px #ddd;
			box-shadow:inset 0 1px 2px #ddd;
		}
		input[type="submit"],input[type="button"],button{
			background: #DDD;
			-webkit-box-shadow:0 1px 1px #ddd;
			-moz-box-shadow:0 1px 1px #ddd;
			box-shadow:0 1px 1px #ddd;
		}
		input[type="submit"]:active,input[type="button"]:active,button:active{
			-webkit-box-shadow:inset 0 1px 1px #aaa;
			-moz-box-shadow:inset 0 1px 1px #aaa;
			box-shadow:inset 0 1px 1px #aaa;
		}
		table[height ="102"]{
			margin: 0 auto;
		}
		#contenedor{
			border:1px solid #bbb;
			-webkit-box-shadow:0px 35px 20px -20px rgba(0,0,0,0.2), 0 0 2px rgba(0,0,0,0.1);
			-moz-box-shadow:0px 35px 20px -20px rgba(0,0,0,0.2), 0 0 2px rgba(0,0,0,0.1);
			box-shadow:0px 35px 20px -20px rgba(0,0,0,0.2), 0 0 2px rgba(0,0,0,0.1);
			margin: 100px auto;
			min-height:200px;
			width:600px;
		}
		#cabezal{
			background:#eee;
			-webkit-box-shadow:inset 0 1px 1px white, inset 1px 0  1px white, inset -1px 0 1px white;
			-moz-box-shadow:inset 0 1px 1px white, inset 1px 0  1px white, inset -1px 0 1px white;
			box-shadow:inset 0 1px 1px white, inset 1px 0  1px white, inset -1px 0 1px white;
			overflow: hidden;
			padding: 10px;
		}
		#avatar{
			height:100px;
			width:100px;
			float:left;
		}
		#avatar img{
			background:gray;
			-webkit-box-shadow:0 0px 2px #ccc;
			-moz-box-shadow:0 0px 2px #ccc;
			box-shadow:0 0px 2px #ccc;
			height:100px;
			width:100px;
			-webkit-transition: all .6s linear;
			-moz-transition: all .6s linear;
			-o-transition: all .6s linear;
			-ms-transition: all .6s linear;
			transition: all .6s linear;
		}
		#avatar img:hover{
			-webkit-box-shadow:0 0px 8px #777;
			-moz-box-shadow:0 0px 8px #777;
			box-shadow:0 0px 8px #777;
		}
		#menu{
			float:right;
		}
		#menu li{
			float:left;
			padding:4px 8px;
			margin:0 10px;
		}
		#menu li a{
			color: #999;
			text-decoration:none;
			-webkit-transition: all .6s linear;
			-moz-transition: all .6s linear;
			-o-transition: all .6s linear;
			-ms-transition: all .6s linear;
			transition: all .6s linear;
		}
		#menu li a:hover{
			color: #777;
		}
		#contenido{
			background-color: #fefefe;
			border-top:1px solid #bbb;
			clear:both;
			color:#555;
			min-height:100px;
			padding:5px 10px;
		}
		#contenido p{
			padding:8px 0;
		}
		#counter{
			border-top:1px solid #dedede;
			text-align:center;
			padding-top:3px;
			position:relative;
			bottom:-40px;
		}
		#footer{
			bottom:20px;
			position:relative;
			text-align:center;
		}
#pre_header {display: none;} 
#post_header {display: none;} 
#header_container {display: none;} 
lli.nav_element{display: none;} 
li.nav_element a{display: none;} 
h1#title{display: none;} 
h2#title span {display: none;} 
#title {display: none;} 
#nav_container {display:none;} 
#container + p{display:none;}

Hoy hubo 19 visitantes (79 clics a subpáginas)

Publicidad

Afiliados