-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
186 lines (173 loc) · 6.68 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>New York Recreational Cricket League</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<!-- Skew Menu -->
<div class="skew-menu">
<ul>
<li class="join"><a href="#join">Join Now</a></li>
<li><a href="#contact">Contact Us</a></li>
<li><a href="#schedule">Schedule</a></li>
</ul>
</div>
<!-- Nav Bar -->
<div class="top">
<div class="logo">
<img src="logo.png" alt="New York Recreational Cricket League Logo" />
</div>
<nav>
<a href="#">Home</a>
<a href="#about">About</a>
<a href="#venue">Venue</a>
<a href="#schedule">Schedule</a>
<a href="#fees">Fees</a>
<div class="animation start-home"></div>
</nav>
</div>
<!-- content -->
<div class="content">
<div class="wrapper">
<header class="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>
<figure class="featured-image-1">
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSLSixyD56I8Mjf0AQbpJtQk8tbleHSPWh9aA&usqp=CAU"
/>
</figure>
<article id="about" class="article article-1">
<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>
</article>
<figure class="featured-image-2">
<img
src="https://akm-img-a-in.tosshub.com/indiatoday/images/story/202401/usa-u19-cricket-team-290247803-16x9_0.jpeg?VersionId=f0uMhyOCnUDWgsm2KzyZQUz4BNQnq4G2"
/>
</figure>
</div>
</div>
<div class="details">
<div class="pricing-table">
<div class="pricing-option">
<i id="join" class="material-icons">How to Join</i>
<h1>Apply</h1>
<hr />
<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 <b>[email protected]</b> for more details.
</p>
<hr />
<div class="price">
<div class="back">
<a href="#" class="button">Join now</a>
</div>
</div>
</div>
<div class="pricing-option">
<i id="fees" class="material-icons">League Fees</i>
<h1>Registration Fees</h1>
<hr />
<p>
The registration fee covers the entire season. This fee includes <b>uniforms, equipment rental, and insurance.</b>
</p>
<hr />
<div class="price">
<div class="front">
<span class="price">150<b>$</b></span> per Player
</div>
<div class="back">
<a href="#" class="button">Register now</a>
</div>
</div>
</div>
</div>
</div>
<div class="event-location">
<h2 id="venue" class="section-title" style="color: #002d73;">Event Locations</h2>
<div class="locations">
<div class="location">
<img src="https://i0.wp.com/w42st.com/wp-content/uploads/2023/07/Cricket-New-York-Montage.jpg?fit=1920%2C1080&ssl=1" alt="Location 1">
<div class="location-info">
<h3>Central Park Cricket Fields</h3>
<p>located near the north end of Central Park <br>
(easily accessible via public transportation)
</p>
</div>
</div>
</div>
</div>
<!-- Timeline -->
<div id="schedule" class="timeline">
<h1 ><span>Season'24</span> Schedule</h1>
<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 style="--accent-color: #b82811">
<div class="date">April 15th</div>
<div class="title">Opening Day</div>
</li>
<li style="--accent-color: #002d73">
<div class="date">July 8th-9th</div>
<div class="title">Mid-Season Tournament</div>
</li>
<li style="--accent-color: #b82811">
<div class="date">September 20th</div>
<div class="title">Season Finals</div>
</li>
<li style="--accent-color: #002d73">
<div class="date">September 30th</div>
<div class="title">Closing Ceremony</div>
</li>
</ul>
</div>
<!-- Description -->
<div class="description">
<p style="text-align: center; font-size: 20px;">This website is created as a Submission for Frontend Dev Challenge v24.07.24 and issued under MIT license and feel free to use the code. For Source Code visit <a style="color: #b82811;" href="https://github.com/ravixalgorithm/Frontend-DEV-Challenge-Recreation-Edition"><b>Github</b></a></p>
</div>
<!-- footer -->
<footer class="site-footer">
<div class="footer-content">
<div class="footer-section logo">
<img src="logo.png" alt="Logo">
</div>
<div class="footer-section links">
<h3 style="color: #b82811 ;">Quick Links</h3>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#join">Join</a></li>
<li><a href="#schedule">Schedule</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>
<div class="footer-section social">
<h3 style="color: #b82811 ;">Follow Now</h3>
<ul>
<li><a href="https://github.com/ravixalgorithm" target="_blank">GitHub</a></li>
<li><a href="https://twitter.com/ravixalgorithm" target="_blank">Twitter</a></li>
<li><a href="https://dev.to/ravixalgorithm" target="_blank">DEV.to</a></li>
<li><a href="https://www.linkedin.com/in/ravixalgorithm/" target="_blank">LinkedIn</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2024 Mr.Algorithm. All rights reserved under MIT License. For Source code do visit Github</p>
</div>
</footer>
<script src="scripts.js"></script>
</body>
</html>