TEMA3

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>Architect, XHTML CSS Template, Free Download</title> <meta name="keywords" content="Free CSS Template, Architect Website, XHTML, CSS" /> <meta name="description" content="Architect is a free CSS template or a free XHTML CSS layout for everyone." /> <link href="templatemo_style.css" rel="stylesheet" type="text/css" /> <link href="fullsize/fullsize.css" media="screen" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="fullsize/jquery.js"></script> <script type="text/javascript" src="fullsize/jquery.fullsize.minified.js"></script> <script language="javascript" type="text/javascript"> function clearText(field) { if (field.defaultValue == field.value) field.value = ''; else if (field.value == '') field.value = field.defaultValue; } $(function(){ $("div.templatemo_gallery img").fullsize(); }); </script> </head> <body> <div id="templatemo_container"> <div id="templatemo_header"> <div id="templatemo_header_logo"> <div id="templatemo_header_slogan"> Modern Building Designs </div> <div id="templatemo_search"> <form action="#" method="post"> <input type="radio" name="search" value="site" checked="checked" /><label class="labels">This Site</label> <input type="radio" name="search" value="web" /><label class="labels">The Web</label> <input type="text" value="Enter a keyword" name="q" class="field" title="email" onfocus="clearText(this)" onblur="clearText(this)" /> <input type="submit" name="search" value = "" alt="Search" class="button" title="Subscribe" /> </form> </div> </div> <div id="templatemo_menu"> <ul> <li><a href="#" class="current">Home</a></li> <li><a href="#">Latest News</a></li> <li><a href="#">Projects</a></li> <li><a href="#">Services</a></li> <li><a href="#">Awards</a></li> <li><a href="#">Company</a></li> <li><a href="#" class="last">Contact</a></li> </ul> </div> </div> <div class="templatemo_section_1"> <div class="templatemo_section_1_contentarea"> <div class="templatemo_text"> <h1>Nulla imperdiet congue metus.</h1> <img src="https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_icon_12.png" alt="icon" /> <p>This is a standard compliant CSS template provided by <a href="http://www.templatemo.com" target="_parent">TemplateMo.com</a> for free of charge. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium vo iatelupti.</p> <p>Fanenon provident, similique sunt in culpa qui officia deserunt. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p> </div> <div class="templatemo_img"> <img src="https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_img_12.jpg" alt="CSS Template" /> </div> <div class="cleaner"></div> </div>

Tasarım Altına

<div class="cleaner"></div> <div class="templatemo_section_1_bottom"> </div> </div> <div id="templatemo_content_area"> <div id="templatemo_left"> <h2><span class="big">Welcome</span> to Our Company</h2> <p>Vivamus leo velit, convallis id, ultrices sit amet, tempor a, libero. <a href="#">Quisque rhoncus</a> nulla quis sem. Mauris quis nulla sed ipsum pretium sagittis. Suspendisse feugiat. </p> <p>Etiam nec enim. Cras arcu. Integer molestie. Aliquam a dui. Suspendisse ac magna quis est eleifend dictum. Suspendisse at pede vel lorem pulvinar laoreet.</p> <p><a href="#">Donec dapibus</a> viverra est. Maecenas dignissim, quam a posuere scelerisque, ligula arcu dictum turpis, id tempus turpis erat at nulla.</p> <p><a href="#">Suspendisse</a> ac magna quis est eleifend dictum. In velit urna, convallis id, pharetra in, iaculis sit amet, mi. Praesent consectetur imperdiet mauris.</p> <div class="templatemo_readmore_2"><a href="#">MORE</a></div> <div class="cleaner"></div> <a href="#"><img src="https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_newsletterr.jpg" alt="News Letter" /></a> </div> <div class="templatmo_v_line"></div> <div id="templatemo_mid"> <h2>Featured Projects</h2> <p>Vestibulum ullamcorper ipsum nec augue. Vestibulum auctor odio eget ante. Nunc commodo, magna pharetra semper vehicula, dui ligula feugiat elit, et euismod nunc orci ut libero. </p> <p>Etiam sodales massa vel metus. Mauris et elit quis mauris aliquet luctus. Cras urna metus, feugiat non, consectetuer quis, pretium quis, nunc. Nullam pede purus, tempor a, imperdiet in, porttitor at, nulla.</p> <ul class="category_list"> <li><a href="#">Sed pellentesque placerat augue</a></li> <li><a href="#">Praesent consectetur imperdiet mauris</a></li> <li><a href="#">Suspendisse rhoncus lectus sit amet</a></li> <li><a href="#">Mauris varius risus fermentum nulla</a></li> </ul> <div class="templatemo_readmore_2"><a href="#">MORE</a></div> <div class="cleaner"></div> <h2>Projects</h2> <div class="templatemo_gallery"> <img src="https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_thumb_11.jpg" class="left" longdesc="https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_big_11.jpg" title="Inside Building" alt="Inside Building" /> <img src="https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_thumb_22.jpg" class="mid" longdesc="https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_big_22.jpg" title="Building" alt="Building" /> <img src="https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_thumb_33.jpg" class="right" longdesc="https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_big_33.jpg" title="Building" alt="Building" /></div> </div> <div class="templatmo_v_line"></div> <div id="templatemo_right"> <h2>Latest News</h2> <h3>Nulla enim nibh, consectetuer sed</h3> <span class="date">Sept 14th, 2024</span> <p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros u erat.</p> <div class="templatemo_readmore_2"><a href="#">MORE</a></div> <div class="templatemo_h_line"></div> <h3>Fusce pellentesque suscipit nibh</h3> <span class="date">Aug 21st, 2024</span> <p>Sed adipiscing ornare risus. Morbi est est, blandit sit amet, sagittis vel, euismod vel, velit. Ege stas sem.</p> <div class="templatemo_readmore_2"><a href="#">MORE</a></div> <div class="templatemo_h_line"></div> <h3>Vivamus molestie gravida turpis</h3> <span class="date">Jun 28th, 2024</span> <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p> <div class="templatemo_readmore_2"><a href="#">MORE</a></div> </div> <div class="cleaner"></div> </div> <div class="cleaner"></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> </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 */ html { background: #e3e3e3; } body { margin: 0; padding:0; font-family: Tahoma, "Trebuchet MS", Verdana; font-size: 12px; line-height: 1.5em; width: 100%; display: table; background: #e3e3e3; } a:link, a:visited { color: #494949; text-decoration: underline; } a:active, a:hover { color: #000000; text-decoration: none; } p { font-size: 11px; color: #484848; text-align: justify; margin: 0 0 10px 0; } span.date { font-size: 11px; color: #999999; text-align: justify; margin: 0 0 3px 0; } h1 { font-size: 23px; color: #a18800; margin: 0 0 10px 0; } h2 { font-size: 18px; color: #565656; font-weight: normal; margin: 0 0 10px 0; } h3 { font-size: 13px; color: #a18800; font-weight: normal; margin: 0 0 3px 0; } #templatemo_container { width: 960px; margin: auto; } #templatemo_header { width: 960px; height: 169px; } #templatemo_header_logo { width: 960px; height: 115px; background: url(https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_logoo.jpg); padding: 1px 0 0 0; } #templatemo_header_slogan { font-size: 14px; color: #fff; margin: 68px 0 0 106px; float: left; } #templatemo_search { float: right; width: 280px; height: 70px; margin: 40px 30px 0 0; } .labels { color: #fff; font-size: 12px; } .field { float: left; width: 166px; height: 24px; border: none; border: none; color : #686868; background: url(https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_search_fieldd.jpg) no-repeat; margin: 8px 0 0 10px; padding: 3px 3px 0 3px; } .button { float: right; width: 89px; height: 27px; border: none; background: url(https://img.webme.com/pic/h/html-kodlar-merkez/templaetmo_bottomm.png) no-repeat; margin: 8px 5px 0 0; cursor: pointer; } /* menu */ #templatemo_menu { float: left; width: 960px; height: 48px; background: url(https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_menu_bbg.jpg); padding: 5px 0 0 0; } #templatemo_menu ul { float: right; margin: 0px; padding: 0 0 0 0; width: 960px; list-style: none; } #templatemo_menu ul li { display: inline; } #templatemo_menu ul li a { float: left; padding: 11px 40px; text-align: center; font-size: 12px; text-align: center; text-decoration: none; background: url(https://img.webme.com/pic/h/html-kodlar-merkez/menu_divider.png) center right no-repeat; color: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 13px; outline: none; } #templatemo_menu li a:hover, #templatemo_menu li .current { color: #ffeb00; } #templatemo_menu li .last { background: none; } /* end of menu*/ .templatemo_section_1 { width: 960px; background: url(https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_section_1.jpg); } .templatemo_section_1_contentarea { width: 958px; background:url(https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_contentarea_bgg.jpg) no-repeat top; margin: 0; padding: 1px; } .templatemo_section_1_contentarea .templatemo_text { float: left; width: 375px; margin: 35px 0 0 35px; } .templatemo_section_1_contentarea .templatemo_img { float: right; margin: 5px 8px 0 0; } .templatemo_text img { float: left; margin: 0 10px 5px 0; } .templatemo_section_1_bottom { width: 960px; height: 21px; background: url(https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_section_1.jpg); } #templatemo_content_area { width: 960px; margin: 10px 0 0 0; } #templatemo_left { float: left; width: 302px; padding: 0 15px; margin: 0 2px 0 0; } #templatemo_left span.big { font-size: 23px; color: #a18800; font-weight: bold; } #templatemo_left img { border: none; } #templatemo_mid{ float: left; width: 326px; margin: 0 3px; padding: 0 15px; } .category_list { margin: 0 20px; padding: 0px; list-style: none; display: block; } .category_list li { display: block; height: 15px; clear: right; padding: 0 0 0 20px; margin: 0 0 10px 0; background: url(https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_list_bullett.png) top left no-repeat; background-position: 0 5px; } .category_list li a { color: #5c5c5c; font-weight: bold; text-decoration: underline; font-size: 12px; } .category_list li a:hover { color: #000000; text-decoration: none; } #templatemo_right { float: right; width: 230px; margin: 0 0 0 0; padding: 0 15px; } .templatmo_v_line { height: 360px; float: left; width: 2px; background:url(https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_v_linee.jpg); } .templatemo_h_line { width: 100%; clear: both; border-top: #c1c1c1 1px solid; border-bottom: #f6f6f6 1px solid; margin: 0 0 10px 0; } .templatemo_readmore_2 { float: right; font-size: 11px; font-weight: bold; color: #484848; background: url(https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_readmore_22.png) left top no-repeat; padding: 0 0 0 15px; background-position: 0 4px; margin: 0 0 10px 0; } .templatemo_readmore_2 a { color: #484848; text-decoration: none; } .templatemo_readmore_2 a:hover, .templatemo_readmore_2:hover { text-decoration: underline; } .templatemo_gallery { margin: 0; padding: 0; } .templatemo_gallery img { float: left; margin: 0 0 20px 0; } .templatemo_gallery img.mid { float: left; margin: 0 20px; } #templatemo_footer { clear: both; width: 960px; height: 32px; background: url(https://img.webme.com/pic/h/html-kodlar-merkez/templatemo_footer_bbg.jpg); margin: 20px 0; padding: 15px 0 0 0; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #fff; text-align: center; } #templatemo_footer a { color: #fff; text-decoration: underline; } #templatemo_footer a:hover { color: #fff; text-decoration: none; } .cleaner { clear: both; height: 0; margin: 0; padding: 0; }