navidad
codigo por encima
Código: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- Designed by w w w . t e m p l a t e m o . c o m --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Christmas Layout - free website template</title> <meta name="keywords" content="Christmas, Website Template, free template, CSS, HTML" /> <meta name="description" content="Christmas Website Template, free website template from templatemo.com" /> <link href="templatemo_style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="templatemo_container"> <div id="templatemo_top_panel"> <div id="templatemo_header"> Christmas Website </div> <div id="templatemo_shoppingcart"> <h1>Shopping Cart</h1> Total: <span>5 items</span> </div> </div> <!-- end of top panel --> <div id="templatemo_banner"> <div id="templatemo_banner_text"> <h1>Christmas Time Again</h1> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc quis sem nec tellus blandit tincidunt. Duis vitae velit sed dui malesuada dignissim. Donec mollis aliquet ligula. </p> <div class="more_button"><a href="#">View All</a></div> </div> </div> <!-- end of banner --> <div id="templatemo_menu"> <ul> <li><a href="index.html" class="current">Home</a></li> <li><a href="subpage.html">Services</a></li> <li><a href="subpage.html">Products</a></li> <li><a href="subpage.html">Special</a></li> <li><a href="subpage.html">My Account</a></li> <li><a href="subpage.html" class="lastmenu">Contact Us</a></li> </ul> </div> <!-- end of menu --> <div id="templatemo_content"> <div id="templatemo_left_panel"> <div class="templatemo_blue_panel"> <h2>Search</h2> <div class="templatemo_left_content"> <form method="get" action="#"> <div class="form_row"><input name="email_address" type="text" class="inputfield" id="email_addremss" maxlength="60"/></div> <input class="button" type="submit" name="Search" value="Search" /> </form> </div> </div> <div class="templatemo_blue_panel_bottom"></div> <div class="templatemo_red_panel"> <h2>Categories</h2> <div class="templatemo_left_content"> <ul> <li><a href="#">» Cards</a></li> <li><a href="#">» Books</a></li> <li><a href="#">» Pets</a></li> <li><a href="#">» Birthday Gift</a></li> <li><a href="#">» Gift For Him</a></li> <li><a href="#">» Gift For Her</a></li> <li><a href="#">» Gift For Kids & Babies</a></li> <li><a href="#">» Gift For Mom</a></li> <li><a href="#">» Gift For Dad</a></li> </ul> </div> </div> <div class="templatemo_red_panel_bottom"></div> <div class="templatemo_yellow_panel"> <h2>New Product</h2> <div class="templatemo_left_content"> <h4>Product Title</h4> <img src="images/image(150x150).jpg" alt="image" /> <div class="templatemo_price">$ 5.00</div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <div class="more_button"><a href="#">Buy Now</a></div> </div> </div> <div class="templatemo_yellow_panel_bottom"></div> </div> <!-- end of left panel --> <div id="templatemo_right_panel"> <div class="templatemo_right_panel_fullwidth"> <h1>makewebpage</h1> <p></p> <p> </p> <p></p> </div> |
por debajo
Código: |
<div class="templatemo_right_panel_fullwidth"> <a href="http://validator.w3.org/check?uri=referer"><img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" width="88" height="31" vspace="8" border="0" /></a> <a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" vspace="8" border="0" /></a> </div> </div> <!-- end of right panel --> </div> <!-- end of content --> <div id="templatemo_content_bottom"> </div> <div id="templatemo_footer"> <a href="#">Home</a> | <a href="#">Services</a> | <a href="#">Products</a> | <a href="#">Special</a> | <a href="#">My Account</a> | <a href="#">Contact Us</a><br /> Copyright © 2008 <a href="#"><strong>Your Company Name</strong></a> | adaptado por <a href="http://www.makewebpage.es.tl" target="_parent">makewebpage.es.tl</a> </div> <!-- end of footer --> <!-- Designed by w w w . t e m p l a t e m o . c o m --> </div> <!-- end of container --> </body> </html> |
css code
Código: |
lli.nav_element{display: none;} li.nav_element a{display: none;} h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} li.nav_element{display: none;} /* CSS Credit: http://www.templatemo.com/ */ body { margin: 0; padding: 0; line-height: 1.5em; font-family: Helvetica, Arial, sans-serif; font-size: 12px; color: #333333; background: #FFFFFF url(http://img25.xooimage.com/files/0/5/f/templatemo_main_background-13ee93c.gif) repeat-x; } a:link, a:visited { color: #333333; text-decoration: none; font-weight: bold;} a:active, a:hover { color: #333333; text-decoration: underline;} .more_button a{ clear: both; display: block; width: 70px; margin: 0 0 10px 0; text-align: center; font-weight: bold; text-decoration: none; color: #660; background: #ffd929; border-bottom: 1px solid #aa8c02; } .addtocard_btn a{ clear: both; display: block; width: 90px; margin: 0 0 10px 0; text-align: center; font-weight: bold; text-decoration: none; color: #660; background: #ffd929; border-bottom: 1px solid #aa8c02; } h1 { margin: 0; padding: 3px 0px 15px 0px; font-size: 30px; font-weight: bold; color: #99CC00; } h2 { margin: 0 0 15px 0; padding: 0; height: 30px; padding: 10px 0 0 25px; font-size: 18px; font-weight: bold; color: #FFFFFF; } h3 { margin: 0 0 5px 0; padding: 0; font-size: 16px; font-weight: bold; color: #0000FF; } h4 { margin: 0 0 5px 0; padding: 0; font-size: 14px; font-weight: bold; color: #000000; } img { margin: 0 0 15px 0; padding: 0; border: 1px solid #FFFFFF; } .templatemo_price{ clear: both; padding: 0 0 5px 0; margin: 0; color: #FF0000; font-size: 16px; font-weight: bold; } #templatemo_container { margin: auto; width: 970px; } /* top panel */ #templatemo_top_panel { width: 950px; height: 100px; background: none no-repeat;; padding-left:10px; padding-right:10px; padding-top:0; padding-bottom:0 } #templatemo_header { float: left; margin: 30px 25px 0 100px; width: 450px; height: 30px; padding: 10px 0; color: #FFFFFF; font-size: 35px; font-weight: bold; } #templatemo_shoppingcart { float: right; border: 1px solid #FFFFFF; color: #FFFFFF; margin: 15px 15px 0 0; padding: 5px 10px; background: #79a33e; } #templatemo_shoppingcart h1 { font-size: 16px; background: url(http://img24.xooimage.com/files/7/b/8/shoppingcart-13ee959.gif) no-repeat left bottom; color: #99FF00; margin-left:0; margin-right:0; margin-top:0; margin-bottom:5px; padding-left:40px; padding-right:0; padding-top:10px; padding-bottom:0 } #templatemo_shoppingcart span{ font-weight: bold; } /* end of top panel */ /* banner */ #templatemo_banner { width: 950px; height: 250px; color: #FFFFFF; background:url(http://img45.xooimage.com/files/6/d/a/templatemo_banner_background-16c3b6a.jpg) no-repeat;; padding-left:10px; padding-right:10px; padding-top:0; padding-bottom:0 } #templatemo_banner_text { padding: 75px 0 0 50px; width: 400px; } #templatemo_banner_text p{ margin: 0 0 15px 0; padding: 0; } /* end of banner */ /*------------- Menu ------------------*/ #templatemo_menu { width: 950px; height: 65px; background: url(http://img26.xooimage.com/files/6/3/1/templatemo_menu_background-13ee974.gif) no-repeat;; padding-left:10px; padding-right:10px; padding-top:0; padding-bottom:0 } #templatemo_menu ul { margin: 0; padding: 10px 0 0 0; list-style: none; } #templatemo_menu ul li{ display: inline; } #templatemo_menu ul li a{ float: left; width: 130px; font-size: 1.1em; font-weight: bold; text-align: center; text-decoration: none; color: #FFFFFF; border-right: 1px solid #c10a0a; } #templatemo_menu ul li .lastmenu{ border-right: none; } #templatemo_menu li a:hover, #templatemo_menu li .current{ color: #FFCC00; } /* ----------------- end of menu----------------*/ /* ----- Form ----- */ .form_row{ padding: 0 0 5px 0; } form{ margin: 0; padding: 0; width: 200px; text-align: left; } label { margin-right: 10px; } input{ width: 198px; height: 18px; line-height: normal; padding: 1px 0; color: #000000; border: 1px solid #FFFFFF; } .button{ width: 60px; height: 23px; } /* End of Form */ /* ----------------- Content ----------------------- */ #templatemo_content { float: left; width: 950px; background: url(http://img46.xooimage.com/files/1/0/2/templatemo_conten...ckground-13ee984.gif) repeat-y;; padding-left:10px; padding-right:10px; padding-top:0; padding-bottom:0 } /* left panel */ #templatemo_left_panel { float: left; width: 250px; color: #FFF; margin: 0 25px 0 15px; } * html #templatemo_left_panel { float: left; width: 250px; color: #FFF; margin: 0 25px 0 10px; } #templatemo_left_panel p{ padding: 0 0 15px 0; margin: 0; } #templatemo_left_panel img{ border: none; margin-bottom: 15px; } #templatemo_left_panel ul { margin: 0; padding: 0; list-style: none; } #templatemo_left_panel ul li{ display: block; } #templatemo_left_panel ul li a{ padding: 0px; margin: 0px; color: #FFFFFF; font-weight: normal; text-decoration: none; } #templatemo_left_panel ul li a:hover{ color: #ffd200; } .templatemo_blue_panel { width: 250px; background: #0643b4; } .templatemo_blue_panel_bottom { width: 250px; height: 5px; margin-bottom: 25px; background: url(http://img24.xooimage.com/files/c/9/8/templatemo_blue_panel_bottom-13ee98e.gif) no-repeat; } * html .templatemo_blue_panel_bottom { margin-bottom: 0; } .templatemo_blue_panel h2{ background: url(http://img47.xooimage.com/files/3/f/2/templatemo_blue_t...ckground-13ee993.gif) no-repeat; } .templatemo_red_panel { width: 250px; background: #e10d0d; } .templatemo_red_panel_bottom { width: 250px; height: 5px; margin-bottom: 25px; background: url(http://img29.xooimage.com/files/1/2/0/templatemo_red_panel_bottom-13ee998.gif) no-repeat; } * html .templatemo_red_panel_bottom { margin-bottom: 0 } .templatemo_red_panel h2{ background: url(http://img42.xooimage.com/files/b/0/f/templatemo_red_ti...ckground-13ee9a4.gif) no-repeat; } .templatemo_yellow_panel { width: 250px; color: #333333; background: #efc505; } .templatemo_yellow_panel_bottom { width: 250px; height: 5px; margin-bottom: 25px; background: url(http://img24.xooimage.com/files/c/3/c/templatemo_yellow...l_bottom-13ee9b7.gif) no-repeat; } .templatemo_yellow_panel_bottom { margin-bottom: 0; } .templatemo_yellow_panel h2{ background: url(http://img40.xooimage.com/files/b/4/8/templatemo_yellow...ckground-13ee9c4.gif) no-repeat; } .templatemo_left_content { padding: 0 25px 10px 25px; } /* end of left panel */ #templatemo_right_panel { float: right; width: 620px; margin: 0 15px 0 0; } #templatemo_right_panel h1{ margin: 0 0 15px 0; color: #666666; } #templatemo_right_panel p{ margin: 0; padding: 0 0 10px 0; text-align: justify; } #templatemo_right_panel img{ float: left; margin: 3px 10px 5px 0; } .templatemo_right_panel_fullwidth { float: left; width: 620px; padding: 0 0 50px 0; } /*----- product box -----*/ .productrow { float: left; padding: 0 0 25px 0; margin-bottom: 25px; width: 620px; border-bottom: 1px solid #CCCCCC; } .productbox { float: left; margin: 0px 25px 0 0; padding: 0px; width: 285px; } .productbox .left { float: left; width: 110px; margin: 0 10px 0 0; } .productbox .right { float: right; width: 150px; margin: 0px; } #productbox img { margin: 0px; padding: 0px; border: none; } #productbox p{ font-size: 10px; padding: 5px 0px; line-height: 1.1; color: #999999; } /* product detail */ .product_detail_image { float: left; width: 320px; margin: 0px 10px 0px 0px; } .product_detail_info { float: right; width: 250px; } .product_detail_info input{ width: 50px; border: 1px solid #999; } /*----- end of product box -----*/ #templatemo_content_bottom { clear: both; width: 970px; height: 20px; background: url(http://img23.xooimage.com/files/8/f/4/templatemo_content_bottom-13ee9d4.gif) no-repeat; } /* ----- Footer ----- */ #templatemo_footer { clear: both; padding: 10px 10px; width: 950px; text-align: center; background: #FFFFFF; text-align: center; } #templatemo_footer a{ font-weight: normal; color: #666666; } /* ----- End of Footer ----- */ |