Stylish Massege Box Using CSS and JavaScript

HTML Code Here:-

<div class="demo">
	<svg class="sidebar" viewBox="0 0 300 500">
	<path class="s-path" fill="#fff" d="M0,0 50,0 a0,250 0 1,1 0,500 L0,500"></path>
	</svg>
	<div class="static">
	<div class="static__text">Pull white sidebar to the right</div>
	</div>
	<div class="sidebar-content">
	<div class="contact">
	<img src="./index_files/elastic-girl.png" alt="" class="contact__photo">
	<span class="contact__name">Rosamund Pike</span>
	<span class="contact__status online"></span>
	</div>
	<div class="contact">
	<div class="search">
	<img src="./index_files/elastic-srch.png" alt="" class="search__img">
	<input type="text" class="search__input" placeholder="Search">
	</div>
	</div>
	<div class="chat" style="display: none;">
	<span class="chat__back"></span>
	<span class="chat__status">status</span>
	<div class="chat__person">
	<span class="chat__online active"></span>
	<span class="chat__name">Natalie Portman</span>
	</div>
	<div class="chat__messages">
	<div class="chat__msgRow">
	<div class="chat__message mine">Such SVG, much Javascript, very CSS!</div>
	</div>
	<div class="chat__msgRow">
	<div class="chat__message notMine">Wow!</div>
	</div>
	<div class="chat__msgRow">
	<div class="chat__message notMine">Very elastic! Such easings!</div>
	</div>
	<div class="chat__msgRow">
	<div class="chat__message mine">
	Check out my other <a href="ht/suez/public/" target="_blank">pens</a>
	</div>
	</div>
	</div>
	<input type="text" class="chat__input" placeholder="Your message">
	</div>
	</div>
	<script src="./index_files/stopExecutionOnTimeout.js"></script><script src="./index_files/jquery.min.js"></script>

""Download Full source File From Here""