Создание разметки для отображения списка пользователей

Условие

Разработать HTML/CSS разметку, позволяющую вывести на экран перечень пользователей. Для каждого пользователя необходимо отобразить: изображение‑аватар, имя, страну, пол, индикатор онлайн‑статуса, рейтинг, а также краткое описание с возможностью раскрыть полное содержание по запросу.

Ответ

Список удобно оформить через ul/li и article; подробное описание раскрывать нативным details/summary. Онлайн-статус и рейтинг должны иметь текстовое значение, а не только цвет.

<ul class="users"><li><article class="user-card">
  <img src="/avatars/example.jpg" alt="" width="64" height="64">
  <div><h2>Анна</h2><p>Страна: Россия · Пол: женский</p>
    <p><span class="online" aria-hidden="true">●</span> В сети · Рейтинг: 4,8 из 5</p>
    <p>Краткое описание пользователя.</p>
    <details><summary>Подробнее</summary><p>Дополнительная информация.</p></details>
  </div>
</article></li></ul>

.users { list-style: none; padding: 0; display: grid; gap: 1rem; }
.user-card { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem; border: 1px solid #ccc; }
.user-card img { border-radius: 50%; object-fit: cover; flex: none; }
.user-card > div { min-width: 0; overflow-wrap: anywhere; }
.online { color: #28763b; }
summary { cursor: pointer; }
summary:focus-visible { outline: 2px solid #365bc7; outline-offset: 3px; }

Данные и путь изображения здесь демонстрационные. Пустой alt у декоративного аватара не дублирует расположенное рядом имя. Пользовательский текст выводите как текст, не как доверенный HTML.