TEMA5

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>The Art Gallery - Free Website Template, XHTML, CSS</title> <meta name="keywords" content="The Art Gallery, Free Website Template, XHTML, CSS" /> <meta name="description" content="The Art Gallery - Free Website Template XHTML CSS provided by TemplateMo.com" /> <link href="templatemo_style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="templatemo_wrapper"> <div id="templatemo_content"> <div id="column_left_column"> <div class="section_w470"> <h2>The Art Gallery</h2> <p>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. Cras auctor, arcu sit amet auctor luctus, lectus sem rhoncus felis, dignissim convallis nulla quam ac dolor. Duis sollicitudin libero et odio dapibus quis pulvinar leo tempus. Cras auctor, arcu sit amet auctor luctus, lectus sem rhoncus felis, dignissim convallis nulla quam ac dolor.</p> <ul class="gallery"> <li><a href="#"><img src="https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_image0001.jpg" alt="image" /> </a></li> <li><a href="#"><img src="https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_image0002.jpg" alt="image" /> </a></li> <li><a href="#"><img src="https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_image0003.jpg" alt="image" /> </a></li> <li><a href="#"><img src="https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_image0004.jpg" alt="image" /> </a></li> <li><a href="#"><img src="https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_image0005.jpg" alt="image" /> </a></li> <li><a href="http://www.templatemo.com" target="_parent"><img src="https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_image0006.jpg" alt="Free Templates" /> </a></li> <li><a href="#"><img src="https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_image0006.jpg" alt="image" /> </a></li> <li><a href="#"><img src="https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_image0007.jpg" alt="image" /> </a></li> </ul> <div class="button_01"><a href="#">view</a></div> </div> </div>  <div id="column_right_column"> <div id="templatemo_menu"> <ul> <li><a href="#" class="current">Home</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">About</a></li> <li><a href="#" class="last">Contact</a></li> </ul> </div>  <div id="templatemo_site_title"> <h1> <a href="http://www.templatemo.com/page/1" target="_parent"> <img src="https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_loogo.png" alt="logo" /> <span>free xhtml css template</span> </a> </h1> </div>

Tasarım Altına

<div class="section_w475"> <h2>Welcome to our WEBSITE</h2> <p>This is a standard compliant XHTML/CSS layout, or free website template, provided by <a href="http://www.templatemo.com" target="_parent">TemplateMo.com</a>. You may download, modify and apply this template for your commercial or personal websites.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor, arcu sit amet auctor luctus, lectus sem rhoncus felis, dignissim convallis nulla quam ac dolor. Duis sollicitudin libero et odio dapibus quis pulvinar leo tempus.</p> <p>Fusce urna tortor, consequat eu lobortis sit amet, ullamcorper eget nulla. Vivamus quis quam vitae neque mattis elementum. Duis a nulla sed metus blandit posuere. Quisque elementum consequat felis.</p> </div> <div class="cleaner_h30"></div> <div class="section_w475"> <h2> Featured Projects</h2> <div class="project_box"> <div class="section_w200 fl"> <img class="image_wrapper fl_image" src="https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_image0009.jpg" alt="photo two" /> </div> <div class="section_w250 fr"> <h3>Multimedia Project</h3> <p>In neque odio, faucibus vitae tincidunt ut, laoreet nec elit. Maecenas semper, ligula eu accumsan pellentesque, massa nisl dignissim mauris, quis laoreet magna ipsum nec ipsum.</p> <div class="button_01"><a href="#">details</a></div> </div> <div class="cleaner"></div> </div> <div class="cleaner_h20"></div> <div class="project_box"> <div class="section_w200 fl"> <img class="image_wrapper fl_image" src="https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_image1000.jpg" alt="photo one" /> </div> <div class="section_w250 fr"> <h3>Web Design Project</h3> <p>Nunc vulputate, lacus ac aliquet congue, ipsum augue luctus leo, sit amet laoreet nunc sem quis purus. Vestibulum vitae placerat felis. Nunc vitae sapien sed dui volutpat pharetra sed viverra nisl.</p> <div class="button_01"><a href="http://www.templatemo.com" target="_parent">details</a></div> </div> <div class="cleaner"></div> </div> </div> </div> <div class="cleaner"></div> </div>  </div>  <div id="templatemo_footer"> <ul class="footer_menu"> <li><a href="#">Home</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">About</a></li> <li class="last_menu"><a href="#">Contact</a></li> </ul> 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>  </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: Georgia, "Times New Roman", Times, serif; font-size: 12px; color: #2e1313; background: #dbc8ac; } a:link, a:visited { color: #884400; text-decoration: none; font-weight: normal; } a:active, a:hover { color: #990000; text-decoration: underline; } 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; } .cleaner_h10 { clear: both; width:100%; height: 10px; } .cleaner_h20 { clear: both; width:100%; height: 20px; } .cleaner_h30 { clear: both; width:100%; height: 30px; } .fl { float: left; } .fr { float: right; } .mr_w40 { margin-right: 40px; } h1 { margin: 0px; padding: 2px 0; font-size: 30px; font-weight: bold; } h2 { margin: 0 0 10px 0; padding: 25px 0 10px 60px; font-size: 26px; font-weight: normal; height: 30px; color: #2e1313; background: url(https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_h2_bg.jpg) left top no-repeat; } h3 { padding: 0 0 5px 0; margin: 0 0 5px 0; font-size: 14px; font-weight: bold; } .button_01 a { clear: both; display: block; width: 100px; height: 42px; padding-top: 10px; background: url(https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_mare_bg.jpg) no-repeat; color: #000; font-size: 12px; font-weight: bold; text-align: center; text-decoration: none; letter-spacing: 1px; } .button_01 a:hover { color: #FF0; } .image_wrapper{ border: 1px solid #000; margin-top: 3px; margin-bottom: 5px; } .fl_image { float: left; margin-right: 15px; } .fr_image { float: right; margin-left: 15px; } #templatemo_wrapper { width: 1340px; margin: 0 auto; background: url(https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_main_bg.jpg) top center no-repeat; } #templatemo_content { width: 980px; margin: 0 auto; padding: 0 10px; background: url(https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_containeer_bg.jpg) top left no-repeat; } #templatemo_content p { margin-bottom: 10px; } #column_left_column { float: left; width: 470px; padding-top: 550px; } #column_right_column { float: right; width: 475px; } .section_w470 { width: 470px; margin-bottom: 40px; } .section_w475 { width: 475px; } .gallery { margin: 20px 0 0 0; padding: 0px; list-style: none; } .gallery li { margin: 0 0 0 0; padding: 0; display: inline; } .gallery li a { float: left; display: block; width: 76px; height: 76px; border:1px solid #000000; margin: 0 20px 20px 0; } /* menu */ #templatemo_menu { clear: both; width: 475px; height: 65px; margin-top: 25px; margin-bottom: 50px; background: url(https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_manu_bg.png) no-repeat; } #templatemo_menu ul { overflow: hidden; padding: 18px 0 0 0; margin: 0px; list-style: none; } #templatemo_menu ul li { padding: 0px; margin: 0px; display: inline; } #templatemo_menu ul li a { float: left; display: block; padding: 3px 20px 5px 20px; font-size: 18px; text-align: center; font-weight: normal; text-decoration: none; color: #2e1313; background: url(images/templatemo_menu_right.jpg) right top no-repeat; border-right: 1px solid #2e1313; outline: none; } #templatemo_menu li .last { border: none; } #templatemo_menu li a:hover, #templatemo_menu li .current { color: #ffffff; } /* end of menu */ #templatemo_site_title { width: 475px; text-align: center; margin-bottom: 50px; } #templatemo_site_title h1 a { display: block; color: #000000; text-decoration: none; } #templatemo_site_title h1 a span { display: block; font-size: 18px; margin-left: 5px; color: #37322b; font-weight: bold; } .project_box { clear: both; width: 475px; } .section_w200 { width: 200px; } .section_w250 { width: 250px; } /* footer */ #templatemo_footer { clear: both; width: 980px; padding: 40px 10px; margin: 0 auto; text-align: center; background: url(https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_divideer.jpg) top center no-repeat; } #templatemo_footer a { font-weight: bold; color: #000000; } #templatemo_footer .footer_menu { margin: 0 0 10px 0; padding: 0px; list-style: none; } .footer_menu li { margin: 0px; padding: 0 20px; display: inline; border-right: 1px solid #000000; } .footer_menu .last_menu { border: none; } /* end of footer */