<div class="container">
<div class="card">
<img src="https://picsum.photos/2568/600?random=1" width="2568" height="600" alt="" class="card__thumbnail" />
<div class="card__badge">Must Try</div>
<h3 class="card__title">Best Brownies in Town</h3>
<p class="card__describe">High quality ingredients and best in-class chef. Light, tender, and easy to make~</p>
<button class="card__button">Order now</button>
</div>
<div class="card">
<img src="https://picsum.photos/2568/600?random=3" width="2568" height="600" alt="" class="card__thumbnail" />
<div class="card__badge">Must Try</div>
<h3 class="card__title">Best Brownies in Town</h3>
<p class="card__describe">High quality ingredients and best in-class chef. Light, tender, and easy to make~</p>
<button class="card__button">Order now</button>
</div>
<div class="card">
<img src="https://picsum.photos/2568/600?random=2" width="2568" height="600" alt="" class="card__thumbnail" />
<div class="card__badge">Must Try</div>
<h3 class="card__title">Best Brownies in Town</h3>
<p class="card__describe">High quality ingredients and best in-class chef. Light, tender, and easy to make~</p>
<button class="card__button">Order now</button>
</div>
</div>
<div class="form">
<label for="width">width:</label>
<input type="range" id="width" name="width" min="0" max="100" step="5" value="50">
<output id="output">50%</output>
</div>
@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
min-height: 100vh;
font-family: "Exo", Arial, sans-serif;
background-color: #557;
padding: 20px;
}
img {
display: block;
max-width: 100%;
height: auto;
}
/* Default*/
.card {
display: grid;
border-radius: 12px;
background-color: #fff;
color: #454545;
gap: 10px;
box-shadow: 0 0 0.35em 0 rgb(0 0 0 / 0.5);
}
.card__thumbnail {
aspect-ratio: 16 / 9;
object-fit: cover;
object-position: center;
border-radius: 12px 12px 0 0;
grid-area: 1 / 1 / 2 / 2;
z-index: 1;
}
.card__badge {
grid-area: 1 / 1 / 2 / 2;
z-index: 2;
background-color: #2196f3;
border-radius: 0 10rem 10rem 0;
align-self: start;
justify-self: start;
margin-top: 2rem;
color: #fff;
padding: 5px 12px 5px 8px;
text-shadow: 0 0 1px rgb(0 0 0 / 0.5);
filter: drop-shadow(0px 0px 2px rgb(0 0 0 / 0.5));
}
.card__title {
font-weight: 700;
font-size: clamp(1.2rem, 1.2rem + 3vw, 1.5rem);
padding: 0 20px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.card__describe {
color: #666;
line-height: 1.4;
padding: 0 20px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.card__button {
display: inline-flex;
justify-content: center;
align-items: center;
border: none;
border-radius: 10rem;
background-color: #feca53;
padding: 10px 20px;
color: #000;
text-decoration: none;
box-shadow: 0 3px 8px rgb(0 0 0 / 7%);
transition: all 0.2s linear;
font-weight: 700;
justify-self: end;
margin: 0 20px 20px 0;
cursor: pointer;
}
.card__button:hover {
background-color: #ff9800;
}
.form {
grid-area: form;
flex-wrap: wrap;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
color: #fff;
grid-area: form;
padding: 1rem;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 9;
background: rgb(0 0 0 / 0.65);
}
.container {
grid-area: card;
justify-self: center;
padding: 1rem;
border: 1px dashed #fff;
border-radius: 5px;
}
.container {
width: var(--width, 50%);
min-width: 320px;
margin: 0 auto;
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.container > .card {
flex: 1 1 260px;
/* flex-grow: 1; */
}
.container {
container: inline-size;
}
@container (min-width: 480px) and (max-width: 786px) {
.card:last-child {
grid-template-columns: 240px auto;
grid-template-rows: min-content min-content auto;
grid-template-areas:
"thumbnail title"
"thumbnail describe"
"thumbnail button";
gap: 0;
}
.card:last-child .card__thumbnail {
grid-area: thumbnail;
aspect-ratio: 1 / 1;
border-radius: 12px 0 0 12px;
z-index: 1;
}
.card:last-child .card__badge {
grid-area: thumbnail;
z-index: 2;
display: flex;
}
.card:last-child .card__describe {
grid-area: describe;
align-self: start;
display: flex;
margin-top: -24px;
}
.card:last-child .card__title {
grid-area: title;
margin-top: 20px;
align-self: start;
}
.card:last-child .card__button {
grid-area: button;
align-self: end;
}
}
const rootEle = document.documentElement;
const range = document.getElementById("width");
const output = document.getElementById("output");
range.addEventListener("change", (etv) => {
rootEle.style.setProperty("--width", `${etv.target.value}%`);
output.textContent = `${etv.target.value}%`;
});
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.