<div class="wrapper">
<div class="card-has">
<picture>
<img src="https://nus3.github.io/p-new-features/pages/container-queries/logo.png" alt="nus3 blog logo" width="280" />
</picture>
<div>
<h2>nus3 blog</h2>
<p>This is nus3 blog logo</p>
</div>
</div>
<div class="card-has">
<div>
<h2>nus3 blog</h2>
<p>This card is not image</p>
</div>
</div>
</div>
.wrapper {
display: flex;
gap: 20px;
}
.card-has {
padding: 1rem;
background-color: #A5C9CA;
border-radius: 4px;
overflow: hidden;
color: #333;
}
.card-has:not(:has(> picture)) h2 {
font-size: 4rem;
color: #395B64;
font-weight: bold;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.