Un code par Liamgilles76

1,566 Liamgilles76

Ouvrir dans l'éditeur Publiez votre code

Recommandé

15 May 2026

Code source HTML5 du jeu Drive Mad

14 June 2024

Parchemin funeste

22 August 2025

Extrait de code d'animation CSS Heart

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>

CSS