:: CP - Recursos Web :: - Natural Gloom

Natural Gloom

MUESTRA

[ CLICK PARA AGRANDAR ]

INFORMACIÓN

Diseño adaptable?: No

Fecha: 2013-08-10

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

Diseño para: Css Design

Garantia: SI ?

Reseña: Natural gloom es un diseño espectacular por parte de arcin que adaptamos para los usuarios de paginawebgratis. Se caracteriza por tener muchos espacios para colocar link's y recursos.

- Codigo 01: POR ENCIMA DE LA PAGINA

</center>
<style>
#header_wrapper
{background: Url("https://img.webme.com/pic/c/cssplantillas/ngloom4.jpg") repeat-x;} /* ANCHO 992PX ALTO: 150PX */
</style>
<div id="layout_wrapper"><div id="layout_wrapper2">
<div id="layout_wrapper3"><div id="layout_wrapper4">
<div id="header_wrapper"><div id="head">      
<div id="site_title">
   
   <h1><a href="http://cssplantillas.es.tl">Css Plantillas</a></h1>
   <h2>Recursos web!</h2>
   
</div></div></div>
<div id="navigation"><div id="nav"><ul class="tabbed">

<li class="current_page_item"><a href="URL">Inicio</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 class="clearer"></div>
</div><div id="subnav">
<ul class="tabbed">
   <li class="current_page_item"><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 class="clearer"></div>
</div></div>
<div id="main_wrapper"><div id="main">
<div class="left" id="content_wrapper">

Copiar codigo

- Codigo 02: POR DEBAJO DE LA PAGINA

</div><div class="right" id="sidebar_wrapper">
<div id="sidebar"><div class="box">
<div class="box_title">Nuestra web</div>
<div class="box_content"><p>

Aenean sit amet dui at felis lobortis dignissim. Pellentesque risus nibh, feugiat in, convallis id, congue ac, sem. Sed tempor neque in quam.

</p></div></div>
<div class="box"><div class="box_title">Categorias</div>
<div class="box_content"><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><div class="box">
<div class="box_title">Recursos</div>
<div class="box_content"><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></div></div>
<div class="clearer"></div>
</div></div>

<div id="dashboard_outer"><div id="dashboard">
<div class="col3 left"><div class="col3_content">
<div class="col_title">Link's final 1</div><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>
<div class="col3mid left"><div class="col3_content">
<div class="col_title">Link's final 2</div><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>
<div class="col3 right"><div class="col3_content">
<div class="col_title">Link's final 3</div><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>
<div class="clearer"></div></div></div>
<div id="footer"><div class="left">

© 2009 Website.com - tusitioweb

</div><div class="right">
<a href="http://templates.arcsin.se">Website template</a> Adapter by: <a href="http://cssplantillas.es.tl">Css Plantillas</a>
</div>
<div class="clearer"></div>
</div></div></div></div></div>
<center>

Copiar codigo

- Codigo 03: CSS-Code

//--> </style><center>
<style>
#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;}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, textarea, input, select {margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline;}
table {border-collapse: collapse; border-spacing: 0;}
caption, th, td {text-align: left; font-weight: normal;}
table, td, th {vertical-align: middle;}
blockquote:before, blockquote:after, q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img {border: none;}
html {height: 100%;padding-bottom: 1px;}
body {background: #797E84 url("https://img.webme.com/pic/c/cssplantillas/ngloom1.jpg");
color:#444;font:normal 80% sans-serif;line-height:1.5;}
h1,h2,h3,h4,h5,h6 {color:#555;font-weight:normal;line-height:1;margin-bottom:0.3em;}
h4,h5,h6 {font-weight: bold;}
h1 {font-size: 2.6em;}
h2 {font-size: 2em;}
h3 {font-size: 1.5em;}
h4 {font-size: 1.25em;}
h5 {font-size: 1.1em;}
h6 {font-size: 1em;}
p {margin-bottom: 1em;}
a:focus,a:hover {color: #000;}
a {color: #357;text-decoration: underline;}
abbr, acronym {border-bottom: 1px dotted #666;}
address {margin-bottom: 1.5em;}
blockquote {margin: 1.5em;}
del, blockquote {color: #666;}
em, dfn, blockquote, address {font-style: italic;}
strong, dfn {font-weight: bold;}
sup, sub {line-height: 0;}
pre {margin: 1.5em 0;white-space: pre;}
pre,code,tt {font: 1em monospace;line-height: 1.5;}
li ul, li ol {margin-left: 1.5em;}
ul, ol {margin: 0 1.5em 1.5em 1.5em;}
ul {list-style-type: disc;}
ol {list-style-type: decimal;}
dl {margin: 0 0 1.5em 0;}
dl dt {font-weight: bold;}
dd {margin-left: 1.5em;}
ul.tabbed {display: inline;margin: 0;}
ul.tabbed li {float: left;list-style: none;margin: 0;}
textarea {overflow: auto;}
input.text, textarea, select {background: #FCFCFC;border: 1px inset #AAA;padding: 4px 5px;}
input.text:focus, textarea:focus, select:focus {background: #FFFFF5;}
input.button {background: #F9F9F3;border: 1px outset #AAA;padding: 4px 5px;}
input.button:active {border-style: inset;}
.form_property, .form_value {float: left;}
.form_property {text-align: right;width: 110px;}
.form_value {padding-left: 24px;}
.form_row_submit .form_value {padding-left: 132px;}
.center,.aligncenter {display: block;margin-left: auto;margin-right: auto;}
img.bordered,img.alignleft,img.alignright,img.aligncenter {background-color: #FFF;
border: 1px solid #DDD;padding: 3px;}
img.alignleft, img.left {margin: 0 1.5em 1em 0;}
img.alignright, img.right {margin: 0 0 1em 1.5em;}
.left,.alignleft {float: left;}
.right,.alignright {float: right;}
.clear,.clearer {clear: both;}
.clearer {display: block;font-size: 0;line-height: 0;}
.content_separator, .archive_separator {background: #D5D5D5;clear: both;color: #FFE;
display: block;font-size: 0;height: 1px;line-height: 0;margin: 12px 0 24px;}
.archive_separator {margin: 0 0 14px;}
.post {margin-bottom: 24px;}
.post_title a,.post_meta a, .post_date a {text-decoration: none;}
.post_title a:hover,.post_meta a:hover, .post_date a:hover {text-decoration: underline;}
.post_date {border-top:1px solid #D5D5D5;color:#777;font-size:0.9em;padding:8px 0 12px;}
.post_date a {color: #444;}
.post_meta {background: #E7E7E7;border: 1px solid #D7D7D7;
color: #777;font-size: 0.9em;padding: 6px 10px;}
.post_meta a {color: #345; }
.post_meta a:hover {color: #001;}
.archive_pagination {margin-bottom: 1.6em;}
.archive_post {margin-bottom: 14px;}
.archive_post_title {padding-top: 3px;}
.archive_post_date {background:#FAFAFA;border-bottom:1px solid #C5C5C5;border-right:1px solid #CFCFCF;
float: left;margin-right:12px;padding: 2px 0 5px;text-align: center;width: 46px;}
.archive_post .post_date {border: none;padding:3px 0 0;}
.archive_post_day {font: normal 1.6em Georgia,serif;}
.thumbnails {margin: 0 0 1em -8px;}
.thumbnails a.thumb{background:#D5D5D5;display:block;float:left;margin:0 0 8px 8px;padding:3px;}
.thumbnails a.thumb:hover {background: #C0C0C0;}
.thumbnails .thumb img {display: block;}
.box {margin-bottom: 0.6em;}
.box_title {background: #D2D5D8;border-bottom: 1px solid #C6C9CB;color: #70767A;
font: bold 1.3em sans-serif;padding: 7px 10px 6px;}
.box_content {padding: 8px 0 8px;}
.box li:first-child {border-top: none;}
div.comment_list {border-top: 1px solid #D6D6D6; margin: 1em 0 2em;}
.comment {border-bottom: 1px solid #D6D6D6;padding-top: 10px;}
.comment_date {font-size: 0.9em;}
.comment_date a {color: #567;text-decoration: none;}
.comment_date a:hover {color: #001;text-decoration: underline;}
.comment_body {padding-top: 4px;}
.comment_gravatar {width: 48px;}
.comment_gravatar img {background: #FFF;border: 1px solid #DDD;padding: 2px;}
#layout_wrapper {background: url("https://img.webme.com/pic/c/cssplantillas/ngloom2.jpg") repeat-x;
padding-bottom: 16px;}
#layout_wrapper2 {background: url("https://img.webme.com/pic/c/cssplantillas/ngloom3.jpg") no-repeat center top;
padding-top: 10px;}
#layout_wrapper3 {background: #FFF;margin: 0 auto;width: 992px;   }
#layout_wrapper4 {padding: 6px;}
#header_wrapper {height: 150px;}
#head {padding: 48px 48px 0 48px;}
#site_title h1 {color: #A0C3D0;font-size: 2.5em;}
#site_title h1 a {color: #A0C3D0;text-decoration: none;}
#site_title h1 a:hover {color: #DDD;}
#site_title h2 {color: #999;font-size: 1.3em;}
#navigation {background: #6E7D85 url("https://img.webme.com/pic/c/cssplantillas/ngloom5.gif") repeat-x;
margin-bottom: 3px;padding-top: 4px;}
#navigation a {color:#E0E6EA;display:block;font-weight:bold;text-decoration: none;}
#navigation a:hover {color: #F0F6FA;}
#nav li {border-right: 1px solid #54646C;}
#nav a {font-size: 1.3em;padding: 10px 16px;}
#nav a:hover {background: #5E6D75;}
#nav li.current_page_item a {background: #6E7D85;color: #FFF;}
#subnav {border-top: 1px solid #555A5F;background: #60656A;}
#subnav li {border-right: 1px solid #50555A;}
#subnav a {font-size: 1.1em;padding: 9px 12px;}
#subnav a:hover {background: #555A5F;}
#main_wrapper {background: url("https://img.webme.com/pic/c/cssplantillas/ngloom6.gif") repeat-y;
border-bottom: 1px solid #C3C4C1;margin-bottom: 3px;}
#main {background: url("https://img.webme.com/pic/c/cssplantillas/ngloom7.gif") no-repeat;padding: 24px 0;}
#content_wrapper {width: 690px;}
#content {padding: 0 20px;}
#sidebar_wrapper {width: 290px;}
#sidebar {padding: 0 18px;}
#dashboard_wrapper {}
#dashboard {background: #C9CDCF url("https://img.webme.com/pic/c/cssplantillas/ngloom8.gif") repeat-x;
border:1px solid #ACAFB0;color:#404448;margin-bottom:3px;padding: 16px;}
#dashboard .col3 {width: 288px;}
#dashboard .col3mid {width: 370px;}
#dashboard .col3mid .col3_content {border-left: 1px solid #B0B4B8;
border-right: 1px solid #B0B4B8;margin: 0 20px;padding: 0 20px;}
#dashboard .col_title {color: #606669;font-size: 1.5em;}
#dashboard ul {margin: 0;}
#dashboard li {border-bottom:1px solid #BABEBF;list-style:none;padding:5px 0;}
#dashboard li a {color: #404448;text-decoration: none;}
#dashboard li a:hover {color: #202428;text-decoration: underline;}
#footer {background: #DDD;border: 1px solid #CCC;padding: 8px 12px;}
#footer .right, #footer .right a {color: #777;text-decoration: none;}
#footer .right a:hover {color:#223;text-decoration: underline;}
* html #main, * html #dashboard {height: 0.01%; min-height: 0.01%;}
#webme_footer_textlink_dont_hide {color:#111;background-color:#757c84;font-size:9px;font-family:arial;text-align:center;}

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 los códigos va en mayúscula lo que debes editar, en el primer código en la quinta linea puedes editar y colocar la imagen que tu desees de cabezal, busca esto "https://img.webme.com/pic/c/cssplantillas/ngloom4.jpg" y reemplazalo por el que tu deses.
- Para cualquier consulta visita nuestro Foro de soporte.

:: CP - Recursos Web ::

Natural Gloom

Natural Gloom

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