Add newsletter registration form

Le-Trefle-2-0 · Jan 31, 2025 · a86a0b5 · a86a0b5
1 parent edca7e6
commit a86a0b5
Show file tree

Hide file tree

Showing 3 changed files with 158 additions and 50 deletions.
diff --git a/index.html b/index.html
@@ -14,6 +14,7 @@
   <link rel="stylesheet" href="style/carousel.css" />
   <link rel="stylesheet" href="/style/contact.css" />
   <link rel="stylesheet" href="/style/nav.css">
+  <link rel="stylesheet" href="/style/footer.css" />
   <link rel="icon" href="/assets/logo.svg" />
 </head>
 
@@ -162,10 +163,35 @@ <h2>Nous rejoindre sur Discord</h2>
       </div>
     </div>
     <div class="right">
+      <div id="mc_embed_shell">
+        <div id="mc_embed_signup">
+          <form action="https://letrefle.us13.list-manage.com/subscribe/post?u=7c7527175761ace8da2cb5415&amp;id=b5fb1d0e6e&amp;f_id=00285be1f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
+              <div id="mc_embed_signup_scroll">
+                  <h2>S'inscrire à notre lettre d'actualité</h2>
+                  <div class="mc-field-group input">
+                    <input type="email" name="EMAIL" class="required email" id="mce-EMAIL" autocomplete="off" required>
+                    <span>Adresse courriel</span>
+                  </div>
+                  <div id="mce-responses" class="clear foot">
+                      <div class="response" id="mce-error-response" style="display: none;"></div>
+                      <div class="response" id="mce-success-response" style="display: none;"></div>
+                  </div>
+                  <div aria-hidden="true" style="position: absolute; left: -5000px;">
+                      <input type="text" name="b_7c7527175761ace8da2cb5415_b5fb1d0e6e" tabindex="-1" value="">
+                  </div>
+                  <div class="optionalParent">
+                      <div class="clear foot">
+                          <input type="submit" name="subscribe" id="mc-embedded-subscribe" class="button" value="S'inscrire">
+                      </div>
+                  </div>
+              </div>
+          </form>
+        </div>
+      </div>
+
       <a href="/faq">F.A.Q.</a>
       <a href="/legal">Mentions Légales</a>
       <a href="/don" class="don">Faire un don</a>
-    </div>
   </footer>
 </body>
 </html>
diff --git a/style/footer.css b/style/footer.css
@@ -0,0 +1,129 @@
+footer {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    background: #C3D7CD;
+    flex-wrap: wrap;
+    padding: 2vh;
+    margin-top: 10vh;
+}
+
+footer .left {
+    align-items: center;
+    display: flex;
+}
+
+.left .footer-text {
+    margin-left: 10vh;
+}
+
+footer .left .img img {
+    width: 10vh;
+}
+
+footer .right {
+    display: flex;
+    flex-direction: row;
+}
+
+footer .right #mc_embed_shell {
+    display: flex;
+    flex-direction: row;
+}
+
+footer .right #mc_embed_shell h2 {
+    font-weight: 400;
+}
+
+footer .right #mc_embed_shell .input {
+    display: flex;
+    flex-direction: column;
+}
+
+footer .right #mc_embed_shell .input input {
+    padding: 0 0 0 10px;
+    border-radius: 5px;
+    border: 2px solid #A4C79F;
+    height: 100%;
+    font-family: 'Titillium Web', sans-serif;
+}
+
+footer .right #mc_embed_shell .input span {
+    position: absolute;
+    transform: translateY(-8px);
+    z-index: 1000;
+    padding: 10px;
+    pointer-events: none;
+    font-size: 1em;
+    text-transform: uppercase;
+    text-align: left;
+    transition: 0.5s;
+    color: #A4C79F;
+}
+
+footer .right #mc_embed_shell .input input:focus {
+    border: 2px solid #A4C79F;
+    outline: none;
+}
+
+footer .right #mc_embed_shell .input input:focus ~ span,
+footer .right #mc_embed_shell .input input:valid ~ span {
+    transform: translateY(-15px);
+    background: #A4C79F;
+    color: #fff;
+    padding: 0 5px;
+    border-radius: 3px;
+    font-size: 0.7em;
+}
+
+footer .right #mc_embed_shell .button {
+    background-color: #A4C79F;
+    border-radius: 3vh;
+    border: none;
+    padding: 16px 32px;
+    text-decoration: none;
+    cursor: pointer;
+    position: relative;
+    margin-top: 16px;
+    transition: 0.5s;
+}
+
+footer .right #mc_embed_shell .button:hover {
+    background: #C3D7CD;
+}
+
+footer .right a {
+    color: #000;
+    text-decoration: none;
+    font-size: 2vh;
+    margin: 1vh;
+    height: 35px;
+}
+
+.don {
+    background: #A4C79F;
+    border-radius: 3vh;
+    padding: 1vh;
+}
+
+@media (max-width: 1000px) {
+    footer {
+        margin-top: 0vh;
+    }
+
+    footer .right {
+        margin-top: 20px;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .right #mc_embed_signup_scroll {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .left .footer-text {
+        margin-left: 2vh;
+    }
+}
diff --git a/style/main.css b/style/main.css
@@ -97,42 +97,6 @@ body {
     border: 2px solid transparent;
 }
 
-footer {
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    background: #C3D7CD;
-    flex-wrap: wrap;
-    padding: 2vh;
-    margin-top: 10vh;
-}
-
-footer .left {
-    align-items: center;
-    display: flex;
-}
-
-.left .footer-text {
-    margin-left: 10vh;
-}
-
-footer .left .img img {
-    width: 10vh;
-}
-
-footer .right a {
-    color: #000;
-    text-decoration: none;
-    font-size: 2vh;
-    margin: 1vh;
-}
-
-.don {
-    background: #A4C79F;
-    border-radius: 3vh;
-    padding: 1vh;
-}
-
 @media (max-width: 1000px) {
     .benevol-text {
         padding: 0;
@@ -161,7 +125,8 @@ footer .right a {
     }
 
     .discord .invite {
-        margin-top: calc(400px - 40vw);
+        position: relative;
+        top: calc(400px - 40vw);
     }
 
     .discord-text .invite a {
@@ -172,16 +137,4 @@ footer .right a {
     iframe {
         display: none;
     }
-
-    footer {
-        margin-top: 0vh;
-    }
-
-    footer .right {
-        margin-top: 20px;
-    }
-
-    .left .footer-text {
-        margin-left: 2vh;
-    }
 }