bootstrap

This commit is contained in:
uf0 2020-04-20 22:04:28 +02:00
parent 4abf06980a
commit 2432a20dfb
3 changed files with 153 additions and 0 deletions

103
index.html Executable file
View file

@ -0,0 +1,103 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>Mappa Punti Solidali Milano</title>
<link rel="stylesheet" href="style-ps.css" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&display=swap"
rel="stylesheet"
/>
<!-- Primary Meta Tags -->
<meta name="title" content="Mappa Punti Solidali Milano" />
<meta
name="description"
content="Mappa Punti solidali nella città di milano e dintorni, punti per donazioni di alimenti, spesa sospesa, pasti gratuiti o a prezzo solidale."
/>
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta
property="og:url"
content="https://www.offtopiclab.org/punti-solidali/"
/>
<meta property="og:title" content="Mappa Punti Solidali Milano" />
<meta
property="og:description"
content="Mappa Punti solidali nella città di milano e dintorni, punti per donazioni di alimenti, spesa sospesa, pasti gratuiti o a prezzo solidale."
/>
<meta
property="og:image"
content="https://www.offtopiclab.org/punti-solidali/mappapuntisolidali.png"
/>
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta
property="twitter:url"
content="https://www.offtopiclab.org/punti-solidali/"
/>
<meta property="twitter:title" content="Mappa Punti Solidali Milano" />
<meta
property="twitter:description"
content="Mappa Punti solidali nella città di milano e dintorni, punti per donazioni di alimenti, spesa sospesa, pasti gratuiti o a prezzo solidale."
/>
<meta
property="twitter:image"
content="https://www.offtopiclab.org/punti-solidali/mappapuntisolidali.png"
/>
</head>
<body>
<iframe
style="position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:10;"
allowfullscreen
src="//umap.openstreetmap.fr/en/map/mappapuntisolidali_440667?scaleControl=false&miniMap=false&scrollWheelZoom=true&zoomControl=true&allowEdit=false&moreControl=true&searchControl=null&tilelayersControl=null&embedControl=null&datalayersControl=true&onLoadPanel=undefined&captionBar=false"
></iframe>
<div id="footer" style="z-index:50;">
<ul id="legenda">
<li>
<img
src="https://img.icons8.com/color/48/000000/food-donor.png"
class="centered"
alt="Punti Raccolta"
height="48"
width="48"
/>
<h6>Punti Raccolta</h6>
</li>
<li>
<img
src="https://img.icons8.com/color/48/000000/soup-plate.png"
class="centered"
alt="Distribuzione Pasti "
height="48"
width="48"
/>
<h6>Distribuzione pasti</h6>
</li>
<li>
<img
src="https://img.icons8.com/color/48/000000/bread.png"
class="centered"
alt="Panifici"
height="48"
width="48"
/>
<h6>Invenduto Panifici</h6>
</li>
<li>
<img
src="https://img.icons8.com/color/48/000000/ingredients.png"
class="centered"
alt="Spesa Sospesa"
height="48"
width="48"
/>
<h6>Spesa Sospesa</h6>
</li>
</ul>
</div>
</body>
</html>

BIN
mappapuntisolidali.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 916 KiB

50
style-ps.css Executable file
View file

@ -0,0 +1,50 @@
html {
box-sizing: border-box;
font-size: 16px;
}
*, *:before, *:after {
box-sizing: inherit;
}
body, h1, h2, h3, h4, h5, h6, p, ol, ul {
margin: 0;
padding: 0;
font-weight: normal;
}
ol, ul {
list-style: none;
}
img {
max-width: 100%;
height: auto;
}
#footer {
font-family: 'Roboto Condensed', sans-serif;
position: fixed;
bottom: 0px;
background-color: white;
padding: 5px;
width: 100%;
text-align: center;
}
.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
ul > li {
display: inline-block;
/* You can also add some margins here to make it look prettier */
zoom:1;
*display:inline;
padding-left: 5px;
padding-right: 5px;
text-align: center;
}