Um Código de Liamgilles76

Abrir no Editor Video Publique Seu Código

Recomendado

2 April 2025

Um código por creativefunction305

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>

Um Código de Liamgilles76

Recomendado

Espátula de arrasto

estado de fluxo

Um código por creativefunction305

HTML

CSS

JS

Recomendado

Espátula de arrasto

estado de fluxo

Um código por creativefunction305

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS