diff --git a/assets/css/main.css b/assets/css/main.css
index e69de29..b92606f 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -0,0 +1,146 @@
+html{
+    margin: 0;
+    padding: 0;
+    @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
+}
+
+body{
+    margin: 0;
+    padding: 0;
+    scroll-behavior: smooth;
+    font-family: 'Roboto', sans-serif;
+}
+
+.container{
+    width: 100%;
+    height: 100vh;
+    border-bottom: 0.2vw solid black;
+}
+
+#main h1{
+    margin: 0;
+    padding: 0;
+    text-align: center;
+    font-size: 4vw;
+    padding: 25vh 0;
+    animation: fadeup 1s;
+}
+
+.container h1{
+    margin: 0;
+    padding: 0;
+    text-align: center;
+    font-size: 4vw;
+    padding: 15vh 0;
+    animation: fadeup 1s;
+}
+
+.container h2{
+    text-align: center;
+    animation: fade 2s;
+    font-size: 2vw;
+}
+
+@keyframes fade {
+    0%{opacity: 0}
+    100%{opacity: 1}
+}
+
+@keyframes fadeup {
+    0%{opacity: 0;margin-left: 10vw;}
+    100%{opacity: 1;margin-top: 0;}
+}
+
+label{
+    display: block;
+    text-align: center;
+    font-size: 2.5vw;
+    padding: 5vh 0;
+    animation: fadeup 2s;
+}
+
+input{
+    display: block;
+    margin: auto;
+    border-top: transparent;
+    border-left: transparent;
+    border-right: transparent;
+    text-align: center;
+    padding: 1vw;
+    background-color: transparent;
+    border-bottom: 0.2vw solid rgba(69, 69, 69, 0.87);
+    color: black;
+    width: 50%;
+    animation: fadewidth 2s;
+    box-shadow: 0 0 0 transparent;
+    -webkit-transition: box-shadow 0.5s;
+    transition: box-shadow 0.5s;
+}
+
+.error {
+    -webkit-animation: shake 0.2s ease-in-out 0s 2;
+    animation: shake 0.2s ease-in-out 0s 2;
+    box-shadow: 0 0 0.5em red;
+}
+
+input:hover{
+    border-bottom-right-radius: 20px;
+    transition-duration: 0.3s;
+}
+
+input:focus{
+    border-color: #057693;
+    transition-duration: 0.3s;
+}
+
+@keyframes fadewidth {
+    0%{width: 20%}
+    100%{width: 50%}
+}
+
+@-webkit-keyframes shake {
+    0% {
+        margin-left: auto;
+        margin-right: auto;
+    }
+    25% {
+        margin-left: 15vh;
+        margin-right: auto;
+    }
+    75% {
+        margin-left: auto;
+        margin-right: 15vh;
+    }
+    100% {
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
+
+@keyframes shake {
+    0% {
+        margin-left: auto;
+        margin-right: auto;
+    }
+    25% {
+        margin-left: 15vh;
+        margin-right: auto;
+    }
+    75% {
+        margin-left: auto;
+        margin-right: 15vh;
+    }
+    100% {
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
+
+.hide{
+
+}
+
+h2#cookie_text{
+    text-align: center;
+    font-size: 2.5vw;
+}
\ No newline at end of file
diff --git a/assets/js/main.js b/assets/js/main.js
index e69de29..2cd1cdf 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -0,0 +1,36 @@
+const main = document.querySelector("#main");
+const resultMail = document.querySelector("#result_mail");
+const passwordTest = document.querySelector("#password_test");
+const resultPassword = document.querySelector("#result_password");
+const passwordManage = document.querySelector("#password_manage");
+const security2AF = document.querySelector("#security_2AF");
+const cookie = document.querySelector("#cookie");
+
+
+mailRegex = new RegExp("(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|\"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\\\[\x01-\x09\x0b\x0c\x0e-\x7f])*\")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\\])");
+
+
+document.querySelectorAll("input").forEach((el) => {
+    el.addEventListener("change", (e => {
+        el.classList.remove("error");
+    }));
+});
+
+main.querySelector("input").addEventListener("keyup", (e) => {
+    if (e.key === "Enter") {
+        mailValid();
+    }
+});
+
+
+function mailValid() {
+    let input = main.querySelector("input");
+    if (mailRegex.test(input.value)) {
+        resultMail.classList.remove("hide");
+        resultMail.scrollIntoView({
+            "behavior": "smooth"
+        });
+    } else {
+        input.classList.add("error");
+    }
+}
diff --git a/index.html b/index.html
index a3ced76..515eef5 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,48 @@
 	<link rel="stylesheet" type="text/css" href="assets/css/main.css">
 </head>
 <body>
+	<div class="container" id="main">
+		<h1>Do you really think you're safe on the web ?</h1>
+		<label for="email">Let's begin by check if your email is safe ;)</label>
+		<input type="email" id="email" name="email" placeholder="example : xyz@gmail.com">
+	</div>
+	<div class="container hide" id="result_mail">
+		<h1>Results</h1>
+		<h2></h2> <!-- Your email isn't safe ! OR Your email is safe ! -->
+		<h2>Let's see what about your <a href="#password_test">passwords ?</a></h2>
+	</div>
+	<div class="container hide" id="password_test">
+		<h1>Do you really think your passwords are safe?</h1>
+		<label for="password">Let's see if your password is secure</label>
+		<input type="password" id="password" name="password" placeholder="your password: MDPdrive2">
+	</div>
+	<div class="container hide" id="result_password">
+		<h1>Results</h1>
+		<h2></h2><!-- your password isn't safe ! | you password is safe -->
+		<!-- use https://password.kaspersky.com/ -->
+		<ul>
+
+		</ul>
+	</div>
+	<div class="container hide" id="password_manage">
+		<h1>To make your life easier, use a password manager !</h1>
+		<h2><a href="https://techcrunch.com/2018/12/25/cybersecurity-101-guide-password-manager/">Learn more</a></h2>
+	</div>
+
+	<div class="container hide" id="security_2AF">
+		<h1>For more security, the 2AF should be used as much as possible</h1>
+		<h2>It's one of the best protection you can get !</h2>
+		<h2><a href="https://fr.wikipedia.org/wiki/Double_authentification">Learn more</a></h2>
+	</div>
+
+	<div class="container hide" id="cookie">
+		<h1>Pay attention to the cookie on the sites!
+			Don't accept them for nothing</h1>
+		<h2 id="cookie_text">Cookie :</h2>
+		<h2>Before : Formerly a sweet little cake, which was accepted with pleasure.</h2>
+		<h2>Today: a small, salty computer file, which must be vehemently refused</h2>
+	</div>
+
 	<script src="assets/js/main.js"></script>
 </body>
 </html>