Skip to content

Instantly share code, notes, and snippets.

@helderjnpinto

helderjnpinto/index.html

Created October 13, 2017 10:28
Show Gist options
  • Save helderjnpinto/00170e47056dc99e7c0013cf07a1813a to your computer and use it in GitHub Desktop.
Save helderjnpinto/00170e47056dc99e7c0013cf07a1813a to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/tosemadabi
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
.wrapper {
border: 1px solid black;
width: 400px;
}
.wrapper li {
padding: .5rem;
overflow: hidden;
display: -ms-flexbox;
display: flex;
}
.discu {
margin-bottom: 12px;
}
.avatar img{
border-radius: 50%;
height: 20px;
border: 2px solid black;
}
.selft .avatar {
order: 2;
}
.other .avatar {
order: 1;
}
.discu .message {
border-radius: 3%;
background-color: lightblue;
margin: 10px;
padding: 5px;
}
.message>p {
color: red;
word-break: break-all;
display: block!important;
}
</style>
</head>
<body>
<div class="wrapper">
<li class="discu self">
<div class="avatar">
<img src="data:image/png;base64,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">
</div>
<div class="message">
<p>asdasdasd asdasd asd</p>
</div>
</li>
<li class="discu other">
<div class="avatar">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSZ2zaAVvl2JjQK0upVHWV5jHJ8SpUkRJbdHyXPlR581sjqjqdM">
</div>
<div class="message">
<p>asdasdasd asdasd asasdasdasd asasdasdasdasssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssdasdasd asd asd ad asd asd asd asdasd asda d</p>
</div>
</li>
</div>
<script id="jsbin-source-css" type="text/css">.wrapper {
border: 1px solid black;
width: 400px;
}
.wrapper li {
padding: .5rem;
overflow: hidden;
display: -ms-flexbox;
display: flex;
}
.discu {
margin-bottom: 12px;
}
.avatar img{
border-radius: 50%;
height: 20px;
border: 2px solid black;
}
.selft .avatar {
order: 2;
}
.other .avatar {
order: 1;
}
.discu .message {
border-radius: 3%;
background-color: lightblue;
margin: 10px;
padding: 5px;
}
.message>p {
color: red;
word-break: break-all;
display: block!important;
}</script>
</body>
</html>
Raw
jsbin.tosemadabi.css
.wrapper {
border: 1px solid black;
width: 400px;
}
.wrapper li {
padding: .5rem;
overflow: hidden;
display: -ms-flexbox;
display: flex;
}
.discu {
margin-bottom: 12px;
}
.avatar img{
border-radius: 50%;
height: 20px;
border: 2px solid black;
}
.selft .avatar {
order: 2;
}
.other .avatar {
order: 1;
}
.discu .message {
border-radius: 3%;
background-color: lightblue;
margin: 10px;
padding: 5px;
}
.message>p {
color: red;
word-break: break-all;
display: block!important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment