-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
131 lines (110 loc) · 5.49 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Community Crime Mapping</title>
<!-- Link to CSS files -->
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<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=Roboto+Flex:opsz,[email protected],400;8..144,500&display=swap" rel="stylesheet">
</head>
<body class="page1">
<!--Header Code Here-->
<nav class="navbar">
<div class="container">
<div class="logo">
<img src="img/WhatsApp Image 2023-11-27 at 5.03.58 PM.jpeg" alt="Logo">
</div>
<div class="nav-links">
<a href="http://127.0.0.1:5500/index.html">Home</a>
<a href="http://127.0.0.1:5500/map.html">Map</a>
<a href="http://127.0.0.1:5500/about.html">About</a>
<a href="http://127.0.0.1:5500/contact.html">Contact</a>
<a href="http://127.0.0.1:5500/safety.html">Safety Measures</a>
<a href="http://127.0.0.1:5500/report.html">Report</a>
<a href="http://127.0.0.1:5500/Sign-up.html">Sign-up</a>
</div>
</div>
</nav>
<div id="imageCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="5000">
<div class="carousel-inner">
<div class="video-container carousel-item active">
<video class="d-block w-100" autoplay loop>
<source src="img/Carousel-Vid.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="carousel-item">
<img src="img/carousel1.png" class="d-block w-100" alt="Image 1">
</div>
<div class="carousel-item">
<img src="img/carousel2.png" class="d-block w-100" alt="Image 2">
</div>
<div class="carousel-item">
<img src="img/carousel3.png" class="d-block w-100" alt="Image 3">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#imageCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#imageCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="content-slider">
<div class="slider">
<div class="mask">
<ul>
<li class="anim1">
<div class="quote">Certain regions or cities in India experience higher crime rates compared to others .</div>
</li>
<li class="anim2">
<div class="quote">The Indian government, NGOs, and various community organizations continuously work to combat crime. </div>
</li>
<li class="anim3">
<div class="quote">Regularly released crime statistics provide insight into the prevalence of various crimes across different states and regions. </div>
</li>
<li class="anim4">
<div class="quote">Crime hotspots often exhibit spatial clustering, revealing patterns that help law enforcement allocate resources more effectively. </div>
</li>
<li class="anim5">
<div class="quote">Unusual as it may seem, some individuals are drawn to locations known for past crimes or notorious events, leading to unique challenges in monitoring and addressing potential issues.</div>
</li>
</ul>
</div>
</div>
</div>
<!--Main Body Code Here-->
<div class="home-container">
<p class="home-heading">Start Searching For Crime In Your Locality</p>
<div class="outer-container">
<div class="column1">
<button type="button" class="btn btn-success btn-lg">Crime near me</button>
</div>
<div class="column2">
<p>Search Manually</p>
<form action="/search" method="get">
<input type="text" placeholder="Search a location" name="search">
<button type="submit">Search</button>
</form>
</div>
</div>
</div>
<!--Footer Code Here-->
<footer class="footer">
<div class="container">
<p>© 2023 Community Crime Mapping </p>
</div>
</footer>
<!--JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<script src='https://codepen.io/Hyperplexed/pen/xxYJY jM/54407644e24173ad6019b766443bf2a6.js'></script>
<script src="javaScriptCodes.js"></script>
</body>
</html>