Создание карточек с информацией и аватарками

Question

Создание карточек с информацией и аватарками

Рейтинг: 0Ответов: 1Опубликовано: 08.04.2023

Увидел недавно на одном сайте карточки с информациями о человеке, и хочу сделать такие же, только проблема я условный новичок в CSS, HTML, я буду очень благодарен если кто-нибудь знающий сможет мне помочь.

В спокойном состоянии (когда пользователь еще не кликнул на карточку), просто показывается аватарка с небольшой обводкой и основная информация (https://ru.paste.pics/938005cf0ef96b141921b27150541810)
В спокойно-активном состоянии (при наведении курсором) просто появляется обводка оранжевого цвета
В активном состоянии (при клике на карточку) она плавно расширяется вниз и показывается доп.информация (https://ru.paste.pics/7c8fe595ba2b55a23e8eb63902f10c0a)

Честно я пытался и самостоятельно написать код, а также гуглить способы и использовать нейросетку, как вариант, но ничего особо не принесло успеха, xD

$(document).ready(function() {
  $('.mentor-card').click(function() {
    $('.mentor-card__hidden-content').slideToggle();
    $('.mentor-card').toggleClass('expanded');
  });
});

.mentor-card {
  margin: 20px;
  background-color: #222227;
  border: 5px solid transparent;
  transition: all 0.3s ease;
  width: 546px;
  height: 195px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  position: relative;
}

.mentor-card:hover {
  border-color: #d75d11;
}

.mentor-card__avatar {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 140px;
  height: 140px;
  background-color: #f3d5c2;
  border-radius: 50%;
  border: 3px solid #d75d11;
}

.mentor-card__content {
  padding: 20px;
  padding-left: 180px;
  color: #fff;
}

.mentor-card h2 {
  margin-top: 0;
  font-size: 24px;
}

.mentor-card__position {
  margin-top: 10px;
  font-size: 18px;
  font-weight: bold;
  color: #d04620;
}

.mentor-card__company,
.mentor-card__experience {
  margin-top: 5px;
  font-size: 16px;
  color: #b3afab;
}

.mentor-card__hidden-content {
  display: none;
  padding: 20px;
  color: #fff;
  background-color: #222227;
}

.mentor-card.expanded {
  height: 285px;
}

.mentor-card.expanded .mentor-card__hidden-content {
  display: block;
}

.mentor-card__avatar:hover + .mentor-card__content,
.mentor-card__content:hover {
  border-color: #d75d11;
  cursor: pointer;
}

.mentor-card__avatar:hover {
  cursor: pointer;
}

.mentor-card__avatar:hover::after {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  bottom: -5px;
  right: -5px;
  border-radius: 50%;
  border: 3px solid #d75d11;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div class="mentor-card">
  <div class="mentor-card__avatar"></div>
  <div class="mentor-card__content">
    <h2 style="color: #f3d5c2;">Бахтияр</h2>
    <p class="mentor-card__position" style="color: #d04620;">Senior - разработчик</p>
    <p class="mentor-card__company" style="color: #b3afab;">Recoursia Solutions</p>
    <p class="mentor-card__experience" style="color: #b3afab;">опыт в сфере - 20 лет</p>
    <div class="mentor-card__hidden-content" style="color: #fff;">
      <p>Senior - разработчик с опытом работы в 20 лет. Обучил с нуля и трудоустроил многих ребят. Считает, что лучшая мотивация для ментора - это достижения его выпускников.</p>
    </div>
  </div>
</div>

css javascript html

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

Я вроде оставил везде комментарии, в коде. Я переместил аватар в блок с "контентом", дабы с помощью флексов можно было разместить блоки в ряд. А скрытый контент вынес в корень карточки.

$(document).ready(function() {
  $('.mentor-card').click(function() {
    $('.mentor-card__hidden-content').slideToggle();
    $('.mentor-card').toggleClass('expanded');
  });
});

.mentor-card {
  margin: 20px;
  background-color: #222227;
  border: 5px solid transparent;
  transition: all 0.3s ease;
  width: 546px;
  /* height: 195px; */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  position: relative;
  /* added */
  padding: 20px;
}

.mentor-card:hover {
  border-color: #d75d11;
}

.mentor-card__avatar {
  /* deleted position absolute */
  position: relative;
  width: 140px;
  height: 140px;
  background-color: #f3d5c2;
  border-radius: 50%;
  border: 3px solid #d75d11;
  /* added */
  flex-shrink: 0;
}

.mentor-card__content {
  /* padding: 20px; */
  color: #fff;
  /* added */
  display: flex;
  gap: 20px;
}

.mentor-card h2 {
  margin-top: 0;
  font-size: 24px;
}

.mentor-card__position {
  margin-top: 10px;
  font-size: 18px;
  font-weight: bold;
  color: #d04620;
}

.mentor-card__company,
.mentor-card__experience {
  margin-top: 5px;
  font-size: 16px;
  color: #b3afab;
}

.mentor-card__hidden-content {
  display: none;
  /* padding: 20px; */
  color: #fff;
  background-color: #222227;
}


/*
.mentor-card.expanded {
  height: 285px;
} 
*/

.mentor-card.expanded .mentor-card__hidden-content {
  display: block;
}

.mentor-card__avatar:hover+.mentor-card__content,
.mentor-card__content:hover {
  border-color: #d75d11;
  cursor: pointer;
}

.mentor-card__avatar:hover {
  cursor: pointer;
}

.mentor-card__avatar:hover::after {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  bottom: -5px;
  right: -5px;
  border-radius: 50%;
  border: 3px solid #d75d11;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div class="mentor-card">
  <div class="mentor-card__content">
    <div class="mentor-card__avatar"></div>

    <div>
      <h2 style="color: #f3d5c2;">Бахтияр</h2>
      <p class="mentor-card__position" style="color: #d04620;">Senior - разработчик</p>
      <p class="mentor-card__company" style="color: #b3afab;">Recoursia Solutions</p>
      <p class="mentor-card__experience" style="color: #b3afab;">опыт в сфере - 20 лет</p>
    </div>
  </div>

  <div class="mentor-card__hidden-content" style="color: #fff;">
    <p>Senior - разработчик с опытом работы в 20 лет. Обучил с нуля и трудоустроил многих ребят. Считает, что лучшая мотивация для ментора - это достижения его выпускников.</p>
  </div>
</div>

Создание карточек с информацией и аватарками

Ответы