Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width">
- <title>JS Bin</title>
- </head>
- <body>
- <div class="main">
- <div class="top">
- <div class="log-container">
- <div class="log"></div>
- </div>
- <div class="users-container">
- <div class="users"></div>
- </div>
- </div>
- <div class="bottom">
- <div class="input-container">
- <div class="input"></div>
- </div>
- <div class="send-container">
- <button class="send-button">Послать</button>
- </div>
- </div>
- </div>
- </body>
- </html>
- html, body {
- width: 100%;
- height: 100%;
- padding: 0;
- margin: 0;
- font-size: 16px;
- background: black;
- }
- div {
- box-sizing: border-box;
- }
- .main {
- width: 100%;
- height: 100%;
- padding: 4px;
- }
- .top {
- width: 100%;
- height: 100%;
- padding-bottom: 6em;
- }
- .log-container {
- width: 100%;
- padding: 4px;
- padding-right: calc(7em + 4px);
- height: 100%;
- float: left;
- }
- .log {
- border: 2px solid yellow;
- width: 100%;
- height: 100%;
- }
- .users-container {
- width: 7em;
- margin-left: -7em;
- padding: 4px;
- height: 100%;
- float: right;
- }
- .users {
- border: 2px solid yellow;
- width: 100%;
- height: 100%;
- }
- .bottom {
- height: 6em;
- margin-top: -6em;
- padding: 4px;
- }
- .input-container {
- height: 100%;
- width: 80%;
- float: left;
- border: 2px solid yellow;
- }
- .send-container {
- height: 100%;
- width: 20%;
- float: right;
- padding-left: 8px;
- }
- .send-button {
- width: 100%;
- height: 100%;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement