:: CP - Recursos Web :: - Plain & Clean

Plain & Clean

+ Cliquea la imagen

Informacion:
Nombre: Plain & Clean
Fecha: 05-06-2013
Creditos: FreeCssTemplates
Garantia: Si ?
Diseño para: CssDesign

Enlazanos:

Compartir:

[ Codigos: ]

- Por encima de la pagina (texto sobre el diseño):

- Por debajo de la pagina:

<div id="sidebar"><ul><li>
<div id="search" >
<form method="get" action="#"><div>
<input type="text" name="s" id="search-text" value="" />
<input type="submit" id="search-submit" value="GO" />
</div></form></div>
<div style="clear: both;"> </div></li><li>
  <h2>TITULO BOX 1</h2><p>
Aqui escribe lo que quieras, una descripción, información, etc.
</p></li><li>
  <h2>SUB-MENU 1</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>
  <li><a href="URL">LINK'S 6</a></li>
</ul></li><li>
  <h2>SUB-MENU 2</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>
  <li><a href="URL">LINK'S 6</a></li>
</ul></li><li>
  <h2>SUB-MENU 3</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>
  <li><a href="URL">LINK'S 6</a></li>
</ul></li></ul></div>
<div style="clear: both;"> </div></div></div>
<div id="footer-content" class="container">
<div id="footer-bg"><div id="column1">
  <h2>TITULO BOX 2</h2><p>
Aqui escribe lo que quieras, una descripción, información, etc.
</p></div><div id="column2">
  <h2>TITULO BOX 3</h2><p>
Aqui escribe lo que quieras, una descripción, información, etc.
</p></div><div id="column3">
  <h2>SUB-MENU 4</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></div>
<div id="footer"><p>
Copyright (c) 2011 TUSITIO.ES.TL. Todos los derechos reservados. Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>, Adaptación por <a href="http://cssplantillas.es.tl">CssPlantillas</a>.</p>
</div>

- Codigo Sin style tag's (CSS):

/* Diseño por: http://www.freecsstemplates.org
Adaptada para  PwG por: http://cssplantillas.es.tl */
#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;}
body {margin: 0;padding: 0;background: #E3E3E3;
font-family: Arial, Helvetica, sans-serif;font-size: 14px;color: #8A8985;}
h1, h2, h3 {margin: 0;padding: 0;font-weight: normal;color: #810988;}
h1 {font-size: 2em;}
h2 {font-size: 2.8em;}
h3 {font-size: 1.6em;}
p, ul, ol {margin-top: 0;line-height: 180%;}
ul, ol {}
a {text-decoration: none;color: #CA4C44;}
a:hover {}
#wrapper {margin: 0 auto;padding: 0;}
.container {width: 1000px;margin: 0px auto;}
#head {width: 900px;height: 150px;margin: 0 auto;padding: 0px 50px;
background: url("https://img.webme.com/pic/c/cssplantillas/plain01.jpg") no-repeat left top;}
#logo {float: left;width: 300px;margin: 0;padding: 0;color: #000000;}
#logo h1, #logo p {}
#logo h1 {padding: 60px 0px 0px 0px;letter-spacing: -2px;text-transform: lowercase;
font-size: 3.8em;background: redc;}
#logo p {margin: 0;padding: 0px 0 0 0px;letter-spacing: -1px;
font: normal 18px Georgia, "Times New Roman", Times, serif;font-style: italic;color: #CCCCC4;} 
#logo p a {color: #CCCCC4;}
#logo a {border: none;background: none;text-decoration: none;color: #E3564F;}
#splash {height: 300px;}
#search {float: right;width: 280px;height: 60px;padding: 20px 0px 0px 0px;}
#search form {height: 41px;margin: 0;padding: 10px 0 0 20px;}
#search fieldset {margin: 0;padding: 0;border: none;}
#search-text {width: 170px;padding: 6px 5px 2px 5px;border: 1px solid #DEDEDE;background: #FFFFFF;
text-transform: lowercase;font: normal 11px Arial, Helvetica, sans-serif;color: #5D781D;}
#search-submit {width: 50px;height: 22px;border: none;background: #B9B9B9;color: #000000;}
#menu {float: right;width: 500px;height: 90px;margin: 0 auto;padding: 0;}
#menu ul {float: right;margin: 0;padding: 85px 0px 0px 0px;
list-style: none;line-height: normal;}
#menu li {float: left;}
#menu a {display: block;margin-right: 1px;padding: 10px 15px 15px 15px;
background: url("https://img.webme.com/pic/c/cssplantillas/plain06.gif") no-repeat left 12px;
text-decoration: none;text-align: center;font-family: Arial, Helvetica, sans-serif;
font-size: 13px;font-weight: bold;color: #7D7764;border: none;}
#menu a:hover, #menu .current_page_item a {text-decoration: none;}
#menu .current_page_item a {}
#page {width: 890px;margin: 0 auto;padding: 30px 55px;
background: url("https://img.webme.com/pic/c/cssplantillas/plain03.jpg") repeat-y left top;}
#content {float: left;width: 580px;padding: 0px 0px 0px 0px;}
.links {padding-top: 20px;margin-bottom: 30px;}
.more {display: block;float: left;width: 88px;height: 25px;padding: 2px 0px 0px 0px;
margin-right: 10px;text-align: center;color: #FFFFFF;
background: url("https://img.webme.com/pic/c/cssplantillas/plain08.jpg") no-repeat left top;}
.comments {display: block;float: left;width: 88px;height: 25px;padding: 2px 0px 0px 0px;
background: url("https://img.webme.com/pic/c/cssplantillas/plain08.jpg") no-repeat left top;
text-align: center;color: #FFFFFF;}
#sidebar {float: right;width: 280px;margin: 0px;padding: 0px 0px 0px 0px;color: #787878;}
#sidebar ul {margin: 0;padding: 0;list-style: none;}
#sidebar li {margin: 0;padding: 0;}
#sidebar li ul {margin: 0px 0px;padding-bottom: 30px;}
#sidebar li li {line-height: 35px;border-bottom: 1px dotted #E7E2DC;
background: url("https://img.webme.com/pic/c/cssplantillas/plain02.jpg") no-repeat left 15px;
margin: 0px 30px;border-left: none;}
#sidebar li li span {display: block;margin-top: -20px;padding: 0;font-size: 11px;font-style: italic;}
#sidebar li li a {padding: 0px 0px 0px 15px;}
#sidebar h2 {height: 38px;padding-left: 30px;letter-spacing: -.5px;
font-size: 1.8em;color: #7D7764;}
#sidebar p {margin: 0 0px;padding: 0px 30px 20px 30px;text-align: justify;}
#sidebar a {border: none;}
#sidebar a:hover {text-decoration: underline;}
#footer-content {background: url("https://img.webme.com/pic/c/cssplantillas/plain04.jpg") repeat-y left top;color: #BFBFBF;}
#footer-bg {overflow: hidden;width: 890px;padding: 30px 55px 50px 55px;
background: url("https://img.webme.com/pic/c/cssplantillas/plain05.jpg") no-repeat left bottom;}
#footer-content h2 {margin: 0px;padding: 0px 0px 20px 0px;letter-spacing: -1px;
text-transform: lowercase;font-size: 26px;color: #FFFFFF;}
#footer-content ul {margin: 0px;padding: 0px 0px 0px 20px;}
#footer-content a {color: #447ECF;}
#column1 {float: left;width: 290px;margin-right: 30px;}
#column2 {float: left;width: 280px;}
#column3 {float: right;width: 260px;}
#footer {height: 50px;margin: 0 auto;padding: 0px 0 15px 0;font-family: Arial, Helvetica, sans-serif;}
#footer p {margin: 0;padding-top: 10px;line-height: normal;font-size: 9px;
text-transform: uppercase;text-align: center;color: #202020;}
#footer a {color: #202020;}
#marketing {overflow: hidden;margin-bottom: 30px;padding: 20px 0px 10px 0px;
border-top: 1px solid #E3E3E3;border-bottom: 1px solid #E3E3E3;}
#marketing .text1 {float: left;margin: 0px;padding: 0px;letter-spacing: -2px;
text-transform: lowercase;font-size: 34px;color: #345E9B;}
#marketing .text2 {float: right;}
#marketing .text2 a {display: block;width: 252px;height: 38px;padding: 15px 0px 0px 0px;
background: url("https://img.webme.com/pic/c/cssplantillas/plain07.jpg") no-repeat left top;
letter-spacing: -2px;text-align: center;text-transform: lowercase;font-size: 30px;color: #FFFFFF;}
#webme_footer_textlink_dont_hide {color:#333;background-color:transparent;font-size:9px;font-family:arial;text-align:center;}

Apuntes
Diseño muy sencillo pero muy bueno, trata que el titulo de la cabecera no sea muy largo sino puede desformar la pagina.
- Para cualquier consulta visita nuestro Foro de soporte.

:: CP - Recursos Web ::

Plain & Clean

Plain & Clean

Buscador

Lo más reciente:

PUBLICIDAD

EN TWITTER!

Suscribete

Lo más buscado