Как сделать такую карточку товара? На чистом CSS

Question

Интересует сделать такую карточку товара, но не понимаю как именно это работает, также указываю ссылку на макет фигмы вот она Помогите пж кодом)

У меня получилось сделать вертикальную зеленую карточку, но горизонтальную не выходит, и проблема с текстом внутри у меня, хелп ^_^

Answer 1

Задача типична, как говорится рутина

смотрим размеры и устанавливаем шрифты и так же обнуляем отступы и главного документа
Картинки - создаём рядом с index.html папку с именем img/images/i как угодно, если когда то у вас зайдёт речь о вёрстке под cms то там будет ограничение для имени этой папки и все картинки из figma складываем в эту папку

Я сделал просто так - использовал flexbox и для мануала покурите вот это : webref.ru и согласно инструкции на этом сайте мы укажем для родителя всех карточек: display: flex;

В общем смотрите и если вдруг что то станет не ясно - переспросите комментариями

Внимание - не адаптивно

javascript применил так как лень кучу раз писать src для картинок и так же кучу раз вставлять один и тот же текст -

Здесь чуть чуть модернизировал: codepen.io

let text = "Парикмахерское кресло НОРМ гидровлическое";
let price = "9900 &#8381;";

document.querySelectorAll(".description").forEach(function(el) {
  el.innerHTML = text;
});

document.querySelectorAll(".price").forEach(function(el) {
  el.innerHTML = price;
});

document.querySelectorAll("img").forEach(function(img) {
  img.src =
    "https://tua-vita.ru/upload/iblock/851/851fadff5982b69c94f3097c8630ada4.png";
});

html,
body {
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
}

.wrapper {
  text-align: center;
  background-color: #efefef;
}

.flex {
  display: inline-flex;
  padding: 20px 10px;
}

.cart {
  width: 180px;
  background-color: #fff;
}

.cart:not(:first-child) {
  margin-left: 20px;
}

img {
  display: inline-block;
  max-width: 150px;
  object-fit: cover;
}

.description {
  font-size: 14px;
  text-align: left;
  width: 90%;
  margin: 20px auto;
}

.price {
  margin: 20px auto;
}

.button {
  margin: 20px auto;
}

.button button {
  border: none;
  outline: none;
  display: inline-block;
  padding: 10px 20px;
  background: #66c05d;
  border-radius: 30px;
  transition: scale 0.1s ease-in;
  color: #fff;
}

.button:hover button {
  transform: scale(1.1);
  background-color: #48983e;
}

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">

<div class="wrapper">
  <div class="flex">

    <div class="cart">
      <div class="img">
        <img src="" alt="">
      </div>
      <div class="description"></div>
      <div class="price"></div>
      <div class="button">
        <button type="button"> Купить</button>
      </div>
    </div>

    <div class="cart">
      <div class="img">
        <img src="" alt="">
      </div>
      <div class="description"></div>
      <div class="price"></div>
      <div class="button">
        <button type="button"> Купить</button>
      </div>
    </div>

    <div class="cart">
      <div class="img">
        <img src="" alt="">
      </div>
      <div class="description"></div>
      <div class="price"></div>
      <div class="button">
        <button type="button"> Купить</button>
      </div>
    </div>

    <div class="cart">
      <div class="img">
        <img src="" alt="">
      </div>
      <div class="description"></div>
      <div class="price"></div>
      <div class="button">
        <button type="button"> Купить</button>
      </div>
    </div>

  </div>

</div>

Answer 2

Как вариант

p, h3 {
  margin: 0;
}

.card {
  margin: 0 auto;
  display: flex;
  font-family: Nunito, sans-serif;
  width: 560px;
  background-color: white;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 5px 5px rgba(0,0,0,0.05);
}

.img-wrap {
  background-color: lightgray;
  width: 256px;
  height: 256px;
}

.content-wrap {
  margin-left: 40px;
  margin-top: 40px;
}

.price  {
  font-weight: 600;
  font-size: 20px;
  line-height: 5;
  line-height: 24px;
  color: #C7A17A;
}

.title {
  font-style: normal;
  font-weight: bold;
  font-size: 24px;
  line-height: 28px;
  color: #232C38;
  margin-top: 10px;
}

.description {
  font-weight: 300;
  font-size: 16px;
  line-height: 22px;
  color: #151D28;
  margin-top: 20px;
}

.toggle-wrap {
  margin-top: 25px;
  display: flex;
  justify-content: space-between;
}

.toggle-buy,
.toggle-info {
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;
  line-height: 32px;
}


.toggle-buy {
  display: block;
  width: 134px;
  background: #C7A17A;
  border-radius: 19px;
  text-align: center;
  color: #F9FBFF;
}

.toggle-info {
  display: block;
  margin-left: 29px;
  color: #415167;
  background: none;
  border: none;
}

<div class="card">
  <div class="img-wrap">
    <img height="256" width="256" src="" alt="picture">
  </div>
  <div class="content-wrap">
    <p class="price">99.000</p>
    <h3 class="title">REVO Morning</h3>
    <p class="description">đắng, hậu ngọt, hương hoa </p>
    <div class="toggle-wrap">
      <a class="toggle-buy" href="#">MUA NGAY</a>
      <a class="toggle-info" href="#">CHI TIẾT</a>
    </div>
  </div>
 </div>

БЛОГ НА HUSL

Как сделать такую карточку товара? На чистом CSS

Ответы (2 шт):