Un código de Liamgilles76

512 Liamgilles76

Abrir en el editor Publica tu código

Recomendado

23 November 2024

Botones de redes sociales al pasar el mouse

3 February 2025

reclutamiento de fuerzas especiales

27 September 2024

Latidos del corazón

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

Botones de redes sociales al pasar el mouse

reclutamiento de fuerzas especiales

Latidos del corazón

HTML

CSS

JS

Recomendado

Botones de redes sociales al pasar el mouse

reclutamiento de fuerzas especiales

Latidos del corazón

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS