🌊 Huddle Landing Page with Curved Sections – Frontend Mentor Challenge

A responsive landing page built as part of a Frontend Mentor challenge, focused on modern layout techniques, responsive images, and performance-friendly design using only HTML and CSS.

---

👀 Why This Project Stands Out

• Built from an official Frontend Mentor real-world challenge
• Fully responsive landing page with curved SVG sections
• Uses the <picture> element to serve different images based on device size
• Performance-friendly approach with no JavaScript
• Clean, modern UI with strong typography and spacing
• Demonstrates attention to accessibility, responsiveness, and scalability

---

🛠️ Tech Stack

• HTML5 – Semantic markup and accessible structure
• CSS3 – Flexbox, media queries, custom properties (CSS variables)
• Responsive Images – <picture> and srcset for device-based image switching
• Google Fonts – Poppins & Open Sans
• Font Awesome – Social media icons
• Frontend Mentor Design Assets

---

✨ Features

• Fully responsive layout (mobile, tablet, desktop)
• Curved section dividers using SVG images
• Device-specific images for better performance
• Mobile-first CSS architecture
• Newsletter subscription UI
• Accessible form elements and semantic HTML
• Hover and active states for interactive elements
• No JavaScript required

---

🧠 What I Learned

• How to implement responsive images using <picture> and media queries
• Structuring HTML for complex landing page layouts
• Managing SVG backgrounds and curved sections
• Writing scalable, maintainable CSS
• Using CSS variables for consistent theming
• Improving performance by serving optimised assets per screen size
• Translating a detailed design mockup into a polished, responsive UI

📌 This project was an excellent exercise in responsive design and performance optimisation, especially learning how to switch images based on screen size without relying on JavaScript.

---

⚙️ How to Run Locally

1. Clone the repository

   git clone https://github.com/FrontEndHighRoller/huddle-landing-page-with-curved-section-master.git

2. Open index.html in your browser
3. Resize the screen to see responsive layouts and image switching in action 🎯

---

🙋‍♂️ Author Dennis Rumanek

GitHub: https://github.com/FrontEndHighRoller

LinkedIn: https://www.linkedin.com/in/dennis-rumanek/

⭐ If you like this solution, feel free to star the repository!