:: CP - Recursos Web ::

Keyboard

MUESTRA

[ CLICK PARA AGRANDAR ]

INFORMACIÓN

Diseño adaptable?: No

Fecha: 2013-01-05

Creditos: Freecsstemplates.org

Diseño para: Css Design

Garantia: SI ?

Nota: Keyboard, es un diseño muy atractivo que se complemente muy bien a la publicidad del servicio, haciendo que esta no se vea molesta. Tiene dos columnas y mucho espacio para colocar el contenido que desees.

- Codigo 01: TEXTO SOBRE EL DISEÑO

Copiar codigo

- Codigo 02: POR DEBAJO DE LA PAGINA

<div id="sidebar"><ul><li>
  <h2>Categories</h2><ul>
    <li><a href="URL">Links 01</a></li>
    <li><a href="URL">Links 02</a></li>
    <li><a href="URL">Links 03</a></li>
    <li><a href="URL">Links 04</a></li>
    <li><a href="URL">Links 05</a></li>
    <li><a href="URL">Links 06</a></li>
</ul></li><li>
  <h2>Enlaces 02</h2><ul>
    <li><a href="URL">Links 01</a></li>
    <li><a href="URL">Links 02</a></li>
    <li><a href="URL">Links 03</a></li>
    <li><a href="URL">Links 04</a></li>
    <li><a href="URL">Links 05</a></li>
    <li><a href="URL">Links 06</a></li>
</ul></li><li>
  <h2>Enlaces 03</h2><ul>
    <li><a href="URL">Links 01</a></li>
    <li><a href="URL">Links 02</a></li>
    <li><a href="URL">Links 03</a></li>
    <li><a href="URL">Links 04</a></li>
    <li><a href="URL">Links 05</a></li>
    <li><a href="URL">Links 06</a></li>
</ul></li></ul></div>
<div style="clear: both;"> </div></div></div>
<div id="footer"><p>Copyright (c) 2012 tu sitio. Diseño por <a href="#">FCT</a> Adaptador por <a href="https://cssplantillas.es.tl">CP</a>.</p>
</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;}
/* Deseño por https://www.freecsstemplates.org
Adaptado por https://cssplantillas.es.tl*/
body {margin: 0;padding: 0;font-family: Arial, Helvetica, sans-serif;
background: #050505 url("https://img.webme.com/pic/c/cssplantillas/keyboard01.jpg") repeat;
font-size: 14px;color: #5B5B5B;}
h1, h2, h3 {margin: 0;padding: 0;text-transform: uppercase;font-weight: normal;
font-family: 'Oswald', sans-serif;font-weight: 200;color: #222222;}
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 {color: #5E5E5E;}
a:hover {}
#wrapper {background:#FFF url("https://img.webme.com/pic/c/cssplantillas/keyboard05.jpg") repeat;}
.container {width: 1000px;margin: 0px auto;}
#header-wrapper {overflow: hidden;}
#head {width: 1000px;height: 150px;margin: 0 auto;padding: 0px 0px;}
#logo {float: left;width: 300px;margin: 0;padding: 0;color: #FFFFFF;}
#logo h1, #logo p {}
#logo h1 {line-height: 120px;letter-spacing: -2px;font-size: 3.8em;}
#logo h1 a {color: #1F1F1F;text-shadow: 1px 1px 0px rgba(0,0,0,.2);}
#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: #8E8E8E;}
#logo p a {color: #8E8E8E;}
#logo a {border: none;background: none;text-decoration: none;color: #000000;}
#menu {float: right;width: 500px;height: 90px;margin: 0 auto;padding: 0;}
#menu ul {float: right;margin: 0;padding: 20px 0px 0px 0px;list-style: none;line-height: normal;}
#menu li {float: left;}
#menu a {display: block;line-height: 100px;margin-right: 1px;padding: 0px 20px 0px 20px;
text-decoration: none;text-align: center;text-shadow: 1px 1px 0px rgba(0,0,0,.2);text-transform: uppercase;
font-family: 'Oswald', sans-serif;font-size: 16px;font-weight: 300;color: #1F1F1F;border: none;}
#menu a:hover, #menu .current_page_item a {background: url("https://img.webme.com/pic/c/cssplantillas/keyboard01.jpg") repeat;
text-decoration: none;color: #FFFFFF;}
#menu .current_page_item a {}
#page {width: 1000px;margin: 0 auto;padding: 30px 0px;}
#content {float: right;width: 660px;padding: 0px 0px 0px 0px;}
#sidebar {float: left;width: 270px;margin: 0px;padding: 30px 0px 0px 0px;}
#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: 40px;border-bottom: 1px solid #E7EBED;margin: 0px 0px;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 20px;
background: url("https://img.webme.com/pic/c/cssplantillas/keyboard04.jpg") no-repeat left 50%;}
#sidebar h2 {height: 38px;padding: 0px 0px 30px 0px;letter-spacing: -.5px;font-size: 1.8em;color: #222222;}
#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 {overflow: hidden;width: 1000px;margin: 0px auto;color: #D6E2F0;}
#footer-content a {color: #92A9B6;}
#footer-bg {overflow: hidden;padding: 30px 0px;background: #E8E8E8;}
#footer-content h2 {margin: 0px;padding: 0px 0px 20px 0px;letter-spacing: -1px;font-size: 26px;color: #262626;}
#footer-content #fbox1 {float: left;width: 300px;margin-right: 50px;}
#footer-content #fbox2 {float: left;width: 300px;}
#footer-content #fbox3 {float: right;width: 300px;}
#footer-content a {}
#column1 {float: left;width: 290px;margin-right: 30px;}
#column2 {float: left;width: 280px;}
#column3 {float: right;width: 260px;}
#footer {height:40px;margin: 0 auto;padding: 10px 0 15px 0;font-family: 'Abel', sans-serif;}
#footer p {margin: 0;padding-top: 5px;letter-spacing: 1px;line-height: normal;
font-size: 14px;text-transform: uppercase;text-align: center;color: #5E5E5E;}
#footer a {color: #5E5E5E;}
#banner {margin: 0px auto;width: 1000px;height: 340px;
background: url("https://img.webme.com/pic/c/cssplantillas/keyboard03.png") no-repeat left bottom;}
#banner .content {}
.list-style1 {margin: 0px;padding: 0px;list-style: none;}
.list-style1 a {color: #7F7F7F;}
#webme_footer_textlink_dont_hide {color:#ccc;background-color:transparent;}

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:
Reemplaza la imagen que esta en el primer código, por la que tu quieras y tu diseño se vera genial! Disfrútalo.
- Para cualquier consulta visita nuestro Foro de soporte.

:: CP - Recursos Web ::

Keyboard

Keyboard

MUESTRA

INFORMACIÓN

- Codigo 01: TEXTO SOBRE EL DISEÑO

- 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