Page de connexion Facebook
Bienvenue sur cette partie où nous allons essayer de creér la page de connexion facebook avec HTML et CSS.
Nous sommes ravis de partager avec vous un tutoriel complet sur la création d'une page de connexion Facebook! Que vous soyez un passionné du développement web ou simplement curieux d'apprendre, ce tutoriel vous guidera pas à pas à travers les étapes nécessaires pour créer votre propre page de connexion Facebook personnalisée.
N'oubliez pas que l'apprentissage est une expérience interactive! N'hésitez pas à aller de l'avant, essayer différentes idées et voir comment vous pouvez apporter votre propre touche créative à votre page de connexion Facebook.
Nous sommes impatients de voir les magnifiques pages de connexion que vous allez créer à partir de ce tutoriel! Alors, préparez-vous à plonger dans l'univers passionnant du développement web et à briller avec votre propre page de connexion Facebook personnalisée.
Pour cette partie, nous aurons besoin de deux fichiers : un fichier HTML et un fichier CSS, afin que vous puissiez vous concentrer sur le côté créatif et la personnalisation de votre page de connexion en fonction de vos goûts et de votre style.
Bon apprentissage et amusez-vous!
Commençons par notre fichier HTML
index.html
<!DOCTYPE html>
<!-- RudLess -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Facebook Login Page |</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container flex">
<div class="facebook-page flex">
<div class="text">
<h1>facebook</h1>
<p>Avec facebook, partagez et restez en </p>
<p> avec votre entourage.</p>
</div>
<form action="#">
<input type="email" placeholder="Numéro mobile ou e-mail" required>
<input type="password" placeholder="Mot de passe" required>
<div class="link">
<button type="submit" class="login">Se connecter</button>
<a href="#" class="forgot">Mot de passe oublié ?</a>
</div>
<hr>
<div class="button">
<a href="#">Créer un nouveau compte</a>
</div>
</form>
</div>
</div>
</body>
</html>
style.css
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
.flex {
display: flex;
align-items: center;
}
.container {
padding: 0 15px;
min-height: 100vh;
justify-content: center;
background: #f0f2f5;
}
.facebook-page {
justify-content: space-between;
max-width: 1000px;
width: 100%;
}
.facebook-page .text {
margin-bottom: 90px;
}
.facebook-page h1 {
color: #1877f2;
font-size: 4rem;
margin-bottom: 10px;
}
.facebook-page p {
font-size: 1.75rem;
white-space: nowrap;
}
form {
display: flex;
flex-direction: column;
background: #fff;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1),
0 8px 16px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 100%;
}
form input {
height: 55px;
width: 100%;
border: 1px solid #ccc;
border-radius: 6px;
margin-bottom: 15px;
font-size: 1rem;
padding: 0 14px;
}
form input:focus {
outline: none;
border-color: #1877f2;
}
::placeholder {
color: #777;
font-size: 1.063rem;
}
.link {
display: flex;
flex-direction: column;
text-align: center;
gap: 15px;
}
.link .login {
border: none;
outline: none;
cursor: pointer;
background: #1877f2;
padding: 15px 0;
border-radius: 6px;
color: #fff;
font-size: 1.25rem;
font-weight: 600;
transition: 0.2s ease;
}
.link .login:hover {
background: #0d65d9;
}
form a {
text-decoration: none;
}
.link .forgot {
color: #1877f2;
font-size: 0.875rem;
}
.link .forgot:hover {
text-decoration: underline;
}
hr {
border: none;
height: 1px;
background-color: #ccc;
margin-bottom: 20px;
margin-top: 20px;
}
.button {
margin-top: 25px;
text-align: center;
margin-bottom: 20px;
}
.button a {
padding: 15px 20px;
background: #42b72a;
border-radius: 6px;
color: #fff;
font-size: 1.063rem;
font-weight: 600;
transition: 0.2s ease;
}
.button a:hover {
background: #3ba626;
}
@media (max-width: 900px) {
.facebook-page {
flex-direction: column;
text-align: center;
}
.facebook-page .text {
margin-bottom: 30px;
}
}
@media (max-width: 460px) {
.facebook-page h1 {
font-size: 3.5rem;
}
.facebook-page p {
font-size: 1.3rem;
}
form {
padding: 15px;
}
}