Skip to content

Instantly share code, notes, and snippets.

@jsoma

jsoma/index.html

Created December 2, 2023 20:12
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jsoma/0b8b08f383ae755de35cf04be02be066 to your computer and use it in GitHub Desktop.
Save jsoma/0b8b08f383ae755de35cf04be02be066 to your computer and use it in GitHub Desktop.
Download ZIP
Templates for auto-updating viz website
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The Bad Air Website</title>
<style>
body {
margin: 0;
background-color: aliceblue;
}
/* Make the page 700px wide, centered */
.container {
width: 700px;
margin: 4em auto;
}
/* Use a nice font */
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h1 {
text-align: center;
font-size: 3em;
margin: 2em 0;
}
.graphic {
max-width: 500px;
margin: 2em auto;
}
#footer {
text-align: center;
padding: 4em;
background-color: #f0f1ff;
border-top: solid white 5px;
}
</style>
</head>
<body>
<div class="container">
<h1>🌥️ The bad air website 🏭</h1>
<h3>Major cities of the world, ranked by their air quality</h3>
<p>The table below auto-updates every hour. Air quality is scored using the <a href="https://www.airnow.gov/aqi/aqi-basics/">US air quality index</a>.</p>
<div class="graphic">
Graphic goes here
</div>
</div>
<div id="footer">
<p>This website was made for a tutorial on <a href="https://jonathansoma.com">auto-updating websites</a>.</p>
</div>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment