Загрузка данных

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
  margin: 0;
}

header, main, footer {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 400px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 5px solid white;
  margin-bottom: 10px;
}

.links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.btn {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  color: #333;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 15px;
  border-radius: 10px;
  text-align: center;
  text-decoration: none;
  transition: transform 0.2s, background 0.2s;
}

.btn:hover {
  transform: scale(1.03);
  background: rgba(255, 255, 255, 0.3);
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.social-icons a {
  color: #333;
  text-decoration: none;
  font-weight: bold;
}
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Визитка-мультиссылка</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <header>
    <img src="https://via.placeholder.com/100" class="avatar" alt="Avatar">
    <h1>Имя Брэнда</h1>
    <p>Короткое описание профиля (био)</p>
  </header>

  <main>
    <section class="links">
      <a href="#" class="btn">Ссылка 1</a>
      <a href="#" class="btn">Ссылка 2</a>
      <a href="#" class="btn">Ссылка 3</a>
      <a href="#" class="btn">Ссылка 4</a>
    </section>
  </main>

  <footer>
    <div class="social-icons">
      <a href="#">VK</a>
      <a href="#">TG</a>
      <a href="#">YT</a>
    </div>
  </footer>

</body>
</html>