diff --git a/countdown/index.html b/countdown/index.html
new file mode 100644
index 0000000..fa3b3f6
--- /dev/null
+++ b/countdown/index.html
@@ -0,0 +1,215 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta charset="UTF-8">
+  <meta name=viewport content="width=device-width, initial-scale=1.0">
+    <style>
+        /* latin */
+        @font-face {
+            font-family: 'Roboto';
+            font-style: normal;
+            font-weight: 400;
+            font-display: swap;
+            src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
+            unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+        }
+
+        * {
+            font-family: Roboto;
+        }
+
+        body {
+            --color1: rgb(2 94 115);
+            --color2: #f2a71a;
+            border-top: 20px solid var(--color2);
+            background-color: var(--color1);
+            height: calc(100vh - 40px);
+            width: 100%;
+            margin: 0;
+        }
+
+        .decount-center {
+            position: relative;
+            height:calc(100% - 20px);
+            /*top: calc(50%  - 200px + 40px);
+            left: 50%;
+            transform: translate(-50%, -50%);*/
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: row;
+        }
+        .decount-with-title{
+            display:flex;
+            flex-direction:column;
+            text-align:center;
+          flex: 2 0;
+          width:60%;
+        }
+      .decount-with-title * {
+        text-align:center;
+      }
+        .decount {
+            display: flex;
+            align-items: center;
+            justify-content: space-around;
+            font-size: xx-large;
+            width: 100%;
+            color: white;
+        }
+
+        .decount span {
+            /*background-color: blue;*/
+            display: inline-block;
+        }
+
+        .decount dateseparator {
+            /*background-color:darkslategray;*/
+            padding: 10px;
+            display: inline-block;
+            text-align: center;
+        }
+
+        .decount-info {
+            align-self: center;
+            text-align: center;
+            color: white;
+        }
+        
+        .logo {
+          position:relative;
+            height: 100%;
+          width:40%;
+        }
+      @media only screen and (max-width: 600px) {
+          .logo{
+            z-index:-1;
+            position:absolute;
+          }
+        .decount-with-title  *{
+          --thecolor:black;
+          text-shadow: -1px -1px 0 var(--thecolor), 1px -1px 0 var(--thecolor), -1px 1px 0 var(--thecolor), 1px 1px 0 var(--thecolor);
+        }
+        }
+
+        .credits {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-around;
+            position: fixed;
+            top: 90%;
+            width: 100%;
+            padding: 20px 0px;
+            color: white;
+        }
+
+        .madeby {
+            position: fixed;
+            bottom: 0%;
+            right: 0%;
+            font-size: 50%;
+            text-decoration: none;
+            color: white;
+        }
+
+        .madeby * {
+            text-decoration: none;
+            color: white;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="decount-center">
+        <img class="logo" height=20
+            src="https://forge.lefuturiste.fr/etoiledebethleem/website/raw/branch/master/assets/images/all_logos/square_notext_white_transparent.svg">
+      <div class=decount-with-title>
+        <p class="decount-info">Ouverture du site dans...</p>
+        <div class=decount>
+            <!-- day et week sont dans .lessprecision, hour dans les deux, min, sec dans .moreprecision-->
+            <span id=day></span>
+            <dateseparator id="daysep">-</dateseparator>
+            <span id=hour></span>
+            <dateseparator>:</dateseparator>
+            <span id=min></span>
+            <dateseparator id="secsep">:</dateseparator>
+            <span id=sec></span>
+        </div>
+      </div>
+    </div>
+    <div class="credits">
+        <span class="contactus">Suivez nous >
+            <span name=tabulation style="display:inline-block; width:20px"></span>
+            <a class=facebookbutton href="https://www.facebook.com/letoiledebethleem">
+                <svg xmlns="http://www.w3.org/2000/svg" style="fill:white; height:1.5em;" viewBox="0 0 512 512">
+                    <path
+                        d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z" />
+                </svg>
+            </a>
+        </span>
+    </div>
+    <span class="madeby"><a href="//gzod01.fr">GZod01</a></span>
+    <script>
+        Date.prototype.getWeek = function () {
+            var date = new Date(this.getTime());
+            date.setHours(0, 0, 0, 0);
+            // Thursday in current week decides the year.
+            date.setDate(date.getDate() + 3 - (date.getDay() + 6) % 7);
+            // January 4 is always in week 1.
+            var week1 = new Date(date.getFullYear(), 0, 4);
+            // Adjust to Thursday in week 1 and count number of weeks from date to week1.
+            return 1 + Math.round(((date.getTime() - week1.getTime()) / 86400000
+                - 3 + (week1.getDay() + 6) % 7) / 7);
+        }
+        let daydiv = document.querySelector('#day');
+        let hourdiv = document.querySelector('#hour');
+        let mindiv = document.querySelector('#min');
+        let secdiv = document.querySelector('#sec');
+        var eventdate = "2023/07/14 00:00:00"
+        var date = new Date();
+        function filldatezero(variable) {
+            return String(variable).padStart(2, '0');
+        }
+        function setTime() {
+            let curtimestamp = Date.now();
+            let totimestamp = Date.parse(eventdate); //a remplacer par la date de l'évènement
+            let thetimestamp = totimestamp - curtimestamp
+            if (thetimestamp == 0 | thetimestamp < 0) {
+                location = "/"
+            }
+            date.setTime(thetimestamp);
+            let year = date.getFullYear() - 1970;
+            let month = date.getMonth();
+            //let week = date.getWeek();
+            let day = date.getDate();
+            let hour = date.getHours();
+            let min = date.getMinutes();
+            let sec = date.getSeconds();
+            if (day - 1 == 0) {
+                document.querySelector('#day').style.display = "none"
+                document.querySelector('#daysep').style.display = "none"
+            }
+            else{
+                secdiv.style.display="none";
+                document.querySelector('#secsep').style.display="none"
+            }
+            day = filldatezero(day)
+            hour = filldatezero(hour)
+            min = filldatezero(min)
+            sec = filldatezero(sec)
+            daydiv.innerHTML = day + "j"
+            hourdiv.innerHTML = hour + "h"
+            mindiv.innerHTML = min + "min"
+            secdiv.innerHTML = sec + "secondes"
+            //console.log(`Il reste ${year} ans, ${year} mois, ${day} Jours, ${hour} Heures, ${min} Minutes, ${sec} Secondes avant l'ouverture du site`)
+            setTimeout(setTime, 1000);
+        }
+        window.onload = setTime
+
+
+
+    </script>
+</body>
+
+</html>
\ No newline at end of file
