Un code de Maxi-Digital

Ouvrir dans l'éditeur Publiez votre code

Recommandé

8 October 2025

Animation de chargement CSS Structure HTML

10 May 2025

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

/* Variables CSS */
        :root {
            --primary-color: #2563eb;
            --secondary-color: #1e40af;
            --accent-color: #3b82f6;
            --text-color: #1f2937;
        }

/* Navigation */
        .navbar {
            position: fixed;
            width: 100%;
            padding: 1.5rem;
            background: rgba(255, 255, 255, 0.95);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            transition: all 0.3s ease;
        }

.nav-content {
            max-width: 1200px;
            margin: 0 auto;
            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 ease;
        }

.nav-links a:hover {
            color: var(--primary-color);
        }

/* Hero Section */
        .hero {
            height: 100vh;
            background: linear-gradient(135deg, #2563eb, #3b82f6);
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
            padding: 0 2rem;
        }

.hero-content {
            opacity: 0;
            transform: translateY(20px);
            animation: fadeIn 1s forwards;
        }

@keyframes fadeIn {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

.hero h1 {
            font-size: 3.5rem;
            margin-bottom: 1rem;
        }

.hero p {
            font-size: 1.2rem;
            margin-bottom: 2rem;
        }

.cta-button {
            padding: 1rem 2rem;
            background: white;
            color: var(--primary-color);
            border: none;
            border-radius: 30px;
            font-size: 1.1rem;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

.cta-button:hover {
            transform: translateY(-3px);
        }

/* Services Section */
        .services {
            padding: 5rem 2rem;
            background: #f8fafc;
        }

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

.service-card {
            background: white;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

.service-card:hover {
            transform: translateY(-10px);
        }

.service-card i {
            font-size: 2.5rem;
            color: var(--primary-color);
            margin-bottom: 1rem;
        }

/* Portfolio Section */
        .portfolio {
            padding: 5rem 2rem;
        }

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

.portfolio-item {
            position: relative;
            overflow: hidden;
            border-radius: 10px;
            aspect-ratio: 4/3;
        }

.portfolio-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

.portfolio-item:hover img {
            transform: scale(1.1);
        }

/* Responsive Design */
        @media (max-width: 768px) {
            .nav-links {
                display: none;
            }

.hero h1 {
                font-size: 2.5rem;
            }

.services-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <nav class="navbar">
        <div class="nav-content">
            <div class="logo">WebAgency</div>
            <div class="nav-links">
                <a href="#home">Accueil</a>
                <a href="#services">Services</a>
                <a href="#portfolio">Portfolio</a>
                <a href="#contact">Contact</a>
            </div>
        </div>
    </nav>

<section class="hero" id="home">
        <div class="hero-content">
            <h1>Transformez votre présence digitale</h1>
            <p>Des solutions web sur mesure pour propulser votre business</p>
            <button class="cta-button">Démarrer un projet</button>
        </div>
    </section>

<section class="services" id="services">
        <div class="services-grid">
            <div class="service-card">
                <i class="fas fa-code"></i>
                <h3>Développement Web</h3>
                <p>Applications performantes et évolutives</p>
            </div>
            <div class="service-card">
                <i class="fas fa-mobile-alt"></i>
                <h3>Mobile First</h3>
                <p>Design responsive optimisé mobile</p>
            </div>
            <div class="service-card">
                <i class="fas fa-rocket"></i>
                <h3>SEO & Performance</h3>
                <p>Optimisation et référencement naturel</p>
            </div>
        </div>
    </section>

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

// Menu mobile
        const menuToggle = document.createElement('div');
        menuToggle.innerHTML = '<i class="fas fa-bars"></i>';
        menuToggle.classList.add('menu-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'
                });
            });
        });

// Changement de couleur au scroll
        window.addEventListener('scroll', () => {
            if (window.scrollY > 50) {
                document.querySelector('.navbar').style.background = 'rgba(255, 255, 255, 0.98)';
            } else {
                document.querySelector('.navbar').style.background = 'rgba(255, 255, 255, 0.95)';
            }
        });
    </script>
</body>
</html>

Un code de Maxi-Digital

Recommandé

Animation de chargement CSS Structure HTML

Un code de Mete

mot de passe de connexion

HTML

CSS

JS

Recommandé

Animation de chargement CSS Structure HTML

Un code de Mete

mot de passe de connexion

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS