Liamgilles76 द्वारा एक कोड

अनुशंसित

20 April 2025

मेटे का एक कोड

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Connexion - YouTube Music</title>
    <style>
        /* Import de police Google Fonts (Roboto) - Optionnel, mais rend l'apparence plus proche de Google */
        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

body {
            font-family: 'Roboto', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f0f0f0; /* Couleur de fond légère */
            margin: 0;
        }

.login-container {
            background-color: #ffffff;
            padding: 40px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Ombre douce */
            text-align: center;
            width: 100%;
            max-width: 400px; /* Largeur maximale du conteneur */
            box-sizing: border-box; /* Inclut le padding dans la largeur */
        }

.logo {
            margin-bottom: 20px;
        }

.logo h2 {
            color: #FF0000; /* Rouge YouTube */
            font-size: 28px;
            margin: 0;
            font-weight: 500; /* Poids de police pour "YouTube" */
        }

.logo h2 span {
            color: #212121; /* Gris foncé pour "Music" */
            font-weight: 300; /* Poids de police plus léger pour "Music" */
        }

h1 {
            font-size: 24px;
            color: #212121;
            margin-bottom: 10px;
            font-weight: 400; /* Poids de police standard */
        }

p.subtitle {
            font-size: 16px;
            color: #5f6368; /* Gris moyen */
            margin-bottom: 30px;
        }

.input-group {
            margin-bottom: 20px;
        }

.input-group input {
            width: calc(100% - 24px); /* Largeur moins le padding */
            padding: 12px;
            border: 1px solid #dadce0; /* Bordure légère */
            border-radius: 4px;
            font-size: 16px;
            box-sizing: border-box;
            transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
        }

.input-group input:focus {
            border-color: #1a73e8; /* Bleu Google au focus */
            outline: none; /* Supprime l'outline par défaut */
            box-shadow: 0 0 0 1px #1a73e8; /* Ombre bleue au focus */
        }

.link-forgot {
            text-align: left; /* Aligner le lien à gauche */
            margin-bottom: 20px;
        }

.link-forgot a {
            color: #1a73e8; /* Bleu Google */
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
        }

.link-forgot a:hover {
            text-decoration: underline; /* Souligner au survol */
        }

.actions {
            display: flex;
            justify-content: space-between; /* Espacer les éléments */
            align-items: center;
            margin-top: 30px;
        }

.actions button {
            background-color: #1a73e8; /* Bleu Google */
            color: white;
            padding: 12px 24px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 500;
            transition: background-color 0.2s ease-in-out;
        }

.actions button:hover {
            background-color: #1669c9; /* Bleu plus foncé au survol */
        }

.actions .create-account-link {
            color: #1a73e8; /* Bleu Google */
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
        }

.actions .create-account-link:hover {
            text-decoration: underline; /* Souligner au survol */
        }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="logo">
            
            
            <h2>YouTube <span>Music</span></h2>
        </div>
        <h1>Connexion</h1>
        <p class="subtitle">pour continuer vers YouTube Music</p>

<form action="#" method="POST">
            <div class="input-group">
                <input type="email" id="email" name="email" placeholder="Adresse e-mail ou numéro de téléphone" required>
            </div>
            <div class="input-group">
                <input type="password" id="password" name="password" placeholder="Mot de passe" required>
            </div>
            
            <div class="link-forgot">
                <a href="#">Mot de passe oublié ?</a>
            </div>

<div class="actions">
                <a href="#" class="create-account-link">Créer un compte</a>
                <button type="submit">Suivant</button>
            </div>
        </form>
    </div>
</body>
</html>

Liamgilles76 द्वारा एक कोड

अनुशंसित

मेटेहन द्वारा एक कोड

मेटे का एक कोड

मेटे का एक कोड

HTML

CSS

JS

अनुशंसित

मेटेहन द्वारा एक कोड

मेटे का एक कोड

मेटे का एक कोड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS