HTML CSS ile Div Örneği

Bu örneğimizde HTML CSS kullanarak bir DIV nesnesini biçimlendirmeyi öğreneceğiz.

Çalışama içinde rem ölçü birimi yanı sıra az da olsa flex özelliği kullanılmıştır. CSS öğrenme yolunda çok faydalı bir örnek olmasını dilerim.

Uygulama Çıktısı:

Uygulama Kodları:


<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Div CSS Örneği</title>
    <style>

        /*reset*/
        *{
            box-sizing: border-box;
        }
        html{
            font-size:62.5%; /*10px*/
        }
        body{
            margin:0;
            background: #282830;
        }
        /*reset*/
        .card{
            width: 40rem;
            margin:2rem auto;
            background: #E7E7E7;
            border-radius: 2rem;
            overflow: hidden;
            box-shadow: #E7E7E7 0 0 5px;
            transition: all .2s;
        }
        .card:hover{
            box-shadow: #E7E7E7 0 0 15px; 
        }

        .card-header{
            overflow: hidden;
            height: 25rem;
        }

        .card-header img{
            width: 100%;
            transition: all .2s;
        }

        .card-header img:hover{
            transform: scale(1.1);
        }

        .card-body{
            padding:3rem;
            text-align: center;
        }
        .card-body h1{
            margin:0 0 2rem 0;
            font-size:3.2rem;
        }
        .card-body p{
            font-size:1.6rem;
        }

        .card-footer{
            background: #D8335B;
            display: flex;
            justify-content: space-around;
        }

        .card-footer a{
            width: 100%;
            text-align: center;
            padding:2rem;
            border-right:#d4778f solid 1px ;
        }
        .card-footer a:last-child{
            border:none;
        }

        .card-footer a img{
            width: 2rem;
        }

    </style>
</head>
<body>
    
    <div class="card">
        <div class="card-header">
            <img src="gorsel/jonatan-lewczuk-J5wQl4Wqal8-unsplash.jpg" alt="kapak">
        </div>
        <div class="card-body">
            <h1>Lorem Ipsum</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, in atque magni perferendis beatae labore distinctio rerum eum? Expedita suscipit minima ut iste autem harum ducimus, nam saepe! Nostrum, repellat?</p>
        </div>
        <div class="card-footer">
            <a href="#"><img src="gorsel/png/001-show.png" alt="Görüntüleme"></a>
            <a href="#"><img src="gorsel/png/002-chat-bubble.png" alt="Yorumlama"></a>
            <a href="#"><img src="gorsel/png/003-like.png" alt="Beğenme"></a>
        </div>
    </div>


</body>
</html>

100

101

102

103

104

<!DOCTYPE html>

<head>

<title>Div CSS Örneği</title>

<style>

/*reset*/

box-sizing: border-box;

}

html{

font-size:62.5%; /*10px*/

}

body{

margin:0;

background: #282830;

}

/*reset*/

.card{

width: 40rem;

margin:2rem auto;

background: #E7E7E7;

border-radius: 2rem;

overflow: hidden;

box-shadow: #E7E7E7 0 0 5px;

transition: all .2s;

}

.card:hover{

box-shadow: #E7E7E7 0 0 15px;

}

.card-header{

overflow: hidden;

height: 25rem;

}

.card-header img{

width: 100%;

transition: all .2s;

}

.card-header img:hover{

transform: scale(1.1);

}

.card-body{

padding:3rem;

text-align: center;

}

.card-body h1{

margin:0 0 2rem 0;

font-size:3.2rem;

}

.card-body p{

font-size:1.6rem;

}

.card-footer{

background: #D8335B;

display: flex;

justify-content: space-around;

}

.card-footer a{

width: 100%;

text-align: center;

padding:2rem;

border-right:#d4778f solid 1px ;

}

.card-footer a:last-child{

border:none;

}

.card-footer a img{

width: 2rem;

}

</style>

</head>

<body>

</div>

<h1>Lorem Ipsum</h1>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, in atque magni perferendis beatae labore distinctio rerum eum? Expedita suscipit minima ut iste autem harum ducimus, nam saepe! Nostrum, repellat?</p>

</div>

</div>

</body>

</html>

Yapış Videosu:

HTML CSS ile Div Örneği

Yorum Yap

İptal Et

Bunları da beğenebilirsiniz

Yorum Yap