courses.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ExploitInject Courses Hub</title>
    <link rel="icon" type="image/x-icon" href="https://i.ibb.co/Y4LY8pCd/logo.png">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Courier New', monospace;
            cursor: none;
        }

        body {
            background-color: #0a0a0a;
            color: #00ff00;
            min-height: 100vh;
            overflow-x: hidden;
        }

        body {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        main {
            flex: 1;
        }

        .custom-cursor {
            position: fixed;
            width: 10px;
            height: 10px;
            background-color: #00ff00;
            border-radius: 50%;
            pointer-events: none;
            z-index: 9999;
            mix-blend-mode: difference;
        }

        h1 {
            text-align: center;
            padding: 2rem;
            font-size: 2.5em;
            text-shadow: 0 0 10px #00ff00;
            margin-bottom: 1rem;
        }

        .search-container {
            display: flex;
            justify-content: center;
            margin-bottom: 3rem;
        }

        .search-box {
            padding: 0.8rem;
            background: #001100;
            border: 1px solid #00ff00;
            color: #00ff00;
            width: 300px;
            margin-right: 1rem;
            cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="%2300ff88"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>'), pointer;
        }

        .search-btn {
            padding: 0.8rem 1.5rem;
            background: #002200;
            border: 1px solid #00ff00;
            color: #00ff00;
            cursor: pointer;
            transition: all 0.3s;
        }

        .search-btn:hover {
            background: #00ff00;
            color: #000;
            cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%2300ff00" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>'), auto;
        }

        .cards-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        .card {
            background: #001100;
            border: 1px solid #00ff00;
            padding: 1.5rem;
            height: 200px;
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 0 15px #00ff00;
        }

        .card-content {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            text-align: center;
            padding: 1rem;
        }

        .card-content h3 {
            margin: 0.5rem 0;
            color: #00ff00;
            font-size: 1.2em;
            text-shadow: 0 0 5px #00ff00;
        }

        .card-content p {
            font-size: 0.9em;
            color: #00ff00;
            opacity: 0.8;
            line-height: 1.4;
        }

        .card-content::before {
            content: ">";
            position: absolute;
            left: 10px;
            top: 10px;
            color: #00ff00;
            opacity: 0.5;
        }

        .card-content::after {
            content: "_";
            position: absolute;
            right: 10px;
            bottom: 10px;
            color: #00ff00;
            opacity: 0.5;
            animation: blink 1s infinite;
        }

        .footer {
            margin-top: auto;
            padding: 30px;
            text-align: center;
            color: #00ff00;
            border-top: 1px solid #00ff00;
            background-color: #001100;
            backdrop-filter: blur(5px);
        }

        .developer-text {
            font-size: 1.2em;
            color: #00ff00;
            margin-top: 10px;
        }

        .github-link {
            color: #00ff00;
            text-decoration: none;
            font-weight: bold;
            transition: all 0.3s ease;
            margin-left: 10px;
            font-size: 1em;
        }

        .github-link:hover {
            color: #00cc77;
            text-decoration: underline;
            text-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
        }

        @keyframes blink {
            0% {
                opacity: 0
            }

            50% {
                opacity: 1
            }

            100% {
                opacity: 0
            }
        }

        .card:hover::before {
            left: 100%;
        }

        @media (max-width: 768px) {
            .cards-container {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 480px) {
            .cards-container {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>

<body>
    <div class="custom-cursor"></div>

    <h1>ExploitInject Courses Hub</h1>

    <div class="search-container">
        <input type="text" class="search-box" placeholder="Search courses...">
        <button class="search-btn">SEARCH</button>
    </div>

    <div class="cards-container">
        <!-- <div class="card" onclick="window.location.href='python-course.html'">
            <div class="card-content">
                🐍✨<br>
                <h3>Python Programming</h3>
                <p>Master Python from basics to advanced topics including OOP, APIs, and automation</p>
            </div>
        </div>
        <div class="card" onclick="window.location.href='cpp-course.html'">
            <div class="card-content">
                🧠💻<br>
                <h3>C/C++ Mastery</h3>
                <p>Low-level programming, memory management, and system design fundamentals</p>
            </div>
        </div>
        <div class="card" onclick="window.location.href='web-dev-course.html'">
            <div class="card-content">
                🌐🚀<br>
                <h3>Full Stack Web Development</h3>
                <p>HTML/CSS, JavaScript, React, Node.js, and database integration</p>
            </div>
        </div> -->
        <div class="card" onclick="window.location.href='cyberSecurityRoadmap.html'">
            <div class="card-content">
                🔒🛡️<br>
                <h3>Cyber Security Roadmap</h3>
                <p>Your guide to building a career in cybersecurity</p>
            </div>
        </div>
        <div class="card" onclick="window.location.href='pythonRoadmap.html'">
            <div class="card-content">
                🐍🗺️<br>
                <h3>Python Programming Roadmap</h3>
                <p>Step-by-step guide to mastering Python programming</p>
            </div>
        </div>
        <!-- <div class="card" onclick="window.location.href='linux-course.html'">
            <div class="card-content">
                🐧🔧<br>
                <h3>Linux System Administration</h3>
                <p>Shell scripting, server management, and infrastructure automation</p>
            </div>
        </div>
        <div class="card" onclick="window.location.href='dsa-course.html'">
            <div class="card-content">
                📊🧮<br>
                <h3>Data Structures & Algorithms</h3>
                <p>Master problem-solving techniques and optimize code efficiency</p>
            </div>
        </div> -->
    </div>

    <footer class="footer">
        <p class="developer-text">Developed by <a href="https://github.com/ExploitInject" class="github-link"
                target="_blank">ExploitInject</a></p>
    </footer>

    <script>
        // Custom cursor
        const cursor = document.querySelector('.custom-cursor');

        document.addEventListener('mousemove', (e) => {
            cursor.style.left = e.clientX + 'px';
            cursor.style.top = e.clientY + 'px';
        });

        // Add hover effect to interactive elements
        const interactiveElements = document.querySelectorAll('button, .card, .search-box');

        interactiveElements.forEach(element => {
            element.addEventListener('mouseenter', () => {
                cursor.style.transform = 'scale(2)';
            });

            element.addEventListener('mouseleave', () => {
                cursor.style.transform = 'scale(1)';
            });
        });

        // Search functionality
        document.querySelector('.search-btn').addEventListener('click', () => {
            const searchTerm = document.querySelector('.search-box').value.toLowerCase().trim();
            const cards = document.querySelectorAll('.card');

            let foundMatch = false;

            cards.forEach(card => {
                const cardTitle = card.querySelector('h3').textContent.toLowerCase();
                const cardDescription = card.querySelector('p').textContent.toLowerCase();

                if (cardTitle.includes(searchTerm) || cardDescription.includes(searchTerm)) {
                    card.style.display = 'block'; // Show the card
                    foundMatch = true;
                } else {
                    card.style.display = 'none'; // Hide the card
                }
            });

            if (!foundMatch) {
                alert('No matching courses found.');
            }
        });
    </script>
</body>

</html>