<div class="card">
  <p class="header">UI Blog's</p>
  <div class="main-content">
    <p class="heading">How to make a simple ui card?</p>
  </div>
  <div class="footer">by Harsh Gupta</div>
</div>

<style>
/* From Uiverse.io by gharsh11032000  - Tags: card, hover, hover effect, hoverme, cardhover , card hover */
.card {
  width: 320px;
  height: 350px;
  padding: 20px;
  color: white;
  background: transparent;
  border: 2px solid #ff6b00;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  tra