Spaces:

rajkhanke
/

Worldwide_disaster_infirmation_system

Running

App Files Files Community

Worldwide_disaster_infirmation_system / index.html

rajkhanke

Update index.html

0d36b1d verified about 2 months ago

raw

history blame contribute delete

2.66 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Worldwide Disaster Information System</title>
	<style>
	/* Basic styles for the body */
	body {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	margin: 0;
	padding: 0;
	background-color: #add8e6;
	color: #333;
	min-height: 100vh;
	box-sizing: border-box;
	}

	/* Container for centering content */
	.container {
	max-width: 100vw; /* Full viewport width */
	margin: 0 auto; /* Center the container */
	padding: 0; /* No extra padding on sides */
	text-align: center;
	}

	/* Styling for the main heading */
	h2 {
	color: #00796b;
	margin: 10px 0;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
	background-color: #e0f2f1; /* Light teal background for the heading */
	padding: 10px 0; /* Space above and below the heading */
	}

	/* Styling for the iframe with minimal spacing */
	iframe {
	display: block;
	width: calc(100vw - 10px); /* Almost full width, 5px spacing on each side */
	height: 92vh; /* Slightly taller height */
	margin: 0 auto;
	border: 2px solid #00796b;
	box-shadow: 0 6px 12px rgba(0,0,0,0.25);
	border-radius: 8px;
	overflow: hidden;
	background-color: #fff;
	box-sizing: border-box;
	}

	/* Styling for fallback text (if iframe is not supported) */
	.fallback-message {
	margin-top: 20px;
	font-style: italic;
	color: #555;
	}

	.fallback-message a {
	color: #00796b;
	text-decoration: none;
	}

	.fallback-message a:hover {
	text-decoration: underline;
	}

	</style>
	</head>
	<body>

	<div class="container">
	<h2>Worldwide Disaster Information System</h2>

	<!-- The iframe to display the external website -->
	<iframe
	src="https://worldcrisismap.com/"
	title="World Crisis Map">
	<!-- Fallback content for browsers that do not support iframes -->
	<p class="fallback-message">
	Your browser does not support iframes. Please visit
	<a href="https://worldcrisismap.com/" target="_blank">World Crisis Map</a> directly.
	</p>
	</iframe>
	</div>

	</body>
	</html>