inscription

7 months ago · 233e0cf9ed
parent 7c6befe24d
commit 233e0cf9ed
2 changed files with 124 additions and 0 deletions
--- a/pages/signin.html
+++ b/pages/signin.html
@ -0,0 +1,44 @@
 <!DOCTYPE html>
 <html lang="fr">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="../styles/styleSignin.css" media="screen">
    <title>Wiki Fantasy : inscription</title>
    <link rel="icon" href="./images/Logo.ico">
 </head>
 <body>
    <h1>▶ S'inscrire ◀</h1>
    <div class="signin">
        <div class="DivId">
            <p>Identifiant *</p>
            <input type="text" class="champ" id="name" name="name" required/>
        </div>
        <div class="DivEmail">
            <p>Email *</p>
            <input type="email" class="champ" id="email" name="email" required/>
        </div>
        <div class="mdp">
            <p>Mot de passe *</p>
            <input type="password" class="champ" id="pswd" name="pswd" required/>
        </div>
        <div class="confmdp">
            <p>Confirmer mot de passe *</p>
            <input type="password" class="champ" id="confpswd" name="confpswd" required/>
        </div>
        <div class="imgprof">
            <p>Image *</p>
        </div>
        <div class="confirmer">
            <input type="submit" class="btn" value="Inscription" />
        </div>
    </div>
 </body>
 </html>
--- a/styles/styleSignin.css
+++ b/styles/styleSignin.css
@ -0,0 +1,80 @@
 body{
 	background-color: #120b1d ;
    font-family: Lemon;
 }
 h1{
 	color : white;
    text-align: center;
 }
 .signin{
    background-color: #000000;
    border-radius: 25px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: repeat(5, 1fr);
    width : 30%;
    margin-left: 33%;
    margin-top: 3%;
    padding : 2%;
 }
 p{
    color :white;
    font-size: 20px;
    margin-top: 7%;
    font-weight: bold;
 }
 .DivId{
    grid-area: 1 / 1 / 2 / 2;
 }
 .DivEmail{
    grid-area: 2 / 1 / 3 / 2;
 }
 .mdp{
    grid-area: 3 / 1 / 4 / 3;
 }
 .confmdp{
    grid-area: 4 / 1 / 5 / 3;
 }
 .imgprof{
    grid-area: 1 / 2 / 3 / 3;
 }
 .confirmer{
    grid-area: 5 / 1 / 6 / 3;
    align-self: center;
    text-align: center;
 }
 .champ{
    width: 90%;
    height : 35%;
    border-radius: 25px;
    margin-left: 1%;
    padding-left: 3%;
    margin-top: -1%;
    border: none;
    font-size: 15px;
 }
 .btn{
    background: linear-gradient(90deg, #6100ff 0%, #1b0048 100%);
    margin-top: 10%;
    width:75%;
    font-size: 20px;
    padding: 2%;
    border-radius: 25px;
    color : white;
    border: none;
 }