#### Todo App

- Lorem Ipsum is simply dummy text of the printing and typesetting industry. Today
- Lorem Ipsum is simply dummy text of the printing1 week
  26 jun 2017
- Give Purchase report to Yesterday
- Lorem Ipsum is simply dummy text of the printing 2 weeks
  26 jun 2017
- Give Purchase report to Yesterday

#### Code Here:

    <div class="todo-widget scrollable" style="height:450px;">
        <ul class="list-task todo-list list-group mb-0 pl-0" data-role="tasklist">
            <li class="list-group-item todo-item  border-0 mb-0 py-3 pr-2 pl-0"
                data-role="task">
                <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input" id="customCheck">
                    <label class="custom-control-label todo-label w-100" for="customCheck">
                        <span class="todo-desc">Lorem Ipsum is simply dummy text of the printing
                            and typesetting industry.</span> <span
                            class="badge badge-pill badge-danger float-right">Today</span>
                    </label>
                </div>
                <ul class="list-style-none pl-4">
                    <li class="p-0 d-inline-block border-0 mr-1"><img class="rounded-circle"
                            width="30px" src="../assets/images/users/1.jpg" alt="user"
                            data-toggle="tooltip" data-placement="top" title=""
                            data-original-title="Steave"></li>
                    <li class="p-0 d-inline-block border-0 mr-1"><img class="rounded-circle"
                            width="30px" src="../assets/images/users/2.jpg" alt="user"
                            data-toggle="tooltip" data-placement="top" title=""
                            data-original-title="Jessica"></li>
                    <li class="p-0 d-inline-block border-0 mr-1"><img class="rounded-circle"
                            width="30px" src="../assets/images/users/3.jpg" alt="user"
                            data-toggle="tooltip" data-placement="top" title=""
                            data-original-title="Priyanka"></li>
                    <li class="p-0 d-inline-block border-0 mr-1"><img class="rounded-circle"
                            width="30px" src="../assets/images/users/4.jpg" alt="user"
                            data-toggle="tooltip" data-placement="top" title=""
                            data-original-title="Selina"></li>
                </ul>
            </li>
            <li class="list-group-item todo-item  border-0 mb-0 py-3 pr-2 pl-0"
                data-role="task">
                <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input" id="customCheck1">
                    <label class="custom-control-label todo-label w-100" for="customCheck1">
                        <span class="todo-desc">Lorem Ipsum is simply dummy text of the
                            printing</span><span
                            class="badge badge-pill badge-primary float-right">1 week </span>
                    </label>
                </div>
                <div class="pl-4 font-12 mt-1 d-inline-block text-muted"> 26 jun 2017</div>
            </li>
            <li class="list-group-item todo-item  border-0 mb-0 py-3 pr-2 pl-0"
                data-role="task">
                <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input" id="customCheck2">
                    <label class="custom-control-label todo-label w-100" for="customCheck2">
                        <span class="todo-desc">Give Purchase report to</span> <span
                            class="badge badge-pill badge-info float-right">Yesterday</span>
                    </label>
                </div>
                <ul class="list-style-none pl-4">
                    <li class="p-0 d-inline-block border-0 mr-1"><img class="rounded-circle"
                            width="30px" src="../assets/images/users/3.jpg" alt="user"
                            data-toggle="tooltip" data-placement="top" title=""
                            data-original-title="Priyanka"></li>
                    <li class="p-0 d-inline-block border-0 mr-1"><img class="rounded-circle"
                            width="30px" src="../assets/images/users/4.jpg" alt="user"
                            data-toggle="tooltip" data-placement="top" title=""
                            data-original-title="Selina"></li>
                    <li class="p-0 d-inline-block border-0 mr-1"><img class="rounded-circle"
                            width="30px" src="../assets/images/users/3.jpg" alt="user"
                            data-toggle="tooltip" data-placement="top" title=""
                            data-original-title="Priyanka"></li>
                    <li class="p-0 d-inline-block border-0 mr-1"><img class="rounded-circle"
                            width="30px" src="../assets/images/users/4.jpg" alt="user"
                            data-toggle="tooltip" data-placement="top" title=""
                            data-original-title="Selina"></li>
                </ul>
            </li>
            <li class="list-group-item todo-item  border-0 mb-0 py-3 pr-2 pl-0"
                data-role="task">
                <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input" id="customCheck3">
                    <label class="custom-control-label todo-label w-100" for="customCheck3">
                        <span class="todo-desc">Lorem Ipsum is simply dummy text of the printing
                        </span> <span class="badge badge-pill badge-warning float-right">2
                            weeks</span>
                    </label>
                </div>
                <div class="pl-4 font-12 mt-1 d-inline-block text-muted"> 26 jun 2017</div>
            </li>
            <li class="list-group-item todo-item  border-0 mb-0 py-3 pr-2 pl-0"
                data-role="task">
                <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input" id="customCheck4">
                    <label class="custom-control-label todo-label w-100" for="customCheck4">
                        <span class="todo-desc">Give Purchase report to</span> <span
                            class="badge badge-pill badge-info float-right">Yesterday</span>
                    </label>
                </div>
                <ul class="list-style-none pl-4">
                    <li class="p-0 d-inline-block border-0 mr-1"><img class="rounded-circle"
                            width="30px" src="../assets/images/users/1.jpg" alt="user"
                            data-toggle="tooltip" data-placement="top" title=""
                            data-original-title="Steave"></li>
                    <li class="p-0 d-inline-block border-0 mr-1"><img class="rounded-circle"
                            width="30px" src="../assets/images/users/2.jpg" alt="user"
                            data-toggle="tooltip" data-placement="top" title=""
                            data-original-title="Jessica"></li>
                </ul>
            </li>
        </ul>
    </div>

#### Social Widget

#### People you may know

###### Hanna Gover

###### Kendra Silly

###### Jack Sully

#### Code Here

    <div class="card social-widget">
        <div class="card-body bg-info">
            <div class="d-md-flex align-items-center  text-white">
                <div>
                    <h4 class=" mb-0">People you may know</h4>
                </div>
                <div class="ml-auto">
                    <a href="javascript: void(0)"><i class="mdi mdi-menu text-white font-20"></i></a>
                </div>
            </div>
            <form class="mt-4 mb-3">
                <div class="input-group mb-3 ">
                    <input type="text" class="form-control" placeholder="Search by Email" aria-label="">
                    <div class="input-group-append">
                        <button class="btn btn-light py-0" type="button"><i
                                data-feather="search"></i></button>
                    </div>
                </div>
            </form>
        </div>
        <div class="card-body">
            <div class="row mt-2">
                <div class="col-4 text-center">
                    <img src="../assets/images/users/1.png" alt="" class="img-fluid user-img">
                    <h6 class="font-12 mt-1">Hanna Gover</h6>
                    <button class="btn btn-light btn-sm">Connect</button>
                </div>
                <div class="col-4 text-center">
                    <img src="../assets/images/users/2.png" alt="" class="img-fluid user-img">
                    <h6 class="font-12 mt-1">Kendra Silly</h6>
                    <button class="btn btn-light btn-sm">Connect</button>
                </div>
                <div class="col-4 text-center">
                    <img src="../assets/images/users/3.png" alt="" class="img-fluid user-img">
                    <h6 class="font-12 mt-1">Jack Sully</h6>
                    <button class="btn btn-light btn-sm">Connect</button>
                </div>
            </div>
            <button class="btn btn-lg btn-block bg-twitter text-white mt-5 font-16">Invite friends from
                Twitter <i class="fab fa-twitter ml-2"></i></button>
            <button class="btn btn-lg btn-block bg-facebook text-white font-16">Invite friends from
                Facebook <i class="fab fa-facebook-f ml-2"></i></button>
        </div>
    </div>

#### Profile Card

#### Daniel Kristeen

danielkristeen@gmail.com
Dashboard
UI
UX
+3
Message
Portfolio

#### Code Here

    <div class="card">
        <div class="card-body text-center">
            <div class="profile-pic mb-3 mt-3">
                <img src="../assets/images/users/5.jpg" width="150" class="rounded-circle" alt="user" />
                <h4 class="mt-3 mb-0">Daniel Kristeen</h4>
                <a href="mailto:danielkristeen@gmail.com">danielkristeen@gmail.com</a>
            </div>
            <div class="badge badge-pill badge-light font-16">Dashboard</div>
            <div class="badge badge-pill badge-light font-16">UI</div>
            <div class="badge badge-pill badge-light font-16">UX</div>
            <div class="badge badge-pill badge-info font-16" data-toggle="tooltip" data-placement="top"
                title="3 more">+3</div>
        </div>
        <div class="p-4 border-top mt-3">
            <div class="row text-center">
                <div class="col-6 border-right">
                    <a href="#" class="link d-flex align-items-center justify-content-center font-weight-medium"><i class="mdi mdi-message font-20 mr-1"></i>Message</a>
                </div>
                <div class="col-6">
                    <a href="#" class="link d-flex align-items-center justify-content-center font-weight-medium"><i class="mdi mdi-developer-board font-20 mr-1"></i>Portfolio</a>
                </div>
            </div>
        </div>
    </div>