<h1>B is for Badge</h1>
<p>Because They Look Awesome as Buttons...</p>
<h5><b>Badges</b> are used as ornaments in website designing. They are usually used to express the quality/reliability of a product or a service.</h5> 
<main class="wrapper">
  <article class="badge orange">
    <div class="rounded"><i class="fab fa-html5"></i></div>
  </article>
  <article class="badge blue">
    <div class="rounded"><i class="fab fa-css3-alt"></i></div>
  </article>
  <article class="badge gold">
    <div class="rounded"><i class="fab fa-js-square"></i></div>
  </article>
  <article class="badge red">
    <div class="rounded"><i class="fab fa-adobe"></i></div>
  </article>
  <article class="badge purple">
    <div class="rounded"><i class="fab fa-php"></i></div>
  </article>
  <article class="badge green">
    <div class="rounded"><i class="fab fa-node"></i></div>
  </article>
  <article class="badge crimson">
    <div class="rounded"><i class="fab fa-npm"></i></div>
  </article>
  <article class="badge steel">
    <div class="rounded"><i class="fab fa-python"></i></div>
  </article>
  <article class="badge pink">
    <div class="rounded"><i class="fab fa-sass"></i></div>
  </article>
  <article class="badge rebecca">
    <div class="rounded"><i class="fab fa-bootstrap"></i></div>
  </article>
  <article class="badge gainsboro">
    <div class="rounded"><i class="fab fa-java"></i></div>
  </article>
</main>

/* Base */
* { box-sizing: border-box; }

body {
  background: darkslategrey;
  margin: 2rem 0;
}

/* Headers */
h1, h5, p {
  text-align: center;
}

h1 {
  color: khaki;
  margin-top: 1em;
  letter-spacing: 1.4px;
  line-height: 1.2;
}

h5 {
  color: linen;
}

p {
  color: darkgrey;
}

/* Wrapper */
.wrapper {
  width: 90%;
  max-width: 900px;
  margin: 3em auto;
  text-align: center;
}

/* Badge */
.badge {
  margin: 1.5em 3em;
  width: 6.4em;
  height: 6.4em;
  border-radius: 20%;
  display: inline-block;
  top: 0;
  transition: all 0.2s ease;
  box-shadow: 8px 10px 12px 3px rgba(0, 0, 0, 0.43);
}

.rounded {
  width: 70px;
  height: 70px;
  background: white;
  position: absolute;
  margin: 15px 16px auto;
  z-index: 10;
  border-radius: 30%;
  box-shadow: 8px 8px 8px 2px rgba(0, 0, 0, 0.23);
  
  i.fab {
    font-size: 2.6em;
    margin-top: 16px;
  }
}

/* Colors */
.blue {
    background: dodgerblue;
    color: deepskyblue;
}

.orange {
  background: darkorange;
  color: orange;
}

.gold {
  background: gold;
  color: gold;
}

.red {
  background: red;
  color: red;
}

.purple {
  background: mediumpurple;
  color: slategray;
}

.green {
  background: yellowgreen;
  color: darkslategray;
}

.crimson {
  background: crimson;
  color: firebrick;
}

.steel {
  background: steelblue;
  color: gold;
}

.pink {
  background: hotpink;
  color: palevioletred;
}

.rebecca {
  background: rebeccapurple;
  color: rebeccapurple;
}

.gainsboro {
  background: gainsboro;
  color: orangered;
}