<!DOCTYPE html>
<html>
<head>
<title> Baltimore Crime </title>
<style>
body {background-color: #D3D3D3;}
body {font-family: verdana;}
.tab {
overflow: hidden;
border: 4px solid #bbb;
background-color: #D3D3D3
}
.tab button {
background-color: inherit;
float: left;
border: 000000;
outline: 000000;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
.tab button:hover {
background-color: #eee;
}
.tab button.active {
background-color: #ccc;
}
.tabcontent {
display: none;
padding: 6px 12px;
border: 2px solid #ccc;
border-top: none;
animation: fadeEffect 1s;
}
@keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
</style>
</head>
<body>
<h1>Baltimore Crime Frequencies</h1>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Flag_of_Baltimore%2C_Maryland.svg/2000px-Flag_of_Baltimore%2C_Maryland.svg.png" alt="Baltimore Flag" width="400">
<p id="test"></p>
<p>Why Baltimore needs this website: Baltimore's crime rate is much higher than that of the average
<br />U.S. city. But, like any other city, it's only dangerous in certain areas, especially at certain times of day.
<br />The purpose of this website is to show the residents of Baltimore the trends that exist in regards
<br />to location/time of day and likeliness for there to be a crime. In order to stay safe, you must be informed,
<br />and that is what this website will help Baltimore residents do.</p>
<h2><b>Most Prone Locations:</b></h2>
<div class= "tab">
<button class = "tablinks" onclick= "openCrime(event, 'Overall')">Overall</button>
<button class = "tablinks" onclick= "openCrime(event, 'Burglary')">Burglary</button>
<button class = "tablinks" onclick= "openCrime(event, 'Vandalism')">Vandalism</button>
<button class = "tablinks" onclick= "openCrime(event, 'Theft')">Theft</button>
<button class = "tablinks" onclick= "openCrime(event, 'Arrest')">Arrest</button>
<button class = "tablinks" onclick= "openCrime(event, 'Shooting')">Shooting</button>
<button class = "tablinks" onclick= "openCrime(event, 'Other')">Other</button>
</div>
<div id="Overall" class= "tabcontent">
<h4>Overall</h4>
<script src="index.js"></script>
<p id="Overall"></p>
</div>
<div id="Burglary" class= "tabcontent">
<h4>Burglary</h4>
<p id = "Burglary">SANTIVARIABLES</p>
</div>
<div id="Vandalism" class = "tabcontent">
<h4>Vandalism</h4>
<p id = "Vandalism">SANTIVARIABLES</p>
</div>
<div id="Theft" class = "tabcontent">
<h4>Theft</h4>
<p id = "Theft">SANTIVARIABLES</p>
</div>
<div id="Arrest" class = "tabcontent">
<h4>Arrest</h4>
<p id = "Arrest">SANTIVARIABLES</p>
</div>
<div id="Shooting" class = "tabcontent">
<h4>Shooting</h4>
<p id = "Shooting"> SANTIVARIABLES</p>
</div>
<div id="Other" class= "tabcontent">
<h4>Other</h4>
<p id = "Other">SANTIVARIABLES</p>
</div>
<h2>Danger Analysis</h2>
</body>
</html>