page4.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">
    <title>Green Tips</title>
    <link rel="shortcut icon" href="logo.png">
    <link rel="stylesheet" href="page4.css">
    
</head>
<body>
    <!-- header html -->


 <div class="background-section">
    <header>
        <div class="header-content">

        <span class = 'logo'>
            <img src="logo (1).png" alt="">
        </span>
        <nav class="nav-options">
            <a href="EcoSort.html">EcoSort</a>
            <a href="page3.html">CarbonCalc</a>
            <a href="page4.html">Green Tips</a>
        </nav>
  
    </div>
    </header>
</div>
    <div class="container">
        <h1 class="title">Green Tips</h1>
        <div class="tips-grid">
            <div class="tip-card">
                <img src="compost.png" alt="Composting">
                <h2>Composting</h2>
                <p>Composting reduces waste and enriches soil.</p>
            </div>
            <div class="tip-card">
                <img src="go_paperless.png" alt="Encourage Digital Solutions">
                <h2>Encourage Digital Solutions</h2>
                <p>Store files digitally to minimize the need for physical storage.</p>
            </div>
            <div class="tip-card">
                <img src="food.png" alt="Reuse and Repurpose">
                <h2>Reuse and Repurpose</h2>
                <p>Carry reusable shopping bags to reduce plastic waste.</p>
            </div>
            <div class="tip-card">
                <img src="gadgets.png" alt="Optimize Energy Use">
                <h2>Optimize Energy Use</h2>
                <p>Choose appliances that reduce both energy and waste.</p>
            </div>
            <div class="tip-card">
                <img src="food.png" alt="Food Preservation">
                <h2>Food Preservation</h2>
                <p>Use canning, freezing, or drying to preserve surplus fruits and vegetables.</p>
            </div>
            <div class="tip-card">
                <img src="educate.png" alt="Educate Yourself and Others">
                <h2>Educate Yourself and Others</h2>
                <p>Share your waste reduction journey on social media to inspire others.</p>
            </div>
        </div>
    </div>
</body>
</html>