Html Css İle Kart (Card) Örneği

Merhaba arkadaşlar. Bu yazımızda HTML ve css kullanarak basit bir card örneği yapacağız.

1. HTML Yapısı

İlk olarak, kartın temel yapısını HTML kullanarak oluşturacağız. Bir kart genellikle bir div öğesi içinde yer alır ve ardından içeriğini belirlemek için başka HTML öğeleri içerebilir. Örneğin:

<div class="kart">
    <img src="resim.png" alt="Resim Açıklaması">
    <h2>Başlık</h2>
    <p>İçerik metni buraya gelecek.</p>
    <a href="#">Daha Fazla</a>
</div>

2. CSS ile Stil Verme

Şimdi, oluşturduğumuz HTML yapısını güzel bir kart görünümüne dönüştürmek için CSS kullanacağız. CSS, kartın şeklini, boyutunu, arka planını, kenarlık ve gölge gibi özelliklerini belirlememize olanak tanır.

.kart {
    width: 300px;
    padding: 20px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.kart img {
    width: 100%;
    border-radius: 8px;
}

.kart h2 {
    font-size: 24px;
    margin-top: 16px;
}

.kart p {
    font-size: 16px;
    color: #555;
}

.kart a {
    display: block;
    text-align: center;
    color: #007bff;
    text-decoration: none;
    margin-top: 10px;
}

Bu HTML ve CSS kodlarını çalıştırdığınızda , şık bir kart elde edersiniz. Kart, resim, başlık, içerik ve bir bağlantı içerir. Örneğin, bir ürünü tanıtmak veya bir makaleye yönlendirmek için kullanılabilir.

Bu örnek, kart oluşturmanın temelini göstermektedir. İhtiyacınıza göre, kartınıza daha fazla özellik ekleyebilir veya stilini değiştirebilirsiniz. Örneğin, renkler, yazı tipleri ve boyutlar gibi CSS özelliklerini kişiselleştirebilirsiniz.

Artık HTML ve CSS kullanarak kendi kartlarınızı oluşturmak için temel bir anlayışa sahipsiniz!

YAZAR HAKKINDA

26 Yaşında. Araştırmayı seven, bir şeyler öğretmeye meraklı bir Bilgisayar Mühendisi