bootstrap5-features-catalog-with use-cases.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

* {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

body {
    margin: 80px auto;
    background-color: #a56de6
}

.contain {
    margin: 20px 25px;
    padding: 20px
}

.col-lg-7 .card1 {
    overflow: hidden;
    border-radius: 0%;
    border: 1px solid #ddd;
    padding: 10px;
    background-color: white
}

.col-lg-5 .card2 {
    border: 1px solid #ddd;
    background-color: #e8e3fc;
    padding: 10px
}

p {
    margin: 0
}

.fw-bold {
    font-size: 14px
}

.text-muted {
    font-size: 12px
}

.fas.fa-tasks {
    color: blueviolet
}

.far.fa-file-alt {
    color: #4949db
}

.fas.fa-trophy {
    color: #fafa00
}

.fas.fa-cogs {
    color: palevioletred
}

.fab.fa-app-store {
    color: green
}

.fas.fa-download {
    color: #5050f0
}

.fas.fa-angle-double-right {
    color: #a56de6;
    font-size: 12px
}

.card {
    background-color: white;
    padding: 8px;
    margin-bottom: 8.5px
}

.card .fs {
    font-size: 12px
}

.card .circle {
    height: 10px;
    width: 10px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block
}

.card:hover {
    background-color: #f2f2f2
}

.btn.btn-primary {
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8d5ecc;
    background-color: #efecf3;
    border: none;
    outline: none;
    box-shadow: none
}

.btn.btn-primary:hover .fas.fa-angle-double-right {
    transform: translateX(10px);
    transition: transform 0.5s ease
}

.btn.btn-secondary {
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8b5ec5;
    background-color: transparent;
    border: none;
    outline: none;
    box-shadow: none
}

.btn.btn-secondary:hover .fas.fa-angle-double-right {
    transform: translateX(10px);
    transition: transform 0.5s ease
}

.fw-600 {
    font-weight: 600
}
    </style>
  </head>
  <body>
    <div class="contain">
        <div class="row">
            <div class="col-lg-7 p-0 mb-lg-0 mb-3">
                <div class="card1 pb-0">
                    <div class="row pt-3">
                        <div class="col-lg-4 col-md-6 pb-5">
                            <div class="d-flex"> <span class="fas fa-tasks px-3 py-1"></span>
                                <div class="d-flex flex-column">
                                    <p class="fw-bold">Tasks</p>
                                    <p class="text-muted">Customize the way you manage work</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6 pb-5">
                            <div class="d-flex"> <span class="far fa-file-alt px-3 py-1"></span>
                                <div class="d-flex flex-column">
                                    <p class="fw-bold">Docs</p>
                                    <p class="text-muted">Build docus, wiki's & knowledge bases.</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6 pb-5">
                            <div class="d-flex"> <span class="fas fa-trophy px-3 py-1"></span>
                                <div class="d-flex flex-column">
                                    <p class="fw-bold">Goals</p>
                                    <p class="text-muted">Monitor and manage your strategy</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6 pb-5">
                            <div class="d-flex"> <span class="fas fa-cogs px-3 py-1"></span>
                                <div class="d-flex flex-column">
                                    <p class="fw-bold">integrations</p>
                                    <p class="text-muted">Connect the platforms you use into one place</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6 pb-5">
                            <div class="d-flex"> <span class="fab fa-app-store px-3 py-1"></span>
                                <div class="d-flex flex-column">
                                    <p class="fw-bold">Apps</p>
                                    <p class="text-muted">Download Click onto any device.</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6 pb-5">
                            <div class="d-flex"> <span class="fas fa-download px-3 py-1"></span>
                                <div class="d-flex flex-column">
                                    <p class="fw-bold">Import</p>
                                    <p class="text-muted">Bring any existing projects into ClickUp.</p>
                                </div>
                            </div>
                        </div>
                        <div class="px-4 mb-3">
                            <div class="btn btn-primary fw-bold"> SEE ALL FEATURES <span class="fas fa-angle-double-right ps-1"></span> </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-5 p-0">
                <div class="card2 px-4">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <p class="fw-bold">Use Cases</p> <span class="btn btn-secondary fw-600 ">SEE MORE <span class="fas fa-angle-double-right ps-1"></span></span>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="card shadow-sm">
                                <div class="d-flex align-items-center"> <span class="circle mx-2"></span> <span class="fs">Development</span> </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card shadow-sm">
                                <div class="d-flex align-items-center"> <span class="circle mx-2"></span> <span class="fs">Marketing</span> </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card shadow-sm">
                                <div class="d-flex align-items-center"> <span class="circle mx-2"></span> <span class="fs">Project Management</span> </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card shadow-sm">
                                <div class="d-flex align-items-center"> <span class="circle mx-2"></span> <span class="fs">Enterprise</span> </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card shadow-sm">
                                <div class="d-flex align-items-center"> <span class="circle mx-2"></span> <span class="fs">Remote work</span> </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card shadow-sm">
                                <div class="d-flex align-items-center"> <span class="circle mx-2"></span> <span class="fs">Sales</span> </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card shadow-sm">
                                <div class="d-flex align-items-center"> <span class="circle mx-2"></span> <span class="fs">Desgin</span> </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card shadow-sm">
                                <div class="d-flex align-items-center"> <span class="circle mx-2"></span> <span class="fs">Human Resources</span> </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card shadow-sm">
                                <div class="d-flex align-items-center"> <span class="circle mx-2"></span> <span class="fs">Finance</span> </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card shadow-sm">
                                <div class="d-flex align-items-center"> <span class="circle mx-2"></span> <span class="fs">Business Operations</span> </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
    <script>
        document.addEventListener("DOMContentLoaded", function () {
var circle = document.querySelectorAll(".circle")
var color = ["#5E35B1", "#E91E63", "#651FFF", "#EEFF41", "#1DE9B6", "#00897B", "#0091EA", "#E53935", "#E53935", "#00C853"]
for (var i = 0; i < circle.length; i++) { circle[i].style.background=color[i]; } })
    </script>
  </body>
</html>