Takip Edin

BOOTSTRAP

Seyahat Bloğu Siteleri İçin Kart Tasarımı

featured seyahat blog sitesi kart tasarımı

HTML Bölümü

Not: EDIT ON CODEPEN yazısına tıklayarak kodlar üzerinde düzenlemeler yapabilirsiniz.
<div class="container">
...
</div>

.container sınıfı, sabit genişlikte responsive bir kapsayıcı sağlar. Bu sınıfın sahip olduğu maksimum genişlik, farklı ekran boyutlarına göre değişecektir.

<div class="row my-3">
            <div class="col-md-4 mb-3">
                <div class="kart">
                     ...
                </div>
            </div>
</div>

.kart sınıfına sahip olan div, .col-md-4 sınıfına sahip olan bir div içerisinde bulunduğundan dolayı, sayfa genişliği 768 px ve üstü değerlerde olduğunda bulunduğu satırın 1/3’lik genişliğini kaplar. 768 px’in altındaki değerlerde ise bulunduğu satırı kaplar.

<p class="yazar mb-2">
    <strong>Yazar</strong> <span class="badge badge-pill badge-primary">10.01.2020</span>
</p>

.badge sınıfı, genellikle web sayfalarında önemli başlık, uyarı mesajı, bildirim sayacı gibi bazı değerli bilgileri belirtmek için kullanılır.

.badge-primary sınıfı ile tarihin arka plan rengini mavi renge çevirdik.

.badge-pill sınıfı ile daha fazla kenarlık yarıçapı vermiş olduk.

<img class="img-thumbnail" src="https://bit.ly/2ZP8H6m" alt="">

.img-thumbnail sınıfı ile resme kenarlık görünümü verdik.

<h3 class="mt-3"><a href="#" class="text-decoration-none"> ... </a></h3>

Başlıktan alt çizgiyi kaldırmak için .text-decoration-none sınıfını kullandık.

<p class="blog text-justify">
   ...
</p>

.text-justify sınıfı sayesinde kelimeler arasındaki boşluğu etkileyip etkilemediğine bakılmaksızın her satırı sağa doğru yaslayarak paragraftaki içeriğin tüm genişliği doldurmasını sağladık.

<a href="#" class="btn btn-outline-primary"> ... </a>

.btn-outline-primary sınıfı ile butonun kenarlık rengini mavi yaptık.

<span class="mt-2 badge badge-primary"><i class="far fa-thumbs-up"></i> ... <i class="far fa-comments"></i> ... </span>

FontAwesome kütüphanesinden .far fa-thumbs-up ve .far fa-comments sınıflarına sahip olan ikonları aldık.

CSS Bölümü

background-image: url("...");
background-size: cover;
font-family: 'Grenze Gotisch', cursive;

background-image özelliği ile body elemanı için bir arka plan resmi ayarladık.

background-size: cover   ile arka plan resmini, tüm içeriği kaplaması için tekrar boyutlandırdık.

font-family: ‘Grenze Gotisch’, cursive;   ile varsayılan yazı tipini değiştirdik.

.kart {
    padding: 15px 25px;
    border-radius: 5px;
    background-color: #fff;   
}

.kart sınıfına sahip div’e üstten-alttan 15 px sağdan-soldan 25 px’lik padding değerleri verdik. Kenarlık yarıçapına 5 px’lik değer verdik. Arka plan rengini beyaz renge çevirdik.

.kart:hover {
    box-shadow: 0px 0px 10px 5px  rgba(0, 0, 0, .5);
    transition: .5s;
}

.kart sınıfına sahip olan div’in üzerinde fareyi gezdirdiğimizde 10 px değerinde bulanıklık, 5 px değerinde yayılma yarıçapına ve .5 saydamlık değerinde siyah renge sahip olan gölge efekti verdik. Bu gölge efektine geçiş süresini ise .5s olarak ayarladık.

.kart span {
    font-size: 13px;
    float: right;
}

.kart sınıfının sahip olduğu <span> etiketinde bulunan tarih, beğeni ve yorum bölümlerinin font büyüklüğünü 13 px olarak ayarladık. Ayrıca bu bölümleri, float:right ile sağ tarafa kaydırdık.

img:hover {
    opacity: .8;
    transition: .3s;
}

Resmin üzerinde fareyle gezindiğimizde resim, .3 saniyelik bir sürede 80% saydam bir görüntüye sahip olacaktır.

hr {
    border-top: 1px solid lightslategray;
}

hr elemanlarını biçimlendirmek için border-top özelliğini kullandık. border-top-width değerine 1px, border-top-style değerine solid ve border-top-color değerine de lightslategray değerini verdik.

<div class="row my-3">
            <div class="col-md-4 mb-3">
                <div class="kart">
                     ...
                </div>
            </div>

            <div class="col-md-4 mb-3">
                <div class="kart">
                     ...
                </div>
            </div>

            <div class="col-md-4 mb-3">
                <div class="kart">
                     ...
                </div>
            </div>
</div>

Son olarak iki tane daha .kart sınıfına sahip olan div ekledik. Üç div de .col-md-4 sınıfına sahip div içerisinde bulunduğundan 768 px ve üstü değerlerde aynı satırı paylaşırken 768 px’in altındaki değerlerde ise div’ler alt alta gelerek her bir div bulunduğu satırı kaplar hâle gelecektir.

Devamını oku

Popüler

error: Content is protected !!