:: CP - Recursos Web ::

Obsess

MUESTRA

[ CLICK PARA AGRANDAR ]

INFORMACIÓN

Diseño adaptable?: No

Fecha: 2013-04-14

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

Diseño para: Css Design

Garantia: SI ?

Nota: Obsess, es un diseño espectacular que adaptamos para los usuarios de paginawebgratis. Se caracteriza por tener muchos espacios para colocar link's y recursos. Ademas tiene dos box para colocar contenido sobre el bloque principal.

- Codigo 01: Texto sobre el diseño

<div class="size">
  <div class="header">
    <div class="header01">
      <div class="logo"> <img src="https://img.webme.com/pic/w/webcp/obsessimg_15.jpg" alt="" /> </div>
      <div class="hright">
        <div class="hr01">
          <div class="hr0101"> <a href="URL">Link's 1</a></div>
          <div class="hr0102"> <a href="URL">Link's 2</a></div>
          <div class="hr0102"> <a href="URL">Link's 3</a></div>
          <div class="hr0102"> <a href="URL">Link's 4</a></div>
</div><div class="hr02">
<input id="Text1" type="text" value="Buscar..." />
</div></div></div>
    <div class="mnav"> <img class="mnimgl" src="https://img.webme.com/pic/w/webcp/obsessimg_37.jpg" alt="" /> <img class="mnimgr" src="image/img_50.jpg" alt="" />
      <div class="mnm">
        <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>
      </div>
    </div>
  </div>
  <div class="content">
   <div class="cmainimg"> <img alt="" src="https://img.webme.com/pic/w/webcp/obsessimg_73.jpg" /> </div>
    <div class="submenu" style="left: 0px; top: 0px"> <img class="snimgl" src="https://img.webme.com/pic/w/webcp/obsessimg_96.jpg" alt="" /> <img class="snimgr" src="https://img.webme.com/pic/w/webcp/obsessimg_107.jpg" alt="" />
      <div class="subtext">Aqui algun texto:</div>
      <div class="subimag" style="width: 41px; height: 51px">
        <ul>
        </ul>
      </div>
    </div>
    <div class="mcontent">
      <div class="mcleft">
        <div class="mcbox01">
          <div class="mc01t">Titulo menu</div>
          <div class="mc01c">
            <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>
          </div>
          <div class="mc01b"> <img src="https://img.webme.com/pic/w/webcp/obsessimg_272.jpg" alt="" /> </div>
        </div>
        <div class="mcbox01">
          <div class="mc01t2">Titulo menu 2</div>
          <div class="mc01cc">
            <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>
          </div>
          <div class="mc01b"> <img src="https://img.webme.com/pic/w/webcp/obsessimg_272.jpg" alt="" /> </div>
        </div>
        <div class="mcbox01">
          <div class="mc01t2">Titulo menu 3</div>
          <div class="mc01cc">
            <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>
          </div>
          <div class="mc01b"> <img src="https://img.webme.com/pic/w/webcp/obsessimg_272.jpg" alt="" /> </div>
        </div>
      </div>
      <div class="mcright">
        <div class="mc01">
          <div class="mc0101" style="left: 0px; top: 0px"> <img class="r0101" src="https://img.webme.com/pic/w/webcp/obsessimg_150.jpg" alt="" /> <img class="r0102" src="https://img.webme.com/pic/w/webcp/obsessimg_153.jpg" alt="" /> <img class="r0103" src="https://img.webme.com/pic/w/webcp/obsessimg_202.jpg" alt="" /> <img class="r0104" src="https://img.webme.com/pic/w/webcp/obsessimg_205.jpg" alt="" />
            <div class="mcr">
              <div class="mcr01">Box 1 titulo</div>
              <div class="mcr02">Contenido box 1</div>
            </div>
          </div>
          <div class="mc0102"> <img class="r0101" src="https://img.webme.com/pic/w/webcp/obsessimg_155.jpg" alt="" /> <img class="r0102" src="image/img_157.jpg" alt="" /> <img class="r0103" src="https://img.webme.com/pic/w/webcp/obsessimg_207.jpg" alt="" /> <img class="r0104" src="https://img.webme.com/pic/w/webcp/obsessimg_209.jpg" alt="" />
            <div class="mcl">
              <div class="mcl01">Box 2 titulo</div>
              <div class="mcl02">Contenido box 2</div>
            </div>
          </div>
</div><div class="mc02">

Copiar codigo

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

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;}
body{margin: 0px;padding: 0px;font-size: 12px;font-family: Arial;background-color: Black;}
img{border: 0px;}
.size{width: 950px;margin: 0px auto;}
.header{height: 138px;overflow: hidden;background-color: White;}
.header01{height: 91px;overflow: hidden;}
.mnav{height: 39px;overflow: hidden;
background-image: url("https://img.webme.com/pic/w/webcp/obsessimg_38.jpg");
background-repeat: repeat-x;margin-left: 10px;width: 930px;position: relative;}
.mnm ul{margin: 0px;padding: 0px;}
.mnm li{float: left;padding: 0 0px 0 0px;min-width: 155px;line-height: 44px;text-align: center;color: #a7a8a8;font-family: Arial;
background-image: url("https://img.webme.com/pic/w/webcp/obsess3_03.jpg");
background-repeat: no-repeat;background-position: right center;list-style: none;}
.mnm a{	color: #c7c7c7;
	text-decoration: none;
	font-weight: bold;
	font-size: 14px;
	display: inline-block;
	width: 150px;
	height: 100%;
}
.mnm a:hover, .mnm a:active
{
	background: url("https://img.webme.com/pic/w/webcp/obsess3_021.jpg") repeat-x;
}
.mnimgl
{
	position: absolute;
	left: 0px;
	top: 0px;
}
.mnimgr
{
	position: absolute;
	right: 0px;
	top: 0px;
}
.logo
{
	float: left;
	padding-top: 11px;
	padding-left: 30px;
}
.hright
{
	float: right;
	width: 422px;
	overflow: hidden;
}
.hr01
{
	width: 407px;
	height: 28px;
	background-image: url("https://img.webme.com/pic/w/webcp/obsessimg_09.jpg");
	background-repeat: no-repeat;
}
.hr01 div
{
	float: left;
	line-height: 30px;
	font-size: 11px;
}
.hr01 a:link, .hr01 a:visited
{
	color: white;
	text-decoration: none;
}
.hr01 a:hover, .hr01 a:active
{
	color: white;
	text-decoration: underline;
}
.hr0101
{
	padding-left: 52px;
}
.hr0102
{
	padding-left: 30px;
}
.hr02
{
	text-align: right;
	padding-top: 22px;
	padding-right: 22px;
}

/* content */
.content
{
	background-color: White;
	overflow: hidden;
}
.cmainimg
{
	margin-left: 10px;
	margin-bottom: 8px;
}
.submenu
{
	height: 28px;
	margin-left: 10px;
	width: 930px;
	background-image: url("https://img.webme.com/pic/w/webcp/obsessimg_97.jpg");
	background-repeat: repeat-x;
	overflow: hidden;
	position: relative;
	margin-bottom: 11px;
}
.subtext
{
	color: #aba6a6;
	font-size: 11px;
	margin-left: 11px;
	margin-top: 6px;
	float: left;
	width: 100px;
}
.subimag
{
	float: right;
	margin-top: 6px;
	margin-right: 30px;
}
.subimag ul, .subimag li
{
	padding: 0px;
	margin: 0px;
}
.subimag li
{
	list-style: none;
	float: left;
	padding-left: 4px;
}
.subimag a
{
	text-decoration: none;
}
.snimgl
{
	position: absolute;
	left: 0px;
	top: 0px;
}
.snimgr
{
	position: absolute;
	right: 0px;
	top: 0px;
}
.mcontent
{
	overflow: hidden;
	background-color: White;
/*	height: 760px; */
}
.mcleft
{
	float: left;
	width: 207px;
	margin-left: 15px;
/*	margin-left: 7px; */
	background-color: White;
}
.mcbox01
{
	overflow: hidden;
	margin-bottom: 15px;
}
.mc01t
{
	height: 37px;
	background-image: url("https://img.webme.com/pic/w/webcp/obsessimg_147.jpg");
	background-repeat: no-repeat;
}
.mc01t2
{
	height: 24px;
	background-image: url("https://img.webme.com/pic/w/webcp/obsessimg_240.jpg");
	background-repeat: no-repeat;
	color: #f3f8fe;
	padding-left: 23px;
	padding-top: 13px;
}
.mc01c
{
	border-left: 1px solid #d1d1d1;
	border-right: 1px solid #d1d1d1;
	width: 205px;
	overflow: hidden;
	background-color: #f0f0f0;
}
.mc01c ul
{
	margin: 0px 15px 0px 15px;
	padding: 0px;
}
.mc01c li
{
	padding-left: 18px;
	margin: 0px;
	font-weight: bold;
	height: 30px;
	line-height: 30px;
}
.mc01cc
{
	border-left: 1px solid #d1d1d1;
	border-right: 1px solid #d1d1d1;
	width: 205px;
	overflow: hidden;
	background-color: #f0f0f0;
}
.mc01cc li
{
	list-style-type: square;
	font-family: Arial;
	font-size: 12px;
	padding-top: 15px;
}
.mc01cc a
{
	text-decoration: none;
	color: #494949;
}
.mc01cc a:hover, .mc01cc a:active
{
	text-decoration: underline;
}
.mc01b
{
	height: 5px;
	overflow: hidden;
	font-size: 0px;
}
.mcright
{
	width: 715px;
	overflow: hidden;
	float: right;
	background-color: White;
}
.mc01
{
	overflow: hidden;
	margin: 0px auto;
}
.mc0101
{
	width: 345px;
	height: 82px;
	background-color: Black;
	position: relative;
	float: left;
}
.mcr
{
	margin-left: 11px;
	text-align: left;
	color: #ffffff;
}
.mcr01
{
	font-size: 19px;
	font-family: Arial;
	padding-top: 10px;
}
.mcr02
{
	padding-top: 13px;
	font-size: 11px;
	font-family: Arial;
	line-height: 16px;
}
.mcl
{
	margin-left: 11px;
	text-align: left;
	color: #ffffff;
}
.mcl01
{
	padding-top: 10px;
	font-family: Arial;
	font-size: 19px;
}
.mcl02
{
	padding-top: 13px;
	font-size: 11px;
	font-family: Arial;
	line-height: 16px;
}
.r0101
{
	position: absolute;
	left: 0px;
	top: 0px;
}
.r0102
{
	position: absolute;
	right: 0px;
	top: 0px;
}
.r0103
{
	position: absolute;
	left: 0px;
	bottom: 0px;
}
.r0104
{
	position: absolute;
	right: 0px;
	bottom: 0px;
}
.mc0102
{
	margin-left: 14px;
	width: 345px;
	height: 82px;
	background-color: #227ab4;
	float: left;
	position: relative;
}
.mc01t
{
	font-size: 14px;
	padding-left: 23px;
	padding-top: 11px;
	height: 24px;
}
.mc01c li
{
	list-style: none;
	border-bottom: solid 1px #d7d7d7;
}

.mc01c a
{
	text-decoration: none;
	color: #3e6680;
}
.mc01c a:hover, .mc01c a:active{text-decoration: underline;}
.mc02{padding-top: 24px;overflow: hidden;}
.mc0201{font-family: Arial;font-size: 23px;color: #033759;float: left;}
.mc0202{padding-right: 18px;float: right;}
.mc0203{margin-top: 68px;}
.mc020301{font-size: 12px;color: #494949;line-height: 18px;letter-spacing: -0.1px;width: 700px;}
.mc020302{margin-top: 25px;margin-bottom: 40px;margin-left: 65px;line-height: 25px;}
.mc020302 a{text-decoration: none;color: #033759;font-size: 12px;font-family: Arial;}
.mc020302 a:hover, .mc020302 a:active{text-decoration: underline;}
.mc020302 li{list-style-type: square;}
.mc020303{color: #494949;font-size: 12px;margin-bottom: 151px;line-height: 18px;letter-spacing: -0.1px;}
.footer{height: 142px;overflow: hidden;background-image: url("https://img.webme.com/pic/w/webcp/obsessimg_276.jpg");
background-repeat: repeat-x;position: relative;line-height: 60px;font-size: 11px;color: White;
text-align: center;clear: both;width: 955px;margin:0 auto;}
.footer a:link, .footer a:visited{color: white;text-decoration: none;}
.footer a:hover, .footer a:active{color: white;text-decoration: underline;}
#webme_footer_textlink_dont_hide {color:#eee;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:
Este diseño incorpora un doble menú horizontal para que puedas tener una mejor distribución de link's en tu pagina.
- Para cualquier consulta visita nuestro Foro de soporte.

:: CP - Recursos Web ::

Obsess

Obsess

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