Saved!

Chat box - fOD1bCG6

HTML CSS JavaScript Frontend Development

Chat box

  
  <div class="wrapper">
  <div class="build-container">
    <textarea id="buildInput">
#2: Hello!
#1: Hi!
#1: Where are you now?
#2: I'm at a party at Clara</textarea><br>
    <a href="#" class="button" id="build">Build</a>
    <br><br>
  </div>
  
  <div class="phone-containter">
    <div id="phone" class="phone">
      <div class="message left"><div class="message-text">Hello!
    </div></div><div class="message right"><div class="message-text">Hi!
    </div><div class="message-text">Where are you now?
    </div></div><div class="message left"><div class="message-text">I'm at a party of Clara</div></div>
    </div>
    
    <div class="send-container">
      <form id="send">
      <input type="text" id="msgInput" class="send-input" placeholder="Message" />
      <input type="submit" class="send-btn" value="Send">
      </form>
    </div>
    
  </div>
</div>    
  
Meta
http://codesheet.org/placehold-img/?width=300&height=250&color=33aaff&text=&textcolor=

Quick add:

× Clear

Add Stylesheets

normalize.css
reset.css
nice.css
/> CodeSheet UI
Font Awesome
Bootstrap
Foundation
Animate

Add External JavaScript

jQuery 3.1.0
jQuery UI
Bootstrap
Angular

Add Google Fonts

Dosis
Exo+2
Lato
Lobster
Open+Sans
Open+Sans+Condensed
Oswald
Playfair+Display
Quicksand
Raleway
Rochester
Roboto
Roboto+Condensed
Roboto+Mono
Shadows+Into+Light
Ubuntu
Arvo
Indie Flower
Merriweather
Pacifico
Sedgwick Ave
Sedgwick Ave Display
html
css
js