<header class="header" id="header">
<nav class="nav container">
<a href="#" class="nav__logo">
<img src="https://cdn-icons-png.flaticon.com/128/1099/1099680.png" alt="logo">
<span>CRICKET</span>
</a>
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item">
<a href="#about" class="nav__link">
<i class="ri-arrow-right-up-line"></i>
<span>About Us</span>
</a>
</li>
<li class="nav__item">
<a href="#join" class="nav__link">
<i class="ri-arrow-right-up-line"></i>
<span>Join</span>
</a>
</li>
<li class="nav__item">
<a href="#fees" class="nav__link">
<i class="ri-arrow-right-up-line"></i>
<span>Fees</span>
</a>
</li>
<li class="nav__item">
<a href="#location" class="nav__link">
<i class="ri-arrow-right-up-line"></i>
<span>Location</span>
</a>
</li>
<li class="nav__item">
<a href="#schedule" class="nav__link">
<i class="ri-arrow-right-up-line"></i>
<span>Schedule</span>
</a>
</li>
</ul>
<div class="nav__close" id="nav-close">
<i class="ri-close-line"></i>
</div>
<div class="nav__social">
<a href="https://www.instagram.com/" target="_blank" class="nav__social-link">
<i class="ri-instagram-line"></i>
</a>
<a href="https://github.com/" target="_blank" class="nav__social-link">
<i class="ri-github-line"></i>
</a>
<a href="https://dribbble.com/" target="_blank" class="nav__social-link">
<i class="ri-dribbble-line"></i>
</a>
<a href="https://www.linkedin.com/" target="_blank" class="nav__social-link">
<i class="ri-linkedin-box-line"></i>
</a>
</div>
</div>
<div class="nav__toggle" id="nav-toggle">
<i class="ri-menu-line"></i>
</div>
</nav>
</header>
<main>
<section id="page1">
<h1>Welcome to the New York Recreational Cricket League</h1>
<h2>Join Us for a Thrilling Cricket Experience</h2>
<p>We offer a friendly yet competitive environment where players can enhance their skills and enjoy the game.</p>
<div id="arrow">
<i class="ri-arrow-down-line"></i>
<div id="cursor"></div>
<div id="cursor-blur"></div>
</div>
</section>
<section id="page2">
<div id="details">
<div class="detail-item" id="about">
<h3>About the League</h3>
<p>The New York Recreational Cricket League (NYRCL) is dedicated to fostering a love for cricket among players of all ages and skill levels in New York. Our league provides a welcoming and inclusive environment, offering opportunities for players to develop their skills, participate in exciting matches, and connect with fellow cricket enthusiasts. Whether you’re a seasoned player or a newcomer to the sport, NYRCL is the place to be!</p>
</div>
<div class="detail-item" id="join">
<h3>How to Join</h3>
<p>To join our league, simply fill out the registration form available on our website or contact us at <a href="mailto:join@nyrcl.com">join@nyrcl.com</a>. We welcome players of all skill levels and are excited to have you on board!</p>
</div>
<div class="detail-item" id="fees">
<h3>League Fees</h3>
<p>The registration fee for the league is $150 per player, covering the entire season, including uniforms, equipment rental, and insurance.</p>
</div>
<div class="detail-item" id="location">
<h3>Location of Games</h3>
<p>Our games are played at Central Park Cricket Fields, conveniently located at the north end of Central Park. Public transportation options are available for easy access.</p>
</div>
<div class="detail-item" id="schedule">
<h3>Season Schedule</h3>
<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>
</div>
</div>
</section>
<footer>
<p>Contact Us:</p>
<p>Email: <a href="mailto:info@nyrcl.com">info@nyrcl.com</a> | Phone: (555) 123-4567</p>
<p>Follow us on our social media pages for updates and more information:</p>
<p>
<a href="https://www.instagram.com/" target="_blank" class="nav__social-link">
<i class="ri-instagram-line"></i>
</a>
<a href="https://github.com/" target="_blank" class="nav__social-link">
<i class="ri-github-line"></i>
</a>
<a href="https://dribbble.com/" target="_blank" class="nav__social-link">
<i class="ri-dribbble-line"></i>
</a>
<a href="https://www.linkedin.com/" target="_blank" class="nav__social-link">
<i class="ri-linkedin-box-line"></i>
</a>
</p>
<p>© 2024 New York Recreational Cricket League. All rights reserved.</p>
</footer>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script src="script.js"></script>
/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@400;500&display=swap");
/*=============== VARIABLES CSS ===============*/
:root {
--header-height: 3.5rem;
/*========== Colors ==========*/
/*Color mode HSL(hue, saturation, lightness)*/
--white-color: hsl(0, 0%, 100%);
--black-color: hsl(0, 0%, 0%);
--green-color: #1db954;
--bg-dark-color: #121212;
--bg-light-color: #1c1c1c;
--text-color: #e0e0e0;
/*========== Font and typography ==========*/
/*.5rem = 8px | 1rem = 16px ...*/
--body-font: "Montserrat Alternates", sans-serif;
--h1-font-size: 3rem;
--h2-font-size: 2rem;
--h3-font-size: 1.5rem;
--normal-font-size: 0.938rem;
/*========== Font weight ==========*/
--font-regular: 400;
--font-medium: 500;
/*========== z index ==========*/
--z-tooltip: 10;
--z-fixed: 100;
}
/*========== Responsive typography ==========*/
@media screen and (min-width: 1150px) {
:root {
--normal-font-size: 1rem;
}
}
/*=============== BASE ===============*/
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--body-font);
font-size: var(--normal-font-size);
background-color: var(--bg-dark-color);
color: var(--text-color);
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
}
/*=============== REUSABLE CSS CLASSES ===============*/
.container {
max-width: 1120px;
margin-inline: auto;
padding: 0 1.5rem;
}
/*=============== HEADER & NAV ===============*/
.header {
position: fixed;
width: 100%;
top: 0;
left: 0;
background-color: var(--bg-dark-color);
z-index: var(--z-fixed);
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
height: var(--header-height);
padding: 0 1.5rem;
}
.nav__logo {
display: flex;
align-items: center;
column-gap: 0.5rem;
font-weight: var(--font-medium);
}
.nav__logo img {
width: 30px;
}
.nav__menu {
position: fixed;
background-color: var(--bg-dark-color);
width: 70%;
height: 100%;
top: 0;
right: -100%;
padding: 4.5rem 2.5rem 2rem;
box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
transition: 0.4s;
}
.nav__list {
display: flex;
flex-direction: column;
row-gap: 2rem;
}
.nav__item {
display: flex;
align-items: center;
column-gap: 0.75rem;
}
.nav__link {
color: var(--text-color);
display: flex;
align-items: center;
column-gap: 0.5rem;
}
.nav__link i {
font-size: 1rem;
color: var(--green-color);
}
.nav__close,
.nav__toggle {
font-size: 1.5rem;
cursor: pointer;
}
.nav__close {
position: absolute;
top: 1.2rem;
right: 1.2rem;
}
.nav__social {
margin-top: auto;
display: flex;
column-gap: 1.5rem;
justify-content: center;
color: var(--text-color);
font-size: 1.25rem;
}
/*=============== Show Menu ===============*/
.show-menu {
right: 0;
}
/*=============== TOGGLE ===============*/
.nav__toggle {
color: var(--text-color);
display: flex;
align-items: center;
}
.nav__toggle i {
font-size: 1.5rem;
}
/*=============== MAIN ===============*/
main {
margin-top: var(--header-height);
}
/*=============== PAGE 1 ===============*/
#page1 {
height: 100vh;
background-image: url('https://i.pinimg.com/564x/f7/fd/ce/f7fdce1c6535ae37be46d9f8b60ee214.jpg');
background-size: cover;
background-repeat: no-repeat;
background-blend-mode: overlay;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
#page1 h1 {
font-size: var(--h1-font-size);
color: var(--white-color);
margin-bottom: 0.5rem;
}
#page1 h2 {
font-size: var(--h2-font-size);
color: var(--green-color);
margin-bottom: 1rem;
}
#page1 p {
font-size: 1.25rem;
color: var(--white-color);
max-width: 600px;
margin: 0 auto;
}
#arrow {
margin-top: 2rem;
color: var(--green-color);
font-size: 2rem;
cursor: pointer;
animation: bounce 2s infinite;
}
#cursor {
position: absolute;
width: 20px;
height: 20px;
background: rgba(0, 0, 0, 0.5);
border-radius: 50%;
pointer-events: none;
z-index: 1000;
}
#cursor-blur {
position: absolute;
width: 40px;
height: 40px;
background: rgba(0, 0, 0, 0.2);
border-radius: 50%;
pointer-events: none;
z-index: 999;
}
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
/*=============== PAGE 2 ===============*/
#page2 {
padding: 2rem;
}
#details {
display: flex;
flex-wrap: wrap;
gap: 2rem;
}
.detail-item {
background: var(--bg-light-color);
padding: 1.5rem;
border-radius: 8px;
flex: 1;
min-width: 300px;
}
.detail-item h3 {
font-size: var(--h3-font-size);
color: var(--green-color);
margin-bottom: 1rem;
}
.detail-item p,
.detail-item ul {
color: var(--text-color);
line-height: 1.6;
}
.detail-item a {
color: var(--green-color);
text-decoration: underline;
}
/*=============== FOOTER ===============*/
footer {
background: var(--bg-dark-color);
padding: 2rem;
text-align: center;
}
footer p {
margin-bottom: 1rem;
color: var(--text-color);
}
footer a {
color: var(--green-color);
text-decoration: underline;
}
.social-link {
margin: 0 0.5rem;
}
/*=============== MEDIA QUERIES ===============*/
@media screen and (min-width: 768px) {
.nav__menu {
width: 50%;
}
#page1 h1 {
font-size: 4rem;
}
#page1 h2 {
font-size: 2.5rem;
}
#page1 p {
font-size: 1.5rem;
}
.nav__toggle {
display: none;
}
.nav__menu {
position: static;
width: auto;
height: auto;
padding: 0;
box-shadow: none;
transition: none;
display: flex;
align-items: center;
flex-direction: row;
}
.nav__list {
flex-direction: row;
column-gap: 2rem;
row-gap: 0;
}
.nav__item i {
display: none;
}
.nav__link span {
font-size: var(--normal-font-size);
text-transform: uppercase;
}
.nav__social {
display: none;
}
.nav__close {
display: none;
}
}
const navMenu = document.getElementById('nav-menu'),
navToggle = document.getElementById('nav-toggle'),
navClose = document.getElementById('nav-close'),
arrow = document.getElementById('arrow');
/*===== MENU SHOW =====*/
/* Validate if constant exists */
if (navToggle) {
navToggle.addEventListener('click', () => {
navMenu.classList.add('show-menu');
gsap.from('.show-menu', {
duration: 0.5,
x: '-100%',
opacity: 0,
ease: 'power4.out'
});
});
}
/*===== MENU HIDDEN =====*/
/* Validate if constant exists */
if (navClose) {
navClose.addEventListener('click', () => {
gsap.to('.show-menu', {
duration: 0.5,
x: '-100%',
opacity: 0,
ease: 'power4.in',
onComplete: () => {
navMenu.classList.remove('show-menu');
}
});
});
}
document.addEventListener('DOMContentLoaded', () => {
const cursor = document.getElementById('cursor');
const cursorBlur = document.getElementById('cursor-blur');
// Cursor effect
document.addEventListener('mousemove', (e) => {
const cursorSize = cursor.offsetWidth / 2;
const cursorBlurSize = cursorBlur.offsetWidth / 2;
cursor.style.transform = `translate3d(${e.clientX - cursorSize}px, ${e.clientY - cursorSize}px, 0)`;
cursorBlur.style.transform = `translate3d(${e.clientX - cursorBlurSize}px, ${e.clientY - cursorBlurSize}px, 0)`;
});
gsap.registerPlugin(ScrollTrigger);
// GSAP animations for #page1
gsap.from('#page1 h1', {
opacity: 0,
y: -100,
duration: 1,
ease: 'power1.out'
});
gsap.from('#page1 h2', {
opacity: 0,
y: -100,
duration: 1,
ease: 'power1.out',
delay: 0.5
});
gsap.from('#page1 p', {
opacity: 0,
y: 100,
duration: 1,
ease: 'power1.out',
delay: 1
});
// ScrollTrigger for pinning #page2
ScrollTrigger.create({
trigger: '#page2',
start: 'top top',
end: 'bottom bottom',
scrub: true,
pin: true,
markers: false // Set to true if you want to see scroll trigger markers
});
// Smooth scrolling for internal anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Arrow functionality for scrolling
if (arrow) {
arrow.addEventListener('click', () => {
const targetSection = document.querySelector('#target-section'); // Change this selector to the ID of the section you want to scroll to
if (targetSection) {
targetSection.scrollIntoView({
behavior: 'smooth'
});
}
});
}
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.