04-14-2025, 01:45 PM
PHP Code:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Detail Barang</title>
<style>
.detail-container {
width: 90%;
max-width: 800px;
margin: 20px auto;
border: 1px solid #ddd;
padding: 15px;
box-sizing: border-box;
border-radius: 5px;
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.detail-item {
display: flex;
align-items: center;
background-color: #f9f9f9;
border: 1px solid #eee;
padding: 10px;
border-radius: 5px;
}
.detail-label {
font-weight: bold;
margin-right: 5px;
background-color: #90EE90; /* Hijau pedesaan */
padding: 5px;
border-radius: 3px;
color: #333;
}
.colon-separator {
margin-right: 5px;
font-weight: bold;
color: #333;
}
.detail-value {
background-color: #ADD8E6; /* Biru langit */
padding: 5px;
border-radius: 3px;
color: #333;
transition: transform 0.1s ease-in-out; /* Transisi untuk efek hover lainnya (jika ada) */
}
/* Efek getar saat hover */
.detail-value:hover {
animation: shake 0.7s;
animation-iteration-count: infinite;
}
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
/* Layout vertikal untuk layar kecil */
@media (max-width: 600px) {
.detail-container {
display: grid;
grid-template-columns: auto auto 1fr;
gap: 8px 10px;
}
.detail-item {
display: contents;
background-color: transparent;
border: none;
padding: 0;
}
.detail-label {
grid-column: 1 / 2;
margin-right: 0;
}
.colon-separator {
grid-column: 2 / 3;
text-align: center;
}
.detail-value {
grid-column: 3 / 4;
}
.detail-value:hover {
animation: none; /* Menonaktifkan animasi getar pada layar kecil (opsional) */
}
}
</style>
</head>
<body>
<div class="detail-container">
<div class="detail-item">
<div class="detail-label">Kondisi Barang</div>
<div class="colon-separator">:</div>
<div class="detail-value">Baru</div>
</div>
<div class="detail-item">
<div class="detail-label">Harga</div>
<div class="colon-separator">:</div>
<div class="detail-value">Rp. 500.000,00</div>
</div>
<div class="detail-item">
<div class="detail-label">Status</div>
<div class="colon-separator">:</div>
<div class="detail-value">Terjual</div>
</div>
<div class="detail-item">
<div class="detail-label">Daerah</div>
<div class="colon-separator">:</div>
<div class="detail-value">Jawa Tengah</div>
</div>
</div>
</body>
</html>
[attachment=12][attachment=11]