wip #2652 @0.20

diff --git a/BarlowSemiCondensed-Medium.woff b/BarlowSemiCondensed-Medium.woff
deleted file mode 100644 (file)
index 53e13b0..0000000
Binary files a/BarlowSemiCondensed-Medium.woff and /dev/null differ

diff --git a/css/style.css b/css/style.css
index e40745c462ddbcd21949a60069af6874ee12bfc7..95390715bd7cd18fd1235d5101d01266c8f00d6d 100644 (file)
--- a/css/style.css
+++ b/css/style.css
@@ -3,11 +3,12 @@
   margin: 0;
   box-sizing: border-box; }
 
   margin: 0;
   box-sizing: border-box; }
 

-@font-face {
-  font-family: "Barlow";
-  src: url("../BarlowSemiCondensed-Medium.woff") format("woff"); }
+html, body {
+  height: 100%; }
+

 body {
 body {

-  font-family: Barlow, sans-serif; }
+  font-family: Barlow, sans-serif;
+  font-weight: 500; }

 
 .form {
   display: inherit; }
 
 .form {
   display: inherit; }


@@ -16,9 +17,8 @@ body {
   background-image: url("../img/background.png");
   background-size: cover;
   background-repeat: no-repeat;
   background-image: url("../img/background.png");
   background-size: cover;
   background-repeat: no-repeat;

-  width: 100vw;
-  height: 100vh;

   background-position: center;
   background-position: center;

+  min-height: 100%;

   display: flex;
   align-items: center;
   flex-direction: column; }
   display: flex;
   align-items: center;
   flex-direction: column; }


@@ -33,7 +33,8 @@ body {
   border: none;
   font-size: 20px;
   color: black;
   border: none;
   font-size: 20px;
   color: black;

-  padding: 0 24px; }
+  padding: 0 24px;
+  border-radius: 0; }

   .mail-btn {
     width: 384px;
     height: 60px;
   .mail-btn {
     width: 384px;
     height: 60px;


@@ -48,25 +49,21 @@ input::placeholder {
 
 @media (max-width: 900px) {
   .form {
 
 @media (max-width: 900px) {
   .form {

-    display: block; }
-
-  .mail-btn {

     display: block;
     display: block;

-    width: 300px;
-    max-width: 300px;
-    min-width: 200px;
-    margin: 0 20px; }
+    margin-bottom: 40px; }

 
 

-  .mail {
+  .mail-btn, .mail {
+    display: block;

     width: 300px;
     width: 300px;

-    max-width: 300px;
-    min-width: 200px;
-    margin: 0 20px; }
+    margin: 0 10px; }

 
   .img {
     max-width: 250px; }
 
   input::placeholder {
     text-align: center; } }
 
   .img {
     max-width: 250px; }
 
   input::placeholder {
     text-align: center; } }

+.sendMessage {
+  color: white;
+  font-size: 24px; }

 
 /*# sourceMappingURL=style.css.map */
 
 /*# sourceMappingURL=style.css.map */

diff --git a/css/style.sass b/css/style.sass
index 0e95436092fe10d8dad98d2b0ff272ab78f9a716..8a095a6f9133e5fbf2705fdcd8122cad0dee5e41 100644 (file)
--- a/css/style.sass
+++ b/css/style.sass
@@ -3,11 +3,12 @@ $green : #2FA07B
   padding: 0
   margin: 0
   box-sizing: border-box
   padding: 0
   margin: 0
   box-sizing: border-box

-@font-face
-  font-family: "Barlow"
-  src: url("../BarlowSemiCondensed-Medium.woff") format("woff")
+html,body
+  height: 100%

 body
   font-family: Barlow, sans-serif
 body
   font-family: Barlow, sans-serif

+  font-weight: 500
+

 .form
   display: inherit
 
 .form
   display: inherit
 


@@ -15,9 +16,8 @@ body
   background-image: url("../img/background.png")
   background-size: cover
   background-repeat: no-repeat
   background-image: url("../img/background.png")
   background-size: cover
   background-repeat: no-repeat

-  width: 100vw
-  height: 100vh

   background-position: center
   background-position: center

+  min-height: 100%

   display: flex
   align-items: center
   flex-direction: column
   display: flex
   align-items: center
   flex-direction: column


@@ -32,6 +32,7 @@ body
   font-size: 20px
   color: black
   padding: 0 24px
   font-size: 20px
   color: black
   padding: 0 24px

+  border-radius: 0

   &-btn
     width: 384px
     height: 60px
   &-btn
     width: 384px
     height: 60px


@@ -45,17 +46,11 @@ input::placeholder
 @media (max-width: 900px)
   .form
     display: block
 @media (max-width: 900px)
   .form
     display: block

-  .mail-btn
+    margin-bottom: 40px
+  .mail-btn, .mail

     display: block
     width: 300px
     display: block
     width: 300px

-    max-width: 300px
-    min-width: 200px
-    margin: 0 20px
-  .mail
-    width: 300px
-    max-width: 300px
-    min-width: 200px
-    margin: 0 20px
+    margin: 0 10px

 
   .img
     max-width: 250px
 
   .img
     max-width: 250px


@@ -64,3 +59,6 @@ input::placeholder
   input::placeholder
     text-align: center
 
   input::placeholder
     text-align: center
 

+.sendMessage
+  color: white
+  font-size: 24px

diff --git a/index.php b/index.php
index e72abe6695a156f9ee9d8435c057996ff79371e1..a66480f5529ea118d62e044788b5bd2149782349 100644 (file)
--- a/index.php
+++ b/index.php
@@ -1,12 +1,3 @@
-<?php
-if(isset($_POST['mail']))
-{
-    $data=$_POST['mail'].PHP_EOL;
-    $fp = fopen('mail.txt', 'a');
-    fwrite($fp, $data);
-    fclose($fp);
-}
-?>

 <!doctype html>
 <html lang="en">
 <head>
 <!doctype html>
 <html lang="en">
 <head>


@@ -14,6 +5,7 @@ if(isset($_POST['mail']))
     <meta name="viewport"
           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <meta name="viewport"
           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">

+    <link href="https://fonts.googleapis.com/css?family=Barlow:500&display=swap" rel="stylesheet">

     <link rel="stylesheet" href="css/style.css">
     <title>Macair</title>
 </head>
     <link rel="stylesheet" href="css/style.css">
     <title>Macair</title>
 </head>


@@ -21,10 +13,25 @@ if(isset($_POST['mail']))
 <div class="container">
     <img class="img" src="img/logo.png" alt="">
 
 <div class="container">
     <img class="img" src="img/logo.png" alt="">
 

-    <form class="form" method="post">
-        <input class="mail" type="email" name="mail" placeholder="votre email">
-        <button class="mail-btn" type="submit">S'inscrire à la newsletter</button>
-    </form>
+    <?php
+    if (isset($_POST['mail']) && !empty($_POST['mail'])) {
+        $data = $_POST['mail'].PHP_EOL;
+        $fp = fopen('mail.txt', 'a');
+        fwrite($fp, $data);
+        fclose($fp);
+
+        echo "<p class='sendMessage'>Merci de vous être inscrit(e)</p>";
+
+    } else {
+    ?>
+        <form class='form' method='post'>
+            <input class='mail' type='email' name='mail' placeholder='votre email' required>
+            <button class='mail-btn' type='submit'>S'inscrire à la newsletter</button>
+        </form>
+    <?php
+    }
+    ?>
+

 
 </div>
 </body>
 
 </div>
 </body>