A Pen by bao4

HTML

              
                <html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Glam Up My Markup: Cricket League!</title>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <header>
    <div class="header-bg"></div>
    <div class="container">
      <div class="header-content">
        <h1>Welcome to the New York Recreational Cricket League</h1>
        <p>Join us to experience the thrill of cricket right in the heart of New York City!</p>
      </div>
    </div>
  </header>

  <main class="container">
    <section>
      <h2>About the League</h2>
      <p>The New York Recreational Cricket League (NYRCL) is dedicated to promoting the sport of cricket among New Yorkers of all ages. We offer a friendly but competitive environment where players can improve their skills and enjoy the game.</p>
    </section>

    <section>
      <h2>How to Join</h2>
      <p>Interested in playing? We welcome players of all skill levels! To join, simply fill out our online registration form on our website, or contact us at join@nyrcl.com for more details.</p>
    </section>

    <section>
      <h2>League Fees</h2>
      <p>The registration fee for the league is $150 per player, which covers the entire season. This fee includes uniforms, equipment rental, and insurance.</p>
    </section>

    <section>
      <h2>Location of Games</h2>
      <p>All games are held at the iconic Central Park Cricket Fields, located near the north end of Central Park, easily accessible via public transportation.</p>
    </section>

    <section>
      <h2>Season Schedule</h2>
      <p>The NYRCL season runs from April through September, with games typically held on weekends. Here is the schedule for the upcoming season:</p>
      <ul>
        <li>Opening Day: April 15th</li>
        <li>Mid-Season Tournament: July 8th-9th</li>
        <li>Season Finals: September 20th</li>
        <li>Closing Ceremony: September 30th</li>
      </ul>
    </section>
  </main>

  <footer>
    <div class="container">
      <p>Contact Us: </p>
      <p>Email: info@nyrcl.com | Phone: (555) 123-4567</p>
      <p>Follow us on our social media pages for updates and more information.</p>
      <div class="social-icons">
        <a href="#" aria-label="Facebook"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 48 48">
            <path fill="#2F88FF" stroke="#000" stroke-linejoin="round" stroke-width="4" d="M5 35.7622C6.92886 36.8286 20.8914 44.8773 30.8199 38.674C40.7483 32.4707 40.2006 21.7833 40.2006 16.886C41.1 15.0018 43 14.0439 43 8.9438C41.1337 10.6678 39.2787 11.2544 37.435 10.7036C35.6287 7.94957 33.1435 6.73147 29.9794 7.04934C25.2333 7.52614 23.4969 12.1825 24.0079 18.2067C16.6899 21.9074 10.9515 15.524 7.99418 10.7036C7.00607 14.4999 6.0533 19.0576 7.99418 24.0995C9.2881 27.4607 12.3985 30.3024 17.3254 32.6246C12.3323 35.3308 8.22382 36.3766 5 35.7622Z" />
          </svg></a>
        <a href="#" aria-label="Twitter"> <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 48 48">
            <g fill="none">
              <path fill="#2F88FF" stroke="#000" stroke-linejoin="round" stroke-width="4" d="M34 6H14C9.58172 6 6 9.58172 6 14V34C6 38.4183 9.58172 42 14 42H34C38.4183 42 42 38.4183 42 34V14C42 9.58172 38.4183 6 34 6Z" />
              <path fill="#43CCF8" stroke="#fff" stroke-linejoin="round" stroke-width="4" d="M24 32C28.4183 32 32 28.4183 32 24C32 19.5817 28.4183 16 24 16C19.5817 16 16 19.5817 16 24C16 28.4183 19.5817 32 24 32Z" />
              <path fill="#fff" d="M35 15C36.1046 15 37 14.1046 37 13C37 11.8954 36.1046 11 35 11C33.8954 11 33 11.8954 33 13C33 14.1046 33.8954 15 35 15Z" />
            </g>
          </svg></a>
        <a href="#" aria-label="Instagram"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 48 48">
            <path fill="#2F88FF" stroke="#000" stroke-linejoin="round" stroke-width="3.8" d="M36 12.5997H31.2489H29.9871C28.9009 12.5997 28.0203 13.4803 28.0203 14.5666V21.4674H36L34.8313 29.0643H28.0203V43H19.2451V29.0643H12V21.4674H19.1515L19.2451 14.2563L19.2318 12.9471C19.1879 8.60218 22.6745 5.04434 27.0194 5.0004C27.0459 5.00013 27.0724 5 27.0989 5H36V12.5997Z" />
          </svg></a>
      </div>
    </div>
  </footer>

  <div class="cricket-ball"></div>
  <div class="popup">
    <p>Hii Dev, I hope u doing good.</p>
  </div>

  <script src="script.js"></script>
</body>

</html>

CSS

              
                :root {
  --primary: #4caf1e;
  --secondary: #e90eba;
  --accent: #22d3ee;
  --text: #d43693;
  --bg: #8dbddd;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Poppins", sans-serif;
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}

.container {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 40px;
}

header {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
  padding: 100px 0 150px;
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%);
  position: relative;
  overflow: hidden;
}

.header-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.header-bg {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="none" stroke="white" stroke-width="2"/><path d="M50 10 L50 90 M10 50 L90 50" stroke="white" stroke-width="2"/></svg>')
    repeat;
  opacity: 0.1;
}

h1 {
  font-size: 3.5rem;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

header p {
  font-size: 1.2rem;
  max-width: 600px;
  position: relative;
  z-index: 1;
}

section {
  padding: 80px 0;
  position: relative;
}

section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="2" fill="%23e2e8f0"/></svg>')
    repeat;
  opacity: 0.2;
  z-index: -1;
}

h2 {
  font-size: 2.5rem;
  color: var(--primary);
  margin-bottom: 30px;
  position: relative;
  display: inline-block;
}

h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 50%;
  height: 4px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

section:hover h2::after {
  transform: scaleX(1);
}

p {
  margin-bottom: 20px;
  font-size: 1.1rem;
}

ul {
  list-style-type: none;
  padding-left: 20px;
}

li {
  margin-bottom: 10px;
  position: relative;
  padding-left: 30px;
}

li::before {
  content: "🏏";
  position: absolute;
  left: 0;
  top: 2px;
}

footer {
  background-color: var(--primary);
  color: white;
  text-align: center;
  padding: 40px 0;
  clip-path: polygon(0 15%, 100% 0, 100% 100%, 0% 100%);
}

.social-icons {
  margin-top: 20px;
}

.social-icons a {
  color: white;
  font-size: 1.5rem;
  margin: 0 10px;
  transition: color 0.3s ease;
}

.social-icons a:hover {
  color: var(--accent);
}

.cricket-ball {
  position: fixed;
  right: 20px;
  top: -50px;
  width: 60px;
  height: 60px;
  background: radial-gradient(circle at 30% 30%, #ff4136, #85144b);
  border-radius: 50%;
  box-shadow: inset -5px -5px 10px rgba(0, 0, 0, 0.5),
    2px 2px 5px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  z-index: 1000;
}

.cricket-ball::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 90%;
  border-radius: 50%;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 5 A45 45 0 0 1 95 50 A45 45 0 0 1 50 95 A45 45 0 0 1 5 50 A45 45 0 0 1 50 5 Z" fill="none" stroke="%23ffffff" stroke-width="2"/></svg>')
    no-repeat center/cover;
}

.popup {
  position: fixed;
  background-color: white;
  padding: 5px;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  z-index: 1001;
  display: none;
  font-size: 16px;
  width: 100px;
  transform: translate(-60%, -60%);
  text-align: center;
  right: 50%;
  top: 50%;
}

.popup p {
  color: var(--primary);
}

@media (max-width: 768px) {
  h1 {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 2rem;
  }
}

JS

              
                // GSAP and ScrollTrigger initialization
gsap.registerPlugin(ScrollTrigger);

// Scrolling behavior of sections
gsap.utils.toArray("section").forEach((section, i) => {
  gsap.from(section, {
    opacity: 0,
    y: 50,
    duration: 1,
    scrollTrigger: {
      trigger: section,
      start: "top 80%",
      end: "bottom 20%",
      toggleActions: "play none none reverse"
    }
  });
});

// Parallax effect for header background
gsap.to(".header-bg", {
  y: () => -window.innerHeight * 0.5,
  ease: "none",
  scrollTrigger: {
    trigger: "header",
    start: "top top",
    end: "bottom top",
    scrub: true
  }
});

// Rotating effect for header background
gsap.to(".header-bg", {
  rotation: 360,
  duration: 60,
  repeat: -1,
  ease: "none"
});

// Text animation for h2, p, li
gsap.utils.toArray("h2, p, li").forEach((elem) => {
  gsap.from(elem, {
    opacity: 0,
    y: 20,
    duration: 0.5,
    scrollTrigger: {
      trigger: elem,
      start: "top 90%",
      end: "bottom 10%",
      toggleActions: "play none none reverse"
    }
  });
});

// Cricket ball related selectors
const ball = document.querySelector(".cricket-ball");
const popup = document.querySelector(".popup");
let isPopupVisible = false;

// Function to update popup position
function updatePopupPosition() {
  const ballRect = ball.getBoundingClientRect();
  popup.style.top = `${ballRect.top + ballRect.height / 2}px`;
  popup.style.left = `${ballRect.left + ballRect.width / 2}px`;
}

// Enhanced cricket ball animation
gsap.to(ball, {
  y: () => window.innerHeight - 100,
  ease: "power1.inOut",
  scrollTrigger: {
    trigger: "body",
    start: "top top",
    end: "bottom bottom",
    scrub: 1,
    onUpdate: (self) => {
      gsap.to(ball, {
        rotation: self.progress * 1440,
        duration: 0.1
      });
      gsap.to(ball, {
        x: Math.sin(self.progress * Math.PI * 2) * 50,
        duration: 0.3
      });
      gsap.to(ball, {
        scale: 1 + Math.sin(self.progress * Math.PI * 8) * 0.1,
        duration: 0.2
      });
      if (isPopupVisible) {
        updatePopupPosition();
      }
    }
  }
});

// Bounce effect when ball reaches bottom
ScrollTrigger.create({
  trigger: "body",
  start: "bottom bottom-=100",
  onEnter: () => {
    gsap.to(ball, {
      y: () => window.innerHeight - 120,
      duration: 0.3,
      ease: "bounce.out"
    });
  },
  onLeaveBack: () => {
    gsap.to(ball, {
      y: () => window.innerHeight - 100,
      duration: 0.3,
      ease: "power1.inOut"
    });
  }
});

// Hover effect on ball
ball.addEventListener("mouseenter", () => {
  gsap.to(ball, {
    scale: 1.2,
    duration: 0.3,
    ease: "back.out(1.7)"
  });
});

ball.addEventListener("mouseleave", () => {
  gsap.to(ball, {
    scale: 1,
    duration: 0.3,
    ease: "back.out(1.7)"
  });
});

// Click effect and popup for cricket ball
ball.addEventListener("click", () => {
  isPopupVisible = true;
  updatePopupPosition();

  gsap.to(ball, {
    scale: 0.8,
    duration: 0.1,
    yoyo: true,
    repeat: 1
  });

  gsap.to(popup, {
    display: "block",
    opacity: 1,
    scale: 1,
    duration: 0.3,
    ease: "back.out(1.7)"
  });

  setTimeout(() => {
    gsap.to(popup, {
      opacity: 0,
      scale: 0.8,
      duration: 0.3,
      ease: "power2.in",
      onComplete: () => {
        popup.style.display = "none";
        isPopupVisible = false;
      }
    });
  }, 2000);
});

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions