Merge pull request #17 from rosarioterranova/landing-page

MozillaItalia · Apr 28, 2020 · e880f33 · e880f33
2 parents c06b076 + 0b7fdb3
commit e880f33
Show file tree

Hide file tree

Showing 24 changed files with 286 additions and 0 deletions.
diff --git a/landing-page/img/favicon.png b/landing-page/img/favicon.png
diff --git a/landing-page/img/groups/bot.png b/landing-page/img/groups/bot.png
diff --git a/landing-page/img/groups/communityportal.png b/landing-page/img/groups/communityportal.png
diff --git a/landing-page/img/groups/design.png b/landing-page/img/groups/design.png
diff --git a/landing-page/img/groups/developer.png b/landing-page/img/groups/developer.png
diff --git a/landing-page/img/groups/discourse.png b/landing-page/img/groups/discourse.png
diff --git a/landing-page/img/groups/home.png b/landing-page/img/groups/home.png
diff --git a/landing-page/img/groups/iot.png b/landing-page/img/groups/iot.png
diff --git a/landing-page/img/groups/l10n.png b/landing-page/img/groups/l10n.png
diff --git a/landing-page/img/groups/mozita dark.png b/landing-page/img/groups/mozita dark.png
diff --git a/landing-page/img/groups/news.png b/landing-page/img/groups/news.png
diff --git a/landing-page/img/groups/sumo.png b/landing-page/img/groups/sumo.png
diff --git a/landing-page/img/groups/volontari.png b/landing-page/img/groups/volontari.png
diff --git a/landing-page/img/logo.png b/landing-page/img/logo.png
diff --git a/landing-page/img/projects/common-voice.png b/landing-page/img/projects/common-voice.png
diff --git a/landing-page/img/projects/deepspeech.png b/landing-page/img/projects/deepspeech.png
diff --git a/landing-page/img/projects/firefox-browser.png b/landing-page/img/projects/firefox-browser.png
diff --git a/landing-page/img/projects/firefox-monitor.png b/landing-page/img/projects/firefox-monitor.png
diff --git a/landing-page/img/projects/firefox-send.png b/landing-page/img/projects/firefox-send.png
diff --git a/landing-page/img/projects/mdn.png b/landing-page/img/projects/mdn.png
diff --git a/landing-page/img/projects/servo.png b/landing-page/img/projects/servo.png
diff --git a/landing-page/img/projects/thunderbird.png b/landing-page/img/projects/thunderbird.png
diff --git a/landing-page/index.html b/landing-page/index.html
@@ -0,0 +1,239 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mozilla Italia</title>
+    <link rel="stylesheet" href="http://mozilla.github.io/mofo-bootstrap/dest/css/mofo-bootstrap.css">
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flickity/1.0.0/flickity.css">
+    <link href="https://fonts.googleapis.com/css?family=Zilla+Slab&display=swap" rel="stylesheet">
+    <link rel="shortcut icon" type="image/png" href="img/favicon.png"/>
+</head>
+<body>
+
+    <!----------------------------- DECRIZIONE -------------------------->
+    <div class="container">
+        <div class="text-center my-5 py-5 asd">
+            <img class="img-fluid" src="img/logo.png" id="logo-img">   
+        </div>  
+
+        <div class="my-5">
+            <p>Mozilla Italia è la community italiana dei volontari Mozilla. Ci occupiamo di supporto, sviluppo software, traduzione e altri contributi di vario tipo ai progetti Mozilla Foundation. Siamo attivi in vari progetti riguardanti l'open source e i diritti degli utenti del web. </p>
+            <p>Mozilla Italia non è una divisione di Mozilla Corporation o di Mozilla Foundation, per maggiori informazioni consulta la pagina wiki. </p>
+            <p>Per rimanere aggiornato su quello che facciamo, puoi seguirci su Facebook, Twitter, Instagram. Abbiamo anche un forum e dei gruppi su Telegram, dove siamo maggiormente attivi, e Matrix. Se vuoi contribuire e diventare anche tu un volontario, non esitare e unisciti a noi! Abbiamo bisogno di chiunque, anche se non ha particolari esperienze o abilità.</p>
+        </div>
+
+        <div class="text-center my-5 py-3">
+            <button onclick="window.location.href = '#gruppi';" class="btn btn-info btn-lg">Diventa un volontario ora!</button>
+        </div>
+    </div>
+
+
+    <!----------------------------- SOCIALS -------------------------->
+    <div class="my-5 text-center link-panel">
+        <div class="container py-3">
+            <p class="title">Seguici sui social</p>
+            <hr class="my-4 hr-light">
+            <div class="row d-flex justify-content-center">
+                <div class="col-2 my-4">
+                    <i class="link-btn fab fa-facebook-f fa-3x" onclick="window.open('https://www.facebook.com/mozillaitalia/', '_blank');"></i>
+                </div>
+                <div class="col-2 my-4">
+                    <i class="link-btn fab fa-twitter fa-3x" onclick="window.open('https://twitter.com/mozillaitalia', '_blank');"></i>
+                </div>
+                <div class="col-2 my-4">
+                    <i class="link-btn fab fa-telegram-plane fa-3x" onclick="window.open('https://t.me/MozItaBot', '_blank');"></i>
+                </div>
+                <div class="col-2 my-4">
+                    <i class="link-btn fab fa-instagram fa-3x" onclick="window.open('#', '_blank');"></i>
+                </div>
+                <div class="col-2 my-4">
+                    <i class="link-btn fab fa-youtube fa-3x" onclick="window.open('https://www.youtube.com/channel/UCsTquqVS0AJxCf4D3n9hQ1w/', '_blank');"></i>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!----------------------------- GRUPPI -------------------------->
+    <div class="my-5 text-center">
+        <p class="title" id="gruppi">I nostri gruppi comunitari</p>
+
+        <hr class="my-4">
+
+        <div class="gallery js-flickity" data-flickity-options='{ "freeScroll": true, "contain": true}'>
+            <div class="mx-5">&nbsp;</div>
+            <div>
+                <a href="https://t.me/MozItaBot">
+                    <img class="gallery-cell link-btn m-4" src="img/groups/bot.png">
+                </a>
+                <p>Bot</p> 
+            </div>
+            <div>
+                <a href="https://t.me/joinchat/DlD6s0My26mR73QkiFqIxAt">
+                    <img class="gallery-cell link-btn m-4" src="img/groups/home.png">
+                </a>
+                <p>Home</p> 
+            </div>
+            <div>
+                <a href="https://t.me/joinchat/DlD6s0QAHkGm9l8J2RLFMg">
+                    <img class="gallery-cell link-btn m-4" src="img/groups/volontari.png">
+                </a>
+                <p>Volontari</p> 
+            </div>
+            <div>
+                <a href="https://forum.mozillaitalia.org/">
+                    <img class="gallery-cell link-btn m-4" src="img/groups/sumo.png">
+                </a>
+                <p>Supporto</p> 
+            </div>
+            <div>
+                <a href="https://t.me/joinchat/DlD6s0My26mR73QkiFqIxAt">
+                    <img class="gallery-cell link-btn m-4" src="img/groups/l10n.png">
+                </a>
+                <p>L10n</p> 
+            </div>
+            <div>
+                <a href="https://t.me/joinchat/DlD6s0NXHcyGKfhZaAzczg">
+                    <img class="gallery-cell link-btn m-4" src="img/groups/developer.png">
+                </a>
+                <p>Developer</p> 
+            </div>
+            <div>
+                <a href="https://t.me/joinchat/DlD6s1SZHehGkrKtzIwneA">
+                    <img class="gallery-cell link-btn m-4" src="img/groups/design.png">
+                </a>
+                <p>Design</p> 
+            </div>
+            <div>
+                <a href="https://discourse.mozilla.org/c/community-portal/mozilla-italia">
+                    <img class="gallery-cell link-btn m-4" src="img/groups/discourse.png">
+                </a>
+                <p>Discourse</p> 
+            </div>
+            <div>
+                <a href="https://community.mozilla.org/groups/mozilla-italia/">
+                    <img class="gallery-cell link-btn m-4" src="img/groups/communityportal.png">
+                </a>
+                <p>Community Portal</p> 
+            </div>
+            <div>
+                <a href="https://t.me/joinchat/DlD6s0zLzr2qDBbp9WQ22w">
+                    <img class="gallery-cell link-btn m-4" src="img/groups/iot.png">
+                </a>
+                <p>IoT</p> 
+            </div>
+            <div>
+                <a href="https://t.me/mozItaNews">
+                    <img class="gallery-cell link-btn m-4" src="img/groups/news.png">
+                </a>
+                <p>News</p> 
+            </div>
+            <div class="mx-5">&nbsp;</div>
+        </div>
+    </div>
+
+    <div class="my-3">&nbsp;</div>
+
+    <!----------------------------- PROGETTI -------------------------->
+    <div class="my-5 text-center link-panel">
+        <div class="my-3">&nbsp;</div>
+        <p class="title">Progetti principali di Mozilla</p>
+
+        <hr class="my-4 hr-light">
+
+        <div class="gallery js-flickity" data-flickity-options='{ "freeScroll": true, "contain": true}'>
+            <div class="mx-5">&nbsp;</div>
+            <div>
+                <a href="https://www.mozilla.org/it/firefox/new/">
+                    <img class="gallery-cell link-btn m-4" src="img/projects/firefox-browser.png">
+                </a>
+                <p>Firefox Browser</p> 
+            </div>
+            <div>
+                <a href="https://www.mozilla.org/it/firefox/new/">
+                <img class="gallery-cell link-btn m-4" src="img/projects/common-voice.png">
+                </a>
+                <p>Common Voice</p>
+            </div>
+            <div>
+                <a href="https://developer.mozilla.org/it/">
+                    <img class="gallery-cell link-btn m-4" src="img/projects/mdn.png">
+                </a>
+                <p>MDN</p> 
+            </div>
+            <div>
+                <a href="https://www.thunderbird.net/it/">
+                    <img class="gallery-cell link-btn m-4" src="img/projects/thunderbird.png">
+                </a>
+                <p>Thunderbird</p> 
+            </div>
+            <div>
+                <a href="https://send.firefox.com/">
+                    <img class="gallery-cell link-btn m-4" src="img/projects/firefox-send.png">
+                </a>
+                <p>Firefox Send</p>
+            </div>
+            <div>
+                <a href="https://monitor.firefox.com/">
+                    <img class="gallery-cell link-btn m-4" src="img/projects/firefox-monitor.png">
+                </a>
+                <p>Firefox Monitor</p> 
+            </div>
+            <div>
+                <a href="https://github.com/mozilla/DeepSpeech">
+                    <img class="gallery-cell link-btn m-4" src="img/projects/deepspeech.png">
+                </a>
+                <p>DeepSpeech</p> 
+            </div>
+            <div>
+                <a href="https://servo.org/">
+                <img class="gallery-cell link-btn m-4" src="img/projects/servo.png">
+                </a>
+                <p>Servo</p> 
+            </div>
+            <div class="mx-5">&nbsp;</div>
+        </div>
+        <div class="my-3">&nbsp;</div>
+    </div>
+
+    <!----------------------------- Eventi -------------------------->
+    <div class="my-5 text-center">
+        <div class="container py-3">
+            <p class="title">Eventi</p>
+
+            <hr class="my-4">
+
+            <div class="row">
+                <div class="col-12 col-md-6 col-lg-3">
+                    <img class="group link-btn img-fluid mb-3" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse4.mm.bing.net%2Fth%3Fid%3DOIP.WGUv4X4AoKwQwxiORG-pSAHaHa%26pid%3DApi&f=1" onclick="window.open('https://community.mozilla.org/groups/mozilla-italia/?view=events', '_blank');">
+                    <p>Evento 1</p> 
+                </div>
+                <div class="col-12 col-md-6 col-lg-3">
+                    <img class="group link-btn img-fluid mb-3" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse4.mm.bing.net%2Fth%3Fid%3DOIP.WGUv4X4AoKwQwxiORG-pSAHaHa%26pid%3DApi&f=1" onclick="window.open('https://community.mozilla.org/groups/mozilla-italia/?view=events', '_blank');">
+                    <p>Evento 2</p> 
+                </div>
+                <div class="col-12 col-md-6 col-lg-3">
+                    <img class="group link-btn img-fluid mb-3" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse4.mm.bing.net%2Fth%3Fid%3DOIP.WGUv4X4AoKwQwxiORG-pSAHaHa%26pid%3DApi&f=1" onclick="window.open('https://community.mozilla.org/groups/mozilla-italia/?view=events', '_blank');">
+                    <p>Evento 3</p> 
+                </div>
+                <div class="col-12 col-md-6 col-lg-3">
+                    <img class="group link-btn img-fluid mb-3" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse4.mm.bing.net%2Fth%3Fid%3DOIP.WGUv4X4AoKwQwxiORG-pSAHaHa%26pid%3DApi&f=1" onclick="window.open('https://community.mozilla.org/groups/mozilla-italia/?view=events', '_blank');">
+                    <p>Evento 4</p> 
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!----------------------------- FOOTER -------------------------->
+    <div class="mt-5 text-center link-panel">
+        <div class="container py-4">
+            <a class="text-white mx-3" href="">Forum</a>
+            <a class="text-white mx-3" href="">FAQ</a>
+            <a class="text-white mx-3" href="">Contatti</a>
+            <a class="text-white mx-3" href="https://github.com/MozillaItalia/assets">Assets</a>
+        </div>
+    </div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/1.0.0/flickity.pkgd.js"></script>
+</body>
+</html>
diff --git a/landing-page/style.css b/landing-page/style.css
@@ -0,0 +1,47 @@
+body{
+    background-color: #f2f2f2;
+    font-family: 'Zilla Slab', serif;
+    font-size: 1.2rem;
+}
+
+#logo-img{
+    height: 100px;
+}
+
+.btn{
+    background-color: #007CFF;
+    font-family: 'Zilla Slab', serif;
+}
+
+.link-panel{
+    background-color: #007CFF;
+    color: white;
+}
+
+hr{
+    border: 0;
+    height: 1px;
+    width: 20%;
+    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
+}
+
+.hr-light{
+    background-image: linear-gradient(to right, rgba(168, 168, 168, 0.089), white,rgb(168, 168, 168, 0.089));
+}
+
+.title{
+    font-size: 2rem;
+}
+
+.group{
+    max-height: 65%;
+    align-content: center;
+}
+
+.link-btn:hover{
+    cursor: pointer;
+}
+
+.gallery-cell {
+    height: 200px;
+}