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

Recuerda que todas tus dudas y consultas las puedes hacer en nuestro foro de soporte

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.

Ya lo han visto 76 visitantesGracias por tu visita!

Recomendamos: Rotador de fondo

Este código hace que cada cierto tiempo (Segundos) la imágen de fondo de tu sitio web cambie, los bueno de este código es....

IR AL RECURSO | CERRAR

Buscador

Lo más reciente:

Color predeterninado navegador
Ahora puedes darle al navegador un color predeterminado para abrir tu sitio web, asi adaptarlo al diseño de tu sitio web.
Cat. Generadores | Ver recurso »
Fondo estilo muralla de ladrillo con css
Este es un efecto solamente con CSS, el cual dara un efecto de muralla de ladrillos al fondo de tu web, puedes modificar los colores a tu estilo.
Cat. Formas Css | Ver recurso ?
Fondo Confeti Css
Este es un código que hará el efecto de confeti cayendo en tu web, ideal para año nuevo o para alguna celebración. Es muy fácil de implementar.
Cat. Formas Css | Ver recurso »
CSS Slide
Dejamos a tu disposición este slide que esta hecho solo con CSS, es muy simple pero efectivo a la hora de exhibir imágenes, soporta hasta cuatro imágenes. Este recurso se adapta a pantallas de mobiles y tablets.
Cat. Formas Css | Ver recurso »
Panel desplegable Jquery
Este recurso es muy útil para tu sitio, te permitirá colocar más contenido a tu sitio y poder ocultarlo y solo ver cuando el usuario lo decida, es muy fácil de implementar.
Cat. JQuery | Ver recurso »
LLuvia de estrellas en tu web
Si buscas darle un efecto a tu pagina como estar viajando en el espacio, este se vera genial! es muy simple de instalar y se ve de maravilla.
Cat. Javascript | Ver recurso »
BUSCADOR INTERNO CP
Este menú es muy sencillo de instalar, pero primero lo debes configurar con tus direcciones, solo debes colocar cada una de las palabras que deseas que tus usuarios busque mas la URL. Es buscador genial y de muy buen diseño.
Cat. Juegos Js | Ver recurso »
Barra de progreso
Barra de progreso es un recurso que a medida que vas bajando la pagina una barra ubicada en el pie se va completando, es muy sencilla su instalación y muy útil.
Cat. JQuery | Ver recurso »
Scroll lineal
Scroll lineal te permite mostrar los titulares de tus noticias de una forma muy dinámica y sencilla. Es muy fácil de configurar y muy útil!
Cat. Javascript | Ver recurso »
Z Slide
Z Slide, es un simple modo de presentar tus imágenes o tus titulares, es muy fácil de implementar y te ahorra espacio y le dará interactividad a tu sitio.
Cat. JS Avanzados | Ver recurso ?

Color predeterninado navegador
Ahora puedes darle al navegador un color predeterminado para abrir tu sitio web, asi adaptarlo al diseño de tu sitio web.
Cat. Generadores | Ver recurso »
Fondo estilo muralla de ladrillo con css
Este es un efecto solamente con CSS, el cual dara un efecto de muralla de ladrillos al fondo de tu web, puedes modificar los colores a tu estilo.
Cat. Formas Css | Ver recurso ?
Fondo Confeti Css
Este es un código que hará el efecto de confeti cayendo en tu web, ideal para año nuevo o para alguna celebración. Es muy fácil de implementar.
Cat. Formas Css | Ver recurso »
CSS Slide
Dejamos a tu disposición este slide que esta hecho solo con CSS, es muy simple pero efectivo a la hora de exhibir imágenes, soporta hasta cuatro imágenes. Este recurso se adapta a pantallas de mobiles y tablets.
Cat. Formas Css | Ver recurso »
Panel desplegable Jquery
Este recurso es muy útil para tu sitio, te permitirá colocar más contenido a tu sitio y poder ocultarlo y solo ver cuando el usuario lo decida, es muy fácil de implementar.
Cat. JQuery | Ver recurso »
LLuvia de estrellas en tu web
Si buscas darle un efecto a tu pagina como estar viajando en el espacio, este se vera genial! es muy simple de instalar y se ve de maravilla.
Cat. Javascript | Ver recurso »
BUSCADOR INTERNO CP
Este menú es muy sencillo de instalar, pero primero lo debes configurar con tus direcciones, solo debes colocar cada una de las palabras que deseas que tus usuarios busque mas la URL. Es buscador genial y de muy buen diseño.
Cat. Juegos Js | Ver recurso »
Barra de progreso
Barra de progreso es un recurso que a medida que vas bajando la pagina una barra ubicada en el pie se va completando, es muy sencilla su instalación y muy útil.
Cat. JQuery | Ver recurso »
Scroll lineal
Scroll lineal te permite mostrar los titulares de tus noticias de una forma muy dinámica y sencilla. Es muy fácil de configurar y muy útil!
Cat. Javascript | Ver recurso »
Z Slide
Z Slide, es un simple modo de presentar tus imágenes o tus titulares, es muy fácil de implementar y te ahorra espacio y le dará interactividad a tu sitio.
Cat. JS Avanzados | Ver recurso ?

EN TWITTER!

Tweets by cssplantillas

:: 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