Un code de Maxi-Digital

Ouvrir dans l'éditeur Publiez votre code

Recommandé

28 July 2025

Clavier virtuel HTML avec moniteur de saisie

HTML

<!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 code de Maxi-Digital

Recommandé

code bloom

Un code par alejandrokundrah

Clavier virtuel HTML avec moniteur de saisie

HTML

CSS

JS

Recommandé

code bloom

Un code par alejandrokundrah

Clavier virtuel HTML avec moniteur de saisie

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS