Modèle HTML de connexion pour le personnel de restaurant

406 Gemini123

Ouvrir dans l'éditeur Video Publiez votre code

Modèle HTML de connexion pour le personnel de restaurant

Recommandé

18 December 2025

Demande de jeu Flash Ruffle : Mutilate a Doll 2 HTML

13 June 2025

Interface utilisateur de l'application Réveil et Chronomètre

19 October 2024

Portfolio de développeur HTML V2

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Restaurant Staff Login</title>
    <style>
        :root {
            --primary-color: #e67e22;
            --dark-color: #2c3e50;
            --light-color: #ecf0f1;
        }

body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), 
                        url('https://images.unsplash.com/photo-1514933651103-005eec06c04b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
            background-size: cover;
            background-position: center;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0;
        }

.login-card {
            background: rgba(255, 255, 255, 0.95);
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.3);
            width: 100%;
            max-width: 400px;
            text-align: center;
        }

.login-card h1 {
            color: var(--dark-color);
            margin-bottom: 5px;
            font-size: 28px;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

.login-card p {
            color: #666;
            margin-bottom: 30px;
            font-size: 14px;
        }

.form-group {
            margin-bottom: 20px;
            text-align: left;
        }

.form-group label {
            display: block;
            margin-bottom: 5px;
            color: var(--dark-color);
            font-weight: 600;
        }

.form-group input {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            box-sizing: border-box;
            transition: border-color 0.3s;
        }

.form-group input:focus {
            outline: none;
            border-color: var(--primary-color);
        }

.login-btn {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 12px;
            width: 100%;
            border-radius: 5px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: background 0.3s;
            margin-top: 10px;
        }

.login-btn:hover {
            background-color: #d35400;
        }

.options {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 15px;
            font-size: 13px;
        }

.options a {
            color: var(--primary-color);
            text-decoration: none;
        }

.footer-text {
            margin-top: 30px;
            font-size: 12px;
            color: #999;
        }
    </style>
</head>
<body>

<div class="login-card">
        <h1>Bistro Royale</h1>
        <p>Staff Management Portal</p>
        
        <form action="#">
            <div class="form-group">
                <label for="username">Username or Email</label>
                <input type="text" id="username" name="username" placeholder="Enter your ID" required>
            </div>
            
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" placeholder="••••••••" required>
            </div>

<div class="options">
                <label>
                    <input type="checkbox"> Remember me
                </label>
                <a href="#">Forgot Password?</a>
            </div>

</body>
</html>

Modèle HTML de connexion pour le personnel de restaurant

Recommandé

Demande de jeu Flash Ruffle : Mutilate a Doll 2 HTML

Interface utilisateur de l'application Réveil et Chronomètre

Portfolio de développeur HTML V2

HTML

CSS

JS

Recommandé

Demande de jeu Flash Ruffle : Mutilate a Doll 2 HTML

Interface utilisateur de l'application Réveil et Chronomètre

Portfolio de développeur HTML V2

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS