DENTASARIM | Tasarımın bizden!
Ned tema
Ned teması
|
Css bölümüne gelicek
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; } #ad-a87f,#ad-c81e,#ad-a87f,#ad-cfcd,#ad-c9f0,#ad-c4ca,#ad-8f14,#ad-e4da,#ad-d3d9,#ad-1679,#ad-45c4,#ad-eccb { border: 1px solid #3B3B3B; background: #3B3B3B; margin:auto; } #webme_footer_textlink_dont_hide { background: #fff; color: #333; padding: 5px; height: 30px; text-decoration: none; width: 900px; line-height: 30px; margin-left: 350px; font-size: 11px; border: 1px solid #3B3B3B; } #webme_sky_ad { border: 1px solid #3B3B3B; background: #3B3B3B; } body { background: url(http://www.resimixir.com/wp-content/uploads/2015/05/tumblr_static_612y7nc2aokckw44kos8os0g4.jpg); margin: 0px; padding: 0px;} #logo {font-size: 36px; font-family: Arial; padding: 20px; padding-left: 0px;} #gnl {width: 900px; height: auto; margin: auto; background: white; padding: 10px;border: 5px solid #f2f2f2;margin-bottom: 20px;} #gnl2 {width: 900px; height: auto; margin: auto; background: white; padding: 10px;border: 5px solid #f2f2f2;} #menu {background: #333; height: 40px; line-height: 40px;} #menu ul { list-style: none; padding: 0px; margin: 0px;} #menu ul li a { display: block; float: left; text-decoration: none; color: #fff; font-family: Arial; font-size: 12px; padding-right: 15px; padding-left: 15px;} #menu ul li a:hover { background: #111;} #slider { width: 100%; height:246px; position: relative; margin: auto;list-style: none;padding: 0px;background: #333;} #slider .sliderGenel .slide {position: absolute; width: 100%; height: 246px; -webkit-transform:scale(0); opacity: 0; transition: all .3s; } #slider img {width: 100%; height: 246px;} #slider input {display: none;} #slider input:checked + .sliderGenel .slide {-webkit-transform:scale(1); opacity: 1;} #slider .btnlr {position: absolute; bottom: 10px;} #slider .btnlr label {width: 30px; height: 10px; border-radius: 0; float: left; margin-left: 10px;cursor: pointer; background: #ccc;} #slider input#resim1:checked ~ .btnlr #btn1, #slider input#resim2:checked ~ .btnlr #btn2, #slider input#resim3:checked ~ .btnlr #btn3, #slider input#resim4:checked ~ .btnlr #btn4 {background: #fff; box-shadow: 0px 0pxpx 1px #444;} #slider .sliderGenel .slide #sldryazi {width: 500px; margin-top: -220px; z-index: 111; font-size: 25px;; padding: 15px; background: #333; opacity: 0.9; color: #fff; font-family: Arial;} #slider .sliderGenel .slide #sldryaziaciklama {width: 300px; z-index: 111; font-size: 15px;; padding: 15px; background: #333; opacity: 0.6; color: #fff; font-family: Arial;} ul.katmenu li a {text-decoration: none; color: #fff; width: 90px;padding: 5px;display: block; float: left;height: 30px;line-height: 30px; text-align: center; } ul.katmenu li.aktif a { color: fff; background: #333;} ul,li { margin: 0; padding: 0; list-style-type: none; float: left; } :focus { outline: 0 } ul.katmenu { width: 900px; border: 1px solid #333; background: #222; } #clearmen { clear: both;} .katmenuicerik { padding: 10px; font-family: Arial; width: 880px; font-size: 12px; } .katmenuicerik img { width: 100%;} .katmenuicerik img.rst { width: auto; } #baslik { width: auto; padding: 10px; margin-top: 5px;margin-bottom: 5px; text-align: center; font-weight: bold; font-size: 36px; } #footer a { color: #fff; text-decoration: none;font-family: Arial; font-size: 11px; padding: 5px; transition: all .3s;} #footer a:hover {background: white; color: #333;} Tasarımın üstüne gelicek
<!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" xml:lang="en"> <head> <META http-equiv="content-type" content="text/html;charset=iso-8859-9"> <META http-equiv="content-type" content="text/html;charset=windows-1254"> <META http-equiv="content-type" content="text/html;charset=x-mac-turkish"> </head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".katmenuicerik").hide(); $(".katmenu li:first").addClass("aktif").show(); $(".katmenuicerik:first").show(); $(".katmenu li").click(function(){ // Tıklandığında aktif classını silelim $(".katmenu li").removeClass("aktif"); // Seçilene aktif classını ekleyelim $(this).addClass("aktif"); // İçeriği tekrar gizle $(".katmenuicerik").hide(); var aktifTab = $(this).find("a").attr("href"); $(aktifTab).fadeIn(); return false; }); }); </script> <body> <div id="gnl"> <div id="logo">SERGEN<b>SEKER</b></div> <div id="menu"> <ul class="katmenu"> <li><a href="#tab1">Anasayfa</a></li> <li><a href="#tab2">İletişim</a></li> <li><a href="#tab3">Hakkımızda</a></li> <li><a href="#tab4">Referanslar</a></li> <li><a href="#tab5">Tasarımlar</a></li> </ul> <div id="clearmen"></div> </div> </div> <div id="gnl2"> <div id="content"> Tasarımın altına gelicek
</div></div>
<div id="footer" style="width: 900px; height: 20px; line-height: 20px; font-size: 12px;background: #333; margin: auto; color: #fff; padding: 15px; font-family: Arial;"> Tasarım ve kodlama: <a href="#">TeknoAnaliz</a> & <a href="#">Dentasarım</a> </div> </body> </html> Anasayfa kodu
<div id="tab1" class="katmenuicerik">
<img src="http://40.media.tumblr.com/60c919586b4d974401f8c10a492b9886/tumblr_njqahr4FfM1slhhf0o1_1280.jpg" alt="" style="width: 100%;"/> <div id="baslik">Hoşgeldiniz</div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras scelerisque ligula sed neque pellentesque dapibus. In mattis ornare tellus eget tempor. Pellentesque sit amet odio in tellus ullamcorper porta vel sed diam. Pellentesque eget aliquam massa. Morbi dignissim nisi eget venenatis aliquet. Fusce mauris leo, ultricies sed fermentum at, lacinia non metus. Aenean id luctus leo. Sed ac leo lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla tristique suscipit eros malesuada mattis. Vestibulum nisi dolor, gravida sit amet erat eget, feugiat bibendum erat. Maecenas placerat eget risus at consectetur. Sed posuere ut est nec interdum. Phasellus at massa ligula. </p> <p> Nulla facilisi. Maecenas faucibus cursus lectus, a pellentesque nibh sodales vitae. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eleifend ex turpis, id finibus magna feugiat et. Morbi vitae lectus vitae velit rhoncus placerat. Phasellus venenatis, sem sed congue pellentesque, libero dui tempor libero, et porta purus nunc in ligula. Nullam vel pharetra risus, a imperdiet purus. Nullam auctor posuere risus. Suspendisse dapibus pellentesque felis eget commodo. Etiam ut gravida elit. Aenean aliquet turpis at ipsum sagittis, a iaculis dolor dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In congue dui quis tellus luctus tristique. Nam vel pulvinar augue. Vivamus ut lorem at risus faucibus ultrices in id odio. Morbi vitae sagittis tortor. </p> </div> <div id="tab2" class="katmenuicerik"> <style type="text/css"> a:link { color: #333; font-weight: bold; } form input { border-left: 2px solid #303b47; border-right: 1px solid #666; font-family: 'PT Sans Narrow', sans-serif; border-top: 1px solid #666; background: white; transition: 0.3s; border-bottom: 1px solid #666; padding: 10px; height: 30px; line-height: 0px; } form textarea { width: 650px; border-left: 2px solid #303b47; border-right: 1px solid #666; font-family: 'PT Sans Narrow', sans-serif; border-top: 1px solid #666; background: white; transition: 0.3s; border-bottom: 1px solid #666; padding: 10px; height: 130px; } form input:hover { background: #303b47; color: #fff; border-right: 1px solid #303b47; border-top: 1px solid #303b47; border-left: 2px solid black; border-bottom: 1px solid #303b47; } form textarea:hover { background: #303b47; color: #fff; border-left: 2px solid black; border-right: 1px solid #303b47; border-top: 1px solid #303b47; border-bottom: 1px solid #303b47; } </style> <div id="baslik">İletişim</div> <form action="#Buraya İletişim sayfanın url adresini koy" method="POST"> <table border="0" align="center" cellpadding="2" cellspacing="0"> <tbody> <tr> <td width="auto"><input type="text" name="modulenter[extrabox1text]" value="Ad ve Soyad:" onfocus="if (this.value == 'Ad ve Soyad:') this.value = '';" /></td> <td width="600px" rowspan="3"><textarea name="modulenter[text]">Mesajı girin:</textarea></td> </tr> <tr> <td width="auto"><input type="text" name="modulenter[extrabox3text]" value="E-posta:" onfocus="if (this.value == 'E-posta:') this.value = '';" /></td> </tr> <tr> <td width="auto"><input type="text" name="modulenter[extrabox2text]" value="Bu başlıktasın: Ned tema" onfocus="if (this.value == 'Ned tema') this.value = '';" /></td> </tr> <tr> <td colspan="2" style="text-align: right;">Bize mesaj göndermek için formu doldurun.<input type="hidden" name="mode" value="saveForm"><input type="submit" value="MESAJI YOLLA"></td> </tr> </tbody> </table> <div id="clear" style="clear:both;"> </div> </form> </div> <div id="tab3" class="katmenuicerik"> <center><img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xap1/v/t1.0-1/p160x160/11148789_1091399690889360_4216856133560043490_n.jpg?oh=6b2963442b66225836248bfa73f1b9f0&oe=5626094B&__gda__=1444791988_ee98fa1b0ce7d536e0bab1ca0aff98bb" class="rst" alt="" style="width: 200px;"/> <img src="https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-xpf1/v/t1.0-9/10408705_1060019370694059_545130908032608965_n.jpg?oh=100c3f537b4d1822ca9a1b8c820fbb95&oe=5631402C&__gda__=1444938566_d6898cd091edafe639da112c5b0a6f27" class="rst" alt="" style="width: 200px;"/> <img src="https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-xpf1/v/t1.0-9/10929931_1032281763467820_6206886900565945118_n.jpg?oh=a335d922bd7d72180f272815010d2a40&oe=5629254B&__gda__=1443998324_849b23641fc9a6281eb1debbd19130e0" class="rst" alt="" style="width: 200px;"/> <img src="https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-xfp1/v/t1.0-9/10431440_903187279710603_8247281335037649986_n.jpg?oh=03feb18b2f55f341a0250838fa362708&oe=565AEABA&__gda__=1444286515_5bce733d6b5803a50e420c0adf19171d" class="rst" alt="" style="width: 150px; height: 200px;"/></center><br> <div id="baslik">Sergen ŞEKER</div> Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero. Its words and letters have been changed. </div> <div id="tab4" class="katmenuicerik"> <div id="refe" style="text-align: center;"> <img src="https://sitepaylasim.files.wordpress.com/2013/01/document_add.png?w=256&h=256&crop=1" alt="" style="width: 200px; height: 200px;"/> <img src="https://sitepaylasim.files.wordpress.com/2013/01/document_add.png?w=256&h=256&crop=1" alt="" style="width: 200px; height: 200px;"/> <img src="https://sitepaylasim.files.wordpress.com/2013/01/document_add.png?w=256&h=256&crop=1" alt="" style="width: 200px; height: 200px;"/> <img src="https://sitepaylasim.files.wordpress.com/2013/01/document_add.png?w=256&h=256&crop=1" alt="" style="width: 200px; height: 200px;"/> <img src="https://sitepaylasim.files.wordpress.com/2013/01/document_add.png?w=256&h=256&crop=1" alt="" style="width: 200px; height: 200px;"/> <img src="https://sitepaylasim.files.wordpress.com/2013/01/document_add.png?w=256&h=256&crop=1" alt="" style="width: 200px; height: 200px;"/> <img src="https://sitepaylasim.files.wordpress.com/2013/01/document_add.png?w=256&h=256&crop=1" alt="" style="width: 200px; height: 200px;"/> <img src="https://sitepaylasim.files.wordpress.com/2013/01/document_add.png?w=256&h=256&crop=1" alt="" style="width: 200px; height: 200px;"/> <img src="https://sitepaylasim.files.wordpress.com/2013/01/document_add.png?w=256&h=256&crop=1" alt="" style="width: 200px; height: 200px;"/> <img src="https://sitepaylasim.files.wordpress.com/2013/01/document_add.png?w=256&h=256&crop=1" alt="" style="width: 200px; height: 200px;"/> <img src="https://sitepaylasim.files.wordpress.com/2013/01/document_add.png?w=256&h=256&crop=1" alt="" style="width: 200px; height: 200px;"/> <img src="https://sitepaylasim.files.wordpress.com/2013/01/document_add.png?w=256&h=256&crop=1" alt="" style="width: 200px; height: 200px;"/> </div> </div> <div id="tab5" class="katmenuicerik"> <div id="refe" style="text-align: center;"> <img src="http://juanrojodesign.com/wp-content/uploads/2012/09/iMac-JRDesign-mockup.png" alt="" style="width: 200px; height: 200px;"/> <img src="http://juanrojodesign.com/wp-content/uploads/2012/09/iMac-JRDesign-mockup.png" alt="" style="width: 200px; height: 200px;"/> <img src="http://juanrojodesign.com/wp-content/uploads/2012/09/iMac-JRDesign-mockup.png" alt="" style="width: 200px; height: 200px;"/> <img src="http://juanrojodesign.com/wp-content/uploads/2012/09/iMac-JRDesign-mockup.png" alt="" style="width: 200px; height: 200px;"/> <img src="http://juanrojodesign.com/wp-content/uploads/2012/09/iMac-JRDesign-mockup.png" alt="" style="width: 200px; height: 200px;"/> <img src="http://juanrojodesign.com/wp-content/uploads/2012/09/iMac-JRDesign-mockup.png" alt="" style="width: 200px; height: 200px;"/> <img src="http://juanrojodesign.com/wp-content/uploads/2012/09/iMac-JRDesign-mockup.png" alt="" style="width: 200px; height: 200px;"/> <img src="http://juanrojodesign.com/wp-content/uploads/2012/09/iMac-JRDesign-mockup.png" alt="" style="width: 200px; height: 200px;"/> <img src="http://juanrojodesign.com/wp-content/uploads/2012/09/iMac-JRDesign-mockup.png" alt="" style="width: 200px; height: 200px;"/> <img src="http://juanrojodesign.com/wp-content/uploads/2012/09/iMac-JRDesign-mockup.png" alt="" style="width: 200px; height: 200px;"/> <img src="http://juanrojodesign.com/wp-content/uploads/2012/09/iMac-JRDesign-mockup.png" alt="" style="width: 200px; height: 200px;"/> <img src="http://juanrojodesign.com/wp-content/uploads/2012/09/iMac-JRDesign-mockup.png" alt="" style="width: 200px; height: 200px;"/> </div> </div> |
Tasarımı ön izlemek için tıklasana?
|
