Skip to content

Instantly share code, notes, and snippets.

@devgeeks

devgeeks/index.html

Forked from anonymous/index.html
Last active August 29, 2015 14:24
Show Gist options
  • Save devgeeks/566463e9ab362428f1ac to your computer and use it in GitHub Desktop.
Save devgeeks/566463e9ab362428f1ac to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-family: Helvetica, sans-serif;
font-size: 100%;
}
.app {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
}
.app .users-list {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 150px;
background: #e64a19;
color: rgba(255, 255, 255, 0.66);
padding: 10px 0;
}
.app .users-list .user-item {
padding: 0 10px;
color: inherit;
text-decoration: none;
display: block;
line-height: 26px;
}
.app .users-list .user-item:hover {
background: #ff5722;
}
.app .users-list .user-item:active {
color: #ffffff;
}
.app .messages-container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 150px;
}
.app .messages-container .messages-window {
position: absolute;
top: 0;
bottom: 35px;
left: 0;
right: 0;
padding: 10px;
}
.app .messages-container .messages-window .message {
margin: 0 0 10px 0;
line-height: 26px;
}
.app .messages-container .messages-window .message .message-author {
font-weight: 700;
}
.app .messages-container .message-input {
position: absolute;
height: 35px;
bottom: 0;
width: 100%;
background: #ffccbc;
}
.app .messages-container .message-input input {
height: 35px;
width: 100%;
line-height: 35px;
font-size: 100%;
padding: 0 10px;
}
</style>
</head>
<body>
<div class="app">
<div class="users-list">
<a href="#" class="user-item">alan</a>
<a href="#" class="user-item">Cade</a>
<a href="#" class="user-item">devgeeks</a>
<a href="#" class="user-item">MattE</a>
</div>
<div class="messages-container">
<div class="messages-window">
<div class="message">
<div class="message-author">
devgeeks
</div>
<div class="message-body">So test. Such wow. ¯\_(ツ)_/¯</div>
</div>
<div class="message">
<div class="message-author">
alan
</div>
<div class="message-body">This is a message test 💩</div>
</div>
<div class="message">
<div class="message-author">
devgeeks
</div>
<div class="message-body">Suuuuure it is...</div>
</div>
<div class="message">
<div class="message-author">
MattE
</div>
<div class="message-body">Hoobly hoobly</div>
</div>
<div class="message">
<div class="message-author">
devgeeks
</div>
<div class="message-body">*sighs*</div>
</div>
</div>
<div class="message-input">
<input type="text" placeholder="Say it, don't spray it..." />
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment