Animated Login Page for Integral University -

Copy the HTML Source Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login Page - Integral University</title>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Poppins', sans-serif;
    }

body {
      background: linear-gradient(120deg, #1a1a64, #3f51b5);
      height: 100vh;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
    }

.container {
      position: relative;
      width: 900px;
      height: 550px;
      background: #fff;
      border-radius: 20px;
      overflow: hidden;
      display: flex;
      box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    }

.form-section, .info-section {
      flex: 1;
      padding: 40px;
      position: relative;
      z-index: 1;
    }

.form-section {
      display: flex;
      flex-direction: column;
      justify-content: center;
      background: #f4f6f9;
    }

.form-section h2 {
      margin-bottom: 20px;
      font-weight: 600;
      color: #1a1a64;
    }

.form-section input {
      padding: 12px;
      margin: 10px 0;
      border: none;
      border-radius: 10px;
      outline: none;
      font-size: 16px;
    }

.form-section button {
      padding: 12px;
      margin-top: 15px;
      background: #1a1a64;
      color: #fff;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      font-size: 16px;
      transition: 0.3s;
    }

.form-section button:hover {
      background: #3f51b5;
    }

.info-section {
      background: linear-gradient(to bottom right, #1a1a64, #3f51b5);
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 50px;
      position: relative;
      align-items: flex-end;
      text-align: right;
    }

.info-section h1 {
      font-size: 32px;
      margin-bottom: 10px;
    }

.info-section p {
      font-size: 16px;
      margin-bottom: 20px;
    }

.logo {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 250px;
      background-color: #fff;
      padding: 10px;
      border-radius: 10px;
    }

.slider {
      position: absolute;
      width: 100%;
      height: 100%;
      background-image: url('https://images.unsplash.com/photo-1581090700227-1f3d52e1e062');
      background-size: cover;
      background-position: center;
      z-index: 0;
      opacity: 0.1;
      animation: slideBg 10s infinite linear;
    }

.thank-you {
      display: none;
      font-size: 22px;
      color: green;
      text-align: center;
      animation: fadeIn 1s ease-in-out forwards;
    }

@keyframes fadeIn {
      0% {opacity: 0; transform: translateY(-20px);}
      100% {opacity: 1; transform: translateY(0);}
    }

@keyframes slideBg {
      0% {background-position: 0 0;}
      100% {background-position: -1000px 0;}
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="slider"></div>
    <div class="form-section">
      <h2>Apply for Quiz Competition</h2>
      <input type="text" id="enrollment" placeholder="Enrollment Number">
      <input type="date" id="dob" placeholder="DOB">
      <button onclick="submitForm()">Apply</button>
      <div id="thankYou" class="thank-you">Thanks for registering!</div>
    </div>
    <div class="info-section">
      <img decoding="async" src="/mnt/data/IntegralUniversityLogo.png" alt="Integral University Logo" class="logo">
      <h1>Integral University</h1>
      <p>A NAAC A+ accredited university in Lucknow with 225+ programs including Engineering, MBA, Medical, Law & more.</p>
      <p>Welcome Student / Parent</p>
    </div>
  </div>
  <script>
    function submitForm() {
      const dob = new Date(document.getElementById('dob').value);
      const today = new Date();
      let age = today.getFullYear() - dob.getFullYear();
      const monthDiff = today.getMonth() - dob.getMonth();

if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < dob.getDate())) {
        age--;
      }

if (age >= 18) {
        document.getElementById('thankYou').style.display = 'block';
      } else {
        alert('You must be 18 or older to apply.');
      }
    }
  </script>
</body>
</html>