TEMA2

Tasarım Üstüne

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Travel and Living, Free XHTML CSS Template</title> <meta name="keywords" content="Travel and Living, Free XHTML CSS Template, Web Design" /> <meta name="description" content="Travel and Living - Free XHTML CSS Template provided by TemplateMo.com" /> <link href="templatemo_style.css" rel="stylesheet" type="text/css" /> <script language="javascript" type="text/javascript"> function clearText(field) {     if (field.defaultValue == field.value) field.value = '';     else if (field.value == '') field.value = field.defaultValue; } </script> </head> <body> <div id="templatemo_container">     <div id="templatemo_banner">    	  <div id="search_section">             <form action="#" method="get">                 <input type="text" value="Enter keyword here..." name="q" size="10" id="searchfield"  					title="searchfield" onfocus="clearText(this)" onblur="clearText(this)" />               	<input type="submit" name="Search" value="" alt="Search" id="searchbutton" title="Search" />             </form>       </div>      </div>     <div id="templatemo_menu">         <ul>             <li><a href="#" class="current">Home</a></li>             <li><a href="#">Accomodations</a></li>             <li><a href="#">Destinations</a></li>             <li><a href="#">Gallery</a></li>             <li><a href="#">About Us</a></li>             <li><a href="#" class="last">Contact</a></li>         </ul>    	     </div>

Tasarım Altına

<div id="templatemo_content"> <div class="section_w430 fl margin_right_40"> <div class="header_01">Welcome to the world's famous places</div> <p>This is a standard complaint XHTML CSS template provided by <a href="http://www.templatemo.com/page/1" target="_parent">TemplateMo.com</a> for free of charge. You may download, modify and apply this layout for your websites. Credit goes to <a href="http://www.photovaco.com" target="_blank">Free Photos</a> for photos used in this template. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p>Vivamus a massa. Donec iaculis felis id neque. Morbi nunc. Praesent varius egestas velit. Donec a massa ut pede pulvinar vulputate. Nulla et augue. Sed eu nunc quis pede tristique suscipit. Nam sit amet justo vel libero tincidunt dignissim. Cras magna velit, pellentesque mattis, faucibus vitae, feugiat vitae, sapien. </p> <div class="rc_btn_01"><a href="#">Read more</a></div> <div class="margin_bottom_60"></div> <img src="https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_image_001.jpg" alt="image" /> <div class="header_01">Tour Guides</div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porta, risus vitae malesuada bibendum, justo mauris molestie lacus, a porta ligula nulla at sapien.</p> <p>Proin nec dignissim turpis. Mauris nec risus in lorem congue sollicitudin vitae sed mauris. Praesent viverra, lorem vitae tristique tincidunt, nisi nibh feugiat ipsum, ut suscipit augue sem sed ipsum. </p> <div class="rc_btn_02"><a href="#">Read more</a></div> <div class="margin_bottom_30"></div> <div class="header_01">Customer Support</div> <p>Sed iaculis commodo fermentum. Mauris porttitor sollicitudin neque sed tempus. Curabitur at urna non nunc tristique imperdiet quis vel metus. Ut vulputate, tortor sed pellentesque pharetra, arcu elit ultricies massa, et pellentesque velit lectus id libero. Etiam tempus sodales facilisis. Nunc scelerisque gravida magna eget semper. Praesent vehicula elementum posuere.</p> <div class="rc_btn_02"><a href="#">Read more</a></div> <div class="cleaner"></div> </div> <div class="section_w320 fl"> <div class="header_01">Our News</div> <div class="header_04">Pellentesque diam massa</div> <p>Nullam convallis, lacus sit amet varius tempor, erat neque congue mauris, id blandit lectus justo sit amet dolor. Donec congue mauris sed massa placerat dictum.</p> <div class="margin_bottom_10"></div> <div class="rc_btn_01"><a href="#">Read more</a></div> <div class="margin_bottom_40"></div> </div> <div class="section_w320_with_bg fl"> <div class="section_w320_with_bg_top"></div> <div class="header_02">New Destinations</div> <div class="new_destination"> <div class="img_wrapper"> <img src="https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_image_002.jpg" alt="image" /> </div> <div class="text"> <div class="header_03">Duis lacus mauris</div> <p>Cras nisl lorem, convallis aliquam luctus ut, adipiscing eu mauris. Etiam at nisl tellus. Nullam feugiat tristique laoreet. <a href="#">Read more...</a></p> </div> </div> <div class="margin_bottom_30"></div> <div class="new_destination"> <div class="img_wrapper"> <img src="https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_image_003.jpg" alt="image" /> </div> <div class="text"> <div class="header_03">Nam varius egestas nibh</div> <p>Nulla at ligula dictum dui commodo auctor at nec est. Aliquam dignissim tempus faucibus ?st eu lobortis. <a href="#">Read more...</a></p> </div> </div> <div class="margin_bottom_30"></div> <div class="new_destination"> <div class="img_wrapper"> <img src="https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_image_004.jpg" alt="image" /> </div> <div class="text"> <div class="header_03">Curabitur ipsum leo</div> <p>Aenean pretium consectetur cursus. Cras sed nisi purus. Fusce a purus eget nisi ultricies vestibulum. <a href="#">Read more...</a></p> </div> </div> <div class="margin_bottom_30"></div> <div class="new_destination"> <div class="img_wrapper"> <img src="https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_image_005.jpg" alt="image" /> </div> <div class="text"> <div class="header_03">Morbi at felis non tellus</div> <p>Curabitur ipsum leo, porttitor a accumsan eget, placerat vitae dui sem at massa cursus aliquam laoreet risus dictum. <a href="#">Read more...</a></p> </div> </div> <div class="section_w320_with_bg_bottom"></div> </div>  <div class="cleaner"></div> </div>  <div id="templatemo_footer"> <ul class="footer_list"> <li><a href="#">Home</a></li> <li><a href="#">Services</a></li> <li><a href="#">Destinations</a></li> <li><a href="#">About Us</a></li> <li class="last"><a href="#">Contact Us</a></li> </ul> <div class="margin_bottom_10"></div> Copyright © 2024 <a href="subpage.html">Your Company Name</a> | Designed by <a href="http://www.templatemo.com/page/1" target="_parent">Free CSS Templates</a> <div class="margin_bottom_10"></div> <div id="templatemo_footer_bottom"></div> </div> </div> </body> </html>

Css Bölümüne

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: Arial, Helvetica, sans-serif; font-size: 11px; color: #333; background: #ffffff; } a:link, a:visited { color: #d05c2d; text-decoration: underline; font-weight: normal; } a:active, a:hover { color: #CC0000; text-decoration: none; } p { margin: 0px; padding: 0px; text-align: justify; } img { margin: 0px; padding: 0px; border: none; } .cleaner { clear: both; width: 100%; height: 0px; font-size: 0px; } .margin_bottom_10 { clear: both; width: 100%; height: 10px; font-size: 1px; } .margin_bottom_20 { clear: both; width: 100%; height: 20px; font-size: 1px; } .margin_bottom_30 { clear: both; width: 100%; height: 30px; font-size: 1px; } .margin_bottom_40 { clear: both; width: 100%; height: 40px; font-size: 1px; } .margin_bottom_50 { clear: both; width: 100%; height: 50px; font-size: 1px; } .margin_bottom_60 { clear: both; width: 100%; height: 60px; font-size: 1px; } .margin_right_40 { margin-right: 40px; } .margin_right_60 { margin-right: 60px; } .fl { float: left; } .fr { float: right } .rc_btn_01 a { float: left; display: block; height: 20px; padding: 5px 0 0 20px; font-size: 12px; font-weight: bold; color: #503434; text-decoration: none; border: none; background: url(https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_icon_01.jpg) left center no-repeat; } .rc_btn_02 a { float: left; display: block; height: 20px; padding: 5px 0 0 20px; font-size: 12px; font-weight: bold; color: #503434; text-decoration: none; border: none; background: url(https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_icon_02.jpg) left center no-repeat; } .header_01 { padding: 0 0 10px 0; margin: 0 0 10px 0; font-size: 18px; color: #a13232; } .header_02 { padding: 0 0 10px 20px; margin: 0 0 10px 0; font-size: 18px; color: #ffffff; font-weight: bold; } .header_03 { font-size: 12px; color: #ffffff; font-weight: bold } .header_04 { font-size: 12px; color: #a13232; font-weight: bold } #templatemo_container { width: 880px; margin: 15px auto; background: url(https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_container_bg.jpg) repeat-y; } /* banner */ #templatemo_banner { width: 850px; height: 96px; padding: 0 15px; background: url(https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_bannerr.jpg) no-repeat; } #templatemo_banner #logo { float: left; margin: 20px 0 0 40px; } #search_section { float: right; margin: 60px 30px 0 0; width: 220px; height: 30px; background: url(https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_sarch_bg.jpg) no-repeat; } #search_section form { width: 220px; height: 30px; margin: 0px; padding: 0 0 0 2px; } #searchfield { height: 16px; width: 138px; padding: 5px; color: #000000; font-size: 13px; font-variant: normal; line-height: normal; background: none; border: none; } #searchbutton { width: 65px; height: 29px; padding: 0 6px; cursor: pointer; font-size: 12px; font-weight: bold; text-align: center; vertical-align: bottom; white-space: pre; color: #333333; background: none; border: none; } /* end of banner */ /* menu */ #templatemo_menu { clear: both; width: 880px; height: 70px; background: url(https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_menu_bgg.jpg) no-repeat; } #templatemo_menu ul { padding: 5px 15px 0 15px; margin: 0px; list-style: none; } #templatemo_menu ul li { display: inline; } #templatemo_menu ul li a { float: left; display: block; padding: 0 30px; height: 35px; padding-top: 17px; text-align: center; font-size: 14px; text-align: center; text-decoration: none; color: #6b0211; font-weight: bold; outline: none; } #templatemo_menu li a:hover, #templatemo_menu li .current { background: #b78d4b; color: #FFFFFF; } /* end of menu*/ /* content */ #templatemo_content { clear: both; width: 790px; padding: 20px 30px; margin: 0 15px; background: #afc7b9 url(https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_top_content.jpg) top no-repeat; } .section_w430 { width: 430px; } .section_w430 p { margin-bottom: 10px; } .section_w430 img { float: left; margin: 3px 10px 0 0; } .section_w320 { width: 320px; } .section_w320_with_bg { position: relative; width: 320px; color: #ffffff; padding: 0px; background: #503434; } .section_w320_with_bg_top { width: 320px; height: 30px; margin: 0px; background: url(https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_left_column.jpg) no-repeat; } .section_w320_with_bg_bottom { clear: both; width: 320px; height: 20px; background: url(https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_left_column.jpg) no-repeat; } .new_destination { clear: both; padding: 0px 20px; } .new_destination p { text-align: left; } .new_destination a { color:#FFFF00; } .new_destination .img_wrapper { float: left; background: #ffffff; padding: 4px; margin: 3px 15px 0 0; } .img_wrapper img { width: 80px; height: 68px; border: 1px solid #666; } .new_destination .nd_text { float: right; width: 175px; } /* end of content */ /* footer */ #templatemo_footer { clear: both; position: relative; width: 880px; text-align: center; padding: 20px 0; } #templatemo_footer_bottom { display : block; position: absolute; width: 880px; height: 10px; bottom: 0px; left: 0px; background: url(https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_footerr.jpg) no-repeat; } .footer_list { margin: 0px; padding: 0px; list-style: none; } .footer_list li { padding: 0 10px; display: inline; border-right: 1px solid #333; } .footer_list li a { color: #333; } .footer_list .last { border-right: none; } /* footer */