MyBBDepo - Türkiyenin MyBB Deposu Forumuna Hoşgeldiniz
Eğer sitemize yaptığınız ilk ziyaretiniz ise, lütfen öncelikle Forum Kurallarını okuyunuz. Forumumuzda bilgi alışverişinde bulunabilmeniz için Kayıt olmalısınız. Üye olmayanlar forumumuzdan yararlanamazlar.
Eğer zaten kayıtlı kullanıcı iseniz, lütfen kullanıcı adınız ve şifreniz ile, Giriş yapınız. (Sitemize üyelik ücretsizdir).
ßyßilæl avatar
Konuyu Oyla:
  • Derecelendirme: 0/5 - 0 oy
  • 1
  • 2
  • 3
  • 4
  • 5

Derecelendirme: 0/5 - 0 oy

Windows 8 Tarzı İndex Tasarımım (Yoruma Açık)


Sponsor Reklam
media venus

Çevrimdışı ßyßilæl
 Tarih: 19-01-2014, Saat:01:22
(Son Düzenleme: 19-01-2014, Saat:01:35, Düzenleyen: ßyßilæl.)
#1
Merhaba arkadaşlar ;
Css Ve Html dillerine yeni başladım . Bu yüzden ilk index tasarımları yapmak istedim .


Tasarımdan bir görüntü Sağ Ok resim

Arkadaşlar Direk Mybb Ye Çeviremedim Ben Size Kodları Vereyim Süper
İmages Klasörü Sağ Ok http://www.dosya.tc/server22/4OskUc/images.rar.html
Html Kodları Sağ Ok
PHP Kod:
<!DOCTYPE html>
<
html dir="ltr" lang="tr-TR">
<
head>
<
title>Bilal v1</title>
<
link rel="stylesheet" href="style.css" media="all" type="text/css"/>
<
meta http-equiv="Content-Type" content="text-html:charset=utf-8"/>
</
head>
<
body>
<
header>
<
div id="logo"><p>ßyßilæl</p></div>
<
div id="portal"><a href="#"><img src="images/icon/portal.png"/><p>Portal</p></a></div>
<
div id="forum"><a href="#"><img src="images/icon/forum.png"/><p>Forum</p></a></div>
<
div id="uyelistesi"><a href="#"><img src="images/icon/uye.png"/><p>Üye Listesi</p></a></div>
<
div id="fyonetici"><a href="#"><img src="images/icon/yön.ico"/><p>Yönetici Kadrosu</p></a></div>
<
div id="yardim"><a href="#"><img src="images/icon/yardim.png"/><p>Yardım</p></a></div>
<
div id="takvim"><a href="#"><img src="images/icon/takvim.png"/><p>Takvim</p></a></div>
<
div id="uyeol"><a href="#"><img src="images/icon/yeni.png"/><p>Üye Ol</p></a></div>
<
div id="girisyap"><a href="#"><img src="images/icon/gir.png"/><p>Giriş Yap</p></a></div>



</
header>
</
body>
</
html

Css Kodları Sağ Ok

PHP Kod:
/* Reset CSS */
htmlbodydivspanappletobjectiframe,h1h2h3h4h5h6pblockquotepre,aabbracronymaddressbigcitecode,
deldfnemimginskbdqssamp,smallstrikestrongsubsuptt, var,buicenter,dldtddolulli,
fieldsetformlabellegend,tablecaptiontbodytfoottheadtrthtd,articleasidecanvasdetailsembed
figurefigcaptionfooterheaderhgroupmenunavoutputrubysectionsummary,timemarkaudiovideo {
    
margin0;    padding0;    border0;    font-size100%;    fontinherit;    vertical-alignbaseline;}
    
articleasidedetalisfgcaptionfigurefooterheaderhgroupmenunavsection{displayblock;}
    
body{line-height:1;background:url(images/arkaplan.png)}
    
ol,ul{list-style:none;}
    
blockquoteq{quotes:none;}
    
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
{text-decoration:none;color:black;}    
    
a:visited {text-decoration:none;color:black;}
        
a:hover{text-decoration:none;color:black;}
         
a:active{text-decoration:none;color:black;}
    
table{border-collapse:collapse;border-spacing:0;}
    
/*Genel Özellikler */

#logo p {
font-size:70px;
margin-top:100px;
margin-left:200px;
font-weight:bold;
font-family:Bethany Style Letters;
}
#portal {
background:url(images/arka.png);
background-color:#4876ff;
width:199px;
height:150px;
margin-left:200px;
margin-top:10px;

}
#portal img {
margin-top:5px;
margin-left:39px;
width:100px;
height:100px;
}
#portal p {
font-size:20px;
margin-top:15px;
margin-left:5px;
font-weight:bold;
font-family:Bethany Style Letters;
}
#forum {
background:url(images/arka.png);
background-color:#5d478b;
width:199px;
height:150px;
margin-top:-150px;
margin-left:401px;
}
#forum img {
margin-top:5px;
margin-left:39px;
width:100px;
height:100px;
}
#forum p {
font-size:20px;
margin-top:15px;
margin-left:5px;
font-weight:bold;
font-family:Bethany Style Letters;
}
#uyelistesi {
background:url(images/arka.png);
background-color:#cd8500;
width:199px;
height:150px;
margin-top:2px;
margin-left:200px;
}
#uyelistesi img {
margin-top:5px;
margin-left:39px;
width:100px;
height:100px;
}
#uyelistesi p {
font-size:20px;
margin-top:15px;
margin-left:5px;
font-weight:bold;
font-family:Bethany Style Letters;
}
#fyonetici {
background:url(images/arka.png);
background-color:#008b00;
width:199px;
height:150px;
margin-top:-150px;
margin-left:401px;
}
#fyonetici img {
margin-top:5px;
margin-left:39px;
width:100px;
height:100px;
}
#fyonetici p {
font-size:20px;
margin-top:15px;
margin-left:5px;
font-weight:bold;
font-family:Bethany Style Letters;
}
#yardim {
background:url(images/arka.png);
background-color:#cdcd00;
width:199px;
height:150px;
margin-top:2px;
margin-left:200px;
}
#yardim img {
margin-top:5px;
margin-left:39px;
width:100px;
height:100px;
}
#yardim p {
font-size:20px;
margin-top:15px;
margin-left:5px;
font-weight:bold;
font-family:Bethany Style Letters;
}
#takvim {
background:url(images/arka.png);
background-color:#008080;
width:199px;
height:150px;
margin-top:-150px;
margin-left:401px;
}
#takvim img {
margin-top:5px;
margin-left:39px;
width:100px;
height:100px;
}
#takvim p {
font-size:20px;
margin-top:15px;
margin-left:5px;
font-weight:bold;
font-family:Bethany Style Letters;
}
#uyeol {
background:url(images/arka.png);
background-color:#7ac5cd;
width:199px;
height:150px;
margin-top:-454px;
margin-left:749px;
}
#uyeol img {
margin-top:5px;
margin-left:39px;
width:100px;
height:100px;
}
#uyeol p {
font-size:20px;
margin-top:15px;
margin-left:5px;
font-weight:bold;
font-family:Bethany Style Letters;
}
#girisyap {
background:url(images/arka.png);
background-color:#9acd32;
width:199px;
height:150px;
margin-top:-150px;
margin-left:950px;
}
#girisyap img {
margin-top:5px;
margin-left:39px;
width:100px;
height:100px;
}
#girisyap p {
font-size:20px;
margin-top:15px;
margin-left:5px;
font-weight:bold;
font-family:Bethany Style Letters;



Arkadaşlar İyi Kötü Her Türlü Yoruma Açığım Yanlış Yaptığım Yerleri Söylerseniz Oralara Yoğunlaşabilirim
Cevapla
Bunu Beğenenler: Machine
Sponsor Reklam
sponsor reklam sponsor reklam

Çevrimdışı Machine
 Tarih: 19-01-2014, Saat:01:33
(Son Düzenleme: 19-01-2014, Saat:01:33, Düzenleyen: Machine.)
#2
Merhaba,

İlk çalışmanıza göre fena olmamış.

Size söylebileceklerim tasarımla alakalı olarak kullandığınız yazı fontunu değiştirin, yazı rengini değiştirin ve mümkünse resimlere göre ortalayın yazıları.

Kullandığınız resimleride biraz küçültün, logo kısmıyla içerik kısmını ayırın hani üst tarafın logo olduğunu göstermeniz açısından altına bir çizgi vs çekerek bunu sağlayabilirsiniz. Ayrıca üye ol giriş yap kısmı ve anasayfa yardım gibi olan kısmın arasınada bir çizgi koyarak iki bloklu olduğunu gösterebilirsiniz.

Mümkünse bu kısımları çereçeve içine alın ve footer alanıda eklemeyi unutmayın.

İyi forumlar.
Cevapla
Bunu Beğenenler:

Çevrimdışı ßyßilæl
 Tarih: 19-01-2014, Saat:01:37
#3
(19-01-2014, Saat:01:33)Machine Adlı Kullanıcıdan Alıntı: Merhaba,

İlk çalışmanıza göre fena olmamış.

Size söylebileceklerim tasarımla alakalı olarak kullandığınız yazı fontunu değiştirin, yazı rengini değiştirin ve mümkünse resimlere göre ortalayın yazıları.

Kullandığınız resimleride biraz küçültün, logo kısmıyla içerik kısmını ayırın hani üst tarafın logo olduğunu göstermeniz açısından altına bir çizgi vs çekerek bunu sağlayabilirsiniz. Ayrıca üye ol giriş yap kısmı ve anasayfa yardım gibi olan kısmın arasınada bir çizgi koyarak iki bloklu olduğunu gösterebilirsiniz.

Mümkünse bu kısımları çereçeve içine alın ve footer alanıda eklemeyi unutmayın.

İyi forumlar.

Teşekkürler Dediklerinizi Uygulayacağım .
Cevapla
Bunu Beğenenler:

Çevrimdışı BurakOzatik
 Tarih: 19-01-2014, Saat:02:14
#4
Güzel olmuş Bilal Eline sağlık Gülümseme
Cevapla
Bunu Beğenenler:

Çevrimdışı ßyßilæl
 Tarih: 19-01-2014, Saat:02:22
#5
(19-01-2014, Saat:02:14)BurakOzatik Adlı Kullanıcıdan Alıntı: Güzel olmuş Bilal Eline sağlık Gülümseme

Teşekkür Ederim Burak Abi Saol .
Cevapla
Bunu Beğenenler:

Çevrimdışı Suleyman18
 Tarih: 19-01-2014, Saat:11:47
#6
CSS'de çok çok az bilgim oldğu için bir yorum yapamayacağım. Ancak Yazıları ortalarsan iyi yaparsın vede mouse cursor (mouse şekli) ni değiştirirsen hoş olacağını düşünüyorum.
Onun dışında bir kusur göremedim !

İyi Günler Gülümseme
Cevapla
Bunu Beğenenler:

Çevrimdışı ßyßilæl
 Tarih: 19-01-2014, Saat:12:47
#7
(19-01-2014, Saat:11:47)Suleyman18 Adlı Kullanıcıdan Alıntı: CSS'de çok çok az bilgim oldğu için bir yorum yapamayacağım. Ancak Yazıları ortalarsan iyi yaparsın vede mouse cursor (mouse şekli) ni değiştirirsen hoş olacağını düşünüyorum.
Onun dışında bir kusur göremedim !

İyi Günler Gülümseme

Teşekkürler Kardeşim .
Cevapla
Bunu Beğenenler:

Çevrimdışı weater741741
 Tarih: 07-07-2014, Saat:17:10
#8
dosya.tc siliniyor ya başka bir sunucuya yükleseniz üzgün
Cevapla
Bunu Beğenenler:

 


Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
  KroAdam İndex V2 KroAdam 3 928 28-03-2016, Saat:19:04
Son Yorum: KroAdam
  KroAdam İndex V1 KroAdam 2 715 13-03-2016, Saat:13:16
Son Yorum: KroAdam
  Emre KRMN İndex v8 EmreKRMN 3 1,890 11-03-2016, Saat:23:03
Son Yorum: xeons
  Dream41 İndex Tasarımı Dream41 6 864 11-03-2016, Saat:19:23
Son Yorum: Ripbyrustavi02
  Harika Bir İndex Tasarımı yamyamix 2 1,457 08-11-2015, Saat:11:55
Son Yorum: icedie



Konuyu Okuyanlar: 1 Ziyaretçi