Skip to content

Instantly share code, notes, and snippets.

@SakshamGarg1007

SakshamGarg1007/.css

Created October 21, 2018 19:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save SakshamGarg1007/cefe794fb7fb1b11e7d57f0e3391127f to your computer and use it in GitHub Desktop.
Save SakshamGarg1007/cefe794fb7fb1b11e7d57f0e3391127f to your computer and use it in GitHub Desktop.
Download ZIP
Phenomen Storm-360 Application || Helping you to make yourself Safe during Storms and Disasters.
Raw
.css
h3{
padding: 20px 20px 5px 20px;
font-size: 50px;
font-weight: 800;
font-style:bold;
letter-spacing: 1px;
margin-left:15%;
margin-right:15%;
margin-bottom:8px;
margin-top:8px;
}
h4{
padding: 5px 5px 5px 5px;
font-size: 25px;
font-weight: 800;
font-style:bold;
letter-spacing: 1px;
margin-left:15%;
margin-right:15%;
margin-bottom:8px;
margin-top:8px;
}
Raw
.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Storm 360</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
body {font-family: "Lato", sans-serif;}
.tablink {
background-color: #555;
color: white;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
font-size: 17px;
width: 20%;
}
.tablink:hover {
background-color: #777;
}
/* Style the tab content */
.tabcontent {
color: white;
display: none;
padding: 50px;
text-align: center;
}
#London {background-color:red;}
#Paris {background-color:green;}
#Tokyo {background-color:blue;}
#Oslo {background-color:orange;}
</style>
<!---------- Popup Style ------------------>
<style>
.hover_bkgr_fricc{
background:rgba(0,0,0,.4);
cursor:pointer;
display:none;
height:100%;
position:fixed;
text-align:center;
top:0;
width:100%;
z-index:10000;
}
.hover_bkgr_fricc .helper{
display:inline-block;
height:100%;
vertical-align:middle;
}
.hover_bkgr_fricc > div {
background-color: #fff;
box-shadow: 10px 10px 60px #555;
display: inline-block;
height: auto;
max-width: 551px;
min-height: 100px;
vertical-align: middle;
width: 60%;
position: relative;
border-radius: 8px;
padding: 15px 5%;
}
.popupCloseButton {
background-color: #fff;
border: 3px solid #999;
border-radius: 50px;
cursor: pointer;
display: inline-block;
font-family: arial;
font-weight: bold;
position: absolute;
top: -20px;
right: -20px;
font-size: 25px;
line-height: 30px;
width: 30px;
height: 30px;
text-align: center;
}
.popupCloseButton:hover {
background-color: #ccc;
}
.icon-bar {
width: 100%;
background-color: #555;
overflow: auto;
}
.icon-bar a {
float: left;
width: 20%;
text-align: center;
padding: 12px 0;
transition: all 0.3s ease;
color: white;
font-size: 36px;
}
.icon-bar a:hover {
background-color: #000;
}
.active {
background-color: #4CAF50 !important;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body style="background-color:gray">
<header>
<div align="center"><img src="logo.png" alt="Logo" style="width:400px;height:300px;"><h1>MAKING YOU MORE SAFER<h1></img></div>
</div>
</header>
<button class="tablink" onclick="openCity('London', this, 'red','capture.png')" id="defaultOpen">Explore World</button>
<a class="trigger_popup_fricc">
<button class="tablink" onclick="openCity('Paris', this, 'green','capture.png')">How Safe Are You ?</button></a>
<button class="tablink" onclick="openCity('Tokyo', this, 'blue', 'capture.png')">Safe Zones</button>
<button class="tablink" onclick="openCity('Oslo', this, 'orange', 'capture.png')">Shourtest Rout </button>
<button class="tablink" onclick="openCity('newsfeed', this, 'green',)">News Feeds </button>
<div id="London" class="tabcontent">
<h3>STORM-360</h3>
<p>Making You Safe</p>
<img src="heatmap.png" alt="Maps" style="width:1100px;height:600px;" ></div>
</div>
<div id="Paris" class="tabcontent">
<h3>STORM-360</h3>
<p>Are You Safe ?<br> If you find yourself in the Red Circle, Move Away to the safe zone.</p>
<h1 style="color:red;"><a class="trigger_popup_fricc">Click For TIPS</a></h1>
<div align="center" style="margin:5px, padding=5px">
<img src="capture.png" alt="Maps" style="width:1100px;height:600px;" ></div>
</div>
<div id="Tokyo" class="tabcontent">
<h3>STORM-360</h3>
<p>See Safe Place Near You</p>
<img src="a.png" alt="Maps" style="width:1100px;height:600px;" ></div>
</div>
<div id="Oslo" class="tabcontent">
<h3>STORM-360</h3>
<p>Head To Nearest Safe Zone.<br> Follow The Map</p>
<img src="b.png" alt="Maps" style="width:1100px;height:600px;" ></div>
</div>
<div id="newsfeed" class="tabcontent">
<h1>News Feed From World Disasters.</h1>
<h5>Share Happings arround you. let others know whats happning arround you</h5>
</div>
<script>
function openCity(cityName,elmnt,color,image) {
var i, tabcontent, tablinks, image;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
document.getElementById(cityName).style.display = "block";
elmnt.style.backgroundColor = color;
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
<!---------- hover popou--->
<div class="hover_bkgr_fricc">
<span class="helper"></span>
<div>
<div class="popupCloseButton">X</div>
<h1> You Are Not Safe !<be> Find Safe Zone and Move From Here.<h1>
<h2>Tips</h2>
<p>(1)Get a FIRSTAID Kit With you</p>
<p>(2)Have some Bottle water and Nonperishable Food with you.</p>
<p>(3)Move to the Safe Areas.</p>
<p>(4)Do not drive and find safe place to cover your self.</p>
<p>(5)Stay away from buildings, walls, and power poles.</p>
</div>
</div>
<script>
$(".trigger_popup_fricc").click(function(){
$('.hover_bkgr_fricc').show();
});
$('.hover_bkgr_fricc').click(function(){
$('.hover_bkgr_fricc').hide();
});
$('.popupCloseButton').click(function(){
$('.hover_bkgr_fricc').hide();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment