<title>Zeynep Çakıroğlu</title> <style> *{ box-sizing: border-box; }

    html{
        font-size:62.5%;/*1rem = 10px*/
    }

    body,h1,h2,ul{
        margin:0;
        padding:0;
        
    }
    ul{
        list-style: none;
    }

    /*******************/
    body{
        font-family: 'Nunito Sans', sans-serif;
    }
    .arkaplan{
        background-color: #3D3035;
    }
    .kapsayici{
        width: 960px;
        margin:0 auto;
    }
    
    .ust{
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 200px;
    }

    .ust .logo{
        text-align: center;
        color:#fff;
    }
    .ust .logo h1{
        font-size:4rem;
        letter-spacing: .5rem;
    }

    .ust .logo h1::first-letter{
        color:#FFFFFF;
    }

    .ust .logo h1:hover::first-letter{
        background-color: #847777;
        color:#847777;
    }

    .ust .logo h2{
        font-size:2.4rem;
    }

    

    

    .ust .menu ul{
        display: flex;
    }
    .ust .menu ul li{
        margin:0 1rem;
    }

    .ust .menu ul a{
        color:#fff;
        text-decoration: none;
        font-size:1.8rem;
        padding:0 2rem;
    }
    .ust .menu ul a:hover{
        color:#847777;
    }

    .orta .bolum1{
        margin-top:20px;
        border:10px solid #847777;
        padding:20px;
    }

    .orta .bolum1 img{
        display: block;
        width: 100%;
    }

    .orta .bolum2{
        margin-top:20px;
        display: flex;
        justify-content: space-between;
    }
    .orta .bolum2 .kutu{
        flex-basis: 290px;
    }

    .orta .bolum2 .kutu h2{
        font-size: 2rem;
    }

    .orta .bolum2 .kutu p{
        font-size: 1.6rem;
    }

    .orta .bolum3{
        display: flex;
        justify-content: space-between;
        gap:20px;
    }

    .orta .bolum3 h1{
        font-size:2.5rem;
    }

    .orta .bolum3 p{
        font-size:1.6rem;
    }

    .alt{
        margin-top:20px;
        padding:20px 0;
        display: flex;
        gap:20px;
    }
    .alt .baglanti{
        flex-grow: 1;
    }

    .alt .baglanti ul li{
        border-bottom:dotted 1px #3D3035;
        margin:5px 0;
    }

    .alt .baglanti a{
        font-size:1.6rem;
        text-decoration: none;
        color:#FFFFFF;
    }


    .cizgi{
        border-top:dotted 1px #FFFFFF;
        margin:20px 0;
    }

    .alt-kenar-10{
        border-bottom:10px solid #847777;
    }
    
</style>

<!-- sayfa üstü-->
<div class="arkaplan alt-kenar-10">
    <div class="ust kapsayici">
        <div class="logo">
            <h1>PORTFOLYO</h1>
            <h2>Zeynep Çakıroğlu</h2>
        </div>
        <div class="menu">
            <ul>
                <li><a href="#">Hakkımda</a></li>
                <li><a href="#">Tasarımlar</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">İletişim</a></li>
            </ul>
        </div>
    </div>
</div>

<!-- sayfa ortası-->
<div class="orta kapsayici">
    <div class="bolum1">
        <img src="2.png" width="500" height="600" alt="Kapak resmi">
    </div>
    <div align="center" class="bolum2">
        <div class="kutu">
            <img src="3.png" width="150" height="200" alt="">
            <h2>İllüstrasyon</h2>
            <p>Göz illüstrasyon çizimi</p>
        </div>
        <div class="kutu">
            <img src="4.png" width="150" height="200" alt="">
            <h2>Afiş Tasarımı</h2>
            <p>Boyut afiş tasarımı </p>
        </div>
        <div class="kutu">
            <img src="5.png" width="150" height="200" alt="">
            <h2>Afiş Tasarımı</h2>
            <p>90'lar sonsuza kadar genç! afiş tasarımı </p>
        </div>


    </div>
    <div class="cizgi"></div>
    <div class="bolum3">
        <div class="icerik">
            <h1>Zeynep Çakıroğlu</h1>
            <p>Merhaba, ben Zeynep. Fırat Üniversitesi Görsel İletişim Tasarımı Bölümü 4. sınıf öğrencisiyim. Lise eğitimimide Grafik Tasarım Bölümünde tamamladım. Grafik Tasarım alanında 8 yıldır eğitim almaktayım. </p>
        </div>
        <div class="gorsel">
            <img src="1.jpg" width="300" height="300" alt="İlgili ürün bilgisi">
        </div>
    </div>
</div>

<!-- sayfa altı-->
<div align="center"  class="arkaplan">
    <div class="alt kapsayici">
        <div class="baglanti">
            <ul>
                <li><a href="#">Zeynep Çakıroğlu</a></li>
				 <img src="6.png" width="20" height="20" alt="Kapak resmi">