:: CP - Recursos Web :: - Shades of gray

Shades of gray

MUESTRA

[ CLICK PARA AGRANDAR ]

INFORMACIÓN

Diseño adaptable?: No

Fecha: 2011-09-12

Creditos: https://vikpe.org/archive/arcsin-web-templates

Diseño para: Css Design

Garantia: SI ?

Nota: Shades of gray, es un diseño oscuro y con dos columnas, es muy atractivo y fácil de implementar.

- Codigo 01: Texto sobre el diseño

Copiar codigo

- Codigo 02: Texto por debajo de la página

</div></div><div class="right">
<div class="subnav">
	<h1>Box de contenido</h1><p>
Aqui puedes colocar lo que quieras, videos, imagenes, objetos flash, etc.
	</p><h1>Menu vertical 1</h1><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>
	</ul><h1>Menu vertical 2</h1><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>
	</ul><h1>Menu vertical 3</h1><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>
	</ul><h1>Menu vertical 4</h1><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>
</ul></div></div>
<div class="clearer"><span></span></div>
</div><div class="footer">
<div class="col3">
		<h2>Tincidunt</h2><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>
</ul></div><div class="col3center">
		<h2>Sed purus</h2><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>
</ul></div><div class="col3">
		<h2>Praesent</h2><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>
</ul></div>
<div class="bottom">
<span class="left">© 2018 <a href="URL">Tu sitio web</a>. Valid <a href="URL">CSS</a> & <a href="URL">XHTML</a>.</span>
<span class="right"><a href="https://templates.arcsin.se">Website template</a> por: <a href="https://arcsin.se/">Arcsin</a> adaptación por: <a href="https://cssplantillas.es.tl">CssPlantillas</a></span>
<div class="clearer"><span></span></div></div></div></div><center>

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;}
/* Nombre: Shades of Gray
Author: Viktor Persson
Autor URI: https://arcsin.se
Adaptación para PwG: https://cssplantillas.es.tl */
a {text-decoration: none;}
body {background: #111 url("https://img.webme.com/pic/w/webcp/shades01.jpg") repeat-y center top;
color: #BBB;font: normal 62.5% "Lucida Sans Unicode",sans-serif;}
p,ul {font-size: 1.2em;padding-bottom: 1.2em;}
blockquote {font: bold 1em sans-serif;}
code {background: #444;display: block;font-size: 12px;
margin: 0 10px 12px;overflow: auto;padding: 8px 10px;white-space: pre;}
img {border: none;}
ul {margin-left: 2em;}
h1 {font: normal 2.4em sans-serif;}
h2 {font: bold 1.6em Verdana,sans-serif;padding-bottom: 4px;}
.clearer {clear: both;}
.stripes {background: #333 url("https://img.webme.com/pic/w/webcp/shades02.gif");height: 6px;}
.left {float: left;}
.right {float: right;}
.header {background: #111;border-bottom: 1px solid #333;font: normal 2em sans-serif;height: 120px;}
.header a {color: #888;display: block;line-height: 120px;text-decoration: none;width: 100%;}
.header span {padding-left: 32px;}
.header a:hover {background: #191919;color: #BBB;}
.container {border: 3px solid #444;}
.main {background: #303030;border-bottom: 1px solid #2A2A2A;border-left: 1px solid #2A2A2A;}
.main .left {width: 64%;}
.main .right {width: 36%;}
.content {border-left: 1px solid #444;border-top: 1px solid #444;padding: 16px;}
.content h1 {background: url("https://img.webme.com/pic/w/webcp/shades03.gif") repeat-x left bottom;
color: #EEE;margin-bottom: 10px;padding: 6px 0 4px;}
.content a {color: #999;text-decoration: underline;}
.content a:hover {color: #CCC;}
.content .descr {margin-bottom: 5px;}
.nav {background: #191919 url("https://img.webme.com/pic/w/webcp/shades04.gif");}
.nav a {background: #191919 url("https://img.webme.com/pic/w/webcp/shades04.gif");border-right: 1px solid #161616;
color: #CCC;float: left;font: bold 1em Verdana,sans-serif;line-height: 51px;padding: 0 20px;}
.nav a:hover {background: #191919 url("https://img.webme.com/pic/w/webcp/shades05.gif");}
.subnav {background: #2A2A2A;border: 1px solid #1E1E1E;border-top-color: #444;	padding: 12px;}
.subnav h1 {padding-top: 8px;}
.subnav ul {margin: 0;}
.subnav li {background: url("https://img.webme.com/pic/w/webcp/shades06.gif") no-repeat left bottom;
list-style: none;margin: 0;}
.subnav li a {color: #777;line-height: 2.4em;padding-left: 18px;text-decoration: none;}
.subnav li a:hover {color: #BBB;}
.footer {background: #191919;border-top: 1px solid #444;color: #999;padding: 3% 3% 1%;}
.footer ul {border-top: 1px solid #262626;margin: 0;}
.footer li {border-bottom: 1px solid #262626;list-style: none;}
.footer li a {display: block;line-height: 2em;padding-left: 4%;width: 96%;}
.footer a {color: #666;}
.footer a:hover {color: #BBB;background: #222;}
.col3,.col3center {float: left;width: 31%;}
.col3center {margin: 0 3%;}
.bottom {color: #666;clear: both;font-size: 1.1em;}
.bottom a, .bottom .right a:hover {color: #888;}
.bottom .right, .bottom .right a {color: #555;}
#webme_footer_textlink_dont_hide {color:#999;background-color:rgba(0, 0, 0, 0.0);font-size:9px;font-family:arial;}

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)

Descarga no disponible

[ CLICK PARA VER TUTORIAL ]

NOTAS:
Todo lo que debes editar esta en mayúsculas. Solo edita el primer y segundo código.
- Para cualquier consulta visita nuestro Foro de soporte.

:: CP - Recursos Web ::

Shades of gray

Shades of gray

MUESTRA

INFORMACIÓN

- Codigo 01: Texto sobre el diseño

- Codigo 02: Texto por debajo de la página

- Codigo 03: CSS-Code

ENLAZANOS

Descarga

Buscador

Lo más reciente:

PUBLICIDAD

EN TWITTER!

Suscribete

Lo más buscado