s://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.cssYIMBUH>
    <style>
        :root {
            --primary: #4CAF50;
            --secondary: #2196F3;
            --dark: hsl(0, 0%, 20%);
            --light: #f5f5f5;
        }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
            background-color: var(--light);
            color: var(--dark);
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 15px rgba(0,0,0,0.1);
        }
        header {
            text-align: center;
            padding: 20px 0;
            border-bottom: 2px solid var(--primary);
            margin-bottom: 30px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            border-radius: 8px;
        }
        h1, h2, h3 {
            color: var(--primary);
        }
        header h1, header h2 {
            color: white;
        }
        .datetime {
            text-align: right;
            font-size: 1.1em;
            margin-bottom: 20px;
            color: #666;
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        .progress-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 30px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .progress-table th, .progress-table td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
            transition: all 0.3s ease;
        }
        .progress-table th {
            background-color: var(--primary);
            color: white;
            position: sticky;
            top: 0;
        }
        .progress-table tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        .progress-table tr:hover {
            background-color: #ddd;
            transform: scale(1.02);
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .progress-table a {
            text-decoration: none;
            color: inherit;
            display: block;
        }
        .status-complete {
            color: #4CAF50;
            font-weight: bold;
        }
        .status-inprogress {
            color: #FFC107;
            font-weight: bold;
        }
        .status-notstarted {
            color: #F44336;
            font-weight: bold;
        }
        .student-profiles {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-top: 30px;
            justify-content: center;
        }
        .profile-card {
            width: 200px;
            border: 1px solid #ddd;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            transition: all 0.5s ease;
            animation: float 3s infinite ease-in-out;
        }
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
        .profile-img {
            width: 100%;
            height: 150px;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        .profile-card:hover .profile-img {
            transform: scale(1.1);
        }
        .profile-info {
            padding: 15px;
            text-align: center;
            background: white;
        }
        .tool-slider {
            margin: 40px 0;
            overflow: hidden;
            position: relative;
            height: 120px;
            background: rgba(0,0,0,0.03);
            border-radius: 8px;
        }
        .tool-slider-inner {
            display: flex;
            animation: slide 20s linear infinite;
            width: calc(250px * 14);
        }
        @keyframes slide {
            0% { transform: translateX(0); }
            100% { transform: translateX(calc(-250px * 7)); }
        }
        .tool-item {
            width: 200px;
            margin: 0 25px;
            text-align: center;
            transition: all 0.3s ease;
        }
        .tool-item img {
            height: 60px;
            width: auto;
            margin-bottom: 10px;
            filter: grayscale(30%);
            transition: all 0.3s ease;
        }
        .tool-item:hover img {
            filter: grayscale(0%);
            transform: scale(1.2);
        }
        .program-info {
            background: #f9f9f9;
            padding: 25px;
            border-radius: 8px;
            margin: 30px 0;
            border-left: 5px solid var(--primary);
        }
        .enrollment-form {
            background: white;
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 0 15px rgba(0,0,0,0.1);
            margin: 30px 0;
        }
        .enrollment-form label {
            display: block;
            margin-bottom: 15px;
            font-weight: bold;
        }
        .enrollment-form input,
        .enrollment-form textarea,
        .enrollment-form select {
            width: 100%;
            padding: 10px;
            margin-top: 5px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-family: inherit;
        }
        .enrollment-form textarea {
            height: 100px;
        }
        .enrollment-form button {
            background: var(--primary);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: all 0.3s ease;
        }
        .enrollment-form button:hover {
            background: #45a049;
            transform: translateY(-2px);
            box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        }
        footer {
            text-align: center;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #ddd;
            color: #666;
        }
        .floating-btn {
            position: fixed;
            bottom: 30px;
            right: 30px;
            background: var(--primary);
            color: white;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            cursor: pointer;
            z-index: 100;
            transition: all 0.3s ease;
            animation: pulse 2s infinite;
        }
        .floating-btn:hover {
            transform: scale(1.1) rotate(15deg);
            background: #45a049;
        }
    </style>
</head>
<body>
    <div class=YIMBUHcontainerYIMBUH>
        <header>
            <h1>Welcome To Hangout Platform</h1>
            <h2>Free Energy Cohourt</h2>
        </header>

        <div class=YIMBUHdatetimeYIMBUH id=YIMBUHdatetimeYIMBUH></div>

        <div class=YIMBUHprogram-infoYIMBUH>
            <h2>About Our Hangout Program</h2>
            <p>The hangout Is For LionTech DevOps and Cloud Engineers to fellowship together while adding value in a comprehensive 3 days workshop intensive training designed to transform beginners into job-ready cloud professionals. Our curriculum covers:</p>
            <ul>
                <li>Linux System Administration</li>
                <li>Python and Bash Shell Scripting</li>
                <li>Resume and Linkedin Review</li>
                <li>Github Actions</li>
                <li>Networking Fundamentals</li>
                <li>Containerization with Docker</li>
                <li>Orchestration with Kubernetes</li>
                <li>Grafana and slacks</li>
                <li>Resume and linkedin reviews</li>
                <li>python and bash Scripting</li>
                <li>Cloud Platforms (AWS, Azure, GCP)</li>
                <li>CI/CD Pipelines</li>
                <li>Infrastructure as Code (Terraform)</li>
                <li>Monitoring and Logging</li>
            </ul>
            <p>Our hands-on approach ensures students work on real-world projects and graduate with a professional portfolio.</p>
        </div>

        <h2>DevOps Tool Stack</h2>
        <div class=YIMBUHtool-sliderYIMBUH>
            <div class=YIMBUHtool-slider-innerYIMBUH>
                <div class=YIMBUHtool-itemYIMBUH>
                    <img src=Engineer Foncham/images/tools/docker.pngYIMBUH alt=YIMBUHDockerYIMBUH>
                    <p>Docker</p>
                </div>
                <div class=YIMBUHtool-itemYIMBUH>
                    <img src=Engineer Foncham/images/tools/kubernetes.pngYIMBUH alt=YIMBUHKubernetesYIMBUH>
                    <p>Kubernetes</p>
                </div>
                <div class=YIMBUHtool-itemYIMBUH>
                    <img src=Engineer Foncham/images/tools/aws.pngYIMBUH alt=YIMBUHAWSYIMBUH>
                    <p>AWS</p>
                </div>
                <div class=YIMBUHtool-itemYIMBUH>
                    <img src=Engineer Foncham/images/tools/terraform.pngYIMBUH alt=YIMBUHTerraformYIMBUH>
                    <p>Terraform</p>
                </div>
                <div class=YIMBUHtool-itemYIMBUH>
                    <img src=Engineer Foncham/images/tools/jenkins.pngYIMBUH alt=YIMBUHJenkinsYIMBUH>
                    <p>Jenkins</p>
                </div>
                <div class=YIMBUHtool-itemYIMBUH>
                    <img src=Engineer Foncham/images/tools/git.pngYIMBUH alt=YIMBUHGitYIMBUH>
                    <p>Git</p>
                </div>
                <div class=YIMBUHtool-itemYIMBUH>
                    <img src=Engineer Foncham/images/tools/ansible.pngYIMBUH alt=YIMBUHAnsibleYIMBUH>
                    <p>Ansible</p>
                </div>
                <div class=YIMBUHtool-itemYIMBUH>
                    <img src=Engineer Foncham/images/tools/docker.pngYIMBUH alt=YIMBUHDockerYIMBUH>
                    <p>Docker</p>
                </div>
                <div class=YIMBUHtool-itemYIMBUH>
                    <img src=Engineer Foncham/images/tools/kubernetes.pngYIMBUH alt=YIMBUHKubernetesYIMBUH>
                    <p>Kubernetes</p>
                </div>
                <div class=YIMBUHtool-itemYIMBUH>
                    <img src=Engineer Foncham/images/tools/aws.pngYIMBUH alt=YIMBUHAWSYIMBUH>
                    <p>AWS</p>
                </div>
                <div class=YIMBUHtool-itemYIMBUH>
                    <img src=Engineer Foncham/images/tools/terraform.pngYIMBUH alt=YIMBUHTerraformYIMBUH>
                    <p>Terraform</p>
                </div>
                <div class=YIMBUHtool-itemYIMBUH>
                    <img src=Engineer Foncham/images/tools/jenkins.pngYIMBUH alt=YIMBUHJenkinsYIMBUH>
                    <p>Jenkins</p>
                </div>
                <div class=YIMBUHtool-itemYIMBUH>
                    <img src=Engineer Foncham/images/tools/git.pngYIMBUH alt=YIMBUHGitYIMBUH>
                    <p>Git</p>
                </div>
                <div class=YIMBUHtool-itemYIMBUH>
                    <img src=Engineer Foncham/images/tools/ansible.pngYIMBUH alt=YIMBUHAnsibleYIMBUH>
                    <p>Ansible</p>
                </div>
            </div>
        </div>

        <h2>Learning Progress</h2>
        <table class=YIMBUHprogress-tableYIMBUH>
            <thead>
                <tr>
                    <th>Student Name</th>
                    <th>Linux Fundamentals</th>
                    <th>Networking</th>
                    <th>Docker</th>
                    <th>Kubernetes</th>
                    <th>AWS Cloud</th>
                    <th>CI/CD Pipelines</th>
                    <th>Monitoring</th>
                    <th>Current Status</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><a href=Engineer Foncham#alexYIMBUH>Wadinga Denis</a></td>
                    <td class=YIMBUHstatus-completeYIMBUH>Completed</td>
                    <td class=YIMBUHstatus-completeYIMBUH>Completed</td>
                    <td class=YIMBUHstatus-completeYIMBUH>Completed</td>
                    <td class=YIMBUHstatus-inprogressYIMBUH>In Progress</td>
                    <td class=YIMBUHstatus-notstartedYIMBUH>Not Started</td>
                    <td class=YIMBUHstatus-notstartedYIMBUH>Not Started</td>
                    <td class=YIMBUHstatus-notstartedYIMBUH>Not Started</td>
                    <td>Working on Kubernetes deployments</td>
                </tr>
                <tr>
                    <td><a href=Engineer Foncham#sarahYIMBUH>Sarah Williams</a></td>
                    <td class=YIMBUHstatus-completeYIMBUH>Completed</td>
                    <td class=YIMBUHstatus-completeYIMBUH>Completed</td>
                    <td class=YIMBUHstatus-completeYIMBUH>Completed</td>
                    <td class=YIMBUHstatus-completeYIMBUH>Completed</td>
                    <td class=YIMBUHstatus-inprogressYIMBUH>In Progress</td>
                    <td class=YIMBUHstatus-notstartedYIMBUH>Not Started</td>
                    <td class=YIMBUHstatus-notstartedYIMBUH>Not Started</td>
                    <td>Learning Kubernetes, AWS EC2, S3, VPD and LB Kubernetes</td>
                </tr>
                <tr>
                    <td><a href=Engineer Foncham#prof princeYIMBUH>prof prince Brown</a></td>
                    <td class=YIMBUHstatus-completeYIMBUH>Completed</td>
                    <td class=YIMBUHstatus-completeYIMBUH>Completed</td>
                    <td class=YIMBUHstatus-inprogressYIMBUH>In Progress</td>
                    <td class=YIMBUHstatus-notstartedYIMBUH>Not Started</td>
                    <td class=YIMBUHstatus-notstartedYIMBUH>Not Started</td>
                    <td class=YIMBUHstatus-notstartedYIMBUH>Not Started</td>
                    <td class=YIMBUHstatus-notstartedYIMBUH>Not Started</td>
                    <td>Working on Docker containers, learning AWS</td>
                </tr>
                <tr>
                    <td><a href=YIMBUHChiemezieYIMBUH>#Chiemezie Nwite</a></td>
                    <td class=YIMBUHstatus-completeYIMBUH>Completed</td>
                    <td class=YIMBUHstatus-completeYIMBUH>Completed</td>
                    <td class=YIMBUHstatus-inprogressYIMBUH>In Progress</td>
                    <td class=YIMBUHstatus-notstartedYIMBUH>Not Started</td>
                    <td class=YIMBUHstatus-notstartedYIMBUH>Not Started</td>
                    <td class=YIMBUHstatus-notstartedYIMBUH>Not Started</td>
                    <td class=YIMBUHstatus-notstartedYIMBUH>Not Started</td>
                    <td>Working on Docker containers</td>
                </tr>
                <tr>
                    <td><a href=Engineer Foncham#emilyYIMBUH>LionTech</a></td>
                    <td class=YIMBUHstatus-completeYIMBUH>Completed</td>
                    <td class=YIMBUHstatus-inprogressYIMBUH>In Progress</td>
                    <td class=YIMBUHstatus-notstartedYIMBUH>Not Started</td>
                    <td class=YIMBUHstatus-notstartedYIMBUH>Not Started</td>
                    <td class=YIMBUHstatus-notstartedYIMBUH>Not Started</td>
                    <td class=YIMBUHstatus-notstartedYIMBUH>Not Started</td>
                    <td class=YIMBUHstatus-notstartedYIMBUH>Not Started</td>
                    <td>Learning Networking concepts</td>
                </tr>
                
                <tr>
                    <td><a href=Engineer Foncham#IsraelYIMBUH>Emily Davis</a></td>
                    <td class=YIMBUHstatus-completeYIMBUH>Completed</td>
                    <td class=YIMBUHstatus-inprogressYIMBUH>In Progress</td>
                    <td class=YIMBUHstatus-notstartedYIMBUH>Not Started</td>
                    <td class=YIMBUHstatus-notstartedYIMBUH>Not Started</td>
                    <td class=YIMBUHstatus-notstartedYIMBUH>Not Started</td>
                    <td class=YIMBUHstatus-notstartedYIMBUH>Not Started</td>
                    <td class=YIMBUHstatus-notstartedYIMBUH>Not Started</td>
                    <td>Learning Networking concepts</td>
                </tr>
            </tbody>
        </table>

        <h2>Student Profiles</h2>
        <div class=YIMBUHstudent-profilesYIMBUH>
            <div class=YIMBUHprofile-cardYIMBUH id=YIMBUHDenisYIMBUH>
                <img src=Engineer Foncham/images/students/alex.jpgYIMBUH alt=YIMBUHWadinga Denis.Engineer Foncham class=YIMBUHprofile-imgYIMBUH>
                <div class=YIMBUHprofile-infoYIMBUH>
                    <h3>Wadinga Denis</h3>
                    <p><i class=YIMBUHfas fa-codeYIMBUH></i> Current: Kubernetes</p>
                    <p><i class=YIMBUHfas fa-tasksYIMBUH></i> 75% Complete</p>
                    <p><i class=YIMBUHfas fa-calendar-altYIMBUH></i> Joined: Jan 2025</p>
                </div>
            </div>
             <h2>Student Profiles</h2>
        <div class=YIMBUHstudent-profilesYIMBUH>
            <div class=YIMBUHprofile-cardYIMBUH id=YIMBUHChiemezieYIMBUH>
                <img src=Engineer Foncham/images/students/Chiemezie.jpgYIMBUH alt=YIMBUHChiemezie NwiteYIMBUH class=YIMBUHprofile-imgYIMBUH>
                <div class=YIMBUHprofile-infoYIMBUH>
                    <h3>Chiemezie Nwite</h3>
                    <p><i class=YIMBUHfas fa-codeYIMBUH></i> Current: Kubernetes</p>
                    <p><i class=YIMBUHfas fa-tasksYIMBUH></i> 75% Complete</p>
                    <p><i class=YIMBUHfas fa-calendar-altYIMBUH></i> Joined: Jan 2025</p>
                </div>
            </div>
            <div class=YIMBUHprofile-cardYIMBUH id=YIMBUHsarahYIMBUH>
                <img src=Engineer Foncham/images/students/sarah.jpgYIMBUH alt=YIMBUHSarah WilliamsYIMBUH class=YIMBUHprofile-imgYIMBUH>
                <div class=YIMBUHprofile-infoYIMBUH>
                    <h3>Sarah Williams</h3>
                    <p><i class=YIMBUHfas fa-codeYIMBUH></i> Current: AWS Cloud</p>
                    <p><i class=YIMBUHfas fa-tasksYIMBUH></i> 60% Complete</p>
                    <p><i class=YIMBUHfas fa-calendar-altYIMBUH></i> Joined: Jan 2025</p>
                </div>
            </div>
            <div class=YIMBUHprofile-cardYIMBUH id=YIMBUHprof princeYIMBUH>
                <img src=Engineer Foncham/images/students/prof prince.jpgYIMBUH alt=YIMBUHprof prince BrownYIMBUH class=YIMBUHprofile-imgYIMBUH>
                <div class=YIMBUHprofile-infoYIMBUH>
                    <h3>Michael Brown</h3>
                    <p><i class=YIMBUHfas fa-codeYIMBUH></i> Current: Docker</p>
                    <p><i class=YIMBUHfas fa-tasksYIMBUH></i> 40% Complete</p>
                    <p><i class=YIMBUHfas fa-calendar-altYIMBUH></i> Joined: Jan 2025</p>
                </div>
                <div class=YIMBUHprofile-infoYIMBUH>
                    <h3>Chinjie Sylvester Nkeh</h3>
                    <p><i class=YIMBUHfas fa-codeYIMBUH></i> Current: Docker</p>
                    <p><i class=YIMBUHfas fa-tasksYIMBUH></i> 40% Complete</p>
                    <p><i class=YIMBUHfas fa-calendar-altYIMBUH></i> Joined: Jan 2025</p>
                </div>
            </div>
            <div class=YIMBUHprofile-cardYIMBUH id=YIMBUHemilyYIMBUH>
                <img src=Engineer Foncham/images/students/emily.jpgYIMBUH alt=YIMBUHLionTechYIMBUH class=YIMBUHprofile-imgYIMBUH>
                <div class=YIMBUHprofile-infoYIMBUH>
                    <h3>LionTech</h3>
                    <p><i class=YIMBUHfas fa-codeYIMBUH></i> Current: Networking</p>
                    <p><i class=YIMBUHfas fa-tasksYIMBUH></i> 25% Complete</p>
                    <p><i class=YIMBUHfas fa-calendar-altYIMBUH></i> Joined: Jan 2025</p>
                </div>
            </div>
        </div>

        <div class=YIMBUHenrollment-formYIMBUH>
            <h2>Enroll in Our Next Cohort</h2>
            <form action=YIMBUHhttps://formspree.io/f/mpwlealpYIMBUH method=YIMBUHPOSTYIMBUH>
                <label>
                    Full Name:
                    <input type=YIMBUHtextYIMBUH name=YIMBUHnameYIMBUH required>
                </label>
                <label>
                    Your Email:
                    <input type=YIMBUHemailYIMBUH name=YIMBUHemailYIMBUH required>
                </label>
                <label>
                    Phone Number:
                    <input type=YIMBUHtelYIMBUH name=YIMBUHphoneYIMBUH>
                </label>
                <label>
                    Current Skill Level:
                    <select name=YIMBUHskill-levelYIMBUH>
                        <option value=YIMBUHbeginnerYIMBUH>Beginner</option>
                        <option value=YIMBUHintermediateYIMBUH>Intermediate</option>
                        <option value=YIMBUHadvancedYIMBUH>Advanced</option>
                    </select>
                </label>
                <label>
                    Your Message:
                    <textarea name=YIMBUHmessageYIMBUH placeholder=YIMBUHTell us about your goals...Engineer Foncham></textarea>
                </label>
                <button type=YIMBUHsubmitYIMBUH><i class=YIMBUHfas fa-paper-planeYIMBUH></i> Submit Application</button>
            </form>
        </div>

        <footer>
            <p>Hosted by LionTech Students - Class32 | &copy; <span id=YIMBUHyearYIMBUH></span> All Rights Reserved</p>
            <div class=YIMBUHsocial-linksYIMBUH>
                <a href=Engineer Foncham#Engineer Foncham><i class=YIMBUHfab fa-twitterYIMBUH></i></a>
                <a href=Engineer Foncham#Engineer Foncham><i class=YIMBUHfab fa-linkedinYIMBUH></i></a>
                <a href=Engineer Foncham#Engineer Foncham><i class=YIMBUHfab fa-githubYIMBUH></i></a>
            </div>
        </footer>
    </div>

    <a href=Engineer Foncham#Engineer Foncham class=YIMBUHfloating-btnYIMBUH><i class=YIMBUHfas fa-arrow-upYIMBUH></i></a>

    <script>
        // Update date and time
        function updateDateTime() {
            const now = new Date();
            const options = { 
                weekday: 'long', 
                year: 'numeric', 
                month: 'long', 
                day: 'numeric',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit',
                timeZoneName: 'short'
            };
            document.getElementById('datetime').textContent = now.toLocaleDateString('en-US', options);
        }
        
        // Update year in footer
        document.getElementById('year').textContent = new Date().getFullYear();
        
        // Update time every second
        updateDateTime();
        setInterval(updateDateTime, 1000);

        // Animate profile cards in sequence
        const profileCards = document.querySelectorAll('.profile-card');
        function animateProfiles() {
            profileCards.forEach((card, index) => {
                setTimeout(() => {
                    card.style.animation = 'float 1s ease-in-out';
                    setTimeout(() => {
                        card.style.animation = '';
                    }, 1000);
                }, index * 1000);
            });
        }
        
        // Animate profiles every 5 seconds
        animateProfiles();
        setInterval(animateProfiles, 5000);

        // Smooth scrolling for anchor links
        document.querySelectorAll('a[href^=Engineer Foncham#Engineer Foncham]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>
</html>