[html]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Social Media Profile Mockup</title>
<style>
    body {
        font-family: Tahoma, sans-serif;
        background-color: #f0f0f0;
        margin: 0;
        padding: 20px;
    }
    .profile-container {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
        background-color: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
        display: flex;
    }
    .avatar-slider {
        position: relative;
        width: 300px;
        height: 300px;
        overflow: hidden;
        border-radius: 10px;
        margin-right: 20px;
    }
    .avatar-slider img {
        width: 100%;
        height: 100%;
        display: none;
        object-fit: cover;
    }
    .avatar-slider img.active {
        display: block;
    }
    .slider-controls {
        text-align: center;
        margin-top: 10px;
    }
    .slider-controls button {
        background-color: #57605d;
        color: white;
        border: none;
        padding: 10px 20px;
        margin: 5px;
        border-radius: 5px;
        cursor: pointer;
    }
    .slider-controls button:disabled {
        background-color: #cccccc;
    }
    .profile-info {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .profile-info h2 {
        margin: 10px 0;
        font-size: 24px;
    }
    .profile-info h3 {
        margin: 10px 0;
        font-size: 20px;
        color: #666;
    }
    .profile-info p {
        font-size: 16px;
        color: #555;
    }
    .profile-info p label {
        font-weight: bold;
    }
</style>
</head>
<body>
    <div class="profile-container">
        <div>
            <div class="avatar-slider">
                <img src="https://forumstatic.ru/files/001c/33/07/79576.jpg" alt="Avatar 1" class="active">
                <img src="https://forumstatic.ru/files/001c/33/07/30304.jpg" alt="Avatar 2">
                <img src="https://forumstatic.ru/files/001c/33/07/27233.png" alt="Avatar 3">
            </div>
            <div class="slider-controls">
                <button id="prevBtn"><<</button>
                <button id="nextBtn">>></button>
            </div>
        </div>
        <div class="profile-info">
            <h2 id="profileName">Нейтан Митчелл</h2>
            <h3 id="profileStatus">Reality is a illusion, the universe is a hologram, buy gold bye! b.c.</h3>
            <p><label>ДР:</label> <span id="profileDOB">11 апреля 2001</span></p>
            <p id="profileAbout">О себе: скейт, гулять пешком, мистика, тру крайм, фото, музыка, старое кино, рок 80-х и 90-х, граффити, старые тачки, шоу 90-х на MTV по ночам</p>
        </div>
    </div>

    <script>
        const avatars = document.querySelectorAll('.avatar-slider img');
        let currentAvatarIndex = 0;

        document.getElementById('prevBtn').addEventListener('click', () => {
            avatars[currentAvatarIndex].classList.remove('active');
            currentAvatarIndex = (currentAvatarIndex - 1 + avatars.length) % avatars.length;
            avatars[currentAvatarIndex].classList.add('active');
        });

        document.getElementById('nextBtn').addEventListener('click', () => {
            avatars[currentAvatarIndex].classList.remove('active');
            currentAvatarIndex = (currentAvatarIndex + 1) % avatars.length;
            avatars[currentAvatarIndex].classList.add('active');
        });
    </script>
</body>
</html>
[/html]