index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TSF Task</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="main.js"></script>

</head>
<body>
   <div class="container">
    <div class="navbar">
        <img src="images/logo.png" class="logo"> <!--sparks logo-->
        <nav>
            <ul>                               <!--navigation bar-->
                <li><a href="">HOME</a></li>     
            </ul>
        </nav>
        <img src="images/menu.png" class="menu-icon">    <!--menu icon-->
    </div>


   <div class="row">
    <div class="col">
        <h1>Make a difference!</h1>
        <p>The knowledge that you’re helping others is hugely empowering and, in turn, can make you feel happier and more fulfilled. Having the power to improve the lives of others is, to many people, a privilege, and one that comes with its own sense of obligation. 
            Family giving creates a bond, helping to bolster relationships through a shared goal and often raises more money than could otherwise be possible through individual donations. </p>
        <button onclick="welcome()"><b>DONATE</b></button>
    </div>
    <div class="col">
      <div class="card card1">
        <h5>Unity</h5>
        <p>Giving to charity builds and strengthens community </p>
      </div>
      <div class="card card2">
        <h5>Empathy</h5>
        <p>Giving to charity strengthens personal values. </p>
      </div>
      <div class="card card3">
        <h5>Compassion</h5>
        <p>Giving to charity makes you feel good.</p>
      </div>
      <div class="card card4">
        <h5>Social Kindliness</h5>
        <p>Giving can reintroduce friends and family to the generosity</p>
      </div>
    </div>
   </div>

    
</body>
</html>