Как сверстать такую небольную карточку?

Question

Подобное интересует. На CSS и HTML.

Понимаю, что просто, но не совсем у меня получается это сделать

       /* Socials */
.socials__links {
    display: flex;
    justify-content: space-between;
}

.socials__item {
    width: 263px;
    height: 350px;
    background-color: #313131;
    border-radius: 30px;
    box-sizing: border-box;
    
}

.socials__img {
    display: block;
    align: center;
    object-fit: cover;
}

.socials__text {
    font-size: 30px;
    color: #fff;
    font-weight: 600;
    text-align: center;
    margin-top: 20px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <script src="popup-test.js"></script>

</head>
   <body>
           <div class='socials__links'>
                <div class="socials__item">
                    <h5 class=socials__text>Discord</h5>
                    <div class="socials__img">
                        <img src='../images/discord.png'>
                    </div>
                </div>
</body>
</html>

Answer 1

Ну типо

body {
  background: #282828;
}

.card {
  display: block;
  width: 100%;
  max-width: 250px;
  border-radius: 15px;
  background: #313131;
  color: #fff;
  padding: 1.5em 1em;
  box-sizing: border-box;
}

.card__title {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 150%;
  font-weight: bold;
}

.card__img {
  display: block;
  width: 100%;
  margin: 40px 0;
}

.card__img img {
  display: block;
  width: 100%;
  max-width: 100px;
  max-height: 100px;
  border-radius: 50%;
  margin: 0 auto;
  border: 0;
}

.card__link {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 150%;
}

.card__link a {
  color: inherit;
  text-decoration: none;
}

<div class="card">
  <div class="card__title">Discord</div>
  <div class="card__img">
    <img src="//i.imgur.com/FJqLFEj.png"/>
  </div>
  <div class="card__link">
    <a href="#">Инвайт!</a>
  </div>
</div>

Answer 2

Можете попробовать так

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: #000;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  width: 300px;
  height: 400px;
  margin: 20px auto;
  border-radius: 10px;
  background-color: #282828;

}

.label {
  font-size: 32px;
  color: #fff;
}

.round {
  width: 100px;
  height: 100px;
}

.round img {
width: 100%;
height: 100%;
border-radius: 50%;
}

<div class="card">
  <p class="label"><b>Discord</b></p>
  <div class="round">
  <img src="//i.imgur.com/FJqLFEj.png"/>
  </div>
  <p class="label">Инвайт!</p>
</div>

БЛОГ НА HUSL

Как сверстать такую небольную карточку?

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