Un codice di Maxi-Digital

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

10 January 2026

Modello HTML di accesso per il personale del ristorante

23 January 2025

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TechMaster | Tutoriels Informatiques</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        /* Reset et Variables */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', sans-serif;
        }

:root {
            --primary-color: #10B981;
            --secondary-color: #059669;
            --dark-color: #1F2937;
            --text-color: #374151;
        }

/* Navigation */
        .navbar {
            position: fixed;
            width: 100%;
            padding: 1rem;
            background: rgba(255, 255, 255, 0.98);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.nav-content {
            max-width: 1200px;
            margin: 0 auto;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.logo {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-color);
        }

.nav-links {
            display: flex;
            gap: 2rem;
        }

.nav-links a {
            text-decoration: none;
            color: var(--text-color);
            font-weight: 500;
            transition: color 0.3s;
        }

/* Hero Section */
        .hero {
            padding: 120px 2rem 2rem;
            background: linear-gradient(135deg, #10B981, #059669);
            color: white;
            text-align: center;
        }

.search-container {
            max-width: 600px;
            margin: 2rem auto;
            position: relative;
        }

.search-input {
            width: 100%;
            padding: 1rem 2rem;
            border-radius: 30px;
            border: none;
            font-size: 1.1rem;
        }

/* Catégories */
        .categories {
            padding: 4rem 2rem;
            background: #F3F4F6;
        }

.categories-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }

.category-card {
            background: white;
            padding: 2rem;
            border-radius: 10px;
            text-align: center;
            transition: transform 0.3s;
            cursor: pointer;
        }

.category-card:hover {
            transform: translateY(-5px);
        }

/* Tutoriels */
        .tutorials {
            padding: 4rem 2rem;
        }

.tutorials-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }

.tutorial-card {
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;
        }

.tutorial-card:hover {
            transform: translateY(-5px);
        }

.tutorial-image {
            height: 200px;
            background-size: cover;
            background-position: center;
        }

.tutorial-content {
            padding: 1.5rem;
        }

.difficulty {
            display: inline-block;
            padding: 0.3rem 0.8rem;
            border-radius: 20px;
            font-size: 0.9rem;
        }

.beginner { background: #D1FAE5; color: #065F46; }
        .intermediate { background: #FEF3C7; color: #92400E; }
        .advanced { background: #FEE2E2; color: #991B1B; }

/* Newsletter */
        .newsletter {
            background: var(--dark-color);
            color: white;
            padding: 4rem 2rem;
            text-align: center;
        }

.newsletter-form {
            max-width: 500px;
            margin: 1rem auto;
            display: flex;
            gap: 1rem;
        }

.newsletter-input {
            flex: 1;
            padding: 1rem;
            border-radius: 5px;
            border: none;
        }

@media (max-width: 768px) {
            .nav-links { display: none; }
            .tutorials-grid { grid-template-columns: 1fr; }
            .newsletter-form { flex-direction: column; }
        }
    </style>
</head>
<body>
    <nav class="navbar">
        <div class="nav-content">
            <div class="logo">TechMaster</div>
            <div class="nav-links">
                <a href="#categories">Catégories</a>
                <a href="#tutorials">Tutoriels</a>
                <a href="#blog">Blog</a>
                <a href="#contact">Contact</a>
            </div>
            <i class="fas fa-search"></i>
        </div>
    </nav>

<section class="hero">
        <h1>Apprenez la technologie de demain</h1>
        <p>Plus de 1000 tutoriels gratuits en programmation, cybersécurité et IA</p>
        <div class="search-container">
            <input type="text" class="search-input" placeholder="Rechercher un tutoriel...">
            <i class="fas fa-search"></i>
        </div>
    </section>

<section class="categories" id="categories">
        <div class="categories-grid">
            <div class="category-card">
                <i class="fas fa-code fa-3x" style="color: var(--primary-color);"></i>
                <h3>Programmation</h3>
                <p>125 tutoriels</p>
            </div>
            <div class="category-card">
                <i class="fas fa-shield-alt fa-3x" style="color: var(--primary-color);"></i>
                <h3>Cybersécurité</h3>
                <p>89 tutoriels</p>
            </div>
            <div class="category-card">
                <i class="fas fa-robot fa-3x" style="color: var(--primary-color);"></i>
                <h3>Intelligence Artificielle</h3>
                <p>64 tutoriels</p>
            </div>
        </div>
    </section>

<section class="tutorials" id="tutorials">
        <div class="tutorials-grid">
            <div class="tutorial-card">
                <div class="tutorial-image" style="background-image: url('https://source.unsplash.com/random/800x600?python')"></div>
                <div class="tutorial-content">
                    <span class="difficulty beginner">Débutant</span>
                    <h3>Apprendre Python en 30 jours</h3>
                    <p>Maîtrisez les bases de la programmation avec Python</p>
                    <div style="margin-top: 1rem; color: var(--text-color);">
                        <i class="fas fa-clock"></i> 4h30 • <i class="fas fa-user-graduate"></i> 15,000+
                    </div>
                </div>
            </div>

<div class="tutorial-card">
                <div class="tutorial-image" style="background-image: url('https://source.unsplash.com/random/800x601?cybersecurity')"></div>
                <div class="tutorial-content">
                    <span class="difficulty advanced">Avancé</span>
                    <h3>Hacking Éthique</h3>
                    <p>Les fondamentaux de la sécurité informatique</p>
                    <div style="margin-top: 1rem; color: var(--text-color);">
                        <i class="fas fa-clock"></i> 6h00 • <i class="fas fa-user-graduate"></i> 8,500+
                    </div>
                </div>
            </div>

<div class="tutorial-card">
                <div class="tutorial-image" style="background-image: url('https://source.unsplash.com/random/800x602?ai')"></div>
                <div class="tutorial-content">
                    <span class="difficulty intermediate">Intermédiaire</span>
                    <h3>Introduction au Machine Learning</h3>
                    <p>Créez votre premier modèle prédictif</p>
                    <div style="margin-top: 1rem; color: var(--text-color);">
                        <i class="fas fa-clock"></i> 3h15 • <i class="fas fa-user-graduate"></i> 12,000+
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="newsletter">
        <h2>Abonnez-vous à notre newsletter</h2>
        <p>Recevez les nouveaux tutoriels directement dans votre boîte mail</p>
        <form class="newsletter-form">
            <input type="email" class="newsletter-input" placeholder="Entrez votre email">
            <button type="submit" class="cta-button" style="background: var(--primary-color); color: white; border: none; padding: 1rem 2rem; border-radius: 5px;">
                S'abonner
            </button>
        </form>
    </section>

document.querySelectorAll('.category-card, .tutorial-card').forEach(el => {
            el.style.transform = 'translateY(20px)';
            el.style.opacity = 0;
            observer.observe(el);
        });

// Menu mobile
        const menuToggle = document.createElement('i');
        menuToggle.className = 'fas fa-bars mobile-toggle';
        document.querySelector('.nav-content').appendChild(menuToggle);

menuToggle.addEventListener('click', () => {
            document.querySelector('.nav-links').classList.toggle('active');
        });

// Smooth Scroll
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>
</html>

Un codice di Maxi-Digital

Consigliato

Modello HTML di accesso per il personale del ristorante

Un codice di creativearray554

Un codice di adonis1887

HTML

CSS

JS

Consigliato

Modello HTML di accesso per il personale del ristorante

Un codice di creativearray554

Un codice di adonis1887

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS