templates/blog2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10 Low-Maintenance Plants for Busy Homeowners</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
        
        body {
            font-family: 'Poppins', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f9;
            color: #333;
            line-height: 1.6;
        }

        /* Navbar styling */
        .navbar {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 15px;
            background-color: #fff;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .navbar a {
            color: #555;
            text-decoration: none;
            font-size: 18px;
            padding: 10px 20px;
            transition: background-color 0.3s ease;
        }

        .navbar a:hover {
            background-color: #e0f7fa;
            border-radius: 5px;
        }

        /* Progress Bar */
        .progress-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 8px;
            background-color: #e0f7fa;
            z-index: 10;
        }

        .progress-bar {
            height: 100%;
            width: 0;
            background-color: #76c7c0;
        }

        .emoji {
            position: fixed;
            top: 12px;
            right: 20px;
            font-size: 1.5rem;
        }

        /* Blog container */
        .container {
            max-width: 800px;
            margin: 50px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        h1, h2 {
            text-align: center;
            color: #333;
        }

        h1 {
            font-size: 2rem;
            margin-bottom: 20px;
        }

        h2 {
            margin-top: 20px;
            font-size: 1.5rem;
        }

        p, li {
            font-size: 1rem;
        }

        ul {
            list-style-type: none;
            padding: 0;
        }

        ul li {
            background: #f9f9f9;
            padding: 10px;
            margin: 10px 0;
            border-radius: 5px;
            transition: transform 0.3s, box-shadow 0.3s;
        }

        ul li:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
        }

        footer {
            text-align: center;
            padding: 20px;
            margin-top: 50px;
            background-color: #f4f4f9;
            color: #555;
        }
    </style>
</head>
<body>

    <!-- Progress bar and Emoji -->
    <div class="progress-container">
        <div class="progress-bar"></div>
    </div>
    <div class="emoji">😐</div>

    <!-- Navbar -->
    <nav class="navbar">
        <div class="navbar-links">
            <a href="/"><i class="fas fa-home"></i> Home</a>
            <a href="/blogs"><i class="fas fa-blog"></i> Blogs</a>
        </div>
    </nav>

    <!-- Blog Content -->
    <div class="container">
        <p>Electrical safety is a crucial aspect of home maintenance that often goes overlooked. As a homeowner, understanding and implementing basic electrical safety practices can prevent accidents, fires, and costly damages. In this guide, we'll explore essential electrical safety tips to keep your home and family protected.</p>

        <h2>1. Regular Inspections</h2>
        <p>Conduct regular visual inspections of your home's electrical system:</p>
        <ul>
            <li>Look for frayed wires, loose outlets, or damaged cords</li>
            <li>Check for warm or discolored outlet covers, which may indicate overheating</li>
            <li>Ensure all outlet and switch plates are intact and not cracked</li>
        </ul>

        <h2>2. GFCI Protection</h2>
        <p>Ground Fault Circuit Interrupters (GFCIs) are crucial safety devices:</p>
        <ul>
            <li>Install GFCI outlets in areas near water sources (kitchen, bathrooms, laundry rooms, outdoors)</li>
            <li>Test GFCI outlets monthly using the built-in test and reset buttons</li>
            <li>Replace old or non-functioning GFCI outlets immediately</li>
        </ul>

        <h2>3. Avoid Overloading Circuits</h2>
        <p>Overloaded circuits are a common cause of electrical fires:</p>
        <ul>
            <li>Limit the number of high-wattage devices on a single circuit</li>
            <li>Use power strips with built-in circuit breakers for added protection</li>
            <li>Be cautious of daisy-chaining multiple power strips</li>
        </ul>

        <h2>4. Proper Use of Extension Cords</h2>
        <p>Extension cords should be used safely and temporarily:</p>
        <ul>
            <li>Never run extension cords under carpets or through walls</li>
            <li>Use the correct gauge cord for the intended use (heavier gauge for high-wattage appliances)</li>
            <li>Replace damaged or frayed extension cords immediately</li>
        </ul>

        <h2>5. Childproofing</h2>
        <p>Protect young children from electrical hazards:</p>
        <ul>
            <li>Install tamper-resistant outlets or use outlet covers</li>
            <li>Keep electrical cords out of reach</li>
            <li>Teach children about electrical safety from an early age</li>
        </ul>

        <h2>6. Water and Electricity Don't Mix</h2>
        <p>Always keep electrical devices away from water:</p>
        <ul>
            <li>Never use electrical appliances near sinks, bathtubs, or pools</li>
            <li>Keep outdoor electrical equipment protected from rain and moisture</li>
            <li>Teach family members to unplug appliances before cleaning them</li>
        </ul>

        <h2>7. Proper Lighting</h2>
        <p>Use the right bulbs and fixtures for safety:</p>
        <ul>
            <li>Never exceed the recommended wattage for light fixtures</li>
            <li>Ensure lamps are stable and placed away from flammable materials</li>
            <li>Consider switching to LED bulbs for energy efficiency and reduced heat output</li>
        </ul>

        <h2>8. Know Your Limits</h2>
        <p>Recognize when to call a professional:</p>
        <ul>
            <li>Leave complex electrical work to licensed electricians</li>
            <li>If you experience frequent circuit breaker trips, consult an expert</li>
            <li>Have your home's electrical system inspected every 5-10 years</li>
        </ul>

        <h2>9. Emergency Preparedness</h2>
        <p>Be ready for electrical emergencies:</p>
        <ul>
            <li>Know the location of your main circuit breaker and how to shut off power</li>
            <li>Keep a fire extinguisher rated for electrical fires easily accessible</li>
            <li>Ensure all family members know how to respond to an electrical emergency</li>
        </ul>

        <h2>Conclusion</h2>
        <p>Electrical safety is an ongoing commitment that requires awareness and proactive measures. By implementing these tips, you can significantly reduce the risk of electrical hazards in your home. Remember, when in doubt, always consult with a qualified electrician. Your family's safety is worth the investment in proper electrical maintenance and upgrades.</p>
    </div>
    <footer>
        <p>© 2024 GrihaSeva. All rights reserved.</p>
    </footer>

    <!-- JavaScript for Progress Bar and Emoji -->
    <script>
        window.onscroll = function() {scrollProgress()};

        function scrollProgress() {
            var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
            var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
            var scrolled = (winScroll / height) * 100;
            document.querySelector('.progress-bar').style.width = scrolled + "%";
            
            // Emoji change based on scroll percentage
            var emojiElement = document.querySelector('.emoji');
            if (scrolled < 30) {
                emojiElement.textContent = '😐'; // Neutral face
            } else if (scrolled < 60) {
                emojiElement.textContent = '🙂'; // Slightly happy face
            } else {
                emojiElement.textContent = '😁'; // Very happy face
            }
        }
    </script>

</body>
</html>