Proje: Kişisel Portfolio Sitesi

Proje: Kişisel Portfolio

Bu derste öğrendiğimiz HTML ve CSS bilgilerini kullanarak eksiksiz bir portfolio sitesi yapacağız.

Sayfa Yapısı

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio - Ad Soyad</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="hero">
        <nav class="navbar">
            <div class="logo">AD</div>
            <ul class="menu">
                <li><a href="#hakkimda">Hakkımda</a></li>
                <li><a href="#projeler">Projeler</a></li>
                <li><a href="#iletisim">İletişim</a></li>
            </ul>
        </nav>
        <div class="hero-content">
            <h1>Merhaba, Ben <span>Ad Soyad</span></h1>
            <p>Web Geliştirici & Tasarımcı</p>
        </div>
    </header>

    <section id="projeler" class="projeler">
        <h2>Projelerim</h2>
        <div class="proje-grid">
            <div class="proje-kart">
                <h3>Proje 1</h3>
                <p>HTML/CSS ile yapılmış web sitesi</p>
            </div>
            <!-- Daha fazla kart... -->
        </div>
    </section>

    <section id="iletisim" class="iletisim">
        <h2>İletişim</h2>
        <form>
            <input type="text" placeholder="Adınız" required>
            <input type="email" placeholder="E-posta" required>
            <textarea placeholder="Mesajınız"></textarea>
            <button type="submit">Gönder</button>
        </form>
    </section>
</body>
</html>

:root {
    --bg: #0a0f1a;
    --surface: #111827;
    --accent: #06d6a0;
    --text: #e2e8f0;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); }

.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.hero h1 span { color: var(--accent); }

.proje-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    padding: 40px;
}

.proje-kart {
    background: var(--surface);
    padding: 24px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    transition: transform 0.3s;
}

.proje-kart:hover { transform: translateY(-5px); }

✅ Bu proje şunları kapsar: Semantik HTML, CSS Grid/Flexbox, geçiş efektleri, responsive tasarım, CSS değişkenleri, form tasarımı.

Web Geliştirme

Proje: Kişisel Portfolio Sitesi

Proje: Kişisel Portfolio

Sayfa Yapısı

Yorumlar 0