Whatsapp convo

In this example below you will see how to do a Whatsapp convo with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by darkdreams, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright darkdreams ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Whatsapp convo</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="whatsapp">
  <img src="http://image.noelshack.com/fichiers/2016/49/1481018047-s-1032657-5239b0cf90f782.png" alt="" class="icon" />
  <div class="title">TON TITRE ICI</div>
  <div class="members">Alex, Az, Bri, Wade</div>
  <div class="pseudo"><span style="color: #76AD23">Alex</span></div>
  <div class="bubble">
    <div class="content">
      gfmhmkfg Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, maxime molestiae odit. Voluptate aliquam voluptates, architecto, deserunt quam, ducimus recusandae iste nam saepe aspernatur id. Recusandae cupiditate maxime, modi eligendi. 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste recusandae, accusantium quae. Fugiat aperiam, pariatur esse consectetur in eaque quos cupiditate quisquam, sed sapiente repellat dolorum consequatur, fugit. Laborum, ad!
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, minima, quibusdam? Vitae cupiditate illo quos et, quasi, debitis aliquid necessitatibus laudantium ad eligendi inventore dolorem aspernatur facere nobis eum doloribus.
    </div>
    <img src="http://image.noelshack.com/fichiers/2016/49/1481019343-whatsapp-hour.jpg" alt=""  class="hour" />
  </div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/darkdreams/whatsapp-convo-RoMdgW */
* { box-sizing: border-box; }

.whatsapp {
  position: relative;
  margin: 10px auto 20px;
  background: url('http://image.noelshack.com/fichiers/2016/49/1481017298-remove-button-clutter-from-whatsapp-interface-android-w1456.jpg') top center no-repeat;
  width: 400px;
  height: 711px;
  background-size: cover;
}

.whatsapp .icon {
  position: absolute;
  width: 40px;
  top: 35px;
  left: 18px;
}

.whatsapp .title {
  position: absolute;
  top: 28px; left: 65px;
  width: 243px;
  height: 28px;
  padding-top: 10px;
  background: #304347;
  color: #AFB5B5;
  font: 700 14px Helvetica;
}

.whatsapp .members {
  position: absolute;
  top: 58px; left: 65px;
  width: 240px;
  height: 18px;
  background: #304347;
  color: #AFB5B5;
  font: 700 italic 13px Helvetica;
}

.whatsapp .pseudo {
  z-index: 10;
  position: absolute;
  top: 110px; left: 75px;
  font: 700 12px Helvetica;
}

.whatsapp .bubble {
  position: absolute;
  top: 120px;
  right: 20px;
  width: 316px;
  max-height: 400px;
  background: #E2FFC7;
  color: #666;
  font: 400 12px Helvetica;
  padding: 10px;
}

.whatsapp .bubble .content {
  max-height: 230px;
  overflow: auto;
}

.whatsapp .bubble::before {
  position: absolute; 
  top: -16px; left: 0;
  content: url('http://image.noelshack.com/fichiers/2016/49/1481018475-top-bubble.png');
}

.whatsapp .bubble::after {
  position: absolute;
  left: 0;
  bottom: -12px;
  content: url('http://image.noelshack.com/fichiers/2016/49/1481018475-bottom-bubble.png');
}

.whatsapp .bubble .hour {
  position: absolute;
  z-index: 10;
  bottom: -5px;
  right: 10px;
}

Comments