TEMA4

Tasarası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>Greeny Website Template, Download Free XHTML CSS Layout</title> <meta name="keywords" content="Greeny Website Template, Download Free XHTML CSS Layout" /> <meta name="description" content="Greeny Website Template, Download Free XHTML CSS Layout from 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 class="templatemo_container"> <div id="templatemo_header"> <div id="templatemo_menu"> <ul> <li class="current"><a href="#" ><b>HOME</b></a></li> <li><a href="#"><b>SERVICES</b></a></li> <li><a href="#"><b>PRODUCTS</b></a></li> <li><a href="#"><b>PARTNERS</b></a></li> <li><a href="#"><b>CONTACTS</b></a></li> </ul> </div> </div> <div id="templatemo_news_section"> <div id="templatemo_news_area"> <h1>GREENY Website Template</h1> <p>This is a standard compliant XHTML CSS layout provided by <a href="http://www.templatemo.com/page/1" target="_parent">TemplateMo.com</a> for free of charge. You may download, edit and apply thistemplate for your personal or commercial websites. Credit goes to <a href="http://www.photovaco.com" target="_blank">PhotoVaco </a>for photos used in this template.</p> <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> </div>

Tasarım Altına

<div id="templatemo_project_section"> <h1>LATEST PROJECT</h1> <div id="templatemo_section_area"> <div class="templatemo_section_1"> <img src="https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_img_1.jpg" alt="butterfly" /> <p>Aliquam elit risus, volutpat quis, mattis ac, elementum eget, mauris. In hac habitasse platea dictumst. Aenean cursus. Maecenas aliquam, ligula id egestas suscipit, nisi sapien dignissim nibh, ac vestibulum lorem urna in neque.</p> </div> <div class="section_mid"> <img src="https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_img_2.jpg" alt="leaf" /> <p>Aenean eget tortor eget ipsum aliquet porta. Vestibulum quis pede non urna venenatis vehicula. Praesent vel diam. Cras sed leo tempor neque placerat pretium. Curabitur nec odio. Phasellus tincidunt, tortor lacinia blandit.</p> </div> <div class="section_mid"> <img src="https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_img_3.jpg" alt="food" /> <p>Sed ultrices. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur velit tellus, placerat et, dapibus varius, aliquet quis, purus. Aliquam sagittis molestie sapien. Nulla tellus risus, tincidunt vitae, sagittis vel, interdum at, erat.</p> </div> <div class="cleaner"></div> </div> </div> <div id="templatemo_project_section_bottom"> </div> <div id="templatemo_bottom_section"> <div class="templatemo_newsletter_section"> <div class="templatemo_newsletter_top"> </div> <div class="templatemo_newsletter_mid"> <h1>Newsletter</h1> <p>Enter your email address to subscribe our newsletter.</p> <form action="#" method="post"> <input type="text" value="Type Your Email" name="q" class="field" title="email" onfocus="clearText(this)" onblur="clearText(this)" /> <input type="submit" name="Search" value="Subscribe" alt="Search" class="button" title="Subscribe" /> </form> <p>Tel: 010-010-0100</p> <p>Fax: 020-020-0200</p> <p>Email: info [at] templatemo.com</p> </div> <div class="templatemo_newsletter_bottom"> </div> </div> <div id="templatemo_content_section"> <h1>current activities</h1> <p>Nulla enim nibh, consectetuer sed, vestibulum elementum, sagittis nec, diam. Mauris blandit vehicula neque. Proin consectetuer. Donec venenatis. Cras urna metus, feugiat non, consectetuer quis, pretium quis, nunc. Nullam pede purus, tempor a, imperdiet in, porttitor at, nulla. </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. </p> <ul> <li><a href="#">Aliquam elit risus, Volutpat quis, mattis ac</a></li> <li><a href="#">Elementum eget, mauris</a></li> <li><a href="#">In hac habitasse platea dictumst</a></li> <li><a href="#">Phasellus tincidunt, tortor lacinia blandit</a></li> </ul> </div> <div class="cleaner"></div> </div> <div id="templatemo_footer"> Copyright © 2024 <a href="#">Your Company Name</a> | Designed by <a href="http://www.templatemo.com/page/1" target="_parent">Free CSS Templates</a> | Validate <a href="http://validator.w3.org/check?uri=referer">XHTML</a> & <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> </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; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 1.5em; width: 100%; display: table; background: #fff; } a:link, a:visited { color: #dbfee1; font-weight:bold; text-decoration: underline; } a:active, a:hover { color: #dbfee1; text-decoration: none; font-weight:bold; } p { font-family: Tahoma, "Trebuchet MS", Verdana; font-size: 11px; color: #dbfee1; text-align: justify; margin: 0 0 10px 0; } h1 { font-family: "Trebuchet MS", Tahoma, Verdana; font-size: 18px; color: #fff; margin: 0 0 10px 0; } .templatemo_container { width: 870px; margin: 0; } #templatemo_header { width: 867px; height: 49px; background: url(https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_header.jpg) left top no-repeat; padding: 10px 0 0 0; } /* Menu */ #templatemo_menu { height: 46px; width: 650px; margin: 0 auto; padding: 0; } #templatemo_menu ul { list-style: none; display: inline; } #templatemo_menu li { float:left; } #templatemo_menu li a { float: left; display: block; color: #005500; background: url(https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_menu_left.png) no-repeat; text-decoration: none; font-size: 12px; margin: 0 5px 0 0; padding: 0 0 0 7px; height: 45px; line-height: 33px; text-align: center; cursor: pointer; } #templatemo_menu li a b { float: left; display: block; height: 40px; padding: 5px 20px 0 11px; background: url(https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_menu_right.png) right top no-repeat; } #templatemo_menu li.current a, #templatemo_menu li a:hover { background: url(https://img.webme.com/pic/h/html-kodlar-merkez/menu_left_current.png) no-repeat; color: #fff; } #templatemo_menu li.current a b, #templatemo_menu li a:hover b { background: url(https://img.webme.com/pic/h/html-kodlar-merkez/menu_right_current.png) right top no-repeat; } /*End OF menu*/ #templatemo_news_section { height: 204px; width: 819px; background: url(https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_newsection.jpg); padding: 33px 0 0 48px; } #templatemo_news_area { float: left; width: 450px; margin: 0 0 0 20px ; } #templatemo_news_section h1 { color: #b7f298; font-size: 22px; background: url(https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_header_line.png) bottom left no-repeat; padding: 0 0 10px 0; } #templatemo_project_section { width: 819px; background: url(https://img.webme.com/pic/h/html-kodlar-merkez/project_section_mid.jpg) repeat-y; margin: 0; padding: 20px 0 0 48px; } #templatemo_project_section h1 { color: #006600; margin: 0 0 10px 25px; text-decoration: underline; } #templatemo_project_section_bottom { width: 867px; height: 43px; background: url(https://img.webme.com/pic/h/html-kodlar-merkez/project_section_bottom.jpg) repeat-y; margin: 0; padding: 0 } #templatemo_section_area { width: 811px; } #templatemo_section_area .templatemo_section_1 { float: left; width: 225px; margin: 20px 0 20px 30px; } .templatemo_section_1 img { float: left; margin: 0 10px 10px 0; } .templatemo_section_1 h1 { font-family: Verdana; font-size: 24px; font-weight: normal; color: #04265f; margin: 0 0 10px 0; } .templatemo_section_1 p { color: #000; margin: 0 0 10px 0; } .section_mid { background: url(https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_section_brake.jpg) no-repeat left; width: 225px; margin: 20px 0 20px 10px; padding: 0 0 0 30px; float: left; } .section_mid p { color: #000; margin: 0 0 10px 0; } #templatemo_bottom_section { width: 819px; background: url(https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_header_line.png) repeat-y; margin: 0; padding: 20px 0 0 48px; } .templatemo_newsletter_section { float: left; width: 245px; background: url(https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_button.png) no-repeat right bottom; } .templatemo_newsletter_section .templatemo_newsletter_top { width: 245px; height: 10px; background: url(https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_newsletter_top.png); margin: 0; } .templatemo_newsletter_section .templatemo_newsletter_mid { width: 205px; background: url(https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_newsletter_mid.png); margin: 0; padding: 10px 20px; } .templatemo_newsletter_mid h1 { color: #004400; font-variant:small-caps; text-decoration: underline; } .templatemo_newsletter_mid p { color: #004400; } .templatemo_newsletter_section .templatemo_newsletter_bottom { width: 245px; height: 9px; background: url(https://img.webme.com/pic/h/html-kodlar-merkez/project_section_bottom.jpg); margin: 0; } #templatemo_content_section { float: left; width: 530px; margin: 0 0 0 20px; } #templatemo_content_section h1 { color: #004400; font-variant:small-caps; text-decoration: underline; } #templatemo_content_section p { color: #004400; } #templatemo_content_section li { list-style: square; color: #004400 } #templatemo_content_section a { color: #004400; } .field { width: 163px; height: 20px; border: none; background: url(https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_input.jpg) no-repeat; padding: 2px; } .button { width: 75px; height: 23px; border: none; background: url(https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_button.png) no-repeat; margin: 10px 0; } #templatemo_footer { width: 867px; height: 49px; background: url(https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_foooter_bg.jpg); color: #FFFFFF; font-family: Arial; font-size: 12px; margin: 0; padding: 40px 0 0 0; text-align: center; } #templatemo_footer a { color: #FFFFFF; } .last { margin: 0; } .right_img { float: right; margin: 0 0 5px 5px; } .left_img { float: left; margin: 0 5px 5px; } .cleaner { clear: both; height: 0; margin: 0; padding: 0; }