TEMA6

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>Virtual Site, XHTML CSS Template, Free Download</title> <meta name="keywords" content="Virtual Site, XHTML CSS Template, Free Download" /> <meta name="description" content="Virtual Site - Free CSS Template, Free XHTML CSS Layout" /> <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>Resources</b></a></li> 					<li><a href="#"><b>Tutorials</b></a></li>       				<li><a href="#"><b>Forums</b></a></li>    					<li><a href="#"><b>About</b></a></li>    					<li><a href="#"><b>Contact</b></a></li>	 				</ul> 			</div>         </div>

Tasarım Altına

<div id="templatemo_content_area"> <div id="templatemo_left"> <h1>Virtual Learning Experiences</h1> <p>This is a <a href="http://html-kodlar-merkez.tr.gg" target="_parent">free CSS website template</a> provided by TemplateMo.com. Credit goes to <a href="" target="_blank">Smashing Magazine</a> for icons used in this template. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium vo iatelupti.Fanenon provident, similique sunt in culpa qui officia deserunt.</p> <img src="https://img.webme.com/pic/s/sensenser/templatemo_128_wood_site.jpg" alt="XHTML Template" class="left_img" /> <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium vo iatelupti atum <a href="#">deleniti atque</a> corrupti quos dolores et quas molestias excepturi sint occae cati cupidita tsoft. Fanenon provident, similique sunt in culpa qui officia deserunt mollitia animi.</p> <img src="https://img.webme.com/pic/s/sensenser/templatemo_130_blue.jpg" alt="CSS Template" class="right_img" /> <p>Saathtlorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero temporesel mollitia animi, id est laborum etsao.Sumso eilluta nobis est eligendi <a href="#">optio cumque</a> nihil impedit quo minus id quod maxime placeaestsl.</p> <p>Maecenas ac elit nulla, in eleifend sem. In posuere turpis nibh. Quisque sed consequat ante. In et lectus in erat rhoncus ornare eu vitae nibh. <a href="#">Aliquam blandit</a> laoreet lacus et laoreet.</p> </div> <div id="templatemo_right"> <div class="templatemo_section_1"> <div class="templatemo_sec_1_top"> </div> <div class="templatemo_sec_1_mid"> <h1>Member Login</h1> <form action="" method="post"> <div class="templaetmo_form_row"> <label>Email:</label> <input type="text" value="your email" name="email" class="field" title="email" onfocus="clearText(this)" onblur="clearText(this)" /> <div class="cleaner"></div> </div> <div class="templaetmo_form_row"> <label>Password:</label> <input type="password" value="password" name="password" class="field" title="password" onfocus="clearText(this)" onblur="clearText(this)" id="password" /> <div class="cleaner"></div> </div> <div class="templaetmo_form_row last"> <input type="submit" name="login" value="Login" alt="Login" class="login" title="Login" /> <div class="cleaner"></div> </div> </form> </div> <div class="templatemo_sec_1_bottom"></div> </div> <div class="templatemo_section_1 last"> <div class="templatemo_sec_1_top"> </div> <div class="templatemo_sec_1_mid"> <h1>Categories</h1> <ul class="category_list"> <li><a href="#">Lorem ipsum dolor</a></li> <li><a href="#">Aenean ac lobortis felis</a></li> <li><a href="#">Cras eros dolor</a></li> <li class="last"><a href="#">Vivamus orci velit</a></li> </ul> </div> <div class="templatemo_sec_1_bottom"></div> </div> </div> <div class="cleaner"></div> <div class="templatemo_one_col last"> <div class="templatemo_section_2"> <img src="https://img.webme.com/pic/s/sensenser/templaetmo_img_1.jpg" alt="dice" /> <h1>Mauris in pulvinar risus</h1> <p>Nsunc hendrerit sapien quis th quam put ehef Nuilla dignissim viverra tortor, ultrices al hic ti. Maecenas ist suscipit euismoi tiaosi dales molestie convallis. Aliquam erat vo.</p> </div> <div class="templatemo_section_2"> <img src="https://img.webme.com/pic/s/sensenser/templaetmo_img_2.jpg" alt="box" /> <h1>Crasnon dolor leifend</h1> <p>Mauris in pulvinar risus. Nunc hend reri omnis Marceset isis th quam pulvinar semper volutv. Maecenas i iat est suscipit euismod enim, ege sodales molestie convallis. Aliquam eratl.</p> </div> </div> <div class="cleaner"></div> </div> </div> <div id="templatemo_bottom_section"> <div class="templatemo_container"> <div class="templatemo_section_3"> <h1>Services</h1> <p>Stque corrupti quos dolor es et quas mole and itsst sias except uri sint occae cati cupid ita tsoft non prot.</p> <p><a href="#">Cusa mus et iusto odio</a><br /> <a href="#">Digns simos duci mus</a><br /> <a href="#">Slenti bland tiis prae sent</a><br /> <a href="#">Tum voi ate lupt atum</a></p> </div> <div class="templatemo_section_3"> <h1>Tutorials</h1> <p><a href="#">Flan ditiis prae sentium voe</a><br /> <a href="#">Prae sentium enti se corrupti quos</a><br /> <a href="#">Dolores et quas mole stsias prae</a></p> <p><a href="#">Stque corrupti quos dolor </a><br /> <a href="#">Es et quas mole and itsst sias </a><br /> <a href="#">Except uri sint occae cati cupid ita</a></p> </div> <div class="templatemo_section_3"> <h1>Web Design</h1> <p><a href="">Flash Templates</a><br /> <a href="">Web Design Blog</a><br /> <a href="http://html-kodlar-merkez.tr.gg">XHTML CSS Templates</a></p> <p><a href="#">Simop prae sent iums</a><br /> <a href="#">Slenti bland tiis prae sent</a><br /> <a href="#">Ducimll blanditiis praesentium vo</a></p> </div> <div class="cleaner"></div> </div> <div id="templatemo_footer"> Copyright © 2024 <a href="#">Your Company Name</a> | Designed by <a href="http://html-kodlar-merkez.tr.gg" 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 */ body { margin: 0; padding:0; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 1.5em; width: 100%; display: table; background: url(https://img.webme.com/pic/s/sensenser/templatemo_body_bg.jpg) repeat-x #fde1b9; } a:link, a:visited { color: #cc7b08; text-decoration: underline; } a:active, a:hover { color: #FF6600; text-decoration: none; } p { font-family: Verdana; font-size: 12px; color: #7c3715; text-align: justify; } h1 { font-family: Arial; font-size: 20px; color: #fff; } .templatemo_container { width: 950px; margin: auto; } #templatemo_header { width: 950px; height: 178px; background: url(https://img.webme.com/pic/s/sensenser/templatemo_header.jpg); } /* Menu */ #templatemo_menu { height: 52px; width: 650px; padding: 0; margin: 0 0 0 10px; } #templatemo_menu ul { list-style: none; display: inline; } #templatemo_menu li { float:left; } #templatemo_menu li a { float: left; display: block; color: #993300; text-decoration: none; font-family: Verdana; font-size: 14px; margin: 0 5px 0 0; padding: 0 0 0 18px; height: 52px; line-height: 33px; text-align: center; cursor: pointer; } #templatemo_menu li a b { float: left; display: block; height: 42px; padding: 10px 22px 0 2px; } #templatemo_menu li.current a, #templatemo_menu li a:hover { background: url(https://img.webme.com/pic/s/sensenser/left_current.png) no-repeat; color: #fff; border: none; } #templatemo_menu li.current a b, #templatemo_menu li a:hover b { background: url(https://img.webme.com/pic/s/sensenser/right_current.png) right top no-repeat; border: none; } /*End OF menu*/ #templatemo_content_area { padding: 20px; } #templatemo_left { float: left; width: 590px; margin: 0 0 20px 0; } #templatemo_left h1 { font-family: Garamond; font-size: 24px; color: #1a3e7a; background:url(https://img.webme.com/pic/s/sensenser/templatemo_title_bullet.jpg) left no-repeat; margin: 0 0 10px 0; padding: 0 0 0 20px; } #templatemo_left p { margin: 0 0 10px 0; } #templatemo_right { float: right; width: 297px; margin: 0 0 20px 0 } .templatemo_section_1 { width: 297px; margin: 0 0 20px 0; padding: 0; } .templaetmo_form_row { width: 100%; margin: 0 0 5px 0; } label { float: left; font-family: Tahoma; font-size: 15px; color: #000; display: block; } .login { float: right; width: 70px; } .field { float: right; width: 152px; } .templatemo_section_1 .templatemo_sec_1_top { width: 297px; height: 5px; background: url(https://img.webme.com/pic/s/sensenser/_section_1_bottom.jpg); margin: 0; padding: 0; } .templatemo_section_1 .templatemo_sec_1_mid { width: 257px; background: url(https://img.webme.com/pic/s/sensenser/templaetmo_section_1_mid.jpg); margin: 0; padding: 15px 20px; } .category_list { margin: 0px; padding: 0px; list-style: none; } .category_list li { display: inline-block; height: 17px; padding: 0 0 0 25px; margin: 0 0 15px 0; background: url(https://img.webme.com/pic/s/sensenser/templatemo_cat_bullet.jpg) top left no-repeat; } .category_list li a { color: #7c3715; font-family: Verdana; text-decoration: none; font-size: 12px; } .category_list li a:hover { color: #FF0000; } .category_list .last { margin: 0; } .templatemo_sec_1_mid h1 { font-family: Verdana; font-size: 18px; font-weight: normal; color: #0b0d04; margin: 0 0 20px 0; } .templatemo_section_1 .templatemo_sec_1_bottom { width: 297px; height: 5px; background: url(https://img.webme.com/pic/s/sensenser/_section_1_bottom.jpg); margin: 0; padding: 0; } .templatemo_one_col { float: left; width: 100%; background: #FFF; border: 1px solid #e2d1b8; margin: 0 0 20px 0; } .templatemo_one_col .templatemo_section_2 { float: left; width: 426px; margin: 20px 0 20px 20px; } .templatemo_section_2 img { float: left; margin: 0 10px 10px 0; } .templatemo_section_2 h1 { font-family: Verdana; font-size: 24px; font-weight: normal; color: #04265f; margin: 0 0 10px 0; } .templatemo_section_2 p { margin: 0 0 10px 0; } #templatemo_bottom_section { width: 100%; background: url(https://img.webme.com/pic/s/sensenser/templatemo_bottom_bg.jpg) #5f4838 repeat-x; padding: 20px 0 ; } .templatemo_section_3 { float: left; width: 285px; margin: 0 0 20px 25px; } .templatemo_section_3 p { margin: 0 0 10px 0; color: #fff; } .templatemo_section_3 a { color: #FF9966; } .templatemo_section_3 a:hover { color: #FFFF00; } .templatemo_section_3 h1 { font-family: Tahoma; font-size: 18px; color: #eaf4b6; background:url(images/templatemo_title_bullet_2.jpg) left no-repeat; margin: 0 0 10px 0; padding: 0 0 0 20px; } #templatemo_footer { width: 100%; margin: 0; padding: 15px 0; font-family: Arial; font-size: 12px; color: #fde1b9; background: #504135; text-align: center; border-top: 1px solid #a98f69; border-bottom: 1px solid #a98f69; } #templatemo_footer a { color: #fde1b9; } .last { margin: 0; } .right_img { float: right; margin: 0 0 10px 15px; } .left_img { float: left; margin: 0 15px 10px 0px; } .cleaner { clear: both; height: 0; margin: 0; padding: 0; }