-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
132 lines (120 loc) · 6.12 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Better Together Community Engine</title>
<meta name="color-scheme" content="light dark">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<!-- Stylesheets -->
<!-- Bootstrap Icons for using with Font Awesome -->
<link rel="stylesheet" crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" media="all" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65">
<link rel="stylesheet" crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" media="all" integrity="sha384-k6RqeWecG8VcG/4vAFT/UzB8vFjKQx6MG7XKjTA4dQy57X3OShj2+0Jdh4vnxeP">
<style type="text/css">
/* Default text color for light mode */
.text-opposite-theme {
color: #333; /* dark text on light background */
}
/* When the user's system preference is dark mode, adjust text color */
@media (prefers-color-scheme: dark) {
.text-opposite-theme {
color: #f8f9fa; /* light text on dark background */
}
}
/* Similarly, if the background is meant to be dark, you can set text to be light and vice versa */
/* Default background color for light mode with dark text */
.background-opposite-theme {
background-color: #fff;
color: #333;
}
/* When the user's system preference is dark mode, adjust background and text color */
@media (prefers-color-scheme: dark) {
.background-opposite-theme {
background-color: #212529;
color: #f8f9fa;
}
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="navbar-brand" href="#">Better Together</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#features">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#community-impact">Community Impact</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link" href="#subscribe">Subscribe</a>
</li> -->
</ul>
</div>
</div>
</nav>
<header class="bg-light p-5 text-center">
<h1>Welcome to the Better Together Community Engine</h1>
<p>Empowering Communities Through Collaboration and Shared Resources</p>
<!-- <a href="#subscribe" class="btn btn-primary">Join the Movement</a> -->
</header>
<section id="features" class="p-5">
<div class="container">
<h2 class="text-center mb-4">Our Innovative Features</h2>
<div class="row">
<div class="col-md-4 mb-4">
<i class="fas fa-globe fa-3x mb-3"></i>
<h3>Global Connectivity</h3>
<p>Connecting diverse communities to collaborate, share resources, and engage in meaningful dialogue for collective growth.</p>
</div>
<div class="col-md-4 mb-4">
<i class="fas fa-heart fa-3x mb-3"></i>
<h3>Culture of Sharing</h3>
<p>Fostering a culture of sharing knowledge, resources, and expertise to help each other thrive in a collaborative ecosystem.</p>
</div>
<div class="col-md-4 mb-4">
<i class="fas fa-handshake fa-3x mb-3"></i>
<h3>Collaborative Opportunities</h3>
<p>Creating opportunities for collaboration across various sectors and disciplines, enhancing community engagement and innovation.</p>
</div>
</div>
</div>
</section>
<section id="community-impact" class="p-5 bg-light">
<div class="container">
<h2 class="text-center mb-4">Empowering Community Impact</h2>
<p class="text-center">The Better Together Community Engine is dedicated to creating a positive societal impact. Our platform supports initiatives aimed at enhancing community well-being, sustainability, and inclusivity.</p>
<div class="row mt-4">
<div class="col-md-6 mb-4">
<i class="fas fa-leaf fa-3x mb-3"></i>
<h3>Environmental Consciousness</h3>
<p>Encouraging sustainable practices and mindful resource utilization to contribute to environmental conservation efforts.</p>
</div>
<div class="col-md-6 mb-4">
<i class="fas fa-users fa-3x mb-3"></i>
<h3>Inclusive Community Building</h3>
<p>Promoting diversity and inclusivity, ensuring equal access to resources and opportunities for all community members.</p>
</div>
</div>
</div>
</section>
<!-- <section id="subscribe" class="p-5">
<div class="container">
<h2 class="text-center mb-4">Stay Connected</h2>
<p class="text-center">Join our journey and stay updated with the latest developments, community stories, and collaborative opportunities from the Better Together Community Engine.</p>
<form class="d-flex justify-content-center mt-4">
<input type="email" class="form-control me-2" style="max-width: 300px;" placeholder="Enter your email" required>
<button type="submit" class="btn btn-primary">Subscribe</button>
</form>
</div>
</section> -->
<footer class="bg-light text-center p-3">
<p>© 2023 Better Together Community Engine. Empowering Communities, Enabling Change.</p>
</footer>
</body>
</html>