<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;
min-height:200px;
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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.