index.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Raiyan's Personal Webpage</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            background-color: #121212;
            color: #fff;
            line-height: 1.6;
        }

        header {
            background-color: #1e1e1e;
            color: #00ffcc;
            padding: 20px;
            text-align: center;
        }

        nav {
            text-align: center;
            padding: 10px;
            background-color: #2a2a2a;
        }

        nav a {
            color: #00FFCC;
            margin: 0 10px;
            text-decoration: none;
            font-size: 18px;
        }

        nav a:hover {
            color: #fff;
        }

        section {
            padding: 20px;
            max-width: 900px;
            margin: auto;
        }

        h2 {
            color: #00ffcc;
            border-bottom: 2px solid #00ffcc;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }
        
        li a{
            color: #B56500;
            text-decoration-style: none;
            text-decoration: none;
            font-weight: bolder;
        }

        .skills ul,
        .projects ul,
        .challenges ul {
            list-style-type: none;
            padding: 0;
        }

        .skills ul li,
        .projects ul li,
        .challenges ul li {
            background-color: #1e1e1e;
            margin: 10px 0;
            padding: 10px;
            border-left: 4px solid #00ffcc;
        }

        .solution {
            display: none;
            background-color: #000000;
            padding: 5px;
            margin-top: 15px;
            color: #00FF8F;
            max-height: 200px;
            /* Set a max height for the solution section */
            overflow: auto;
            /* Allow scrolling within the solution section if the content exceeds the max height */
            word-wrap: break-word;
            /* Break long words to prevent overflow */
            white-space: pre-wrap;
            /* Preserve indentation and break long lines */
            border: 1px solid #00ffcc;
            border-radius: 15px;
        }

        footer {
            background-color: #1e1e1e;
            text-align: center;
            padding: 10px;
            color: #00ffcc;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <header>
        <h1>Welcome to Raiyan's Webpage</h1>
    </header>

    <nav>
        <a href="#about">About Me</a>
        <a href="#skills">Skills</a>
        <a href="#portfolio">Portfolio</a>
        <a href="#projects">Projects</a>
        <a href="#challenge">Challenge</a>
    </nav>

    <section id="about">
        <h2>About Me</h2>
        <p>
            Hello, I am Md Shagaf Raiyan Rashid. I am passionate about coding and technology, and I'm on a
            journey to become a successful AI Developer. My goal is to create impactful projects and
            continuously learn new skills.
        </p>
    </section>

    <section id="skills">
        <h2>Skills</h2>
        <ul>
            <li>Python Programming</li>
            <li>Machine Learning</li>
            <li>Web Development</li>
            <li>Data Analysis</li>
            <li>Kivy and GUI Development</li>
        </ul>
    </section>

    <section id="portfolio">
        <h2>Portfolio</h2>
        <p>Check out some of my work below:</p>
        <!-- Add your portfolio items here -->
    </section>

    <section id="projects">
        <h2>Projects</h2>
        <ul>
            <li>Project 1: AI-Powered Task Manager</li>
            <li>Project 2: Machine Learning Regression Models</li>
            <li>Project 3: GUI Application with Tkinter</li>
            <!-- Add more projects as needed -->
        </ul>
    </section>

    <section id="challenge">
        <h2>Challenges</h2>
        <ul class="challenges">
            <li>
                <a href="javascript:void(0);" onclick="toggleSolution(1)">Python Challenge 1: Create a program
                    that reads a list of numbers from the user and prints the average of those numbers.</a>
                <div id="solution1" class="solution">
                    <pre>
def calculate_average():
    user_input = input("Enter numbers separated by space: ")
    numbers = [int(num) for num in user_input.split()]
    total_sum = sum(numbers)
    print("Average of User List is", total_sum / len(numbers))

calculate_average()
                    </pre>
                </div>
            </li>
        </ul>
    </section>
    <footer>
        <p>&copy; 2024 Raiyan. All rights reserved.</p>
    </footer>

    <script>
        function toggleSolution(id) {
            var solution = document.getElementById('solution' + id);
            // Toggle display style between 'block' and 'none'
            solution.style.display = (solution.style.display === 'none' || solution.style.display === '') ?
                'block' : 'none';
        }
    </script>
</body>

</html>