index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mario Python Plumber</title>
  <meta name="title" content="Python Plumber">
  <meta name="description" content="A man who love GNU/Linux penguin lives in sri lanka! ">
  <meta name="keywords" content="python, plumber, my web, github, zly, github.com/PythonPlumber, Python Plumber, python plumber">
  <meta name="robots" content="index, follow">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="language" content="English">
  <meta name="author" content="Python Plumber">
  <link rel="canonical" href="https://pythonplumber.eu.org/" />
  <link rel="stylesheet" href="styles.css">
  <link rel="icon" href="/img/cropped.jpg">
  <link rel="icon" href="/img/512.gif" type="image/gif" >
  <style>
    body {
      background-color: #000;
      color: #fff;
      font-family: 'Courier New', monospace;
      text-align: center;
      margin: 0;
      padding: 0;
    }

    .hero {
      background-color: #000;
      padding: 80px 0;
      position: relative;
      margin-bottom: 10px;
    }

    .hero::before {
      content: "";
      background: linear-gradient(45deg, #ff0000, #0000ff);
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      opacity: 0.5;
    }

    .hero h1 {
      font-size: 48px;
      margin-bottom: 20px;
      color: #ff0000;
      text-transform: uppercase;
      letter-spacing: 8px;
      font-weight: bold;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    }

    .container {
      max-width: 800px;
      margin: 0 auto;
      padding: 0 20px;
    }

    .hero p {
      font-size: 20px;
      line-height: 1.6;
      margin-bottom: 30px;
      text-align: center;
    }

    .about-me {
      background-color: #000;
      padding: 80px 0;
      position: relative;
      margin-top: 10px; /* Add margin-top */
    }

    .about-me::before {
      content: "";
      background: linear-gradient(45deg, #ff0000, #0000ff);
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      opacity: 0.5;
    }

    .about-me h2 {
      font-size: 48px;
      margin-bottom: 20px;
      color: #ff0000;
      text-transform: uppercase;
      letter-spacing: 8px;
      font-weight: bold;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    }

    .about-me p {
      font-size: 20px;
      line-height: 1.6;
      margin-bottom: 30px;
      text-align: center;
    }

    .container {
      max-width: 800px;
      margin: 0 auto;
      padding: 0 20px;
    }

    .about-me p {
      font-size: 16px;
      line-height: 1.6;
      margin-bottom: 10px;
    }

.form-container {
  background-color: #333;
  padding: 20px;
  border-radius: 8px;
  margin-top: 30px;
}

.form-container label {
  display: block;
  text-align: left;
  margin-bottom: 10px;
}

.form-container input,
.form-container textarea {
  width: 100%;
  padding: 8px;
  border: none;
  background-color: #555;
  color: #fff;
  margin-bottom: 20px;
}

.form-container input[type="submit"] {
  background-color: #ff0000;
  color: #fff;
  cursor: pointer;
  border-radius: 20px; 
  padding: 10px 20px;
}
    
.social-links {
  background-color: #000;
  padding: 80px 0;
  position: relative;
  margin-top: 10px;
}

.social-links::before {
  content: "";
  background: linear-gradient(45deg, #ff0000, #0000ff);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0.5;
}


.social-links h2 {
  font-size: 48px;
  margin-bottom: 20px;
  color: #ff0000;
  text-transform: uppercase;
  letter-spacing: 8px;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.social-links ul {
  list-style-type: none;
  padding: 0;
  margin-bottom: 30px;
}

.social-links li {
  display: inline-block;
  margin-right: 20px;
}

.social-links a {
  color: #fff;
  text-decoration: none;
  font-size: 20px;
}

.repo-button {
  background: #000000;
  border: 3px solid #ffffff;
  border-radius: 1000px;
  padding: 2px 8px; /* Adjust the padding values as desired */
  color: #ffffff;
  display: inline-block;
  font: normal bold 16px/1 "Komika", cursive; /* Adjust the font size as desired */
  text-align: center;
}

.repo-button:hover {
  background-color: #ff3333;
}

.small-button {
  display: inline-block;
  padding: 6px 12px;
  background-color: #ff0000;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  border-radius: 6px;
  margin-top: 10px;
}

.small-button:hover {
  background-color: #ff3333;
}

    .footer {
      background-color: #000;
      color: #fff;
      padding: 20px;
      font-size: 14px;
    }

    #loading-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(10px);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
    }

    .spinner {
      width: 100px;
      height: 100px;
      background-image: url('https://fonts.gstatic.com/s/e/notoemoji/latest/1f680/512.gif');
      background-repeat: no-repeat;
      background-size: contain;
    }

    .scroll-down {
      position: absolute;
      left: 50%;
      bottom: 20px;
      transform: translateX(-50%);
      animation: scrollAnimation 2s infinite;
      z-index: 999;
    }

    @keyframes scrollAnimation {
      0% {
        opacity: 1;
        transform: translate(-50%, 0);
      }
      50% {
        opacity: 0.5;
        transform: translate(-50%, 10px);
      }
      100% {
        opacity: 0;
        transform: translate(-50%, 20px);
      }
    }
  </style>
</head>
<body>

  <div id="loading-overlay">
    <div class="spinner"></div>
  </div>
  
  <div class="hero">
    <h1>Mario Python Plumber</h1>
    <p>Welcome to the whimsical world of Mario Python Plumber! Join Mario on a code-filled adventure to defeat Bowser using the power of Python programming. Prepare for a wild ride as you navigate through jumping turtles, flying mushrooms, and quirky programming challenges. Together, we'll save Princess Python and discover the hidden gems of the Python universe. Get ready to laugh, encounter unexpected glitches, and embrace the joy of coding. Grab your keyboard, don your plumber's hat, and let's dive into the magical realm of Python pipe dreams. With Mario's determination and Python's versatility, we'll conquer every coding obstacle with a smileHere's the continuation of the HTML code. So, jump in and get ready for a gaming experience that's as fun as it is educational! Happy coding</p>
    <div class="scroll-down"></div>
  </div>

  <div class="about-me">
    <h2>About Me</h2>
    <p>🌍 Location: Sri Lanka</p>
    <p>💻 Using: Linux</p>
    <p>🚀 Role: Teenage Proggrammer</p>
    <p>✉️ Email: mario.yellow.bea@proton.me</p>
    <p>GitHub: PythonPlumber</p>
    <p>Website: pythonplumber.eu.org</p>
  </div>

<div class="social-links">
  <h2>Social Links</h2>
  <ul>
    <a href="https://github.com/PythonPlumber" target="_blank">
        <img src="https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white" alt="Github">
    </a>    <a href="https://dev.to/PythonPlumber" target="_blank">
        <img src="https://img.shields.io/badge/dev.to-0A0A0A?style=for-the-badge&logo=devdotto&logoColor=white" alt="dev.to">
    </a><br>
  <a href="https://blog.pythonplumber.club" class="repo-button" target="_blank">Visit My Best Projects</a>
  <br>
  <br>
  <h3>Check Out My Blog</h3>
  <p>Explore my latest articles on programming, technology, and more!</p>
  <a href="https://pythonplumber.eu.org/blog" target="_blank" class="blog-button">Visit My Blogs</a>
</div>


  <div class="container">
    <h2>Contact</h2>
    <div class="form-container">
      <form id="contact-form" action="https://formsubmit.co/mario.yellow.bea@proton.me" method="POST">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>

        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <span id="email-validation"></span>

        <label for="github">GitHub Username:</label>
        <input type="text" id="github" name="github" required>
        <span id="github-validation"></span>
        
        <label for="message">Message:</label>
        <textarea id="message" name="message" rows="4" required></textarea>
        
        <input type="submit" id="submit-button" value="Send Message">
      </form>
    </div>
  </div>

  <div class="footer">
    &copy; 2023 Mario Python Plumber. All rights reserved.<br>
  </div>
  <script>
    // JavaScript code to start and hide the loading animation after 5 seconds
    window.addEventListener('load', function() {
      const loadingOverlay = document.getElementById('loading-overlay');
      const spinner = document.querySelector('.spinner');

      // Show the loading overlay and start the spinner animation
      setTimeout(function() {
        loadingOverlay.style.display = 'flex';
        spinner.style.animation = 'spinner-rotate 1s linear infinite';
      }, 1700); // 1.7-second delay (1700 milliseconds)

      // Hide the loading overlay after a delay
      setTimeout(function() {
        loadingOverlay.style.display = 'none';
      }, 4000); // 4-second delay (4000 milliseconds)
    });

    // JavaScript code for email validity checking
    const emailInput = document.getElementById('email');
    const emailValidation = document.getElementById('email-validation');

    emailInput.addEventListener('input', function(event) {
      const email = event.target.value;
      const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

      if (regex.test(email)) {
        emailValidation.textContent = 'Email is valid.';
        emailValidation.style.color = 'green';
      } else {
        emailValidation.textContent = 'Please enter a valid email address.';
        emailValidation.style.color = 'red';
      }
    });

    // JavaScript code for GitHub username validation
    const githubInput = document.getElementById('github');
    const githubValidation = document.getElementById('github-validation');

    githubInput.addEventListener('input', function(event) {
      const username = event.target.value;
      if (username.trim() !== '') {
        fetch(`https://api.github.com/users/${username}`)
          .then(response => {
            if (response.ok) {
              githubValidation.textContent= 'GitHub username is valid.';
              githubValidation.style.color = 'green';
            } else {
              githubValidation.textContent = 'GitHub username does not exist.';
              githubValidation.style.color = 'red';
            }
          })
          .catch(error => {
            githubValidation.textContent = 'Failed to validate GitHub username.';
            githubValidation.style.color = 'red';
          });
      } else {
        githubValidation.textContent = '';
      }
    });

    // JavaScript code to hide scroll-down animation when user starts scrolling
    window.addEventListener('scroll', function() {
      const scrollAnimation = document.querySelector('.scroll-down');
      scrollAnimation.style.display = 'none';
    });
  </script>
</body>

</html>