LinkWell/index.html at main · Tejaswiseelam/LinkWell · 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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LinkWell</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://kit.fontawesome.com/3d0d779f21.js" crossorigin="anonymous"></script>
</head>
<body>

      <div id="header">
        <div class="container">
            <nav>

                <img src="logo.png" class="logo">
                <ul>
                    <li><a href="#header">HOME</a></li>
                    <li><a href="#about">ABOUT</a></li>
                    <li><a href="#services">SERVICES</a></li>
                    <li><a href="#contact">GET INVOLVED</a></li>

                </ul>
            </nav>
            <div class="header-text">
                <h1>Connecting Communities for <br> <span>Clean Water</span> and <span>Sanitation</span></h1>
            </div>
        </div>
   </div>
   <!--About Section-->
   <div id="about">
    <div class="container">
        <div class="row">
            <div class="about-col-1">
                <img src="img.jpg">
            </div>
            <div class="about-col-2">
                <h1 class="sub-title">About Us</h1>
                <p>At LinkWell, we believe that access to clean water and proper sanitation is not a privilege but a basic human right.
                    Our mission is to connect communities in remote and underprivileged areas with individuals, volunteers, and organizations
                    who want to make a difference.
                     Through our platform, we bridge the gap between those in need and those willing to help by fostering transparency, collaboration,
                      and real impact. Every project you support or participate in is tracked and shared, so you can see the lives you have helped transform.
                      Together, we can create a world where clean water and sanitation are available to every one connection at a time.</p>
              <div class="tab-titles">
                <p class="tab-links active-link" onclick="opentab('trust')">Trust</p>
                <p class="tab-links" onclick="opentab('connect')">Connect</p>
                <p class="tab-links" onclick="opentab('sustain')">Sustain</p>
                <p class="tab-links" onclick="opentab('impact')">Impact</p>
            </div>
            <div class="tab-contents active-tab" id="trust">
                <ul>
                    <li><span>Transparency in donations and projects</span><br>By tracking every project, donation, and effort, so you see the direct impact of your contributions.</li>
                    <li><span>Linking volunteers, donors, and communities</span><br>Our platform bridges the gap between communities in need and those ready to help, fostering collaboration for real change.</li>
                    <li><span>Building systems that last for generations.
                    </span><br>To ensure long-term access to clean water and proper sanitation.</li>
                    <li><span>Transforming lives one drop at a time.</span><br>Every action counts. Together, we are building a world where everyone has access to lifes most essential resources.</li>

                </ul>
            </div>
            <div class="tab-contents" id="connect">
                <ul>
                    <li><span>Transparency in donations and projects</span><br>By tracking every project, donation, and effort, so you see the direct impact of your contributions.</li>
                    <li><span>Track every action in real-time</span><br>From the moment an issue is reported to its resolution, our platform provides live updates to keep you informed.</li>
                    <li><span>Building systems that last for generations.
                    </span><br>To ensure long-term access to clean water and proper sanitation.</li>
                    <li><span>Accountability you can rely on</span><br>We are committed to earning your trust by ensuring that all activities are monitored and verified for authenticity.</li>

                </ul>
            </div>
            <div class="tab-contents" id="sustain">
                <ul>
                    <li><span>Linking volunteers, donors, and communities</span><br>Our platform bridges the gap between communities in need and those ready to help, fostering collaboration for real change.</li>
                    <li><span>Bridging gaps through collaboration</span><br>We bring together individuals, organizations, and resources to tackle water and sanitation challenges effectively.</li>
                    <li><span>Fostering partnerships for a shared mission</span><br>By encouraging teamwork and partnerships, we amplify the impact of every contribution.</li>

                </ul>
            </div>
            <div class="tab-contents" id="impact">
                <ul>
                    <li><span>Turning small efforts into big changes</span><br>Even the smallest contributions, whether time or money, can create ripple effects that transform entire communities.</li>
                    <li><span>Transforming lives one drop at a time</span><br>Every action—be it a donated filter or a repaired well—directly improves the quality of life for people in need.</li>
                    <li><span>Building systems that last for generations.
                    </span><br>To ensure long-term access to clean water and proper sanitation.</li>
                    <li><span>Making every contribution count</span><br>We ensure that every resource is used efficiently to maximize the impact on those who need it most.</li>

                </ul>
            </div>

            </div>
        </div>
    </div>
   </div>
   <!---Services-->
   <div id="services">
    <div class="container">
        <h1 class="sub-title">Our Services</h1>
        <div class="services-list">
            <div>
                <i class="fa-solid fa-droplet"></i>
                <h2>Clean Water Access</h2>
                <p>Identifying and addressing water scarcity in remote areas by providing filtration systems, water tanks, and wells.</p>
                <a href="#">Learn More</a>
            </div>
            <div>
                <i class="fa-solid fa-hand-holding-dollar"></i>
                <h2>Donation Management</h2>
                <p>Allowing users to contribute funds or resources directly to verified water and sanitation projects.</p>
                <a href="#">Learn More</a>
            </div>

            <div>
                <i class="fa-solid fa-book-open-reader"></i>
                <h2>Education and Awareness</h2>
                <p>Conducting campaigns to educate communities about hygiene, water conservation, and the importance of sanitation.</p>
                <a href="#">Learn More</a>
            </div>
            <div>
                <i class="fa-solid fa-flag"></i>
                <h2>Real-Time Issue Reporting</h2>
                <p>Providing a platform where users can report water or sanitation issues in their communities, with live tracking of resolutions</p>
                <a href="#">Learn More</a>
            </div>

        </div>
    </div>
   </div>
   <!---Contact-->
   <div id="contact">
    <div class="container">
        <div class="row">
            <div class="contact-left">
                <h1 class="sub-title">Contact Us</h1>
                <p><i class="fa-solid fa-envelope"></i>linkwell@gmail.com</p>
                <p><i class="fa-solid fa-phone"></i>9998867675</p>
                <div class="social-icons">
                    <a href=""><i class="fa-brands fa-facebook"></i></a>
                    <a href=""><i class="fa-brands fa-twitter"></i></a>
                    <a href=""><i class="fa-brands fa-square-instagram"></i></a>
                    <a href=""><i class="fa-brands fa-linkedin"></i></a>
                </div>
            </div>
            <div class="contact-right">
                <form name="submit-to-google-sheet">
                    <input type="text" name="Name" placeholder="Your Name" required>
                    <input type="email" name="Email" placeholder="Your Email" required>
                    <textarea name="Message" rows="6" placeholder="Your Message"></textarea>
                    <button type="submit" class="btn btn2">Submit</button>
                </form>
                <span id="msg"> </span>
            </div>
        </div>
    </div>
    <div class="copyright">
        <p>Copyright © LinkWell 2024</p>
    </div>
   </div>

   <script>
    var tablinks=document.getElementsByClassName("tab-links");
    var tabcontents=document.getElementsByClassName("tab-contents");
    function opentab(tabname){
    for(tablink of tablinks){
    tablink.classList.remove("active-link");
    }
    for(tabcontent of tabcontents){
    tabcontent.classList.remove("active-tab");
    }
    event.currentTarget.classList.add("active-link");
    document.getElementById(tabname).classList.add("active-tab");
    }
   </script>
   <script>
    const scriptURL = 'https://script.google.com/macros/s/AKfycbwMXV7tdi9qSfggKfl5uIubwrbkBp7SUiDZGl_OwM8awkWSXlMrgcq4UDeXnCZCnG8FNA/exec'
    const form = document.forms['submit-to-google-sheet']
    const msg=document.getElementById("msg")
    form.addEventListener('submit', e => {
      e.preventDefault()
      fetch(scriptURL, { method: 'POST', body: new FormData(form)})
        .then(response =>{msg.innerHTML="Thank You For Contacting Us !"
        setTimeout(function(){msg.innerHTML=""},5000)
        form.reset()
        })
        .catch(error => console.error('Error!', error.message))
    })
  </script>
</body>
</html>