This is a submission for Frontend Challenge v24.04.17, CSS Art: June.
Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Best Beaches in the World</title>
<style>
body, html {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background: #f0f8ff;
color: #333;
}
header {
background: url('header-beach.jpg') no-repeat center center/cover;
color: white;
text-align: center;
padding: 2rem 1rem;
}
header h1 {
transition: transform 0.3s ease, background-image 0.3s ease;
display: inline-block;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
background-image: linear-gradient(45deg, #ff6347, #ffcc33);
}
header h1:hover {
transform: scale(1.1);
background-image: linear-gradient(45deg, #00c6ff, #0072ff);
}
main {
padding: 2rem;
max-width: 1200px;
margin: auto;
}
section {
margin-bottom: 2rem;
}
h2 {
border-bottom: 2px solid #333;
padding-bottom: 0.5rem;
}
ul {
list-style: none;
padding: 0;
}
li {
background: white;
margin: 1rem 0;
padding: 1rem;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s;
}
li:hover {
transform: scale(1.05);
}
li h3 {
margin: 0 0 0.5rem 0;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
background-image: linear-gradient(45deg, #ff6347, #ffcc33);
transition: background-image 0.3s ease;
}
li h3:hover {
background-image: linear-gradient(45deg, #00c6ff, #0072ff);
}
li p {
margin: 0;
}
@media (min-width: 768px) {
ul {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
li {
flex: 1 1 calc(33.333% - 2rem);
}
}
</style>
</head>
<body>
<header role="banner">
<h1>Best Beaches in the World</h1>
</header>
<main>
<section>
<h2>Take me to the beach!</h2>
<p>Welcome to our curated list of the best beaches in the world. Whether you're looking for serene white sands, crystal-clear waters, or breathtaking scenery, these beaches offer a little something for everyone. Explore our top picks and discover the beauty that awaits you.</p>
</section>
<section>
<h2>Top Beaches</h2>
<ul>
<li>
<h3>Whitehaven Beach, Australia</h3>
<p>Located on Whitsunday Island, Whitehaven Beach is famous for its stunning white silica sand and turquoise waters. It's a perfect spot for swimming, sunbathing, and enjoying the natural beauty of the Great Barrier Reef.</p>
</li>
<li>
<h3>Grace Bay, Turks and Caicos</h3>
<p>Grace Bay is known for its calm, clear waters and powdery white sand. This beach is ideal for snorkeling, diving, and enjoying luxury resorts that line its shore.</p>
</li>
<li>
<h3>Baia do Sancho, Brazil</h3>
<p>Baia do Sancho, located on Fernando de Noronha island, offers stunning cliffs, vibrant marine life, and crystal-clear waters, making it a paradise for divers and nature lovers.</p>
</li>
<li>
<h3>Navagio Beach, Greece</h3>
<p>Also known as Shipwreck Beach, Navagio Beach is famous for the rusting shipwreck that rests on its sands. Accessible only by boat, this secluded cove is surrounded by towering cliffs and azure waters.</p>
</li>
<li>
<h3>Playa Paraiso, Mexico</h3>
<p>Playa Paraiso, located in Tulum, offers pristine white sands and turquoise waters against the backdrop of ancient Mayan ruins. It's a perfect blend of history and natural beauty.</p>
</li>
<li>
<h3>Anse Source d'Argent, Seychelles</h3>
<p>Anse Source d'Argent is renowned for its unique granite boulders, shallow clear waters, and soft white sand. This beach is perfect for photography, snorkeling, and relaxation.</p>
</li>
<li>
<h3>Seven Mile Beach, Cayman Islands</h3>
<p>Stretching for seven miles, this beach offers soft coral sand, clear waters, and numerous activities such as snorkeling, paddleboarding, and enjoying beachside restaurants and bars.</p>
</li>
<li>
<h3>Bora Bora, French Polynesia</h3>
<p>Bora Bora is known for its stunning lagoon, overwater bungalows, and vibrant coral reefs. It's a perfect destination for honeymooners and those seeking luxury and tranquility.</p>
</li>
<li>
<h3>Lanikai Beach, Hawaii</h3>
<p>Lanikai Beach features powdery white sand and calm, clear waters, making it a favorite for swimming, kayaking, and enjoying the scenic views of the Mokulua Islands.</p>
</li>
<li>
<h3>Pink Sands Beach, Bahamas</h3>
<p>Pink Sands Beach is famous for its unique pink-hued sand, clear waters, and serene atmosphere. It's an idyllic spot for beachcombing, swimming, and relaxing in paradise.</p>
</li>
</ul>
</section>
</main>
</body>
</html>
Process
The journey to create this project began with a clear vision to transform a simple HTML template into a visually appealing, interactive, and accessible website. Here’s a breakdown of the steps taken:
- Initial Setup: I started with the provided HTML template, which included basic information about the best beaches in the world.
- Design and Layout: Using CSS, I designed a layout that is responsive and visually engaging. The goal was to create a clean and inviting look that complements the beach theme.
- Header Design: A beach-themed header image was used to set the tone. I applied CSS styles to center the text and make it visually striking.
- Text Styling: To add a dynamic touch, I used linear gradients for the text in the header and beach names. This included creating hover effects to make the text interactive.
- Responsiveness: Ensured that the layout adapts well to different screen sizes using media queries. This involved creating a flexible grid for the list of beaches.
- Hover Effects: Implemented smooth hover effects on the beach names and the header title to enhance user interaction.
- Accessibility: Considered accessibility by ensuring text readability, appropriate color contrasts, and a clean, navigable structure.
What I Learned
- CSS Gradients: How to apply linear gradients to text and make them look good.
- Responsive Design: Improved skills in making layouts responsive using media queries and flexible units.
- CSS Transitions: Gained a better understanding of how to create smooth transitions for hover effects.
- Accessibility: Learned the importance of making websites accessible and the techniques to achieve it.
Proud Moments
- Visual Appeal: I am particularly proud of the visual appeal created by the gradients and hover effects. They add a layer of sophistication and interactivity to the site.
- Responsiveness: Ensuring the site looks good on various devices was challenging but rewarding. The flexible layout enhances the user experience across different screen sizes.
- Smooth Interactions: The transitions and hover effects work seamlessly, making the site feel more interactive and engaging.
Next Steps
- JavaScript Interactivity: I hope to add more JavaScript features to enhance interactivity, such as animations and dynamic content loading.
- Additional Content: Including more detailed information, photos, and user reviews for each beach could provide a richer experience.
- Performance Optimization: Optimizing images and CSS to ensure faster load times and smoother performance.
- Further Accessibility Improvements: Continuously improving accessibility features to ensure the site is usable by everyone.
Team Credits
While this project was a solo endeavor, I would like to acknowledge the supportive community at DEV for their resources and inspiration. If this were a team submission, teammates would be credited here.
License
This code is open-source and can be used freely with proper attribution. Feel free to modify and improve it for your projects.
Thank you for reading about my journey in the Frontend Challenge. It was a fun and educational experience, and I hope you enjoy the final product!
I you need any advise or give advise than DM me on Linkedin Syed Muhammad Ali Raza
Top comments (0)