<html>   
   <body>
<div class="upcoming">
        <img src="https://images.unsplash.com/photo-1555992336-fb0d29498b13?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80">
      <div class="upcomingInfo">
        <div class="info1">
            <h4><ion-icon name="alarm-outline"></ion-icon>Upcoming Event</h4>
          <p>Dinner with sarah at 9pm in the Diner</p>
        </div>
      </div>
    </div>
     <div class="secondExample">
       <h2>Something about the OX</h2>
       <br>
       <h4>By Lens</h4>
     </div>
     <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
     </body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&family=Inter&family=Lobster&family=Lora:ital@0;1&family=Mulish&family=Poiret+One&family=Poppins:wght@300;400&family=Red+Hat+Display:wght@300;400&family=Source+Sans+Pro&family=Tilt+Neon&family=Unbounded&display=swap');

.upcoming {
    width: 187px;
    height: 347px;
    border-radius: 10px;
}

.upcoming > img {
    width: inherit;
    height: inherit;
    object-fit: cover;
    position: absolute;
    border-radius: inherit;
}


.upcomingInfo {
    color: white;
    width: inherit;
    height: inherit;
    position: relative;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 14.06%, #1E1E1E 100%);
  display: flex;
  align-items: flex-end;
  text-align: center;
}


.info1 > h4 {
  display: flex;
  align-items: center;
  justify-content: center;
}

ion-icon {
  font-size: 33px;
}
  
  html, body {
    width: 100%;
    height: 100%;
  }
  
  body {
    display: flex;
    align-items: center;
    gap: 100px;
    justify-content: center;
    font-family: Poppins;
  }
  
 
  
  .secondExample {
    width: 187px;
    height: 347px;
    border: dotted;
    border-radius: 10px;
    background-image: url("https://images.unsplash.com/photo-1683661174895-293d75040b78?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=464&q=80");
    
}
  
.secondExample > h2 {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.