:: CP - Recursos Web ::

Nautica 05

MUESTRA

[ CLICK PARA AGRANDAR ]

INFORMACIÓN

Diseño adaptable?: No

Fecha: 2012-09-19

Creditos: https://www.free-css.com

Diseño para: Css Design

Garantia: SI ?

Nota: Nautica 05, es un diseño con tes columnas, la izquierda puedes colocar banners y publicidad y a la derecha puede colocar link's. Muy sencilla de implementar.

- Codigo 01: Texto sobre el diseño

<div id="content">
<div id="header" class="width"><img src="URL IMAGEN LOGO"/> 
<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 id="headerImg" class="width"></div>
<div id="menu" class="width"><ul>
	<li><a href="URL"><span class="title">TITULO COLUMNA 1</span><span class="desc">DESCRIPCION COLUMNA 1</span></a></li>
	<li><a href="URL"><span class="title">TITULO COLUMNA 2</span><span class="desc">TITULO COLUMNA 2</span></a></li>
	<li><a href="URL"><span class="title">TITULO COLUMNA 3</span><span class="desc">TITULO COLUMNA 3</span></a></li>
	<li><a href="URL"><span class="title">TITULO COLUMNA 4</span><span class="desc">TITULO COLUMNA 4</span></a></li>
</ul></div>
<div id="page">
<div id="columns" class="widthPad">
<div class="floatLeft width25">
<h2>Imagenes o <span class="dark">Banners</span></h2>
<ul class="thumbs">
	<li><a href="https://cssplantillas.es.tl" class="thumb"><img style="border:NONE;width:142px;height: 43px;" src="https://img.webme.com/pic/c/cssplantillas/156x60.png"/><span>CssPlantillas</span></a></li>
	<li><a href="URL" class="thumb"><img style="border:NONE;width:142px;height: 43px;" src="URL IMAGEN"/><span>DESCRIPCION</span></a></li>
	<li><a href="URL" class="thumb"><img style="border:NONE;width:142px;height: 43px;" src="URL IMAGEN"/><span>DESCRIPCION</span></a></li>
	<li><a href="URL" class="thumb"><img style="border:NONE;width:142px;height: 43px;" src="URL IMAGEN"/><span>DESCRIPCION</span></a></li>
	<li><a href="URL" class="thumb"><img style="border:NONE;width:142px;height: 43px;" src="URL IMAGEN"/><span>DESCRIPCION</span></a></li>
	<li><a href="URL" class="thumb"><img style="border:NONE;width:142px;height: 43px;" src="URL IMAGEN"/><span>DESCRIPCION</span></a></li>
	<li><a href="URL" class="thumb"><img style="border:NONE;width:142px;height: 43px;" src="URL IMAGEN"/><span>DESCRIPCION</span></a></li>
	<li><a href="URL" class="thumb"><img style="border:NONE;width:142px;height: 43px;" src="URL IMAGEN"/><span>DESCRIPCION</span></a></li>
</ul>
<br style="clear: both;" /></div>
<div class="floatLeft width50">
<h1><span class="dark">Portada </span></h1>

Copiar codigo

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

<span class="day style6"></span>
<span class="month"></span>
<span class="day"></span>
<span class="month"></span><span class="day"></span>
<span class="month"></span></div>
<div class="floatRight width25 lightBlueBg horzPad">
	<h2>Menu lateral 1</h2>
<ul class="submenu1">
	<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>
	<h3>Menu lateral 2</h3>
<ul class="submenu2">
	<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><ul class="submenu1">
	<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>
	<h3>Paginas Favoritas</h3>
<ul class="submenu2">
	<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>
	<li><a href="URL">Link's 7</a></li>         
</ul></div></div></div>
<div style="clear: both;"></div></div>
<div id="footer">
<div id="bg" class="width"> <img src="URL IMAGEN LOGO" />
<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="https://free-css.com" class="last">Diseño por Free-Css -</a></li>
	<li style="text-align: center;"><a href="https://cssplantillas.es.tl">Adaptacion por CssPlantillas</a></li>
</ul></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;}
#content {position: relative;height: auto !important;height: 100%;min-height: 100%;}
#topbar {float: left;width: 100%;padding: 0.6em 0;font-size: 0.9em;text-transform: uppercase;color: #CFD9DB;
background: #FFF  none repeat-x bottom left;}
#header {clear: both;position: relative;height: 5em;margin: 0 auto;
background: #48525B url("https://img.webme.com/pic/w/webcp/nautica501.gif") repeat-x bottom left;
border-bottom: 2px solid #48525B;background-color: #48525B;}
#header img {position: absolute;top: 5%;left: 10px;}
#header ul {margin: 3.5em 1em 0 0 !important;margin: 3.5em 0.5em 0 0;padding: 0;float: right;}
#header ul li {display: inline;list-style: none;}
#header ul li a {float: left;padding: 0 1em;font: 400 1.1em arial, sans-serif;
letter-spacing: 0.1em;line-height: 0.8em !important;line-height: 1em;
color: #cccccc;border-right: 1px solid #4D5760;}
#header ul li a.last {padding-right: 0;border-right: 0;}
#header ul li a:hover {color: #3B5D77;}
#headerImg {margin: 0 auto;height: 143px;background: url("https://img.webme.com/pic/w/webcp/nautica502.jpg") no-repeat top left;}
#menu {margin: 0 auto;}
#menu ul {width: 100%;float: left;margin: 0;padding: 0;text-align: left;
background: #3B5D77 url("https://img.webme.com/pic/w/webcp/nautica503.gif") repeat-x top left;}
#menu ul li {display: inline;margin: 0;padding: 0;list-style: none;}
#menu ul li a {float: left;width: 25%;height: 4.5em;font: 400 1.2em arial, sans-serif;
letter-spacing: 0.1em;color: #fff;border-top: 7px solid #41637D;border-bottom: 15px solid #FFF;}
#menu ul li a span {display: block;padding: 2px 7px;}
#menu ul li a span.desc {font-size: 0.8em;color: #8C8D94;}
#menu ul li a:hover,
#menu ul li a.here {background: #4A5C6A;border-top: 7px solid #455660;}
#menu ul li a:hover span.desc,
#menu ul li a.here span.desc {color: #FFF;}
#menu ul li a span.speaker {padding-left: 22px;background:  none no-repeat 5px 50%;}
#menu ul li a:hover span.speaker {background:  none no-repeat 5px 50%;}
#menu ul li a span.bubble {padding-left: 24px;background:  none no-repeat 4px 4px;}
#menu ul li a:hover span.bubble {background:  none no-repeat 4px 4px;}
#menu ul li a span.heart {padding-left: 20px;background:  none no-repeat 3px 50%;}
#menu ul li a:hover span.heart {background:  none no-repeat 3px 50%;}
#menu ul li a span.dollar {padding-left: 20px;background:  none no-repeat 4px 50%;}
#menu ul li a:hover span.dollar {background:  none no-repeat 4px 50%;}
#page {clear: both;float: left;width: 100%;margin-bottom: 6em;text-align: left;}
#columns {margin: 0 auto;}
.width {width: 776px;}.widthPad {width: 746px;}.width25 {width: 24%;}
.width50 {width: 48%;}.width73 {width: 73%;}.width75 {width: 75%;}.width100 {width: 100%;}
#footer {clear: both;float: left;width: 100%;height: 5em;margin-top: -5em;}
#footer #bg {position: relative;height: 5em;margin: 0 auto;
background: #49525B url("https://img.webme.com/pic/w/webcp/nautica504.gif") repeat-x bottom left;}
#footer #bg ul {float: right;margin: 3em 1em 0 0 !important;margin: 3em 0.5em 0 0;padding: 0;}
#footer #bg ul li {display: inline;list-style: none;}
#footer #bg ul li a {float: left;padding: 0 1em;font: 400 1em arial, sans-serif;letter-spacing: 0.1em;
line-height: 0.8em !important;line-height: 1em;color: #4D5760;border-right: 1px solid #4D5760;}
#footer #bg ul li a.last {padding-right: 0;border-right: 0;}
#footer #bg ul li a:hover {color: #6C0;}
#footer #bg img {position: absolute;top: 6%;left: 10px;}
a.lightTheme img, a.darkTheme img, a.submitButton img {width: 20px;height: 20px;vertical-align: middle;}
a.lightTheme img {background:  none no-repeat center center;}
a.darkTheme img {background:  none no-repeat center center;}
a.submitButton img {background:  none no-repeat center center;}
.post {float: left;width: 100% !important;width: 99%;position: relative;margin-bottom: 1.5em;border-bottom: 1px solid #CCCCCC;}
.post .date {position: absolute;top: 0;left: 5px;width: 2.3em;text-align: right;}
.post .date .month {text-transform: uppercase;font: 700 1.0em arial, sans-serif;color: #888;}
.post .date .day {display: block;margin-top: -5px;font: 700 2.1em arial, sans-serif;color: #888;}
.post .title {display: block;padding: 0 0 5px 0;font-size: 1.2em;font-weight: bold;color: #586B7A;}
.post p {margin: 0 0 0 3.5em;padding:  0 0 1em 1.2em;border-left: 1px solid #CCCCCC;}
ul.thumbs, ul.thumbs li {margin: 0;padding: 0;}
ul.thumbs li {margin: 0 0 15px 0 !important;margin: 0;padding: 0px;list-style: none;}
a.thumb img {border: 5px solid #ccc;}
a:hover.thumb img {background: #8EB4C6;border: 5px solid #668FA3;}
a:hover.thumb {background: none;}
a.thumb span {display: block;margin-top: -5px !important;margin-top: -2px;}
ul.submenu1,ul.submenu2 {margin: 0 0 20px 0;padding: 0;}
ul.submenu1 li, ul.submenu2 li{margin: 0;padding: 0;list-style: none;list-style-image: url(foo.gif);}
ul.submenu1 li a,ul.submenu2 li a {display: block;height: auto !important;height: 1%;padding: 1px 5px 1px 20px;}
ul.submenu1 li a {background: url("05") no-repeat 5px 50%;}
ul.submenu1 a:hover {color: #426F85;background: #B3C6C4 url("https://img.webme.com/pic/w/webcp/nautica505.gif") no-repeat 5px 50%;}
ul.submenu2 li a {color: #426F85;background: url("https://img.webme.com/pic/w/webcp/nautica505.gif") no-repeat 3px 50%;}
ul.submenu2 a:hover {color: #426F85;background: #B3C6C4 url("https://img.webme.com/pic/w/webcp/nautica505.gif") no-repeat 3px 50%;}
.block {display: block;}
.clear {clear: both;}
.marginRight {margin-right: 15px;}
.paddingLeft {padding-left: 5px;}
.paddingRight {padding-right: 5px;}
.floatLeft {float: left;}
.floatRight {float: right;}
.alignLeft {text-align: left;}
.alignRight {text-align: right;}
.alignTop {vertical-align: top;}
.alignMiddle {vertical-align: middle;}
.alignBottom {vertical-align: bottom;}
.lightBlueBg {background-color: #EAF2F5;}
.dark {color: #353E47;}
html, body {height: 100%;}
body {margin: 0;padding: 0;text-align: center;
background: url("https://img.webme.com/pic/w/webcp/nautica506.gif") repeat-y top center;
font: 400 0.7em verdana, arial, sans-serif;line-height: 170%;color: #555;}
h1, h2, h3, h4, h5, h6 {margin: 0 0 10px 0;padding: 0;}
h1 {padding-bottom: 0.2em;font: 400 1.6em arial, sans-serif;color: #536C71;border-bottom: 12px solid #ddd;}
h2 {font-size: 1.2em;color: #586B7A;}
h3 {text-transform: uppercase;font-size: 0.9em;color: #5D6F73;}
h4 {font-size: 0.85em;}
h5 {font-size: 0.8em;}
.horzPad h1,.horzPad h2,.horzPad h3,.horzPad h4,.horzPad h5,.horzPad p {padding-left: 5px;padding-right: 5px;}
a {text-decoration: none;color: #3B5D77;}
a:hover {color: #668FA3;}
a img {border: 0;}
a img.border {  border: 1px solid #FC3307;}
a:hover img.border {  border: 1px solid #668FA3 !important;border: 1px solid #FC3307;}
img.floatRight {margin: 5px 0 10px 10px;}
img.floatLeft {margin: 5px 10px 10px 0;}
ul li {list-style-image: url("https://img.webme.com/pic/w/webcp/nautica505.gif");}
ol li {font-weight: bold;color: #668FA3;}
ol li span {font-weight: normal;color: #444;}
blockquote {margin: 0;padding: 0 20px;background: #E7F1F3;border-top: 1px solid #AAD3DB;border-bottom: 1px solid #AAD3DB;}
form {padding: 0;margin: 0;}
label {float: left;width: 25%;vertical-align: top;}
input,textarea,select {padding: 1px;font: 400 1em verdana, sans-serif;color: #999;background: #EEE;border: 1px solid #CCC;}
input:focus,input:hover,textarea:focus,textarea:hover,select:focus,select:hover {color: #000;
background: #E7F1F3;border: 1px solid #888;}
input.noBorder,input:focus.noBorder,input:hover.noBorder{padding: 0;border: 0;}
input.button {padding: 2px 5px;font: 400 0.9em verdana, serif;cursor: pointer;color: #fff;background: #FC3307;
border-width: 1px;border-style: solid;border-color: #FF7800 #691300 #691300 #FF7800;}
input.radio {background: none;border: 0px;}
#webme_footer_textlink_dont_hide {color:#333;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:
Un muy buen diseño, y muy fácil de instalar, incluye un columna para poner banners, imágenes etc. Disfrutalo.
- Para cualquier consulta visita nuestro Foro de soporte.

:: CP - Recursos Web ::

Nautica 05

Nautica 05

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