<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.0/css/font-awesome.min.css" rel="stylesheet"> <div class="wrapper"> <div class="type-board"> <div class="content"> <p class="hide">Sign up for the newsletter now! Responsive sign up form</p> <form> <input type="text" placeholder="Type a message..."></input> <a href="#" class="arrow-button"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></a> </form> </div> </div> <div class="chat-btn"> <span class="chat-start"><i class="fa fa-3x fa-comment-o" aria-hidden="true"></i></span> <span class="chat-cancel hide"><i class="fa fa-3x fa-times" aria-hidden="true"></i></span> </div> <div class="chat-wrapper"> <ul class="chat-list"> <li><span>Hi There! Can you help me out with booking and quiestions?</span></li> <li><div class="content2"> <p>Sign up for the newsletter now! Responsive sign up form</p> <!--<form class="user-error">--> <form> <input type="text" placeholder="your@email.com"></input> <a href="#" class="arrow-button"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></a> <span class="error-alert hide">Please filup require field.</span> </form> </div></li> <li><div class="content2"> <p>Sign up for the newsletter now! Responsive sign up form</p> <form class="user-error"> <input type="text" placeholder="your@email.com"></input> <a href="#" class="arrow-button"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></a> <span class="error-alert">Please filup require field.</span> </form> </div></li> <li><div class="content2"> <p>Awesome! We will respond soon.</p> <!--<form class="has-error">--> <form class="user-success"> <input type="text" placeholder="john.smith@gmail.com"></input> <a href="#" class="arrow-button"><i class="fa fa-check" aria-hidden="true"></i></a> <span class="error-alert hide">Please filup require field.</span> </form> </div> </li> <li class="user-rply"><span>How are you? I want to booking!</span></li> </ul> </div> </div>

*{ transition: all 0.6s; } html { height: 100%; } body{ padding:0; margin: 0; font-size:13px; font:normal normal 11px/1.4 Tahoma,Verdana,Sans-Serif; } .wrapper { background:url(seaportboston.png) no-repeat center center; height:100%; width:100%; background-size:cover; position:fixed; } .chat-btn{position:absolute;bottom: 160px;right: 60px;top:auto;left:auto;} .chat-btn .chat-cancel{background:#c9c9c9;} .chat-btn .chat-start{background:#29c5b5;} .chat-btn .chat-cancel, .chat-btn .chat-start{border-radius:100%;padding:20px;display:block;color:#fff;text-align: center;box-shadow: 0px 0px 35px rgba(0,0,0,0.6);} .hide{display:none !important;} .content{ position: absolute; max-width:400px; width:100%; padding:0; background: #fff; border-radius: 5px; bottom: 170px; right: 170px; box-shadow: 0px 0px 35px rgba(0,0,0,0.6); font-size:1rem; } .content2{padding:0;position:relative;right:inherit;bottom:inherit;} .content p{ font-weight: 300; } form{position:relative;} .content2 form input[type='text']{background:#f3f1f2;} ::placeholder {color:#ccd3dd;opacity: 1;} :-ms-input-placeholder {color:#ccd3dd;} ::-ms-input-placeholder {color:#ccd3dd;} .content2 form .arrow-button{background-color:transparent;} .content2 p{margin-top:0;} input[type='text']{ outline: none; display: inline-block; width:100%; padding: 10px; border: 2px solid transparent; border-radius: 5px; padding:15px 8px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; } input[type='text']:focus{ border: 2px solid #fff; } .arrow-button{ color: rgba(0,0,0,0.6); text-decoration: none; border-radius: 5px; width:10%; display: inline-block; padding:8px; background-color:transparent; text-align: center; border: 2px solid transparent; position: absolute; top: 0; right: 0; font-size: 1.3rem; } .arrow-button:hover{ color:#29c5b5; border:2px solid transparent; } .chat-wrapper{ position: absolute; right: 90px; bottom: 250px; max-height: 500px; overflow-y: scroll; height:100%; } .chat-list{font-size: 1.1rem;} .chat-list li{ list-style:none;background:#fff; padding:15px; box-shadow: 0px 0px 35px rgba(0,0,0,0.6); max-width:400px; width:100%; border-radius:10px; margin-bottom:10px; } .user-error input{border:1px solid red;} .user-error .error-alert{color: red;line-height:normal;position:relative;top: 0px;font-size: 12px;} .chat-list li.user-rply{background:#29c5b5;color:white;text-align: right;} .chat-list li form.user-success input[type='text'], .chat-list li form.user-success a{color:#29c5b5;} /*----------------Alert class Start------------ .user-rply - class for user reply. .user-success - class for email is approved. .user-error - class is error in validation. ---------------Alert class End-------------*/ @media screen and (max-width: 736px){ input[type='email']{ display: block; width: 100%; } .arrow-button{ box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; width: 100%; display: block; margin-top: 5px; } }