<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FutureLearn | 3D Interactive Portal</title>
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    <link href="https://fonts.googleapis.com/css2?family=Syncopate:wght@700&family=Inter:wght@300;500;700&display=swap" rel="stylesheet">

    <style>
        :root {
            --bg-color: #050505;
            --card-bg: #111111;
            --accent-color: #00f2ff;
            --text-main: #ffffff;
        }

        body {
            background-color: var(--bg-color);
            color: var(--text-main);
            font-family: 'Inter', sans-serif;
            overflow-x: hidden;
        }

        /* --- Animated Background Mesh --- */
        .mesh-bg {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: radial-gradient(circle at 50% 50%, #1a1a2e 0%, #050505 100%);
            z-index: -1;
        }

        /* --- 3D Tilt Card --- */
        .tilt-card {
            background: var(--card-bg);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 20px;
            transform-style: preserve-3d;
            transform: perspective(1000px);
            transition: border-color 0.3s ease;
        }

        .tilt-card:hover {
            border-color: var(--accent-color);
        }

        .course-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 15px;
            transform: translateZ(30px); /* Pops image out */
            box-shadow: 0 10px 20px rgba(0,0,0,0.5);
        }

        .course-title {
            font-family: 'Syncopate', sans-serif;
            font-size: 1.2rem;
            margin-top: 20px;
            transform: translateZ(50px); /* Pops text further out */
            color: var(--accent-color);
        }

        /* --- Progress Bar Animation --- */
        .progress {
            background: rgba(255,255,255,0.1);
            height: 6px;
            border-radius: 10px;
            margin: 15px 0;
            overflow: visible;
        }

        .progress-bar {
            background: var(--accent-color);
            box-shadow: 0 0 10px var(--accent-color);
            position: relative;
            animation: progressLoad 2s ease-in-out forwards;
        }

        @keyframes progressLoad {
            from { width: 0%; }
        }

        /* --- Floating Action Button --- */
        .btn-learn {
            background: transparent;
            border: 1px solid var(--accent-color);
            color: var(--accent-color);
            border-radius: 50px;
            padding: 8px 25px;
            font-weight: bold;
            transition: 0.4s;
            transform: translateZ(40px);
        }

        .btn-learn:hover {
            background: var(--accent-color);
            color: #000;
            box-shadow: 0 0 20px var(--accent-color);
        }

        .section-header {
            margin-bottom: 80px;
            text-transform: uppercase;
            letter-spacing: 5px;
        }
    </style>
</head>
<body>

<div class="mesh-bg"></div>

<div class="container py-5 mt-5">
    <div class="text-center section-header" data-aos="zoom-in">
        <h1 class="display-4 fw-bold">Available <span style="color: var(--accent-color);">Models</span></h1>
        <p class="text-muted">Select a path to begin your journey</p>
    </div>

    <div class="row g-5">
        <div class="col-lg-4 col-md-6" data-aos="fade-right" data-aos-delay="100">
            <div class="tilt-card" data-tilt data-tilt-max="15" data-tilt-speed="400" data-tilt-glare data-tilt-max-glare="0.3">
                <img src="https://images.unsplash.com/photo-1639762681485-074b7f938ba0?auto=format&fit=crop&w=800" class="course-image" alt="Web3">
                <h3 class="course-title">Web3 & Solidity</h3>
                <p class="small text-muted mt-2">Decentralize the future using blockchain technology.</p>
                <div class="progress">
                    <div class="progress-bar" style="width: 75%;"></div>
                </div>
                <div class="d-flex justify-content-between align-items-center mt-3">
                    <span class="text-white-50 small">12 Modules</span>
                    <button class="btn btn-learn">Start</button>
                </div>
            </div>
        </div>

        <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200">
            <div class="tilt-card" data-tilt data-tilt-max="15" data-tilt-glare data-tilt-max-glare="0.3">
                <img src="https://images.unsplash.com/photo-1614741118887-7a4ee193a5fa?auto=format&fit=crop&w=800" class="course-image" alt="Python">
                <h3 class="course-title">Python for AI</h3>
                <p class="small text-muted mt-2">Build neural networks from the ground up.</p>
                <div class="progress">
                    <div class="progress-bar" style="width: 40%;"></div>
                </div>
                <div class="d-flex justify-content-between align-items-center mt-3">
                    <span class="text-white-50 small">20 Modules</span>
                    <button class="btn btn-learn">Start</button>
                </div>
            </div>
        </div>

        <div class="col-lg-4 col-md-6" data-aos="fade-left" data-aos-delay="300">
            <div class="tilt-card" data-tilt data-tilt-max="15" data-tilt-glare data-tilt-max-glare="0.3">
                <img src="https://images.unsplash.com/photo-1633356122544-f134324a6cee?auto=format&fit=crop&w=800" class="course-image" alt="UIUX">
                <h3 class="course-title">Cyber Security</h3>
                <p class="small text-muted mt-2">Protect digital assets from global threats.</p>
                <div class="progress">
                    <div class="progress-bar" style="width: 90%;"></div>
                </div>
                <div class="d-flex justify-content-between align-items-center mt-3">
                    <span class="text-white-50 small">15 Modules</span>
                    <button class="btn btn-learn">Start</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.min.js"></script>

<script>
    // 1. Initialize Scroll Animations
    AOS.init({
        duration: 1200,
        once: false,
    });

    // 2. VanillaTilt is initialized via the 'data-tilt' attribute in HTML.
    // It creates the 3D follow-mouse effect.
</script>

</body>
</html>