:: CP - Recursos Web :: - Black and grey

Black and grey

Black & Grey

MUESTRA

[ CLICK PARA AGRANDAR ]

INFORMACIÓN

Diseño adaptable?: No

Fecha: 2011-09-18

Creditos: CssPlantillas

Diseño para: Css Design

Garantia: SI ?

Descripción:

Este es un diseño de dos columnas con un menú superior que te permitirá, tener un gran espacio para colocar todo el contenido que quieras, es muy fácil de implementar.

- Codigo 01: POR ENCIMA DE LA PAGINA

Copiar codigo

- Codigo 02: POR DEBAJO DE LA PAGINA

<div class="box1"><div class="box1-in">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce quis leo. Nunc est lacus…<br>
<a href="#">Leer mas..</a>
</div></div>
<div class="box2"><div class="box2-in">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce quis leo. Nunc est lacus…<br>
<a href="#">Leer mas..</a>
</div></div>
</div></div>
<hr class="noscreen" />
<div class="column-right">
<div class="column-right-in"><ul>
	<li><a href="URL">Link's 1</a></li>
	<li><a href="URL">Link's 2</a></li>
	<li><a href="URL">Link's 3</a></li>
	<li><a href="URL">Link's 4</a></li>
	<li><a href="URL">Link's 5</a></li>
	<li><a href="URL">Link's 6</a></li>
</ul>
<div class="address">
Pon aqui el contenido que quieras
</div></div>
</div>
<div class="cleaner"></div>
</div>
<hr class="noscreen" />
<div id="footer"><ul>
	<li><a href="/" class="active">Portada</a>|</li>
	<li><a href="#">Quienes somos</a>|</li>
	<li><a href="#">Servicios</a>|</li>
	<li><a href="#">Videos</a>|</li>
	<li><a href="#">Contacto</a>|</li>
</ul>
<p class="cop">Copyright © 2009 <a href="URL">Tu web</a>. Todos los derechos reservados.</p>
</div>

<div style="color:#ccc;text-align:center;">Diseño por: <a href="http://cssplantillas.es.tl" target="url">
<font color="#cccccc">Css Plantillas</font></div>

Copiar codigo

- Codigo 03: CSS-Code

#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;} 
#header {display: none;}
#title {display: none;}
#nav_container {display:none;}
table {margin-left:auto;margin-right:auto;}
* { margin: 0; padding: 0; }
html { height: 100%; font-size: 62.5% }
body {height: 100%;background:#454545;
text-align: center;font: 1.2em Verdana, Arial, Helvetica, sans-serif;}
a:link, a:visited {color: #005890;text-decoration: none;font-weight: bolder;}
a:hover{text-decoration: none;}
div.address {background: #eaeaea;border: 1px solid #ccc;margin: 40px 10px 0 20px;}
.noscreen {display: none;}
.cleaner {clear: both;height: 0;font-size: 0;visibility: hidden;}
.hidden {position: absolute;top: -10000px;left: 0;width: 1px;
height: 1px;overflow: hidden;}
#wrapper {width: 900px;margin: 0px auto 0 auto;padding-bottom: 10px;}
h1 {font-size: 1.8em;color: #8DE0FF;position: relative;z-index: 2;}
h1 a:link, h1 a:visited {text-decoration: none;color: #8DE0FF;}
h2 {font: 1.4em Georgia, "Times New Roman", Times, serif;
color: #1473B0;letter-spacing: 1px;margin-bottom: 5px;
border-bottom: 1px dotted #1473B0;padding-bottom: 3px;}
p {line-height: 1.7;}
#head {width: 900px;height: 173px;
margin: 0 auto;position: relative;text-align: left;}
#head p.title {color: white;line-height: 1.8;position: relative;z-index: 2;}
#header-in {position: absolute;
width: 900px;height: 119px;bottom: 0;left: 0;}
#header-in p {font: 2.1em Georgia, "Times New Roman", Times, serif;color: white;
position: absolute;top: 34px;left: 175px;letter-spacing: 1px;}
.bar {width: 900px;height: 12px;background:#2B2B2B;}
#menu {position: absolute;top: 20px;right: 8px;z-index: 3;}
#menu li {float: left;display: inline;list-style-type: none;}
#menu li a {float: left;display: inline;list-style-type: none;text-align: center;
color: #FFFFFF;font-weight: normal;text-decoration: none;
background-color: #202020;padding: 0 0.8em;height: 31px;
line-height: 30px;margin-left: 4px;border-top: 3px solid black;}
#menu li a:hover, #menu li a.active  {background-color: #0D0D0D;
color: #FFFFFF;border-top: 3px solid #00A7ED;text-decoration: none;}
.content {width: 900px;background-color: white;}
.column-left {float: left;width: 66%;text-align: left;}
.column-right {float: right;width: 33%;text-align: center;}
.column-left-in {margin: 1.3em 1em 3em 1.5em;}
.column-right-in {margin: 1.3em 2.8em 3em 2em;}
.column-right ul {margin: 10px 10px 0 20px;list-style-type: none;}
.column-right ul li {display: block;}
.column-right ul li a, .column-right ul li a:visited {
color: #3A3A3A;font-weight: normal;text-decoration: none;background:#fafafa;
display: block;padding: 10px 0;border-bottom: 1px solid #ccc;}
.column-right ul li a:hover, .column-right ul li a.active {
color:#333;border-bottom: 1px solid #999;background:#eaeaea;}
.box1 {float: left;background-color: #eaeaea;
border: 1px solid #ccc;width: 270px;margin: 20px 13px 0 0;}
.box2 {float: left;background-color: #eaeaea;
border: 1px solid #ccc;width: 270px;margin: 20px 0 0 0;}
.box1-in, .box2-in {margin: 0.4em 0.8em 1.3em 0.8em;}
#footer {width: 900px;height: 92px;background:#2B2B2B;border-bottom: 3px solid #101010;}
#footer a:link, #footer a:visited {color: #FFFFFF;
font-weight: normal;}
#footer ul {list-style-type: none;color: #FFFFFF;padding: 13px 0 0 10px;
text-align: left;font-size: 0.9em;float: left;width: 430px;}
#footer ul li {float: left;display: inline;white-space: nowrap;}
#footer ul li a, #footer ul li a:visited {margin: 0 6px;}
#footer p.cop {font-size: 0.9em;color: #FFFFFF;float: right;padding: 12px 16px 0 0;
margin: 0;line-height: 1.6;}
p.mantis-a {color: #C0C0C0;font-size: 0.9em;
margin: 7px 8px 10px 0;line-height: 1;text-align: right;}
p.mantis-a a, p.mantis-a a:visited {color: #C0C0C0;font-weight: normal;}
p.mantis-a a:hover {color: #FFFFFF;}

Copiar codigo

ENLAZANOS

URL DIRECTA

LINK'S HTML

URL CORTA

Descarga

Ahora puedes descargar nuestros recursos, (No en todos los recursos esta disponible esta opcion, disfrutalo)

Descargar

[ CLICK PARA VER TUTORIAL ]

NOTAS:
En el diseño va destacado con mayúscula donde debes editar para colocar tus propias configuraciones. En el primer código pude poner una imagen de cabezal.
- Para cualquier consulta visita nuestro Foro de soporte.

:: CP - Recursos Web ::

Black and grey

Black & Grey

MUESTRA

INFORMACIÓN

- Codigo 01: POR ENCIMA DE LA PAGINA

- Codigo 02: POR DEBAJO DE LA PAGINA

- Codigo 03: CSS-Code

ENLAZANOS

Descarga

Buscador

Lo más reciente:

PUBLICIDAD

EN TWITTER!

Suscribete

Lo más buscado