ajoute actu lustrac et popup newsletter

public/Pages/actu.html

@@ -3,7 +3,7 @@
         <h2 class="section-heading">Actualités</h2>
         <hr class="light">              
         <div class="row"> 
-            <div class="col-md-4">
+            <div class="col-md-3">
                 <div class="panel panel-default">
                     <div class="panel-heading">
                         <h3 class="panel-title">Les visites groupées</h3>
@@ -16,7 +16,7 @@
                     </div>
                 </div>
             </div>
-            <div class="col-md-4">
+            <div class="col-md-3">
                 <div class="panel panel-default">
                     <div class="panel-heading">
                         <h3 class="panel-title">Nous avons besoin de votre soutien</h3>
@@ -24,14 +24,14 @@
                     <div class="panel-body">
                         <p><img class="img-responsive center-block" src="img/actus/dons.jpg" alt="Photo arrosage jeunes plants" /></p>
                         <ul>
-                            <li><a href="https://www.helloasso.com/associations/solidarite-pour-un-developpement-humain-sdh/formulaires/4/widget">Je fais un don défiscalisable.</a></li>
-                            <li><a href="https://www.helloasso.com/don/associations/tera">Je fais un don non défiscalisable.</a></li>
-                            <li><a href="https://www.helloasso.com/associations/tera/adhesions/adhesion-annuelle-a-tera">J'adhère à l'association.</a></li>
+                            <li><a href="https://www.helloasso.com/associations/solidarite-pour-un-developpement-humain-sdh/formulaires/4/widget">Je fais un don défiscalisable</a></li>
+                            <li><a href="https://www.helloasso.com/don/associations/tera">Je fais un don non défiscalisable</a></li>
+                            <li><a href="https://www.helloasso.com/associations/tera/adhesions/adhesion-annuelle-a-tera">J'adhère à l'association</a></li>
                         </ul>
                     </div>
                 </div>
             </div>
-            <div class="col-md-4">
+            <div class="col-md-3">
                 <div class="panel panel-default">
                     <div class="panel-heading">
                         <h3 class="panel-title">Lettre d'information</h3>
@@ -44,6 +44,19 @@
                     </div>
                 </div>
             </div>
+            <div class="col-md-3">
+                <div class="panel panel-default">
+                    <div class="panel-heading">
+                        <h3 class="panel-title">Naissance du 1er Quartier Rural en Transition de France</h3>
+                    </div>
+                    <div class="panel-body">
+                        <p><img class="img-responsive center-block" src="img/actus/lustrac.jpg" alt="Photo lettre d'information" /></p>
+                        <ul>
+                            <li><a href="https://lustrac-en-transition.coop/">Venez découvrir ce nouveau lieu de notre éco-système</a></li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
 </div>

public/css/creative.css

@@ -55,7 +55,7 @@
 }
 #actu .panel-title {
     text-align: center;
-    min-height: 45px;
+    min-height: 66px;
 }
 #actu .panel-body {
     min-height: 300px;
@@ -690,3 +690,57 @@ img::-moz-selection {
 body {
     webkit-tap-highlight-color: #222;
 }
+
+#newsletter {
+    position: fixed;
+    bottom: 20px;
+    left: 20px;
+    width: 200px;
+}
+
+#newsletter #close {
+    position: absolute;
+    top: 5px;
+    right: 20px;
+}
+
+#newsletter a#newsletter-link {
+    padding: 10px;
+    color: #000;
+    display: inline-block;
+}
+
+#newsletter button {
+    align-self:center;
+    background: #ffffffc2;
+    padding:1rem 1rem;
+    margin:0 1rem;
+    transition:all .5s ease;
+    color:#41403E;
+    font-size:1.5rem;
+    letter-spacing:1px;
+    outline:none;
+    box-shadow: 20px 38px 34px -26px hsla(0,0%,0%,.2);
+    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
+    border:solid 7px #e32b45;
+    animation: borderPulse 2000ms infinite ease-out;
+}
+
+#newsletter button:hover {
+    background: #e32b45;
+}
+
+#newsletter button:hover a {
+   text-decoration: none;
+   color: #fff;
+}
+
+/* Declare border pulse animation */
+@keyframes borderPulse {
+  0% {
+    box-shadow: inset 0px 0px 0px 5px rgba(255, 255, 255,.4), 0px 0px 0px 0px rgba(255,255,255,1);
+  }
+  100% {
+    box-shadow: inset 0px 0px 0px 3px rgba(117, 117, 255,.2), 0px 0px 0px 10px rgba(255,255,255,0);
+  }
+}

public/index.html

@@ -176,6 +176,13 @@
         </div>
     </section>
 
+    <div id="newsletter">
+        <button class="lined thick">
+            <div id="close"><a href="#" onclick="parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);"><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24"><path d="M24 3.752l-4.423-3.752-7.771 9.039-7.647-9.008-4.159 4.278c2.285 2.885 5.284 5.903 8.362 8.708l-8.165 9.447 1.343 1.487c1.978-1.335 5.981-4.373 10.205-7.958 4.304 3.67 8.306 6.663 10.229 8.006l1.449-1.278-8.254-9.724c3.287-2.973 6.584-6.354 8.831-9.245z"/></svg></a></div>
+            <a id="newsletter-link" target="_blank" href="http://alternativeshumanistes.us7.list-manage.com/subscribe?u=a47e63cabc733a3e203cb65d6&id=593f7449bc">Abonnez-vous à notre lettre d'information</a>
+        </button>
+    </div>
+
     <!-- jQuery -->
     <script src="js/jquery.js"></script>