<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Badge</title>
    <link href="index.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <script src="index.js"></script>
    
    <section>
      <div class="div-sec" id="div1">
        <img id="pika" src="https://maxcdn.icons8.com/Share/icon/color/Gaming//pokecoin1600.png">
        <p class="xp">+5 XP</p>
        <p>Pika Badge</p>
      </div>
    </section>
    
   <section>
      <div class="div-sec"  id="div2">
        <img id="candy" src="https://lh3.googleusercontent.com/Ax2wQYxjDITuZEpc6K9EDYPG7C839tb4PApia4Tmf18u8XehB-twqhVgDVPgxxExkr4=w300">
        <p class="xp">+20 XP</p>
        <p>Candy Badge</p>
      </div>
    </section>
    
    <section>
      <div class="div-sec" id="div3">
        <img id="mozilla" src="https://maxcdn.icons8.com/Share/icon/Logos//firefox1600.png">
        <p class="xp">+50 XP</p>
        <p>Fox Badge</p>
      </div>
    </section>
  </body>
</html>
* {
  padding: 0;
  margin: 0;
}

body, html {
  margin: 5%;
  background-color: skyblue;
}

#div1 {
  height: 200px;
  background-color: fuchsia;
  border-radius: 1em;
}

#div2 {
  height: 200px;
  background-color: lavender;
  border-radius: 1em;
}

#div3 {
  height: 200px;
  background-color: lime;
  border-radius: 1em;
}

#div1, #div2, #div3 {
  margin: 5%;
}

#pika, #candy, #mozilla {
  height: 70%;
  padding: 0;
  margin: 0;
}

#div1:hover, #div2:hover, #div3:hover {
  height: 275px;
  width: auto;
  border: solid 1em #FAFAD2;
  
}

p {
  margin: 20;
  position: relative;
  bottom: 90px;
  color:  #039be5;
  text-align: center;
  font-family: Verdana;
  font-size: 150%;
  font-weight: 800;
}

.close {
  display: none;
}

.xp {
  font-size: 300%;
  text-shadow: -0.1em 0   #455a64;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.