Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            let data = [
                {
                    "id": 1,
                    "name": "Иван Иванов",
                    "description": "Харесвам работата си и продължавам да се обучавам!",
                    "email": "pereinar@optonline.net",
                    "phone": "12345344",
                    "title": "Мениджър",
                    "details": [
                            {
                                "background" : "#7eb2ff",
                                "text": "white",
                                "links": "black"
                            }
                        ]
                    },
                {"id": 2, "name": "Мария Петрова", "description": "Да създавам дизайни за уеб приложения ми доставя необходимата доза забавление на работното място", "email": "juliano@aol.com", "phone": "368938736", "title": "Програмист", "details": [{"background" : "#12cc3f","text": "white","links": "#99ff00"}]},
                {"id": 3, "name": "Стефан Колев", "description": "Интересът ми към високите технологии винаги е бил движеща сила за иновации във всяка една сфера от живота ми", "email": "jipsen@outlook.com", "phone": "866893", "title": "Финансов директор", "details": [{"background" : "#e9e9e9","text": "black","links": "#a1a1a1"}]},
                {"id": 4, "name": "Петя Илиева", "description": "Усъвършенствам своите познания като помагам на младите си колеги!", "email": "rasca@msn.com", "phone": "10237129", "title": "Бодигард", "details": [{"background" : "#2f0c01","text": "white","links": "red"}]},
                {"id": 5, "name": "Деница Филева", "description": "Личното ми мнение е, творчеството в интернет среда е ценен актив.", "email": "mahbub@att.net", "phone": "0739483", "title": "Офис сътрудник", "details": [{"background" : "#77e9e9","text": "#112211","links": "#099011"}]}];

        });
    </script>
</head>
<body>
    <div class="container my-3">
        <div class="row">
            <div class="col-4 my-2">
                <div class="card">
                    <img class="card-img-top" src="http://placehold.co/250x150" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    </div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">Cras justo odio</li>
                        <li class="list-group-item">Dapibus ac facilisis in</li>
                        <li class="list-group-item">Vestibulum at eros</li>
                    </ul>
                    <div class="card-body">
                        <a href="#" class="card-link">Edit</a>
                        <a href="#" class="d-none card-link">Cancel</a>
                    </div>
                </div>
            </div>
            <div class="col-4 my-2">
                <div class="card">
                    <img class="card-img-top" src="http://placehold.co/250x150" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    </div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">Cras justo odio</li>
                        <li class="list-group-item">Dapibus ac facilisis in</li>
                        <li class="list-group-item">Vestibulum at eros</li>
                    </ul>
                    <div class="card-body">
                        <a href="#" class="card-link">Edit</a>
                        <a href="#" class="d-none card-link">Cancel</a>
                    </div>
                </div>
            </div>
            <div class="col-4 my-2">
                <div class="card">
                    <img class="card-img-top" src="http://placehold.co/250x150" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    </div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">Cras justo odio</li>
                        <li class="list-group-item">Dapibus ac facilisis in</li>
                        <li class="list-group-item">Vestibulum at eros</li>
                    </ul>
                    <div class="card-body">
                        <a href="#" class="card-link">Edit</a>
                        <a href="#" class="d-none card-link">Cancel</a>
                    </div>
                </div>
            </div>
            <div class="col-4 my-2">
                <div class="card">
                    <img class="card-img-top" src="http://placehold.co/250x150" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    </div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">Cras justo odio</li>
                        <li class="list-group-item">Dapibus ac facilisis in</li>
                        <li class="list-group-item">Vestibulum at eros</li>
                    </ul>
                    <div class="card-body">
                        <a href="#" class="card-link">Edit</a>
                        <a href="#" class="d-none card-link">Cancel</a>
                    </div>
                </div>
            </div>
            <div class="col-4 my-2">
                <div class="card">
                    <img class="card-img-top" src="http://placehold.co/250x150" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    </div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">Cras justo odio</li>
                        <li class="list-group-item">Dapibus ac facilisis in</li>
                        <li class="list-group-item">Vestibulum at eros</li>
                    </ul>
                    <div class="card-body">
                        <a href="#" class="card-link">Edit</a>
                        <a href="#" class="d-none card-link">Cancel</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
</html>