First, open index.html where we will add the ribbon HTML markup.

Add the following highlighted HTML right after popup-box and before popup-box-content:

<div id="popup-box">
  <div class="ribbon hide">
    <div class="ribbon-body">
      <span>New Record</span>
    </div>
    <div class="triangle"></div>
  </div>
  <div id="popup-box-content">
  ...

Next, we need to focus on the style sheet. The entire ribbon effect is done in CSS. Open the matchgame.css file in a text editor.

In the popup-box styling, we need to add a relative position to it. We do this as follows:

#popup-box {
  position: relative;
}

Then, we need to add the following styles that create the ribbon effect in the CSS file:

.ribbon.hide {
  display: none;
}
.ribbon {
  float: left;
  position: absolute;
  left...