Harmonisation et ajout logo

CSS/etrange_decouverte.css

@@ -3,6 +3,8 @@ body {
     flex-direction: column;
     justify-content: space-between;
     align-items: center;
+    color:white;
+    font-family: 'Special Elite', cursive;
     background-color: black;
     height: 95vh;
 }
@@ -55,20 +57,21 @@ body {
 
             .button {
                 outline: none;
-                border: 3px solid white;
-                border-radius: 50px;
-                height: 8vh;
+                border:0.2vw solid #b9b9b9;
+                border-radius: 4vw;
                 min-width: 15vw;
-                padding: 0px 10px 0px 10px;
+                width :20vw;
+                padding: 1vw 1.2vw 1vw 1.2vw;
                 color: black;
                 font-family: 'Special Elite', cursive;
-                font-size: 1.2vw;
+                font-size: 1.5vw;
                 background-image: linear-gradient(to top, black -50%, #BF0909 80%);
                 cursor : pointer;
             }
 
             .button:hover {
-                box-shadow: 0 0 50px  #B0C4DE;
+                border: 0.2vw solid white;
+                box-shadow: 0 0 3vw  #B0C4DE;
             }
 
             .button:active {
@@ -94,8 +97,16 @@ body {
                 }
             }
 
-    footer {
-        color: green;
-        display: flex;
-        flex : 1;
+            footer{
+                flex:0.5;
+                display:flex;
+                flex-direction: column;
+                justify-content:flex-end;
+                align-items: center;
+                font-size:1vw;
+                margin-top:2vw;
+            }
+            
+                #names{
+                    margin : 0;
                 }

CSS/menu.css

@@ -4,13 +4,12 @@ body{
     color:white;
     display:flex;
     flex-direction:column;
-    justify-content:center;
-    align-items: center;
     font-family:'Special Elite',cursive;
 }
 
 header{
     flex:1;
+    padding-top:2vw;
     display:flex;
     justify-content:center;
     align-items: center;
@@ -18,7 +17,7 @@ header{
 }
 
 #headerTxt{
-    
+    margin:0;
     font-size:4.5vw;
     font-weight: bold;
     color:#a30909;
@@ -47,6 +46,13 @@ main{
     align-items: center;
 }
 
+main section {
+    display:flex;
+    flex-direction: column;
+    justify-content:center;
+    align-items: center;
+}
+
     main section article {
         display:flex;
         flex-direction: column;
@@ -54,6 +60,31 @@ main{
         align-items: center;
     }
 
+    #logoBlock{
+        margin-bottom:5vh;
+        height:20vh;
+        width:50vw; 
+        display:block;
+        opacity:0;
+        animation:fade-text 1s forwards;
+        animation-delay:6s;
+    }
+
+        #logo{
+            width:3vw;
+            height:auto;
+            animation-name: search;
+            animation-duration:5s;
+            animation-iteration-count:infinite;
+            position:relative;
+        }
+
+        @keyframes search{
+            0% {transform:translate3D(10vw,5vh,0)}
+            50% {transform:translate3D(40vw,15vh,0)}
+            100% {transform:translate3D(10vw,5vh,0)}
+        }
+
     main section article span{
         width:16vw;
         display:flex;
@@ -85,24 +116,25 @@ main{
 
         #introTxt{
             opacity:0;
-            font-size:2vw;
+            font-size:1.8vw;
             animation:fade-text 1s forwards;
             animation-delay:3.5s;
         }
 
         #pseudoTxt{
             opacity:0;
-            font-size:2vw;
+            font-size:1.8vw;
             animation:fade-text 1s forwards;
             animation-delay:5s;
+            margin-bottom:1vw;
         }
 
         #pseudoInput{
             opacity:0;
             font-family:'Special Elite',cursive;
-            font-size:1.8vw;
+            font-size:1.5vw;
             border-radius:1vw;
-            padding:0.3vw 1vw 0vw 0.5vw;
+            padding:0.5vw 0.7vw 0.3vw 0.7vw;
             animation:fade-text 1s forwards;
             animation-delay:5s;
             
@@ -111,9 +143,9 @@ main{
         #pseudoInput:focus{
             outline:none;
             font-family:'Special Elite',cursive;
-            font-size:1.8vw;
+            font-size:1.5vw;
             border-radius:1vw;
-            padding:0.3vw 1vw 0vw 0.5vw;
+            padding:0.5vw 0.7vw 0.3vw 0.7vw;
         }
 
         #buttonBlock{

HTML/etrange_decouverte.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>INSAïde</title>
+    <link rel="shortcut icon" href="../Images/Logo.png" type="image/png">
     <link rel="stylesheet" href="../CSS/etrange_decouverte.css">
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet"> 
@@ -29,7 +30,8 @@
         </section>
     </main>
     <footer>
-
+        <p id="names">Copyright © 2020 Florian EHR - Pierre FAVARY - Baptiste MARTY</p>
+        <p id="rights">Tous droits réservés </p>
     </footer>
 </body>
 </html>

HTML/menu.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>INSAïde</title>
+    <link rel="shortcut icon" href="../Images/Logo.png" type="image/png">
     <link rel="stylesheet" href="../CSS/menu.css">
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">
@@ -15,6 +16,9 @@
     </header>
     <main>
         <section>
+            <article id="logoBlock">
+                <img id="logo" src="../Images/Logo.png" alt="Logo"/>
+            </article>
             <article>
                 <span>
                     <span id="B">B</span>