Html & Css ile basit galeri görünümü

Yazarı:

HTML ve CSS galeri görünümü oluşturmak için aşağıdaki temel kodu kullanabilirsiniz. Bu kod, temel bir galeri yapısı oluşturur ve bu galeriye birkaç örnek resim ekler.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Resim Galerisi</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="gallery">
        <div class="gallery-item">
            <img src="resim1.jpg" alt="Resim 1">
            <div class="caption">Resim 1</div>
        </div>
        <div class="gallery-item">
            <img src="resim2.jpg" alt="Resim 2">
            <div class="caption">Resim 2</div>
        </div>
        <div class="gallery-item">
            <img src="resim3.jpg" alt="Resim 3">
            <div class="caption">Resim 3</div>
        </div>
    </div>
</body>
</html>

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin: 20px;
}

.gallery-item {
    border: 1px solid #ccc;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    text-align: center;
    background-color: #fff;
    transition: transform 0.2s;
}

.gallery-item:hover {
    transform: scale(1.05);
}

.gallery-item img {
    max-width: 100%;
    height: auto;
}

.caption {
    padding: 10px;
    background-color: #333;
    color: #fff;
    font-size: 14px;
}

Bu kod, temel bir resim galerisi oluşturur. “index.html” dosyasında galeri öğeleri ve resimler eklenmiştir. “styles.css” dosyasında ise galeri öğelerinin görünümü ve resimlerin boyutları düzenlenmiştir.

Bu kodları kullanarak, galerinizi kişiselleştirebilir ve daha fazla resim ekleyebilirsiniz. CSS ile galeri görünümünü istediğiniz gibi özelleştirebilirsiniz.

Yorum yapın