Plantilla Web Shop
Autor: iAxtrix | Créditos: Bitt Net
Características:
·Menu Superior Ancho Completo·Footer Ancho Completo
·Una Columna
Por Encima De La Página:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="header">
<div class="centrar">
<div class="left">
<img src="http://i.imgur.com/XGVDd.png" />
</div>
<div class="right">
<ul class="menu">
<li class="activo"><a href="#pagina" class="first">Menu 1</a></li>
<li><a href="#pagina">Menu 2</a></li>
<li><a href="#pagina">Menu 3</a></li>
<li><a href="#pagina">Menu 4</a></li>
<li><a href="#pagina">Menu 5</a></li>
<li><a href="#pagina" class="last">Menu 6</a></li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
<div class="centrar">
<div id="cuerpo">
<div class="section">
Por Debajo De La Página:
<div class="clear"></div>
</div>
</div>
<div id="footer">
<div class="centrar">
<div class="left" style="padding: 5px 0px;">
2012 © <a href="#">Tu Web</a>
</div>
<div class="right" style="padding: 5px 0px; text-align:right;">
<a href="http://www.bittnet.es.tl" >Plantilla Por Bitt Net</a>
</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
CSS Sin Style Tags:
@charset "utf-8";
/* CSS Document */
/* ONLINE SHOP */
* {
padding: 0 ;
margin: 0 ;
}
body {
background: url("http://i.imgur.com/6nhyD.png") ;
}
.centrar {
width: 960px;
margin: 0 auto;
}
.centro {
margin: 0 auto;
}
.clear {
clear: both;
}
.left {
float: left;
}
.right {
float: right;
}
/* HEADER */
#header, #footer {
background: #222222;
padding: 0px;
}
#footer {
color: #ffffff;
}
#footer a {
color: #f1f1f1;
}
#header .left, #footer .left { width: 300px; } #header .right, #footer .right { width: 660px; }
ul.menu {
float: right;
}
ul.menu li {
list-style:none;
float:left;
padding: 14px 0;
}
ul.menu li a {
border-right: 1px solid #141414;
border-left: 1px solid #2e2e2e;
padding: 14px 10px;
color: #fffffF;
text-shadow: 0 1px 1px #000;
text-decoration: none;
}
.first { border-left: none !important; } .last { border-right: none !important; }
/* CUERPO */
#cuerpo {
background: #ffffff;
padding: 5px 10px;
margin: 10px 0;
}
#ciclo {
float: left;
margin: 0 7px 3px 0;
}
h1 {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #222222;
font-size: 30px;
margin-bottom: 3px;
}
.cliente {
padding: 3px;
width: 170px;
margin: 3px;
background: #f3f3f3;
border: 3px solid #c9c9c9;
text-align: center;
float: left;
/*Transition*/
-webkit-transition: all 1s ease-out;;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
}
.cliente:hover {
border: 3px solid #999;
}
/* BOTONES */
a.button{
background: #fffbe4;
display:block;
border: 1px solid #e5e2cc;
color:#555555;
font-size: 13px;
padding: 3px;
margin:5px;
text-decoration:none;
float: right;
/*Transition*/
-webkit-transition: all 1s ease-out;;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
}
a:hover.button{
color:#333;
box-shadow: 0 0 5px #b3b09f;
}
/* TABLA DE PRECIOS */
h2 {
color: #5b5b5b;
font-size:21px;
background: url("http://i.imgur.com/asMq8.jpg");
padding: 0 0 25px 0;
}
.columna {
width: 200px;
background: #dedede;
padding: 3px;
float: left;
text-align: center;
margin: 13px 0;
}
#recomendado {
background: #999 !important;
width: 300px;
padding: 3px;
float: left;
box-shadow: 0 0 15px #999999;
text-align: center;
}
#recomendado .row { color: #000; }
#recomendado .price { border-color: #999; }
.price {
width: 40px;
height: 40px;
padding: 10px;
text-align: center;
background: #5b5b5b;
color: #ffffff;
text-shadow: 0 1px 1px #000;
border-radius: 50px;
margin-top: -25px;
border: 3px solid #dedede;
position: relative;
}
sup {
font-size: 50%;
}
.row {
padding: 3px;
color: #666;
height: 19px;
}
.row:nth-child(odd) {
background: #ccc;
}
a.button-prices{
background: #fffbe4;
display:block;
border: 1px solid #e5e2cc;
color:#555555;
font-size: 13px;
padding: 3px;
margin:5px;
text-decoration:none;
/*Transition*/
-webkit-transition: all 1s ease-out;;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
}
a:hover.button-prices{
color:#333;
box-shadow: 0 0 5px #b3b09f;
}
Recursos Extras:
Botón Con Animación:<a href="#" class="button"><span class="add">Más Información</span></a>
Cuadro Con Imagen Y Texto:
<a href="#"><div class="cliente"><img src="http://i.imgur.com/YF4yz.png" /><br /> NUBE <div class="clear"></div></div></a>
Tabla De Clientes:
<div class="centro">
<div class="columna">
<h2>Basico</h2>
<div class="price centro">
$12<sup>00</sup><br>
MES
</div>
<a href="#" class="button-prices">
<span class="add">Contratar</span>
</a>
<div class="row">Espacio Ilimitado</div>
<div class="row">Trafico Ilimitado</div>
<div class="row">2 Cuentas FTP</div>
<div class="row">2 Bases De Datos</div>
<div class="row"></div>
<div class="row"></div>
</div>
<div id="recomendado">
<h2>Intermedio<br>Recomendado</h2>
<div class="price centro">
$20<sup>00</sup><br>
MES
</div>
<a href="#" class="button-prices">
<span class="add">Contratar</span>
</a>
<div class="row">Espacio Ilimitado</div>
<div class="row">Trafico Ilimitado</div>
<div class="row">10 Cuentas FTP</div>
<div class="row">10 Bases De Datos</div>
<div class="row">Correo Personalizado</div>
<div class="row"></div>
</div>
<div class="columna">
<h2>Avanzado</h2>
<div class="price centro">
$50<sup>00</sup><br>
MES
</div>
<a href="#" class="button-prices">
<span class="add">Contratar</span>
</a>
<div class="row">Espacio Ilimitado</div>
<div class="row">Trafico Ilimitado</div>
<div class="row">Cuentas FTP Ilimitadas</div>
<div class="row">Bases De Datos Ilimitadas</div>
<div class="row">Correo Personalizado</div>
<div class="row">ProPanel</div>
</div>
</div>