This is a submission for Frontend Challenge v24.07.24, CSS Art: Recreation.
Inspiration
Creating a website for the New York Recreational Cricket League was a fantastic opportunity to combine my passion for web development with the vibrant spirit of recreational sports. I aimed to create a lively and engaging online presence that reflects the community and enthusiasm around cricket.
Demo
You can view the live site https://vickyfyn3.github.io/new-york/. Below are some screenshots showcasing various sections of the website:
Home Page
About Section
Services Section
Contact Section
Journey
The journey of building the New York Recreational Cricket League website involved several key steps and learning experiences:
Planning and Design
I began by outlining the core sections of the website: Home, About, Services, and Contact Us. My goal was to ensure the site was user-friendly, visually appealing, and aligned with the league's dynamic nature. I used Font Awesome for icons and designed a responsive navigation bar that enhances the user experience.
Building with Flexbox
For the About section, I implemented Flexbox to display the cards in a row, making the design more cohesive and engaging. This approach allowed for a responsive layout that adapts well to different screen sizes.
Theming and Styling
Ensuring consistency in the color scheme and design elements was crucial. I carefully selected colors and styles that reflect the energetic and welcoming environment of the cricket league. I also used the fa-dumbbell
Font Awesome icon to creatively represent cricket training in the Services section.
Enhancing the Contact Section
To make the Contact section stand out, I designed a stylish contact form with fields for Name, Email, Subject, and Message. I used a bold Submit button with a gradient background for a modern touch. Additionally, I included contact details in a card layout with distinct backgrounds and embedded an interactive map for easy location access.
Challenges and Solutions
One of the challenges was ensuring the navbar remained fixed while scrolling. I achieved this by using CSS properties:
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
background-color: #333;
color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
}
Additionally, I adjusted the content below the navbar to prevent it from being hidden:
.content {
margin-top: 60px; /* Adjust based on the height of your navbar */
}
Future Plans
Moving forward, I plan to add more interactive features and further optimize the website for performance. I also hope to gather feedback from the cricket league community to continuously improve the site.
Top comments (0)