CP Group - diseno

Siguenos en redes sociales

TITULO WEB

diseno

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.

Sub Titulo web

TEXTO BOX 01

Este sitio web fue creado de forma gratuita con PaginaWebGratis.es. ¿Quieres también tu sitio web propio?

Registrarse gratis