-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
219 lines (190 loc) · 10.5 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
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
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
<!DOCTYPE html>
<html lang="en">
<head>
<title>FIN</title>
<link rel="shortcut icon" type="image/png" href="./images/colored_logo.png"/>
<link rel="icon" href="images/logo.png">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface:400,400i|Roboto+Mono&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/jquery.fancybox.min.css">
<link rel="stylesheet" href="fonts/ionicons/css/ionicons.min.css">
<link rel="stylesheet" href="fonts/fontawesome/css/font-awesome.min.css">
<script src="https://use.fontawesome.com/68f3846bea.js"></script>
<link rel="stylesheet" href="fonts/flaticon/font/flaticon.css">
<link href="https://fonts.googleapis.com/css?family=Cutive&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Comfortaa&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/aos.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css">
<!-- Theme Style -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header role="banner">
<nav class="navbar navbar-expand-lg bg-dark navbar-fixed-top">
<!-- Would like the navbar to be sticky at the top!! -->
<div class="container-fluid">
<a class="navbar-brand" href="#top">FIN</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample05"
aria-controls="navbarsExample05" ar ia-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample05">
<ul class="navbar-nav pl-md-5 ml-auto">
<li class="nav-item">
<a class="nav-link" href="#top">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#map-sect">Locations</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#chat">Chat</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#blog">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#forum">Forum</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!-- END header -->
<div id="top" class="slider-item overlay" data-stellar-background-ratio="0.5"
style="background-image: url('https://images.pexels.com/photos/1128318/pexels-photo-1128318.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');">
<div class="container" id="index">
<div class="row slider-text align-items-center justify-content-center">
<div class="col-lg-12 text-center col-sm-12">
<h1 class="mb-4 header" data-aos="fade-up" data-aos-delay="100">Friends In Need</h1>
<h2 class="mb-4 tag-line" data-aos="fade-up" data-aos-delay="100">You're Not Alone</h2>
</div>
</div>
</div>
</div>
<div class="row mb-0 mx-5 data-aos="fade-up" data-aos-delay="100" >
<div class="col-md-8 pt-5 mb-5" id="about">
<h2>What We Do</h2>
<hr>
<p>In 2018, nearly 700,000 children were abused - the equivalent to 10 packed football stadiums. Child abuse takes away five lives everyday. Stuck in these unsafe homes, children often normalize their treatment as a way to protect themselves from the pain. We're here to show them that neglect and violence is not the norm and they're not alone. </p>
<p>Nearly two thirds of people in treatment for drug abuse were abused or neglected as children. Abuse is a vicious cycle, but it can be stopped. We aim to empower the young adults to not only learn that this behavior isn't what they deserve, but that they can take action against it. Even if they don't feel safe enough to legally report the issue, we still want them to know that there is a community they can reach out to and understands where they're coming from.</p>
<p>If you feel like you're unsafe or uncomfortable in your own home, please utilize our chatbot to see what resources are available to you or look at our map to see where you can go to get help. If you want to learn more about other people in your position, check out our blog. If you want to talk to others in your position, look at our forum to talk to people who know what you're going through.</p>
<p>So many of the resources online are directed towards parents and other adults, but not the kids. When the person you grew up looking to is the one who's treating you badly, how can you break the cycle?</p>
<a class="btn btn-secondary btn-lg p-3" href="#forum">What Others Are Saying >></a>
</div>
<div class="col-md-4 pt-5 mb-5 mt-5">
<img height="500px" src="https://images.pexels.com/photos/1421784/pexels-photo-1421784.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
</div>
</div>
<div class="section bg-primary mt-0 pt-0" style="background:var(--primary)!important">
<div class="container">
<div class="row mb-0 mx-5" data-aos="fade-up" data-aos-delay="100" >
<div class="col-md-7 pt-5" id="chat">
<h2>Chat Your Feelings</h2>
<hr>
<iframe id="chat" src='https://webchat.botframework.com/embed/childabusebot-bot?s=k2z3GOBwdhc.h_vW3M0d1AbXumScRKaoBnJWqb9zpjFLRvTAk8QfhpM' style='min-width: 400px; width: 100%; min-height: 400px;'></iframe>
</div>
<div class="col-md-5 pt-5" id="map-sect">
<h2>Map of Safe Spaces</h2>
<hr>
<section id="map" style="height: 400px;">
<p>Error occured. Please try again.</p>
</section>
</div>
</div>
</div>
</div>
<!-- /.row -->
<div class="section mb-0 mt-3" id="blog">
<div class="container">
<hr class="mb-5">
<div class="row">
<div class="col-md-4 mb-0" data-aos="fade-up" data-aos-delay="100">
<div class="card h-100">
<img class="card-img-top" src="https://images.pexels.com/photos/1682497/pexels-photo-1682497.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="">
<div class="card-body">
<h4 class="card-title">What's Abuse?</h4>
<p class="card-text">Abuse can present itself in ways that you never realized, especially if you grew up with it everyday. If you feel unsafe in your own home, check to see if you're in a toxic environment.</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary blog p-3">Find Out More!</a>
</div>
</div>
</div>
<div class="col-md-4 mb-0" data-aos="fade-up" data-aos-delay="100">
<div class="card h-100">
<img class="card-img-top" src="https://images.pexels.com/photos/1312023/pexels-photo-1312023.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="">
<div class="card-body">
<h4 class="card-title">How to Get Help</h4>
<p class="card-text">Abuse doesn't mean that there's nowhere left to go. The first step is researching resources just like these to help you learn what action you can take to empower yourself.</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary blog p-3">Find Out More!</a>
</div>
</div>
</div>
<div class="col-md-4 mb-0" data-aos="fade-up" data-aos-delay="100">
<div class="card h-100">
<img class="card-img-top" src="https://images.pexels.com/photos/1661818/pexels-photo-1661818.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="">
<div class="card-body">
<h4 class="card-title">Statistics of Abuse</h4>
<p class="card-text">Nearly 700,000 children were abused in 2018. However, 2.9 million cases of child abuse are reported in the United States annually.</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary blog p-3">Find Out More!</a>
</div>
</div>
</div>
</div>
</div>
</div>
<iframe class="align-items-center" id="forum" src="https://finspace.forumotion.com"width="100%"height="900">
</iframe>
<!-- /.row -->
<footer class="site-footer mt-0" role="contentinfo">
<div class="container">
<div class="row my-0">
<hr>
</div>
<div class="row">
<div class="col-12 text-md-center text-left">
<p class="small">
Website created by Mara Hart and Danielle Zevitz. Access code <strong><a href="https://www.github.com/maralihart/ah2020" target="_blank">here</a></strong>
<br>
Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved | Design: <a href="https://colorlib.com" target="_blank" >Colorlib</a> | Photos courtesy of: <a href="https://pexels.com" target="_blank">Pexels</a>
<br>
This website was developed at AthenaHacks 2020 to increase awareness of child abuse and empower kids to recognize their own abuse instead of waiting for an adult to notice and intervene.
</p>
</div>
</div>
</div>
</footer>
<!-- END footer -->
<!-- loader -->
<div id="loader" class="show fullscreen"><svg class="circular" width="48px" height="48px">
<circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee" />
<circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10"
stroke="#ffc107" /></svg></div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/jquery-migrate-3.0.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.fancybox.min.js"></script>
<script src="js/jquery.stellar.min.js"></script>
<script src="js/aos.js"></script>
<script src="js/main.js"></script>
<script src="js/map.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCw6nnfZ6EOC9PlqqwBlWmhP1QEXGKJwZw&callback=initMap" async defer></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCw6nnfZ6EOC9PlqqwBlWmhP1QEXGKJwZw&libraries=places"></script>
</body>
</html>