Takip Edin

BOOTSTRAP

Kart Çevirme Efekti İle Ekibimiz Bölümü Tasarımı

Bootstrap Kullanarak Kart Çevirme Efekti İle Ekibimiz Bölümü Tasarımı

Bu yazıda, Bootstrap 4 kullanarak kart çevirme efekti ile ekibimiz bölümünün tasarımı yapılacaktır.

İlk olarak .side-one sınıfına sahip olan div ile kartın ön yüzünü tasarlayalım:

.side-two sınıfına sahip olan div ile kartın arka yüzünü tasarlayalım:

Aynı şekilde .side-one ve .side-two sınıfına sahip olan div’lerle, diğer kartların da ön ve arka taraflarının tasarımını gerçekleştirelim:

Arka plan rengini değiştirelim:

Kartlara üstten ve alttan padding verelim:

Ekibimiz adlı başlığın stilini düzenleyelim:

Profil resimlerinin stilini düzenleyelim:

Kartların ön yüzü(.side-one) üzerinde gezindiğimizde çevirme efekti uygulayarak arka yüzünün(.side-two) gözükmesini sağlayalım:

Kartın arka yüzünde bulunan sosyal medya linklerinin stilini düzenleyelim:

Son olarak kartın ön ve arka yüzünde bulunan yazıların stilini düzenleyelim:

Devamını oku

Popüler

error: Content is protected !!