Un codice di Maxi-Digital

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

25 April 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

Un codice di Metehan

Un codice di Skyrreum

Modulo di Accesso Moderno

HTML

CSS

JS

Consigliato

Un codice di Metehan

Un codice di Skyrreum

Modulo di Accesso Moderno

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS