Microsoft AI Skills Fest Badge Rendered as Pure HTML/CSS

Apr 9, 2025 • Chris Pietschmann  • CSS

I decided to do a test of rendering the Microsoft AI Skills Fest official attempt badge as pure HTML/CSS code. Just a test of my CSS styling skills.

Here’s the rendered badge in HTML/CSS embedded within this page:

Microsoft AI Skills Fest OFFICIAL
ATTEMPT Most users to take an online multi-level
artificial intelligence lesson in 24 hours April 8, 2025

Here’s the full CSS:

.badge-container {
  height: 1em;
  /* size of th badge overall is
  determined by this font-size */
  font-size: 22em;
}
.badge-inner-container {
  position: relative;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
.badge-inner-container > div {
  position: absolute;
  border-radius: 100%;
  width: 1em;
  height: 1em;
  z-index: 0;
  background: linear-gradient(90deg, #C63ECC, #0277D4);
}
.badge-inner-container .badge-content {
  background: black;
  margin: 0.035em 0.035em;
  width: 0.93em;
  height: 0.93em;
  z-index: 1;
  background: #1A1A1E;
  background-color: #1a1a1e; /* dark grey */
  background-image:
    linear-gradient(0deg, #17171C 3px, transparent 3px),
    linear-gradient(90deg, #17171C 3px, transparent 3px);
  background-size: 23px 23px;
}

.badge-inner-container .badge-content > span {
  color: #fff;
  font-size: 0.05em;
}

.badge-inner-container span.badge-heading {
  fill: #fff;
}
.badge-inner-container span.badge-heading .badge-heading-svg {
  position: absolute;
  font-weight: 550;
  font-size: 0.45em;
  width: 90%;
  top: -4.5em;
  left: 5%;
}

.badge-inner-container .badge-text,
.badge-inner-container .badge-logo {
  position: absolute;
  width: 100%;
  text-align: center;
}

.badge-inner-container > .badge-content > span.badge-date {
  bottom: 27%;
  font-size: 0.045em;
  font-weight: 550;
}

.badge-inner-container .badge-title {
  top: 27%;
  font-weight: bold;
}
.badge-inner-container .badge-title img {
  height: 1.5em;
}

.badge-inner-container > .badge-content > span.badge-description {
  top: 50%;
  margin: 0 auto;
  font-weight: 300;
  font-size: 0.0425em;
}

.badge-inner-container .badge-logo {
  bottom: 2em;
}
.badge-inner-container .badge-logo img {
  height: 1.7em;
}

Here’s the full HTML:

<div class="badge-container">
  <div class="badge-inner-container">
    <div class="badge-border"></div>
    <div class="badge-content">

      <span class="badge-heading">
          <svg viewBox="0 0 100 100" class="badge-heading-svg">
            <defs>
              <path id="curve" d="M10,60 A40,35 0 0,1 90,60" />
            </defs>
            <text width="100">
              <textPath href="#curve" startOffset="50%" text-anchor="middle" class="badge-heading-text">
                Microsoft AI Skills Fest
              </textPath>
            </text>
          </svg>
      </span>

      <span class="badge-text badge-title">
        OFFICIAL<br/>ATTEMPT
      </span>

      <span class="badge-text badge-description">
        Most users to take an online multi-level<br/>artificial intelligence lesson in 24 hours
      </span>

      <span class="badge-text badge-date">
        April 8, 2025
      </span>

      <span class="badge-logo">
        <img src="https://upload.wikimedia.org/wikipedia/commons/9/96/Microsoft_logo_%282012%29.svg"/>
      </span>

    </div>
  </div>
</div>