devxcode-mar2025/home.html at master · srisanth15-dot/devxcode-mar2025 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mind Haven</title>
  <link rel="stylesheet" href="styles.css">
  <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=Montserrat:ital,wght@0,762;1,762&display=swap" rel="stylesheet">
  <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=Libre+Franklin:ital,wght@0,100..900;1,100..900&family=Montserrat:ital,wght@0,800;1,800&display=swap" rel="stylesheet">
</head>

<body>
  <nav>
    <div class="navbar">
      <div class="logo">Mind Haven</div>
      <ul class="nav-links">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Login</a></li>
        <li><a href="#">Buddy</a></li>
        <li><a href="#">Journaling</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </div>
  </nav>


  <section class="hero">
    <!-- <img src="/images/img.icons8.com.png" alt="Cloud Top" class="cloud cloud-top"> -->
    <h1>DISASTER </h1>
    <!-- <img src="cloud-2421760_1280.png" alt="Cloud Bottom" class="cloud cloud-bottom"> -->
  </section>
  <div class="slider-container">
    <div class="slider-text high">
      Finding Peace • Building Resilience • Growing Together • Supporting Each Other
    </div>
  </div>

  <div class="topic-container">
    <section class="content">
      <h2>Why Disaster Management?</h2>

        <p>
          We are a team of three, and like many others, we have witnessed the devastating impact of disasters—both natural and man-made.
          Some of us have seen communities torn apart by floods and earthquakes, while others have experienced the silent destruction of slow-moving crises like droughts and environmental degradation.
          </p>


      <p>
        But we are not alone in this. Our world is facing an increasing number of disasters, bringing loss, displacement, and hardship to millions. The unpredictability of these events, the lack of preparedness, and the overwhelming challenge of recovery—it all weighs heavily on society.
        </p>

        <p>
          This platform wasn't born out of a mere good idea. It was born out of necessity. We created it because we need better awareness, preparedness, and response strategies to minimize suffering and save lives. If we, as the creators, can spread knowledge and encourage proactive measures, then perhaps—just perhaps—it can help communities become more resilient in the face of disasters.
          </p>

          <p>
            This is more than just a platform; it's a call to action. A space where preparedness is prioritized, where no one has to face a disaster alone, and where we can all work together to build a safer, more resilient world.
            </p>

    </section>
    <div class="image-grid">
      <div class="img1">
        <img src="peace-man.jpg" alt="Image 1">
      </div>
      <div class="img2">
        <img src="485fa8c22f0d9cd991a046b9167cbb9e.jpg" alt="Image 2">
      </div>
      <div class="img3">
        <img src="58a8393f51657b96060533546b5a5a44.jpg" alt="Image 3">
      </div>
    </div>
  </div>
</div>

  <script src="script.js"></script>
</body>

</html>