Ahi les van:
Codigo 1
Código:
Codigo 2:/* root element for accordion. decorated with rounded borders and gradient background image */ body{ padding:50px 80px; font-family:"Lucida Grande","bitstream vera sans","trebuchet ms",sans-serif,verdana; } #accordion { background:#333 url(/img/global/gradient/h300.png) 0 0; width: 390px; height: 570px; border:1px solid #333; -background:#666; } /* accordion header */ #accordion h2 { background:#ccc url(/img/global/gradient/h30.png); margin:0; padding:5px 15px; font-size:14px; font-weight:normal; border:1px solid #fff; border-bottom:1px solid #ddd; cursor:pointer; } /* currently active header */ #accordion h2.current { cursor:default; background-color:#fff; } /* accordion pane */ #accordion .pane { border:1px solid #fff; border-width:0 2px; display:none; height:450px; padding:15px; color:#fff; font-size:12px; } /* a title inside pane */ #accordion .pane h3 { font-weight:normal; margin:0 0 -5px 0; font-size:16px; color:#999; }
Código:
Si necesitan el codigo completo para entenderlo, haganmelo saber.body { font-family: Arial; margin:0; padding:0; color:#FFFFFF; font-size:12px; width:100%; background:#FFFFFF; text-align:left } #wrap { width:520px; position:relative; padding-top:100px; } #top_wrap { position:absolute; left:0px; top:0px; height:100px; background:#FFFFFF; width:520px; z-index:200; } #logo { padding:27px 0 26px 11px; width:224px; height:46px; float:left; } #like { padding:14px 8px 48px 0px; width:58px; height:37px; float:right; } .clear { font-size:0px; height:1px; clear:both; } img {border:0px } a { outline:none; } .cc_menu{ width:520px; /*130px * 4*/ height:600px; position:relative; font-size:14px; text-transform:uppercase; color:#FFFFFF; } .cc_item{ text-align:center; height:600px; width:129px; float:left; border-right:1px solid #908f8f; background:#8BC63E url(http://img193.imageshack.us/img193/795/verdecolumna.png) no-repeat left bottom; position:relative; } .service { background:#009bdb url(http://img40.imageshack.us/img40/7205/azulcolumna.png) no-repeat left top; } .products { background:#8BC63E url(http://img193.imageshack.us/img193/795/verdecolumna.png) no-repeat left bottom; } .contacts { background:#009bdb url(http://img40.imageshack.us/img40/7205/azulcolumna.png) no-repeat left top; } span.cc_title{ color:#000000; font-size:18px; top:269px; left:0px; position:absolute; background:#ebebeb; width:126px; height:43px; line-height:43px; display:block; z-index:11; } .cc_submenu ul{ list-style:none; width:129px; margin:0; padding:0; height:0px; /*increase to 151px to slide up*/ overflow:hidden; text-align:left; background:#000; position:absolute; left:0px; bottom:0px; opacity:0.6; z-index:13; } .cc_submenu ul li{ color:#ffffff; cursor:pointer; padding:12px; } .cc_item img{ position:absolute; width:129px; height:600px; top:-700px; left:0px; } #footer_text { float:left; padding:65px 0 19px 15px; color:#585959; } #footer_text span {font-size:11px; padding-left:41px; } #footer_text a {font-size:11px; color:#585959; text-decoration:underline; } #social { float:right; padding:55px 6px 0 0 } #social ul { padding:0px; margin:0px } #social li { padding:0 2px 0 0; margin:0px; list-style:none; float:left; } #social a { border:0px; font-size:0px; } .cc_content{ width:390px; height:600px; position:absolute; left:-140px; background:#000000; overflow:hidden; font-size:12px; color:#FFFFFF; text-transform:none; } .cc_content div{ display:none; margin:0px; padding:15px 15px 0 15px } .cc_content div h1{ font-size:24px; line-height:25px; padding:0 0 10px 1px; border-bottom:1px #8BC63E solid; width:191px; text-transform:uppercase; margin:0 0 13px 0; } .cc_content p{ padding:0 0 16px 0; margin:0px; } span.cc_back{ position:absolute; bottom:8px; right:9px; cursor:pointer; color:#ffffff; text-transform:uppercase; font-size:14px; } ul { padding:0px; margin:0px; } li { padding:0px; margin:0px; list-style:none; line-height:24px; } #contacts_info { line-height:20px; display:block; padding:0px; margin:0px } #contacts_info a { color:#e71e1e; text-decoration:underline; }
Saludos