EXODUZ

Facebook Twitter Google+ Github Dribbble CodePen
Writing is an evolving process, not a finished product. Nobody expects you to get it right the first time, or even the second time.

Collapsible

This is a collapsible callout

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat cupiditate corrupti quis aliquam nulla autem nisi minima perferendis? Amet, adipisci at doloremque eaque debitis laborum deleniti voluptatum ipsa. Ex, consectetur.

Contoh Ordered List:

  1. Satu
  2. Dua
  3. Roti
  4. Kentang


proyek

/* Container untuk grid Masonry */
        .grid-container {
            /* Default: 1 kolom untuk layar kecil (mobile-first) */
            columns: 1;
            column-gap: 1rem;
            width: 100%;
            margin: auto auto 20px auto; /* auto untuk menengahkan container */
            max-width: 1200px; /* Lebar maksimum yang lebih besar untuk multi-kolom */
        }

        /* Aturan untuk setiap item di dalam grid. Menggunakan 'figure' sebagai item. */
        .grid-item { /* Kelas ini diterapkan pada elemen <figure> */
            width: 100%;
            padding: 0.1em;
            /* Properti penting untuk Masonry: mencegah item terpotong di antara kolom */
            break-inside: avoid;
            page-break-inside: avoid; /* Kompatibilitas untuk print */
            /* Gaya tambahan untuk visualisasi item */
            margin-bottom: 1rem; /* Jarak antar item */
          	padding: 1rem; /* Padding di sekitar konten figure */
            text-align: center;
        }

        /* Gaya untuk gambar di dalam item grid */
        .grid-item img {
            max-width: 100%;
            height: auto;
            margin-bottom: 0.5rem; /* Jarak antara gambar dan figcaption */
            /* Transisi untuk efek mulus pada hover */
            transition: filter 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
            /* Asumsi: gambar awalnya grayscale */
            filter: grayscale(100%);
        }

        /* Media Queries untuk responsivitas */
        @media (min-width: 481px) {
            .grid-container {
                columns: 2; /* 2 kolom untuk tablet dan layar yang lebih besar */
            }
        }
/* Container untuk grid Masonry */
.grid-container {
  columns: 1;
  column-gap: 1rem;
  /* Mengubah width menjadi kurang dari 100% agar margin: auto bekerja */
  width: 90%; /* Contoh: 90% dari lebar parent */
  /* auto untuk menengahkan container */
  margin: 20px auto 60px auto;
  max-width: 1200px; /* Lebar maksimum yang lebih besar untuk multi-kolom */
  /* Menambahkan padding horizontal agar konten tidak terlalu menempel tepi */
  padding-inline: 1rem;
}


/* Aturan untuk setiap item di dalam grid. Menggunakan 'figure' sebagai item. */
.grid-item { /* Kelas ini diterapkan pada elemen <figure> */
  width: 100%;
  padding: 0.1em;
  /* Properti penting untuk Masonry: mencegah item terpotong di antara kolom */
  break-inside: avoid;
  page-break-inside: avoid; /* Kompatibilitas untuk print */
  /* Menghilangkan background-color dan box-shadow yang sebelumnya ada */
  /* background-color: #f0f0f0; -- Dihilangkan */
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); -- Dihilangkan */
  margin-bottom: 0.7rem; /* Jarak antar item */
  padding: 1rem; /* Padding di sekitar konten figure */
}

.grid-item img {
  max-width: 100%;
  height: auto;
  margin-bottom: 0.5rem; /* Jarak antara gambar dan figcaption */
  /* Transisi untuk efek mulus pada hover */
  transition: filter 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  /* Asumsi: gambar awalnya grayscale */
}

/* Media Queries untuk responsivitas */
@media (min-width: 481px) {
  .grid-container {
    columns: 2; /* 2 kolom untuk tablet dan layar yang lebih besar */
  }
}

}
Widget is loading comments...