FloodSafety

Inspiration Floods don’t knock before entering. They just arrive and take everything. Growing up in a place where monsoon floods happen every year, we saw families lose their homes, health, and hope. This wasn’t due to bad luck; it was a lack of information. A simple piece of advice—“don’t walk through 6 inches of moving water”—could have saved lives. That feeling of helplessness fueled us. We wondered: what if awareness could be a life jacket? That’s how FloodSafety was created. What It Does FloodSafety is a structured, chapter-based web guide. It helps everyday people prepare for floods before, during, and after a disaster. It covers everything from first aid for flood injuries and preventing waterborne diseases to preparing emergency kits and safe evacuation strategies. All this information is presented in a clean, calm, and accessible format that works on any device. How We Built It We kept it simple and focused on people. We used basic HTML, CSS, and vanilla JavaScript—no frameworks or unnecessary additions. Every design choice aimed to answer one question: can a panicked person in a flood zone understand this in five seconds? The site has dynamic chapter cards made with JavaScript, a modal-based learning system, mobile navigation that adjusts well, and a soothing blue design that conveys trust and calm during chaos. Challenges We Ran Into The biggest challenge wasn’t technical; it was editorial. Flood safety information is extensive and often hidden in government PDFs. Turning it into content that is clear, concise, and emotionally relatable took much more effort than the coding itself. On the technical side, we faced the challenge of creating a smooth modal experience and a responsive layout that felt refined, all without using a CSS framework. This pushed us to think creatively about using pure CSS. Accomplishments That We're Proud Of We’re proud that FloodSafety feels human. It doesn’t look or read like a government brochure or a Wikipedia page. Instead, it reads like a knowledgeable friend guiding you through a crisis. We’re also proud of creating a fully functional, multi-page website with no dependencies. It’s lightweight enough to load even on slow internet connections, which often struggle during disasters. What We Learned We learned that design is an act of empathy. Every font size, color choice, and word used reflects how much you respect your user’s stress and time. We also discovered that the most effective tech solutions aren’t always the most complex. Sometimes, a well-structured HTML page given at the right moment is more powerful than any app. What's Next for FloodSafety Our vision extends beyond just a website. Next, we want to add real-time flood alerts using weather APIs, support multiple languages starting with Hindi and regional Indian languages, develop an offline-first PWA version so it can be used without internet during disasters, and work with local NGOs and disaster management authorities to reach more people. Survival shouldn’t depend on access to better internet or education; it should be a right—and FloodSafety is our step towards making it one.

Built With

• css-&-vanilla-js-?-no-frameworks
• html
• javascript
• scc