MINI-REPEATER 1.05

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    body {
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100vw;
        height: 100vh;
        background-color: #ffffff; /* Set a background color for better visibility */
    }

    .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100vw;
        height: 100vh;
    }





    .mainDiv {
        width: calc(100% - 40px); /* 20px margin on each side */
        background: grey;
        border: 1px solid #FFF;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        box-shadow: 1px 2px 4px rgba(0,0,0,.4);
        padding: 20px;
        box-sizing: border-box;
        margin-bottom: 20px; /* Add margin between the two mainDivs */
    }

    .itemDiv {
        margin: 5px;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        position: relative;
        background: blue;
        transition: background-color 0.8s, color 0.8s; /* Add transition for background color and text color */
        cursor: pointer; /* Add pointer cursor to indicate clickability */
    }

    .itemDiv:hover {
        background-color: yellow; /* Change the background color on hover */
        color: black; /* Change the text color on hover */
    }

    .title {
        font-weight: bold;
        color: white;
    }

    .itemDiv:hover .title {
        color: black; /* Change the text color on hover */
    }

    .idString {
        position: absolute;
        top: 0;
        right: 0;
        background-color: #f0f0f0;
        margin: 2px;
        padding: 3px;
        border-radius: 1px;
    }

    .markedRed {
        background-color: red;
    }
</style>
</head>
<body>
    <div...