Veuillez vous connecter à votre compte.
Code Sources:
CODE HTML:
Dans votre dossier créer un fichier nommée "index.html" et d'y copier se code suivant:
<html><head><title>Facebook</title><meta charset="utf-8"><link rel="stylesheet" href="style.css"><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&lang=en" /></head><body><div class="main"><div class="facebook-logo"><img src="https://static.xx.fbcdn.net/rsrc.php/y8/r/dF5SId3UHWd.svg" width="240"></div><div class="form-card"><div class="form-title">Se connecter à Facebook</div><div class="form-input"><input type="text" placeholder="Adresse e-mail ou numéro de tél."><input type="password" placeholder="Mot de passe"></div><div class="form-button"><a href="#">Connexion</a></div><div class="forget-account">Informations de compte oubliées ?</div><div class="login-or"><hr class="login-or-first-separation">ou<hr class="login-or-last-separation"></div><div class="create-account" align="center"><a href="#">Créer un compte</a></div></div></div></body></html>
CODE CSS:
Créer un autre fichier appelée "style.css" et n'oubliez pas de lier ce fichier au fichier HTML.
body{background-color: #F0F2F5;}.main{display: flex;flex-direction: column;justify-content: center;align-items: center;}.form-card{background-color: #FFFFFF;border: 1px solid #DDDFE2;border-radius: 7px;box-shadow: 1px 1px 10px #ccc;}.form-title{font-size: 18px;font-family: sans-serif;margin-left: 5em;margin-right: 5em;padding-top: 15px;padding-bottom: 15px;}.form-input{display: flex;flex-direction: column;padding-left: 15px;padding-right: 15px;}input[type='text'],input[type='password']{margin-bottom: 13px;border-radius: 3px;border: 1.4px solid #DDDFE2;padding: 1em;font-size: 16px;}input[type='text']::placeholder,input[type='password']::placeholder{color: rgb(148, 147, 147);}.form-button{background-color: #1877F2;color:#FFF;font-weight: bold;font-family: sans-serif;text-align: center;margin-left: 15px;margin-right: 15px;padding: 0.5em;font-size: 20px;border-radius: 5px;margin-bottom: 15px;}.form-button a{text-decoration: none;color: inherit;}.form-button:hover{opacity: .9;}.forget-account{text-align: center;font-family: sans-serif;font-size: 14px;color: #1877F2;margin-bottom: 15px;font-weight: 500;}.login-or-first-separation,.login-or-last-separation{width:40%;}.login-or{margin-top: 20px;font-family: sans-serif;font-size: 13px;display:flex;flex-direction: row;flex-wrap: wrap;text-align: center;margin-bottom: 15px;}.create-account{width: 50%;background-color: #42B72A;color:#FFF;font-weight: bold;font-family: sans-serif;text-align: center;margin-left: 25%;padding-top: 0.5em;padding-bottom: 0.5em;font-size: 18px;border-radius: 5px;margin-bottom: 15px;transition: width 1s, margin-left 0.5s;}.create-account a{text-decoration: none;color: inherit;}.create-account:hover{background-color: #3da828;width: 40%;margin-left: 30%;}
C'est tous s'il y'a des problémes n'hésite pas à laisser des commentaires.
