<div class="container">
<div class="card">
<img src="https://dummyimage.com/300x200/000/fff&text=1" alt="1">
<h1>название</h1>
<p>мини-описание товара</p>
</div>
<div class="card">
<img src="https://dummyimage.com/300x200/000/fff&text=2" alt="2">
<h1>название</h1>
<p>мини-описание товара</p>
</div>
<div class="card">
<img src="https://dummyimage.com/300x200/000/fff&text=3" alt="3">
<h1>название</h1>
<p>мини-описание товара</p>
</div>
</div>
*,*::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.card {
display: flex;
flex-direction: column;
align-items: center;
background: #777;
border: 1px solid #000;
width: fit-content;
padding: 2rem;
}
.container{
display: flex;
justify-content: space-around;
width: 100vw;
}
h1, p {
text-transform: uppercase;
font-family: sans-serif;
font-weight: 100;
}
img {
border-radius: .5rem;
margin-bottom: 1rem;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.