<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900|Orbitron:900' rel='stylesheet' type='text/css'>
  
<!-- Bubble Start -->
<div class="bubble-speech bubble-left">
<h2 class="author">
  Navi
  </h2>
  
  <div class="message">
    Hey Link! Listen! Hey Link! Hey Link! Listen! Hey!
  </div>
</div>
<!-- Bubble End -->
  
  <!-- Bubble Start -->
<div class="bubble-speech bubble-right">
<h2 class="author">
  Toad
  </h2>
  
  <div class="message">
    Thank you Mario! But our Princess is in another castle!
  </div>
</div>
<!-- Bubble End -->
  
    <!-- Bubble Start -->
<div class="bubble-speech bubble-center">
<h2 class="author">
  Game Over
  </h2>
  
  <div class="message">
   Congratulation. This story is happy end. Thank you.
  </div>
</div>
<!-- Bubble End -->
  
    
    <!-- Bubble Start -->
<div class="bubble-speech bubble-left bubble-square">

  
  <div class="message">
    <span style="font-size:45px;"> &hearts;</span>
  </div>
</div>
<!-- Bubble End -->
  
      <!-- Bubble Start -->
<div class="bubble-speech bubble-right bubble-square">

  
  <div class="message">
    <span style="font-size:45px;"> &hearts;</span>
  </div>
</div>
<!-- Bubble End -->
  
      <!-- Bubble Start -->
<div class="bubble-speech bubble-center bubble-square">

  
  <div class="message">
    <span style="font-size:45px;"> &hearts;</span>
  </div>
</div>
<!-- Bubble End -->

html,
body {
  background-color: #222;
  width:100%;
  height:100%;
  overflow-x:hidden;
}

.bubble-speech {
  position: relative;
  font-family: 'Source Sans Pro', sans-serif;
  margin: auto;
  line-height: 22px;
  letter-spacing: 1px;
  margin-top: 16px;
  margin-bottom: 48px;
  width: 300px;
  background-color: #efefef;
  padding: 16px;
}

.bubble-speech.bubble-left:after {
  z-index: 9002;
  display: block;
  content: "";
  position: absolute;
  bottom: -11px;
  left: 0;
  border-top: 0 #efefef solid;
  border-bottom: 12px transparent solid;
  border-left: 20px #efefef solid;
}

.bubble-square {
  width: 33px;
  height: 25px;
  text-align: center;
}

.bubble-speech.bubble-center:after {
  z-index: 9002;
  display: block;
  content: "";
  position: absolute;
  bottom: -11px;
  left: 50%;
  margin-left: -18px;
  border-right: 20px transparent solid;
  border-top: 12px #efefef solid;
  border-left: 20px transparent solid;
}

.bubble-speech.bubble-right:after {
  z-index: 9002;
  display: block;
  content: "";
  position: absolute;
  bottom: -11px;
  right: 0;
  border-top: 0 #efefef solid;
  border-bottom: 12px transparent solid;
  border-right: 20px #efefef solid;
}

.bubble-speech .author {
  max-width: 200px;
  font-weight: bold;
  margin: 0;
  padding: 0 12px 2px 0;
}