Tasarladığım site nasıl olmuş?

Hoş görünüyor, günümüz teknolojisine uygun. Slider benim monitörümde biraz aşağı sarktı. 27 inç full hd görüntüde sliderin altına inmek için biraz aşağı inmem gerekiyor. Bir de üstteki menüyü ya scroll ile birlikte aşağı taşımak gerekir, yani üstte sabit olarak kalmasını sağlamak ya da üste çık gibi bir tuş yapmak lazım çünkü bu şekilde menü her zaman elinizin altında olmayacak.

xenefon dedi:

Hoş görünüyor, günümüz teknolojisine uygun. Slider benim monitörümde biraz aşağı sarktı. 27 inç Full HD görüntüde sliderin altına inmek için biraz aşağı inmem gerekiyor. Bir de üstteki menüyü ya scroll ile birlikte aşağı taşımak gerekir, yani üstte sabit olarak kalmasını sağlamak ya da üste çık gibi bir tuş yapmak lazım çünkü bu şekilde menü her zaman elinizin altında olmayacak.

Genişletmek için tıkla...

Hocam aslında ben menüyü aşağıdaki kodlar ile sabitlemiştim.

[CODE title="."].header {
position: fixed;
z-index: 1;
width: 100%;
}[/CODE]

Fakat bu slaytın yapısını bozdu. Scroll ile ilgili çok bilgiye sahip değilim. Bu yüzden slider geçildikten sonra menünün gözükmesini sağlayamadım. Siz sahipseniz bana bir kaynak atarsanız çok sevinirim.

Aslında bununla sürüklenmesi lazım demek ki yapıyı bozan bir kod grubu var. Zorlamayı bir deneyin yararı olabilir:

position: fixed !important;

xenefon dedi:

Aslında bununla sürüklenmesi lazım demek ki yapıyı bozan bir kod grubu var. Zorlamayı bir deneyin yararı olabilir:

Position: Fixed! İmportant;

Genişletmek için tıkla...

Sürükleniyor hocam fakat bu sefer menüde tarihçeye bastığımız zaman sliderın Next tuşu olarak algılanıyor ve tarihçe bölümüne ilerlemek yerine slayt tuşu çalışıyor. Slider bölümünün üzerine gelen bir menü de hoş olmaz diye düşündüm ve yukarıda sabit olarak bıraktım. Scroll konusuna bir çalışıp yakın zamanda slider geçildikten sonra görünmesini sağlamaya çalışacağım.

Not: Şimdi aklıma geldi aslında Z-index değeri artırılarak Next tuşunun önüne geçirebiliriz ama sliderın üzerinde hoş gözükmeyecektir.

Fontlar, footer ve boşluklar daha da iyi bir şekilde düzenlenirse çok daha iyi olur.

En buyuk falso footerda. Oradaki yerlesimin bence tamamen degismesi gerek. Bastaki sliderin heightini ekrana gore ayarlayabilirsin, tasma olmazsa daha guzel gorunur. Projelerimiz, calisma alanlarimiz vs. gibi devam eden alt basliklari frame icine almazsan daha iyi gorunur bence. Bunun disinda baslik ve icerikte kullanilan fontun karakteri birbiriyle cok uyumlu degil gibi. onHover animasyonlari ve cursor : pointer gibi propertyleri bazi yerlerde elden gecirmek gerek. Son olarak bosluklara da bir goz atildiginda bence cok daha guzel bir gorunum olur. Baslangic icin oldukca guzel.

Başlangıç için güzel olmuş dediklerimi düzelt ve bir daha bu hataları yapmamaya çalış.

*Mesela projelerimiz kısmının tamamı bir div içinde olmalı. Bu bir parça. Hepsinini bir dive topla ve class="projects" de. Sonrasında içine header ve gallery diye iki div daha aç onlara da stil vermek için .projects .header{} ve .projects .gallery{} mantığında git. Tabii gallery de bir bütün ve içinde tekrar eden elemanlar var. En sona gidene kadar stillendirerek düzgün grupla. Gruplandırarak ilerle, ayrık ayrık olmasın.

* Br ile boşluk bırakma, br yazı arasında boşluk bırakmak için. Projelerin başında 6 tane br koyma. Bunun yerine margin veya padding kullan. Ör: margin-top:40px.
Bu arada margin dıştan boşluk bırakır padding ise içten boşluk bırakır.

*Kart yapısı doğru ama çok genel şeylere stil verirken dikkatli olman lazım. Öyle kafana göre stil veremezsin. Mesela .row:hover{background:black} tarzında bir stil veremezsin çünkü bir sürü row ve col var. Bunun yerine transition yaptığın kart yapısını şöyle şekillendir.
[CODE lang="html" title="card"]<div class="projects">
<div class="container">
<div class="row gallery">
<div class="col-4 item">
<div class="card-image">
<img src="#">
</div>
<div class="card-body">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
</div>
</div>[/CODE]
.projects .gallery .item{kart transitionları buraya gelecek.}
Ve ayrıca farkedeceğin üzere matruşka bebek gibi iç içe olmalı, istifli olmalı.

*Resimlerin boyutu çok yüksek, sliderdeki resim 7070*4712 , kimse bu çözünürlüğü kullanmıyor. Bir grafik programı kullanarak boyutu düşür ve kalitesini de 72 gibi bir değere al, çünkü sitenin hızlı açılması lazım. Photoshop veya Fireworks kullanabilirsin.

*Daha güzel gözükmesi için stilde değişiklikler yap. Özellikle renk seçimleri ve konumlandırma çok önemli. Footer'a padding ver alta da br koyma. Yani #contact="padding: 40px 0" yeterli olur. Ayrıca sosyal medya ikonlarını o kadar ayrık koyma ve de en önemlisi böyle yerlerde tablo kullanma. Tablo kullanmamaya çalış mümkünse hiç kullanma.

Şimdilik bu kadar yeter, slider için owl-carousel kullanabilirsin bootstrapdekinden daha güzel