Skip to content

Instantly share code, notes, and snippets.

@abruzzi

abruzzi/bio.html

Created August 27, 2022 01:02
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save abruzzi/821a8d25fb3ee0910d1623b5c7e27e7b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save abruzzi/821a8d25fb3ee0910d1623b5c7e27e7b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
bio.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Week 1</title>
</head>
<body>
<!-- our code goes here -->
</body>
</html>
@ghostlydarkness10-star
Copy link
Copy Markdown

ghostlydarkness10-star commented Mar 16, 2026

<title>Steam — сын кассирши</title> <script src="https://cdn.tailwindcss.com"></script> <style> @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); 
    body {
        font-family: 'Roboto', system-ui, sans-serif;
        background: #1b2838;
    }
    
    .steam-header {
        background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.85)), 
                    url('https://picsum.photos/id/1015/1920/1080') center/cover no-repeat;
        height: 420px;
        position: relative;
    }
    
    .avatar-border {
        border: 4px solid #66c0f4;
        box-shadow: 0 0 20px rgba(102, 192, 244, 0.5);
    }
    
    .steam-text {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    }
    
    .info-box {
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(8px);
    }
    
    .valve-footer {
        font-size: 11px;
        color: #6d7c8b;
    }
</style>
Онлайн: 8:00–23:00
<!-- Главный профиль (как на твоих скриншотах) -->
<div class="steam-header">
    <!-- Аватар + имя -->
    <div class="absolute bottom-12 left-8 flex items-end gap-6">
        <div class="avatar-border w-40 h-40 rounded overflow-hidden bg-black p-1">
            <img id="avatar" src="https://picsum.photos/id/64/400/400" alt="Аватар" 
                 class="w-full h-full object-cover rounded">
        </div>
        
        <div>
            <h1 class="text-6xl font-bold steam-text">сын кассирши</h1>
            <div class="text-3xl text-gray-300 mt-1">Никита</div>
            
            <!-- Статус онлайн -->
            <div class="flex items-center gap-3 mt-3">
                <div class="flex items-center gap-2 bg-[#2a475e] px-5 py-2 rounded-full">
                    <div class="w-4 h-4 bg-green-400 rounded-full animate-pulse"></div>
                    <span class="text-green-400 font-medium">В сети (8:00–23:00)</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Правая панель с инфой (как в первом скриншоте) -->
    <div class="info-box absolute bottom-12 right-8 w-80 p-6 rounded-xl text-sm">
        <div class="space-y-4">
            <div class="flex justify-between items-center">
                <span class="text-[#66c0f4]">Страна</span>
                <span class="font-medium">Россия</span>
            </div>
            <div class="flex justify-between items-center">
                <span class="text-[#66c0f4]">Город</span>
                <span class="font-medium">Санкт-Петербург</span>
            </div>
            <div class="flex justify-between items-center">
                <span class="text-[#66c0f4]">Возраст</span>
                <span class="font-medium">15</span>
            </div>
            <div class="h-px bg-[#2a475e]"></div>
            <div class="flex justify-between items-center">
                <span class="text-[#66c0f4]">South</span>
                <span class="font-mono text-green-400">axiwoIzss</span>
            </div>
        </div>
        
        <!-- Фейковый уровень как в первом скриншоте -->
        <div class="mt-6 flex items-center justify-center gap-3 border-t border-[#2a475e] pt-4">
            <div class="text-[#66c0f4] text-xs">LEVEL</div>
            <div class="text-5xl font-bold text-[#66c0f4]">15</div>
        </div>
    </div>

    <!-- Большое центральное изображение (как во втором скриншоте) -->
    <div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-[620px] h-64 bg-black/90 border border-[#66c0f4]/30 rounded-t-xl overflow-hidden shadow-2xl">
        <img id="featured" src="https://picsum.photos/id/201/800/400" alt="Фон профиля" 
             class="w-full h-full object-cover opacity-80">
        <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent flex items-end p-6">
            <div class="text-xs text-gray-400">Пример арта профиля (замени на свой)</div>
        </div>
    </div>
</div>

<!-- Нижняя часть профиля -->
<div class="max-w-6xl mx-auto px-8 py-12 grid grid-cols-1 lg:grid-cols-12 gap-8">
    <!-- Левая колонка (био) -->
    <div class="lg:col-span-8">
        <div class="bg-[#2a475e] rounded-2xl p-8">
            <h2 class="text-[#66c0f4] text-2xl font-bold mb-6">Обо мне</h2>
            <p class="text-gray-300 leading-relaxed text-lg">
                Привет! Это мой кастомный Steam-профиль.<br>
                Никита, 15 лет, Санкт-Петербург, Россия.<br><br>
                Добавь сюда своё описание — я оставил место для текста.
            </p>
            
            <!-- Можно добавить сюда свои скриншоты или арты как в твоих фото -->
            <div class="mt-10 grid grid-cols-3 gap-4">
                <div class="aspect-video bg-black rounded-lg overflow-hidden border border-[#66c0f4]/20">
                    <img src="https://picsum.photos/id/237/400/225" class="w-full h-full object-cover">
                </div>
                <div class="aspect-video bg-black rounded-lg overflow-hidden border border-[#66c0f4]/20">
                    <img src="https://picsum.photos/id/29/400/225" class="w-full h-full object-cover">
                </div>
                <div class="aspect-video bg-black rounded-lg overflow-hidden border border-[#66c0f4]/20">
                    <img src="https://picsum.photos/id/160/400/225" class="w-full h-full object-cover">
                </div>
            </div>
        </div>
    </div>

    <!-- Правая колонка (группа как в первом скриншоте) -->
    <div class="lg:col-span-4">
        <div class="bg-[#2a475e] rounded-2xl p-8">
            <div class="flex items-center gap-4">
                <div class="w-12 h-12 bg-white text-black font-black text-5xl flex items-center justify-center rounded">W</div>
                <div>
                    <div class="font-bold text-xl">сын кассирши's Group</div>
                    <div class="text-xs text-green-400">Public Group</div>
                </div>
            </div>
            
            <div class="mt-10 grid grid-cols-2 gap-6 text-center">
                <div>
                    <div class="text-4xl font-bold text-[#66c0f4]">993</div>
                    <div class="text-xs text-gray-400">Members</div>
                </div>
                <div>
                    <div class="text-4xl font-bold text-[#66c0f4]">240</div>
                    <div class="text-xs text-gray-400">Online</div>
                </div>
            </div>
            
            <a href="#" 
               class="mt-8 block text-center bg-[#66c0f4] hover:bg-[#1b8ac2] text-black font-bold py-3 rounded text-sm transition">
                ПРИСОЕДИНИТЬСЯ К ГРУППЕ
            </a>
        </div>
    </div>
</div>

<!-- Footer точно как во втором скриншоте -->
<footer class="valve-footer bg-black py-10 border-t border-[#2a475e]">
    <div class="max-w-6xl mx-auto px-8 text-center">
        <div class="flex justify-center mb-6">
            <div class="bg-white text-black font-bold text-4xl px-8 py-1 tracking-widest">VALVE</div>
        </div>
        <p>© Valve Corporation. Все права сохранены. Все торговые марки являются собственностью соответствующих владельцев.</p>
        <p class="mt-3">Часть географических сведений на этом сайте предоставлена geonames.org</p>
        <div class="mt-6 flex justify-center gap-8 text-xs">
            <a href="#" class="hover:text-white">Политика конфиденциальности</a>
            <a href="#" class="hover:text-white">Правовая информация</a>
            <a href="#" class="hover:text-white">Доступность</a>
            <a href="#" class="hover:text-white">Соглашение подписки</a>
        </div>
    </div>
</footer>

<script>
    // Инициализация Tailwind
    tailwind.config = {
        content: [],
        theme: {
            extend: {}
        }
    }
    
    // Подсказка для пользователя (можно удалить)
    console.log('%c✅ Профиль готов! Замени ссылки на изображения в коде (avatar и featured) на свои.', 
                'color:#66c0f4; font-size:14px');
</script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment