github.html

<!DOCTYPE html>
<html>
<head>
    <title>GitHub User Search</title>
    <style>
        .card {
            width: 200px;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 10px;
            margin-top: 10px;
        }
        .card img {
            width: 100%;
        }
    </style>
</head>
<body>
    <input type="text" id="username" placeholder="Enter GitHub username">
    <button onclick="searchUser()">Search</button>
    <div id="userCard"></div>

    <script>
        async function searchUser() {
            const username = document.getElementById('username').value;
            const response = await fetch(`https://api.github.com/users/${username}`);
            const data = await response.json();

            const userCard = document.getElementById('userCard');
            userCard.innerHTML = `
                <div class="card">
                    <img src="${data.avatar_url}" alt="Avatar">
                    <h2>${data.name}</h2>
                    <p>${data.bio}</p>
                    <a href="${data.html_url}" target="_blank">View Profile</a>
                </div>
            `;
        }
    </script>
</body>
</html>