KoDemi

Proje Detayları

Bu projede, CSS Box Model'i kullanarak bir kişisel profil kartı tasarlayacaksınız. Bu alıştırma, Box Model'in tüm bileşenlerini uygulamalı olarak öğrenmenize yardımcı olacaktır.

Proje Adımları:

Bir HTML dosyası oluşturun ve temel yapıyı hazırlayın.
Bir profil kartı için gerekli HTML elementlerini ekleyin (resim, isim, meslek, kısa açıklama, sosyal medya linkleri).
Bir CSS dosyası oluşturun ve HTML dosyasına bağlayın.
Tüm elementler için box-sizing: border-box; ayarını yapın.
Profil kartı için bir konteyner oluşturun ve boyutlarını ayarlayın.
Profil resmini yerleştirin ve border-radius ile yuvarlak hale getirin.
İsim, meslek ve açıklama için uygun padding ve margin değerleri belirleyin.
Sosyal medya linkleri için bir bölüm oluşturun ve düzenleyin.
Kartın kenarlarını yuvarlatın ve gölge ekleyin.
Hover efektleri ekleyerek kartı interaktif hale getirin.

Başlangıç HTML Kodu:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kişisel Profil Kartı</title>
    <link rel="stylesheet" href="profile-card.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
    <div class="card">
        <div class="card-header">
            <img src="https://via.placeholder.com/150" alt="Profil Resmi" class="profile-img">
        </div>
        <div class="card-body">
            <h2 class="name">Ahmet Yılmaz</h2>
            <p class="job-title">Web Geliştirici</p>
            <p class="about">Front-end ve back-end teknolojileri konusunda 5 yıllık deneyime sahip tutkulu bir web geliştiricisiyim.</p>
        </div>
        <div class="card-footer">
            <ul class="social-links">
                <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                <li><a href="#"><i class="fab fa-linkedin"></i></a></li>
                <li><a href="#"><i class="fab fa-github"></i></a></li>
                <li><a href="#"><i class="fas fa-envelope"></i></a></li>
            </ul>
        </div>
    </div>
</body>
</html>

Bu HTML dosyasını ve boş bir profile-card.css dosyasını oluşturun, ardından CSS dosyasını yukarıdaki adımlara göre doldurun.