"Chat"
Bootstrap 3.3.0 Snippet by operationsally

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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 ---------->
<div class="container clearfix">
<p> You've built a good business and you're excited about taking the next step. You're ready to grow; you want to expand your business by adding new clients, services or both.
But you're fully aware that what got you here isn't going to get you there. Mentally you're ready, but something is making you pause, perhaps... </p>
<div class="chat">
<div class="chat-history">
<ul class="chat-ul">
<li> <h2>you feel like you’re at full capacity with your current clients...</h2></li>
<li>
<div class="message-data">
<span class="message-data-name"><i class="fa fa-circle you"></i> You</span>
</div>
<div class="message you-message">
A new client?!?! I would love to help them, but where are we going to find the time?
</div>
</li>
<li class="clearfix">
<div class="message-data align-right">
<span class="message-data-name">Ada, your OperationsAlly</span> <i class="fa fa-circle me"></i>
</div>
<div class="message me-message float-right"> We should take a look at your onboarding and service delivery workflows, for most businesess there are many ways to save time and not compromise quality. </div>
</li>
<li><h2>or little things are being forgotten that shouldn’t be...</h2></li>
<li class="clearfix">
<div class="message-data">
<span class="message-data-name"><i class="fa fa-circle you"></i> You</span>
</div>
<div class="message you-message">
What?! No way, how did I miss that. I never forgot that part before.
</div>
</li>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css');
/*http://codepen.io/drehimself/pen/KdXwxR?utm_source=bypeople
http://nicolasgallagher.com/pure-css-speech-bubbles/demo/*/
*, *:before, *:after {
box-sizing: border-box;
}
.chat .chat-history {
padding: 30px 30px 20px;
border-bottom: 2px solid white;
}
.chat .chat-history .message-data {
margin-bottom: 15px;
}
.chat .chat-history .message-data-time {
color: #a8aab1;
padding-left: 6px;
}
.chat .chat-history .message {
color: white;
padding: 18px 20px;
line-height: 26px;
font-size: 16px;
border-radius: 5px;
margin-bottom: 30px;
width: 90%;
position: relative;
}
.chat .chat-history .message:after {
content: "";
position: absolute;
top: -15px;
left: 20px;
border-width: 0 15px 15px;
border-style: solid;
border-color: #CCDBDC transparent;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

sell a car online https://www.subkuchsell.com

lumia () - 7 years ago - Reply 0