<body>
<header>
<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>
</header>
<section id="about">
<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>
<footer>
<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>
</footer>
<script src="./script.js"></script>
</body>
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-size: 1.2rem;
font-family: "Open Sans", sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6,
footer p:first-child {
font-family: "Lato", sans-serif;
max-width: 900px;
margin: 0 auto;
}
p {
line-height: 1.5;
max-width: 800px;
margin: 0 auto;
}
header {
padding: 250px 80px;
text-align: center;
background: rgb(255, 255, 255);
background: linear-gradient(
0deg,
rgba(255, 255, 255, 1) 0%,
rgba(162, 225, 255, 1) 50%,
rgba(0, 212, 255, 1) 100%
);
}
section {
padding: 140px 80px;
}
section {
background-color: #fff;
}
h1 {
font-size: 4rem;
}
h2 {
font-size: 2.5rem;
text-align: center;
}
h1,
h2 {
margin-bottom: 2rem;
}
footer {
padding: 80px 40px 180px 40px;
background: rgb(255, 255, 255);
background: linear-gradient(
180deg,
rgba(255, 255, 255, 1) 0%,
rgba(233, 255, 233, 1) 50%,
rgb(8, 178, 11) 100%
);
}
footer p:first-child {
font-size: 2rem;
}
.top-button {
position: fixed;
bottom: 40px;
right: 40px;
cursor: pointer;
}
ul {
list-style: none;
}
section ul {
display: flex;
flex-direction: row;
text-align: center;
margin: 0 auto;
margin-top: 3rem;
gap: 1rem;
flex-wrap: wrap;
max-width: 1400px;
}
section ul li {
padding: 1rem;
box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em,
rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
}
@media only screen and (max-width: 600px) {
body {
}
header,
section {
padding: 100px 40px;
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2rem;
}
}
const goToTopSvg = `<svg height="40px" width="40px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 512 512" xml:space="preserve">
<path style="fill:#FFB150;" d="M510.042,128.159L273.389,364.787c-8.713,8.713-22.841,8.713-31.554,0l0,0
c-13.07-13.068-34.261-13.068-47.33,0l-92.632,92.622c-2.152,2.152-2.178,5.623-0.079,7.807c2.157,2.245,2.335,5.714,0.134,7.915
l-35.552,35.547c-4.356,4.356-11.42,4.356-15.777,0L3.268,461.353c-4.356-4.356-4.356-11.419,0-15.775l35.498-35.494
c2.152-2.152,5.623-2.178,7.807-0.08c2.245,2.157,5.714,2.334,7.916,0.134l92.684-92.675c13.07-13.068,13.07-34.257,0-47.326l0,0
c-8.713-8.713-8.713-22.839,0-31.55L383.827,1.958c8.713-8.713,44.031,12.476,78.885,47.325S518.756,119.446,510.042,128.159z"/>
<path style="fill:#D18839;" d="M486.264,104.364L249.611,340.993c-8.713,8.713-22.841,8.713-31.554,0l0,0
c-13.07-13.068-34.261-13.068-47.33,0l-92.632,92.622c-2.152,2.152-2.178,5.622-0.079,7.807c2.157,2.245,2.335,5.714,0.134,7.915
l-35.552,35.547c-4.356,4.356-11.42,4.356-15.777,0L3.086,461.153c-4.165-4.37-4.112-11.283,0.181-15.575l35.498-35.494
c2.152-2.152,5.623-2.178,7.807-0.079c2.245,2.157,5.714,2.334,7.916,0.134l92.684-92.675c13.07-13.068,13.07-34.257,0-47.326
c-8.713-8.713-8.713-22.839,0-31.55L383.827,1.958c7.706-7.706,36.221,7.985,66.819,35.82
C478.356,68.287,493.951,96.678,486.264,104.364z"/>
<path style="fill:#007DBC;" d="M194.559,364.842l-92.632,92.622c-2.152,2.152-2.178,5.623-0.08,7.807
c2.157,2.245,2.335,5.713,0.134,7.915l-35.552,35.547c-4.356,4.356-11.42,4.356-15.777,0L3.322,461.407
c-4.356-4.356-4.356-11.419,0-15.775l35.498-35.494c2.152-2.152,5.623-2.178,7.807-0.08c2.245,2.157,5.714,2.334,7.916,0.134
l92.684-92.675c11.718-11.717,12.922-29.955,3.629-43.022c13.124-12.217,33.667-11.943,46.45,0.838l39.442,39.438
c12.782,12.78,13.056,33.321,0.838,46.444C224.517,351.921,206.277,353.125,194.559,364.842z"/>
<path style="fill:#004859;" d="M30.899,488.981L3.322,461.407c-4.356-4.356-4.356-11.419,0-15.775l35.498-35.494
c2.152-2.152,5.623-2.178,7.807-0.079c2.245,2.157,5.714,2.334,7.916,0.132l92.684-92.675c11.718-11.717,12.922-29.955,3.629-43.022
c13.124-12.217,33.667-11.943,46.45,0.838l4.004,4.004c-0.223,0.196-0.447,0.387-0.667,0.59c9.293,13.067,8.09,31.307-3.629,43.022
L82.152,437.8c-2.202,2.202-5.671,2.023-7.916-0.134c-2.184-2.098-5.655-2.071-7.807,0.08l-35.498,35.495
C26.586,477.586,26.576,484.622,30.899,488.981z"/>
<path style="fill:#FFFFFF;" d="M405.441,186.104c3.259,3.265,3.256,8.554-0.006,11.814l-0.789,0.789
c-3.26,3.259-8.544,3.258-11.803-0.003c0,0-0.001-0.001-0.002-0.002c-3.259-3.265-3.256-8.554,0.006-11.814l0.788-0.788
c3.261-3.26,8.544-3.258,11.803,0.002C405.44,186.103,405.441,186.104,405.441,186.104z M475.649,115.904
c-0.001,0-0.001-0.001-0.002-0.002c-3.259-3.261-8.543-3.262-11.803-0.002l-47.33,47.326c-3.261,3.261-3.263,8.55-0.003,11.815
l0.001,0.001c3.259,3.261,8.543,3.262,11.803,0.002l47.33-47.325C478.906,124.457,478.907,119.168,475.649,115.904z"/>
</svg>`;
const bulletPointIcon = `<svg height="20px" width="20px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 447.973 447.973" xml:space="preserve">
<g transform="translate(0 -1020.36)" shape-rendering="auto" image-rendering="auto" color-rendering="auto" color-interpolation="sRGB">
<path style="fill:#EE746C;" d="M224.061,1452.41c-33.913,0-65.824-8.262-94.094-22.625l279.438-279.533
c14.383,28.285,22.656,60.221,22.656,94.156C432.061,1359.377,339.031,1452.41,224.061,1452.41z"/>
<path style="fill:#FFFFFF;" d="M115.467,1421.631c-27.984-17.172-51.498-40.727-68.656-68.721l285.75-285.748
c27.992,17.156,51.548,40.67,68.719,68.656L115.467,1421.631L115.467,1421.631z"/>
<path style="fill:#EE746C;" d="M38.655,1338.379c-14.328-28.242-22.594-60.102-22.594-93.969c0-114.969,93.03-208.002,208-207.998
c33.868,0,65.727,8.264,93.969,22.594L38.655,1338.381V1338.379z"/>
<path style="fill:#EBFEFF;" d="M127.163,1402.537c-24.969-15.322-45.95-36.34-61.26-61.316l254.969-254.969
c24.977,15.309,45.995,36.291,61.316,61.262L127.163,1402.537L127.163,1402.537z"/>
<g>
<path style="fill:#5A3392;" d="M341.698,1178.028l23.976-23.977l-11.339-11.34l-23.976,23.977L341.698,1178.028z"/>
<path style="fill:#5A3392;" d="M305.675,1214.051l23.976-23.977l-11.339-11.34l-23.976,23.979L305.675,1214.051z"/>
<path style="fill:#5A3392;" d="M233.628,1286.098l24.095-24.094l-11.339-11.221l-23.976,23.977L233.628,1286.098L233.628,1286.098
z"/>
<path style="fill:#5A3392;" d="M269.651,1250.074l23.976-23.979l-11.22-11.338l-24.095,23.977L269.651,1250.074z"/>
<path style="fill:#5A3392;" d="M377.722,1142.002l23.976-23.977l-11.339-11.338l-23.976,24.094L377.722,1142V1142.002z"/>
<path style="fill:#5A3392;" d="M197.722,1322.002l23.976-23.977l-11.339-11.338l-23.976,24.094L197.722,1322V1322.002z"/>
<path style="fill:#5A3392;" d="M161.698,1358.028l23.976-23.977l-11.339-11.34l-23.976,23.979L161.698,1358.028z"/>
<path style="fill:#5A3392;" d="M125.675,1394.051l23.976-23.977l-11.339-11.34l-23.976,23.977L125.675,1394.051z"/>
<path style="fill:#5A3392;" d="M93.667,1426.059l19.961-19.961l-11.22-11.34l-20.079,19.961L93.667,1426.059L93.667,1426.059z"/>
<path style="fill:#5A3392;" d="M301.659,1138.108l23.976-24.096l-11.22-11.221l-24.095,23.979l11.339,11.34L301.659,1138.108z"/>
<path style="fill:#5A3392;" d="M265.635,1174.012l24.095-23.977l-11.339-11.34l-23.976,24.096l11.22,11.219V1174.012z"/>
<path style="fill:#5A3392;" d="M193.706,1246.059l23.976-23.977l-11.339-11.34l-23.976,23.977L193.706,1246.059z"/>
<path style="fill:#5A3392;" d="M229.73,1210.035l23.976-23.977l-11.339-11.34l-23.976,23.979L229.73,1210.035z"/>
<path style="fill:#5A3392;" d="M337.683,1102.082l23.976-23.979l-11.339-11.338l-23.976,23.977L337.683,1102.082z"/>
<path style="fill:#5A3392;" d="M157.683,1282.082l23.976-23.979l-11.339-11.338l-23.976,23.977L157.683,1282.082z"/>
<path style="fill:#5A3392;" d="M121.659,1318.106l23.976-24.094l-11.22-11.221l-24.094,23.979l11.339,11.338V1318.106z"/>
<path style="fill:#5A3392;" d="M85.636,1354.012l24.094-23.977l-11.339-11.338l-23.976,24.094L85.636,1354.012z"/>
<path style="fill:#5A3392;" d="M53.628,1386.02l20.079-19.961l-11.339-11.34l-19.961,20.08l11.22,11.219L53.628,1386.02z"/>
</g>
<path style="fill:#FB9761;" d="M229.717,1437.41c103.553,0,187.344-83.793,187.344-187.346c0-30.566-7.452-59.334-20.406-84.811
l-251.688,251.779C170.429,1429.973,199.172,1437.41,229.717,1437.41L229.717,1437.41z"/>
<g>
<path style="fill:#FFFFFF;" d="M213.373,1423.223c-4.418,0-7.999-3.58-8-7.998c0-4.418,3.582-8,8-8h0c4.418,0,8,3.582,8,8l0,0
C221.372,1419.643,217.791,1423.223,213.373,1423.223z"/>
<path style="fill:#FFFFFF;" d="M243.717,1420.004c-4.403,0.205-8.14-3.197-8.345-7.602c-0.041-0.883,0.065-1.768,0.314-2.617
c0.905-3.164,3.66-5.449,6.937-5.752c23.238-2.539,40.232-7.66,56.469-25.686c2.96-3.287,8.025-3.553,11.312-0.594
c3.288,2.959,3.554,8.025,0.594,11.313c-19.115,21.223-41.683,28.154-66.594,30.875c-0.229,0.01-0.459,0.01-0.688,0
L243.717,1420.004z"/>
</g>
<path style="fill:#FB9761;" d="M50.68,1324.237c-12.986-25.598-20.477-54.473-20.477-85.166
c0-104.201,84.316-188.52,188.517-188.518c30.696,0,59.57,7.492,85.167,20.479L50.68,1324.239L50.68,1324.237z"/>
<g>
<path style="fill:#5A3392;" d="M241.176,1467.672c52.681-4.055,103.954-26.678,143.25-67
c78.591-80.643,85.056-207.266,15.094-295.5c-69.963-88.235-194.752-110.795-291.188-52.658c-3.83,2.203-5.149,7.094-2.945,10.924
c2.203,3.832,7.095,5.15,10.925,2.945c0.102-0.059,0.203-0.119,0.302-0.182c89.651-54.048,205.335-33.12,270.375,48.906
c65.04,82.025,59.031,199.436-14.031,274.404s-190.263,83.998-273.938,21.094s-107.595-178.018-55.875-269.031
c2.279-3.785,1.057-8.701-2.729-10.98s-8.702-1.059-10.981,2.729c-0.068,0.113-0.134,0.229-0.197,0.346
c-55.635,97.902-29.852,222.053,60.156,289.719c45.004,33.834,99.1,48.338,151.781,44.281V1467.672z"/>
<path style="fill:#5A3392;" d="M52.332,1120.86c2.633,0.1,5.145-1.104,6.719-3.217c8.357-10.881,17.762-20.912,28.094-29.938
c3.436-2.777,3.97-7.816,1.192-11.252c-2.778-3.436-7.815-3.971-11.252-1.191c-0.163,0.131-0.32,0.268-0.472,0.412
c-11.126,9.721-21.25,20.502-30.25,32.219c-2.747,3.461-2.168,8.494,1.294,11.24c1.335,1.059,2.973,1.664,4.675,1.729V1120.86z"/>
<g>
<path style="fill:#5A3392;" d="M406.082,1131.11l-295.219,295.031l11.313,11.344l295.219-295.063L406.082,1131.11z"/>
<path style="fill:#5A3392;" d="M328.582,1048.485L33.363,1343.516l11.313,11.344l295.219-295.063L328.582,1048.485z"/>
</g>
</g>
</g>
</svg>`;
const wicketSvg = `<svg fill="#000000" height="50px" width="50px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 400 400" xml:space="preserve">
<g transform="translate(0 -540.36)">
<g>
<g>
<path d="M79.55,588.46h-15.6v-0.1c-13.2,0-24,10.8-24,24v328h15.6v-327.9c0-4.8,3.6-8.4,8.4-8.4h15.6c4.8,0,8.4,3.6,8.4,8.4
v327.9h15.6v-327.9C103.55,599.26,92.75,588.46,79.55,588.46z"/>
<path d="M336.05,588.46h-16.8v-0.1c-13.2,0-24,10.8-24,24v328h16.8v-327.9c0-4.8,2.4-8.4,7.2-8.4h16.8c3.6,0,7.2,3.6,7.2,8.4
v327.9h16.8v-327.9C360.05,599.26,349.25,588.46,336.05,588.46z"/>
<path d="M207.75,588.46h-15.6v-0.1c-13.2,0-24,10.8-24,24v328h15.6v-327.9c0-4.8,3.6-8.4,8.4-8.4h15.6c4.8,0,8.4,3.6,8.4,8.4
v327.9h15.6v-327.9C231.75,599.26,220.95,588.46,207.75,588.46z"/>
<path d="M64.05,572.76h24v7.2c0,4.8,3.6,8.4,8.4,8.4h79.1c4.8,0,8.4-3.6,8.4-8.4v-7.2h32.4v7.2c0,4.8,3.6,8.4,7.2,8.4h80.3
c4.8,0,8.4-3.6,8.4-8.4v-7.2h24c10.8,0,10.8-16.8,0-16.8h-24v-7.2c0-4.8-3.6-8.4-8.4-8.4h-80.3c-3.6,0-7.2,3.6-7.2,8.4v7.2h-32.4
v-7.2c0-4.8-3.6-8.4-8.4-8.4h-79.1c-1.2,0-1.2,0-1.2,0c-3.6,0-7.2,3.6-7.2,8.4v7.2h-24c0,0,0,0-1.2,0
C52.05,557.16,53.25,572.76,64.05,572.76z M232.05,555.96h63.5v16.8h-63.5V555.96z M103.85,555.96h64.7v16.8h-64.7V555.96z"/>
</g>
</g>
</g>
</svg>`;
const btn = document.createElement("div");
btn.innerText = "Go to Top";
btn.classList.add("top-button");
btn.innerHTML = goToTopSvg;
document.body.appendChild(btn);
const scrollToTop = () => {
window.scrollTo({ top: 0, behavior: "smooth" });
};
btn.addEventListener("click", scrollToTop);
const wicketIcon = document.createElement("div");
wicketIcon.innerHTML = wicketSvg;
document.getElementById("about").appendChild(wicketIcon);
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.