Contact view UI using bootstrap

contact view ui using bootstrap

Introducing our Lead View Card UI, built with Bootstrap!

Our Lead View Card provides a compact and efficient way to display lead information on your dashboard or your view page. The card design is perfect for users who need to view lead information at a glance without the need for scrolling or extensive table views.

Our Bootstrap code snippet includes a responsive and customizable card view that displays essential lead information such as name, email, phone number, and message. The card design allows users to quickly view the most important details and take action without the need for additional clicks or navigation.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact view ui using bootstrap</title>

    <!-- bootstrap 5 stylesheet -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/css/bootstrap.min.css" integrity="sha512-Ez0cGzNzHR1tYAv56860NLspgUGuQw16GiOOp/I2LuTmpSK9xDXlgJz3XN4cnpXWDmkNBKXR/VDMTCnAaEooxA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- fontawesome 6 stylesheet -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />


    <style>
        body{
            background-color: #f7f8fa;
            color: #4c555e;
        }
        .text-muted{
            color: #adb7c3;
        }
        .img-circle{
            border-radius: 50px;
        }
        .btn-rounded{
            border-radius: 50px;
            width: 50px;
            height: 50px;
            margin: 0px 10px;
            background-color: #868ff8;
            color: #f7f8fa;
        }
        .btn-status{
            background-color: #868ff8;
            color: #f7f8fa;
        }
    </style>
</head>
<body>
    <div class="container p-5">
        <div class="row">
            <div class="col-md-4"></div>
            <div class="col-md-4">
                <div class="border p-5 shadow bg-white">
                    <div class="d-flex justify-content-center">
                        <img src="profile-square.jpeg" alt="" class="img img-circle" width="80" height="80">
                    </div>
                    <h4 class="text-center">Dinesh P</h4>
                    <p class="text-muted text-center">October 27th, 2023 at 3:00pm</p>
                    <div class="text-center">
                        <button class="btn btn-rounded"><i class="fa-solid fa-phone"></i></button>
                        <button class="btn btn-rounded"><i class="fa-solid fa-envelope"></i></button>
                        <button class="btn btn-rounded"><i class="fa-solid fa-message"></i></button>
                        <button class="btn btn-rounded"><i class="fa-solid fa-share-from-square"></i></button>
                    </div>
                    <div class="p-3">
                        <div class="row mt-3">
                            <div class="col-4 text-muted">Phone</div>
                            <div class="col-8">+91 9585961XXX</div>
                        </div>
                        <div class="row mt-1">
                            <div class="col-4 text-muted">Pmail</div>
                            <div class="col-8">contact@curfcode.com</div>
                        </div>
                        <div class="row mt-1">
                            <div class="col-4 text-muted">Address</div>
                            <div class="col-8">ABC Street, XYZ nagar, karur, Tamilnadu, India.</div>
                        </div>
                    </div>
                    <div class="p-3">
                        <p class="text-muted mb-2">Status</p>
                        <button class="btn btn-status w-100">Active</button>

                        <p class="text-muted mt-3 mb-2">Tags</p>
                        <span class="badge rounded-pill bg-secondary me-2">Called</span><span class="badge rounded-pill bg-secondary  me-2">Referral</span><span class="badge rounded-pill bg-secondary  me-2"><i class="fa-solid fa-plus"></i></span>

                        <p class="text-muted mt-3 mb-2">Source</p>
                        <button class="btn btn-outline-secondary w-100"><img width="130px" src ="" ></button>

                        <p class="text-muted mt-3 mb-2">Rate this lead</p>
                        <div class="d-flex justify-content-between">
                            
                            <button class="btn btn-success"><i class="fa-solid fa-thumbs-up me-2"></i>Good Lead</button>
                            <button class="btn btn-outline-danger"><i class="fa-solid fa-thumbs-down me-2"></i>Bad Lead</button>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
</body>
</html>