• Bagikan post ini ke Sosial Media!
    • Shorcut Sosial Media
    • Copy Paste Link berikut
    • Links
    • BBCode
    • HTML
#1
04-14-2025, 01:45 PM (This post was last modified: 04-14-2025, 09:13 PM by Terzier.)
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> 

       
visit - [Image: Terzier.svg?logo=liberapay]