HiTDizayN™

Photo Galeri Tasarimi

TASARIM ÜSTÜ
<div id="templatemo_container"> <div id="templatemo_banner"> <div id="logo"></div>  <div id="search_section"> <form action="#" method="get"> <input type="text" value="Enter keyword here..." name="q" size="10" id="searchfield" title="searchfield" onfocus_fckprotectedatt="%20onfocus%3D%22clearText(this)%22" onblur_fckprotectedatt="%20onblur%3D%22clearText(this)%22" /> <input type="submit" name="Search" value="Search" alt="Search" id="searchbutton" title="Search" /> </form> </div> </div>  <div id="templatemo_menu"> <ul> <li><a href="#" _fcksavedurl="#" class="current"><span></span>Home</a></li> <li><a href="#" _fcksavedurl="#"><span></span>Gallery</a></li> <li><a href="#" _fcksavedurl="#"><span></span>Blog</a></li> <li><a href="#" _fcksavedurl="#"><span></span>Forum</a></li> <li><a href="#" _fcksavedurl="#"><span></span>About Us</a></li> <li><a href="#" _fcksavedurl="#"><span></span>Contact Us</a></li> </ul> </div>  <div id="templatemo_content_wrapper"> <div id="templatemo_content"> <div class="column_w210 fl"> <div class="header_01"> Latest Blog Posts </div> <div class="latest_news"> <div class="header_03">[29-OCT-2024]</div> <div class="header_02"><a href="#" _fcksavedurl="#">Aenean a bibendum augue</a></div> <p>Praesent eu ligula quis nibh ullamcorper tempor non ultrices lacus.</p> </div> <div class="margin_bottom_10"></div> <div class="latest_news"> <div class="header_03">[28-OCT-2024]</div> <div class="header_02"><a href="#" _fcksavedurl="#">Nulla pharetra leo eget </a></div> <p>Vivamus condimentum justo id tortor rhoncus eu ornare sem malesuada. </p> </div> <div class="margin_bottom_10"></div> <div class="latest_news"> <div class="header_03">[27-OCT-2024]</div> <div class="header_02"><a href="#" _fcksavedurl="#">Vivamus metus justo</a></div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </div> <div class="margin_bottom_10"></div> <div class="rc_btn_01"><a href="#" _fcksavedurl="#">Read All</a></div> <div class="cleaner"></div> </div>  <div class="column_w430 fl vl_divider">

TASARIM ALTI
<div class="cleaner"></div> </div>  <div class="column_w210 fl vl_divider"> <div class="header_01"> Categories </div> <ul class="category_list"> <li><a href="#" _fcksavedurl="#">Lorem ipsum dolor</a></li> <li><a href="#" _fcksavedurl="#">Aenean ac lobortis felis</a></li> <li><a href="#" _fcksavedurl="#">Cras eros dolor</a></li> <li><a href="#" _fcksavedurl="#">Vivamus orci velit</a></li> <li><a href="#" _fcksavedurl="#">Proin ultrices eros</a></li> <li><a href="#" _fcksavedurl="#">Aliquam ac nisl eget</a></li> <li><a href="#" _fcksavedurl="#">Praesent vehicula tellus</a></li> <li><a href="#" _fcksavedurl="#">Mauris egestas nunc</a></li> <li><a href="#" _fcksavedurl="#">Ut semper porta magna</a></li> <li><a href="#" _fcksavedurl="#">Donec ante risus</a></li> <li><a href="#" _fcksavedurl="#">Nunc bibendum neque</a></li> </ul> <div class="cleaner"></div> </div>  <div class="margin_bottom_20 h_divider"></div> <div class="margin_bottom_20"></div> <div class="column_w920"> <div class="column_w190 fl margin_right_40"> <a href="#" _fcksavedurl="#"><img src="images/templatemo_image_02.jpg" _fcksavedurl="images/templatemo_image_02.jpg" alt="image" /></a> <p>Nam sit amet justo vel libero tincidunt dignissim. Cras magna velit, pellentesque mattis, faucibus vitae, feugiat vitae. <a href="#" _fcksavedurl="#">Read more...</a></p> </div> <div class="column_w190 fl margin_right_40"> <a href="#" _fcksavedurl="#"><img src="images/templatemo_image_03.jpg" _fcksavedurl="images/templatemo_image_03.jpg" alt="image" /></a> <p>Pellentesque tortor metus, gravida ut aliquet non, iaculis nec nisi. Null am ornare, mauris vitae vehicula veh icula. <a href="#" _fcksavedurl="#">Read more...</a></p> </div> <div class="column_w190 fl margin_right_40"> <a href="#" _fcksavedurl="#"><img src="images/templatemo_image_04.jpg" _fcksavedurl="images/templatemo_image_04.jpg" alt="image" /></a> <p>Proin consequat interdum mauris id auctor. In justo dolor, luctus sed tristique vel, porttitor eu enim. In molestie vehicula pretium iaculis. <a href="#" _fcksavedurl="#">Read more...</a></p> </div> <div class="column_w190 fl"> <a href="#" _fcksavedurl="#"><img src="images/templatemo_image_05.jpg" _fcksavedurl="images/templatemo_image_05.jpg" alt="image" /></a> <p>Suspendisse odio erat, mattis in hend rerit id, iaculis at metus. Aliquam ligula justo, gravida sed pretium eu. <a href="#" _fcksavedurl="#">Read more...</a></p> </div> <div class="margin_bottom_15"></div> </div> <div class="cleaner"></div> </div>  </div>  <div id="templatemo_footer"> <ul class="footer_list"> <li><a href="#" _fcksavedurl="#" class="current">Home</a></li> <li><a href="#" _fcksavedurl="#">Gallery</a></li> <li><a href="#" _fcksavedurl="#">Blog</a></li> <li><a href="#" _fcksavedurl="#">Forum</a></li> <li><a href="#" _fcksavedurl="#">About Us</a></li> <li class="last"><a href="#" _fcksavedurl="#">Contact Us</a></li> </ul> <div class="margin_bottom_10"></div> Copyright © 2024 <a href="#" _fcksavedurl="#">Your Company Name</a> | Designed by <a href="http://www.templatemo.com" _fcksavedurl="http://www.templatemo.com" target="_parent">Free CSS Templates</a> <div class="margin_bottom_10"></div> <a href="http://validator.w3.org/check?uri=referer" _fcksavedurl="http://validator.w3.org/check?uri=referer"><img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-xhtml10" _fcksavedurl="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" width="88" height="31" vspace="8" border="0" /></a> <a href="http://jigsaw.w3.org/css-validator/check/referer" _fcksavedurl="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" _fcksavedurl="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" vspace="8" border="0" /></a> </div>  </div>

CSS

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: 12px; color: #ffffff; background: #250d0b url(http://www.templatemo.com/templates/templatemo_110_lin_photo/images/templatemo_bg.jpg) top repeat-x; } a:link, a:visited { color: #fcdd31; text-decoration: underline; font-weight: normal; } a:active, a:hover { color: #fcdd31; text-decoration: none; } p { margin: 0px; padding: 0px; } img { margin: 0 0 15px 0; padding: 0px; border: 3px solid #cccccc; } .cleaner { clear: both; width: 100%; height: 0px; font-size: 0px; } .margin_bottom_10 { clear: both; width: 100%; height: 10px; font-size: 1px; } .margin_bottom_15 { clear: both; width: 100%; height: 15px; 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; } .h_divider { background: url(http://www.templatemo.com/templates/templatemo_110_lin_photo/images/templatemo_horizontal_divider.jpg) bottom repeat-x; } .vl_divider { background: url(http://www.templatemo.com/templates/templatemo_110_lin_photo/images/templatemo_vertical_divider.jpg) left repeat-y; } .vr_divider { background: url(http://www.templatemo.com/templates/templatemo_110_lin_photo/images/templatemo_vertical_divider.jpg) right repeat-y; } .fl { float: left; } .fr { float: right } .header_01 { padding: 0 0 10px 0; margin: 0 0 10px 0; font-size: 16px; color: #fbbc53; font-weight: bold; } .header_02 a { padding: 0 0 5px 0; font-size: 12px; font-weight: bold; color: #fbbc53; } .header_03 { padding: 0; font-size: 11px; color: #ffffff; font-weight: bold; } .rc_btn_01 a { clear: both; float: right; display: block; width: 100px; height: 25px; padding: 5px 0 0 0; font-size: 12px; text-align: center; color: #ffffff; font-weight: bold; text-decoration: none; border: none; background: url(http://www.templatemo.com/templates/templatemo_110_lin_photo/images/templatemo_button_01.jpg) no-repeat; } #templatemo_container { width: 960px; margin: 0 auto; padding: 0 10px; background: url(http://www.templatemo.com/templates/templatemo_110_lin_photo/images/templatemo_container_bg.png) repeat-y; } #templatemo_banner { width: 960px; height: 149px; margin: 0 auto; background: url(http://www.templatemo.com/templates/templatemo_110_lin_photo/images/templatemo_banner_bg.jpg) no-repeat; } #templatemo_banner #logo { float: left; margin: 30px 0 0 40px; width: 303px; height: 114px; background: url(http://www.templatemo.com/templates/templatemo_110_lin_photo/images/templatemo_logo.png) no-repeat; } #search_section { float: right; margin: 100px 20px 0 0; } #search_section form { float: right; margin: 0px; padding: 0px; } #searchfield { height: 16px; width: 180px; padding: 5px; margin: 0px; color: #ffffff; font-size: 12px; font-variant: normal; line-height: normal; background: #af1313; border: 1px solid #000000; } #searchbutton { height: 29px; margin: 0px; padding: 4px 6px 6px 6px; cursor: pointer; font-size: 12px; text-align: center; vertical-align: bottom; white-space: pre; color: #ffffff; background: none; border: 1px solid #000000; } /* menu */ #templatemo_menu { clear: both; width: 960px; height: 42px; background: url(http://www.templatemo.com/templates/templatemo_110_lin_photo/images/templatemo_menu_bg.jpg) repeat-x; } #templatemo_menu ul { float: left; margin: 0px; padding: 0 0 0 20px; list-style: none; } #templatemo_menu ul li { margin: 0px; padding: 0px; display: inline; } #templatemo_menu ul li a { position: relative; float: left; display: inline-block; height: 30px; width: 130px; margin-right: 10px; text-align: center; padding: 12px 0 0 0; font-size: 13px; font-weight: bold; text-decoration: none; color: #ffffff; outline: none; } #templatemo_menu li a:hover, #templatemo_menu li .current { position: relative; color: #ffffff; background: url(http://www.templatemo.com/templates/templatemo_110_lin_photo/images/templatemo_menu_hover_right.jpg) top right no-repeat; } #templatemo_menu li a:hover span, #templatemo_menu li .current span { position: absolute; display: inline-block; width: 15px; height: 42px; top: 0; left: 0; background: url(http://www.templatemo.com/templates/templatemo_110_lin_photo/images/templatemo_menu_hover_left.jpg) no-repeat; } /* end of menu */ /* content */ #templatemo_content { padding: 0 20px; } .column_w210 { padding: 0 20px; margin-top: 40px; width: 185px; /* width 205 */ } .column_w430 { padding: 0 20px; margin-top: 40px; width: 430px; /* width 470 */ } .column_w920 { width: 880px; padding: 0 20px; } .column_w190 { width: 190px; } .column_w430 p { text-align: justify; margin-bottom: 15px; } .latest_news { clear: both; padding-bottom: 10px; } .category_list { margin: 0px; padding: 0px; list-style: none; } .category_list li { display: inline-block; height: 20px; padding: 6px 0 0 25px; margin: 0 0 5px 0; background: url(http://www.templatemo.com/templates/templatemo_110_lin_photo/images/templatemo_list_icon.jpg) top left no-repeat; } .category_list li a { color: #cccccc; text-decoration: none; font-size: 13px; font-weight: bold; } .category_list li a:hover { color: #fcdd31; } /* end of content */ /* footer */ #templatemo_footer { clear: both; width: 960px; padding: 20px 0 20px 0; text-align: center; border-top: 1px solid #8b8a8b; background: #343233 url(http://www.templatemo.com/templates/templatemo_110_lin_photo/images/templatemo_footer.jpg) no-repeat; } .footer_list { margin: 0px; padding: 0px; list-style: none; } .footer_list li { padding: 0 10px; display: inline; border-right: 1px solid #cccccc; } .footer_list li a { color: #cccccc; text-decoration: none; } .footer_list li a:hover { color: #fcdd31; } .footer_list .last { border-right: none; } /* end of footer */

HitDizayn Fix

KODLAR

Tasarım Genel

Adobe Serie's

Hatfanın Klibi

Photo Galeri Tasarimi