chat template and styling added
This commit is contained in:
parent
4a0164eac6
commit
678082cd99
|
|
@ -0,0 +1,214 @@
|
|||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: auto;
|
||||
max-width: 1170px;
|
||||
}
|
||||
|
||||
.messaging {
|
||||
padding: 0 0 50px 0;
|
||||
}
|
||||
|
||||
.inbox_people {
|
||||
background: #f8f8f8 none repeat scroll 0 0;
|
||||
border-left: 1px solid #c4c4c4;
|
||||
float: right;
|
||||
overflow: hidden;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.inbox_msg {
|
||||
border: 1px solid #c4c4c4;
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.recent_heading {
|
||||
float: left;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.recent_heading h4 {
|
||||
color: #05728f;
|
||||
font-size: 21px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
/*Search*/
|
||||
.heading_search {
|
||||
padding: 10px 29px 10px 20px;
|
||||
overflow: hidden;
|
||||
border-bottom: 1px solid #c4c4c4;
|
||||
}
|
||||
|
||||
.search_bar {
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.search_bar input {
|
||||
background:none;
|
||||
border-bottom: 1px solid #cdcdcd;
|
||||
width: 80%;
|
||||
padding: 2px 0 4px 6px;
|
||||
}
|
||||
|
||||
.search_bar .input-group-addon {
|
||||
margin: 0 0 0 -30px;
|
||||
}
|
||||
|
||||
.search_bar .input-group-addon button {
|
||||
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
|
||||
border: medium none;
|
||||
color: #707070;
|
||||
font-size: 18px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.chat_ib h5 {
|
||||
color: #464646;
|
||||
font-size: 15px;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.chat_ib h5 span {
|
||||
float: right;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.chat_ib p {
|
||||
font-size: 14px;
|
||||
color: #989898;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.chat_img {
|
||||
float: left;
|
||||
width: 11%;
|
||||
}
|
||||
|
||||
.chat_ib {
|
||||
float: left;
|
||||
padding: 0 0 0 15px;
|
||||
width: 88%;
|
||||
}
|
||||
|
||||
.chat_people {
|
||||
overflow:hidden;
|
||||
clear:both;
|
||||
}
|
||||
|
||||
.chat_list {
|
||||
border-bottom: 1px solid #c4c4c4;
|
||||
margin: 0;
|
||||
padding: 18px 16px 10px;
|
||||
}
|
||||
|
||||
.inbox_chat {
|
||||
height: 550px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.active_chat {
|
||||
background:#ebebeb;
|
||||
}
|
||||
|
||||
.incoming_msg_img {
|
||||
display: inline-block;
|
||||
width: 6%;
|
||||
}
|
||||
|
||||
.received_msg {
|
||||
display: inline-block;
|
||||
padding: 0 0 0 10px;
|
||||
vertical-align: top;
|
||||
width: 92%;
|
||||
}
|
||||
|
||||
.received_withd_msg {
|
||||
width: 57%;
|
||||
}
|
||||
|
||||
.received_withd_msg p {
|
||||
background: #ebebeb none repeat scroll 0 0;
|
||||
border-radius: 3px;
|
||||
color: #646464;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
padding: 5px 10px 5px 12px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.messages {
|
||||
float: left;
|
||||
padding: 30px 15px 0 25px;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.time_date {
|
||||
color: #747474;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
margin: 8px 0 0;
|
||||
}
|
||||
|
||||
.sent_msg {
|
||||
float: right;
|
||||
width: 46%;
|
||||
}
|
||||
|
||||
.sent_msg p {
|
||||
background: #05728f none repeat scroll 0 0;
|
||||
border-radius: 3px;
|
||||
font-size: 14px;
|
||||
margin: 0; color:#fff;
|
||||
padding: 5px 10px 5px 12px;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.outgoing_msg {
|
||||
overflow: hidden;
|
||||
margin: 26px 0 26px;
|
||||
}
|
||||
|
||||
|
||||
.input_msg_write input {
|
||||
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
|
||||
border: medium none;
|
||||
color: #4c4c4c;
|
||||
font-size: 15px;
|
||||
min-height: 48px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.type_msg {
|
||||
border-top: 1px solid #c4c4c4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.msg_send_btn {
|
||||
background: #05728f none repeat scroll 0 0;
|
||||
border: medium none;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
font-size: 17px;
|
||||
height: 33px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 11px;
|
||||
width: 33px;
|
||||
}
|
||||
|
||||
|
||||
.msg_history {
|
||||
height: 516px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.top_spac {
|
||||
margin: 20px 0 0;
|
||||
}
|
||||
|
|
@ -11,7 +11,173 @@
|
|||
</head>
|
||||
<body>
|
||||
|
||||
<h1>InstantChat</h1>
|
||||
<h1 class="text-center">InstantChat</h1>
|
||||
<h3 class="text-center">- just add users</h3>
|
||||
|
||||
<div class="container">
|
||||
<div class="messaging">
|
||||
<div class="inbox_msg">
|
||||
<div class="inbox_people">
|
||||
<div class="heading_search">
|
||||
<div class="recent_heading">
|
||||
<h4>Recent</h4>
|
||||
</div>
|
||||
<div class="search_bar">
|
||||
<div class="stylish-input-group">
|
||||
<input type="text" class="search-bar" placeholder="Search">
|
||||
<span class="input-group-addon">
|
||||
<button type="button">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24">
|
||||
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inbox_chat">
|
||||
<div class="chat_list active_chat">
|
||||
<div class="chat_people">
|
||||
<div class="chat_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
|
||||
<div class="chat_ib">
|
||||
<h5>Sunil Rajput <span class="chat_date">Dec 25</span></h5>
|
||||
<p>Test, which is a new approach to have all solutions
|
||||
astrology under one roof.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat_list">
|
||||
<div class="chat_people">
|
||||
<div class="chat_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
|
||||
<div class="chat_ib">
|
||||
<h5>Sunil Rajput <span class="chat_date">Dec 25</span></h5>
|
||||
<p>Test, which is a new approach to have all solutions
|
||||
astrology under one roof.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat_list">
|
||||
<div class="chat_people">
|
||||
<div class="chat_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
|
||||
<div class="chat_ib">
|
||||
<h5>Sunil Rajput <span class="chat_date">Dec 25</span></h5>
|
||||
<p>Test, which is a new approach to have all solutions
|
||||
astrology under one roof.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat_list">
|
||||
<div class="chat_people">
|
||||
<div class="chat_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
|
||||
<div class="chat_ib">
|
||||
<h5>Sunil Rajput <span class="chat_date">Dec 25</span></h5>
|
||||
<p>Test, which is a new approach to have all solutions
|
||||
astrology under one roof.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat_list">
|
||||
<div class="chat_people">
|
||||
<div class="chat_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
|
||||
<div class="chat_ib">
|
||||
<h5>Sunil Rajput <span class="chat_date">Dec 25</span></h5>
|
||||
<p>Test, which is a new approach to have all solutions
|
||||
astrology under one roof.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat_list">
|
||||
<div class="chat_people">
|
||||
<div class="chat_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
|
||||
<div class="chat_ib">
|
||||
<h5>Sunil Rajput <span class="chat_date">Dec 25</span></h5>
|
||||
<p>Test, which is a new approach to have all solutions
|
||||
astrology under one roof.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat_list">
|
||||
<div class="chat_people">
|
||||
<div class="chat_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
|
||||
<div class="chat_ib">
|
||||
<h5>Sunil Rajput <span class="chat_date">Dec 25</span></h5>
|
||||
<p>Test, which is a new approach to have all solutions
|
||||
astrology under one roof.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="messages">
|
||||
<div class="msg_history">
|
||||
<div class="incoming_msg">
|
||||
<div class="incoming_msg_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
|
||||
<div class="received_msg">
|
||||
<div class="received_withd_msg">
|
||||
<p>Test which is a new approach to have all
|
||||
solutions</p>
|
||||
<span class="time_date"> 11:01 AM | June 9</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outgoing_msg">
|
||||
<div class="sent_msg">
|
||||
<p>Test which is a new approach to have all
|
||||
solutions</p>
|
||||
<span class="time_date"> 11:01 AM | June 9</span> </div>
|
||||
</div>
|
||||
<div class="incoming_msg">
|
||||
<div class="incoming_msg_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
|
||||
<div class="received_msg">
|
||||
<div class="received_withd_msg">
|
||||
<p>Test, which is a new approach to have</p>
|
||||
<span class="time_date"> 11:01 AM | Yesterday</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="outgoing_msg">
|
||||
<div class="sent_msg">
|
||||
<p>Apollo University, Delhi, India Test</p>
|
||||
<span class="time_date"> 11:01 AM | Today</span> </div>
|
||||
</div>
|
||||
<div class="incoming_msg">
|
||||
<div class="incoming_msg_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
|
||||
<div class="received_msg">
|
||||
<div class="received_withd_msg">
|
||||
<p>We work directly with our designers and suppliers,
|
||||
and sell direct to you, which means quality, exclusive
|
||||
products, at a price anyone can afford.</p>
|
||||
<span class="time_date"> 11:01 AM | Today</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="type_msg">
|
||||
<div class="input_msg_write">
|
||||
<input type="text" class="write_msg" placeholder="Type a message" />
|
||||
<button class="msg_send_btn" type="button">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24">
|
||||
<path fill="none" d="M0 0h24v24H0V0z"/><path d="M4.01 6.03l7.51 3.22-7.52-1 .01-2.22m7.5 8.72L4 17.97v-2.22l7.51-1M2.01 3L2 10l15 2-15 2 .01 7L23 12 2.01 3z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--<p class="text-center top_spac"> Design by <a target="_blank" href="#">Sunil Rajput</a></p>-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="js/jquery-3.3.1.js"></script>
|
||||
<!--Bootstrap Tooltip Library, not needed yet-->
|
||||
|
|
|
|||
Loading…
Reference in New Issue