card.html

<!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">
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <title>TODO LIST</title>
</head>

<body>
    <div class="page-todo-container ">
        <span class="line"></span>
        <div style="font-size: 40px; font-weight: 600; letter-spacing: 1px;" class="">Trip to Paris </div>
        <span class="line"></span>
    </div>
    <div class="head-add back">
        <div class="add-btn"><i class="fas fa-arrow-left"></i></div>Back</div>
    <div class="list-container">
        <div class="todo-card list-card">
            <div class="list-head">Trip to Paris</div>
            <hr class="hr" />
            <p class="p">Complete Task</p>
            <div class="div2">
                <input class="task" type="checkbox" name="checkbox" id="task1">
                <span class="para">Pending task</span>
            </div>
            <div class="div-circle">
                <i class="fas fa-plus"></i>
            </div>
        </div>
    </div>
</body>

</html>