 <div class="content-wrapper">
    <div class="container-fluid">
		
        <div class="row">
        	<div class="col-lg-12">
        		<div class="card">
        			<div class="card-body">
        				<div class="card-title">Whatsapp</div>
       					
        			</div>
        		</div>
        	</div>
        </div><!--End Row-->
        
        <div class="row">
        	<div class="col-lg-6">
        		
                <div class="row">
        			<div class="col-lg-12">
                        <div class="card">
                            <div class="card-body">
                               
                                <div class="form-group row">
                                        <label for="input-21" class="col-sm-3 col-form-label">Contacts <br/>(One Per Line)</label>
                                        <div class="col-sm-9">
                                            <textarea class="form-control"  id="input-21" placeholder="One Per Line"></textarea>
                                        </div>
                                </div>
                                
                                <div class="form-group row">
                                        <label for="input-21" class="col-sm-3 col-form-label">Header Text</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control prevfield" id="headertext" placeholder="Enter Header Text" <?php if(@$storename !=''){echo "value='".@$storename."'";}?>>
                                        </div>
                                </div>
                                Or
                                <div class="form-group row">
                                        <label for="input-21" class="col-sm-3 col-form-label">Image/Video</label>
                                        <div class="col-sm-6">
                                            <input type="file" id="headerfile" class="form-control  prevfield">
                                            <input type="hidden" id="prvlink" value=''>
                                        </div>
                                        <div class="col-sm-3">
                                        	<button class="btn btn-success">Gallery</button>
                                        </div>
                                </div>
                                
                                <div class="form-group row">
                                        <label for="input-21" class="col-sm-3 col-form-label">Body Text</label>
                                        <div class="col-sm-9">
                                            <textarea class="form-control prevfield"  id="bodytxt"></textarea>
                                        </div>
                                </div>
                                <div class="form-group row">
                                        <label for="input-21" class="col-sm-3 col-form-label">Footer Text</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control prevfield" id="footertxt" placeholder="Enter Footer Text" <?php if(@$storename !=''){echo "value='".@$storename."'";}?>>
                                        </div>
                                </div>
                                
                                 <div class="form-group row">
                                        <label for="input-21" class="col-sm-3 col-form-label">Button One (Text/Link)</label>
                                        <div class="col-sm-4">
                                            <input type="text" class="form-control prevfield" name="storename" id="btn1text" placeholder="Enter Text" <?php if(@$storename !=''){echo "value='".@$storename."'";}?>>
                                        </div>
                                         <div class="col-sm-5">
                                            <input type="text" class="form-control prevfield" name="storename" id="btn1url" placeholder="Enter URL" <?php if(@$storename !=''){echo "value='".@$storename."'";}?>>
                                        </div>
                                </div>
                                
                                 <div class="form-group row">
                                        <label for="input-21" class="col-sm-3 col-form-label">Button Two (Text/Link)</label>
                                        <div class="col-sm-4">
                                            <input type="text" class="form-control prevfield" name="storename" id="btn2text" placeholder="Enter Text" <?php if(@$storename !=''){echo "value='".@$storename."'";}?>>
                                        </div>
                                         <div class="col-sm-5">
                                            <input type="text" class="form-control prevfield" name="storename" id="btn2url" placeholder="Enter URL" <?php if(@$storename !=''){echo "value='".@$storename."'";}?>>
                                        </div>
                                </div>
                                
                            </div>
                        </div>
                     </div>
                  </div>
                  
                  
        	</div>
<style>
.whatsapp-container{background:#ccc;min-height:550px;width:350px;margin-left:auto;margin-right:auto }
.topribben{height: 30px;background: #075E54;}
.waheader{min-height: 60px;background: #128C7E;font-size: 18px;
color: #fff;padding:12px}

.waheader i {padding:8px;}
.wabody{min-height: 450px;}

.wafooter .textarea{
width: 290px;height: auto;background: #fff;border-radius: 102px;padding: 12px 17px;color: #989898;font-size: 19px;display: inline-block;
}

.wafooter .textbutton{
width: 44px;
display: inline-block;
background: #075E54;
padding: 12px 16px;
vertical-align: top;
border-radius: 100px;
height: 43px;
}

.wamsg-left{
min-height: 63px;width: 272px;background: #fff;margin: 10px 5px;border-radius: 3px 15px 15px 15px;float: left;
}

.wamsg-right{
min-height: 63px;width: 272px;background:#fff9cb;padding: 12px;
color: #393939;margin: 10px 5px;border-radius: 15px 3px 15px 15px;float: right;
}

.prvhead{font-size: 12px;
color: #6a6a6a; margin-bottom:5px;}
.prvbody{margin-bottom:5px;}
.prvfooter{font-size: 12px;
color: #6a6a6a; margin-bottom:10px;}
</style>            
            <div class="col-lg-6">
            	<div class="whatsapp-container">
                	<div class="topribben"></div>
                    <div class="waheader">
                    	<i class="fa fa-chevron-left pull-left"> Abhishek Singhal</i>
                        
                        <i class="fa fa-video-camera pull-right"></i>
                        <i class="fa fa-phone pull-right"></i>
                        <i class="fa fa-ellipsis-v pull-right"></i>
                    </div>
                    <div class="wabody">
                    
                    	<div class="wamsg-left">
                        </div>
                        <div class="wamsg-right">
                        </div>
                        <div class="wamsg-left">
                        </div>
                        <div class="wamsg-right wamsg-prev">
                        </div>
                    </div>
                    <div class="wafooter">
                    	<div class="textarea">
                        	<i class="fa fa-smile-o pull-left"></i>
                        	<i class="fa fa-paperclip pull-right"></i>
                        	<i class="fa fa-camera pull-right"></i>                            
                        </div>
                        <div class="textbutton">
                        	<i class="fa fa-microphone"></i>
                        </div>
                    </div>                   
                    
                </div>
            </div>
        </div><!--End Row-->
	
	