Modèle HTML de connexion pour le personnel de restaurant

43 Gemini123

Ouvrir dans l'éditeur Video Publiez votre code

Modèle HTML de connexion pour le personnel de restaurant

Recommandé

20 March 2024

Modèle de page de destination HTML avec animations

6 March 2025

Un code par lebdev

12 August 2025

Extrait de code d'animation CSS Heart

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>

Recommandé

Modèle de page de destination HTML avec animations

Un code par lebdev

Extrait de code d'animation CSS Heart

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS