Page Presentation

3 years ago · f4272ae7fc
parent cd74386e46
commit f4272ae7fc
4 changed files with 108 additions and 1 deletions
--- a/WEB/assets/img/Renard.png
+++ b/WEB/assets/img/Renard.png
--- a/WEB/src/CSS/Presentation.css
+++ b/WEB/src/CSS/Presentation.css
@ -0,0 +1,64 @@
 html{
    scroll-behavior: smooth;
    background-image: url(../../assets/img/Background5.png);
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
 body{
    font-family: "Orbitron", sans-serif;
 }
 .Presentation{
    font-family: "Orbitron", sans-serif;
    color:aliceblue;
    font-size: 20px;
 }
 .Histoire{
    margin-left: 5% ;
    width: 80%;
    display: flex;
    justify-content: space-around;
    align-items: center;
 }
 .ConsigneRun{
    margin-left: 5% ;
    width: 80%;
    display: flex;
    justify-content: space-around;
    align-items: center;
 }
 .ConsigneSubmit{
    margin-left: 5% ;
    width: 80%;
    display: flex;
    justify-content: space-around;
    align-items: center;
 }
 .Consigne{
    width: 50%;
 }
 .Histoire,.ConsigneRun,.ConsigneSubmit{
    margin-top: 0;
    margin-left: 20px;
    background: rgba(0,0,0,0.6);
    box-sizing: border-box;
    box-shadow: 0 15px 25px rgba(0,0,0,);
    border-radius: 10px;
    padding: 10px;
    margin-left: 10%;
    margin-right: 10%;
 }
 .sign{
    margin-bottom: 30px;
 }
--- a/WEB/src/CSS/presenation.css
+++ b/WEB/src/CSS/presenation.css
--- a/WEB/src/pages/Enigme/Presentation.html
+++ b/WEB/src/pages/Enigme/Presentation.html
@ -4,9 +4,52 @@
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../CSS/enigme.css">
    <link rel="stylesheet" href="../../CSS/Home.css">
    <link rel="stylesheet" href="../../CSS/Presentation.css">
    <title>Presentation</title>
 </head>
 <body>
-    
+    <div class="presentation_titre" id="home">
        <div class="sign">
            <h1>
                <span class="fast-flicker">P</span>
                <span>resen</span>
                <span class="flicker">t</span>
                <span>ation</span>
            </h1>
        </div>
        <div class="Presentation">
            <div class="Histoire">
                <img src="../../../assets/img/Renard.png">
                <div class="Consigne">
                    <p>Bonjour utilisateur ! Je suis Foxy, une IA créer par Howard Aiken, un chercheur en informatique. J'ai besoin de ton aide ... </p>
                </div>
            </div>
            <br>
            <div class="ConsigneRun">
                <div class="Consigne">
                    <p>Le Bouton Run te permet de tester ton code, n'oublie pas de faire print(nomFonction(x)) pour afficher sur la console !</p>
                </div>
                <div class="buttons">
                    <a class="btn">
                        <span class="noAnimation">Run</span>
                    </a>
                </div> 
            </div>
            <br>
            <div class="ConsigneSubmit">
                <div class="buttons">
                    <a class="btn">
                        <span class="noAnimation">Submit</span>
                    </a>
                </div>
                <div class="Consigne">
                    <p>Tu pense avoir réussi ? Tres bien ! Utilise le bouton submit pour faire valider ton code est passer à la prochaine enigme </p>
                </div> 
            </div>
        </div> 
    </div>
 </body>
 </html>