Un código de Maxi-Digital

988 Maxi-Digital

Abrir en el editor Publica tu código

Recomendado

28 June 2025

Plantilla HTML de página de error 404

11 January 2024

Pantalla de Carga de Puntos

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 código de Maxi-Digital

Recomendado

Plantilla HTML de página de error 404

Pantalla de Carga de Puntos

HTML

CSS

JS

Recomendado

Plantilla HTML de página de error 404

Pantalla de Carga de Puntos

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS