<div class="card">
  <div class="child">
    <img src="https://images.unsplash.com/photo-1626320290598-03656e931a31?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=995&q=80" />
  </div>
  <h2>Unconventional Art </h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum orci nisi, ornare et hendrerit vitae, aliquet non augue. Vestibulum orci nisi, ornare et hendrerit vitae, aliquet non augue.</p>
</div>
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;500;600;700&display=swap');

body{
  height:100vh;
  display:flex;
  place-items:center;
  font-family: 'Oswald', sans-serif;
}
.card{
  margin:0 auto;
  padding:1.5em;
  width:80%;
  max-width:350px;
  height:70%;
  max-height: 400px;
  background: #FFFFFF;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
  border-radius:4px;
  overflow:hidden;
}
.child{
  height:200px;
  width:100%;
  margin:0 auto;
}

img{
   border-radius:4px;
   width:100%;
  height:100%;
  object-fit: cover;
  object-position:50%, 50%;
}

h2{
  font-weight:600;
}

p{
  font-weight:100;
  font-size:14px;
  line-height:1.6em
    padding-bottom : .5em;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.