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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Моя визитка</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

<header>
    <h1>Михаил</h1>
    <p>Моя страница</p>
</header>

<main>
    <section class="card">

        <img src="avatar.jpg" class="avatar">

        <h2>Михаил Назаров</h2>

        <p>Начинающий веб-разработчик</p>

        <div class="buttons">
            <a href="#">Telegram</a>
            <a href="#">ВКонтакте</a>
            <a href="#">Мои работы</a>
            <a href="#">Портфолио</a>
        </div>

    </section>
</main>

<footer>
    <p>Telegram | VK | YouTube</p>
</footer>

</body>
</html>





body {
    margin: 0;
    font-family: Arial;
    text-align: center;
    color: white;
    background: linear-gradient(135deg, #667eea, #764ba2);
}

header {
    margin: 30px;
}

.card {
    width: 300px;
    margin: auto;
    padding: 25px;

    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;

    backdrop-filter: blur(10px);
}

.avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.buttons a {
    padding: 10px;
    color: white;
    text-decoration: none;

    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}

.buttons a:hover {
    background: rgba(255, 255, 255, 0.4);
}

footer {
    margin: 25px;
}