Um Código da Maxi-Digital

Abrir no Editor Publique Seu Código

Recomendado

28 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>

Um Código da Maxi-Digital

Recomendado

Um Código de alejandrob.f2012

falha na máquina da realidade

Um código por mo832860

HTML

CSS

JS

Recomendado

Um Código de alejandrob.f2012

falha na máquina da realidade

Um código por mo832860

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS