<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<article class="journal-card">
  <div class="journal-pin">
    ●
  </div>
  <small>
    GARDEN LOG · MAY 12
  </small>
  <h3>
    First strawberry!
  </h3>
  <p>
    Two ripe berries near the south planter. Soil still damp.
  </p>
  <div class="journal-leaf">
    ❋
  </div>
</article>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.journal-card{position:relative;width:238px;min-height:154px;padding:19px;border-radius:4px;background:repeating-linear-gradient(0deg,#fffdf3 0 23px,#d7e8d3 24px);color:#49644b;font-family:Georgia,serif;box-shadow:5px 8px 15px #60775a2b}.journal-pin{position:absolute;top:9px;right:13px;color:#db7467;text-shadow:0 2px 2px #a94f49}.journal-card small{font:800 8px Arial;letter-spacing:1px;color:#8ea984}.journal-card h3{margin:11px 0 8px;font-size:22px}.journal-card p{margin:0;width:175px;font-size:12px;line-height:1.45;color:#6f846e}.journal-leaf{position:absolute;right:15px;bottom:12px;color:#79ad72;font-size:35px;transform:rotate(28deg)}