t<title>AI Influencer Profile - T3chSh0! (Techshot)</title>
    <style>
        /* Base page styling - Soft Teal & Crisp White palette */
        :root {
            --teal-primary: #00a896;
            --teal-dark: #028090;
            --teal-light: #e0f2f1;
            --teal-accent: #80deea;
            --white: #ffffff;
            --text-dark: #2d3748;
            --text-muted: #4a5568;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            /* 2. Using provided teal pattern background image for the page */
            background-image: url('image_af0043.jpg');
            background-attachment: fixed;
            background-size: cover;
            background-position: center;
            color: var(--text-dark);
            line-height: 1.6;
        }

        /* Hero Header banner */
        .header-bg {
            background: linear-gradient(135deg, rgba(0, 168, 150, 0.85), rgba(2, 128, 144, 0.9)), url('image_af0043.jpg');
            background-size: cover;
            background-position: center;
            padding: 40px 20px 30px 20px;
            text-align: center;
            color: var(--white);
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        .header-container {
            max-width: 800px;
            margin: 0 auto;
        }

        /* Avatar Container with Frame Overlay */
        .avatar-frame-wrapper {
            position: relative;
            width: 180px;
            height: 180px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Inner Avatar Picture */
        .profile-avatar {
            width: 130px;
            height: 130px;
            border-radius: 50%;
            object-fit: cover;
            position: absolute;
            z-index: 1;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
            background-color: var(--teal-light);
        }

        /* Outer Gear Frame Image */
        .avatar-frame {
            width: 180px;
            height: 180px;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
            pointer-events: none;
            transition: transform 0.3s ease;
        }

        .avatar-frame-wrapper:hover .avatar-frame {
            transform: rotate(5deg) scale(1.03);
        }

        h1 {
            margin: 15px 0 5px 0;
            font-size: 34px;
            color: var(--white);
            font-weight: 700;
            letter-spacing: 0.5px;
        }

        .tagline {
            font-size: 16px;
            color: var(--teal-light);
            margin: 0;
            font-weight: 500;
        }

        /* Main Container */
        .container {
            max-width: 900px;
            margin: -20px auto 40px auto;
            padding: 0 20px;
            position: relative;
            z-index: 10;
        }

        /* White Cards with Teal accents */
        .card {
            background-color: rgba(255, 255, 255, 0.96);
            backdrop-filter: blur(5px);
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 168, 150, 0.15);
            margin-bottom: 30px;
            border: 1px solid rgba(255, 255, 255, 0.8);
        }

        .card h2 {
            margin-top: 0;
            color: var(--teal-dark);
            font-size: 24px;
            border-bottom: 3px solid var(--teal-primary);
            padding-bottom: 8px;
            display: inline-block;
        }

        /* Gallery Grid */
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        .gallery-item {
            background: var(--white);
            border: 2px solid var(--teal-light);
            border-radius: 10px;
            overflow: hidden;
            text-align: center;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }

        .gallery-item:hover {
            transform: translateY(-4px);
            border-color: var(--teal-primary);
            box-shadow: 0 8px 16px rgba(0, 168, 150, 0.2);
        }

        .gallery-item img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            display: block;
        }

        .gallery-item-caption {
            padding: 15px;
        }

        .gallery-item-caption h3 {
            margin: 0 0 5px 0;
            font-size: 16px;
            color: var(--teal-dark);
        }

        .gallery-item-caption p {
            margin: 0;
            font-size: 13px;
            color: var(--text-muted);
        }

        /* Clickable Link Styling */
        .clickable-link {
            display: block;
            text-decoration: none;
            color: inherit;
        }

        .badge {
            display: inline-block;
            background-color: var(--teal-primary);
            color: var(--white);
            font-size: 12px;
            font-weight: 600;
            padding: 4px 10px;
            border-radius: 20px;
            margin-top: 8px;
        }

        /* Simple Navigation Bar */
        .navbar {
            background-color: var(--white);
            border-radius: 30px;
            padding: 10px 25px;
            display: flex;
            justify-content: center;
            gap: 25px;
            box-shadow: 0 2px 10px rgba(0, 168, 150, 0.1);
            margin-bottom: 25px;
        }

        .navbar a {
            color: var(--teal-dark);
            text-decoration: none;
            font-weight: 600;
            font-size: 14px;
            transition: color 0.2s;
        }

        .navbar a:hover {
            color: var(--teal-primary);
        }

        /* Footer */
        footer {
            text-align: center;
            padding: 20px;
            background-color: var(--white);
            color: var(--teal-dark);
            font-size: 14px;
            font-weight: 500;
            border-top: 2px solid var(--teal-light);
        }
    </style>
</head>
<body>

    <!-- 1 & 2. Header with teal gradient overlay and background graphic -->
    <header class="header-bg">
        <div class="header-container">
            <!-- Avatar picture layered inside the gear frame -->
            <div class="avatar-frame-wrapper">
                <img 
                    src="bfea28_S_GY_LpeSTuBhNAt44UqaQ_20260919154954147510.jpg" 
                    alt="T3chSh0! Avatar Image" 
                    title="T3chSh0! (Techshot) Avatar" 
                    width="130" 
                    height="130" 
                    class="profile-avatar"
                    onerror="this.onerror=null; this.src='https://placehold.co/130x130/028090/ffffff?text=T3chSh0!';"
                >
                <img 
                    src="image_af00c3.jpg" 
                    alt="Gear and Ribbon Avatar Frame" 
                    title="T3chSh0! Custom Avatar Frame" 
                    width="180" 
                    height="180" 
                    class="avatar-frame"
                    onerror="this.onerror=null; this.style.display='none';"
                >
            </div>

            <!-- 6. Heading 1 for Influencer Name -->
            <h1>T3chSh0! (Techshot)</h1>
            <p class="tagline">Digital Creator &amp; Cyber-Aesthetic Vlogger</p>
        </div>
    </header>

    <div class="container">
        <!-- Navigation bar -->
        <nav class="navbar">
            <a href="#about">About</a>
            <a href="#gallery">Gallery</a>
            <a href="#fan-page">Fan Zone</a>
        </nav>

        <!-- 6. Short intro paragraph introducing T3chSh0! -->
        <section class="card" id="about">
            <h2>Welcome to My World!</h2>
            <p>
                Hey everyone! I'm <strong>T3chSh0!</strong> (Techshot), a futuristic virtual creator, cyber-artist, and tech visionary. Equipped with my custom gear frame visor, I capture high-tech moments, share virtual vlog episodes, design cyber artwork, and explore the best tech hotspots in 2050. Check out my latest content below and join the squad!
            </p>
        </section>

        <!-- 4. Lifestyle Gallery with at least 3 images and standard attributes -->
        <section class="card" id="gallery">
            <h2>Lifestyle &amp; Moments</h2>
            
            <div class="gallery-grid">
                
                <!-- Image 1: Clickable Link (Requirement 5) -->
                <div class="gallery-item">
                    <a href="https://youtube.com" target="_blank" rel="noopener" class="clickable-link">
                        <img 
                            src="https://images.unsplash.com/photo-1546776310-eef45dd6d63c?auto=format&fit=crop&w=500&q=80" 
                            alt="T3chSh0! with her robotic pet companion" 
                            title="Click to watch T3chSh0!'s Pet Stream on Youtube!" 
                            width="260" 
                            height="200"
                            onerror="this.onerror=null; this.src='https://placehold.co/500x350/00a896/ffffff?text=Cyber+Pet+Companion';"
                        >
                        <div class="gallery-item-caption">
                            <h3>1. Cyber Pet Companion</h3>
                            <p>Morning walks with my robotic assistant dog.</p>
                            <span class="badge">▶ Click to Watch Video</span>
                        </div>
                    </a>
                </div>

                <!-- Image 2 -->
                <div class="gallery-item">
                    <img 
                        src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=500&q=80" 
                        alt="Teal themed modern holographic cafe" 
                        title="Teal Holographic Lounge" 
                        width="260" 
                        height="200"
                        onerror="this.onerror=null; this.src='https://placehold.co/500x350/028090/ffffff?text=Holographic+Cafe';"
                    >
                    <div class="gallery-item-caption">
                        <h3>2. Holographic Cafe</h3>
                        <p>Enjoying afternoon matcha at the local digital lounge.</p>
                    </div>
                </div>

                <!-- Image 3 -->
                <div class="gallery-item">
                    <img 
                        src="https://images.unsplash.com/photo-1515378791036-0648a3ef77b2?auto=format&fit=crop&w=500&q=80" 
                        alt="T3chSh0!'s digital creative workstation setup" 
                        title="T3chSh0!'s Studio Workstation" 
                        width="260" 
                        height="200"
                        onerror="this.onerror=null; this.src='https://placehold.co/500x350/00a896/ffffff?text=Creative+Studio';"
                    >
                    <div class="gallery-item-caption">
                        <h3>3. Creative Studio</h3>
                        <p>Designing digital art and editing vlogs in my studio.</p>
                    </div>
                </div>

            </div>
        </section>
    </div>

    <footer>
        <p>&copy; 2050 T3chSh0! (Techshot) Official Profile. Designed with clean Teal &amp; White HTML layout.</p>
    </footer>

</body>
</html>