28. peppermint

<!-- to change the background image, switch out the url in "background-image: url(URL HERE);" -->
<div class="container" style="max-width: 450px; color: #000000; margin: auto; padding: 2px; background-image: url(https://images.unsplash.com/photo-1607523920235-edf7b80e8bad); background-size: cover; background-attachment: fixed; border-radius: 15px;">
  <div class="row no-gutters">
    <div class="col-7" style="padding: 2px;">
      <div class="card" style="background-color: #FFFFFF; border: 1px solid #A9DAC7; border-radius: 15px 0 0 0;">
        <div class="card-header border-0 pb-2" style="background: none;">

          <!-- header -->
          <h2 class="mb-0" style="font-size: 1.5rem; color: #2B9E86; border-bottom: 1px dotted #2B9E86;">peppermint</h2>
          <p style="color: #808080; margin-top: -3px;"><i>info - info - info</i></p>

        </div>
        <div class="card-block pt-0" style="height: 150px; overflow-y: auto;">

          <!-- main text -->
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>

        </div>
      </div>
    </div>
    <div class="col-5" style="padding: 2px;">

      <!-- main image - again, change the url in "background-image: url(URL HERE);" -->
      <div class="card" style="background-image: url(https://cdn.discordapp.com/attachments/730913454726316074/922886329229004860/snail.png); background-size: cover; background-position: center; background-color: #FFFFFF; height: 100%; min-height: 150px; border: 1px solid #A9DAC7; border-radius: 0 15px 0 0;"></div>

    </div>
    <div class="col-12" style="padding: 2px;">
      <div class="card" style="background-color: #FFFFFF; border: 1px solid #A9DAC7; border-radius: 0 0 15px 15px;">
        <a class="text-center p-1" style="color: #2B9E86;" data-toggle="collapse" href="#more" role="button">
        <i class="fas fa-chevron-down"></i>
        </a>
        <div class="collapse" id="more">
          <div class="card-block pt-0">

            <!-- notes section -->
            <h3 class="mb-2" style="color: #2B9E86; border-bottom: 1px dotted #2B9E86;">notes</h3>
            <ul style="list-style-type: square; padding-left: 20px;">
              <li>lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
              <li>Duis sollicitudin elit sed tellus blandit viverra sed eget odio</li>
              <li>Donec accumsan tempor lacus, et venenatis elit feugiat non</li>
            </ul>

            <!-- code credit - a good place to add any images credits too -->
            <p style="text-align: center; color: #808080; margin-bottom: -10px;"><i>code by <a href="https://toyhou.se/snail-legs" style="color: #2B9E86; text-decoration: underline;">snail-legs</a></i></p>

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