Doğuhan ELMA tarafından Sections yayınlanma tarihi
49 görünüm
<nav class="navbar">
Üst Kısım (Navbar Top)
<div class="navbar-top">
Logo: Bir kanepe simgesi ve "Mobilya" yazısı içerir.
<div class="logo"> <i class="fa-solid fa-couch"></i> <span>Mobilya</span> </div>
Arama Çubuğu: Kullanıcıların arama yapabilmesi için bir metin giriş alanı ve büyüteç ikonu içerir.
<div class="search-bar"> <input type="text" placeholder="Ara.."> <i class="fa-solid fa-magnifying-glass"></i> </div>
Kullanıcı Alanı: Alışveriş sepeti, favori ürünler ve kullanıcı ikonu ile kullanıcıya yönelik eylemler içerir.
<div class="user"> <i class="fa-solid fa-cart-shopping"></i> <span>0.00₺</span> <i class="fa-regular fa-heart"></i> <i class="fa-solid fa-user"></i> </div>
</div> <!--Navbar-top div'inin bitişi -->
Navigasyon Listesi (Nav List)
<div class="nav-list">
Ana Sayfa: Bir ev ikonu ve "Ana Sayfa" yazısı içerir.
<div> <i class="fa-solid fa-house"></i> <span>Ana Sayfa</span> </div>
Ürünler: Bir kanepe ikonu ve "Ürünler" yazısı içerir.
<div> <i class="fa-solid fa-couch"></i> <span>Ürünler</span> </div>
Ücretler: Dolar işareti ikonu ve "Ücretler" yazısı içerir.
<div> <i class="fa-solid fa-dollar-sign"></i> <span>Ücretler</span> </div>
Blog: Blogger ikonu ve "Blog" yazısı içerir.
<div> <i class="fa-brands fa-blogger"></i> <span>Blog</span> </div>
Satış: Yıldız ikonu ve "Satış" yazısı içerir.
<div> <i class="fa-solid fa-star"></i> <span>Satış</span> </div>
İletişim: Mesaj ikonu ve "İletişim" yazısı içerir.
<div> <i class="fa-solid fa-message"></i> <span>İletişim</span> </div>
</div> <!--Nav-list div'inin sonu --> </nav> <!-- Nav öğesinin sonu -->
HTML:
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <title>Mobilya Website</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer"/> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Kenia&family=Mukta:wght@300;400;700&display=swap" rel="stylesheet"> </head> <body> <div class="container"> <nav class="navbar"> <div class="navbar-top"> <div class="logo"> <i class="fa-solid fa-couch"></i> <span>Mobilya</span> </div> <div class="search-bar"> <input type="text" placeholder="Ara.."> <i class="fa-solid fa-magnifying-glass"></i> </div> <div class="user"> <i class="fa-solid fa-cart-shopping"></i> <span>0.00₺</span> <i class="fa-regular fa-heart"></i> <i class="fa-solid fa-user"></i> </div> </div> <div class="nav-list"> <div> <i class="fa-solid fa-house"></i> <span>Ana Sayfa</span> </div> <div> <i class="fa-solid fa-couch"></i> <span>Ürünler</span> </div> <div> <i class="fa-solid fa-dollar-sign"></i> <span>Ücretler</span> </div> <div> <i class="fa-brands fa-blogger"></i> <span>Blog</span> </div> <div> <i class="fa-solid fa-star"></i> <span>Satış</span> </div> <div> <i class="fa-solid fa-message"></i> <span>İletişim</span> </div> </div> </nav> </div> </body> </html>
CSS:
* { /* Bu seçici, "joker" seçici olarak bilinir ve sayfadaki tüm HTML elementlerini hedef alır. Buradaki süslü parantezler ({ ve }), bu seçiciye uygulanan stiller için bir başlangıç ve bitiş belirtir. */ margin: 0; /* Bu özellik, tüm elementlerin dış boşluklarını (margin) sıfırlar. Yani, elementler arasında ve sayfanın kenarları ile elementler arasında varsayılan olarak bulunan boşluklar kaldırılır. */ padding: 0; /* Bu özellik, tüm elementlerin iç boşluklarını (padding) sıfırlar. Bu, element içerikleri ile sınırları arasındaki boşluğu ortadan kaldırır. */ box-sizing: border-box; /* Bu özellik, elementlerin boyutlandırma modelini değiştirir. border-box değeri, elementin genişlik ve yükseklik ayarlarının, kenarlık (border) ve iç boşluk (padding) dahil olacak şekilde hesaplanmasını sağlar. Bu, CSS ile daha tutarlı ve kolay boyutlandırma yapılmasına olanak tanır. */ outline: none; /* Bu özellik, elementlerin odaklandığında (örneğin bir bağlantı veya form elemanı seçildiğinde) görünen çerçeve veya vurguyu kaldırır. none değeri, bu vurgunun hiç görünmemesini sağlar.*/ font-family: "Mukta", sans-serif; /* Bu özellik, tüm sayfa için varsayılan yazı tipini ayarlar. "Mukta" yazı tipi belirtilmiş, eğer bu yazı tipi kullanılabilir değilse, genel sans-serif yazı tipi ailesinden bir yazı tipi kullanılır. Sans-serif yazı tipleri, süslü olmayan, basit hatlara sahip karakterler içerir ve genellikle dijital ekranlar için okunabilirliği artırır. */ } html { font-size: 62.5%; /* Çoğu tarayıcıda varsayılan yazı tipi boyutu 16 pikseldir. font-size: 62.5%; ifadesi, bu varsayılan değerin %62.5'ini alarak kullanır. Yani: 16px * 0.625 = 10px Bu hesaplama sonucunda, yazı tipi boyutu temel olarak 10 piksel olur. */ } .navbar { width: 100%; /* Bu özellik, navbar elemanının genişliğini kapsayıcı elemanının tam genişliği (%100) olacak şekilde ayarlar. Bu, gezinti çubuğunun ekranın tam genişliğine yayılmasını sağlar. */ height: 19rem; /* Bu özellik, navbar elemanının yüksekliğini 19 rem olarak belirler. Burada, rem birimi, kök elemanın (html) font boyutuna göre ölçülendirilmiş bir birimdir. Yani bu değer, tasarımın ölçeklenebilir ve farklı ekran boyutlarına uyum sağlayacak şekilde ayarlanmasına yardımcı olur. */ background-color: #fff; /* Bu özellik, navbar elemanının arka plan rengini beyaz (#fff) olarak ayarlar. Bu, çoğu tasarımda temiz ve profesyonel bir görünüm sağlar.*/ display: flex; /* Bu özellik, navbar içindeki öğeleri Flexbox modeli kullanarak düzenlemeye olanak tanır. Flexbox, elemanların daha esnek bir şekilde hizalanmasını ve dağıtılmasını sağlar, böylece yan yana veya üst üste düzenlemeler kolayca yapılabilmektedir. */ flex-direction: column; /* Bu özellik, Flexbox konteynerindeki elemanların düzenini sütun şeklinde (dikey olarak) ayarlar. Yani içerideki elemanlar dikey bir sıra halinde dizilir. */ align-items: center; /* Bu özellik, Flexbox konteynerindeki elemanların çapraz eksen boyunca (bu durumda yatay eksende) ortalanmasını sağlar. Bu, navbar içindeki elemanların yatay olarak merkeze hizalanmasını sağlar. */ box-shadow: 0 1rem 5rem rgba(0, 0, 0, .1); /* Bu özellik, navbar elemanına gölge ekler. Gölgenin özellikleri şu şekildedir: Yatay konum (horizontal offset) 0: Gölge yatay olarak kaydırılmaz. Dikey konum (vertical offset) 1 rem: Gölge 1 rem aşağı taşınır. Bulanıklık yarıçapı (blur radius) 5 rem: Gölge oldukça geniş bir alana yayılır ve yumuşak bir görünüm kazanır. Renk (color) rgba(0,0,0,.1): Gölgenin rengi çok hafif siyah, opaklık değeri ise %10'dur, bu da gölgenin çok hafif ve zarif görünmesini sağlar. */ } .navbar-top { display: flex; /* Bu özellik, .navbar-top elemanının içeriklerinin Flexbox modeli kullanılarak düzenlenmesini sağlar. Flexbox, içeriklerin esnek bir şekilde hizalanmasına ve uygun şekilde yerleştirilmesine olanak tanır, bu da responsive (duyarlı) tasarımlar için oldukça yararlıdır. */ align-items: center; /* Bu özellik, .navbar-top içindeki elemanların çapraz eksende (bu durumda yatay eksende) ortalanmasını sağlar. Flexbox konteynerinde align-items: center; kullanmak, içeriklerin tam ortada hizalanmasını garanti eder, bu da genellikle logolar, menü butonları veya diğer gezinti bağlantıları için tercih edilen bir düzendir. */ padding: 2rem 0; /* Bu özellik, .navbar-top elemanının iç boşluğunu (padding) ayarlar. Burada verilen 2rem 0 ifadesi, elemanın üst ve altına 2 rem boyutunda iç boşluk eklerken, sağ ve sol tarafına boşluk eklenmemesini belirtir. Bu, genellikle içeriklerin yukarı ve aşağı doğru daha fazla alanla nefes almasını sağlamak için yapılırken, yatay olarak ekstra boşluk eklenmemesi elemanların kenarlarına sıkıca oturmasını sağlar. */ } .navbar-top div { margin: 0 4rem; } .logo { display: flex; align-items: center; } .logo i { font-size: 6rem; color: #f8872b; margin-right: 2rem; } .logo span { font-family: "Kenia", cursive; /* Kenia, karakteristik ve dekoratif bir görünüm sağlayan bir yazı tipidir, bu yüzden sıklıkla logolar ve başlıklar için tercih edilir. */ font-size: 4rem; letter-spacing: .3rem; /* Bu özellik, span elemanı içindeki harfler arasındaki boşluğu 0.3 rem olarak ayarlar. Harf aralığı (letter spacing), metnin okunabilirliğini ve görsel etkisini artırmak için ayarlanabilir. Bu özellikle logo tasarımında, metnin daha stilize ve estetik görünmesini sağlar. */ color: #073e72; } .search-bar { position: relative; /* position: relative; Bu özellik, seçili elemanın (search-bar) pozisyon türünü "relative" olarak ayarlar. İşte bu özelliğin başlıca yönleri ve etkileri: Başlangıç Pozisyonu: Eleman, normal belge akışında (yani CSS kullanılmadan önce olacağı yerde) konumlanır. position: relative; özelliği elemanın başlangıç konumunu değiştirmez. Konumlandırma: Elemanın başlangıç konumuna göre koordinatlar kullanılarak (top, right, bottom, left özellikleri ile) konumlandırılmasına izin verir. Örneğin, top: 10px; ve left: 20px; değerleri eklenirse, eleman başlangıç noktasından itibaren 10 piksel yukarı ve 20 piksel sola taşınır. Diğer Elemanlara Etkisi: position: relative; ile konumlandırılan bir eleman, yer değiştirse bile, aslında orijinal kapladığı alanı hâlâ işgal eder gibi davranır. Yani, bu elemanın yeni pozisyonu diğer elemanların yerleşimini etkilemez. Kullanım Amacı: Bu özellik genellikle, iç içe yerleştirilmiş elemanlara (örneğin bir search-bar içinde bir arama ikonu veya iptal butonu gibi) göreli olarak konumlandırma yapmak için kullanılır. Bu sayede, iç elemanlar kolayca yönlendirilebilir ve düzenlenebilir. */ } .search-bar input { width: 52rem; padding: 1.2rem 1.4rem 1.2rem 3.7rem; /* Bu özellik, elemanın iç boşluğunu (padding) dört yönde farklı değerlerle ayarlar. Üst ve alt boşluk 1.2 rem, sağ boşluk 1.4 rem, sol boşluk ise 3.7 rem olarak ayarlanmış. Bu, metin veya diğer içeriklerin elemanın kenarlarından belirli bir mesafe ile başlamasını sağlar, özellikle sol taraf için daha geniş bir boşluk, iç içe simgeler veya başka öğeler için kullanışlı olur. */ background-color: #eaeff3; border: none; /* Bu özellik, elemanın çerçevesini (border) kaldırır. none değeri, elemanın çerçevesiz olmasını sağlar, bu da daha minimalist ve modern bir görünüm verir. */ border-radius: .5rem; /* Bu özellik, elemanın köşelerini yuvarlar. .5 rem değeri, köşelerin hafifçe yuvarlatıldığını gösterir, bu da kullanıcı arayüzü elemanlarını daha dostane ve estetik hale getirir. */ font-size: 1.6rem; font-weight: 300; /*Bu özellik, metnin kalınlığını (font weight) 300 olarak belirler. 300 değeri "light" veya "ince" anlamına gelir ve bu, metnin daha zarif ve hafif görünmesini sağlar.*/ color: #073e72; } .search-bar input::placeholder { font-size: 1.7rem; font-weight: 300; color: #073e72; } .search-bar i { position: absolute; /* Bu özellik, <i> etiketinin pozisyonunu "absolute" olarak ayarlar. Bu, elemanın en yakın konumlandırılmış üst konteynerine (pozisyonu relative, absolute, fixed veya sticky olan en yakın ebeveyne) göre konumlandırılacağı anlamına gelir. Absolute pozisyon, elemanın normal akış dışında konumlandırılmasını sağlar ve böylece diğer içeriklerle çakışmaz. */ top: 50%; /* Bu özellik, <i> etiketinin üst kenarının, üst konteynerinin yüksekliğinin %50'lik bir konumuna yerleştirilmesini sağlar. Yani, ikon konteynerin tam ortasına yakın bir yükseklikte konumlanır. */ left: 1.4rem; /* Bu özellik, <i> etiketini üst konteynerin sol kenarından 1.4 rem uzaklıkta konumlandırır. Bu genellikle, arama çubuğu içinde ikonun sol tarafta yer almasını sağlamak için kullanılır. */ transform: translateY(-50%); /* Bu dönüşüm (transform) işlemi, <i> etiketini dikey eksen boyunca kendi yüksekliğinin %50'si kadar yukarı taşır. top: 50%; ile birleştiğinde, bu, ikonun tam orta konumda (yatay ve dikey olarak) hizalanmasını sağlar, yani tam ortada ve diğer içeriklere göre merkezi bir konumda yer alır. */ font-size: 1.5rem; color: #073e72; } .user { font-size: 2rem; color: #073e72; } .user i, .user span { margin-right: 1.2rem; } .nav-list { display: flex; height: 8.5rem; padding-top: 2rem; } .nav-list div { width: 16rem; display: flex; flex-direction: column; align-items: center; justify-content: center; border-left: .1rem solid #e9edf1; /* Her bir div elemanına sol tarafında 0.1 rem kalınlığında, #e9edf1 renk koduna sahip solid (katı) bir sınır ekler. Bu, menü öğeleri arasında belirgin bir ayrım yaratır ve kullanıcıların farklı seçenekleri daha kolay ayırt etmesine yardımcı olur. */ cursor: pointer; /* Bu özellik, kullanıcı fare imlecini div üzerine getirdiğinde imlecin şeklinin pointer (işaretçi) olarak değişmesini sağlar. Bu, kullanıcıya bu öğenin tıklanabilir olduğunu görsel olarak bildirir. */ } .nav-list div:nth-child(1) { border: none; /* Bu özellik, ilk div elemanının tüm kenar çizgilerini kaldırır. Genellikle, ana sayfa linki gibi belirli bir menü öğesini diğerlerinden farklı kılmak veya vurgulamak için kullanılır. */ } .nav-list i { font-size: 2rem; color: #073e72; margin-bottom: 1rem; } .nav-list span { font-size: 1.6rem; color: #073e72; letter-spacing: .1rem; }
0 Yorum
Önerilen Yorumlar
Görüntülenecek yorum yok.