Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje24-08-2013, 00:23 (UTC)    
Título del mensaje: [Css Design] WG_A002
Responder citando
Estube trabajando 2 dias adaptando esta plantilla para los usuarios de PGW, espero les guste...

Vistra Previa..


texto sobre el diseño
Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

</head>

<body>
<div class="wg_header nav1">
<div class="wg_logo">
<h1><a href="#">WG_A002</a></h1>
</div>
<div class="wg_menu">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Contacto</a></li>
<li><a href="#">Servicio</a></li>
<li><a href="#">Clientes</a></li>
</ul>
</div>
</div>
<div class="wg_banner nav1">
<img src="URL DE LA IMAGEN 1000x300" alt="" width="1000px" height="300px">
</div>
<div class="wg_wrapper">
<div class="wg_welcome nav1">
<h1>Bienvenido a mi sitio</h1>
<p>Este es el tema en ángulo, una plantilla CSS, totalmente compatible con los estándares diseñados por WebGrafica. Esta plantilla es gratuita y libre de uso personalizado.</p>
</div>
<div class="nav1" style="background: #FFFFFF">
<div class="nav3 right">
<div class="wg_sidebar">
<h1>Titulo</h1>
<p>Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto</p>
<ul>
<li>
<div class="wg_sidebar_image">
<a href=""><img src="http://imageshack.us/a/img713/2853/5upn.png" alt="" width="150px" height="150px"></a>
</div>
<div class="wg_sidebar_info">
<h1>Titulo</h1>
<p>Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto </p>
</div>
</li>
<li>
<div class="wg_sidebar_image">
<a href=""><img src="http://imageshack.us/a/img713/2853/5upn.png" alt="" width="150px" height="150px"></a>
</div>
<div class="wg_sidebar_info">
<h1>Titulo</h1>
<p>Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto</p>
</div>
</li>
<li>
<div class="wg_sidebar_image">
<a href=""><img src="http://imageshack.us/a/img713/2853/5upn.png" alt="" width="150px" height="150px"></a>
</div>
<div class="wg_sidebar_info">
<h1>Titulo</h1>
<p>Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto</p>
</div>
</li>
</ul>
</div>
</div>
<div class="nav2 left">
<div class="wg_main">

<a name="TemplateInfo"></a>


por debajo de la pagina
Cita:
</div>
</div>
<div style="clear:both"></div>
</div>
</div>
<div class="wg_footer nav1">
<p><a href="#">Link1</a> | <a href="#">Link2</a> | <a href="#">Link3</a></p>
<p> © 2013. todos los derechos reservados.</p>
<p>Plantilla web diseñada por <a href="http://WebGrafica.es.tl/" target="_blank">WebGrafica.</a></p>
</div>
</body>
</html>


CSS-code
Cita:
lli.nav_element{display: none;}
li.nav_element a{display: none;}
h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
li.nav_element{display: none;}

* { margin: 0; padding: 0; }

body {
background: #1B1B1B;
font-size: 12pt;
font-family: 'Source Sans Pro', sans-serif;
color: #555;
}

a{color:#555; text-decoration: none }
a:hover{color: #900; text-decoration: underline}

.left {float: left}
.right {float: right}

.nav1{width: 1000px; margin: auto;}
.nav2{width: 550px;}
.nav3{width: 450px;}

/****************Header*/
.wg_header{
overflow: hidden;
padding: 2em 0em;
}
/****************Logo*/
.wg_logo{
float: left;
width: 300px;
padding: 0 0 0 30px;
}
.wg_logo h1 {
line-height: 80px;
text-transform: uppercase;
font-size: 2.4em;
}
.wg_logo h1 a {
color: #FFFFFF;
text-shadow: 1px 1px 0px rgba(0,0,0,.2);
}

.wg_logo a {
border: none;
background: none;
text-decoration: none;
}
/****************Menu*/
.wg_menu{
float: right;
padding: 0em 2em;
background: #900;
}

.wg_menu ul {
float: right;
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}
.wg_menu li{
float: left;
display: list-item;
}
.wg_menu a{
display: block;
line-height: 80px;
margin-right: 1px;
padding: 4px 20px 0px 20px;
letter-spacing: 1px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-size: 14px;
font-weight: 500;
color: #FFFFFF;
border: none;
}
/****************Banner*/
.wg_banner{
margin-bottom: 1em;
}
/****************Banner*/
.wg_wrapper{
border-top: 5px #900 solid;
width: 100%;
background: #EAE9E5;
border-bottom: 5px #900 solid;
padding: 20px 0;
}
/****************Welcome*/
.wg_welcome{
padding: 20px;
}
.wg_welcome H1{
margin-bottom: 20px;
font-size: 2.7em;
font-weight: 700;
color: #454445;
}
/****************Main*/
.wg_main{
padding: 20px;
}
/****************Sidebar*/
.wg_sidebar{
padding: 20px;
}
.wg_sidebar h1{
margin-bottom: 1em;
font-size: 1.8em;
}
.wg_sidebar ul{
padding: 2em 0em 0em 0em;
overflow: hidden;
list-style: none;
color: #6c6c6c;
}
.wg_sidebar li{
overflow: hidden;
display: block;
padding: 20px 0em;
border-top: 1px solid #D1CFCE;
}
.wg_sidebar_image{
float: left;
margin: 0 2em 2em 0;
width: 150px;
height: 150px;
}
.wg_sidebar_info h1{
padding: 1.2em 0em 5px 0em;
letter-spacing: 0.10em;
text-transform: uppercase;
font-size: 1.1em;
font-weight: 900;
color: #454445;
}
/****************Footer*/
.wg_footer{
text-align: center;
color: #6A6A6A;
border-top: 1px #6A6A6A solid;
padding: 20px 0;
}

.wg_footer a:hover{
text-decoration: underline;
}


Si observas algun error en la plantilla ponte en CONTACTO conmigo, o dejalo en un comentario, lo solucionare mas pronto posible.

NOTA: Los codigos no quitan la publicidad de PaginaWebGratis.es como se presencia en la vista previa


Ultima edición por WebGrafica el Sab Sep 14, 2013 5:47 pm; editado 3 veces
↑
Mensaje24-08-2013, 02:23 (UTC)    
Título del mensaje:
Responder citando
Muy bonita
______________
↑
Mensaje24-08-2013, 22:33 (UTC)    
Título del mensaje:
Responder citando
esta muy buena... ,
______________
↑
Mensaje01-09-2013, 01:41 (UTC)    
Título del mensaje:
Responder citando
Excelente aporte! Me gustó el diseño
______________
↑
Mostrar mensajes anteriores:   
  • Página 1 de 1

  •  
    • Saltar a:  


Powered by phpBB © 2001, 2005 phpBB Group

© 2024 webme GmbH, Alemania. Todos los derechos reservados.