Un código de Liamgilles76

Abrir en el editor Publica tu código

Recomendado

29 July 2024

Un código de Mete

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>

Un código de Liamgilles76

Recomendado

horario de eventos

Un código de bachir123

Un código de Mete

HTML

CSS

JS

Recomendado

horario de eventos

Un código de bachir123

Un código de Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS