Autor
Mensaje
buzzdungeon
Destacado
Ubicación: México
26-09-2011, 03:11 (UTC) Título del mensaje : [CSS] Profesional by Buzzdungeon
Como la seccion de
Acerca de codigos esta cerrada temporalmente, decidí postearlo aquí :P
Este Diseño css lo hice a base de un framework css, por eso no me costo trabajo hacerlo xD
Vista previa:
Pantalla grande
http://dl.dropbox.com/u/39668621/capturas/pro.png
Descarga (sin adaptar):
http://dl.dropbox.com/u/39668621/compartir/pro-by-juanfer.zip
Texto por encima de la pagina:
Código: <div class="topbar">
<div class="fill">
<div class="container">
<a class="brand" href="http://www.promocionatupagina.com">Titulo</a>
<ul class="nav">
<li class="active"><a href="http://www.promocionatupagina.com">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span16" id="contenedor">
<div class="row">
<div class="span16" id="header">
<h1 id="titulo">Titulo</h1>
<h3>Slogan</h3>
</div>
</div>
<div class="row">
<div class="span11" id="contenido">
<h2>[subpage]</h2>
<p>
Texto por debajo de la pagina:
Código: </p>
</div>
<div class="span4" id="sidebar">
<ul class="media-grid">
<li><a href="#"><img src="http://placehold.it/50x50" alt="" class="thumbnail" /></a></li>
<li><a href="#"><img src="http://placehold.it/50x50" alt="" class="thumbnail" /></a></li>
<li><a href="#"><img src="http://placehold.it/50x50" alt="" class="thumbnail" /></a></li>
<li><a href="#"><img src="http://placehold.it/50x50" alt="" class="thumbnail" /></a></li>
<li><a href="#"><img src="http://placehold.it/50x50" alt="" class="thumbnail" /></a></li>
<li><a href="#"><img src="http://placehold.it/50x50" alt="" class="thumbnail" /></a></li>
</ul>
<hr />
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<hr />
Algun texto aqui ;)
Template por <a href="http://www.promocionatupagina.com">Buzzdungeon</a>
</div>
</div>
</div>
</div>
</div>
Css sin style tags:
Código: </style>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css">
<style>
html, body{
background: #eee repeat;
margin:0 0 30px 0;
}
#header{
min-height:50px;
border-bottom:1px solid #dddddd;
background:#f5f5f5;
-webkit-border-radius:3px 3px 0 0;
-khtml-border-radius:3px 3px 0 0;
-moz-border-radius:3px 3px 0 0;
border-radius:3px 3px 0 0;
}
h1{
padding:5px 0 0 5px;
margin:0;
}
h2{
padding:5px 0 0 5px;
margin:0;
}
h3{
padding:5px 0 0 5px;
margin:-5px 0 0 0;
}
#contenedor{
background:#fff;
border:1px solid #dddddd;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
box-shadow:0 3px 5px gray;
}
.span11, .span4{
min-height:200px;
}
#contenido{
padding:0 10px;
}
#sidebar{
padding:8px;
margin:8px 0 8px 0;
border-left:1px solid #e8e8e8;
}
#sidebar hr{
width:270px;
}
.media-grid{
margin:0 auto;
width:300px;
}
button, input[type="submit"]{
color:#ffffff;
background-color:#0064cd;
background-repeat:repeat-x;
background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
background-image:-moz-linear-gradient(top, #049cdb, #0064cd);
background-image:-ms-linear-gradient(top, #049cdb, #0064cd);
background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);
background-image:-o-linear-gradient(top, #049cdb, #0064cd);
background-image:linear-gradient(top, #049cdb, #0064cd);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);
text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);
border-color:#0064cd #0064cd #003f81;
border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
margin:5px 0 0 0;
}
table[height="102"]{
margin:40px auto -10px auto;
width:700px;
}
table, table th + th, table td + td, table tr + tr td{
border: 0;
}
#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;}
Cualquier duda o sugerencia pueden comentarla
Saludos!
______________
/* Programador web freelance. */
/* twitter:
@jfdelarosa */
↑
siemprehackers
Nuevo
26-09-2011, 03:33 (UTC) Título del mensaje : Diseño
Hola a todos Buen Se agradece
salu2
______________
Busco Moderadores,chat,Foro
[No se permiten links externos a otros servicios fuera de PWG] (iPWG)
↑
nuestrasxarlas
Semi-Experto
Ubicación: España
26-09-2011, 11:17 (UTC) Título del mensaje :
buena plantilla
↑
supermarioworldsnes
Semi-Experto
26-09-2011, 12:21 (UTC) Título del mensaje :
Buen Diseño
Saludos
______________
Super Mario la lleva, es lo mejor en Videojuegos, se los recomiendo
↑
giobuscador
Destacado
Ubicación: Venezuela
26-09-2011, 14:05 (UTC) Título del mensaje :
Muy buena plantilla, pero esto va en css
______________
Twitter: @Giobuscador
↑
insaniquarium-deluxe
since-2007
Ubicación: Santiago, Chile
26-09-2011, 14:08 (UTC) Título del mensaje :
Me gustó, buena plantilla
buzzdungeon !
______________
↑
brianpwg
Semi-Experto
26-09-2011, 18:07 (UTC) Título del mensaje : Re: [CSS] Profesional by Buzzdungeon
Esta muy pero muy buena. :D ______________ Es una reina, es una reina, fiesta fiesta. Tito el bambino
↑
buzzdungeon
Destacado
Ubicación: México
26-09-2011, 20:33 (UTC) Título del mensaje :
Gracias a todos ^^
giobuscador escribió: Muy buena plantilla, pero esto va en css
gracias, no se pude publicar ahi o en acerca de códigos, por eso la postee aqui
______________
/* Programador web freelance. */
/* twitter:
@jfdelarosa */
↑
namespec
Junior
26-09-2011, 23:44 (UTC) Título del mensaje :
Esta muy bueno el diseño, te felicito
↑
kilometro6
Semi-Experto
27-09-2011, 00:08 (UTC) Título del mensaje :
Exelente plantilla, me ha gustado mucho... Es muy profecional así que le hace justicia al nombre xD
Saludos!
______________
↑
buzzdungeon
Destacado
Ubicación: México
27-09-2011, 01:05 (UTC) Título del mensaje :
Gracias
______________
/* Programador web freelance. */
/* twitter:
@jfdelarosa */
↑