Um Código da Maxi-Digital

Abrir no Editor Publique Seu Código

Recomendado

26 February 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>

Um Código da Maxi-Digital

Recomendado

Um código por securearray494

Um Código por Neumorfismo

Um código por smartarray391

HTML

CSS

JS

Recomendado

Um código por securearray494

Um Código por Neumorfismo

Um código por smartarray391

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS