
<section class="page-contents"></section>

<footer>

        <div class="customize-user-friendly-chat">
            <div class="chat-contact ">
                <div class="top-he">
                    <h4 class="open-contact">Contact List </h4>
                    <div class="icon-box"><i class="fa fa-minus min-list pull-right"></i></div>
                </div>
                <div class="contact-list ">
                    <ul class="nav tabs ">
                        <li class="active"><a href="#tab1" data-toggle="tab" class="online-now"><img src="images/img1.jpg">
                                <h6>DVD Player</h6>
                                <p>james Smith</p>
                            </a></li>
                        <li class=""><a href="#tab2" data-toggle="tab"><img src="images/img2.jpg">
                                <h6>HP Printer</h6>
                                <p>john Corner</p>
                            </a></li>
                        <li class=""><a href="#tab3" data-toggle="tab"><img src="images/img2.jpg">
                                <h6>Singing Instruments</h6>
                                <p>sinlebite</p>
                            </a></li>
                        <li class=""><a href="#tab4" data-toggle="tab"><img src="images/img2.jpg">
                                <h6>Warehoure</h6>
                                <p>Mr wine</p>
                            </a></li>
                        <li class=""><a href="#tab5" data-toggle="tab"><img src="images/img2.jpg">
                                <h6>Net</h6>
                                <p>Netto</p>
                            </a></li>
                        <li class=""><a href="#tab6" data-toggle="tab"><img src="images/img2.jpg">
                                <h6>House</h6>
                                <p>james Smith</p>
                            </a></li>
                        <li class=""><a href="#tab7" data-toggle="tab"><img src="images/img2.jpg">
                                <h6>Product</h6>
                                <p>Seller</p>
                            </a></li>
                        <li class=""><a href="#tab8" data-toggle="tab"><img src="images/img2.jpg">
                                <h6>Soffa Furniture</h6>
                                <p>Mr test</p>
                            </a></li>
                        <li class=""><a href="#tab9" data-toggle="tab"><img src="images/img2.jpg">
                                <h6>Italyi</h6>
                                <p>Luka Mochk</p>
                            </a></li>
                        <li class=""><a href="#tab6" data-toggle="tab"><img src="images/img2.jpg">
                                <h6>House</h6>
                                <p>Ghazi</p>
                            </a></li>
                        <li class=""><a href="#tab7" data-toggle="tab"><img src="images/img2.jpg">
                                <h6>Homage</h6>
                                <p>Spy</p>
                            </a></li>
                        <li class=""><a href="#tab8" data-toggle="tab"><img src="images/img2.jpg">
                                <h6>Matris</h6>
                                <p>Lee</p>
                            </a></li>
                        <li class=""><a href="#tab9" data-toggle="tab"><img src="images/img2.jpg">
                                <h6>Camara</h6>
                                <p>Fernandus</p>
                            </a></li>
                        <li class=""><a href="#tab6" data-toggle="tab"><img src="images/img2.jpg">
                                <h6>Chair</h6>
                                <p>Chips</p>
                            </a></li>
                        <li class=""><a href="#tab7" data-toggle="tab"><img src="images/img2.jpg">
                                <h6>HP ProBook</h6>
                                <p>Jonan Fernandus</p>
                            </a></li>
                        <li class=""><a href="#tab8" data-toggle="tab"><img src="images/img2.jpg">
                                <h6>Furniture</h6>
                                <p>Lorim</p>
                            </a></li>
                        <li class=""><a href="#tab9" data-toggle="tab"><img src="images/img2.jpg">
                                <h6>Table</h6>
                                <p>Kathrine</p>
                            </a></li>

                    </ul>
                </div>
            </div>
            <div class="clear"></div>
            <div class="tab-content">
                <div class="chat-area-span each-chat">
                    <div class="top-he">      <h4 class="open-chat">Iphone Device(Username)</h4>
                        <div class="icon-box">

                            <i class="fa min-chat fa-minus pull-right"></i> <i class="fa fa-times pull-right close-chat"></i> <i class="fa fa-gear chat-settings pull-right"></i>
                            <div class="settings-drop">
                                <ul>
                                    <li><a href="#"><i class="fa fa-power-off"></i> Mute</a></li>
                                    <li><a href="#"><i class="fa fa-ban"></i> Block</a></li>
                                    <li><a href="#"><i class="fa fa-trash"></i> Delete</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="chat-scroll ">
                        <div class="yourchat pull-left">
                            <div class="your-dp pull-left"><img src="images/img2.jpg"></div>
                            <div class="yourchat-text pull-left">Hey , Andrew How are you? Everything ok there
                                <div class="yourchat-time">Me 3.21pm</div>
                            </div>
                        </div>
                        <div class="clear"></div>
                        <div class="mychat pull-right">
                            <div class="mychat-text pull-right">Hey , Andrew How are you? Everything ok there
                                <div class="mychat-time">Me 3.21pm</div>
                            </div>
                        </div>
                        <div class="clear"></div>
                        <div class="yourchat pull-left">
                            <div class="your-dp pull-left"><img src="images/img2.jpg"></div>
                            <div class="yourchat-text pull-left">Hey , Andrew How are you? Everything ok there
                                <div class="yourchat-time">Me 3.21pm</div>
                            </div>
                        </div>
                        <div class="clear"></div>
                        <div class="mychat pull-right">
                            <div class="mychat-text pull-right">Hey , Andrew How are you? Everything ok there
                                <div class="mychat-time">Me 3.21pm</div>
                            </div>
                        </div>
                        <div class="clear"></div>
                        <div class="yourchat pull-left">
                            <div class="your-dp pull-left"><img src="images/img2.jpg"></div>
                            <div class="yourchat-text pull-left">Hey , Andrew How are you? Everything ok there
                                <div class="yourchat-time">Me 3.21pm</div>
                            </div>
                        </div>
                    </div>
                    <div class="chat-text-box-area">
                        <form action="" method="get">
                            <textarea class="twemoji-picker" name="message" cols="" rows="1" ></textarea>
                            <div class="attachments">
                                <ul>
                                    <li><img src="images/clip.png" width="36" height="50"></li>
                                    <li><img src="images/gallery.png" width="36" height="50"></li>
                                </ul>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>

</footer>


