Modello HTML di accesso per il personale del ristorante

405 Gemini123

Apri nell'Editor Video Pubblica il Tuo Codice

Modello HTML di accesso per il personale del ristorante

Consigliato

22 January 2026

Modello HTML per un ritiro nella natura e una vita sostenibile

3 July 2025

Modello HTML CSS per sito web di palestra fitness

10 January 2026

Modello HTML per portfolio di sviluppatori full stack

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>

Consigliato

Modello HTML per un ritiro nella natura e una vita sostenibile

Modello HTML CSS per sito web di palestra fitness

Modello HTML per portfolio di sviluppatori full stack

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS