:: CP - Recursos Web ::

Arthemia

MUESTRA

[ CLICK PARA AGRANDAR ]

INFORMACIÓN

Diseño adaptable?: No

Fecha: 2010-06-11

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

Diseño para: Css Design

Garantia: SI ?

Nota: Arthemia es un diseño de solo dos columnas, y que es muy llamativo, es un diseño ideal para hacer un blog, una pagina de vídeos, de seguro que gustara mucho. Tiene muchos espacios para colocar link's y diferentes objetos.

- Codigo 01: Texto sobre el diseño

<div id="head" class="clearfloat"><div class="clearfloat">
<div id="logo" class="left"><H2>TU WEB SITE!</H2>
<div id="tagline">Tu eslogan!</div>
</div></div>
<div id="navbar" class="clearfloat">
<ul id="page-bar" class="left clearfloat">
	<li><a href="URL">INICIO</a></li>
	<li><a href="URL">Link's 1</a>
        <ul class="children">
		<li class="cat-item"><a href="URL">Sub Link 1</a></li>
		<li class="cat-item"><a href="URL">Sub Link 2</a></li>
		<li class="cat-item"><a href="URL">Sub Link 3</a></li>
        </ul>
      </li>
      <li><a href="URL">Link's 2</a></li>
      <li><a href="URL">Link's 3</a>
        <ul class="children">
			<li class="cat-item"><a href="URL">Sub Link 1</a></li>
			<li class="cat-item"><a href="URL">Sub Link 2</a></li>
			<li class="cat-item"><a href="URL">Sub Link 3</a></li>
        </ul>
      </li>
      <li><a href="URL">Link's 4</a>
        <ul class="children">
			<li class="cat-item"><a href="URL">Sub Link 1</a></li>
			<li class="cat-item"><a href="URL">Sub Link 2</a></li>
			<li class="cat-item"><a href="URL">Sub Link 3</a></li>
        </ul>
      </li>
      <li><a href="URL">Link's 5</a>
      <li><a href="URL">Link's 6</a>
      <li><a href="URL">Link's 7</a>
      <li><a href="URL">Link's 8</a>
    </ul>
<form method="get" id="searchform" action="">
<div id="search"><input type="text" value="" name="s" id="s" class="field" />
<input type="submit" id="searchsubmit" value="Buscar" class="button" /></div></form>
</div></div><div id="page" class="clearfloat">
<div id="bottom" class="clearfloat">
<div id="front-list"><div class="navigation">

Copiar codigo

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

<div class="right"></div></div></div><div id="sidebar">
<div id="sidebar-ads"> 

<img src="https://img.webme.com/pic/c/cssplantillas/cp_arthemia300x250.gif" width="300" height="250" alt="" /></div>
<div id="sidebar-top">
<h3>Una descripcion!</h3><div class="textwidget">
	Aqui puedes poner los que quieras, imagenes, videos, objetos flash, o un simple texto.
</div></div>
<div id="sidebar-middle" class="clearfloat">
<div id="sidebar-left">
	<h3>Navegación 1</h3><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>
	<h3>Archivos</h3><ul>
            <li><a href="URL">May 2008</a> (1)</li>
            <li><a href="URL">April 2008</a> (5)</li>
            <li><a href="URL">January 2008</a> (2)</li>
            <li><a href="URL">December 2007</a> (5)</li>
            <li><a href="URL">November 2007</a> (2)</li>
            <li><a href="URL">September 2007</a> (1)</li>
          </ul>
        </div>
        <div id="sidebar-right">
	<h3>Navegación 2</h3><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>
	<h3>Navegación 3</h3><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>
<div id="front-popular" class="clearfloat">
  <div id="recentpost" class="clearfloat">
	<h3>Menu pie 3</h3>
    <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 id="mostcommented" class="clearfloat">
	<h3>Menu pie 3</h3><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 id="recent_comments" class="clearfloat">
	<h3>Menu pie 3</h3><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 id="footer">Diseño por: <a href="free-css.com">FreeCss</a> | Adaptación por: <a href="https://cssplantillas.es.tl">CssPlantillas</a>.</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;}
html {font-size: 62.5%;height: 100%;}
body {background: #444 url("https://img.webme.com/pic/c/cssplantillas/grunges1.jpg");
color: #444;height: 100%;
padding-bottom: 1px;padding-top: 0px;}
small,.small {font-size: 0.9em;}
#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;}
* {margin:0;padding:0;}
body {font-size: 12px;font-family: Arial, Helvetica;background: #FFF;color: #333;}
p {	margin: 15px 0;}
a:link, a:visited {color: #3c57a7;text-decoration:none}
a:hover, a:active {color: #3c57a7;text-decoration:underline;}
a img {border:0;}
code {font: 1.0em 'Courier New', Courier, Fixed;background:#ececec;}	
acronym, abbr, span.caps {	font-size: 0.9em;letter-spacing: .07em;cursor: help;}			
acronym, abbr {border-bottom: 1px dashed #999;}
blockquote {padding: 10px 10px 0 10px;border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;
background: #eee;font:1.0em Arial;line-height:1.5em;margin:10px 0px;}
select {width: 130px;}
#head {width:960px;margin:0px auto;margin-top:15px;padding:0px;font-size:0.7em;}
#page {width:940px;margin:0px auto;padding:10px;background:#ececec;font-size:0.7em;}
.left {float:left;}
.right {float:right;}
#navbar {margin:0 auto;margin-top:15px;padding:0px 10px;text-transform:uppercase;
background:#2c2c2c url("https://img.webme.com/pic/c/cssplantillas/arthemia01.png");}
#page-bar {width:722px;}
#page-bar ul {list-style: none;}
#page-bar li {float:left;list-style:none;cursor: pointer;display:block;border-right:1px solid #333;}
#page-bar li:hover {background: #3c57a7;}
#page-bar a, #page-bar a:visited {margin: 0px;padding:10px 16px;font-weight:bold;
color:#FFF;display:block;}
#page-bar a:hover {text-decoration:none;display:block;}
#searchform {width:194px;float:right;text-align:right;padding-top:8px;margin-right:10px;}		
#page-bar li {float: left;margin: 0px;padding: 0px;}
#page-bar li li {float: left;margin: 0px;padding: 0px;width: 122px;text-transform:none;}
#page-bar li li a, #page-bar li li a:link, #page-bar li li a:visited {background: #2B2B2B;
width: 122px;float: none;margin: 0px;padding: 5px 10px 5px 18px;border-top: 1px solid #C0C0C0;}
#page-bar li li a:hover, #page-bar li li a:active {background: #666666;padding: 5px 10px 5px 18px;}
#page-bar li ul {position: absolute;width: 10em;left: -999em;}
#page-bar li:hover ul {left: auto;display: block;}
#page-bar li:hover ul, #page-bar li.sfhover ul {left: auto;}
h1 {font:3.5em Arial;font-weight:bold;letter-spacing:-0.08em;}
h2 {font:2.3em Georgia, "Times New Roman";}
h3 {font:1.3em Arial;margin-bottom:3px;color:#3c57a7;font-weight:bold;}
h4 {font:1.0em Arial;}
h3.cat_title, h3.cat_title a {color:#333;letter-spacing:-0.05em;}
h3#respond {margin-top:0px;padding-top:20px;}
h3#comments {margin-top:32px;padding-left:0px;}
h3.authors {margin-top:15px;}
#logo {width:350px;}
#tagline {margin-top:5px;font-size:1em;color:#333;}
#top {padding:0;}
#headline {width:590px;float:left;background:#fff;padding:10px;
font-size:1.05em;line-height:1.5em;margin:0;}
#headline  div.title {font-weight:bold;font:2.4em Georgia;letter-spacing:-0.05em;
display:block;padding-bottom:5px;}
#headline div.meta {display:block;padding-bottom:2px;}
#headline p {padding-bottom:15px;}
#featured {width:300px;background:#fff;float:right;padding:10px 10px 6px 10px;}
#featured .clearfloat {margin-top:7px;margin-bottom:9px;}
#featured .info {margin-top:5px;padding-top:5px;float:right;width:185px;}
#featured .title {font-weight:bold;}
#featured .divider {margin-left:85px;}
#headline a img, #featured a img {border:1px solid #bbb;margin-top:5px;margin-right:10px;}
#middle {width: 920px;background:#fff;float:right;padding:10px;margin:10px 0;}
.category {width:164px;float:left;border-top:8px solid #333;margin:0px;
padding:5px 10px 10px 10px;background:#fff;}
.category p {margin:0;}
#cat-1, #cat-3, #cat-5  {border-top:8px solid #333333;}
#cat-2, #cat-4 {border-top:8px solid #3c57a7;}
.category span.cat_title, #front-popular h3, #front-list .cat_title {text-transform:lowercase;
margin:0;font-weight:bold;font-size:1.5em;letter-spacing:-0.05em;}
#front-popular h3 {color:#fff;}
.category a {color:#333;display:block;background:none;}
.category a:hover {background:none;color:#fff;text-decoration:none;}
#cat-1:hover, #cat-3:hover, #cat-5:hover {background:#333333; color:#fff; }
#cat-2:hover, #cat-4:hover {background:#3c57a7; color:#fff; }
#cat-1:hover a, #cat-3:hover a, #cat-5:hover a {background:#333333; color:#fff; }
#cat-2:hover a, #cat-4:hover a {background:#3c57a7; color:#fff; }
#bottom {width: 940px;}
#front-list {width:590px;background:#fff;padding:10px;font-size:1.05em;line-height:1.75em;float:left;}
#front-list blockquote {padding: 0px 10px 0 10px;}
#front-list .title {font-weight:bold;font:2.0em Georgia;letter-spacing:-0.05em;}
#front-list .divider {margin-left:216px;margin-top:15px;margin-bottom:15px;}
.author {font-size:0.8em;font-weight:bold;}
.meta {margin-top:-5px;font-size:0.8em;color:#333;}
.meta a {color:#333;}
#headline p, #featured p {margin:0}
#contento {width:590px;background:#fff;padding:10px;font-size:1.05em;line-height:1.75em;
float:left;min-height:400px;}
.post {font-size: 12px;line-height:1.75em;}
.post p {margin-top:0px;}
.post .clearfloat { border-bottom:1px dotted #333;margin:10px 0px;}
.post ul, .post ol {margin-bottom:15px;}
#contento h2.title {font-weight:bold;font:2.2em Georgia;
letter-spacing:-0.05em;border-bottom:1px solid #eae9e4;
border-top:3px solid #eae9e4;margin-bottom:15px;padding:5px 0px;}
#contento .title {font:1.5em Georgia;}
.post ul li {list-style:square;margin-left:30px;}
.post ol li {list-style:decimal;margin-left:30px;}
.post ol li ul li {	list-style:square;margin-left:20px;}
.post img, .post a img, #front-list img {border:0px;margin:0 10px 5px 0;}
.post .ads {margin-top:10px;}
#sidebar {width:320px;float:right;margin:0px 0px 0px 0px;}
#sidebar h3 {font:1.1em Arial;font-weight:bold;
background:#333;color:#fff;margin:10px 0px 5px 0px;padding:3px 10px;}
#sidebar-top, #sidebar-bottom {width:300px;float:right;padding:0px 10px 10px 10px;background:#fff;}
#sidebar-bottom, #sidebar-middle {margin-top:10px;}
#sidebar-middle {width:320px;float:right;}
#sidebar-left {width:135px;padding:0px 10px 10px 10px;float:left;background:#fff;}
#sidebar-right {width:135px;padding:0px 10px 10px 10px;float:right;background:#fff;}
#sidebar li {list-style:none;border-bottom:1px dotted #bbb;display:block;padding:2px 0px 2px 13px;
background:url("https://img.webme.com/pic/c/cssplantillas/arthemia02.png") no-repeat 0 0px;}
#sidebar-ads {width:300px;float:right;margin-bottom:10px;padding:10px;background:#fff;}
select {border:1px solid #333;width:100%}
.button {padding: 1px;border:1px solid #333;background:#fff;font-size:1.0em;}
.field {padding: 2px;border:1px solid #333;background:#fff;font-size:1.0em;}
#search .button {padding: 1px;border:1px solid #333;background:#fff;font-size:1.0em;}
#commentform input {width: 140px;margin: 5px 5px 1px 0;}
#commentform textarea {width: 99%;margin-top:5px;}
.commentlist cite {font-style:normal;margin-bottom:4px;display:block}	
.commentlist blockquote {background:#ededed;}		
.commentlist li {color:#4d4d4d;padding: 10px 14px 10px 14px;background:#f2f2f2;
border-bottom: 1px solid #dcdbd7;list-style:none;margin-bottom:3px;}
.commentlist li li {background:none;border:none;list-style:square;margin:3px 0 3px 20px;padding:3px 0;}
.commenttext {width:502px;float:right}	
.commentlist cite strong {font-size:1.1em;}
li.my_comment {background: #FFF;border:none}
li.my_comment cite strong {font-size: 1.3em;color:#313228;}
#commentform small {background:#FFF;font-weight:bold;padding:0;}
#front-popular {font-size:0.7em;color:#fff;width: 940px;
background:#2c2c2c url("https://img.webme.com/pic/c/cssplantillas/arthemia02.png") bottom no-repeat;
margin: 0 auto;padding:10px;}
#recentpost, #mostcommented {width:280px;float:left;padding:10px;border:1px solid #fff;}
#mostcommented {margin-left:17px;}
#recent_comments {width:280px;float:right;padding:10px;border:1px solid #fff;}
#recentpost a, #mostcommented a, #recent_comments a {color:#fff;}
#recentpost ul, #mostcommented ul, #recent_comments ul {margin-top:5px;}
#recentpost ul li, #mostcommented ul li, #recent_comments ul li {
list-style:none;border-top:1px dotted #fff;padding:5px;display:block;}
#recentpost ul li:hover, #mostcommented ul li:hover, #recent_comments ul li:hover {
background:#3c57a7;color:#fff;}
#recentpost ul li:first-child, #mostcommented ul li:first-child, #recent_comments ul li:first-child{border-top:0px dotted #fff;}
#footer {margin: 0 auto;width: 960px;font-size:0.6em;padding-top:10px;padding-bottom:10px;}
.clearfloat:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfloat {display: inline-block;}
* html .clearfloat {height:1%;}
*+html .clearfloat {height:1%;}
.clearfloat {display:block;}
#webme_footer_textlink_dont_hide {color:#999;background-color:rgba(0, 0, 0, 0.0);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)

Descarga no disponible

[ CLICK PARA VER TUTORIAL ]

NOTAS:
Este diseño incorpora un menú desplegable que ya esta andando solo debes llenar los link's para que funciones correctamente.
- Para cualquier consulta visita nuestro Foro de soporte.

:: CP - Recursos Web ::

Arthemia

Arthemia

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