╰┈➤ ❝ Kawaii Updates Box

As seen on our sidebar, here's how to make the updates sticky note!

<div class="kb-updates">
  <div class="kb-updates-pin">♡</div>
  <div class="kb-updates-title">updates</div>

  <ul>
    <li>new widget pack in progress</li>
    <li>tutorials coming soon</li>
    <li>resources page under construction</li>
  </ul>
</div>

<style>
.kb-updates {
  width: 190px;
  margin: 10px auto;
  padding: 12px;
  position: relative;
  background: #fffdf1;
  border: 1px solid #ffd1dc;
  border-radius: 4px;
  box-shadow: 3px 3px 0 #ffe8f0;
  color: #7c5f6b;
  font: 12px Georgia, serif;
  transform: rotate(-1deg);
}

.kb-updates-pin {
  width: 26px;
  height: 26px;
  margin: -24px auto 4px;
  background: #ed78a7;
  color: #fff;
  border-radius: 50%;
  line-height: 26px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(237,120,167,.25);
}

.kb-updates-title {
  text-align: center;
  color: #ed78a7;
  font: italic 17px Georgia, serif;
  letter-spacing: 2px;
  border-bottom: 1px dashed #e0b3c4;
  padding-bottom: 4px;
  margin-bottom: 6px;
}

.kb-updates ul {
  margin: 0;
  padding-left: 16px;
}

.kb-updates li {
  margin: 4px 0;
}

.kb-updates li::marker {
  color: #ed78a7;
}
</style>

Add it to your blog, your website, Carrd, or even your Notion sheets!

— Molly